@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">
              <!-- Default box -->
              @include('backend.transporter.reports.tabs.jobs')
              <!-- /.box -->
            </div>
           
            <div class="tab-pane fade" id="invoices" role="tabpanel" aria-labelledby="invoices-tab">
              <!-- Default box -->
              @include('backend.transporter.reports.tabs.invoices')
              <!-- /.box -->
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
<!-- /.content -->




<script type="text/javascript">
  $(document).ready(function() {
    $.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: []
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
        
        <div class="">
            <select id="loadingLocationFilter" 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="">
            <select id="offloadingLocationFilter" 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="">
            <select id="jobStatusFilter" 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>
  `);

    var table = $('#tbl-invoices').DataTable({
      //info: true,
      searching: true,
      //ordering: false, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">',
      order: []
    });
    $('#tbl-invoices_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-invoices_filter').append(`
        <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
        
                  <div class="position-relative">
              <input type="text" id="paymentDateFilter" class="form-control w-100 date-picker" placeholder="{{__('app.invoices.payment_date')}}">
              <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="">
            <select id="invoiceStatus" 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>
    `);

  // Jobs table filters functionality
  function applyJobFilters() {
    var loadingLocation = $('#loadingLocationFilter').val();
    var offloadingLocation = $('#offloadingLocationFilter').val();
    var jobStatus = $('#jobStatusFilter').val();

    console.log('Applying job filters:', {
      loadingLocation: loadingLocation,
      offloadingLocation: offloadingLocation,
      jobStatus: jobStatus
    });

    $('#tbl-users tbody tr').each(function () {
      var row = $(this);
      var showRow = true;
      var rowLoadingLocation = row.data('loading-location-id');
      var rowOffloadingLocation = row.data('offloading-location-id');
      var rowJobStatus = row.data('job-status');

      console.log('Row data:', {
        rowLoadingLocation: rowLoadingLocation,
        rowOffloadingLocation: rowOffloadingLocation,
        rowJobStatus: rowJobStatus
      });

      // Check loading location filter
      if (loadingLocation && rowLoadingLocation != loadingLocation) {
        showRow = false;
        console.log('Row hidden by loading location filter');
      }

      // Check offloading location filter
      if (offloadingLocation && rowOffloadingLocation != offloadingLocation) {
        showRow = false;
        console.log('Row hidden by offloading location filter');
      }

      // Check job status filter
      if (jobStatus && rowJobStatus != jobStatus) {
        showRow = false;
        console.log('Row hidden by job status filter');
      }

      if (showRow) {
        row.show();
        console.log('Row shown');
      } else {
        row.hide();
        console.log('Row hidden');
      }
    });
  }

  // Add event listeners for job filters
  $(document).on('change', '#loadingLocationFilter, #offloadingLocationFilter, #jobStatusFilter', function () {
    console.log('Filter changed:', $(this).attr('id'), 'Value:', $(this).val());
    applyJobFilters();
  });

  // Specific handler for job status filter
  $(document).on('change', '#jobStatusFilter', function() {
    console.log('Job status filter changed to:', $(this).val());
    applyJobFilters();
  });

  // Initialize datepicker for payment date filter
  $('#paymentDateFilter').datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true,
    clearBtn: true
  });

  // Invoices table filters functionality
  function applyInvoiceFilters() {
    var paymentDate = $('#paymentDateFilter').val();
    var invoiceStatus = $('#invoiceStatus').val();

    console.log('Applying invoice filters:', {
      paymentDate: paymentDate,
      invoiceStatus: invoiceStatus
    });

    $('#tbl-invoices tbody tr').each(function () {
      var row = $(this);
      var showRow = true;
      var rowPaymentDate = row.data('payment-date');
      var rowInvoiceStatus = row.data('invoice-status');

      console.log('Row data:', {
        rowPaymentDate: rowPaymentDate,
        rowInvoiceStatus: rowInvoiceStatus
      });

      // Check payment date filter
      if (paymentDate) {
        if (rowPaymentDate != paymentDate) {
          showRow = false;
        }
      }

      // Check invoice status filter
      if (invoiceStatus) {
        var statusMatch = false;
        
        // Map filter values to actual status values
        switch(invoiceStatus) {
          case 'paid':
            statusMatch = (rowInvoiceStatus == 'Paid'); // Status 2 = Paid
            break;
          case 'unpaid':
            statusMatch = (rowInvoiceStatus == 'Unpaid'); // Status 1 = Pending/Unpaid
            break;
          case 'overdue':
            statusMatch = (rowInvoiceStatus == 'Overdue'); // Status 3 = Overdue
            break;
          default:
            statusMatch = true;
        }
        
        if (!statusMatch) {
          showRow = false;
        }
      }

      if (showRow) {
        row.show();
      } else {
        row.hide();
      }
    });
  }

  // Add event listeners for invoice filters
  $(document).on('change', '#paymentDateFilter, #invoiceStatus', function () {
    applyInvoiceFilters();
  });

  // Specific handler for invoice status filter
  $(document).on('change', '#invoiceStatus', function() {
    applyInvoiceFilters();
  });

  // Tab state with ?tab=... in URL
  function activateTabFromUrl() {
    const urlParams = new URLSearchParams(window.location.search);
    const tab = urlParams.get('tab');
    let tabId = null;
    if (tab === 'jobs') tabId = '#jobs-tab';
    else if (tab === 'invoices') tabId = '#invoices-tab';
    // Only activate if tab exists and is visible
    if ($(tabId).length && $(tabId).is(':visible')) {
      $(tabId).click();
    } else {
      // Fallback to first visible tab
      $('.nav-link:visible').first().click();
    }
  }

  function updateTabUrl(tab) {
    const url = new URL(window.location);
    url.searchParams.set('tab', tab);
    window.history.replaceState({}, '', url);
  }

  
  $('#jobs-tab').on('click', function () {
    $('#jobs-export').removeClass('d-none');
    $('#invoices-export').addClass('d-none');
    updateTabUrl('jobs');
  });

  $('#invoices-tab').on('click', function () {
    $('#jobs-export').addClass('d-none');
    $('#invoices-export').removeClass('d-none');
    updateTabUrl('invoices');
  });

  // On page load, activate tab from URL
  activateTabFromUrl();
  
});
</script>

@endsection