@extends('admin.layouts.app')

@section('page-title', 'Shipment Preview')

@section('content')
<style>
/* ===== GLOBAL ENHANCEMENTS ===== */
body {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.container-fluid {
    padding: 20px;
}

/* ===== MAIN CARD DESIGN ===== */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    background: white;
    overflow: hidden;
}

/* ===== SHIPMENT HEADER DESIGN ===== */
.shipment-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 25px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.shipment-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.shipment-header h3 {
    color: white;
    font-weight: 700;
    font-size: 1.8rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.shipment-header .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.shipment-header .btn-primary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ===== SECTION HEADERS ===== */
.fw-bold {
    color: #2d3748;
    font-weight: 700;
    margin: 30px 25px 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.fw-bold i {
    color: #667eea;
    margin-right: 10px;
}

/* ===== SHIPMENT INFO TABLE ===== */
.table.table-bordered.table-hover {
    margin: 0 25px 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.table.table-bordered.table-hover th {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: #4a5568;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 18px 20px;
    width: 200px;
    border-right: 1px solid #e2e8f0;
}

.table.table-bordered.table-hover td {
    padding: 18px 20px;
    font-size: 1rem;
    color: #2d3748;
}

.table.table-bordered.table-hover tbody tr {
    transition: all 0.2s ease;
}

.table.table-bordered.table-hover tbody tr:hover {
    background: linear-gradient(90deg, #f8fafc, #f1f5f9);
    transform: translateX(4px);
}

/* ===== STATUS BADGE ENHANCEMENT ===== */
.badge {
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.badge.bg-info {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white;
}

.badge.bg-primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: white;
}

.badge.bg-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white;
}

.badge.bg-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white;
}

/* ===== ORDERS TABLE DESIGN ===== */
.table-responsive {
    margin: 0 25px 30px;
}

.table.table-hover.table-striped {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.table.table-hover.table-striped thead {
    background: linear-gradient(135deg, #2937, #374151);
}

.table.table-hover.table-striped thead th {
    color: white;
    font-weight: 600;
    padding: 18px 15px;
    border: none;
    font-size: 0.9rem;
    white-space: nowrap;
    border-bottom: 2px solid #4b5563;
}

.table.table-hover.table-striped thead th:first-child {
    border-radius: 12px 0 0 0;
}

.table.table-hover.table-striped thead th:last-child {
    border-radius: 0 12px 0 0;
}

.table.table-hover.table-striped tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

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

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

.table.table-hover.table-striped tbody tr:hover {
    background: linear-gradient(90deg, #f1f5f9, #e2e8f0);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.table.table-hover.table-striped tbody td {
    padding: 15px;
    vertical-align: middle;
    color: #4a5568;
    font-size: 0.9rem;
}

/* ===== DATA BADGES ===== */
.badge.bg-light {
    background: #f1f5f9 !important;
    color: #4b5563;
    border: 1px solid #e2e8f0;
    padding: 5px 12px;
    border-radius: 8px;
    font-weight: 500;
    min-width: 50px;
    text-align: center;
}

/* ===== REMOVE BUTTON ===== */
.btn-outline-danger {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 6px 15px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-outline-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

/* ===== SHIPMENT TOTALS SECTION ===== */
.row {
    margin: 0 25px;
}

.table.table-bordered {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
}

.table.table-bordered th {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: #4a5568;
    font-weight: 600;
    padding: 15px 20px;
    border-right: 1px solid #e2e8f0;
}

.table.table-bordered td {
    padding: 15px 20px;
    color: #2d3748;
    font-size: 1.1rem;
}

/* ===== TOTAL AMOUNT ALERT ===== */
.alert-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 12px;
    padding: 25px;
    color: white;
    margin: 0 25px 30px;
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.2);
    position: relative;
    overflow: hidden;
}

.alert-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669, #10b981);
}

.alert-success h6 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.alert-success .float-end {
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== BACK BUTTON ===== */
.mt-4 {
    margin: 30px 25px 25px;
}

.btn-secondary {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 1px solid #d1d5db;
    color: #4b5568;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #374151;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ===== MODAL DESIGN (FROM CREATE NEW SHIPMENT) ===== */
.modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 25px 30px 15px;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background: rgba(255,255,255,0.2);
}

.modal-title {
    font-weight: 700;
    font-size: 1.5rem;
}

.btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
}

.btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

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

/* ===== MODAL BODY ===== */
.modal-body {
    padding: 30px;
    background: #f8fafc;
}

/* ===== FORM STYLES (FROM CREATE NEW SHIPMENT) ===== */
.form-label {
    font-weight: 600;
    color: #5a6c7d;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #fafbfc;
    color: #4a5568;
}

.form-control:focus {
    border-color: #a3bffa;
    box-shadow: 0 0 0 3px rgba(163, 191, 250, 0.2);
    background: white;
}

.form-control::placeholder {
    color: #a0aec0;
}

/* Date Input Styling */
input[type="date"] {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

input[type="date"] {
    position: relative;
    padding-right: 40px;
}

input[type="date"]:after {
    content: "📅";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 16px;
}

/* ===== BUTTON STYLES (FROM CREATE NEW SHIPMENT) ===== */
.btn-cancel {
    background: #f7fafc;
    color: #718096;
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    font-weight: 600;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: #edf2f7;
    color: #4a5568;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-create {
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 10px;
    padding: 12px 35px;
    border: none;
    transition: all 0.3s ease;
}

.btn-create:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(72, 187, 120, 0.3);
    background: linear-gradient(135deg, #38a169, #2f855a);
}

/* ===== CUSTOM TABLE IN MODAL (FROM CREATE NEW SHIPMENT) ===== */
.custom-table-modal {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin: 0;
    min-width: 1300px;
}

.custom-table-modal thead th {
    background: linear-gradient(135deg, #ebf8ff, #f0fff4);
    color: #2b6cb0;
    font-weight: 600;
    padding: 16px 10px;
    border: 1px solid #e2e8f0;
    text-align: center;
    position: relative;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.custom-table-modal thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.custom-table-modal thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.custom-table-modal tbody tr {
    background: #fdfdfe;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.custom-table-modal tbody tr:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #e2e8f0;
    background: white;
}

.custom-table-modal tbody td {
    padding: 14px 10px;
    text-align: center;
    vertical-align: middle;
    border: none;
    font-weight: 500;
    position: relative;
    color: #4a5568;
    white-space: nowrap;
}

.custom-table-modal tbody tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.custom-table-modal tbody tr td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Checkbox Styling */
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #cbd5e0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background: #f7fafc;
}

input[type="checkbox"]:checked {
    background: #4361ee;
    border-color: #4361ee;
}

.form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

/* ===== ORDERS SELECTION TABLE ===== */
.h6.fw-bold {
    color: #2d3748;
    margin-bottom: 15px;
    font-size: 1rem;
}

.alert-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: none;
    border-radius: 10px;
    color: #92400e;
    padding: 15px 20px;
    border-left: 4px solid #f59e0b;
}

/* TABLE CONTAINER WITHOUT VERTICAL SCROLL */
.table-responsive.border.rounded {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto;
}

.table-responsive.border.rounded table {
    margin-bottom: 0;
    min-width: 1200px;
}

.table.table-hover.align-middle {
    margin: 0;
}

/* STICKY HEADER */
.table.table-hover.align-middle thead.table-light {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.table.table-hover.align-middle thead th {
    font-weight: 600;
    color: #4a5568 !important;
    padding: 15px;
    border-bottom: 2px solid #e2e8f0;
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 100px;
}

/* TABLE ROWS */
.table.table-hover.align-middle tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.table.table-hover.align-middle tbody tr:hover {
    background: linear-gradient(90deg, #f8fafc, #f1f5f9);
}

.table.table-hover.align-middle tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ===== MODAL FOOTER ===== */
.modal-footer.bg-light {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    padding: 20px 30px;
}

.modal-footer .btn-secondary {
    background: #f1f5f9;
    border: 1px solid #d1d5db;
    color: #6b7280;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
}

.modal-footer .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

/* ===== TEXT COLORS ===== */
.text-primary {
    color: #667eea !important;
    font-weight: 600;
}

.text-success {
    color: #10b981 !important;
    font-weight: 600;
}

/* ===== PAGINATION STYLES ===== */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    margin: 20px 25px 10px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

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

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

.pagination-btn {
    background: white;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

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

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

.pagination-page-btn {
    background: white;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-page-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.pagination-page-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

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

.pagination-ellipsis {
    color: #9ba5bb;
    font-size: 14px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .container-fluid {
        padding: 10px;
    }
    
    .shipment-header {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .shipment-header h3 {
        font-size: 1.4rem;
    }
    
    .fw-bold {
        margin: 20px 15px 15px;
        font-size: 1.1rem;
    }
    
    .table.table-bordered.table-hover,
    .table-responsive,
    .row,
    .alert-success,
    .mt-4 {
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .table.table-hover.table-striped thead th,
    .table.table-hover.table-striped tbody td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .row.g-3.mb-3 {
        padding: 15px;
    }
    
    /* MOBILE VERSION साठी horizontal scroll राहील */
    .table-responsive.border.rounded {
        max-height: none;
        overflow-x: auto;
    }
    
    .table-responsive.border.rounded table {
        min-width: 1000px;
    }
    
    /* Pagination responsive */
    .pagination-container {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        margin: 20px 15px 10px;
        padding: 15px;
    }
    
    .pagination-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination-info {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .shipment-header .btn-primary {
        width: 100%;
        justify-content: center;
    }
    
    .table-responsive {
        margin-left: -15px;
        margin-right: -15px;
        padding: 0 15px;
    }
    
    .table.table-hover.table-striped {
        min-width: 1000px;
    }
    
    .table.table-bordered.table-hover th,
    .table.table-bordered.table-hover td {
        padding: 12px 15px;
    }
    
    .alert-success {
        padding: 20px;
    }
    
    .alert-success .float-end {
        font-size: 1.3rem;
    }
    
    .pagination-page-btn {
        min-width: 32px;
        height: 32px;
        padding: 4px 8px;
        font-size: 13px;
    }
    
    .pagination-btn {
        min-width: 32px;
        height: 32px;
        padding: 4px 8px;
    }
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    transform: none !important;
}
</style>

<div class="container-fluid py-4">
    <div class="card shadow-sm">
        <div class="shipment-header d-flex justify-content-between align-items-center p-4 border-bottom">
            <h3 class="mb-0">
                <i class="bi bi-box-seam me-2"></i>
                Shipment Details - {{ $shipment->shipment_id }}
            </h3>

            {{-- SHOW BUTTON ONLY FOR PENDING --}}
            @if($shipment->status === 'pending')
            <button type="button"
                    class="btn btn-primary btn-sm"
                    data-bs-toggle="modal"
                    data-bs-target="#createShipmentModal">
                <i class="bi bi-plus-circle me-1"></i>
                Add Orders to This Shipment
            </button>
            @endif
        </div>

        <h5 class="fw-bold mt-4 mb-3">
            <i class="bi bi-ship me-2"></i>
            Shipment Information
        </h5>
        <table class="table table-bordered table-hover">
            <tbody>
                <tr>
                    <th style="width: 200px;">Shipment ID</th>
                    <td class="fw-bold text-primary">{{ $shipment->shipment_id }}</td>
                </tr>
                <tr>
                    <th>Origin</th>
                    <td>{{ $shipment->origin }}</td>
                </tr>
                <tr>
                    <th>Destination</th>
                    <td>{{ $shipment->destination }}</td>
                </tr>
                <tr>
                    <th>Status</th>
                    <td>
                        @php
                            $statusColors = [
                                'pending'    => 'warning',
                                'loading'    => 'info',
                                'in_transit' => 'primary',
                                'dispatched' => 'success',
                                'delivered'  => 'success',
                            ];
                            $statusColor = $statusColors[$shipment->status] ?? 'secondary';
                        @endphp
                        <span class="badge bg-{{ $statusColor }}">
                            {{ ucfirst(str_replace('_', ' ', $shipment->status)) }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <th>Date</th>
                    <td>{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}</td>
                </tr>
            </tbody>
        </table>

        <h5 class="fw-bold mt-5 mb-3">
            <i class="bi bi-collection me-2"></i>
            Orders Contained in Shipment
        </h5>

        @if($shipment->orders->isEmpty())
            <div class="alert alert-warning">
                <i class="bi bi-exclamation-triangle me-2"></i>
                No orders found in this shipment.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover table-striped align-middle" id="ordersTable">
                    <thead class="table-dark">
                        <tr>
                            <th>Order ID</th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mark No</th>
                            <th>Description</th>
                            <th>CTN</th>
                            <th>QTY</th>
                            <th>TTL/QTY</th>
                            <th>KG</th>
                            <th>TTL/KG</th>
                            <th>Amount</th>
                            <th style="width: 100px;">Remove</th>
                        </tr>
                    </thead>
                    <tbody id="ordersTableBody">
                        </tbody>
                </table>
            </div>

            <div class="pagination-container">
                <div class="pagination-info" id="pageInfo">
                    Showing <span id="startCount">1</span> to <span id="endCount">0</span> of 
                    <span id="totalCount">0</span> entries
                </div>
                <div class="pagination-controls">
                    <button class="pagination-btn" id="prevPageBtn" title="Previous page" disabled>
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <div class="pagination-pages" id="paginationPages">
                        </div>
                    <button class="pagination-btn" id="nextPageBtn" title="Next page" disabled>
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
            </div>
        @endif

        <h5 class="fw-bold mt-5 mb-3">
            <i class="bi bi-calculator me-2"></i>
            Shipment Totals
        </h5>
        <div class="row">
            <div class="col-md-6">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th style="width: 150px;">Total CTN</th>
                            <td class="fw-bold">{{ $shipment->total_ctn }}</td>
                        </tr>
                        <tr>
                            <th>Total QTY</th>
                            <td class="fw-bold">{{ $shipment->total_qty }}</td>
                        </tr>
                        <tr>
                            <th>Total TTL QTY</th>
                            <td class="fw-bold">{{ $shipment->total_ttl_qty }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th style="width: 150px;">Total CBM</th>
                            <td class="fw-bold">{{ $shipment->total_cbm }}</td>
                        </tr>
                        <tr>
                            <th>Total KG</th>
                            <td class="fw-bold">{{ $shipment->total_kg }}</td>
                        </tr>
                        <tr>
                            <th>Total TTL KG</th>
                            <td class="fw-bold">{{ $shipment->total_ttl_kg }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="alert alert-success mt-3">
            <h6 class="mb-0">
                <i class="bi bi-currency-rupee me-2"></i>
                <strong>Total Amount:</strong>
                <span class="float-end">₹{{ number_format($shipment->total_amount, 2) }}</span>
            </h6>
        </div>

        <div class="mt-4">
            <a href="{{ route('admin.shipments') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left me-2"></i>
                Back to Shipments
            </a>
        </div>
    </div>
</div>

<div class="modal fade" id="createShipmentModal" tabindex="-1" aria-labelledby="createShipmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createShipmentModalLabel">
                    <i class="bi bi-plus-circle me-2"></i>
                    Add Orders to Shipment {{ $shipment->shipment_id }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form id="createShipmentForm" method="POST" action="{{ route('admin.shipments.addOrders', $shipment->id) }}">
                    @csrf

                    <input type="hidden" name="shipment_id" value="{{ $shipment->id }}">

                    <div class="row g-3 pb-2">
                        <div class="col-md-4">
                            <label class="form-label">
                                <i class="bi bi-geo-alt me-2"></i>
                                Origin
                            </label>
                            <input type="text" class="form-control" value="{{ $shipment->origin }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">
                                <i class="bi bi-geo me-2"></i>
                                Destination
                            </label>
                            <input type="text" class="form-control" value="{{ $shipment->destination }}" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">
                                <i class="bi bi-calendar-event me-2"></i>
                                Shipment Date
                            </label>
                            <input type="text" class="form-control"
                                   value="{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('Y-m-d') }}"
                                   readonly>
                        </div>
                    </div>

                    @php
                        $usedOrderIds = \App\Models\ShipmentItem::pluck('order_id')->toArray();
                        $availableOrders = \App\Models\Order::whereNotIn('id', $usedOrderIds)->get();
                    @endphp

                    <h6 class="fw-bold mb-2">
                        <i class="bi bi-collection me-2"></i>
                        Select Orders to add <span class="text-danger">*</span>
                    </h6>

                    @if($availableOrders->isEmpty())
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            No available orders. All orders are already assigned to shipments.
                        </div>
                    @else
                        <div class="table-responsive mt-4" style="border-radius:12px;">
                            <table class="custom-table-modal">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Order ID</th>
                                        <th>Origin</th>
                                        <th>Destination</th>
                                        <th>CTN</th>
                                        <th>QTY</th>
                                        <th>TTL/QTY</th>
                                        <th>CBM</th>
                                        <th>TTL CBM</th>
                                        <th>KG</th>
                                        <th>TTL KG</th>
                                        <th>Amount (₹)</th>
                                    </tr>
                                </thead>
                                <tbody id="availableOrdersTableBody">
                                    </tbody>
                            </table>
                        </div>
                        
                        <div class="pagination-container mt-3" id="modalPaginationContainer">
                            <div class="pagination-info" id="modalPageInfo">
                                Showing <span id="modalStartCount">1</span> to <span id="modalEndCount">0</span> of 
                                <span id="modalTotalCount">0</span> entries
                            </div>
                            <div class="pagination-controls">
                                <button class="pagination-btn" id="modalPrevPageBtn" title="Previous page" disabled>
                                    <i class="bi bi-chevron-left"></i>
                                </button>
                                <div class="pagination-pages" id="modalPaginationPages">
                                    </div>
                                <button class="pagination-btn" id="modalNextPageBtn" title="Next page" disabled>
                                    <i class="bi bi-chevron-right"></i>
                                </button>
                            </div>
                        </div>

                        <small class="form-text text-muted d-block mt-2">
                            <i class="bi bi-info-circle me-1"></i>
                            Use the checkboxes to select one or more orders for this shipment.
                        </small>
                    @endif

                    @error('order_ids')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror

                    <div class="d-flex justify-content-end mt-4 mb-2">
                        <button type="button" class="btn-cancel me-3" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn-create" onclick="submitCreateShipmentForm()">
                            <i class="bi bi-check-lg me-2"></i>Add Orders
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // --- Existing Shipment Orders Pagination Variables ---
    let currentPage = 1;
    const itemsPerPage = 10;
    let orders = @json($shipment->orders);
    
    // --- New Available Orders Modal Pagination Variables ---
    let modalCurrentPage = 1;
    const modalItemsPerPage = 10;
    let availableOrders = @json($availableOrders);


    // Initialize pagination when page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Initialization for main shipment orders table
        if (orders.length > 0) {
            renderOrdersTable();
            updatePaginationControls();
            
            // Bind pagination events
            document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
            document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
        } else {
            // If no orders, hide pagination
            const container = document.querySelector('.pagination-container');
            if (container) {
                 container.style.display = 'none';
            }
        }

        // Initialization for modal available orders table
        if (availableOrders.length > 0) {
            renderAvailableOrdersTable();
            updateModalPaginationControls();

            // Bind modal pagination events
            document.getElementById('modalPrevPageBtn').addEventListener('click', goToModalPreviousPage);
            document.getElementById('modalNextPageBtn').addEventListener('click', goToModalNextPage);
        } else {
            // If no available orders, hide pagination container in modal
            const modalContainer = document.getElementById('modalPaginationContainer');
            if (modalContainer) {
                modalContainer.style.display = 'none';
            }
        }
    });

    // =========================================================================
    // --- EXISTING SHIPMENT ORDERS PAGINATION FUNCTIONS ---
    // =========================================================================

    // Function to go to previous page (main table)
    function goToPreviousPage() {
        if (currentPage > 1) {
            currentPage--;
            renderOrdersTable();
            updatePaginationControls();
        }
    }

    // Function to go to next page (main table)
    function goToNextPage() {
        const totalPages = Math.ceil(orders.length / itemsPerPage);
        if (currentPage < totalPages) {
            currentPage++;
            renderOrdersTable();
            updatePaginationControls();
        }
    }

    // Function to update pagination controls (main table)
    function updatePaginationControls() {
        const totalPages = Math.ceil(orders.length / itemsPerPage);
        const prevBtn = document.getElementById('prevPageBtn');
        const nextBtn = document.getElementById('nextPageBtn');
        const paginationPages = document.getElementById('paginationPages');
        
        // Update button states
        prevBtn.disabled = currentPage === 1;
        nextBtn.disabled = currentPage === totalPages || totalPages === 0;
        
        // Update page info
        const startIndex = (currentPage - 1) * itemsPerPage + 1;
        const endIndex = Math.min(currentPage * itemsPerPage, orders.length);
        document.getElementById('startCount').textContent = startIndex;
        document.getElementById('endCount').textContent = endIndex;
        document.getElementById('totalCount').textContent = orders.length;
        
        // Generate page numbers
        paginationPages.innerHTML = '';
        
        if (totalPages <= 7) {
            // Show all pages for 7 or less
            for (let i = 1; i <= totalPages; i++) {
                addPageButton(i, paginationPages, totalPages, false); // false for main table
            }
        } else {
            // Show first page, current page range, and last page
            addPageButton(1, paginationPages, totalPages, false);
            
            if (currentPage > 3) {
                const ellipsis = document.createElement('span');
                ellipsis.className = 'pagination-ellipsis';
                ellipsis.textContent = '...';
                paginationPages.appendChild(ellipsis);
            }
            
            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, totalPages, false);
            }
            
            if (currentPage < totalPages - 2) {
                const ellipsis = document.createElement('span');
                ellipsis.className = 'pagination-ellipsis';
                ellipsis.textContent = '...';
                paginationPages.appendChild(ellipsis);
            }
            
            addPageButton(totalPages, paginationPages, totalPages, false);
        }
    }

    // Function to add page button (main table)
    function addPageButton(pageNumber, container, totalPages, isModal) {
        const button = document.createElement('button');
        button.className = 'pagination-page-btn';
        const activePage = isModal ? modalCurrentPage : currentPage;
        const renderFunction = isModal ? renderAvailableOrdersTable : renderOrdersTable;
        const updateFunction = isModal ? updateModalPaginationControls : updatePaginationControls;

        if (pageNumber === activePage) {
            button.classList.add('active');
        }
        button.textContent = pageNumber;
        button.addEventListener('click', () => {
            if (isModal) {
                modalCurrentPage = pageNumber;
            } else {
                currentPage = pageNumber;
            }
            renderFunction();
            updateFunction();
        });
        container.appendChild(button);
    }

    // Function to render orders table with pagination (main table)
    function renderOrdersTable() {
        const tbody = document.getElementById('ordersTableBody');
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const paginatedOrders = orders.slice(startIndex, endIndex);
        
        tbody.innerHTML = '';
        
        if (paginatedOrders.length === 0) {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td colspan="12" class="text-center py-4 text-muted">
                    No orders found
                </td>
            `;
            tbody.appendChild(row);
            return;
        }
        
        paginatedOrders.forEach(order => {
            const row = document.createElement('tr');
            
            // Fixed: Correct route parameter - use the shipment's ID
            const removeRoute = "{{ route('admin.shipments.removeOrder', ['shipment' => $shipment->id, 'order' => 'ORDER_ID']) }}".replace('ORDER_ID', order.id);
            
            row.innerHTML = `
                <td class="fw-bold">${order.order_id}</td>
                <td>${order.origin || 'N/A'}</td>
                <td>${order.destination || 'N/A'}</td>
                <td>${order.mark_no || 'ITEM001'}</td>
                <td>${order.description || 'Manufacturing Equipment'}</td>
                <td><span class="badge bg-light text-dark">${order.ctn}</span></td>
                <td><span class="badge bg-light text-dark">${order.qty}</span></td>
                <td>${order.ttl_qty}</td>
                <td>${order.kg || '0.00'}</td>
                <td>${order.ttl_kg || '0.00'}</td>
                <td class="fw-bold text-success">₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                <td>
                    @if($shipment->status === 'pending')
                        <form method="POST" action="${removeRoute}" onsubmit="return confirm('Are you sure you want to remove this order from shipment?');">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
                        </form>
                    @endif
                </td>
            `;
            
            tbody.appendChild(row);
        });
    }


    // =========================================================================
    // --- NEW MODAL AVAILABLE ORDERS PAGINATION FUNCTIONS ---
    // =========================================================================

    // Function to go to previous page (modal table)
    function goToModalPreviousPage() {
        if (modalCurrentPage > 1) {
            modalCurrentPage--;
            renderAvailableOrdersTable();
            updateModalPaginationControls();
        }
    }

    // Function to go to next page (modal table)
    function goToModalNextPage() {
        const totalPages = Math.ceil(availableOrders.length / modalItemsPerPage);
        if (modalCurrentPage < totalPages) {
            modalCurrentPage++;
            renderAvailableOrdersTable();
            updateModalPaginationControls();
        }
    }

    // Function to update pagination controls (modal table)
    function updateModalPaginationControls() {
        const totalPages = Math.ceil(availableOrders.length / modalItemsPerPage);
        const prevBtn = document.getElementById('modalPrevPageBtn');
        const nextBtn = document.getElementById('modalNextPageBtn');
        const paginationPages = document.getElementById('modalPaginationPages');
        
        // Update button states
        prevBtn.disabled = modalCurrentPage === 1;
        nextBtn.disabled = modalCurrentPage === totalPages || totalPages === 0;
        
        // Update page info
        const startIndex = (modalCurrentPage - 1) * modalItemsPerPage + 1;
        const endIndex = Math.min(modalCurrentPage * modalItemsPerPage, availableOrders.length);
        document.getElementById('modalStartCount').textContent = startIndex;
        document.getElementById('modalEndCount').textContent = endIndex;
        document.getElementById('modalTotalCount').textContent = availableOrders.length;
        
        // Generate page numbers
        paginationPages.innerHTML = '';
        
        if (totalPages <= 7) {
            // Show all pages for 7 or less
            for (let i = 1; i <= totalPages; i++) {
                addPageButton(i, paginationPages, totalPages, true); // true for modal table
            }
        } else {
            // Show first page, current page range, and last page
            addPageButton(1, paginationPages, totalPages, true);
            
            if (modalCurrentPage > 3) {
                const ellipsis = document.createElement('span');
                ellipsis.className = 'pagination-ellipsis';
                ellipsis.textContent = '...';
                paginationPages.appendChild(ellipsis);
            }
            
            const start = Math.max(2, modalCurrentPage - 1);
            const end = Math.min(totalPages - 1, modalCurrentPage + 1);
            
            for (let i = start; i <= end; i++) {
                addPageButton(i, paginationPages, totalPages, true);
            }
            
            if (modalCurrentPage < totalPages - 2) {
                const ellipsis = document.createElement('span');
                ellipsis.className = 'pagination-ellipsis';
                ellipsis.textContent = '...';
                paginationPages.appendChild(ellipsis);
            }
            
            addPageButton(totalPages, paginationPages, totalPages, true);
        }
    }
    
    // Function to render orders table with pagination (modal table)
    function renderAvailableOrdersTable() {
        const tbody = document.getElementById('availableOrdersTableBody');
        const startIndex = (modalCurrentPage - 1) * modalItemsPerPage;
        const endIndex = startIndex + modalItemsPerPage;
        const paginatedOrders = availableOrders.slice(startIndex, endIndex);
        
        tbody.innerHTML = '';
        
        if (paginatedOrders.length === 0) {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td colspan="12" class="text-center py-4 text-muted" style="border-radius:10px;">
                    No orders found
                </td>
            `;
            tbody.appendChild(row);
            return;
        }
        
        paginatedOrders.forEach(order => {
            const row = document.createElement('tr');
            
            row.innerHTML = `
                <td>
                    <input type="checkbox"
                            class="form-check-input order-checkbox"
                            name="order_ids[]"
                            value="${order.id}">
                </td>
                <td class="fw-bold text-primary">${order.order_id}</td>
                <td>${order.origin || 'N/A'}</td>
                <td>${order.destination || 'N/A'}</td>
                <td>${order.ctn}</td>
                <td>${order.qty}</td>
                <td>${order.ttl_qty}</td>
                <td>${order.cbm || '0.000'}</td>
                <td>${order.ttl_cbm || '0.000'}</td>
                <td>${order.kg || '0.000'}</td>
                <td>${order.ttl_kg || '0.000'}</td>
                <td class="fw-bold text-success">
                    ₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}
                </td>
            `;
            
            tbody.appendChild(row);
        });
    }


    // =========================================================================
    // --- UTILITY FUNCTIONS ---
    // =========================================================================
    
    // Function to submit create shipment form
    function submitCreateShipmentForm() {
        const form = document.getElementById('createShipmentForm');
        const checkboxes = document.querySelectorAll('.order-checkbox:checked');

        if (!checkboxes.length) {
            alert('Please select at least one order');
            return false;
        }
        form.submit();
    }
</script>
@endsection