@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="{{ route('transporter.reports.jobs.export') }}" class="btn btn-sm btn-primary d-none" id="jobs-export"><em class="iconsax text-white fs-20" icon-name="upload-2"></em> {{__('app.download')}}</a>
    <a href="{{ route('transporter.reports.invoices.export') }}" class="btn btn-sm btn-primary d-none" id="invoices-export"><em class="iconsax text-white fs-20" icon-name="upload-2"></em> {{__('app.download')}}</a>
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
    <div class="row">
      <div class="col-md-12">
        <div class="">
          <ul class="nav nav-tabs profile-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active fs-16" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs" type="button" role="tab" aria-controls="jobs" aria-selected="true">{{__('app.jobs.title')}}</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="invoices-tab" data-bs-toggle="tab" data-bs-target="#invoices" type="button" role="tab" aria-controls="invoices" aria-selected="false">{{__('app.invoices.title')}}</button>
            </li>
          </ul>
          <div class="tab-content mt-4" id="myTabContent">
            <div class="tab-pane fade show active" id="jobs" role="tabpanel" aria-labelledby="jobs-tab">
              <!-- Jobs table -->
              <div class="box shadow-none">
                <div class="box-body pt-0">
                  <table class="table table-bordered table-hover" id="tbl-jobs" aria-describedby="reports-jobs-table">
                    <thead>
                      <tr>
                        <th scope="col">{{__('app.jobs.job_id')}}</th>
                        <th scope="col">{{__('app.locations.loading_location')}}</th>
                        <th scope="col">{{__('app.locations.offloading_location')}}</th>
                        <th scope="col">{{__('app.vehicles.title')}}</th>
                        <th scope="col">{{__('app.jobs.job_status')}}</th>
                        <th scope="col">{{__('app.delivery')}}</th>
                        <th scope="col">{{__('app.jobs.load_weight')}}<br><small>(Tons)</small></th>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>
            </div>
           
            <div class="tab-pane fade" id="invoices" role="tabpanel" aria-labelledby="invoices-tab">
              <!-- Invoices table -->
              <div class="box shadow-none">
                <div class="box-body pt-0">
                  <table class="table table-bordered table-hover" id="tbl-invoices" aria-describedby="reports-invoices-table">
                    <thead>
                      <tr>
                        <th scope="col">{{__('app.invoices.invoice_id')}}</th>
                        <th scope="col">{{__('app.jobs.job_id')}}</th>
                        <th scope="col">{{__('app.jobs.job_completion_date')}}</th>
                        <th scope="col">{{__('app.invoices.invoice_status')}}</th>
                        <th scope="col">{{__('app.invoices.payment_date')}}</th>
                        <th scope="col">{{__('app.invoices.transaction_id')}}</th>
                        <th scope="col">{{__('app.invoices.payment_mode')}}</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
<!-- /.content -->

<!-- Hidden template for Jobs filters -->
<div id="jobs-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="loading_location_filter" class="form-control w-100">
        <option value="">{{__('app.locations.loading_location')}}</option>
        @foreach ($loadingLocations as $location)
          <option value="{{ $location->id }}">{{ $location->name }}</option>
        @endforeach
      </select>
    </div>
    <div class="max-w-200">
      <select id="offloading_location_filter" class="form-control w-100">
        <option value="">{{__('app.locations.offloading_location')}}</option>
        @foreach ($offloadingLocations as $location)
          <option value="{{ $location->id }}">{{ $location->name }}</option>
        @endforeach
      </select>
    </div>
    <div class="max-w-200">
      <select id="job_status_filter" class="form-control w-100">
        <option value="">{{__('app.jobs.job_status')}}</option>
        <option value="1">{{__('app.pending')}}</option>
        <option value="2">{{__('app.in_progress')}}</option>
        <option value="3">{{__('app.completed')}}</option>
      </select>
    </div>
  </div>
</div>

<!-- Hidden template for Invoices filters -->
<div id="invoices-filters-template" style="display: none;">
  <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
    <div class="position-relative max-w-200">
      <input type="text" id="payment_date_filter" class="form-control w-100 date-picker" placeholder="{{__('app.invoices.payment_date')}}" readonly>
      <span class="position-absolute" style="right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;">
        <em class="iconsax text-muted fs-20" icon-name="calendar-1"></em>
      </span>
    </div>
    <div class="max-w-200">
      <select id="invoice_status_filter" class="form-control w-100">
        <option value="">{{__('app.invoices.invoice_status')}}</option>
        <option value="paid">Paid</option>
        <option value="unpaid">Unpaid</option>
        <option value="overdue">Overdue</option>
      </select>
    </div>
  </div>
