@extends('adminlte::page')

@section('title', 'HeroLegend')

@section('content_header')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('content')
    <div class="row">
        @include('layouts.message')
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Server</h3>
                    <br>
                    <div class="row">
                        <div class="col-sm-12 btn-group" role="group" aria-label="Server actions">
                            <a href="{{ action('ServerController@create') }}" title="Add New Server">
                                <button class="btn btn-primary btn-sm"><i class="fa fa-bolt" aria-hidden="true"></i> Add
                                    New
                                </button>
                            </a>
                            @if(!$maintenance)
                                <a href="{{route('server-maintenance',['action' => 'on'])}}" title="Maintenance"
                                   onclick="return confirm('Are you sure?')">
                                    <button class="btn btn-success btn-sm"><i class="fa fa-wrench"
                                                                              aria-hidden="true"></i>
                                        Turn On Maintenance
                                    </button>
                                </a>
                            @else
                                <a href="{{route('server-maintenance',['action' => 'off'])}}" title="Maintenance"
                                   onclick="return confirm('Are you sure?')">
                                    <button class="btn btn-danger btn-sm"><i class="fa fa-wrench"
                                                                             aria-hidden="true"></i>
                                        Turn Off Maintenance
                                    </button>
                                </a>
                            @endif

                            <a href="#" title="Merge Server">
                                <button class="btn btn-dropbox btn-sm" data-toggle="modal"
                                        data-target="#mergeServerModal"><i class="fa fa-handshake-o"
                                                                           aria-hidden="true"></i> Merge Server
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <div style="text-align: right">
                        <form method="GET" action="#" accept-charset="UTF-8"
                              class="form-inline my-2 my-lg-0 float-right" role="search">
                            <div class="input-group input-group-sm" style="width: 150px;">
                                <input type="text" name="table_search" class="form-control pull-right"
                                       placeholder="Search">
                                <div class="input-group-btn">
                                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Server Name</th>
                                <th>Server Host</th>
                                <th>Server Port</th>
                                <th>Server Alias</th>
                                <th>Server Status</th>
                                <th>Server Join</th>
                                <th>Server Number Member</th>
                                <th style="width: 50%">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($serversList as $serverslist)
                                <tr>
                                    <td>{{ $serverslist->server_id }}</td>
                                    <td>{{ $serverslist->server_name }}</td>
                                    <td>{{ $serverslist->server_host }}</td>
                                    <td>{{ $serverslist->server_port }}</td>
                                    <td>{{ $serverslist->server_alias }}</td>
                                    <td>{{ $serverslist->server_status }}</td>
                                    <td>{{ $serverslist->server_join }}</td>
                                    <td>{{ $serverslist->server_number_member }}</td>
                                    <td style="width: 50%">
                                        <a href="{{route('servers.show', ['id' => $serverslist->server_id ])}}"
                                           title="Server Detail">
                                            <button class="btn btn-info btn-sm"><i class="fa fa-eye"
                                                                                   aria-hidden="true"></i> View
                                            </button>
                                        </a>
                                        <a href="{{route('cheating-users', ['id' => $serverslist->server_id ])}}"
                                           title="User Cheating">
                                            <button class="btn btn-warning btn-sm"><i class="fa fa-user-secret"
                                                                                      aria-hidden="true"></i> Cheating
                                                Users
                                            </button>
                                        </a>
                                        <a href="{{route('index-members', ['id' => $serverslist->server_id ])}}"
                                           title="Members">
                                            <button class="btn btn-primary btn-sm"><i class="fa fa-user-o"
                                                                                      aria-hidden="true"></i> Members
                                            </button>
                                        </a>
                                        <div class="dropdown" style="display: inline">
                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button"
                                                    data-toggle="dropdown">
                                                <i class="fa fa-sort-numeric-asc" aria-hidden="true"></i>Arena Rank
                                                <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="{{route('rank-arena', ['id' => $serverslist->server_id ])}}"
                                                       title="Rank Arena">Log</a>
                                                </li>
                                                <li>
                                                    <a href="{{route('realtime-rank-arena', ['id' => $serverslist->server_id ])}}"
                                                       title="Realtime Rank Arena">Realtime</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <a href="{{route('hall-legend.index', ['server_id' => $serverslist->server_id ])}}"
                                           title="User Cheating">
                                            <button class="btn btn-default btn-sm">
                                                <i class="fa fa-user-secret" aria-hidden="true"></i> Hall Legend
                                            </button>
                                        </a>

                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <div class="pagination-wrapper">
                            {{ $serversList->links() }}
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div id="mergeServerModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h3 class="modal-title">Merge Server</h3>
                    </div>
                    <div class="modal-body">
                        <form class="popupform mergeServer">
                            <table cellspacing="0" cellpadding="0" width="100%">
                                <thead>
                                <tr>
                                    <th>Select Server</th>
                                    <th>Merge Into</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <select multiple="multiple" id="merge_server" style="width: 150px">
                                            @foreach($serversList as $serverslist)
                                                <option value="{{ $serverslist->server_id }}">{{ $serverslist->server_name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select id="merge_primary">
                                            <option value="" disabled="disabled" selected>Primary Server</option>
                                            @foreach($serversList as $serverslist)
                                                <option value="{{ $serverslist->server_id }}"
                                                        hidden>{{ $serverslist->server_name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success" id="merge_submit">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script type="text/javascript">
        $(document).ready(function () {

            $('#merge_server').change(function () {
                var foo = $('#merge_server').val();
                $("#merge_primary").val('');
                $("#merge_primary option").hide();
                $.each(foo, function (key, value) {
                    $('#merge_primary option[value=' + value + ']').show();
                });
            });

            $("#merge_submit").on("click", function () {
                var count = $("#merge_server :selected").length;
                if (count < 2) {
                    alert("Select At Least 2 Server!");
                } else if ($("#merge_primary").val() == null) {
                    alert("Select Server To Merge");
                } else {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{route('merge-server')}}",
                        method: "POST",
                        data: {
                            merge_server: $('#merge_server').val(),
                            merge_primary: $("#merge_primary").val()
                        },
                        success: function (data) {
                            location.reload()
                        }
                    });
                }
                return false;
            });

        });

    </script>
@endpush