Kent-logistics-Laravel/resources/views/admin/orders.blade.php

  @extends('admin.layouts.app')

  @section('page-title', 'Orders')

  @section('content')
  <style>
    /* ===== GLOBAL RESPONSIVE STYLES ===== */
    html, body {
      overflow-x: hidden !important;
      max-width: 100%;
    }

    /* Use Inter globally */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    :root { 
      --admin-font: 'Inter', sans-serif; 
      --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --success-gradient: linear-gradient(135deg, #10b981, #34d399);
      --warning-gradient: linear-gradient(135deg, #fef3c7, #fde68a);
      --danger-gradient: linear-gradient(135deg, #fef2f2, #fecaca);
      --info-gradient: linear-gradient(135deg, #dbeafe, #bfdbfe);
      --purple-gradient: linear-gradient(135deg, #e9d5ff, #d8b4fe);
    }
    
    body, input, select, textarea, button, table, th, td, .orders-container {
      font-family: var(--admin-font);
    }

    /* VARIABLES AND BASE STYLES */
    :root {
      --primary-color: #3b82f6;
      --primary-hover: #2563eb;
      --border-light: #e5e7eb;
      --bg-container: #ffffff;
      --bg-light: #f9fafb;
      --bg-hover: #f3f4f6;
      --text-dark: #1f2937;
      --text-muted: #6b7280;
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

    .orders-container {
      background: var(--bg-container);
      padding: 24px;
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      margin-top: 28px;
      border: 1px solid rgba(0,0,0,0.05);
    }

    .orders-title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 24px;
      color: var(--text-dark);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .orders-title i {
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 32px;
    }

    /* HEADER STATS CARDS */
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .stat-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow-sm);
      border-left: 4px solid;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .stat-card.total { border-left-color: #667eea; }
    .stat-card.paid { border-left-color: #10b981; }
    .stat-card.pending { border-left-color: #f59e0b; }
    .stat-card.overdue { border-left-color: #ef4444; }

    .stat-value {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 14px;
      color: var(--text-muted);
      font-weight: 500;
    }

    /* ===== DOWNLOAD BUTTONS STYLES ===== */
    .download-section {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
      gap: 12px;
    }

    .download-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
    }

    .download-btn i {
      font-size: 16px;
    }

    .download-btn.pdf {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
    }

    .download-btn.pdf:hover {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .download-btn.excel {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
    }

    .download-btn.excel:hover {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .download-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none !important;
    }

    /* TABLE STRUCTURE & WRAPPER FOR RESPONSIVENESS */
    .table-wrapper {
      overflow-x: auto;
      max-width: 100%;
      border-radius: 12px;
      border: 1px solid var(--border-light);
      box-shadow: var(--shadow-sm);
      background: white;
    }

    .orders-table {
      width: 100%;
      min-width: 1300px;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 14px;
      color: var(--text-dark);
    }

    /* GRADIENT HEADER STYLES */
    .orders-table thead {
      background: var(--primary-gradient);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .orders-table th {
      padding: 16px 20px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: white;
      border-bottom: none;
      white-space: nowrap;
      position: relative;
      transition: background 0.3s ease;
    }

    .orders-table th:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .orders-table th:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 16px;
      background: rgba(255, 255, 255, 0.3);
    }

    .orders-table td {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border-light);
      white-space: nowrap;
      text-align: center;
      transition: background 0.2s ease;
    }

    .orders-table tbody tr:last-child td {
      border-bottom: none;
    }

    .orders-table tbody tr:hover td {
      background: var(--bg-hover);
    }

    /* ===== ENHANCED STATUS BADGES ===== */
    .status-badge {
      font-size: 11px !important;
      font-weight: 600 !important;
      padding: 8px 14px 8px 10px !important;
      border-radius: 20px !important;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      color: #fff !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      border: 2px solid transparent !important;
      min-width: 40px;
      box-sizing: border-box;
      line-height: 1.2;
      gap: 6px;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      margin: 0 auto;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .status-badge:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .status-badge::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      opacity: 0.9;
      z-index: -1;
    }

    /* Status icons */
    .status-icon {
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    /* Invoice Status Badges */
    .status-paid {
      background: var(--success-gradient) !important;
      color: white !important;
      border-color: #059669 !important;
      width: 99px;
    }

    .status-pending {
      background: var(--warning-gradient) !important;
      color: #d97706 !important;
      border-color: #f59e0b !important;
      width: 99px;
    }

    .status-overdue {
      background: var(--danger-gradient) !important;
      color: #dc2626 !important;
      border-color: #ef4444 !important;
      width: 99px;
    }

    /* Shipment Status Badges */
    .ship-pending {
      background: var(--warning-gradient) !important;
      color: #d97706 !important;
      border-color: #f59e0b !important;
      width: 99px;
    }

    .ship-in_transit {
      background: var(--info-gradient) !important;
      color: #1e40af !important;
      border-color: #3b82f6 !important;
      width: 99px;
    }

    .ship-dispatched {
      background: var(--purple-gradient) !important;
      color: #7e22ce !important;
      border-color: #8b5cf6 !important;
      width: 99px;
    }

    .ship-delivered {
      background: var(--success-gradient) !important;
      color: #065f46 !important;
      border-color: #10b981 !important;
      width: 99px;
    }

    /* ACTION BUTTON */
    .action-btn {
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 18px;
      background: #f8fafc;
      padding: 8px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .action-btn:hover {
      color: var(--primary-color);
      transform: scale(1.1);
      background: #e0f2fe;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }

    /* EMPTY STATE */
    .no-data {
      padding: 60px 40px;
      text-align: center;
      font-size: 16px;
      color: var(--text-muted);
      background: var(--bg-light);
      border-radius: 12px;
      margin-top: 10px;
      border: 1px solid var(--border-light);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .no-data i {
      font-size: 48px;
      color: #d1d5db;
    }

    /* RESPONSIVE ADJUSTMENTS */
    @media(max-width: 768px) {
      .orders-title {
        font-size: 24px;
      }
      
      .orders-container {
        padding: 16px;
      }
      
      .stats-container {
        grid-template-columns: 1fr;
      }
      
      .stat-card {
        padding: 16px;
      }
      
      .stat-value {
        font-size: 24px;
      }

      .download-section {
        justify-content: stretch;
      }
      
      .download-btn {
        flex: 1;
        justify-content: center;
      }
    }

    /* ---------- Enhanced Pagination Styles ---------- */
    .pagination-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding: 16px 0;
      border-top: 1px solid #eef3fb;
    }

    .pagination-info {
      font-size: 14px;
      color: #6b7280;
      font-weight: 500;
    }

    .pagination-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pagination-img-btn {
      background: white;
      border: 1px solid #e3eaf6;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      box-shadow: var(--shadow-sm);
    }

    .pagination-img-btn:hover:not(:disabled) {
      background: var(--primary-color);
      border-color: var(--primary-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .pagination-img-btn:disabled {
      background: #f8fafc;
      border-color: #e2e8f0;
      cursor: not-allowed;
      opacity: 0.5;
    }

    .pagination-page-btn {
      background: white;
      border: 1px solid #e3eaf6;
      color: #1a2951;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 40px;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }

    .pagination-page-btn:hover {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
      transform: translateY(-2px);
    }

    .pagination-page-btn.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .pagination-pages {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .pagination-ellipsis {
      color: #9ba5bb;
      font-size: 14px;
      padding: 0 8px;
    }

    /* Search and Filter Bar */
    .filter-bar {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
      align-items: center;
    }

    .search-box {
      flex: 1;
      min-width: 300px;
      position: relative;
    }

    .search-input {
      width: 100%;
      padding: 12px 16px 12px 44px;
      border: 1px solid var(--border-light);
      border-radius: 10px;
      font-size: 14px;
      transition: all 0.3s ease;
      background: white;
      box-shadow: var(--shadow-sm);
    }

    .search-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
    }

    .filter-select {
      padding: 12px 16px;
      border: 1px solid var(--border-light);
      border-radius: 10px;
      font-size: 14px;
      background: white;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      min-width: 160px;
    }

    .date-range {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .date-input {
      padding: 12px 16px;
      border: 1px solid var(--border-light);
      border-radius: 10px;
      font-size: 14px;
      background: white;
      box-shadow: var(--shadow-sm);
      min-width: 150px;
    }

    .date-label {
      font-size: 14px;
      color: var(--text-muted);
      font-weight: 500;
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      .filter-bar {
        flex-direction: column;
        align-items: stretch;
      }
      
      .search-box {
        min-width: 100%;
      }
      
      .filter-select,
      .date-input {
        width: 100%;
      }
      
      .date-range {
        flex-direction: column;
        align-items: stretch;
      }
      
      .pagination-container {
        flex-direction: column;
        gap: 16px;
      }
    }
  </style>

  <div class="orders-container">
    <div class="orders-title">
      <i class="fas fa-box-open"></i> Orders Management
    </div>

    <!-- Stats Cards -->
    <div class="stats-container">
      @php
        $totalOrders = $orders->count();
        $paidInvoices = $orders->filter(function($order) {
            $status = $order->invoice?->status ?? 'pending';
            return strtolower($status) === 'paid';
        })->count();
        $pendingInvoices = $orders->filter(function($order) {
            $status = $order->invoice?->status ?? 'pending';
            return strtolower($status) === 'pending';
        })->count();
        $overdueInvoices = $orders->filter(function($order) {
            $status = $order->invoice?->status ?? 'pending';
            return strtolower($status) === 'overdue';
        })->count();
      @endphp
      
      <div class="stat-card total">
        <div class="stat-value">{{ $totalOrders }}</div>
        <div class="stat-label">Total Orders</div>
      </div>
      <div class="stat-card paid">
        <div class="stat-value">{{ $paidInvoices }}</div>
        <div class="stat-label">Paid Invoices</div>
      </div>
      <div class="stat-card pending">
        <div class="stat-value">{{ $pendingInvoices }}</div>
        <div class="stat-label">Pending Invoices</div>
      </div>
      <div class="stat-card overdue">
        <div class="stat-value">{{ $overdueInvoices }}</div>
        <div class="stat-label">Overdue Invoices</div>
      </div>
    </div>

    <!-- Download Buttons -->
    <div class="download-section">
      <button class="download-btn pdf" id="downloadPdf" {{ $orders->count() == 0 ? 'disabled' : '' }}>
        <i class="fas fa-file-pdf"></i>
        Download PDF
      </button>
      <button class="download-btn excel" id="downloadExcel" {{ $orders->count() == 0 ? 'disabled' : '' }}>
        <i class="fas fa-file-excel"></i>
        Download Excel
      </button>
    </div>

    <!-- Filter Bar -->
    <div class="filter-bar">
      <div class="search-box">
        <i class="fas fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="Search orders..." id="searchInput">
      </div>
      
      <select class="filter-select" id="statusFilter">
        <option value="">All Invoice Status</option>
        <option value="paid">Paid</option>
        <option value="pending">Pending</option>
        <option value="overdue">Overdue</option>
      </select>
      
      <select class="filter-select" id="shipmentFilter">
        <option value="">All Shipments</option>
        <option value="pending">Pending</option>
        <option value="in_transit">In Transit</option>
        <option value="dispatched">Dispatched</option>
        <option value="delivered">Delivered</option>
      </select>
      
      <div class="date-range">
        <span class="date-label">From:</span>
        <input type="date" class="date-input" id="fromDate">
        <span class="date-label">To:</span>
        <input type="date" class="date-input" id="toDate">
      </div>
    </div>

    @if(isset($orders) && $orders->count() > 0)
      <div class="table-wrapper">
        <table class="orders-table">
          <thead>
            <tr>
              <th>Order ID</th>
              <th>Shipment ID</th>
              <th>Customer ID</th>
              <th>Company</th>
              <th>Origin</th>
              <th>Destination</th>
              <th>Order Date</th>
              <th>Invoice No</th>
              <th>Invoice Date</th>
              <th>Amount</th>
              <th>Amount + GST</th>
              <th>Invoice Status</th>
              <th>Shipment Status</th>
              <th>Action</th>
            </tr>
          </thead>

          <tbody id="ordersTableBody">
            @foreach($orders as $order)
              @php
                $mark = $order->markList ?? null;
                $invoice = $order->invoice ?? null;
                $shipment = $order->shipments->first() ?? null;
                
                // Normalized status values for consistent CSS classes
                $invoiceStatus = strtolower($invoice?->status ?? 'pending');
                $shipmentStatus = strtolower($shipment?->status ?? 'pending');
                $shipmentStatusForCss = str_replace([' ', '-'], '_', $shipmentStatus);
              @endphp

              <tr>
                <td>{{ $order->order_id ?? '-' }}</td> 
                <td>{{ $shipment?->shipment_id ?? '-' }}</td>
                <td>{{ $mark?->customer_id ?? '-' }}</td>
                <td>{{ $mark?->company_name ?? '-' }}</td>
                <td>{{ $mark?->origin ?? $order->origin ?? '-' }}</td>
                <td>{{ $mark?->destination ?? $order->destination ?? '-' }}</td>
                <td>{{ $order->created_at ? $order->created_at->format('d-m-Y') : '-' }}</td>

                <td>{{ $invoice?->invoice_number ?? '-' }}</td>

                <td>
                  {{ $invoice?->invoice_date ? date('d-m-Y', strtotime($invoice->invoice_date)) : '-' }}
                </td>

                <td>
                  {{ $invoice?->final_amount ? '₹'.number_format($invoice->final_amount, 2) : '-' }}
                </td>

                <td>
                  {{ $invoice?->final_amount_with_gst ? '₹'.number_format($invoice->final_amount_with_gst, 2) : '-' }}
                </td>

                <td>
                  <span class="status-badge status-{{ $invoiceStatus }}">
                    {{ ucfirst($invoiceStatus) }}
                  </span>
                </td>

                <td>
                  <span class="status-badge ship-{{ $shipmentStatusForCss }}">
                    {{ ucfirst($shipmentStatus) }}
                  </span>
                </td>

                <td class="text-center">
                  <a href="{{ route('admin.orders.see', $order->id) }}" title="View Details">
                    <i class="fas fa-eye action-btn"></i>
                  </a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div> {{-- End table-wrapper --}}

      <!-- Pagination Controls -->
      <div class="pagination-container">
        <div class="pagination-info" id="pageInfo">Showing 1 to {{ min(10, count($orders)) }} of {{ count($orders) }} entries</div>
        <div class="pagination-controls">
          <button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="pagination-pages" id="paginationPages">
            <!-- Page numbers will be inserted here -->
          </div>
          <button class="pagination-img-btn" id="nextPageBtn" title="Next page" {{ count($orders) > 10 ? '' : 'disabled' }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    @else
      <div class="no-data">
        <i class="fas fa-inbox"></i>
        <div>No orders found</div>
        <p class="text-muted">There are currently no orders in the system.</p>
      </div>
    @endif
  </div>

  <script>
    // Pagination state
    let currentPage = 1;
    const itemsPerPage = 10;
    let allOrders = @json($orders);
    let filteredOrders = [...allOrders];

    // Status icon helper functions
    function getInvoiceStatusIcon(status) {
      switch(status) {
        case 'paid':
          return '<i class="fas fa-check-circle status-icon"></i>';
        case 'pending':
          return '<i class="fas fa-clock status-icon"></i>';
        case 'overdue':
          return '<i class="fas fa-exclamation-triangle status-icon"></i>';
        default:
          return '';
      }
    }

    function getShipmentStatusIcon(status) {
      switch(status) {
        case 'pending':
          return '<i class="fas fa-clock status-icon"></i>';
        case 'in_transit':
          return '<i class="fas fa-truck status-icon"></i>';
        case 'dispatched':
          return '<i class="fas fa-paper-plane status-icon"></i>';
        case 'delivered':
          return '<i class="fas fa-check-circle status-icon"></i>';
        default:
          return '';
      }
    }

    // Date validation
    function isValidDate(dateString) {
      if (!dateString) return false;
      const date = new Date(dateString);
      return date instanceof Date && !isNaN(date);
    }

    // Date comparison helper - FIXED to properly handle order date
    function isDateBetween(dateToCheck, fromDate, toDate) {
      if (!dateToCheck) return true; // If no date to check, don't filter it out
      
      // Parse the date to check (order date)
      const checkDate = new Date(dateToCheck);
      if (!isValidDate(checkDate)) return true;
      
      // Set time to beginning of day for comparison
      checkDate.setHours(0, 0, 0, 0);
      
      // Check from date
      if (fromDate && isValidDate(fromDate)) {
        const from = new Date(fromDate);
        from.setHours(0, 0, 0, 0);
        if (checkDate < from) return false;
      }
      
      // Check to date
      if (toDate && isValidDate(toDate)) {
        const to = new Date(toDate);
        to.setHours(23, 59, 59, 999);
        if (checkDate > to) return false;
      }
      
      return true;
    }

    // Function to check if an order matches all filters
    function orderMatchesFilters(order, searchTerm, statusFilter, shipmentFilter, fromDate, toDate) {
      // Search term matching across multiple fields
      let matchesSearch = true;
      if (searchTerm) {
        const searchFields = [
          order.order_id?.toString().toLowerCase(),
          order.shipments?.[0]?.shipment_id?.toString().toLowerCase(),
          order.markList?.customer_id?.toString().toLowerCase(),
          order.markList?.company_name?.toString().toLowerCase(),
          order.invoice?.invoice_number?.toString().toLowerCase(),
          order.markList?.origin?.toString().toLowerCase(),
          order.markList?.destination?.toString().toLowerCase()
        ];
        matchesSearch = searchFields.some(field => field && field.includes(searchTerm.toLowerCase()));
      }
      
      // Invoice status filter with safe access and normalization
      const invoiceStatus = (order.invoice?.status || 'pending').toLowerCase();
      const matchesStatus = !statusFilter || invoiceStatus === statusFilter;
      
      // Shipment status filter with safe access and normalization
      const shipmentStatus = (order.shipments?.[0]?.status || 'pending').toLowerCase();
      const matchesShipment = !shipmentFilter || shipmentStatus === shipmentFilter;
      
      // Date range filter - using order date (created_at)
      const orderDate = order.created_at;
      const matchesDate = isDateBetween(orderDate, fromDate, toDate);
      
      return matchesSearch && matchesStatus && matchesShipment && matchesDate;
    }

    // Initialize pagination and filters
    document.addEventListener('DOMContentLoaded', function() {
      // Set today as default "to" date
       renderTable();
      updatePaginationControls();

      // Pagination events
      document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
      document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);

      // Filter events
      document.getElementById('searchInput').addEventListener('input', handleFilter);
      document.getElementById('statusFilter').addEventListener('change', handleFilter);
      document.getElementById('shipmentFilter').addEventListener('change', handleFilter);
      document.getElementById('fromDate').addEventListener('change', handleFilter);
      document.getElementById('toDate').addEventListener('change', handleFilter);

      // Download buttons
      document.getElementById('downloadPdf').addEventListener('click', downloadPdf);
      document.getElementById('downloadExcel').addEventListener('click', downloadExcel);
    });

    // Download Functions with ALL filter parameters
    function downloadPdf() {
      if (filteredOrders.length === 0) {
        showNotification('No data available to download', 'warning');
        return;
      }

      showNotification('Preparing PDF download...', 'info');
      
      // Get all current filters
      const searchTerm = document.getElementById('searchInput').value;
      const statusFilter = document.getElementById('statusFilter').value;
      const shipmentFilter = document.getElementById('shipmentFilter').value;
      const fromDate = document.getElementById('fromDate').value;
      const toDate = document.getElementById('toDate').value;
      
      // Create download URL with all filters - ALWAYS include all filters
      let downloadUrl = "{{ route('admin.orders.download.pdf') }}";
      let params = new URLSearchParams();
      
      // Always append all parameters, even if empty
      params.append('search', searchTerm || '');
      params.append('status', statusFilter || '');
      params.append('shipment', shipmentFilter || '');
      params.append('from_date', fromDate || '');
      params.append('to_date', toDate || '');
      
      // Trigger download with all parameters
      window.location.href = downloadUrl + '?' + params.toString();
    }

    function downloadExcel() {
      if (filteredOrders.length === 0) {
        showNotification('No data available to download', 'warning');
        return;
      }

      showNotification('Preparing Excel download...', 'info');
      
      // Get all current filters
      const searchTerm = document.getElementById('searchInput').value;
      const statusFilter = document.getElementById('statusFilter').value;
      const shipmentFilter = document.getElementById('shipmentFilter').value;
      const fromDate = document.getElementById('fromDate').value;
      const toDate = document.getElementById('toDate').value;
      
      // Create download URL with all filters - ALWAYS include all filters
      let downloadUrl = "{{ route('admin.orders.download.excel') }}";
      let params = new URLSearchParams();
      
      // Always append all parameters, even if empty
      params.append('search', searchTerm || '');
      params.append('status', statusFilter || '');
      params.append('shipment', shipmentFilter || '');
      params.append('from_date', fromDate || '');
      params.append('to_date', toDate || '');
      
      // Trigger download with all parameters
      window.location.href = downloadUrl + '?' + params.toString();
    }

    // Filter functionality
    function handleFilter() {
      const searchTerm = document.getElementById('searchInput').value;
      const statusFilter = document.getElementById('statusFilter').value;
      const shipmentFilter = document.getElementById('shipmentFilter').value;
      const fromDate = document.getElementById('fromDate').value;
      const toDate = document.getElementById('toDate').value;
      
      // Apply all filters
      filteredOrders = allOrders.filter(order => 
        orderMatchesFilters(order, searchTerm, statusFilter, shipmentFilter, fromDate, toDate)
      );
      
      currentPage = 1;
      renderTable();
      updatePaginationControls();
      
      // Update download buttons state
      const hasResults = filteredOrders.length > 0;
      document.getElementById('downloadPdf').disabled = !hasResults;
      document.getElementById('downloadExcel').disabled = !hasResults;
    }

    // Pagination Functions
    function goToPreviousPage() {
      if (currentPage > 1) {
        currentPage--;
        renderTable();
        updatePaginationControls();
      }
    }

    function goToNextPage() {
      const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);
      if (currentPage < totalPages) {
        currentPage++;
        renderTable();
        updatePaginationControls();
      }
    }

    function updatePaginationControls() {
      const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);
      const prevBtn = document.getElementById('prevPageBtn');
      const nextBtn = document.getElementById('nextPageBtn');
      const pageInfo = document.getElementById('pageInfo');
      const paginationPages = document.getElementById('paginationPages');
      
      prevBtn.disabled = currentPage === 1;
      nextBtn.disabled = currentPage === totalPages || totalPages === 0;
      
      // Update page info text
      const startIndex = (currentPage - 1) * itemsPerPage + 1;
      const endIndex = Math.min(currentPage * itemsPerPage, filteredOrders.length);
      pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredOrders.length} entries`;
      
      // Generate page numbers
      paginationPages.innerHTML = '';
      
      if (totalPages <= 7) {
        // Show all pages
        for (let i = 1; i <= totalPages; i++) {
          addPageButton(i, paginationPages);
        }
      } else {
        // Show first page, current page range, and last page
        addPageButton(1, paginationPages);
        
        if (currentPage > 3) {
          paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
        }
        
        const start = Math.max(2, currentPage - 1);
        const end = Math.min(totalPages - 1, currentPage + 1);
        
        for (let i = start; i <= end; i++) {
          addPageButton(i, paginationPages);
        }
        
        if (currentPage < totalPages - 2) {
          paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
        }
        
        addPageButton(totalPages, paginationPages);
      }
    }

    function addPageButton(pageNumber, container) {
      const button = document.createElement('button');
      button.className = 'pagination-page-btn';
      if (pageNumber === currentPage) {
        button.classList.add('active');
      }
      button.textContent = pageNumber;
      button.addEventListener('click', () => {
        currentPage = pageNumber;
        renderTable();
        updatePaginationControls();
      });
      container.appendChild(button);
    }

    // Render Table Function
    function renderTable() {
      const tbody = document.getElementById('ordersTableBody');
      tbody.innerHTML = '';
      
      if (filteredOrders.length === 0) {
        tbody.innerHTML = '<tr><td colspan="14" class="text-center py-4 text-muted">No orders found matching your criteria.</td></tr>';
        return;
      }
      
      // Calculate pagination
      const startIndex = (currentPage - 1) * itemsPerPage;
      const endIndex = startIndex + itemsPerPage;
      const paginatedItems = filteredOrders.slice(startIndex, endIndex);
      
      paginatedItems.forEach(order => {
        const mark = order.markList || null;
        const invoice = order.invoice || null;
        const shipment = order.shipments?.[0] || null;
        
        // Normalized status values matching Blade logic
        const invoiceStatus = (invoice?.status || 'pending').toLowerCase();
        const shipmentStatus = (shipment?.status || 'pending').toLowerCase();
        const shipmentStatusForCss = shipmentStatus.replace(/[ -]/g, '_');
        
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${order.order_id || '-'}</td>
          <td>${shipment?.shipment_id || '-'}</td>
          <td>${mark?.customer_id || '-'}</td>
          <td>${mark?.company_name || '-'}</td>
          <td>${mark?.origin || order.origin || '-'}</td>
          <td>${mark?.destination || order.destination || '-'}</td>
          <td>${order.created_at ? new Date(order.created_at).toLocaleDateString('en-GB') : '-'}</td>
          <td>${invoice?.invoice_number || '-'}</td>
          <td>${invoice?.invoice_date ? new Date(invoice.invoice_date).toLocaleDateString('en-GB') : '-'}</td>
          <td>${invoice?.final_amount ? '₹' + Number(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '-'}</td>
          <td>${invoice?.final_amount_with_gst ? '₹' + Number(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '-'}</td>
          <td>
            <span class="status-badge status-${invoiceStatus}">${getInvoiceStatusIcon(invoiceStatus)}${invoiceStatus.charAt(0).toUpperCase() + invoiceStatus.slice(1)}</span>
          </td>
          <td>
            <span class="status-badge ship-${shipmentStatusForCss}">${getShipmentStatusIcon(shipmentStatusForCss)}${shipmentStatus.charAt(0).toUpperCase() + shipmentStatus.slice(1)}</span>
          </td>
          <td class="text-center">
            <a href="/admin/orders/${order.id}/see" title="View Details">
              <i class="fas fa-eye action-btn"></i>
            </a>
          </td>
        `;
        tbody.appendChild(row);
      });
    }

    // Notification function
    function showNotification(message, type = 'info') {
      // Remove existing notification
      const existingNotification = document.querySelector('.download-notification');
      if (existingNotification) {
        existingNotification.remove();
      }

      const notification = document.createElement('div');
      notification.className = `download-notification alert alert-${type}`;
      notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10000;
        padding: 12px 20px;
        border-radius: 8px;
        color: white;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        animation: slideIn 0.3s ease;
      `;
      
      if (type === 'info') {
        notification.style.background = 'linear-gradient(135deg, #3b82f6, #1d4ed8)';
      } else if (type === 'warning') {
        notification.style.background = 'linear-gradient(135deg, #f59e0b, #d97706)';
      } else if (type === 'success') {
        notification.style.background = 'linear-gradient(135deg, #10b981, #059669)';
      }
      
      notification.textContent = message;
      document.body.appendChild(notification);
      
      setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notification.remove(), 300);
      }, 3000);
    }

    // Add CSS for notifications
    const style = document.createElement('style');
    style.textContent = `
      @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
      }
      @keyframes slideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
      }
    `;
    document.head.appendChild(style);
  </script>

  @endsection