@extends('admin.layouts.app')

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

@section('content')

<style>
    /* ===== ANIMATIONS ===== */
    .fade-in {
        animation: fadeIn 0.6s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0px); }
    }

    /* ===== CARD STYLES ===== */
    .card {
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 15px 35px rgba(13, 38, 76, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }
    
    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(103, 126, 234, 0.15);
    }

    .card-header h5 {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* ===== GLASSMORPHISM BUTTON ===== */
    .glass-btn {
        background: linear-gradient(
            135deg,
            rgba(103, 126, 234, 0.25) 0%,
            rgba(118, 75, 162, 0.25) 100%
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        color: #ffffff !important;
        padding: 12px 24px;
        border-radius: 14px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 
            0 8px 32px rgba(103, 126, 234, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .glass-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            135deg,
            rgba(103, 126, 234, 0.4) 0%,
            rgba(118, 75, 162, 0.4) 100%
        );
        z-index: -1;
        transition: opacity 0.4s ease;
        opacity: 0;
    }

    .glass-btn:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 
            0 15px 40px rgba(103, 126, 234, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
        border-color: rgba(255, 255, 255, 0.6);
        background: linear-gradient(
            135deg,
            rgba(103, 126, 234, 0.15) 0%,
            rgba(118, 75, 162, 0.15) 100%
        );
    }

    .glass-btn:hover::before {
        opacity: 1;
    }

    .glass-btn:active {
        transform: translateY(-1px) scale(0.98);
        transition: transform 0.1s ease;
    }

    .glass-btn i {
        font-size: 18px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }

    /* ===== HEADER STYLES ===== */
    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 22px 28px;
        border-radius: 20px 20px 0 0 !important;
        position: relative;
        overflow: hidden;
    }

    .card-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%
        );
        pointer-events: none;
    }

    .title-row {
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 1;
    }

    .header-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 1;
    }

    .header-cancel-btn {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        color: rgba(255, 255, 255, 0.95);
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        padding: 10px 14px;
        border-radius: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .header-cancel-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    /* ===== INFO BLOCKS ===== */
    .shipment-info-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 32px;
    }

    .shipment-info-item {
        flex: 1;
        min-width: 220px;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        padding: 24px;
        border-radius: 16px;
        box-shadow: 
            0 5px 20px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(255, 255, 255, 0.8);
        position: relative;
        overflow: hidden;
    }

    .shipment-info-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .shipment-info-item:hover {
        transform: translateY(-6px);
        box-shadow: 
            0 15px 35px rgba(103, 126, 234, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .shipment-info-item:hover::before {
        opacity: 1;
    }

    .shipment-info-label {
        color: #64748b;
        font-weight: 600;
        margin-bottom: 8px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .shipment-info-value {
        font-size: 24px;
        font-weight: 800;
        color: #1e293b;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* ===== TOTAL BOXES ===== */
    .total-box {
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        padding: 20px;
        border-radius: 16px;
        box-shadow: 
            0 5px 20px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        text-align: center;
        min-width: 160px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(255, 255, 255, 0.8);
        position: relative;
        overflow: hidden;
    }

    .total-box::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: translateX(-100%);
        transition: transform 0.4s ease;
    }

    .total-box:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 
            0 15px 35px rgba(103, 126, 234, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .total-box:hover::after {
        transform: translateX(0);
    }

    .total-title {
        font-size: 13px;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .total-value {
        font-size: 22px;
        font-weight: 900;
        color: #1e293b;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* ===== TABLE STYLES ===== */
    .table {
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 16px;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .table thead th {
        background:  #667eea ;
        color: #ffffff;
        font-weight: 700;
        padding: 18px;
        white-space: nowrap;
        border: none;
        position: relative;
    }

    .table thead th::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 15px;
        height: 1px;
        background: rgba(255, 255, 255, 0.3);
    }

    .table tbody tr {
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
    }

    .table tbody tr:hover {
        background: linear-gradient(90deg, rgba(103, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
        transform: translateX(4px);
        border-left: 3px solid #667eea;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .table tbody td {
        padding: 16px;
        vertical-align: middle;
        white-space: nowrap;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-weight: 500;
    }

    /* ===== GLASSMORPHISM MODAL ===== */
    #newOrderModal .modal-content {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 24px;
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        overflow: hidden;
    }

    #newOrderModal .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding: 24px 32px;
        border-radius: 24px 24px 0 0;
        position: relative;
        overflow: hidden;
    }

    #newOrderModal .modal-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%
        );
    }

    #newOrderModal .modal-title {
        color: #ffffff;
        font-weight: 800;
        font-size: 22px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 1;
    }

    #newOrderModal .btn-close {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        padding: 8px;
        opacity: 0.9;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    #newOrderModal .btn-close:hover {
        background: rgba(255, 255, 255, 0.3);
        opacity: 1;
        transform: rotate(90deg);
    }

    #newOrderModal .modal-body {
        background: rgba(248, 250, 252, 0.7);
        padding: 32px;
        backdrop-filter: blur(10px);
    }

    #newOrderModal .modal-footer {
        background: rgba(255, 255, 255, 0.8);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        padding: 24px 32px;
        border-radius: 0 0 24px 24px;
        backdrop-filter: blur(10px);
    }

    #newOrderModal h6 {
        color: #1e293b;
        font-weight: 700;
        margin-bottom: 16px;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ===== ORDER LIST ITEMS ===== */
    #availableOrdersList,
    #deletedOrdersList {
        max-height: 300px;
        overflow-y: auto;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        border: 1.5px solid rgba(255, 255, 255, 0.5);
    }

    .list-group-item {
        background: rgba(255, 255, 255, 0.7);
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        margin-bottom: 8px;
        border-radius: 12px !important;
        padding: 16px;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .list-group-item:hover {
        background: rgba(103, 126, 234, 0.1);
        border-color: rgba(103, 126, 234, 0.3);
        transform: translateX(4px);
        box-shadow: 0 5px 15px rgba(103, 126, 234, 0.15);
    }

    .list-group-item strong {
        color: #1e293b;
        font-weight: 700;
    }

    .list-group-item .small {
        color: #64748b;
        font-size: 13px;
    }

    .order-checkbox {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 2px solid #cbd5e1;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .order-checkbox:checked {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.2);
    }

    /* ===== MODAL BUTTONS ===== */
    #newOrderModal .btn-secondary {
        background: rgba(100, 116, 139, 0.2);
        backdrop-filter: blur(10px);
        border: 1.5px solid rgba(100, 116, 139, 0.3);
        color: #64748b;
        padding: 12px 28px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    #newOrderModal .btn-secondary:hover {
        background: rgba(100, 116, 139, 0.3);
        border-color: rgba(100, 116, 139, 0.5);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
    }

    #newOrderModal .btn-success {
        background: linear-gradient(
            135deg,
            rgba(34, 197, 94, 0.25) 0%,
            rgba(21, 128, 61, 0.25) 100%
        );
        backdrop-filter: blur(12px);
        border: 1.5px solid rgba(34, 197, 94, 0.4);
        color: #166534;
        padding: 12px 28px;
        border-radius: 12px;
        font-weight: 700;
        transition: all 0.3s ease;
        box-shadow: 
            0 8px 25px rgba(34, 197, 94, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    #newOrderModal .btn-success:hover {
        background: linear-gradient(
            135deg,
            rgba(34, 197, 94, 0.35) 0%,
            rgba(21, 128, 61, 0.35) 100%
        );
        border-color: rgba(34, 197, 94, 0.6);
        color: #14532d;
        transform: translateY(-2px);
        box-shadow: 
            0 12px 30px rgba(34, 197, 94, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    /* ===== SCROLLBAR STYLING ===== */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a6fe8, #6a42a0);
    }

    /* ===== ACTION BUTTONS ===== */
    .btn-secondary {
        background: linear-gradient(135deg, #94a3b8, #64748b);
        border: none;
        color: white;
        padding: 12px 28px;
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #8492a6, #565e6e);
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(100, 116, 139, 0.3);
        color: white;
    }

    /* ===== RESPONSIVE ADJUSTMENTS ===== */
    @media (max-width: 768px) {
        .shipment-info-item,
        .total-box {
            min-width: 100%;
        }
        
        .card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
        
        .header-controls {
            width: 100%;
            justify-content: space-between;
        }
        
        .glass-btn {
            padding: 10px 20px;
            font-size: 14px;
        }
    }
</style>

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

    <div class="card mb-4">
        <div class="card-header">
            <div class="title-row">
                <h5 class="mb-0"><i class="bi bi-truck me-2"></i>Shipment Details</h5>
                <!-- <small class="text-white-50" style="margin-left:8px; font-weight:600;">{{ $shipment->shipment_id ?? '' }}</small> -->
            </div>

            <div class="header-controls">
                <!-- Add Order button (top-right) with glass effect -->
                 @if($mode === 'edit' && $shipment->status === 'pending')
                    <a href="#" data-bs-toggle="modal" data-bs-target="#newOrderModal" class="glass-btn">
                        <i class="bi bi-plus-circle"></i> Add Order
                    </a>
                @endif

                <!-- Cancel/close: goes back to shipments list -->
                <a href="{{ route('admin.shipments') }}" class="btn header-cancel-btn" title="Cancel / Back">
                    <i class="bi bi-x-lg"></i> 
                </a>
            </div>
        </div>

        <div class="card-body">

            <!-- ================================ -->
            <!--       SHIPMENT MAIN DETAILS      -->
            <!-- ================================ -->
            <div class="shipment-info-box">

                <div class="shipment-info-item">
                    <div class="shipment-info-label">Shipment ID</div>
                    <div class="shipment-info-value">{{ $shipment->shipment_id }}</div>
                </div>

                <div class="shipment-info-item">
                    <div class="shipment-info-label">Status</div>
                    <div class="shipment-info-value text-capitalize">
                        {{ str_replace('_', ' ', $shipment->status) }}
                    </div>
                </div>

                <div class="shipment-info-item">
                    <div class="shipment-info-label">Shipment Date</div>
                    <div class="shipment-info-value">
                        {{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}
                    </div>
                </div>

                <div class="shipment-info-item">
                    <div class="shipment-info-label">Total Orders</div>
                    <div class="shipment-info-value">{{ $orders->count() }}</div>
                </div>

            </div>

            <!-- ================================ -->
            <!--      SHIPMENT TOTAL BLOCKS       -->
            <!-- ================================ -->
            <h5 class="fw-bold mb-3 mt-4" style="color: #1e293b;">Shipment Summary</h5>
            <div class="d-flex flex-wrap gap-3">

                <div class="total-box">
                    <div class="total-title">TOTAL CTN</div>
                    <div class="total-value">{{ $shipment->total_ctn }}</div>
                </div>

                <div class="total-box">
                    <div class="total-title">TOTAL QTY</div>
                    <div class="total-value">{{ $shipment->total_qty }}</div>
                </div>

                <div class="total-box">
                    <div class="total-title">TOTAL CBM</div>
                    <div class="total-value">{{ $shipment->total_cbm }}</div>
                </div>

                <div class="total-box">
                    <div class="total-title">TOTAL KG</div>
                    <div class="total-value">{{ $shipment->total_kg }}</div>
                </div>

                <div class="total-box">
                    <div class="total-title">TOTAL TTL QTY</div>
                    <div class="total-value">{{ $shipment->total_ttl_qty }}</div>
                </div>

                <div class="total-box">
                    <div class="total-title">TOTAL TTL CBM</div>
                    <div class="total-value">{{ $shipment->total_ttl_cbm }}</div>
                </div>

                <div class="total-box">
                    <div class="total-title">TOTAL TTL KG</div>
                    <div class="total-value">{{ $shipment->total_ttl_kg }}</div>
                </div>

                <div class="total-box">
                    <div class="total-title">TOTAL AMOUNT</div>
                    <div class="total-value text-success">
                        ₹{{ number_format($shipment->total_amount, 2) }}
                    </div>
                </div>

            </div>

            <!-- ================================ -->
            <!--       ORDERS TABLE LIST          -->
            <!-- ================================ -->
            <h5 class="fw-bold mb-3 mt-5" style="color: #1e293b;">Orders in This Shipment</h5>

            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <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>
                            <!-- Conditionally show Delete column header -->
                            @if($mode === 'edit' && $shipment->status === 'pending')
                                <th>Delete</th>
                            @endif
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($orders as $order)
                        <tr>
                            <td class="fw-bold text-primary">{{ $order->order_id }}</td>
                            <td>{{ $order->origin }}</td>
                            <td>{{ $order->destination }}</td>
                            <td>{{ $order->ctn }}</td>
                            <td>{{ $order->qty }}</td>
                            <td>{{ $order->ttl_qty }}</td>
                            <td>{{ $order->cbm }}</td>
                            <td>{{ $order->ttl_cbm }}</td>
                            <td>{{ $order->kg }}</td>
                            <td>{{ $order->ttl_kg }}</td>
                            <td class="fw-bold text-success">
                                ₹{{ number_format($order->ttl_amount, 2) }}
                            </td>
                            
                            <!-- Conditionally show Delete button -->
                            @if($mode === 'edit' && $shipment->status === 'pending')
                            <td>
                                <form method="POST" action="{{ route('admin.shipments.removeOrder') }}" onsubmit="return confirmDelete()">
                                    @csrf
                                    <input type="hidden" name="shipment_id" value="{{ $shipment->id }}">
                                    <input type="hidden" name="order_id" value="{{ $order->id }}">
                                    <button type="submit" class="btn btn-danger btn-sm" style="border-radius: 10px; padding: 8px 16px;">
                                        <i class="bi bi-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Action Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <!-- <a href="{{ route('admin.shipments') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Shipments
                </a>
                 -->
                @if($mode === 'edit' && $shipment->status === 'pending')
                <div>
                    <!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}" 
                    class="btn btn-warning me-2">
                        <i class="bi bi-pencil"></i> Edit Shipment
                    </a> -->

                    <!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'view']) }}" 
                    class="btn btn-info">
                        <i class="bi bi-eye"></i> View Mode
                    </a> -->
                </div>
                @elseif($shipment->status === 'pending')
                <div>
                    <!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}" 
                    class="btn btn-primary">
                        <i class="bi bi-pencil"></i> Edit Shipment
                    </a> -->
                </div>
                @endif
            </div>

        </div>
    </div>
    <!-- New Order Modal -->
