@extends('adminlte::page')

@section('title', 'HeroLegend')

@section('content')
    <div class="row">
        @include('layouts.message')
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Rank Arena Server: {{$server_id}}</h3>

                    <div class="box-body">
                        <a href="{{route('servers.index')}}" title="Back">
                            <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" aria-hidden="true"></i>
                                Back
                            </button>
                        </a>
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <thead>
                                <tr>
                                    <th> Member ID</th>
                                    <th> Member Name</th>
                                    <th> Arena Rank</th>
                                    <th> Arena Max Rank</th>
                                    <th> Actions</th>
                                </tr>
                                </thead>

                                <tbody>
                                @foreach($members as $member)
                                    <tr @if(isset($member->background_color)) style="background-color: {{$member->background_color}}" @endif>
                                        <td>{{$member->member_id}}</td>
                                        <td>{{$member->member_name}}</td>
                                        <td>{{$member->arena_rank}}</td>
                                        <td>{{$member->arena_max_rank}}</td>
                                        <td>
                                            <button
                                                    class="btn btn-primary btn-sm edit-btn"
                                                    data-toggle="modal"
                                                    data-target="#edit-arena-rank-modal"
                                                    data-member-id="{{$member->member_id}}"
                                                    data-member-name="{{$member->member_name}}"
                                                    data-arena-rank="{{$member->arena_rank}}"
                                                    data-arena-max-rank="{{$member->arena_max_rank}}">
                                                Edit
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>

                            <div class="modal fade" id="edit-arena-rank-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <form id="edit-arena-rank-form"
                                              action="{{route('update-realtime-rank-arena', ['id' => $server_id])}}"
                                              method="post">
                                            {{ csrf_field() }}

                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <h3 class="modal-title">Edit Arena Rank for <b id="member-name"></b>
                                                </h3>
                                            </div>

                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label class="col-form-label">Member Id</label>
                                                    <input id="member-id-show" disabled class="form-control"
                                                           type="number" value="">
                                                    <input id="member-id" class="form-control" type="hidden"
                                                           name="member_id">
                                                </div>
                                                <div class="form-group">
                                                    <label for="arena-rank" class="col-form-label">Arena Rank</label>
                                                    <input type="number" class="form-control" id="arena-rank"
                                                           name="arena_rank">
                                                    <small class="form-text text-muted">Next available ranks: <span id="next-available-ranks"></span></>
                                                </div>
                                                <div class="form-group">
                                                    <label for="arena-max-rank" class="col-form-label">Arena Max
                                                        Rank</label>
                                                    <input type="number" class="form-control" id="arena-max-rank"
                                                           name="arena_max_rank">
                                                </div>
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                    Close
                                                </button>
                                                <button type="submit" class="btn btn-primary">Submit
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pagination-wrapper">
                        {{ $members->appends(request()->except('page'))->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script type="text/javascript">
        $(document).on("click", ".edit-btn", function () {
            let memberId = $(this).data('member-id');
            let memberName = $(this).data('member-name');
            let arenaRank = $(this).data('arena-rank');
            let arenaMaxRank = $(this).data('arena-max-rank');
            $.ajax({
                url: "{{route('get-next-available-rank', ['id'=>$server_id])}}",
                type: "get",
                data : {
                    'arena_rank' : arenaRank
                },
                dataType:'json',
                success: function (response) {
                    if (response.status) {
                        $('#next-available-ranks').text(response.next_ranks.join(", "))
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }

            });


            $("b#member-name").text(memberName)
            $("input#member-id-show").val(memberId);
            $("input#member-id").val(memberId);
            $("input#arena-rank").val(arenaRank);
            $("input#arena-max-rank").val(arenaMaxRank);
        });
    </script>
@endsection