@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">Transporters</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    @if(auth()->user()->isAdmin() || auth()->user()->can('transporters.create'))
    <a href="{{ route('admin.transporters.create') }}"><button class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> Add Transporter</button></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 class="table table-bordered table-hover" id="tbl-users" aria-describedby="index-transporter-list">
          <thead>
            <th scope="col">Transporter</th>
            <th scope="col">Contact Person</th>
            <th scope="col">Email</th>
            <th scope="col">Phone</th>
            
            <th scope="col">In Progress Jobs</th>
            <th scope="col">Status</th>
            <th scope="col" class="action">Action</th>
          </thead>
          <tbody></tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

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

<!-- Missing Documents Modal -->
<div class="modal fade" id="missingDocumentsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="missingDocumentsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="missingDocumentsModalLabel">Missing Required Documents</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">  
        <h5 class="mb-3">Please upload all the mandatory documents before activating this transporter:</h5>
        <ul id="missingDocumentsList" class="list-unstyled">
          <!-- Documents will be populated dynamically -->
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
      </div>
    </div>
  </div>
</div>

<!-- Transporter Jobs Modal -->
<div class="modal fade" id="transporterJobsModal" tabindex="-1" aria-labelledby="transporterJobsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="transporterJobsModalLabel">In Progress Jobs</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul id="transporterJobsList" class="list-unstyled mb-0"></ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal start here -->
<div class="modal fade" id="autologin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-xl">
    <div class="modal-content model-content-autologin">

    </div>
  </div>
</div>
<!-- Modal end here -->



