@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">Reports</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    <a href="{{ route('admin.reports.jobs.export') }}" class="btn btn-sm btn-primary " id="jobs-export">
      <em class="iconsax text-white fs-20" icon-name="upload-2"></em> Download
    </a>
    <a href="{{ route('admin.reports.transporters.export') }}" class="btn btn-sm btn-primary d-none" id="transporters-export">
      <em class="iconsax text-white fs-20" icon-name="upload-2"></em> Download
    </a>
    <a href="{{ route('admin.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> 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="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="Details" aria-selected="true">Jobs</button>
            </li>
           
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Transporters-tab" data-bs-toggle="tab" data-bs-target="#Transporters" type="button" role="tab" aria-controls="Transporters" aria-selected="false">Transporters</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">Invoices</button>
            </li>
            
          </ul>
          <div class="tab-content mt-4" id="myTabContent">
            <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
              @include('backend.reports.tabs.jobs')
            </div>
            <div class="tab-pane fade" id="Transporters" role="tabpanel" aria-labelledby="travel-tab">
              @include('backend.reports.tabs.transporters')
            </div>

            <div class="tab-pane fade" id="Invoices" role="tabpanel" aria-labelledby="travel-tab">
              @include('backend.reports.tabs.invoices')
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
<!-- /.content -->

<!-- Transporters Modal -->
<div class="modal fade" id="transportersModal" tabindex="-1" aria-labelledby="transportersModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="transportersModalLabel">Transporters</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="transportersList">
          <!-- Transporters will be populated here -->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>




