@extends('backend.layouts.admin.app')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class="active">Locations</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    @if(auth()->user()->isAdmin() || auth()->user()->can('locations.create'))
    <a href="{{ route('admin.locations.create') }}" class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> Add Location</a>
    @endif
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="box shadow-none">
    <div class="box-body pt-0">
      
        <table aria-describedby="tbl-users-desc" class="table table-bordered table-hover" id="tbl-users">
          <thead>
            <th scope="col">Name</th>
            <th scope="col">Terminal</th>
            <th scope="col">Address</th>
            <th scope="col">Latitude</th>
            
            <th scope="col">Longitude</th>
            <th scope="col">Type</th>
            <th scope="col">Status</th>
            <th scope="col" class="action">Action</th>
          </thead>
          <tbody>
            @foreach($locations as $location)
            <tr>
              <td data-type='text'><a href="{{ $location->google_map_link }}" target="_blank">{{$location->name}}</a></td>
              <td data-type='text'>{{$location->terminal}}</td>
              <td data-type='text'><a href="{{ $location->google_map_link }}" target="_blank">{{$location->address}}</a></td>
              <td data-type='text'>{{$location->latitude}}</td>
              
              <td data-type='none' >{{$location->longitude}}</td>
              <td data-type='none' >{{ucwords($location->type)}}</td>
              <td data-type='none' data-sort="{{ $location->status ? 'active' : 'inactive' }}">
                @if(auth()->user()->isAdmin() || auth()->user()->can('locations.edit'))
                <div class="form-check form-switch">
                  <input class="form-check-input status-toggle" type="checkbox" role="switch" 
                         id="status-toggle-{{ $location->id }}"
                         data-id="{{ $location->id }}" 
                         {{ $location->status ? 'checked' : '' }} 
                         aria-checked="{{ $location->status ? 'true' : 'false' }}"
                         aria-label="Toggle location status">
                  <label class="form-check-label" for="status-toggle-{{ $location->id }}"></label>
                </div>
                @else
                <span>{{ $location->status ? 'Active' : 'Inactive' }}</span>
                @endif
              </td>
              <td data-type='none'>
                @if(auth()->user()->isAdmin() || auth()->user()->can('locations.edit'))
                <a href="{{ route('admin.locations.edit', $location->id) }}" class="me-3" title="Edit">
                  <em class="iconsax icon-292D32 fs-20" icon-name="edit-1"></em>
                </a>
                @endif
                @if(auth()->user()->isAdmin())
                <a href="javascript:void(0)" class="delete-location" data-id="{{ $location->id }}" title="Delete">
                  <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                </a>
                @endif
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

</section>
<!-- /.content -->




<script type="text/javascript">
  $(document).ready(function() {
    // Ensure aria-checked is properly set for all switches
    $('.status-toggle').each(function() {
      var isChecked = $(this).is(':checked');
      $(this).attr('aria-checked', isChecked ? 'true' : 'false');
    });
    
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [], // Disable initial sorting to maintain server-side order
      columnDefs: [
        { targets: ['action'], orderable: false },
        { 
          targets: 6, // Status column (0-indexed)
          type: 'dom-data-sort'
        }
      ]
    });
    
    // Add custom sorting for status column
    $.fn.dataTable.ext.order['dom-data-sort'] = function(settings, col) {
      return this.iterator('table', function(node, i) {
        var $node = $(node);
        var sortValue = $node.find('td:eq(' + col + ')').attr('data-sort') || 
                       $node.find('td:eq(' + col + ')').text().toLowerCase();
        return sortValue;
      });
    };
    
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <div class="d-flex justify-content-end flex-wrap">
      <div class="custom-width-200 position-relative me-2">
        <select id="typeFilter" class="form-control max-w-200">
          <option value="">All Types</option>
          <option value="loading">Loading</option>
          <option value="offloading">Offloading</option>
        </select>
      </div>
      
    </div>
  `);

  // Filter on change
  $('#typeFilter').on('change', function () {
    let selected = $(this).val();
    // Use case-insensitive search with regex
    if (selected) {
      table.column(5).search('^' + selected + '$', true, false).draw(); // case-insensitive exact match
    } else {
      table.column(5).search('').draw(); // clear filter
    }
  });

  });

  // Handle status toggle
  $(document).on('change', '.status-toggle', function() {
    var locationId = $(this).data('id');
    var isChecked = $(this).is(':checked');
    var originalState = !isChecked;
    
    $.ajax({
      url: '{{ route("admin.locations.toggle-status", ":id") }}'.replace(':id', locationId),
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {
        if (response.status === 'success') {
          // Update aria-checked attribute
          $('.status-toggle[data-id="' + locationId + '"]').attr('aria-checked', response.data.status);
          
          // Show success message
          toastr.success(response.message);
          setTimeout(function() {
            location.reload();
          }, 1000);
        }
      },
      error: function(xhr) {
        // Revert the checkbox state
        $('.status-toggle[data-id="' + locationId + '"]').prop('checked', originalState);
        
        let errorMessage = 'Failed to update status';
        if (xhr.responseJSON && xhr.responseJSON.message) {
          errorMessage = xhr.responseJSON.message;
        }
        toastr.error(errorMessage);
      }
    });
  });

  // Handle delete location
  $(document).on('click', '.delete-location', function() {
    var locationId = $(this).data('id');
      // First, check if location can be deleted
    $.get('{{ route('admin.locations.checkDeletable', ':id') }}'.replace(':id', locationId), function(response) {
      if (!response.canDelete) {
        Swal.fire({
          title: 'Cannot Delete Location',
          text: response.message,
          icon: 'warning',
          confirmButtonText: 'OK'
        });
      } else {
        Swal.fire({
          title: 'Are you sure?',
          text: "This location will be deleted. You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
              url: '{{ route("admin.locations.destroy", ":id") }}'.replace(':id', locationId),
              type: 'DELETE',
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              success: function(response) {
                if (response.status === 'success') {
                  // Remove the row from the table
                  $('tr').has('.delete-location[data-id="' + locationId + '"]').fadeOut(300, function() {
                    $(this).remove();
                  });
                  toastr.success(response.message);
                }
              },
              error: function(xhr) {
                let errorMessage = 'Failed to delete location';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                  errorMessage = xhr.responseJSON.message;
                }
                toastr.error(errorMessage);
              }
            });
          }
        });
      }
    });
  });
</script>

@endsection