<script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    const showLoader = window.showLoader || function(){ try { window.AppLoader && window.AppLoader.show(); } catch(_) {} };
    const hideLoader = window.hideLoader || function(){ try { window.AppLoader && window.AppLoader.hide(); } catch(_) {} };
    var loaderTimer = null;
    var table = $('#tbl-users').DataTable({
      processing: false,
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ route('admin.transporters.datatable') }}',
        type: 'GET',
        data: function(d){
          d.status = $('#statusFilter').val();
        },
        beforeSend: function(){
          try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
          loaderTimer = setTimeout(function(){ showLoader(); }, 200);
        },
        complete: function(){
          try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
          hideLoader();
        },
        error: function(){
          try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
          hideLoader();
        }
      },
      columns: [
        { data: 'name', name: 'name' },
        { data: 'contact_person', name: 'contact_person_accounts' },
        { data: 'email', name: 'email' },
        { data: 'phone', name: 'phone_accounts' },
        { data: 'jobs_count', name: 'jobs_count'},
        { data: 'status_display', name: 'status'},
        { data: 'actions', name: 'actions', orderable: false, searchable: false }
      ],
      info: true,
      searching: true,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [[0, 'desc']],
      columnDefs: [
        { targets: ['action'], orderable: false }
      ],
      drawCallback: function(){
        try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
        hideLoader();
      }
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $.fn.dataTable.ext.search.push(function(settings, rowData, dataIndex) {
      if (settings.nTable.id !== 'tbl-users') return true;

      const sel = $('#statusFilter').val();
      if (!sel) return true;

      const $row = $(settings.aoData[dataIndex].nTr);
      const status = $row.find('input.status-toggle').prop('checked') ? 'active' : 'inactive';
      return status === sel;
    });

    $('#tbl-users_filter').append(`
      <select id="statusFilter" class="form-control max-w-200">
        <option value="">Status</option>
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
      </select>
    `);

    $('#statusFilter').on('change', function() {
      try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
      loaderTimer = setTimeout(function(){ showLoader(); }, 200);
      table.draw();
    });

    // Handle customer deletion
    $(document).on('click', '.delete-transporter', function() {
        const transporterId = $(this).data('transporter-id');
        const row = $(this).closest('tr');
        var deleteUrl = "{{ route('admin.transporters.destroy', ':id') }}".replace(':id', transporterId);
        var checkUrl = "{{ route('admin.transporters.checkDeletable', ':id') }}".replace(':id', transporterId);

        // First check if transporter can be deleted (has no jobs)
        $.get(checkUrl, function(res) {
          if (!res || res.canDelete === undefined) {
            // Fallback to direct delete
            return confirmAndDelete();
          }
          if (!res.canDelete) {
            Swal.fire({
              title: 'Cannot Delete Transporter',
              text: res.message || 'This transporter is linked with one or more jobs and cannot be deleted.',
              icon: 'warning',
              confirmButtonText: 'OK'
            });
            return;
          }
          // If deletable, ask for confirmation and delete
          confirmAndDelete();
        }).fail(function(){
          // On error, fallback to confirmation and attempt delete
          confirmAndDelete();
        });

        function confirmAndDelete(){
          Swal.fire({
              title: 'Are you sure?',
              text: "This transporter 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: deleteUrl,
                      type: 'DELETE',
                      headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                      },
                      success: function(response) {
                          if (response.status === 'success') {
                              row.remove();
                              toastr.success(response.message);
                              setTimeout(function() {
                                  location.reload();
                              }, 1500);
                          } else {
                              toastr.error(response.message || 'Failed to delete transporter');
                          }
                      },
                      error: function(xhr) {
                          let errorMessage = 'Failed to delete transporter';
                          if (xhr.responseJSON && xhr.responseJSON.message) {
                              errorMessage = xhr.responseJSON.message;
                          }
                          
                          // Show SweetAlert with warning icon for specific error message
                          if (errorMessage.includes('Pending or In-Progress status')) {
                              Swal.fire({
                                  title: 'Cannot Delete Transporter',
                                  text: errorMessage,
                                  icon: 'warning',
                                  confirmButtonText: 'OK',
                                  confirmButtonColor: '#3085d6'
                              });
                          } else {
                              toastr.error(errorMessage);
                          }
                      }
                  });
              }
          });
        }
    });

    // Open jobs modal
    $(document).on('click', '.transporter-jobs-link', function() {
      const transporterId = $(this).data('transporter-id');
      const url = "{{ route('admin.transporters.jobs', ':id') }}".replace(':id', transporterId);

      $('#transporterJobsList').html('<li>Loading...</li>');
      $('#transporterJobsModal').modal('show');

      $.get(url)
        .done(function(res) {
          if (res && res.success && Array.isArray(res.jobs)) {
            if (res.jobs.length === 0) {
              $('#transporterJobsList').html('<li>No in progress jobs.</li>');
              return;
            }
            const items = res.jobs.map(function(id) { return '<li>Job #' + id + '</li>'; }).join('');
            $('#transporterJobsList').html(items);
          } else {
            $('#transporterJobsList').html('<li>Failed to load jobs.</li>');
          }
        })
        .fail(function() {
          $('#transporterJobsList').html('<li>Failed to load jobs.</li>');
        });
    });

  });

  // Status update
  $('.status-toggle').on('change', function() {
      const transporterId = $(this).data('transporter-id');
      const status = $(this).prop('checked') ? '1' : '0';
      const $switch = $(this);
      const $statusText = $switch.closest('td').find('.status-text');
      const $statusDisplay = $switch.closest('td').find('.status-display');
      
      // If switching to active, check documents first
      if (status === '1') {
        checkDocumentsBeforeActivation(transporterId, $switch, $statusText, $statusDisplay);
      } else {
        // If switching to inactive, proceed directly
        updateTransporterStatus(transporterId, status, $switch, $statusText, $statusDisplay);
      }
  });

  // Function to check documents before activation
  function checkDocumentsBeforeActivation(transporterId, $switch, $statusText, $statusDisplay) {
    $.ajax({
      url: "{{ route('admin.transporter.check-documents-and-send-credentials') }}",
      type: 'POST',
      data: {
        transporter_id: transporterId,
        _token: "{{ csrf_token() }}"
      },
      success: function(response) {
        if (response.success) {
          // All documents uploaded, proceed with activation
          toastr.success(response.message);
          updateTransporterStatus(transporterId, '1', $switch, $statusText, $statusDisplay);
        } else if (response.hasMissingDocuments) {
          // Show modal with missing documents and revert toggle
          showMissingDocumentsModal(response.missingDocuments);
          $switch.prop('checked', false); // Revert the toggle
        } else {
          $switch.prop('checked', false); // Revert the toggle
          toastr.error(response.message || 'Failed to check documents');
        }
      },
      error: function(xhr) {
        $switch.prop('checked', false); // Revert the toggle
        let errorMessage = 'An error occurred while checking documents';
        if (xhr.responseJSON && xhr.responseJSON.message) {
          errorMessage = xhr.responseJSON.message;
        }
        toastr.error(errorMessage);
      }
    });
  }

  // Function to update transporter status
  function updateTransporterStatus(transporterId, status, $switch, $statusText, $statusDisplay) {
    $.ajax({
      url: "{{ route('admin.transporter.updateStatus') }}",
      type: "POST",
      data: {
        user_id: transporterId,
        status: status,
        _token: "{{ csrf_token() }}"
      },
      success: function(response) {
        if(response.success) {
          $statusText.text(status);
          $statusDisplay.text(status.charAt(0).toUpperCase() + status.slice(1));
          toastr.success('Status updated successfully');
          setTimeout(function() {
              location.reload();
          }, 1500);
        } else {
          $switch.prop('checked', !$switch.prop('checked'));
          toastr.error(response.message || 'Failed to update status');
        }
      },
      error: function(xhr) {
        $switch.prop('checked', !$switch.prop('checked'));
        toastr.error('Failed to update status');
      }
    });
  }

  // Function to show missing documents modal
  function showMissingDocumentsModal(missingDocuments) {
    let documentsList = '';
    missingDocuments.forEach(function(doc) {
      documentsList += '<li>• ' + doc + '</li>';
    });
    
    $('#missingDocumentsList').html(documentsList);
    $('#missingDocumentsModal').modal('show');
  }

</script>

@endsection