@extends('layouts.location')

@section('title', 'Ready for Dispatch')
@section('page-title', 'Ready for Dispatch')

@section('content')
<div class="row">
  <div class="col-lg-12 mb-4">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-transparent">
        <h5 class="mb-0">Ready for Dispatch</h5>
        <!-- <small class="text-muted">Listing from order_pipeline (using so_numbers).</small> -->
      </div>
      <div class="card-body">
        @php
          $dispatchList = collect($dispatchList ?? []);
        @endphp
        @if($dispatchList->isEmpty())
          <div class="alert alert-info mb-0">No dispatched orders found.</div>
        @else
          <div class="table-responsive">
            <table class="table table-sm mb-0 align-middle" id="dispatch-ready-table">
              <thead class="table-light">
                <tr>
                  <th class="sortable" data-sort-index="0">Pic ID</th>
                  <th class="sortable" data-sort-index="1">SO Numbers</th>
                  <th class="sortable" data-sort-index="2">Picking Status</th>
                  <th class="sortable" data-sort-index="3">Picking Date</th>
                  <th class="sortable" data-sort-index="4">Packing Status</th>
                  <th class="sortable" data-sort-index="5">Packing Date</th>
                  <th class="sortable" data-sort-index="6">Booking Status</th>
                  <th class="sortable" data-sort-index="7">Booking Date</th>
                </tr>
              </thead>
              <tbody>
                @foreach($dispatchList as $row)
                  @php
                    $soList = '';
                    try {
                      $decoded = json_decode($row->so_numbers ?? '[]', true);
                      if (is_array($decoded)) {
                        $soList = collect($decoded)->filter()->implode(', ');
                      }
                    } catch (\Throwable $e) {}
                    if ($soList === '' && !empty($row->so_numbers)) {
                      $soList = $row->so_numbers;
                    }
                  @endphp
                  <tr>
                    <td>{{ $row->pic_id }}</td>
                    <td>{{ $soList }}</td>
                    <td>{{ $row->picking_status }}</td>
                    <td>{{ $row->picking_date_complete }}</td>
                    <td>{{ $row->packing_status }}</td>
                    <td>{{ $row->packing_date_complete }}</td>
                    <td>{{ $row->booking_status }}</td>
                    <td>{{ $row->booking_date_complete }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endif
      </div>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const table = document.getElementById('dispatch-ready-table');
    if (!table) return;

    const getCellValue = (row, index) => {
      const cell = row.children[index];
      return cell ? cell.textContent.trim() : '';
    };

    const parseValue = (val) => {
      if (val === '' || val === null || typeof val === 'undefined') return '';

      // Try to treat as date first if it looks like a date/time string
      if (/[0-9]/.test(val) && /[-/:]/.test(val) && val.length >= 8) {
        const d = Date.parse(val);
        if (!isNaN(d)) {
          return d;
        }
      }

      // Fallback: try numeric (for IDs, counts, etc.)
      const num = parseFloat(val.replace(/[^0-9.\-]/g, ''));
      if (!isNaN(num) && /[0-9]/.test(val)) {
        return num;
      }

      // Default: case-insensitive string comparison
      return val.toLowerCase();
    };

    const statusPriority = {
      'pending': 1,
      'not started': 1,
      'in progress': 2,
      'started': 2,
      'completed': 3,
      'done': 3,
      'hold': 0,
      'cancelled': -1,
      'canceled': -1,
    };

    const getStatusRank = (raw) => {
      if (!raw) return 0;
      const key = String(raw).toLowerCase().trim();
      if (Object.prototype.hasOwnProperty.call(statusPriority, key)) {
        return statusPriority[key];
      }
      return 0;
    };

    const makeComparer = (index, asc) => {
      return function (a, b) {
        const raw1 = getCellValue(asc ? a : b, index);
        const raw2 = getCellValue(asc ? b : a, index);

        // Special handling for status columns: 2, 4, 6
        if (index === 2 || index === 4 || index === 6) {
          const r1 = getStatusRank(raw1);
          const r2 = getStatusRank(raw2);
          if (r1 === r2) {
            // fall back to string compare when same rank
            const s1 = raw1.toLowerCase();
            const s2 = raw2.toLowerCase();
            if (s1 === s2) return 0;
            return s1 > s2 ? 1 : -1;
          }
          return r1 > r2 ? 1 : -1;
        }

        const v1 = parseValue(raw1);
        const v2 = parseValue(raw2);

        if (v1 === v2) return 0;
        return v1 > v2 ? 1 : -1;
      };
    };

    const headers = table.querySelectorAll('thead th.sortable');
    headers.forEach(function (th) {
      th.style.cursor = 'pointer';
      th.addEventListener('click', function () {
        const index = parseInt(th.getAttribute('data-sort-index'), 10);
        const tbody = table.tBodies[0];
        if (!tbody) return;

        const rows = Array.from(tbody.querySelectorAll('tr'));
        const currentDir = th.getAttribute('data-sort-dir') === 'asc' ? 'asc' : 'desc';
        const nextAsc = currentDir !== 'asc';

        headers.forEach(h => h.removeAttribute('data-sort-dir'));
        th.setAttribute('data-sort-dir', nextAsc ? 'asc' : 'desc');

        rows.sort(makeComparer(index, nextAsc));
        rows.forEach(row => tbody.appendChild(row));
      });
    });
  });
</script>
@endsection