@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">{{$title}}</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    <a href="javascript:void(0)" class="btn btn-sm btn-primary" id="addDocumentBtn"><em class="fa fa-plus-circle"></em> {{__('app.add')}} {{__('app.document')}}</a>
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="box shadow-none">
    <div class="box-body pt-0">
      
          <div class="table-responsive">
            <table class="table table-bordered table-hover" id="documents-table" aria-describedby="list-documents">
              <thead>
                <tr>
                  <th scope="col" class="w-25">{{__('app.document_name')}}</th>
                  <th scope="col" class="w-15">{{__('app.type')}}</th>
                  <th scope="col" class="w-20">{{__('app.info')}}</th>
                  <th scope="col" class="w-15">{{__('app.expiry')}}</th>
                  <th scope="col" class="w-15">{{__('app.created_date_time')}}</th>
                  <th scope="col" class="w-10">{{__('app.status')}}</th>
                  <th scope="col" class="w-10 text-start">{{__('app.action')}}</th>
                </tr>
              </thead>
            </table>
          </div>
      
    </div>
  </div>
  <!-- /.box -->

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

<!-- Hidden template for filters -->
<div id="document-filters-template" style="display: none;">
  <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
    <div class="max-w-200">
      <select id="status_filter" class="form-control w-100">
        <option value="">{{__('app.status')}}</option>
        <option value="active">{{__('app.active')}}</option>
        <option value="expired">{{__('app.expired')}}</option>
      </select>
    </div>
  </div>
</div>

<!-- Document Type Selection Modal -->
<div class="modal fade" id="documentTypeModal" tabindex="-1" aria-labelledby="documentTypeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="documentTypeModalLabel">{{__('app.select_document_type')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>{{__('app.please_select_document_type')}}</p>
        <div class="d-flex flex-column gap-2">
          <a href="javascript:void(0)" class="btn btn-outline-primary" id="selectCompanyDoc">{{__('app.company_document')}}</a>
          <a href="javascript:void(0)" class="btn btn-outline-primary" id="selectDriverDoc">{{__('app.driver_document')}}</a>
          <a href="javascript:void(0)" class="btn btn-outline-primary" id="selectVehicleDoc">{{__('app.vehicle_document')}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Company Document Modal -->
<div class="modal fade" id="addCompanyDocumentModal" tabindex="-1" aria-labelledby="addCompanyDocumentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <!-- Content will be loaded dynamically -->
    </div>
  </div>
</div>

<!-- Driver Document Modal -->
<div class="modal fade" id="addDriverDocumentModal" tabindex="-1" aria-labelledby="addDriverDocumentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <!-- Content will be loaded dynamically -->
    </div>
  </div>
</div>

<!-- Vehicle Document Modal -->
<div class="modal fade" id="addVehicleDocumentModal" tabindex="-1" aria-labelledby="addVehicleDocumentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <!-- Content will be loaded dynamically -->
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    
    // Use global loader functions
    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 = $('#documents-table').DataTable({
      processing: false,
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ route("transporter.documents.datatable") }}',
        type: 'GET',
        data: function(d) {
          d.status_filter = $('#status_filter').val();
          return d;
        },
        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: 'document_name', name: 'document_name', orderable: true },
        { data: 'type', name: 'type', orderable: true },
        { data: 'info', name: 'info', orderable: true },
        { data: 'expiry_date', name: 'expiry_date', orderable: true },
        { data: 'created_at', name: 'created_at', orderable: true },
        { data: 'status', name: 'status', orderable: true, searchable: false },
        { data: 'actions', name: 'actions', orderable: false, searchable: false }
      ],
      info: true,
      searching: true,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [[4, 'desc']],
      orderCellsTop: true,
      orderMulti: false,
      drawCallback: function() {
        try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
        hideLoader();
      }
    });
    
    // Add loader to pagination and other events
    function queueLoader(){
      try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
      loaderTimer = setTimeout(function(){ showLoader(); }, 200);
    }
    table.on('page.dt', queueLoader);
    table.on('length.dt', queueLoader);
    table.on('order.dt', queueLoader);
    $('#documents-table_filter input[type="search"]').attr('placeholder', 'Search');

    // Append filters to DataTable
    var filtersHtml = $('#document-filters-template').html();
    $('#documents-table_filter').append(filtersHtml);

    // Global search event
    $('#documents-table_filter input[type="search"]').on('keyup', function () {
      queueLoader();
      table.search(this.value).draw();
    });

    $('#status_filter').on('change', function () {
      queueLoader();
      table.draw();
    });

    // Add document button
    $('#addDocumentBtn').on('click', function() {
      $('#documentTypeModal').modal('show');
    });

    // Document type selection handlers
    $('#selectCompanyDoc').on('click', function() {
      $('#documentTypeModal').modal('hide');
      window.location.href = '{{ route("transporter.documents.create") }}?type=company';
    });

    $('#selectDriverDoc').on('click', function() {
      $('#documentTypeModal').modal('hide');
      window.location.href = '{{ route("transporter.documents.create") }}?type=driver';
    });

    $('#selectVehicleDoc').on('click', function() {
      $('#documentTypeModal').modal('hide');
      window.location.href = '{{ route("transporter.documents.create") }}?type=vehicle';
    });

    // Delete document functionality
    $(document).on('click', '.delete-document', function(e) {
      e.preventDefault();
      var documentId = $(this).data('document-id');
      var required = $(this).data('required');
      
      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel'
      }).then((result) => {
        if (result.isConfirmed) {
          showLoader();
          $.ajax({
            url: '{{ route("transporter.documents.index") }}/' + documentId,
            type: 'DELETE',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
              hideLoader();
              if (response.status === 'success' || response.success) {
                toastr.success(response.message || 'Document deleted successfully.');
                queueLoader();
                table.draw();
              } else {
                toastr.error(response.message || 'Failed to delete document.');
              }
            },
            error: function(xhr) {
              hideLoader();
              let errorMessage = 'Failed to delete document.';
              if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
              }
              toastr.error(errorMessage);
            }
          });
        }
      });
    });
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@endsection