<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 jtTimer=null, ttTimer=null, itTimer=null;

    var jobsTable = $('#tbl-jobs').DataTable({
      processing: false,
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ route('admin.reports.jobs.datatable') }}',
        type: 'GET',
        data: function(d){
          d.transporter_id = $('#transporter').val() || '';
        },
        beforeSend: function(){ try { if (jtTimer) clearTimeout(jtTimer); } catch(_){} jtTimer=setTimeout(function(){showLoader();},200); },
        complete: function(){ try { if (jtTimer) { clearTimeout(jtTimer); jtTimer=null; } } catch(_){} hideLoader(); },
        error: function(){ try { if (jtTimer) { clearTimeout(jtTimer); jtTimer=null; } } catch(_){} hideLoader(); }
      },
      columns: [
        { data: 'job_id', name: 'mine_jobs.id' },
        { data: 'loading_location', name: 'loading_location.name' },
        { data: 'offloading_location', name: 'offloading_location.name' },
        { data: 'transporter_count', name: 'transporter_count'},
        { data: 'job_status', name: 'mine_jobs.status' },
        { data: 'delivery', name: 'delivery'},
        { data: 'load_weight', name: 'mine_jobs.load_weight' }
      ],
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: []
    });
    $('#tbl-jobs_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-jobs_filter').append(`
    <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
        
        <div class="custom-width-141">
            <select id="loadingLocation" class="form-control w-100">
            <option value="">Loading</option>
            @foreach($loadingLocations as $location)
            <option value="{{ $location->name }}">{{ $location->name }}</option>
            @endforeach
            </select>
        </div>
        <div class="custom-width-141">
            <select id="offloadingLocation" class="form-control w-100">
            <option value="">Offloading</option>
            @foreach($offloadingLocations as $location)
            <option value="{{ $location->name }}">{{ $location->name }}</option>
            @endforeach
            </select>
        </div>
        <div class="custom-width-141">
            <select id="transporter" class="form-control w-100 ">
            <option value="">Transporters</option>
            @foreach($transporters as $transporter)
            <option value="{{ $transporter->id }}">{{ $transporter->name }}</option>
            @endforeach
            </select>
        </div>
        <div class="custom-width-141">
            <select id="jobStatus" class="form-control w-100">
            <option value="">Job Status</option>
            <option value="pending">Pending</option>
            <option value="in-progress">In Progress</option>
            <option value="completed">Completed</option>
            </select>
        </div>
        
    </div>
  `);

  var transportersTable = $('#tbl-transporters').DataTable({
      processing:false,
      serverSide:true,
      deferRender:true,
      searchDelay:300,
      ajax:{ url:'{{ route('admin.reports.transporters.datatable') }}', type:'GET', data:function(d){ d.efficiency_range = $('#efficiencyFilter').val() || ''; }, beforeSend:function(){ try{ if(ttTimer) clearTimeout(ttTimer);}catch(_){} ttTimer=setTimeout(function(){showLoader();},200); }, complete:function(){ try{ if(ttTimer){clearTimeout(ttTimer); ttTimer=null;} }catch(_){} hideLoader(); }, error:function(){ try{ if(ttTimer){clearTimeout(ttTimer); ttTimer=null;} }catch(_){} hideLoader(); } },
      columns:[
        { data:'name', name:'users.name' },
        { data:'total_jobs', name:'total_jobs', searchable:false },
        { data:'completed_jobs', name:'completed_jobs', searchable:false },
        { data:'on_time_jobs', name:'on_time_jobs', searchable:false },
        { data:'delayed_jobs', name:'delayed_jobs', searchable:false },
        { data:'efficiency', name:'efficiency', searchable:false },
        { data:'last_job_assigned_date', name:'last_job_assigned_date', className: 'text-end' }
      ],
      dom: 'frt<"bottom"ipl><"clear">',
      order: []
    });
    $('#tbl-transporters_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-transporters_filter').append(`
      <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
        
        <div class="custom-width-200">
            <select id="efficiencyFilter" class="form-control w-100">
              <option value="">Efficiency</option>
              <option value="80-100">High (Above 80%)</option>
              <option value="60-80">Medium (60-80%)</option>
              <option value="0-59">Low (Below 60%)</option>
            </select>
        </div>
    </div>
    `);

    $('#efficiencyFilter').on('change', function () { transportersTable.ajax.reload(); });

  var invoicesTable = $('#tbl-invoices').DataTable({
      processing:false,
      serverSide:true,
      deferRender:true,
      searchDelay:300,
      ajax:{ url:'{{ route('admin.reports.invoices.datatable') }}', type:'GET', beforeSend:function(){ try{ if(itTimer) clearTimeout(itTimer);}catch(_){} itTimer=setTimeout(function(){showLoader();},200); }, complete:function(){ try{ if(itTimer){clearTimeout(itTimer); itTimer=null;} }catch(_){} hideLoader(); }, error:function(){ try{ if(itTimer){clearTimeout(itTimer); itTimer=null;} }catch(_){} hideLoader(); } },
      columns:[
        { data:'invoice_id', name:'invoices.id' },
        { data:'job_id', name:'invoices.mine_job_id' },
        { data:'po_number', name:'purchase_orders.po_number' },
        { data:'transporter', name:'users.name' },
        { data:'payment_date', name:'invoices.payment_date' },
        { data:'payment_mode', name:'invoices.payment_mode' },
        { data:'transaction_id', name:'invoices.transaction_id' },
        { data:'invoice_status', name:'invoices.status' }
      ],
      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="custom-width-180">
              <div class="position-relative">
                <input type="text" id="paymentDateInput" class="form-control w-100 date-picker" placeholder="Payment Date">
                <span class="position-absolute date-picker-icon" style="right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;">
                  <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
                </span>
              </div>
        </div>
        <div class="custom-width-180">
            <select id="invoiceReportStatus" class="form-control w-100">
            <option value="">Invoice Status</option>
            <option value="paid">Paid</option>
            <option value="unpaid">Unpaid</option>
            <option value="overdue">Overdue</option>
            </select>
        </div>
      </div>
    `);

      // Initialize datepicker for invoices table
      $('#paymentDateInput').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true,
        todayHighlight: true,
        clearBtn: true
      });

      // Invoice Status filter for invoices table
      $('#invoiceReportStatus').on('change', function () {
        let selected = $(this).val();
        
        // Use custom filtering for invoices table
        $('#tbl-invoices tbody tr').each(function(index) {
          let cellText = $(this).find('td:eq(7)').text().trim(); // Invoice Status column (column 7)
          
          if (!selected) {
            // Show all rows if no filter selected
            $(this).show();
          } else if (selected === 'paid' && cellText.toLowerCase().includes('paid')) {
            // Show only paid rows
            $(this).show();
          } else if (selected === 'unpaid' && cellText.toLowerCase().includes('unpaid')) {
            // Show only unpaid rows
            $(this).show();
          } else if (selected === 'overdue' && cellText.toLowerCase().includes('overdue')) {
            // Show only overdue rows
            $(this).show();
          } else {
            // Hide rows that don't match
            $(this).hide();
          }
        });
        
        // Count visible rows after filtering
        let visibleRows = $('#tbl-invoices tbody tr:visible').length;
      });

      // Payment Date filter for invoices table
      $('#paymentDateInput').on('change', function () {
        let selectedDate = $(this).val();
        
        if (!selectedDate) {
          // Show all rows if no date selected
          $('#tbl-invoices tbody tr').show();
          return;
        }
        
        // Parse the selected date (format: DD/MM/YYYY)
        let parts = selectedDate.split('/');
        if (parts.length === 3) {
          let selectedDateObj = new Date(parts[2], parts[1] - 1, parts[0]); // Year, Month (0-indexed), Day
          
          // Use custom filtering for invoices table
          $('#tbl-invoices tbody tr').each(function(index) {
            let cellText = $(this).find('td:eq(4)').text().trim(); // Payment Date column (column 4)
            
            if (!cellText || cellText === '-') {
              $(this).hide(); // Hide rows with no date
              return;
            }
            
            // Parse the cell date (format: DD/MM/YYYY)
            let cellParts = cellText.split('/');
            if (cellParts.length === 3) {
              let cellDateObj = new Date(cellParts[2], cellParts[1] - 1, cellParts[0]);
              
              // Show only rows with the selected date
              if (cellDateObj.getTime() === selectedDateObj.getTime()) {
                $(this).show();
              } else {
                $(this).hide();
              }
            } else {
              $(this).hide(); // Hide rows with invalid date format
            }
          });
        }
        
        // Count visible rows after filtering
        let visibleRows = $('#tbl-invoices tbody tr:visible').length;
      });

  // Filter on change for jobs table
  $('#loadingLocation').on('change', function () {
    let selected = $(this).val();
    jobsTable.column(1).search(selected).draw(); // column index 1 = Loading Location
  });

  $('#offloadingLocation').on('change', function () {
    let selected = $(this).val();
    jobsTable.column(2).search(selected).draw(); // column index 2 = Offloading Location
  });

  $('#transporter').on('change', function () {
    jobsTable.ajax.reload();
  });

  $('#jobStatus').on('change', function () {
    let selected = $(this).val();
    if (selected === 'pending') {
      jobsTable.column(4).search('Pending').draw(); // column index 5 = Job Status
    } else if (selected === 'in-progress') {
      jobsTable.column(4).search('In progress').draw();
    } else if (selected === 'completed') {
      jobsTable.column(4).search('Completed').draw();
    } else {
      jobsTable.column(4).search('').draw();
    }
  });
  

  // 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 === 'transporters') tabId = '#Transporters-tab';
    else if (tab === 'invoices') tabId = '#Invoices-tab';
    else tabId = '#details-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);
  }

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

  // On page load, activate tab from URL
  activateTabFromUrl();
  
  // Transporters modal functionality
  $(document).on('click', '.show-transporters', function() {
    const jobId = $(this).data('job-id');
    let transporters = $(this).data('transporters');
    try {
      if (typeof transporters === 'string') {
        transporters = JSON.parse(transporters);
      }
    } catch(_) {
      transporters = [];
    }
    
    // Update modal title
    $('#jobIdDisplay').text(jobId);
    
    // Clear previous content
    $('#transportersList').empty();
    
    // Populate transporters list
    if (Array.isArray(transporters) && transporters.length > 0) {
      transporters.forEach(function(transporter) {
        const name = transporter.name || 'N/A';
        const item = `<div class="mb-2">${name}</div>`;
        $('#transportersList').append(item);
      });
    } else {
      $('#transportersList').html('<div class="text-center text-muted">No transporters assigned to this job</div>');
    }
    
    // Show modal
    $('#transportersModal').modal('show');
  });
  
});
  
</script>

@endsection