@extends('admin.template')

@push('scripts')
   <script>
      $(function() {

         var deleteId = null;

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

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

         $('#delete').click(function() {
            if (deleteId) {
               $.ajax({
                  url: "{{ route('servers.installed.delete') }}",
                  data: {
                      id : deleteId,
                  },
                  type: 'DELETE',
                  success: function(result) {
                     if (result == 1)
                        window.location.reload();
                  }
               });
            }
         });
      });
   </script>
@endpush

@section('content')
<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>#</th>
                     <th>Country</th>
                     <th>IP</th>
                     <th>Protocol/Port</th>
                     <th>Status</th>
                     <th>Actions</th>
                  </tr>
               </thead>
               <tbody>
                    @foreach($jobs as $job)
                        <tr>
                            <td>{{$job->id}}</td>
                            <td>
                                <div data-toggle="tooltip" title="{{strtoupper($job->country_code)}}" data-placement="bottom" >
                                    <img class="" style="max-height: 35px; max-width: 35px;" src="/images/flags/ic_flag_{{$job->country_code}}.png" alt="{{$job->country_code}}" >
                                    <span>{{Locale::getDisplayRegion("-$job->country_code", 'en')}}</span>
                                </div>
                            </td>
                            <td>{{$job->ip}}</td>
                            <td>{{$job->protocol}}/{{$job->port}}</td>
                            <td>{{$job->status}}</td>
                            <td>
                                @if($job->status == 'success')
                                    <a type="button" href="{{route('servers.download', ['id' => $job->id, 'type' => 'created'])}}" class="btn bg-teal bg-block btn-rounded icon-only"><i class="material-icons">file_download</i></a>
                                @endif
                                <button type="button" data-id="{{ $job->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 class="row clearfix">
                {{$jobs->links('defaults.pagination')}}
            </div>
         </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 file?</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