<div class="modal fade" id="newOrderModal" tabindex="-1" aria-labelledby="newOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newOrderModalLabel">Add Orders to Shipment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-3">
          <div class="col-md-6">
            <h6>Deleted Orders (recently removed)</h6>
            <div id="deletedOrdersList" class="list-group"></div>
          </div>
          <div class="col-md-6">
            <h6>Available Orders</h6>
            <div id="availableOrdersList" class="list-group"></div>
          </div>
        </div>

        <div class="mt-3">
          <small class="text-muted">Select orders to add back to this shipment, then click "Add Selected".</small>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button id="addSelectedOrdersBtn" type="button" class="btn btn-success">Add Selected</button>
      </div>
    </div>
  </div>
</div>


</div>

<script>
function confirmDelete() {
    return confirm('Are you sure you want to remove this order from the shipment?');
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = '{{ csrf_token() }}';
    const shipmentId = {{ $shipment->id }};
    let availableOrders = @json($availableOrders ?? []);
    let deletedOrders = [];

    function renderOrdersList(containerId, orders) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';
        if (!orders.length) {
            container.innerHTML = '<div class="text-muted py-3">No orders</div>';
            return;
        }
        orders.forEach(order => {
            const item = document.createElement('label');
            item.className = 'list-group-item d-flex justify-content-between align-items-center';
            item.innerHTML = `
                <div>
                    <input type="checkbox" class="me-2 order-checkbox" data-order='${JSON.stringify(order)}'>
                    <strong>${order.order_id}</strong>
                    <div class="small text-muted"> ${order.origin} → ${order.destination} • ${order.qty} qty • ₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits:2})}</div>
                </div>
                <div class="small text-muted">ID: ${order.id}</div>
            `;
            container.appendChild(item);
        });
    }

    renderOrdersList('availableOrdersList', availableOrders);
    renderOrdersList('deletedOrdersList', deletedOrders);

    // Intercept remove-order forms (update selector if form action different)
    document.querySelectorAll('form[action="{{ route('admin.shipments.removeOrder') }}"]').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (!confirm('Are you sure you want to remove this order from the shipment?')) return;

            const formData = new FormData(this);

            fetch(this.action, {
                method: 'POST',
                headers: {'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (!data.success) { alert(data.message || 'Failed'); return; }

                // Remove row from DOM
                const row = this.closest('tr');
                // Build deleted order object from row cells if present
                const orderObj = {
                    id: formData.get('order_id'),
                    order_id: row ? row.querySelector('td:first-child')?.innerText.trim() : ('Order-'+formData.get('order_id')),
                    origin: row ? row.cells[1]?.innerText.trim() : '',
                    destination: row ? row.cells[2]?.innerText.trim() : '',
                    qty: row ? row.cells[4]?.innerText.trim() : '',
                    ttl_amount: row ? row.cells[10]?.innerText.replace('₹','').replace(',','').trim() : 0
                };

                if (row) row.remove();

                deletedOrders.unshift(orderObj);
                renderOrdersList('deletedOrdersList', deletedOrders);

                // Optional: update totals by refetching shipment summary endpoint or reload
                if (data.shipment) updateTotalsInDOM(data.shipment);
            })
            .catch(err => {
                console.error(err);
                alert('Remove failed.');
            });
        });
    });

    // Open modal from add-order button
    document.querySelectorAll('.glass-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            renderOrdersList('availableOrdersList', availableOrders);
            renderOrdersList('deletedOrdersList', deletedOrders);
            const modal = new bootstrap.Modal(document.getElementById('newOrderModal'));
            modal.show();
        });
    });

    // Add selected orders
    document.getElementById('addSelectedOrdersBtn').addEventListener('click', function() {
        const checked = Array.from(document.querySelectorAll('.order-checkbox:checked'));
        if (!checked.length) { alert('Please select orders'); return; }

        const orderIds = checked.map(cb => JSON.parse(cb.getAttribute('data-order')).id);

        fetch(`/admin/shipments/${shipmentId}/add-orders`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
            body: JSON.stringify({ order_ids: orderIds })
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) { alert(data.message || 'Failed'); return; }

            // Update orders table — simplest approach: reload page to reflect DB
            // But we can also append rows from data.orders (if provided)
            location.reload();
        })
        .catch(err => {
            console.error(err);
            alert('Add failed.');
        });
    });

    function updateTotalsInDOM(shipment) {
        try {
            if (document.getElementById('total_qty')) {
                document.getElementById('total_qty').innerText = shipment.total_qty;
            }
            if (document.getElementById('total_amount')) {
                document.getElementById('total_amount').innerText = '₹' + parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits:2});
            }
            // add other totals similarly...
        } catch(e) { console.warn(e); }
    }
});
document.addEventListener('hidden.bs.modal', function (event) {
    document.body.classList.remove('modal-open');
    let backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) backdrop.remove();
});

</script>


@endsection