@extends('admin.template')

@push('scripts')
   <script>
      $(function() {
         var fixHelperModified = function(e, tr) {
            var $originals = tr.children();
            var $helper = tr.clone();
            $helper.children().each(function(index) {
               $(this).width($originals.eq(index).width())
            });
            return $helper;
         },
         updateIndex = function(e, ui) {
            // $('td.index', ui.item.parent()).each(function (i) {
            //    $(this).html(i + 1);
            // });
         };

         $("#sort tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex
         }).disableSelection();

         $('#save').click(function() {
            var order = [];
            $('#sort tbody tr').each(function() {
               order.push($(this).find('#id').text());
            });
            $.ajax({
               url: "{{route('servers.reorder')}}",
               type: 'POST',
               data: {
                  order: order
               },
               success: function(result) {
                  if (result == 1)
                     window.location.reload();
               }
            });
         });

         $('#add-server').click(function() {
            location.href="{{route('servers.add')}}";
         });

         var deleteUrl = null;

         $('.btn-delete').click(function() {
            deleteUrl = $(this).data('url');
         });

         $('#cancel_delete').click(function() {
            deleteUrl = null;
         });

         $('#delete').click(function() {
            if (deleteUrl) {
               $.ajax({
                  url: deleteUrl,
                  type: 'DELETE',
                  success: function(result) {
                     if (result == 1)
                        window.location.reload();
                  }
               });
            }
         });

         function ping(id, ip) {
            $.ajax({
               url: "{{route('servers.ping')}}",
               type: 'GET',
               data: {
                  ip: ip
               },
               success: function(result) {
                  $('#loading' + id).addClass('hidden');
                  if (result) {
                     $('#available' + id).removeClass('hidden');
                  } else {
                     $('#unavailable' + id).removeClass('hidden');
                  }
               },
               error: function(xhr, ajaxOptions, thrownError) {
                  $('#loading' + id).addClass('hidden');
                  $('#unavailable' + id).removeClass('hidden');
               }
            });
         }

         $('.retry-ping').on('click', function() {
            var id = $(this).data('id');
            $('#loading' + id).removeClass('hidden');
            $('#unavailable' + id).addClass('hidden');
            ping(id, $(this).data('ip'));
         });

         var servers = @json($servers);
         servers.forEach(function(server) {
            ping(server.id, server.ip);
         });

        $('.copy-content').on('click', function() {
            copyContent($(this).text());
        });
      });
   </script>

   @if($successMessage)
        <script>
            toastr.options = {
                tapToDismiss: true,
                toastClass: 'toast',
                containerId: 'toast-container',
                debug: false,
                fadeIn: 300,
                fadeOut: 500,
                extendedTimeOut: 1000,
                iconClass: 'toast-info',
                positionClass: 'toast-top-right',
                timeOut: 3000,
                titleClass: 'toast-title',
                messageClass: 'toast-message'
            }

            toastr.success('{{$successMessage}}');
        </script>
   @endif
@endpush

@section('content')
<div class="row">
   <button type="button" id="save" class="btn bg-green waves-effect pull-right" style="margin: 10px;"><i class="material-icons">save</i><span>Save Changes</span></button>
   <button type="button" id="add-server" class="btn bg-light-blue waves-effect pull-right" style="margin: 10px;"><i class="material-icons">add_box</i><span>Add Server</span></button>
</div>

<div class="row clearfix">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="card">
         <div class="body table-responsive">
            <table class="table table-striped" id="sort">
               <thead>
                  <tr>
                     <th>Order</th>
                     <th>#</th>
                     <th>Country</th>
                     <th>City</th>
                     <th>IP</th>
                     <th>Protocole (Port)</th>
                     <th>Access</th>
                     <th>Capacity</th>
                     @if(check_exec())
                        <th>Availability</th>
                     @endif
                     <th>Actions</th>
                  </tr>
               </thead>
               <tbody>
                    @foreach($servers as $server)
                        <tr @if(!$server->is_enabled) class="danger" @endif>
                            <td><a class="btn btn-default btn-rounded icon-only"><i class="material-icons">view_headline</i></a></td>
                            <td id="id">{{$server->id}}</td>
                            <td>
                                <div data-toggle="tooltip" title="{{strtoupper($server->country_code)}}" data-placement="bottom" >
                                    <img class="" style="max-height: 35px; max-width: 35px;" src="/images/flags/ic_flag_{{$server->country_code}}.png" alt="{{$server->country_code}}" >
                                    <span>{{Locale::getDisplayRegion("-$server->country_code", 'en')}}</span>
                                </div>
                            </td>
                            <td>{{"{$server->city}"}}</td>
                            <td><a style="cursor: pointer;" class="copy-content" data-toggle="tooltip" title="Click to copy IP" data-placement="bottom" >{{$server->ip}}</a></td>
                            <td>
                                @if($server->use_file)
                                    <a target="_blank" href="{{route('servers.download', ['id' => $server->id, 'type' => 'uploaded'])}}">Custom file</a>
                                @else
                                    {{"{$server->protocol} ({$server->port})"}}
                                @endif
                            </td>
                            <td>{{$server->is_free ? "Free" : "Premium"}}</td>
                            <td>{{"{$server->connected_devices}/{$server->capacity}"}}</td>
                             @if(check_exec())
                                <td>
                                    <div id="loading{{$server->id}}" class="loading"></div>
                                    <i id="available{{$server->id}}" class="material-icons hidden" style="color:chartreuse; font-size: 30px;">check_circle</i>
                                    <a data-toggle="tooltip" title="Can not reach this server. Click to retry." data-placement="bottom" id="unavailable{{$server->id}}" data-id="{{$server->id}}" data-ip="{{$server->ip}}" class="retry-ping hidden" style="cursor: pointer;">
                                        <i class="material-icons" style="color:crimson; font-size: 30px;">cancel</i>
                                    </a>
                                </td>
                            @endif
                            <td>
                                @if($server->service_provider_link)
                                    <a data-toggle="tooltip" title="Go to server provider page" data-placement="bottom" href="{{ $server->service_provider_link }}" target="_blank" class="btn btn-primary btn-rounded icon-only"><i class="material-icons">open_in_new</i></a>
                                @endif
                                <a href="{{ route('servers.show', $server->id) }}" class="btn btn-success btn-rounded icon-only"><i class="material-icons">mode_edit</i></a>
                                <button type="button" data-url="{{ route('servers.delete', $server->id) }}" class="btn btn-delete btn-warning btn-rounded icon-only" data-toggle="modal" data-target="#delete_modal"><i class="material-icons">delete_forever</i></button>
                            </td>
                        </tr>
                    @endforeach
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>

<!-- Delete modal -->
<div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Delete confirmation <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button></h4>
            </div>
            <div class="modal-body">Do you really want to delete this server?</div>
            <div class="modal-footer">
                <div class="btn-group" role="group">
                    <button type="button" class="btn bg-grey waves-effect" id="cancel_delete" data-dismiss="modal"><i class="material-icons">close</i> <span> CANCEL</span></button>
                    <button type="button" class="btn bg-pink waves-effect" id="delete"><i class="material-icons">warning</i> <span> DELETE</span></button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection