@extends('layouts.app')

@section('title', 'Edit Booking')
@section('page-title', 'Edit Booking')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');
    .urdu-font {
        font-family: 'Noto Nastaliq Urdu', serif;
        direction: rtl;
    }
</style>

<div class="max-w-7xl mx-auto">
    <!-- Header Section -->
    <div class="mb-8 text-center">
        <h2 class="text-3xl font-bold text-gray-800">Edit Booking</h2>
        <h3 class="text-xl text-purple-600 urdu-font mt-2">بکنگ میں ترمیم کریں</h3>
        <p class="text-gray-500 mt-2">Update booking details below</p>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden max-w-5xl mx-auto">
        <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-3">
            <h3 class="text-base font-semibold text-white flex items-center justify-between">
                <span><i class="fas fa-edit mr-2"></i> Booking Details: {{ $booking->cntr_no }}</span>
                <span class="urdu-font text-purple-100 text-sm">بکنگ کی تفصیلات</span>
            </h3>
        </div>

        <form action="{{ route('bookings.update', $booking) }}" method="POST" class="p-6" id="bookingForm">
            @csrf
            @method('PUT')
            
            <!-- Display Validation Errors -->
            @if ($errors->any())
                <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-500 text-lg"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <h3 class="text-sm font-semibold text-red-800 mb-2">Please fix the following errors:</h3>
                            <ul class="list-disc list-inside text-sm text-red-700 space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- CNTR No -->
                <div class="col-span-1">
                    <label class="block text-xs font-semibold text-gray-700 mb-1">
                        CNTR NO <span class="urdu-font float-right text-gray-500 text-xs">کنٹینر نمبر</span>
                    </label>
                    <div class="relative rounded-md shadow-sm">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-hashtag text-gray-400 text-xs"></i>
                        </div>
                        <input type="text" name="cntr_no" value="{{ old('cntr_no', $booking->cntr_no) }}" required
                            class="pl-9 w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600 transition duration-150 ease-in-out">
                    </div>
                </div>

                <!-- Customer Selection -->
                <div class="col-span-1 lg:col-span-3">
                    <label class="block text-xs font-semibold text-gray-700 mb-1">
                        Customer <span class="urdu-font float-right text-gray-500 text-xs">کسٹمر</span>
                    </label>
                    <div class="flex gap-2">
                        <div class="relative flex-1 rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-user text-gray-400 text-xs"></i>
                            </div>
                            <select name="customer_id" id="customer_id" required
                                class="pl-9 w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600 transition duration-150 ease-in-out">
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ $booking->customer_id == $customer->id ? 'selected' : '' }}>
                                        {{ $customer->name }} {{ $customer->cnic ? ' - ' . $customer->cnic : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Receiver Details Section -->
                <div class="col-span-1 lg:col-span-4 grid grid-cols-1 md:grid-cols-4 gap-4 border-t border-b border-gray-100 py-3 my-1">
                    <div class="col-span-1 lg:col-span-4 mb-1">
                         <h4 class="text-sm font-bold text-gray-700 flex justify-between">
                            <span>Receiver Details (Optional)</span>
                            <span class="urdu-font text-gray-500 text-xs">وصول کنندہ کی تفصیلات</span>
                        </h4>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Receiver Name <span class="urdu-font float-right text-gray-500 text-xs">نام</span>
                        </label>
                        <input type="text" name="receiver_name" value="{{ old('receiver_name', $booking->receiver_name) }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Receiver Phone <span class="urdu-font float-right text-gray-500 text-xs">فون نمبر</span>
                        </label>
                        <input type="text" name="receiver_phone" value="{{ old('receiver_phone', $booking->receiver_phone) }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Receiver CNIC <span class="urdu-font float-right text-gray-500 text-xs">شناختی کارڈ</span>
                        </label>
                        <input type="text" name="receiver_cnic" value="{{ old('receiver_cnic', $booking->receiver_cnic) }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600"
                            placeholder="XXXXX-XXXXXXX-X">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Receiver City <span class="urdu-font float-right text-gray-500 text-xs">شہر</span>
                        </label>
                        <input type="text" name="receiver_city" value="{{ old('receiver_city', $booking->receiver_city) }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                </div>

                <!-- Dates Section -->
                <div class="col-span-1 lg:col-span-4 grid grid-cols-1 md:grid-cols-4 gap-4 border-t border-b border-gray-100 py-3 my-1">
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Booking Date <span class="urdu-font float-right text-gray-500 text-xs">بکنگ کی تاریخ</span>
                        </label>
                        <input type="date" name="booking_date" value="{{ old('booking_date', $booking->booking_date->format('Y-m-d')) }}" required
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Loading Date <span class="urdu-font float-right text-gray-500 text-xs">لوڈنگ کی تاریخ</span>
                        </label>
                        <input type="date" name="loading_date" value="{{ old('loading_date', $booking->loading_date ? \Carbon\Carbon::parse($booking->loading_date)->format('Y-m-d') : '') }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Shipping Date <span class="urdu-font float-right text-gray-500 text-xs">شپنگ کی تاریخ</span>
                        </label>
                        <input type="date" name="shipping_date" value="{{ old('shipping_date', $booking->shipping_date ? \Carbon\Carbon::parse($booking->shipping_date)->format('Y-m-d') : '') }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Delivery Date <span class="urdu-font float-right text-gray-500 text-xs">ڈلیوری کی تاریخ</span>
                        </label>
                        <input type="date" name="delivery_date" value="{{ old('delivery_date', $booking->delivery_date ? \Carbon\Carbon::parse($booking->delivery_date)->format('Y-m-d') : '') }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                </div>

                <!-- Locations -->
                <div class="col-span-1 lg:col-span-4 grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Origin City <span class="urdu-font float-right text-gray-500 text-xs">روانگی کا شہر</span>
                        </label>
                        <input type="text" name="origin_city" value="{{ old('origin_city', $booking->origin_city) }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Destination City <span class="urdu-font float-right text-gray-500 text-xs">منزل کا شہر</span>
                        </label>
                        <input type="text" name="destination_city" value="{{ old('destination_city', $booking->destination_city) }}"
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Pickup Location <span class="urdu-font float-right text-gray-500 text-xs">پک اپ کی جگہ</span>
                        </label>
                        <div class="relative rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-map-marker-alt text-gray-400 text-xs"></i>
                            </div>
                            <input type="text" name="pickup_location" value="{{ old('pickup_location', $booking->pickup_location) }}" required
                                class="pl-9 w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Delivery Location <span class="urdu-font float-right text-gray-500 text-xs">ڈلیوری کی جگہ</span>
                        </label>
                        <div class="relative rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-map-marker-alt text-gray-400 text-xs"></i>
                            </div>
                            <input type="text" name="delivery_location" value="{{ old('delivery_location', $booking->delivery_location) }}" required
                                class="pl-9 w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                        </div>
                    </div>
                </div>

                <!-- Cargo Description & Status Section -->
                <div class="col-span-1 lg:col-span-4 grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-b border-gray-100 py-3 my-1">
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Cargo Description <span class="urdu-font float-right text-gray-500 text-xs">سامان کی تفصیل</span>
                        </label>
                        <textarea name="cargo_description" rows="2" required
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600"
                            placeholder="Details about the cargo...">{{ old('cargo_description', $booking->cargo_description) }}</textarea>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">
                            Status <span class="urdu-font float-right text-gray-500 text-xs">حالت</span>
                        </label>
                        <select name="status" required
                            class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                            <option value="Pending" {{ old('status', $booking->status) == 'Pending' ? 'selected' : '' }}>Pending</option>
                            <option value="Loaded" {{ old('status', $booking->status) == 'Loaded' ? 'selected' : '' }}>Loaded</option>
                            <option value="In Transit" {{ old('status', $booking->status) == 'In Transit' ? 'selected' : '' }}>In Transit</option>
                            <option value="Arrived" {{ old('status', $booking->status) == 'Arrived' ? 'selected' : '' }}>Arrived</option>
                            <option value="Delivered" {{ old('status', $booking->status) == 'Delivered' ? 'selected' : '' }}>Delivered</option>
                            <option value="Damaged" {{ old('status', $booking->status) == 'Damaged' ? 'selected' : '' }}>Damaged</option>
                        </select>
                    </div>
                </div>

                <!-- Cargo Items Section -->
                <div class="col-span-1 md:col-span-2 lg:col-span-4 mt-4">
                    <div class="flex justify-between items-center border-b pb-2 mb-4">
                        <h4 class="text-sm font-bold text-gray-700">
                            <span>Cargo Items</span>
                            <span class="urdu-font text-gray-500 text-xs ml-2">سامان کی تفصیلات</span>
                        </h4>
                        <button type="button" onclick="addBookingItem()" class="px-3 py-1 bg-indigo-600 text-white text-xs rounded hover:bg-indigo-700 shadow-sm transition duration-150 ease-in-out flex items-center">
                            <i class="fas fa-plus mr-1"></i> Add Item
                        </button>
                    </div>
                    
                    <div class="overflow-x-auto border rounded-lg shadow-sm">
                        <table class="min-w-full divide-y divide-gray-200" id="booking_items_table">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Description</th>
                                    <th scope="col" class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-20">PCS</th>
                                    <th scope="col" class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-20">Ctn</th>
                                    <th scope="col" class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-24">Weight</th>
                                    <th scope="col" class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-24">Vol</th>
                                    <th scope="col" class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-24">Rate</th>
                                    <th scope="col" class="px-3 py-2 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-28">Amount</th>
                                    <th scope="col" class="px-3 py-2 text-center text-xs font-bold text-gray-500 uppercase tracking-wider w-10">Action</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="booking_items_body">
                                <!-- Rows will be added via JS -->
                            </tbody>
                            <tfoot class="bg-gray-50 font-semibold border-t">
                                <tr>
                                    <td class="px-3 py-2 text-right text-xs uppercase font-bold text-gray-600">Total:</td>
                                    <td class="px-3 py-2 text-xs text-gray-800"><span id="total_qty">0</span></td>
                                    <td class="px-3 py-2 text-xs text-gray-800"><span id="total_ctn">0</span></td>
                                    <td class="px-3 py-2 text-xs text-gray-800"><span id="total_weight">0.00</span></td>
                                    <td class="px-3 py-2 text-xs text-gray-800"><span id="total_vol">0.00</span></td>
                                    <td class="px-3 py-2"></td>
                                    <td class="px-3 py-2 text-xs text-indigo-700 font-bold">Rs. <span id="total_items_amount">0.00</span></td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <!-- Payment Details Section -->
                <div class="col-span-1 md:col-span-2 lg:col-span-4 mt-2">
                    <h4 class="text-sm font-bold text-gray-700 border-b pb-1 mb-3 flex justify-between">
                        <span>Payment Details</span>
                        <span class="urdu-font text-gray-500 text-xs">ادائیگی کی تفصیلات</span>
                    </h4>

                    <!-- Calculated Charges to be saved -->
                    <input type="hidden" name="weight_kg" id="input_total_weight" value="{{ $booking->weight_kg }}">
                    <input type="hidden" name="volume_cbm" id="input_total_vol" value="{{ $booking->volume_cbm }}">
                    <input type="hidden" name="carton_count" id="input_total_ctn" value="{{ $booking->carton_count }}">
                    <input type="hidden" name="weight_charge" id="weight_charge" value="{{ $booking->weight_charge }}">
                    <input type="hidden" name="volume_charge" id="volume_charge" value="{{ $booking->volume_charge }}">
                    <input type="hidden" name="carton_charge" id="carton_charge" value="{{ $booking->carton_charge }}">

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-700 mb-1">
                                Total Amount * <span class="urdu-font float-right text-gray-500 text-xs">کل رقم</span>
                            </label>
                            <div class="relative rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 text-xs font-bold">Rs.</span>
                                </div>
                                <input type="number" step="0.01" name="total_amount" id="total_amount" value="{{ old('total_amount', $booking->total_amount) }}" required readonly
                                    class="pl-8 w-full px-3 py-1.5 text-sm font-bold border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600 bg-gray-100 cursor-not-allowed">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-700 mb-1">
                                Discount <span class="urdu-font float-right text-gray-500 text-xs">رعایت</span>
                            </label>
                            <div class="relative rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 text-xs">Rs.</span>
                                </div>
                                <input type="number" step="0.01" name="discount" id="discount" value="{{ old('discount', $booking->discount ?? 0) }}"
                                    oninput="calculateDue()"
                                    class="pl-8 w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-700 mb-1">
                                Advance <span class="urdu-font float-right text-gray-500 text-xs">ایڈوانس</span>
                            </label>
                            <div class="relative rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 text-xs">Rs.</span>
                                </div>
                                <input type="number" step="0.01" name="advance_payment" id="advance_payment" value="{{ old('advance_payment', $booking->advance_payment) }}"
                                    oninput="calculateDue()"
                                    class="pl-8 w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-600 focus:border-purple-600">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-700 mb-1">
                                Due Payment <span class="urdu-font float-right text-gray-500 text-xs">بقیہ رقم</span>
                            </label>
                            <div class="relative rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 text-xs">Rs.</span>
                                </div>
                                <input type="number" step="0.01" id="due_payment" value="{{ $booking->due_payment }}" readonly
                                    class="pl-8 w-full px-3 py-1.5 text-sm border border-gray-300 rounded bg-gray-100 cursor-not-allowed text-red-600 font-semibold">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-span-1 lg:col-span-4 mt-4 flex justify-end space-x-3">
                    <a href="{{ route('bookings.index') }}" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
                        Cancel
                    </a>
                    <button type="submit" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-md text-sm font-medium hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        Update Booking
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    let itemRowIndex = 0;
    
    // Initial data from server
    const initialItems = @json($booking->items);
    
    // If no items but legacy fields exist, create one item from legacy data
    if (initialItems.length === 0 && {{ $booking->weight_kg > 0 ? 'true' : 'false' }}) {
        initialItems.push({
            description: '{{ $booking->cargo_description }}',
            quantity: {{ $booking->quantity ?? 0 }},
            carton_count: {{ $booking->carton_count ?? 0 }},
            weight_kg: {{ $booking->weight_kg ?? 0 }},
            volume_cbm: {{ $booking->volume_cbm ?? 0 }},
            rate: 0,
            amount: {{ $booking->total_amount ?? 0 }}
        });
    }

    function addBookingItem(data = null) {
        const tableBody = document.getElementById('booking_items_body');
        const rowId = `item-row-${itemRowIndex}`;
        const tr = document.createElement('tr');
        tr.id = rowId;
        
        const description = data ? data.description : '';
        const quantity = data ? (data.quantity || 0) : 0;
        const carton_count = data ? (data.carton_count || 0) : 0;
        const weight_kg = data ? (data.weight_kg || 0) : 0;
        const volume_cbm = data ? (data.volume_cbm || 0) : 0;
        const rate = data ? (data.rate || 0) : 0;
        const amount = data ? (data.amount || 0) : 0;

        tr.innerHTML = `
            <td class="px-2 py-2">
                <input type="text" name="items[${itemRowIndex}][description]" value="${description}" required
                    class="w-full text-xs border-gray-300 rounded focus:ring-purple-500 focus:border-purple-500">
            </td>
            <td class="px-2 py-2">
                <input type="number" name="items[${itemRowIndex}][quantity]" value="${quantity}" min="0" oninput="calculateRowAmount(this)"
                    class="w-20 text-xs border-gray-300 rounded focus:ring-purple-500 focus:border-purple-500">
            </td>
            <td class="px-2 py-2">
                <input type="number" name="items[${itemRowIndex}][carton_count]" value="${carton_count}" min="0" oninput="calculateRowAmount(this)"
                    class="w-20 text-xs border-gray-300 rounded focus:ring-purple-500 focus:border-purple-500">
            </td>
            <td class="px-2 py-2">
                <input type="number" step="0.01" name="items[${itemRowIndex}][weight_kg]" value="${weight_kg}" min="0" oninput="calculateRowAmount(this)"
                    class="w-24 text-xs border-gray-300 rounded focus:ring-purple-500 focus:border-purple-500 item-weight">
            </td>
            <td class="px-2 py-2">
                <input type="number" step="0.01" name="items[${itemRowIndex}][volume_cbm]" value="${volume_cbm}" min="0" oninput="calculateRowAmount(this)"
                    class="w-24 text-xs border-gray-300 rounded focus:ring-purple-500 focus:border-purple-500 item-volume">
            </td>
            <td class="px-2 py-2">
                <input type="number" step="0.01" name="items[${itemRowIndex}][rate]" value="${rate}" min="0" oninput="calculateRowAmount(this)"
                    class="w-24 text-xs border-gray-300 rounded focus:ring-purple-500 focus:border-purple-500">
            </td>
            <td class="px-2 py-2">
                <input type="number" step="0.01" name="items[${itemRowIndex}][amount]" value="${amount}" min="0" readonly
                    class="w-28 text-xs bg-gray-50 border-gray-300 rounded focus:ring-purple-500 focus:border-purple-500 item-amount">
            </td>
            <td class="px-2 py-2 text-center">
                <button type="button" onclick="removeBookingItem('${rowId}')" class="text-red-600 hover:text-red-900">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        
        tableBody.appendChild(tr);
        itemRowIndex++;
        
        // Don't recalculate immediately if loading initial data to avoid overwriting existing totals
        // calculateTotals(); 
    }

    function removeBookingItem(rowId) {
        const row = document.getElementById(rowId);
        if (row) {
            row.remove();
            calculateTotals();
        }
    }

    function calculateRowAmount(input) {
        // Logic to calculate amount based on rate * weight/volume/etc?
        // For now, if user manually enters amount, let them.
        // Or if rate is entered, assume it's per KG or per CBM?
        // Simple logic: if rate is entered, multiply by weight (default) or volume?
        // Let's keep it simple: manual entry for now, or minimal auto-calc.
        
        // Actually, in the previous iteration, I didn't enforce a strict calculation formula in JS
        // allowing user to just type. But let's try to be helpful.
        
        const row = input.closest('tr');
        const weight = parseFloat(row.querySelector('input[name*="[weight_kg]"]').value) || 0;
        const rate = parseFloat(row.querySelector('input[name*="[rate]"]').value) || 0;
        
        // If rate changes, maybe update amount?
        // amount = weight * rate
        // But rate could be per CBM or per Ctn.
        // Let's NOT auto-calculate row amount to avoid confusion unless explicitly requested.
        // Just calculate Totals.
        
        calculateTotals();
    }

    function calculateTotals() {
        let totalQty = 0;
        let totalCtn = 0;
        let totalWeight = 0;
        let totalVol = 0;
        let totalAmount = 0;

        document.querySelectorAll('#booking_items_body tr').forEach(row => {
            totalQty += parseFloat(row.querySelector('input[name*="[quantity]"]').value) || 0;
            totalCtn += parseFloat(row.querySelector('input[name*="[carton_count]"]').value) || 0;
            totalWeight += parseFloat(row.querySelector('input[name*="[weight_kg]"]').value) || 0;
            totalVol += parseFloat(row.querySelector('input[name*="[volume_cbm]"]').value) || 0;
            totalAmount += parseFloat(row.querySelector('input[name*="[amount]"]').value) || 0;
        });

        document.getElementById('total_qty').textContent = totalQty;
        document.getElementById('total_ctn').textContent = totalCtn;
        document.getElementById('total_weight').textContent = totalWeight.toFixed(2);
        document.getElementById('total_vol').textContent = totalVol.toFixed(2);
        document.getElementById('total_items_amount').textContent = totalAmount.toFixed(2);

        // Update Hidden Inputs for Server Validation
        document.getElementById('input_total_weight').value = totalWeight.toFixed(2);
        document.getElementById('input_total_vol').value = totalVol.toFixed(2);
        document.getElementById('input_total_ctn').value = totalCtn;

        // Update main form fields
        document.getElementById('total_amount').value = totalAmount.toFixed(2);
        
        calculateDue();
    }

    function calculateDue() {
        const total = parseFloat(document.getElementById('total_amount').value) || 0;
        const discount = parseFloat(document.getElementById('discount').value) || 0;
        const advance = parseFloat(document.getElementById('advance_payment').value) || 0;
        
        const due = total - discount - advance;
        
        document.getElementById('due_payment').value = due.toFixed(2);
    }

    // Initialize
    window.addEventListener('DOMContentLoaded', () => {
        if (initialItems.length > 0) {
            initialItems.forEach(item => addBookingItem(item));
        } else {
            addBookingItem(); // Add one empty row
        }
        calculateTotals();
    });

</script>
@endsection