</div>

<!-- Vehicles Modal -->
<div class="modal fade" id="vehiclesModal" tabindex="-1" aria-labelledby="vehiclesModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="vehiclesModalLabel">Vehicles List</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="vehiclesModalBody">
        <!-- Vehicles will be loaded here -->
      </div>
    </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 jobsLoaderTimer = null;
    var invoicesLoaderTimer = null;

    // Jobs DataTable
    var jobsTable = $('#tbl-jobs').DataTable({
      processing: false,
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ route("transporter.reports.jobs.datatable") }}',
        type: 'GET',
        data: function(d) {
          d.loading_location = $('#loading_location_filter').val();
          d.offloading_location = $('#offloading_location_filter').val();
          d.job_status = $('#job_status_filter').val();
          return d;
        },
        beforeSend: function() {
          try { if (jobsLoaderTimer) { clearTimeout(jobsLoaderTimer); } } catch(_) {}
          jobsLoaderTimer = setTimeout(function(){ showLoader(); }, 200);
        },
        complete: function() {
          try { if (jobsLoaderTimer) { clearTimeout(jobsLoaderTimer); jobsLoaderTimer = null; } } catch(_) {}
          hideLoader();
        },
        error: function() {
          try { if (jobsLoaderTimer) { clearTimeout(jobsLoaderTimer); jobsLoaderTimer = null; } } catch(_) {}
          hideLoader();
        }
      },
      columns: [
        { data: 'id', name: 'id', orderable: true },
        { data: 'loading_location', name: 'loading_location', orderable: true },
        { data: 'offloading_location', name: 'offloading_location', orderable: true },
        { data: 'vehicles', name: 'vehicles', orderable: true, searchable: false },
        { data: 'job_status', name: 'job_status', orderable: true, searchable: false },
        { data: 'delivery', name: 'delivery', orderable: true, searchable: false },
        { data: 'load_weight', name: 'load_weight', orderable: true }
      ],
      info: true,
      searching: true,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [[0, 'desc']],
      orderCellsTop: true,
      orderMulti: false,
      drawCallback: function() {
        try { if (jobsLoaderTimer) { clearTimeout(jobsLoaderTimer); jobsLoaderTimer = null; } } catch(_) {}
        hideLoader();
      }
    });
    
    // Add loader to pagination and other events for jobs
    function queueJobsLoader(){
      try { if (jobsLoaderTimer) { clearTimeout(jobsLoaderTimer); } } catch(_) {}
      jobsLoaderTimer = setTimeout(function(){ showLoader(); }, 200);
    }
    jobsTable.on('page.dt', queueJobsLoader);
    jobsTable.on('length.dt', queueJobsLoader);
    jobsTable.on('order.dt', queueJobsLoader);
    $('#tbl-jobs_filter input[type="search"]').attr('placeholder', 'Search');

    // Append filters to Jobs DataTable
    var jobsFiltersHtml = $('#jobs-filters-template').html();
    $('#tbl-jobs_filter').append(jobsFiltersHtml);

    // Jobs filter events
    $('#tbl-jobs_filter input[type="search"]').on('keyup', function () {
      queueJobsLoader();
      jobsTable.search(this.value).draw();
    });

    $('#loading_location_filter').on('change', function () {
      queueJobsLoader();
      jobsTable.draw();
    });

    $('#offloading_location_filter').on('change', function () {
      queueJobsLoader();
      jobsTable.draw();
    });

    $('#job_status_filter').on('change', function () {
      queueJobsLoader();
      jobsTable.draw();
    });

    // Invoices DataTable
    var invoicesTable = $('#tbl-invoices').DataTable({
      processing: false,
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ route("transporter.reports.invoices.datatable") }}',
        type: 'GET',
        data: function(d) {
          d.payment_date = $('#payment_date_filter').val();
          d.invoice_status = $('#invoice_status_filter').val();
          return d;
        },
        beforeSend: function() {
          try { if (invoicesLoaderTimer) { clearTimeout(invoicesLoaderTimer); } } catch(_) {}
          invoicesLoaderTimer = setTimeout(function(){ showLoader(); }, 200);
        },
        complete: function() {
          try { if (invoicesLoaderTimer) { clearTimeout(invoicesLoaderTimer); invoicesLoaderTimer = null; } } catch(_) {}
          hideLoader();
        },
        error: function() {
          try { if (invoicesLoaderTimer) { clearTimeout(invoicesLoaderTimer); invoicesLoaderTimer = null; } } catch(_) {}
          hideLoader();
        }
      },
      columns: [
        { data: 'id', name: 'id', orderable: true },
        { data: 'job_id', name: 'job_id', orderable: true },
        { data: 'job_completion_date', name: 'job_completion_date', orderable: true },
        { data: 'invoice_status', name: 'invoice_status', orderable: true, searchable: false },
        { data: 'payment_date', name: 'payment_date', orderable: true },
        { data: 'transaction_id', name: 'transaction_id', orderable: true },
        { data: 'payment_mode', name: 'payment_mode', orderable: true }
      ],
      info: true,
      searching: true,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [[0, 'desc']],
      orderCellsTop: true,
      orderMulti: false,
      drawCallback: function() {
        try { if (invoicesLoaderTimer) { clearTimeout(invoicesLoaderTimer); invoicesLoaderTimer = null; } } catch(_) {}
        hideLoader();
      }
    });
    
    // Add loader to pagination and other events for invoices
    function queueInvoicesLoader(){
      try { if (invoicesLoaderTimer) { clearTimeout(invoicesLoaderTimer); } } catch(_) {}
      invoicesLoaderTimer = setTimeout(function(){ showLoader(); }, 200);
    }
    invoicesTable.on('page.dt', queueInvoicesLoader);
    invoicesTable.on('length.dt', queueInvoicesLoader);
    invoicesTable.on('order.dt', queueInvoicesLoader);
    $('#tbl-invoices_filter input[type="search"]').attr('placeholder', 'Search');

    // Append filters to Invoices DataTable
    var invoicesFiltersHtml = $('#invoices-filters-template').html();
    $('#tbl-invoices_filter').append(invoicesFiltersHtml);

    // Initialize payment date datepicker
    if ($.fn.datepicker) {
      $('#payment_date_filter').datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        maxDate: 0,
        onSelect: function() {
          queueInvoicesLoader();
          invoicesTable.draw();
        }
      });
    }

    // Invoices filter events
    $('#tbl-invoices_filter input[type="search"]').on('keyup', function () {
      queueInvoicesLoader();
      invoicesTable.search(this.value).draw();
    });

    $('#payment_date_filter').on('change', function () {
      queueInvoicesLoader();
      invoicesTable.draw();
    });

    $('#invoice_status_filter').on('change', function () {
      queueInvoicesLoader();
      invoicesTable.draw();
    });

    // Tab change handlers to show/hide export buttons
    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
      var target = $(e.target).attr("data-bs-target");
      if (target === '#jobs') {
        $('#jobs-export').removeClass('d-none');
        $('#invoices-export').addClass('d-none');
      } else if (target === '#invoices') {
        $('#invoices-export').removeClass('d-none');
        $('#jobs-export').addClass('d-none');
      }
    });

    // Show jobs export button by default
    $('#jobs-export').removeClass('d-none');

    // Show vehicles modal
    $(document).on('click', '.show-vehicles', function() {
      var jobId = $(this).data('job-id');
      showLoader();
      $('#vehiclesModalBody').html('');
      $('#vehiclesModal').modal('show');
      $.ajax({
        url: '{{ route("transporter.jobs.vehicles", ["job" => ":id"]) }}'.replace(':id', jobId),
        type: 'GET',
        success: function(resp){
          hideLoader();
          if (resp && resp.html){
            $('#vehiclesModalBody').html(resp.html);
          } else {
            $('#vehiclesModalBody').html('<div class="text-muted">No vehicles found for this job.</div>');
          }
        },
        error: function(){
          hideLoader();
          $('#vehiclesModalBody').html('<div class="text-danger">Failed to load vehicles.</div>');
        }
      });
    });
  });
</script>

@endsection