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

@extends('admin.layouts.app')

@section('page-title', 'Dashboard')
@php
    use App\Models\Order;
    use App\Models\OrderItem;
    use App\Models\Shipment;
    use App\Models\Invoice;
    use App\Models\User;
    use App\Models\Admin;

    $totalOrders    = Order::count();
    $pendingOrders  = Order::where('status', 'pending')->count();
    $totalShipments = Shipment::count();
    $totalItems     = OrderItem::count();

    $totalRevenue = Invoice::sum('final_amount_with_gst');

    // USERS (CUSTOMERS)
    $activeCustomers   = User::where('status', 'active')->count();
    $inactiveCustomers = User::where('status', 'inactive')->count();

    // STAFF (FROM ADMINS TABLE)
    $totalStaff = Admin::where('type', 'staff')->count();

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

body, .container-fluid { 
  background: #f4f7fc; 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

/* ===== DASHBOARD TITLE ===== */
.dash-top-titlebox {
  margin-bottom: 2px; 
  background: transparent;
  padding-left: 3px; 
  padding-top: 2px;
  margin-left: 0px;
}

.dash-title-main {
  font-size: 1.54rem;
  font-weight: 800;
  letter-spacing: .018em;
  color: #18213e;
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
}

.dash-title-desc {
  font-size: 1rem;
  color: #6577a3;
  margin-bottom: 5px;
  font-weight: 500;
  letter-spacing: .01em;
  font-family: 'Inter', sans-serif;
}

/* ===== STATS CARDS - RESPONSIVE GRID ===== */
.stats-row-wrap { 
  margin-bottom: 33px; 
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 14px;
}

.stats-card {
  background: rgba(255,255,255,0.77);
  border-radius: 16px;
  box-shadow: 0 7px 32px 0 rgba(19, 39, 78, 0.13), 0 2px 7px 0 rgba(160,180,224,0.14), 0 2px 30px #c5dcf940;
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden; 
  position: relative; 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  padding: 18px 16px;
  border: 1.2px solid #e8f0fd80;
  transition: box-shadow .2s cubic-bezier(.45,.57,.46,.99), transform .15s cubic-bezier(.45,.57,.46,.99);
  z-index: 1;
}

.stats-card::after {
  content:""; 
  position: absolute; 
  inset: 0; 
  border-radius: 16px; 
  pointer-events:none;
  background: linear-gradient(120deg,rgba(74,156,255,.15) 5%,rgba(210,228,255,.06) 54%,rgba(120,150,255,.13) 99%);
  z-index:0;
}

.stats-card:hover, .stats-card:focus-within {
  box-shadow: 0 18px 48px 0 rgba(62,87,177,0.16), 0 3px 19px 0 #82ccfc3b;
  transform: scale(1.031) translateY(-7px);
  z-index: 2;
}

.stats-icon {
  font-size:1.65rem; 
  width:48px; 
  height:48px; 
  border-radius:13px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  background:#f5f7fd; 
  transition:.22s cubic-bezier(.57,.75,.45,.97);
  box-shadow:0 1.7px 13px #edf1fd38;
}

.stats-card-blue .stats-icon {
  background:linear-gradient(135deg,#3492f8 55%,#1256cc 110%);
  color:#fff;
}

.stats-card-green .stats-icon {
  background:linear-gradient(135deg,#18ce77 60%,#08ac52 110%);
  color:#fff;
}

.stats-card-red .stats-icon {
  background:linear-gradient(135deg,#ff5a4e 65%,#d90010 110%);
  color:#fff;
}

.stats-card-orng .stats-icon {
  background:linear-gradient(135deg,#ffb23c 53%,#e17800 110%);
  color:#fff;
}

.stats-label { 
  font-size:13px; 
  color:#63709b; 
  font-weight:600; 
  letter-spacing:.28px;
  font-family: 'Inter', sans-serif;
}

.stats-value { 
  font-size:1.25rem; 
  font-weight:700; 
  color:#194073;
  font-family: 'Inter', sans-serif;
}

.stats-card:hover .stats-icon {
  transform: scale(1.09) rotate(7deg);
  box-shadow:0 0 13px #2396f33b;
}

/* ===== ORDER MANAGEMENT SECTION ===== */
.order-mgmt-box {
  background: #fff; 
  border-radius:17px; 
  box-shadow:0 7px 38px #dde3fa77, 0 2px 9px #e5e7ff80;
  margin-bottom: 33px; 
  margin-top: 10px; 
  padding-bottom: 0;
}

.order-mgmt-bar {
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  border-radius:17px 17px 0 0; 
  background: #fceeb8ff;
  min-height: 54px; 
  padding: 15px 26px 10px 22px; 
  border-bottom: 1.4px solid #e8e2cf;
  box-shadow:0 1px 13px #ffe2a888;
}

.order-mgmt-title {
  font-size:1.32rem; 
  font-weight:800; 
  color:#2451af; 
  letter-spacing:.08em;
  display: flex; 
  align-items: center; 
  gap: 11px;
  font-family: 'Inter', sans-serif;
}

.order-mgmt-title i { 
  font-size: 1.12em; 
  color: #336ad3; 
}

.create-order-btn {
  background: linear-gradient(90deg,#226ad6,#46b4fd 123%);
  padding:9px 26px; 
  font-weight:600; 
  border:none; 
  border-radius:9px; 
  color:#fff;
  font-size:16.2px; 
  box-shadow: 0 2px 13px #dde7fa42;
  transition: background 0.16s, box-shadow .17s;
  display: flex; 
  align-items: center; 
  gap: 8px; 
  font-family: inherit;
  font-family: 'Inter', sans-serif;
}

.create-order-btn:hover {
  background: linear-gradient(90deg,#3264f8,#3acfff 140%);
  box-shadow:0 4px 25px #5ab8f880;
}

.card-body, .order-mgmt-main { 
  background: #fff; 
  border-radius: 0 0 17px 17px; 
  padding:20px; 
  margin-top: 15px;
}

.card { 
  border-radius:17px; 
  box-shadow:0 7px 29px #e7eefd8c; 
  border:none; 
  margin-bottom:23px!important;
  margin-top: 15px;
}

/* ===== IMPROVED TABLE STYLES ===== */
.table thead tr {
  background: #feebbe !important;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 19px #f8cf667e;
}

.table thead th {
  background: transparent !important;
  border: none;
  font-weight: 700; 
  color: #343535; 
  letter-spacing: 0.02em; 
  font-size: 15px;
  padding: 16px 12px;
  font-family: 'Inter', sans-serif;
  border-bottom: 2px solid #e9ecef;
}
.table thead th:first-child  { border-radius: 9px 0 0 0;}
.table thead th:last-child   { border-radius: 0 9px 0 0;}

.table { 
  background:#fff; 
  border-radius:9px; 
  box-shadow:0 2px 12px #e2ebf941;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.table-striped tbody tr {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  margin-bottom: 8px;
  transition: all 0.3s ease;
  height: 60px;
}

.table-striped tbody tr:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
  transform: translateY(-2px);
  background: #f8fafd;
}

.table-striped tbody tr:nth-of-type(odd) { 
  background:#f9fafc; 
}

.table-striped tbody tr:nth-of-type(even) { 
  background:#ffffff; 
}

.table td {
  padding: 14px 12px;
  border: none;
  position: relative;
  vertical-align: middle;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  line-height: 1.5;
  border-bottom: 1px solid #f1f3f4;
}

.table td:first-child {
  border-radius: 8px 0 0 8px; 
  border-left: 3px solid transparent;
}

.table td:last-child {
  border-radius: 0 8px 8px 0; 
}

.table-responsive { 
  border-radius:10px; 
}

/* ===== UPDATED STATUS BADGE STYLES ===== */
.badge {
  padding: 7px 17px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 2px solid transparent !important;
  min-width: 40px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1.2 !important;
  font-family: 'Inter', sans-serif;
  gap: 6px;
  width: 110px;
}

.status-icon {
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pending Status - SAME SIZE WITH CLOCK ICON */
.badge-pending {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #d97706 !important;
  border-color: #f59e0b !important;
}

.badge-loading {
  background: linear-gradient(135deg, #e3f2fd, #90caf9) !important;
  color: #1565c0 !important;
  border-color: #2196f3 !important;
  width: 110px;
}

/* In Transit Status - SAME SIZE WITH TRUCK ICON */
.badge-in_transit {
  background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
}

/* Dispatched Status - SAME SIZE WITH BOX ICON */
.badge-dispatched {
  background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
  color: #6b21a8 !important;
  border-color: #8b5cf6 !important;
}

/* Delivered Status - SAME SIZE WITH CHECK ICON */
.badge-delivered {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  color: #065f46 !important;
  border-color: #10b981 !important;
}

/* Default badge styles - SAME SIZE */
.badge.bg-info {
  background: linear-gradient(135deg, #4cc9f0, #4361ee) !important;
  color: white !important;
}

.badge.bg-success {
  background: linear-gradient(135deg, #4ade80, #22c55e) !important;
  color: white !important;
}

.badge.bg-warning {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: white !important;
}

.badge.bg-danger {
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
  color: white !important;
}

.form-label { 
  font-weight:600; 
  color:#1d3159; 
  font-size:15px;
  font-family: 'Inter', sans-serif;
}

.form-control, .form-select {
  border-radius:8px!important; 
  font-size:15.8px; 
  background: #f7f9fe;
  border:1.2px solid #c7dbfa; 
  font-weight:500;
  font-family: 'Inter', sans-serif;
}

.form-control:focus, .form-select:focus {
  border-color:#2469d6; 
  box-shadow:0 0 4px #226ad688;
}

.table td a { 
  color:#2469d6; 
  font-weight:600; 
  text-decoration:underline; 
  font-family: 'Inter', sans-serif;
}

/* ===== HORIZONTAL SCROLL CONTAINER ===== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 12px;
}

.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #a7b8ff, #6c8eff);
  border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #5a78ff, #3f63e0);
}

.table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table {
  min-width: 2000px;
  border-radius: 10px;
}
/* ===== CREATE ORDER MODAL STYLES ===== */
.create-order-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;           /* full screen */
  height: 100vh;          /* full screen */
  background: #f8fafc;    /* backdrop काढून direct page सारखा bg */
  display: none;
  justify-content: flex-start; /* top पासून सुरू कर */
  align-items: stretch;        /* full height */
  z-index: 9999;
  overflow-y: auto;           /* content scroll */
}

/* JS madhun modal.classList.add('show') already aahe */
.create-order-modal.show {
  display: block;            /* flex ऐवजी block => full page section सारखा */
}

/* Card ला full-width/height सारखं कर */
.create-order-modal .modal-card {
  background: #fff;
  border-radius: 0;          /* corner radius काढला => normal page feel */
  box-shadow: none;          /* popup सारखा shadow काढला */
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  max-height: none;
  overflow: visible;
}

.create-order-modal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 25px;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.create-order-modal .modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.create-order-modal .close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}

.create-order-modal .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.create-order-modal .modal-body {
  padding: 25px;
  background: #f8fafc;
}

.create-order-modal .form-label {
  font-weight: 600;
  color: #1d3159;
  font-size: 15px;
  margin-bottom: 5px;
  font-family: 'Inter', sans-serif;
}

.create-order-modal .form-control,
.create-order-modal .form-select {
  border-radius: 8px;
  background: #fff;
  border: 1.2px solid #c7dbfa;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
}

.create-order-modal .form-control:focus,
.create-order-modal .form-select:focus {
  border-color: #2469d6;
  box-shadow: 0 0 0 3px rgba(36, 105, 214, 0.1);
}

.create-order-modal .btn-info {
  background: #24a0eb;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
}

.create-order-modal .btn-info:hover {
  background: #1d8fd8;
}

.create-order-modal .btn-success {
  background: #28a745;
  border: none;
  padding: 12px 30px;
  font-weight: 600;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
}

.create-order-modal .btn-success:hover {
  background: #218838;
}

.create-order-modal .btn-warning {
  background: #ffc107;
  border: none;
  color: #000;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.create-order-modal .btn-warning:hover {
  background: #e0a800;
}

.create-order-modal .btn-danger {
  background: #dc3545;
  border: none;
  font-family: 'Inter', sans-serif;
}

.create-order-modal .btn-danger:hover {
  background: #c82333;
}

.create-order-modal .table-wrapper {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.create-order-modal .table {
  margin-bottom: 0;
  background: #fff;
}

.create-order-modal .table th {
  background: #f8f9fa;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
  font-family: 'Inter', sans-serif;
}

/* items table inputs */
.items-input {
  width: 100%;
  padding: 4px 6px;
  font-size: 13px;
}

/* ===== ORDER DETAILS MODAL STYLES ===== */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-content {
  border: none;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
  padding: 11px 16px;
  border-radius: 20px 20px 0 0;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.modal-header .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.modal-body {
  padding: 30px;
  background: #f8fafc;
  max-height: 70vh;
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
}

/* ===== PAGINATION STYLES ===== */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 12px 0;
    border-top: 1px solid #eef3fb;
}

.pagination-info {
    font-size: 13px;
    color: #9ba5bb;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

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

.pagination-btn {
    background: #fff;
    border: 1px solid #e3eaf6;
    color: #1a2951;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    font-family: 'Inter', sans-serif;
}

.pagination-btn:hover:not(:disabled) {
    background: #1a2951;
    color: white;
    border-color: #1a2951;
}

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

.pagination-page-btn {
    background: #fff;
    border: 1px solid #e3eaf6;
    color: #1a2951;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 36px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.pagination-page-btn:hover {
    background: #1a2951;
    color: white;
    border-color: #1a2951;
}

.pagination-page-btn.active {
    background: #1a2951;
    color: white;
    border-color: #1a2951;
}

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

.pagination-ellipsis {
    color: #9ba5bb;
    font-size: 13px;
    padding: 0 4px;
    font-family: 'Inter', sans-serif;
}

.pagination-img-btn {
    background: #fff;
    border: 1px solid #e3eaf6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0;
}

.pagination-img-btn:hover:not(:disabled) {
    background: #1a2951;
    border-color: #1a2951;
}

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

.pagination-img-btn img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(748%) hue-rotate(201deg) brightness(93%) contrast(89%);
    transition: filter 0.3s ease;
}

.pagination-img-btn:hover:not(:disabled) img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%);
}

.pagination-img-btn:disabled img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Laptop (1200px and below) */
@media (max-width: 1200px) {
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .table {
    min-width: 1000px;
  }
}

/* Tablet (992px and below) */
@media (max-width: 992px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .order-mgmt-bar {
    padding: 15px 20px;
  }
  
  .order-mgmt-title {
    font-size: 1.2rem;
  }
  
  .create-order-btn {
    padding: 8px 20px;
    font-size: 15px;
  }
  
  .table {
    min-width: 900px;
    font-size: 0.9rem;
  }
  
  .table th,
  .table td {
    padding: 12px 8px;
  }

  .pagination-container {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  
  .pagination-controls {
    justify-content: center;
  }

  .create-order-modal .modal-card {
    width: 98%;
    margin: 10px;
  }
  
  .create-order-modal .modal-body {
    padding: 15px;
  }
  
  .create-order-modal .modal-header {
    padding: 15px 20px;
  }
  
  .modal-body {
    padding: 20px 15px;
  }
  
  .modal-header {
    padding: 10px 15px;
  }
}

/* Mobile Landscape (768px and below) */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .dash-title-main {
    font-size: 1.3rem;
  }
  
  .dash-title-desc {
    font-size: 0.9rem;
  }
  
  .stats-row-wrap {
    margin-bottom: 25px;
  }
  
  .stats-card {
    padding: 15px 12px;
    gap: 12px;
  }
  
  .stats-icon {
    width: 42px;
    height: 42px;
    font-size: 1.4rem;
  }
  
  .stats-value {
    font-size: 1.1rem;
  }
  
  .stats-label {
    font-size: 12px;
  }
  
  .order-mgmt-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    min-height: auto;
  }
  
  .create-order-btn {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-size: 15px;
  }
  
  .card-body, .order-mgmt-main {
    padding: 20px 15px;
  }
  
  .table-wrapper {
    padding: 5px;
    border-radius: 8px;
  }
  
  .table {
    min-width: 800px;
    font-size: 0.85rem;
  }
  
  .table th,
  .table td {
    padding: 10px 6px;
  }
  
  .badge {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
  
  .btn-sm {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  
  /* Modal adjustments for mobile */
  .create-order-modal .modal-card {
    width: 98%;
    margin: 10px;
  }
  
  .create-order-modal .modal-body {
    padding: 15px;
  }
  
  .create-order-modal .modal-header {
    padding: 15px 20px;
  }
  
  .modal-body {
    padding: 20px 15px;
  }
  
  .modal-header {
    padding: 10px 15px;
  }
}

/* Mobile Portrait (576px and below) */
@media (max-width: 576px) {
  .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  .dash-title-main {
    font-size: 1.2rem;
  }
  
  .dash-title-desc {
    font-size: 0.85rem;
  }
  
  .stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .stats-card {
    padding: 12px 10px;
  }
  
  .stats-icon {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }
  
  .stats-value {
    font-size: 1rem;
  }
  
  .order-mgmt-title {
    font-size: 1.1rem;
    gap: 8px;
  }
  
  .order-mgmt-box {
    border-radius: 12px;
    margin-bottom: 25px;
  }
  
  .order-mgmt-bar {
    border-radius: 12px 12px 0 0;
    padding: 10px 12px;
  }
  
  .card-body, .order-mgmt-main {
    padding: 15px 10px;
    border-radius: 0 0 12px 12px;
  }
  
  .card {
    border-radius: 12px;
    margin-bottom: 20px !important;
  }
  
  .table {
    min-width: 700px;
    font-size: 0.8rem;
  }
  
  .table th,
  .table td {
    padding: 8px 4px;
  }
  
  .form-control, .form-select {
    font-size: 14px;
    padding: 6px 10px;
  }
  
  .create-order-modal .modal-card {
    width: 100%;
    margin: 5px;
    border-radius: 12px;
  }
  
  .create-order-modal .modal-header {
    padding: 12px 15px;
    border-radius: 12px 12px 0 0;
  }
  
  .create-order-modal .modal-body {
    padding: 12px;
  }
  
  /* Stack form columns on mobile */
  .create-order-modal .row.g-3 > [class*="col-"] {
    margin-bottom: 10px;
  }
}

/* Small Mobile (400px and below) */
@media (max-width: 400px) {
  .container-fluid {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .stats-card {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 15px 8px;
  }
  
  .order-mgmt-title {
    font-size: 1rem;
  }
  
  .create-order-btn {
    font-size: 14px;
    padding: 8px;
  }
  
  .table {
    min-width: 650px;
  }
  
  .btn-sm {
    font-size: 0.7rem;
    padding: 3px 6px;
  }
}

/* High-resolution displays */
@media (min-width: 1400px) {
  .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .stats-row {
    gap: 20px;
  }
  
  .stats-card {
    padding: 20px;
  }
}

/* Print styles */
@media print {
  .create-order-btn,
  .order-mgmt-bar {
    display: none !important;
  }
  
  .stats-card {
    break-inside: avoid;
  }
}
</style>

<div class="container-fluid py-3">

  <!-- DASHBOARD TITLE -->
  <div class="dash-top-titlebox">
    <div class="dash-title-main">Admin Dashboard</div>
    <div class="dash-title-desc">Monitor operations and manage system</div>
  </div>

  <!-- STATS CARDS -->
  <div class="stats-row-wrap">
    <div class="stats-row">
      <div class="stats-card stats-card-blue"><span class="stats-icon">📦</span><div class="stats-label">Total Shipments</div><div class="stats-value">{{ $totalShipments }}</div></div>
      <div class="stats-card stats-card-blue"><span class="stats-icon">👥</span><div class="stats-label">Active Customers</div><div class="stats-value">{{ $activeCustomers }}</div></div>
      <div class="stats-card stats-card-green"><span class="stats-icon">💰</span><div class="stats-label">Total Revenue</div><div class="stats-value">₹{{ number_format($totalRevenue, 2) }}</div></div>
      <div class="stats-card stats-card-red"><span class="stats-icon">⏳</span><div class="stats-label">Pending Order</div><div class="stats-value">{{ $pendingOrders }}</div></div>
    </div>
    <div class="stats-row">
      <div class="stats-card stats-card-blue"><span class="stats-icon">📦</span><div class="stats-label">Total Orders</div><div class="stats-value">{{ $totalOrders }}</div></div>
      <div class="stats-card stats-card-blue"><span class="stats-icon">🧑‍💼</span><div class="stats-label">Total Staff</div><div class="stats-value">{{ $totalStaff }}</div></div>
      <div class="stats-card stats-card-blue"><span class="stats-icon">📦</span><div class="stats-label">Total Items</div><div class="stats-value">{{ $totalItems }}</div></div>
      <div class="stats-card stats-card-orng"><span class="stats-icon">⛔</span><div class="stats-label">Inactive Customers</div><div class="stats-value">{{ $inactiveCustomers }}</div></div>
    </div>
  </div>

  <!-- ORDER MANAGEMENT -->
  <div class="order-mgmt-box">
    <div class="order-mgmt-bar">
      <span class="order-mgmt-title"><i class="bi bi-table"></i> Order Management</span>
      @can('order.create')
        <button class="create-order-btn" id="openCreateOrderModal">
          <i class="bi bi-plus-circle"></i> Create Order
        </button>
      @endcan

    </div>
    <div class="order-mgmt-main">
      <!-- RECENT ORDERS TABLE -->
      <div class="card shadow-sm">
        <div class="card-header bg-light">
          <strong>Recent Orders</strong>
          <span style="font-size:13px;color:#6577a3;margin-left:10px;">
            Total orders: <span id="ordersCount">{{ $orders->count() }}</span>
          </span>
        </div>
        <div class="card-body table-responsive">
          <div class="table-wrapper">
            <table class="table table-striped table-bordered align-middle text-center">
              <thead class="table-light">
                <tr>
                  <th>#</th>
                  <th>Order ID</th>
                  <th>Mark No</th>
                  <th>Date</th>
                  <th>Origin</th>
                  <th>Destination</th>
                  <th>Total CTN</th>
                  <th>Total QTY</th>
                  <th>Total TTL/QTY</th>
                  <th>Total Amount (₹)</th>
                  <th>Total CBM</th>
                  <th>Total TTL CBM</th>
                  <th>Total KG</th>
                  <th>Total TTL KG</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody id="ordersTableBody">
                @forelse($orders as $order)
                <tr>
                  <td>{{ $order->id }}</td>
                  <td>
                    <a href="javascript:void(0)"
                      class="fw-semibold text-primary open-order-modal"
                      data-id="{{ $order->id }}">
                      {{ $order->order_id }}
                    </a>
                  </td>

                    <td>{{ $order->mark_no }}</td>
                    <td>{{ $order->origin }}</td>
                    <td>{{ $order->destination }}</td>
                    <td>{{ $order->ctn }}</td>
                    <td>{{ $order->qty }}</td>
                    <td>{{ $order->ttl_qty }}</td>
                    <td>₹{{ number_format($order->ttl_amount, 2) }}</td>
                    <td>{{ $order->cbm }}</td>
                    <td>{{ $order->ttl_cbm }}</td>
                    <td>{{ $order->kg }}</td>
                    <td>{{ $order->ttl_kg }}</td>
                    <td>
                      @php
                          // Badge color mapping
                          $badgeMap = [
                              'order_placed'          => 'secondary',
                              'order_confirmed'       => 'info',
                              'supplier_warehouse'    => 'warning',
                              'consolidate_warehouse' => 'warning',
                              'export_custom'         => 'primary',
                              'international_transit' => 'primary',
                              'arrived_india'         => 'info',
                              'import_custom'         => 'info',
                              'warehouse'             => 'dark',
                              'domestic_distribution' => 'primary',
                              'out_for_delivery'      => 'success',
                              'delivered'             => 'success',
                          ];

                          // Icon mapping
                          $iconMap = [
                              'order_placed'          => 'bi-clock-fill',
                              'order_confirmed'       => 'bi-check-circle',
                              'supplier_warehouse'    => 'bi-box-seam',
                              'consolidate_warehouse' => 'bi-boxes',
                              'export_custom'         => 'bi-upload',
                              'international_transit' => 'bi-truck',
                              'arrived_india'         => 'bi-geo-alt',
                              'import_custom'         => 'bi-download',
                              'warehouse'             => 'bi-building',
                              'domestic_distribution' => 'bi-diagram-3',
                              'out_for_delivery'      => 'bi-truck-flatbed',
                              'delivered'             => 'bi-check-circle-fill',
                          ];

                          $badgeClass = $badgeMap[$order->status] ?? 'secondary';
                          $iconClass  = $iconMap[$order->status] ?? 'bi-info-circle';
                      @endphp

                      <span class="badge bg-{{ $badgeClass }}">
                          <i class="bi {{ $iconClass }} status-icon"></i>
                          {{ $order->status_label }}
                      </span>
                  </td>

                    <td>{{ $order->created_at->format('d-m-Y') }}</td>
                    <td>
                      <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-eye"></i> View
                      </a>
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td colspan="16" class="text-muted">No orders found</td>
                  </tr>
                  @endforelse
                </tbody>
              </table>
            </div>

            <!-- Pagination Controls -->
            <div class="pagination-container">
                <div class="pagination-info" id="pageInfo">Showing 1 to 10 of {{ $orders->count() }} entries</div>
                <div class="pagination-controls">
                    <button class="pagination-img-btn" id="prevPageBtn" title="Previous page">
                        <!-- Left arrow SVG -->
                        <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">
                        <!-- Right arrow SVG -->
                        <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CREATE ORDER MODAL -->
<div class="create-order-modal" id="createOrderModal">
  <div class="modal-card">
    <div class="modal-header">
      <h5 class="modal-title">Create New Order</h5>
      <button class="close-btn" id="closeCreateOrderModal">&times;</button>
    </div>
    <div class="modal-body">
      @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
          {{ session('success') }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      @endif

      <!-- CREATE ORDER FORM -->
      <form action="{{ route('admin.orders.temp.add') }}" method="POST" id="createOrderForm">
        @csrf
        <div class="row g-3">
          {{-- MARK NO --}}
          <div class="col-md-4">
              <label class="form-label">Mark No</label>
              @if(session('temp_order_items'))
                  <input type="text" class="form-control" value="{{ session('mark_no') }}" disabled>
                  <input type="hidden" name="mark_no" value="{{ session('mark_no') }}">
              @else
                  <select class="form-select" id="markNoSelect" name="mark_no" required>
                      <option value="">Select Mark No</option>
                      @foreach($markList as $mark)
                          <option value="{{ $mark->mark_no }}"
                              data-origin="{{ $mark->origin }}"
                              data-destination="{{ $mark->destination }}"
                              @if(session('mark_no') == $mark->mark_no) selected @endif>
                              {{ $mark->mark_no }} - {{ $mark->customer_name }}
                          </option>
                      @endforeach
                  </select>
              @endif
          </div>

          {{-- ORIGIN --}}
          <div class="col-md-4">
            <label class="form-label">Origin</label>
            <input type="text" class="form-control" 
                   id="originField"
                   name="origin"
                   readonly required
                   value="{{ session('origin') }}">
          </div>

          {{-- DESTINATION --}}
          <div class="col-md-4">
            <label class="form-label">Destination</label>
            <input type="text" class="form-control" 
                   id="destinationField"
                   name="destination"
                   readonly required
                   value="{{ session('destination') }}">
          </div>
        </div>

        <hr class="my-3">

        {{-- ITEM INPUTS --}}
        <h6 class="text-primary">Add Item</h6>

        {{-- NEW ITEMS TABLE (INSTEAD OF SINGLE-ROW INPUTS) --}}
        <div class="table-wrapper mb-3">
          <table class="table table-bordered table-sm align-middle text-center" id="itemsTable">
            <thead class="table-light">
              <tr>
                <th>#</th>
                <th>Description</th>
                <th>CTN</th>
                <th>QTY</th>
                <th>TTL/QTY</th>
                <th>Unit</th>
                <th>Price</th>
                <th>TTL Amount</th>
                <th>CBM</th>
                <th>TTL CBM</th>
                <th>KG</th>
                <th>TTL KG</th>
                <th>Shop No</th>
                <th>Remove</th>
              </tr>
            </thead>
            <tbody id="itemsTableBody">
              {{-- JS will create default 2 blank rows --}}
            </tbody>
          </table>
        </div>

        <div class="row g-3">
          <div class="col-md-12 text-end mt-3">
            <button type="button" class="btn btn-secondary clear-form-btn" id="clearForm">
              <i class="bi bi-arrow-clockwise"></i> Clear Form
            </button>
            <button type="submit" class="btn btn-info" id="addItemBtn">
              <i class="bi bi-plus-circle"></i> Add Item
            </button>

            <input type="file" id="excelInput" accept=".xlsx,.xls" hidden>

            <button type="button" class="btn btn-outline-success" id="uploadExcelBtn">
              <i class="bi bi-file-earmark-excel"></i> Upload Excel
            </button>

          </div>
        </div>
      </form>

      {{-- RESET ORDER BUTTON --}}
      @if(session('temp_order_items'))
      <div class="text-start mt-2">
        <form action="{{ route('admin.orders.temp.reset') }}" method="POST">
          @csrf
          <button type="submit" class="btn btn-warning btn-sm">
            <i class="bi bi-arrow-repeat"></i> Reset Order
          </button>
        </form>
      </div>
      @endif

      {{-- TEMPORARY ITEMS TABLE --}}
      @if(session('temp_order_items') && count(session('temp_order_items')) > 0)
        <hr class="my-4">
        <h5 class="text-success">Temporary Items ({{ count(session('temp_order_items')) }} items)</h5>
        <div class="table-wrapper">
          <table class="table table-bordered text-center align-middle">
            <thead class="table-light">
              <tr>
                  <th>#</th>
                  <th>Description</th>
                  <th>CTN</th>
                  <th>QTY</th>
                  <th>TTL/QTY</th>
                  <th>Unit</th>
                  <th>Price</th>
                  <th>TTL Amount</th>
                  <th>CBM</th>
                  <th>TTL CBM</th>
                  <th>KG</th>
                  <th>TTL KG</th>
                  <th>Shop No</th>
                  <th>Remove</th>
              </tr>
            </thead>
            <tbody>
              @foreach(session('temp_order_items') as $index => $item)
                <tr>
                  <td>{{ $index + 1 }}</td>
                  <td>{{ $item['description'] }}</td>
                  <td>{{ $item['ctn'] }}</td>
                  <td>{{ $item['qty'] }}</td>
                  <td>{{ $item['ttl_qty'] }}</td>
                  <td>{{ $item['unit'] }}</td>
                  <td>{{ $item['price'] }}</td>
                  <td>{{ $item['ttl_amount'] }}</td>
                  <td>{{ $item['cbm'] }}</td>
                  <td>{{ $item['ttl_cbm'] }}</td>
                  <td>{{ $item['kg'] }}</td>
                  <td>{{ $item['ttl_kg'] }}</td>
                  <td>{{ $item['shop_no'] }}</td>
                  <td>
                    <form action="{{ route('admin.orders.temp.delete') }}" method="POST">
                      @csrf
                      <input type="hidden" name="index" value="{{ $index }}">
                      <button type="submit" class="btn btn-danger btn-sm">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        <div class="text-end mt-3">
          <form action="{{ route('admin.orders.finish') }}" method="POST">
            @csrf
            <input type="hidden" name="mark_no" value="{{ session('mark_no') }}">
            <input type="hidden" name="origin" value="{{ session('origin') }}">
            <input type="hidden" name="destination" value="{{ session('destination') }}">
            <button type="submit" class="btn btn-success btn-lg">
              <i class="bi bi-check-circle"></i> Finish & Save Order
            </button>
          </form>
        </div>
      @endif
    </div>
  </div>
</div>

<!-- MODERN ORDER DETAILS MODAL -->
<div class="modal fade" id="orderDetailsModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Order Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body" id="orderDetailsBody">
        <p class="text-center text-muted">Loading...</p>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('createOrderModal');
    const openBtn = document.getElementById('openCreateOrderModal');
    const closeBtn = document.getElementById('closeCreateOrderModal');
    const clearFormBtn = document.getElementById('clearForm');

    // Pagination state
    let currentPage = 1;
    const ordersPerPage = 10;
    let allOrders = @json($orders->values());

    // ------- ITEMS TABLE LOGIC (NEW) -------

    const itemsTableBody = document.getElementById('itemsTableBody');

    function addRow(index) {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td class="align-middle fw-bold">${index + 1}</td>
            <td><input type="text" class="form-control form-control-sm items-input" name="items[${index}][description]" data-field="description"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ctn]" data-field="ctn"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][qty]" data-field="qty"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_qty]" data-field="ttl_qty"></td>
            <td><input type="text" class="form-control form-control-sm items-input" name="items[${index}][unit]" data-field="unit"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][price]" data-field="price" step="0.01"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_amount]" data-field="ttl_amount" step="0.01"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][cbm]" data-field="cbm" step="0.001"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_cbm]" data-field="ttl_cbm" step="0.001"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][kg]" data-field="kg" step="0.001"></td>
            <td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_kg]" data-field="ttl_kg" step="0.001"></td>
            <td><input type="text" class="form-control form-control-sm items-input" name="items[${index}][shop_no]" data-field="shop_no"></td>
            <td><button type="button" class="btn btn-sm btn-danger remove-row-btn">&times;</button></td>
        `;
        itemsTableBody.appendChild(tr);
    }

    function generateDefaultRows() {
        itemsTableBody.innerHTML = '';
        addRow(0);
        addRow(1);
        focusFirstInput();
    }

    function reindexRows() {
        const rows = itemsTableBody.querySelectorAll('tr');
        rows.forEach((tr, idx) => {
            tr.querySelector('td:first-child').textContent = idx + 1;
            tr.querySelectorAll('input').forEach(input => {
                const field = input.getAttribute('data-field');
                input.name = `items[${idx}][${field}]`;
            });
        });
    }

    function rowHasData(row) {
        const inputs = row.querySelectorAll('input');
        return Array.from(inputs).some(inp => inp.value.trim() !== '');
    }

    function focusFirstInput() {
        const first = itemsTableBody.querySelector('tr:first-child input');
        if (first) first.focus();
    }

    // ------- EXISTING PAGINATION INITIALIZE -------
    initializePagination();

    // Reset temp data function
    const resetTempData = () => {
        fetch('{{ route("admin.orders.temp.reset") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
    };

    // Modal functions
    const openModal = () => {
        modal.classList.add('show');
        document.body.style.overflow = 'hidden';
        document.querySelector('.alert-success')?.remove();
        generateDefaultRows();
    };

    const closeModal = () => {
        modal.classList.remove('show');
        document.body.style.overflow = '';
        @if(session('temp_order_items') && count(session('temp_order_items')) > 0)
        setTimeout(() => {
            resetTempData();
            window.location.reload();
        }, 100);
        @endif
    };

    // Clear form -> clear items table
    const clearForm = () => {
        generateDefaultRows();
    };

    // Event listeners
    openBtn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);
    clearFormBtn.addEventListener('click', clearForm);

    modal.addEventListener('click', (e) => e.target === modal && closeModal());
    document.addEventListener('keydown', (e) => e.key === 'Escape' && modal.classList.contains('show') && closeModal());

    // Mark No functionality (unchanged)
    const markNoSelect = document.getElementById('markNoSelect');
    if (markNoSelect) {
        markNoSelect.addEventListener('change', function() {
            const locked = {{ session('temp_order_items') ? 'true' : 'false' }};
            if (locked) {
                alert("You must finish the current order before changing Mark No.");
                this.value = "{{ session('mark_no') }}";
                return;
            }
            const option = this.options[this.selectedIndex];
            document.getElementById('originField').value = option.dataset.origin || '';
            document.getElementById('destinationField').value = option.dataset.destination || '';
        });
    }

    // Auto open modal if temp items exist
    @if(session('temp_order_items') && count(session('temp_order_items')) > 0)
        modal.classList.add('show');
        document.body.style.overflow = 'hidden';
        generateDefaultRows();
    @endif

    // Reset confirmation
    document.querySelectorAll('form[action="{{ route("admin.orders.temp.reset") }}"]')
        .forEach(form => form.addEventListener('submit', e => {
            if (!confirm('Are you sure you want to reset the current order? All temporary items will be lost.')) {
                e.preventDefault();
            }
        }));

    // Order details modal functionality (unchanged)
    document.querySelectorAll('.open-order-modal').forEach(button => {
        button.addEventListener('click', function() {
            let id = this.dataset.id;
            let modalInstance = new bootstrap.Modal(document.getElementById('orderDetailsModal'));

            document.getElementById('orderDetailsBody').innerHTML =
                "<p class='text-center text-muted'>Loading...</p>";

            modalInstance.show();

            fetch(`/admin/orders/view/${id}`)
                .then(response => response.text())
                .then(html => {
                    document.getElementById('orderDetailsBody').innerHTML = html;
                })
                .catch(() => {
                    document.getElementById('orderDetailsBody').innerHTML =
                        "<p class='text-danger text-center'>Failed to load order details.</p>";
                });
        });
    });

    /* ---------- Pagination Functions (unchanged) ---------- */
    function initializePagination() {
        renderOrdersTable(allOrders);
        updatePaginationControls();
        
        document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
        document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
    }

    function goToPreviousPage() {
        if (currentPage > 1) {
            currentPage--;
            renderOrdersTable(allOrders);
            updatePaginationControls();
        }
    }

    function goToNextPage() {
        const totalPages = Math.ceil(allOrders.length / ordersPerPage);
        if (currentPage < totalPages) {
            currentPage++;
            renderOrdersTable(allOrders);
            updatePaginationControls();
        }
    }

    function updatePaginationControls() {
        const totalPages = Math.ceil(allOrders.length / ordersPerPage);
        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;
        
        const startIndex = (currentPage - 1) * ordersPerPage + 1;
        const endIndex = Math.min(currentPage * ordersPerPage, allOrders.length);
        pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${allOrders.length} entries`;
        
        paginationPages.innerHTML = '';
        
        if (totalPages <= 7) {
            for (let i = 1; i <= totalPages; i++) {
                addPageButton(i, paginationPages);
            }
        } else {
            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;
            renderOrdersTable(allOrders);
            updatePaginationControls();
        });
        container.appendChild(button);
    }

    function renderOrdersTable(orders) {
        const tbody = document.getElementById('ordersTableBody');
        tbody.innerHTML = '';
        
        if (!orders || orders.length === 0) {
            tbody.innerHTML = '<tr><td colspan="16" class="text-muted">No orders found</td></tr>';
            return;
        }

        const startIndex = (currentPage - 1) * ordersPerPage;
        const endIndex = startIndex + ordersPerPage;
        const paginatedOrders = orders.slice(startIndex, endIndex);

        paginatedOrders.forEach(order => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${order.id}</td>
                <td>
                    <a href="javascript:void(0)"
                        class="fw-semibold text-primary open-order-modal"
                        data-id="${order.id}">
                        ${order.order_id}
                    </a>
                </td>
                <td>${order.mark_no || ''}</td>
                <td>${order.origin || ''}</td>
                <td>${order.destination || ''}</td>
                <td>${order.ctn || ''}</td>
                <td>${order.qty || ''}</td>
                <td>${order.ttl_qty || ''}</td>
                <td>₹${order.ttl_amount ? Number(order.ttl_amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '0.00'}</td>
                <td>${order.cbm || ''}</td>
                <td>${order.ttl_cbm || ''}</td>
                <td>${order.kg || ''}</td>
                <td>${order.ttl_kg || ''}</td>
                <td>
                    <span class="badge badge-${order.status}">
                        ${order.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
                        ${order.status === 'in_transit' ? '<i class="bi bi-truck status-icon"></i>' : ''}
                        ${order.status === 'dispatched' ? '<i class="bi bi-box-seam status-icon"></i>' : ''}
                        ${order.status === 'delivered' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
                        ${order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1).replace('_', ' ') : ''}
                    </span>
                </td>
                <td>${new Date(order.created_at).toLocaleDateString('en-GB')}</td>
                <td>
                    <a href="/admin/orders/${order.id}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-eye"></i> View
                    </a>
                </td>
            `;
            tbody.appendChild(tr);

            const orderLink = tr.querySelector('.open-order-modal');
            if (orderLink) {
                orderLink.addEventListener('click', function() {
                    let id = this.dataset.id;
                    let modalInstance = new bootstrap.Modal(document.getElementById('orderDetailsModal'));

                    document.getElementById('orderDetailsBody').innerHTML =
                        "<p class='text-center text-muted'>Loading...</p>";

                    modalInstance.show();

                    fetch(`/admin/orders/view/${id}`)
                        .then(response => response.text())
                        .then(html => {
                            document.getElementById('orderDetailsBody').innerHTML = html;
                        })
                        .catch(() => {
                            document.getElementById('orderDetailsBody').innerHTML =
                                "<p class='text-danger text-center'>Failed to load order details.</p>";
                        });
                });
            }
        });
    }

    // Enter key behavior for items/table
    itemsTableBody.addEventListener('keydown', function(e) {
        if (e.key !== 'Enter' || e.target.tagName !== 'INPUT') return;
        e.preventDefault();

        const currentInput = e.target;
        const currentRow = currentInput.closest('tr');
        const rows = Array.from(itemsTableBody.querySelectorAll('tr'));
        const currentRowIndex = rows.indexOf(currentRow);

        const inputs = Array.from(currentRow.querySelectorAll('input'));
        const currentInputIndex = inputs.indexOf(currentInput);

        const isLastRow = currentRowIndex === rows.length - 1;
        const hasData = rowHasData(currentRow);

        if (currentInputIndex < inputs.length - 1) {
            inputs[currentInputIndex + 1].focus();
            return;
        }

        if (!isLastRow) {
            const nextRow = rows[currentRowIndex + 1];
            const firstInputNextRow = nextRow.querySelector('input');
            if (firstInputNextRow) firstInputNextRow.focus();
            return;
        }

        if (isLastRow && hasData) {
            const newIndex = rows.length;
            addRow(newIndex);
            reindexRows();
            const newRow = itemsTableBody.querySelector('tr:last-child');
            const firstInput = newRow.querySelector('input');
            if (firstInput) firstInput.focus();
        }
    });

    // Remove row
    itemsTableBody.addEventListener('click', function(e) {
        if (!e.target.classList.contains('remove-row-btn')) return;
        const rows = itemsTableBody.querySelectorAll('tr');
        if (rows.length <= 1) {
            alert('At least one row must exist.');
            return;
        }
        e.target.closest('tr').remove();
        reindexRows();
    });

// ===== EXCEL UPLOAD LOGIC =====
const uploadExcelBtn = document.getElementById('uploadExcelBtn');
const excelInput = document.getElementById('excelInput');

if (uploadExcelBtn && excelInput) {

    uploadExcelBtn.addEventListener('click', () => excelInput.click());

    excelInput.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;

        const formData = new FormData();
        formData.append('excel', file);
        formData.append('_token', '{{ csrf_token() }}');

        fetch('{{ route("admin.orders.upload.excel.preview") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'application/json'
            }
        })
        .then(async res => {
            if (!res.ok) {
                const text = await res.text();
                throw new Error(text);
            }
            return res.json();
        })
        .then(res => {
            if (!res.success) {
                alert('Invalid Excel file');
                return;
            }
            populateItemsTable(res.items);
        })
        .catch(err => {
            console.error(err);
            alert('Excel upload failed');
        });
    });

}

function populateItemsTable(items) {
    itemsTableBody.innerHTML = '';

    items.forEach((item, index) => {
        addRow(index);
        const row = itemsTableBody.children[index];

        row.querySelector('[data-field="description"]').value = item.description ?? '';
        row.querySelector('[data-field="ctn"]').value = item.ctn ?? '';
        row.querySelector('[data-field="qty"]').value = item.qty ?? '';
        row.querySelector('[data-field="ttl_qty"]').value = item.ttl_qty ?? '';
        row.querySelector('[data-field="unit"]').value = item.unit ?? '';
        row.querySelector('[data-field="price"]').value = item.price ?? '';
        row.querySelector('[data-field="ttl_amount"]').value = item.ttl_amount ?? '';
        row.querySelector('[data-field="cbm"]').value = item.cbm ?? '';
        row.querySelector('[data-field="ttl_cbm"]').value = item.ttl_cbm ?? '';
        row.querySelector('[data-field="kg"]').value = item.kg ?? '';
        row.querySelector('[data-field="ttl_kg"]').value = item.ttl_kg ?? '';
        row.querySelector('[data-field="shop_no"]').value = item.shop_no ?? '';
    });

    reindexRows();
}
});
</script>

<script>
document.addEventListener("hidden.bs.modal", function () {
    document.querySelectorAll(".modal-backdrop").forEach(el => el.remove());
    document.body.classList.remove("modal-open");
    document.body.style.overflow = "";
});
</script>

@endsection