@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">

    {{-- Page Header --}}
    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-gray-900">{{ (isset($exportRequest) && !($isClone ?? false)) ? 'Edit Export Request' : 'Create Export Request' }}</h1>
        <p class="mt-2 text-gray-500">{{ (isset($exportRequest) && !($isClone ?? false)) ? 'Update the details of the export request.' : 'Fill out the details to submit a new export request.' }}</p>
    </div>

    <form id="export-request-form" action="{{ (isset($exportRequest) && !($isClone ?? false)) ? route('export_requests.update', $exportRequest->id) : route('export_requests.store') }}" method="POST" enctype="multipart/form-data" class="space-y-10" 
        x-data="{ 
            isDocuments: {{ old('is_documents', $exportRequest->is_documents ?? false) ? 'true' : 'false' }},
            summary: {{ json_encode(old('products_summary', $exportRequest->products_summary ?? '')) }},
            selectedAddressAccounts: {{ json_encode(old('_selected_address_accounts', [])) }},
            updateAccounts(accounts) {
                this.selectedAddressAccounts = accounts || [];
            }
        }"
        x-init="$watch('isDocuments', value => { if(value) summary = 'Documents'; else if(summary === 'Documents') summary = ''; })"
        @address-selected.window="updateAccounts($event.detail)"
    >
        @if(isset($exportRequest) && !($isClone ?? false))
            @method('PUT')
        @endif
        <input type="hidden" name="is_documents" :value="isDocuments ? 1 : 0">
        {{-- products_summary is now handled by the textarea directly --}}
        @csrf

        {{-- Shipment Information --}}
        <div class="relative z-30 bg-white/80 backdrop-blur-lg shadow-lg rounded-2xl p-6 border border-gray-200">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Shipment Information</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                {{-- Send To Address --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Send To Address *</label>
                    <div 
                        x-data="searchableDropdown({{ $shipToAddressesForDropdown->toJson(JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) }}, 'Search address...', 'export_ship_to_address_id', {{ isset($exportRequest) ? $exportRequest->export_ship_to_address_id : 'null' }}, {{ json_encode(isset($exportRequest) && $exportRequest->shipToAddress ? $exportRequest->shipToAddress->contact_name : '') }})"
                        x-init="$nextTick(() => { if(selectedId) { let match = items.find(i => i.id == selectedId); if(match && match.accounts) { $dispatch('address-selected', match.accounts); } } })"
                        class="relative w-full"
                        @click.away="close()"
                    >
                        <input
                            type="text"
                            x-model="query"
                            @focus="open()"
                            @keydown.escape="close()"
                            @keydown.enter.prevent="chooseHighlighted()"
                            @input="highlightIndex = 0"
                            placeholder="Search address by contact name, company, city, country..."
                            class="rounded-xl border-gray-300 bg-white/80 backdrop-blur-sm focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm @error('export_ship_to_address_id') border-red-500 @enderror"
                            autocomplete="off"
                        >
                        <input type="hidden" :name="hiddenInputName" :value="selectedId">

                            <div x-show="openState && filtered.length > 0" x-cloak
                                class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                <ul>
                                    <template x-for="(item, idx) in filtered" :key="item.id">
                                        <li
                                            @class([
                                                'bg-indigo-50' => false
                                            ])
                                            :class="{'bg-indigo-50': idx === highlightIndex}"
                                            @mouseenter="highlightIndex = idx"
                                            @mouseleave="highlightIndex = -1"
                                            @click="select(item); $dispatch('address-selected', item.accounts);"
                                            class="px-4 py-3 cursor-pointer hover:bg-indigo-50"
                                        >
                                            <div class="text-sm font-medium" x-text="item.contact_name"></div>
                                            <div class="text-xs text-gray-500" x-text="formatSub(item)"></div>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                            <div x-show="openState && filtered.length === 0" x-cloak
                                class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 p-3 text-sm text-gray-500">
                                No addresses found.
                            </div>
                    </div>
                    @error('export_ship_to_address_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Freight Bill To --}}
                <div x-data="{ billTo: '{{ old('freight_bill_to', $exportRequest->freight_bill_to ?? '') }}' }">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Freight Bill To *</label>
                    <div x-data="searchableSelect({{ json_encode(['JFI','Receiver\'s Account No','Alternative Account Number']) }}, {{ json_encode(old('freight_bill_to', $exportRequest->freight_bill_to ?? '')) }})" class="relative w-full" @click.away="open=false">
                        <input type="text" x-model="search" @focus="open=true" placeholder="Select payer" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" @input="billTo = search">
                        <input type="hidden" name="freight_bill_to" :value="selected" x-effect="billTo = selected">
                            <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                <template x-for="option in filteredOptions" :key="option">
                                    <li @click="select(option); billTo = option" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                </template>
                            </ul>
                    </div>
                    
                    <div x-show="billTo === 'Receiver\'s Account No'" class="mt-2" x-transition>
                        <label class="block text-sm font-medium text-gray-600 mb-1">Select Account Number *</label>
                        <select name="freight_bill_to_account_number" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" :disabled="billTo !== 'Receiver\'s Account No'">
                            <option value="">Select Account</option>
                            <template x-for="acc in selectedAddressAccounts.filter(a => ['Freight', 'Both Freight, Duties and Taxes'].includes(a.service_type))" :key="acc.id">
                                <option :value="acc.account_number" x-text="`${acc.courier_service} - ${acc.account_number}`" :selected="acc.account_number == '{{ old('freight_bill_to_account_number', $exportRequest->freight_bill_to_account_number ?? '') }}'"></option>
                            </template>
                        </select>
                    </div>

                    <div x-show="billTo === 'Alternative Account Number'" class="mt-2" x-transition>
                        <label class="block text-sm font-medium text-gray-600 mb-1">Account Number *</label>
                        <input type="text" name="freight_bill_to_account_number" value="{{ old('freight_bill_to_account_number', $exportRequest->freight_bill_to_account_number ?? '') }}" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" placeholder="Enter Account Number" :disabled="billTo !== 'Alternative Account Number'">
                    </div>
                    @error('freight_bill_to') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    @error('freight_bill_to_account_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Duties & Taxes Bill To --}}
                <div x-data="{ billTo: '{{ old('duties_taxes_bill_to', $exportRequest->duties_taxes_bill_to ?? '') }}' }">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Duties & Taxes Bill To *</label>
                    <div x-data="searchableSelect({{ json_encode(['JFI','Receiver','Receiver\'s Account No','Alternative Account Number']) }}, {{ json_encode(old('duties_taxes_bill_to', $exportRequest->duties_taxes_bill_to ?? '')) }})" class="relative w-full" @click.away="open=false">
                        <input type="text" x-model="search" @focus="open=true" placeholder="Select payer" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" @input="billTo = search">
                        <input type="hidden" name="duties_taxes_bill_to" :value="selected" x-effect="billTo = selected">
                            <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                <template x-for="option in filteredOptions" :key="option">
                                    <li @click="select(option); billTo = option" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                </template>
                            </ul>
                    </div>

                    <div x-show="billTo === 'Receiver\'s Account No'" class="mt-2" x-transition>
                        <label class="block text-sm font-medium text-gray-600 mb-1">Select Account Number *</label>
                        <select name="duties_taxes_bill_to_account_number" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" :disabled="billTo !== 'Receiver\'s Account No'">
                            <option value="">Select Account</option>
                            <template x-for="acc in selectedAddressAccounts.filter(a => ['Duties & Taxes', 'Both Freight, Duties and Taxes'].includes(a.service_type))" :key="acc.id">
                                <option :value="acc.account_number" x-text="`${acc.courier_service} - ${acc.account_number}`" :selected="acc.account_number == '{{ old('duties_taxes_bill_to_account_number', $exportRequest->duties_taxes_bill_to_account_number ?? '') }}'"></option>
                            </template>
                        </select>
                    </div>

                    <div x-show="billTo === 'Alternative Account Number'" class="mt-2" x-transition>
                        <label class="block text-sm font-medium text-gray-600 mb-1">Account Number *</label>
                        <input type="text" name="duties_taxes_bill_to_account_number" value="{{ old('duties_taxes_bill_to_account_number', $exportRequest->duties_taxes_bill_to_account_number ?? '') }}" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" placeholder="Enter Account Number" :disabled="billTo !== 'Alternative Account Number'">
                    </div>
                    @error('duties_taxes_bill_to') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    @error('duties_taxes_bill_to_account_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Shipment Purpose --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Shipment Purpose *</label>
                    <div x-data="searchableSelect({{ json_encode(['Gift','Commercial','Sample']) }}, {{ json_encode(old('shipment_purpose', $exportRequest->shipment_purpose ?? '')) }})" class="relative w-full" @click.away="open=false">
                        <input type="text" x-model="search" @focus="open=true" placeholder="Select purpose" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                        <input type="hidden" name="shipment_purpose" :value="selected">
                            <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                <template x-for="option in filteredOptions" :key="option">
                                    <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                </template>
                            </ul>
                    </div>
                    @error('shipment_purpose') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Pickup Date & Time --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Pickup Date & Time *</label>
                    <input 
                        type="datetime-local" 
                        name="pickup_date_time" 
                        id="pickup_date_time"
                        value="{{ old('pickup_date_time', isset($exportRequest) && $exportRequest->pickup_date_time ? $exportRequest->pickup_date_time->format('Y-m-d\TH:i') : '') }}"
                        class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm"
                        required
                    >
                    <p class="text-xs text-gray-500 mt-1">
                        Pickup must be scheduled for a future time. 
                        If booking after 5:00 PM, the earliest pickup is 10:00 AM the next day.
                    </p>
                    @error('pickup_date_time') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Pickup Location --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Pickup Location *</label>
                    <div x-data="searchableSelect({{ json_encode(['Koswatta','Malabe','Wanduranmulla','Panagoda 1','Panagoda 2','Gonawala']) }}, {{ json_encode(old('pickup_location', $exportRequest->pickup_location ?? '')) }})" class="relative w-full" @click.away="open=false">
                        <input type="text" x-model="search" @focus="open=true" placeholder="Select location" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" required>
                        <input type="hidden" name="pickup_location" :value="selected">
                        <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                            <template x-for="option in filteredOptions" :key="option">
                                <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                            </template>
                        </ul>
                    </div>
                    @error('pickup_location') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Remarks --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Remarks</label>
                    <textarea name="remarks" rows="3" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" placeholder="Any additional notes...">{{ old('remarks', $exportRequest->remarks ?? '') }}</textarea>
                </div>

                {{-- Additional Email --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Additional Email (Optional) <span class="text-xs text-gray-400 font-normal ml-1">Will be included in AWB update notifications.</span></label>
                    <input type="email" name="additional_email" value="{{ old('additional_email', $exportRequest->additional_email ?? '') }}" placeholder="e.g. manager@example.com" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                </div>

            </div>
        </div>

        {{-- Items Section --}}
        <div class="relative z-20 bg-white/80 backdrop-blur-lg shadow-lg rounded-2xl p-6 border border-gray-200">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-4">
                    <h2 class="text-xl font-semibold text-gray-800">Items</h2>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" x-model="isDocuments" class="rounded text-indigo-600 focus:ring-indigo-500 border-gray-300">
                        <span class="text-sm font-medium text-gray-700">Documents</span>
                    </label>
                </div>
                <button type="button" id="add-item" 
                    class="px-4 py-2 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow hover:from-purple-600 hover:to-indigo-600 transition disabled:opacity-50 disabled:cursor-not-allowed"
                    :disabled="isDocuments"> + Add Item </button>
            </div>

            <div id="items-wrapper" class="space-y-4" :class="{ 'opacity-50 pointer-events-none': isDocuments }">
                @php
                    $itemsData = old('items');
                    if (!$itemsData && isset($exportRequest)) {
                        $itemsData = $exportRequest->items->map(function($item) {
                            return [
                                'item_description' => $item->item_description,
                                'quantity' => $item->quantity,
                                'uom' => $item->uom,
                                'weight' => $item->weight,
                                'currency' => $item->currency,
                                'unit_price' => $item->unit_price,
                                'country_of_origin' => $item->country_of_origin,
                                'hs_code' => $item->hs_code,
                            ];
                        })->toArray();
                    }
                    if (empty($itemsData)) {
                        $itemsData = [[
                            'item_description' => '', 'quantity' => '', 'uom' => '', 'weight' => '',
                            'currency' => '', 'unit_price' => '', 'country_of_origin' => '', 'hs_code' => ''
                        ]];
                    }
                @endphp

                @foreach($itemsData as $index => $item)
                    <div class="item-row relative focus-within:z-10 bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-gray-200">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-600">Item Description *</label>
                                <input type="text" name="items[{{ $index }}][item_description]" required :disabled="isDocuments" value="{{ $item['item_description'] ?? '' }}" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                                @error("items.{$index}.item_description") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">Quantity *</label>
                                <input type="number" name="items[{{ $index }}][quantity]" required :disabled="isDocuments" value="{{ $item['quantity'] ?? '' }}" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                                @error("items.{$index}.quantity") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">UOM *</label>
                                <div x-data="searchableSelect({{ json_encode(['KG','PCS','BOX']) }}, {{ json_encode($item['uom'] ?? '') }})" class="relative w-full" @click.away="open=false">
                                    <input type="text" x-model="search" @focus="open=true" placeholder="Select UOM" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                    <input type="hidden" name="items[{{ $index }}][uom]" :value="selected">
                                    <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                        <template x-for="option in filteredOptions" :key="option">
                                            <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                        </template>
                                    </ul>
                                </div>
                                @error("items.{$index}.uom") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">Weight (per piece in KG) *</label>
                                <input type="number" step="0.01" name="items[{{ $index }}][weight]" required :disabled="isDocuments" value="{{ $item['weight'] ?? '' }}" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                                @error("items.{$index}.weight") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">Currency *</label>
                                <div x-data="searchableSelect({{ json_encode(array_column($currenciesForDropdown, 'name')) }}, {{ json_encode($item['currency'] ?? '') }})" class="relative w-full" @click.away="open=false">
                                    <input type="text" x-model="search" @focus="open=true" placeholder="Select currency" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                    <input type="hidden" name="items[{{ $index }}][currency]" :value="selected">
                                    <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                        <template x-for="option in filteredOptions" :key="option">
                                            <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                        </template>
                                    </ul>
                                </div>
                                @error("items.{$index}.currency") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">Unit Price *</label>
                                <input type="number" step="0.01" name="items[{{ $index }}][unit_price]" required :disabled="isDocuments" value="{{ $item['unit_price'] ?? '' }}" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                                @error("items.{$index}.unit_price") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">Country of Origin *</label>
                                <div x-data="searchableSelect({{ json_encode(array_column($countriesForDropdown, 'name')) }}, {{ json_encode($item['country_of_origin'] ?? '') }})" class="relative w-full" @click.away="open=false">
                                    <input type="text" x-model="search" @focus="open=true" placeholder="Select country" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                    <input type="hidden" name="items[{{ $index }}][country_of_origin]" :value="selected">
                                    <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                        <template x-for="option in filteredOptions" :key="option">
                                            <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                        </template>
                                    </ul>
                                </div>
                                @error("items.{$index}.country_of_origin") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">HS Code</label>
                                <input type="text" name="items[{{ $index }}][hs_code]" :disabled="isDocuments" value="{{ $item['hs_code'] ?? '' }}" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                                @error("items.{$index}.hs_code") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <button type="button" class="remove-item text-red-500 mt-3 hover:underline {{ $index === 0 ? 'hidden' : '' }}">Remove Item</button>
                    </div>
                @endforeach
            </div>

            <template id="item-row-template">
                <div class="item-row relative focus-within:z-10 bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-600">Item Description *</label>
                            <input type="text" name="items[INDEX][item_description]" required :disabled="isDocuments" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Quantity *</label>
                            <input type="number" name="items[INDEX][quantity]" required :disabled="isDocuments" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">UOM *</label>
                            <div x-data="searchableSelect({{ json_encode(['KG','PCS','BOX']) }})" class="relative w-full" @click.away="open=false">
                                <input type="text" x-model="search" @focus="open=true" placeholder="Select UOM" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                <input type="hidden" name="items[INDEX][uom]" :value="selected">
                                <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                    <template x-for="option in filteredOptions" :key="option">
                                        <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Weight (per piece in KG)*</label>
                            <input type="number" step="0.01" name="items[INDEX][weight]" required :disabled="isDocuments" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Currency *</label>
                            <div x-data="searchableSelect({{ json_encode(array_column($currenciesForDropdown, 'name')) }})" class="relative w-full" @click.away="open=false">
                                <input type="text" x-model="search" @focus="open=true" placeholder="Select currency" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                <input type="hidden" name="items[INDEX][currency]" :value="selected">
                                <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                    <template x-for="option in filteredOptions" :key="option">
                                        <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Unit Price *</label>
                            <input type="number" step="0.01" name="items[INDEX][unit_price]" required :disabled="isDocuments" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Country of Origin *</label>
                            <div x-data="searchableSelect({{ json_encode(array_column($countriesForDropdown, 'name')) }})" class="relative w-full" @click.away="open=false">
                                <input type="text" x-model="search" @focus="open=true" placeholder="Select country" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                <input type="hidden" name="items[INDEX][country_of_origin]" :value="selected">
                                <ul x-show="open" x-cloak class="absolute z-50 mt-1 w-full bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-auto">
                                    <template x-for="option in filteredOptions" :key="option">
                                        <li @click="select(option)" class="px-4 py-2 cursor-pointer hover:bg-indigo-50" x-text="option"></li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">HS Code</label>
                            <input type="text" name="items[INDEX][hs_code]" :disabled="isDocuments" class="rounded-xl border-gray-300 bg-white/80 focus:ring-indigo-500 focus:border-indigo-500 w-full px-3 py-2 shadow-sm">
                        </div>
                    </div>
                    <button type="button" class="remove-item text-red-500 mt-3 hover:underline">Remove Item</button>
                </div>
            </template>
        </div>

        {{-- Summary of Contents --}}
        <div class="bg-white/80 backdrop-blur-lg shadow-lg rounded-2xl p-6 border border-gray-200">
            <label class="text-sm font-medium text-gray-600 mb-1 block">Summary of Contents *</label>
            <textarea name="products_summary" rows="3" required class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm" x-model="summary" :readonly="isDocuments"></textarea>
            @error('products_summary') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Packages Section --}}
        <div class="relative z-10 bg-white/80 backdrop-blur-lg shadow-lg rounded-2xl p-6 border border-gray-200">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-semibold text-gray-800">Packages</h2>
                <button type="button" id="add-package" class="px-4 py-2 rounded-full bg-gradient-to-r from-green-400 to-teal-500 text-white shadow hover:from-green-500 hover:to-teal-600 transition"> + Add Package </button>
            </div>

            <div id="packages-wrapper" class="space-y-4">
                @if(isset($exportRequest) && $exportRequest->packages->count() > 0)
                    @foreach($exportRequest->packages as $index => $pkg)
                        <div class="package-row relative focus-within:z-10 bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-gray-200">
                            <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Package Weight (in KG)*</label>
                                    <input type="number" step="0.01" name="packages[{{ $index }}][package_weight]" required value="{{ $pkg->package_weight }}" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Length *</label>
                                    <input type="number" step="0.01" name="packages[{{ $index }}][length]" required value="{{ $pkg->length }}" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Width *</label>
                                    <input type="number" step="0.01" name="packages[{{ $index }}][width]" required value="{{ $pkg->width }}" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Height *</label>
                                    <input type="number" step="0.01" name="packages[{{ $index }}][height]" required value="{{ $pkg->height }}" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Box UOM</label>
                                    <input type="text" name="packages[{{ $index }}][box_uom]" value="CM" readonly class="rounded-xl border-gray-300 bg-gray-200/50 w-full px-3 py-2 shadow-sm">
                                </div>
                            </div>
                            <button type="button" class="remove-package text-red-500 mt-3 hover:underline {{ $index === 0 ? 'hidden' : '' }}">Remove Package</button>
                        </div>
                    @endforeach
                @else
                <div class="package-row relative focus-within:z-10 bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-600">Package Weight (in KG)*</label>
                            <input type="number" step="0.01" name="packages[0][package_weight]" required
                                class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Length *</label>
                            <input type="number" step="0.01" name="packages[0][length]" required
                                class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Width *</label>
                            <input type="number" step="0.01" name="packages[0][width]" required
                                class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Height *</label>
                            <input type="number" step="0.01" name="packages[0][height]" required
                                class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Box UOM</label>
                            <input type="text" name="packages[0][box_uom]" value="CM" readonly
                                class="rounded-xl border-gray-300 bg-gray-200/50 w-full px-3 py-2 shadow-sm">
                        </div>
                    </div>

                    <button type="button" class="remove-package text-red-500 mt-3 hover:underline hidden">Remove Package</button>
                </div>
                @endif
            </div>
        </div>

        {{-- Attachment --}}
        <div class="bg-white/80 backdrop-blur-lg shadow-lg rounded-2xl p-6 border border-gray-200">
            <label class="text-sm font-medium text-gray-600 mb-1 block">File Attachment</label>
            <input type="file" name="attachment" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
            @if(isset($exportRequest) && $exportRequest->attachment && !($isClone ?? false))
                <div class="mt-2 text-sm">
                    <span class="text-gray-600">Current file:</span>
                    <a href="{{ route('export_requests.download_attachment', $exportRequest->id) }}" class="text-indigo-600 hover:text-indigo-800 underline" target="_blank">
                        View Attachment
                    </a>
                </div>
            @endif
        </div>

        {{-- Submit Button --}}
        <div class="text-right">
            <button type="submit" class="px-8 py-3 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-semibold shadow-lg hover:from-indigo-600 hover:to-purple-600 transition"> {{ (isset($exportRequest) && !($isClone ?? false)) ? 'Update Request' : 'Submit Request' }} </button>
        </div>
    </form>
</div>

{{-- Alpine.js --}}
<script src="//unpkg.com/alpinejs" defer></script>
<script>
window.searchableDropdown = function(items = [], placeholder = 'Search...', hiddenInputName = 'value', initialId = '', initialName = '') {
    return {
        items: items || [],
        query: initialName || '',
        openState: false,
        highlightIndex: -1,
        selectedId: initialId || '',
        hiddenInputName: hiddenInputName || 'value',

        get filtered() {
            if (!this.query) return this.items.slice(0, 50);
            const q = this.query.toLowerCase();
            return this.items.filter(i => 
                (i.contact_name && i.contact_name.toLowerCase().includes(q)) ||
                (i.company_name && i.company_name.toLowerCase().includes(q)) ||
                (i.address_1 && i.address_1.toLowerCase().includes(q)) ||
                (i.city && i.city.toLowerCase().includes(q)) ||
                (i.zip_code && i.zip_code.toLowerCase().includes(q)) ||
                (i.country && i.country.toLowerCase().includes(q))
            ).slice(0, 50);
        },

        open() { this.openState = true; },
        close() { this.openState = false; this.highlightIndex = -1; },
        select(item) { this.query = item.contact_name; this.selectedId = item.id; this.close(); },
        chooseHighlighted() {
            if (this.highlightIndex >= 0 && this.highlightIndex < this.filtered.length) {
                this.select(this.filtered[this.highlightIndex]);
            }
        },
        formatSub(item) {
            return [item.company_name, item.city, item.zip_code, item.country].filter(Boolean).join(' • ');
        }
    }
};

document.addEventListener('alpine:init', () => {
    Alpine.data('searchableSelect', (options=[], initialValue='') => ({
        open: false,
        search: initialValue || '',
        selected: initialValue || '',
        options: options,
        get filteredOptions() {
            if (!this.search) return this.options;
            return this.options.filter(o => o.toLowerCase().includes(this.search.toLowerCase()));
        },
        select(value) {
            this.selected = value;
            this.search = value;
            this.open = false;
        }
    }));
});

document.addEventListener('DOMContentLoaded', function () {
    let itemIndex = {{ count($itemsData ?? []) }};
    let packageIndex = {{ isset($exportRequest) ? $exportRequest->packages->count() : 1 }};
    const itemsWrapper = document.getElementById('items-wrapper');
    const packagesWrapper = document.getElementById('packages-wrapper');

    document.getElementById('add-item').addEventListener('click', function() {
        const template = document.getElementById('item-row-template').innerHTML;
        const newHtml = template.replace(/INDEX/g, itemIndex);
        itemsWrapper.insertAdjacentHTML('beforeend', newHtml);
        toggleItemButtons();
        itemIndex++;
    });

    document.getElementById('add-package').addEventListener('click', function() {
        const template = packagesWrapper.children[0].outerHTML;
        const newHtml = template.replace(/\[0\]/g, '[' + packageIndex + ']').replace('hidden', '');
        packagesWrapper.insertAdjacentHTML('beforeend', newHtml);
        togglePackageButtons();
        packageIndex++;
    });

    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-item')) {
            e.target.closest('.item-row').remove();
            toggleItemButtons();
        }
        if (e.target.classList.contains('remove-package')) {
            e.target.closest('.package-row').remove();
            togglePackageButtons();
        }
    });

    function toggleItemButtons() {
        const buttons = itemsWrapper.querySelectorAll('.remove-item');
        buttons.forEach((b, index) => {
             if (index === 0) b.classList.add('hidden');
             else b.classList.remove('hidden');
        });
    }

    function togglePackageButtons() {
        // Specific logic for packages: First one is mandatory (hidden button). Others Removable.
        const buttons = packagesWrapper.querySelectorAll('.remove-package');
        buttons.forEach((b, index) => {
            if (index === 0) b.classList.add('hidden');
            else b.classList.remove('hidden');
        });
    }

    // Init check
    togglePackageButtons();
    toggleItemButtons();

    // Pickup Date Time Logic
    const pickupInput = document.getElementById('pickup_date_time');
    
    function updateMinDateTime() {
        const now = new Date();
        const currentHour = now.getHours();
        
        let minDate = new Date();

        // If after 5:01 PM (17:01), move to next day
        // Allowing up to 17:00. So if now is 17:01, next day.
        if (currentHour > 17 || (currentHour === 17 && now.getMinutes() > 0)) {
            minDate.setDate(minDate.getDate() + 1);
            minDate.setHours(10, 0, 0, 0); // Set to 10:00 AM next day
        } else {
            // If before 4:00 PM, ensure we don't pick past time
            // But user requirement says "next possible pickup time is 10.00AM next day" 
            // This implies if it's NOT after 4PM, maybe we can pick today?
            // Let's assume if it's before 4PM, we can pick anytime in future today.
            // However, usually there is a buffer. Let's just set min to now.
            // BUT, if it's before 10AM today, maybe start at 10AM? 
            // Let's keep it simple: min is now.
            // Wait, if currentHour >= 16 logic is strict about "next day", 
            // then before 16:00 allows today.
            
            // Ensure min is at least now
            // Also, format for datetime-local is YYYY-MM-DDTHH:mm
        }

        // Format to YYYY-MM-DDTHH:mm
        const year = minDate.getFullYear();
        const month = String(minDate.getMonth() + 1).padStart(2, '0');
        const day = String(minDate.getDate()).padStart(2, '0');
        const hours = String(minDate.getHours()).padStart(2, '0');
        const minutes = String(minDate.getMinutes()).padStart(2, '0');
        
        const minDateTimeString = `${year}-${month}-${day}T${hours}:${minutes}`;
        pickupInput.min = minDateTimeString;
    }

    updateMinDateTime();
    
    // Update every minute to keep 'now' fresh
    setInterval(updateMinDateTime, 60000);

    pickupInput.addEventListener('change', function() {
        const selected = new Date(this.value);
        const min = new Date(this.min);
        
        if (selected < min) {
            alert('Selected time is invalid. Please choose a later time.');
            this.value = '';
        }
    });

    // Validate on focus out (blur)
    pickupInput.addEventListener('blur', function() {
        const pickupValue = this.value;
        if (pickupValue) {
            const pickupTime = new Date(pickupValue);
            const hour = pickupTime.getHours();
            
            const minutes = pickupTime.getMinutes();
            
            // Allow 10:00 to 17:00 strict.
            // If hour is 17, minutes must be 0.
            if (hour < 10 || hour > 17 || (hour === 17 && minutes > 0)) {
                alert('Pickup time must be between 10:00 AM and 5:00 PM.');
                this.value = ''; // Clear invalid value
            }
        }
    });

    // Form Submission Validation
    const form = document.getElementById('export-request-form');
    form.addEventListener('submit', function(e) {
        let isValid = true;
        let errorMessage = '';

        // Validate top-level hidden/required fields
        const requiredSelectors = [
            { name: 'export_ship_to_address_id', label: 'Send To Address' },
            { name: 'freight_bill_to', label: 'Freight Bill To' },
            { name: 'duties_taxes_bill_to', label: 'Duties & Taxes Bill To' },
            { name: 'shipment_purpose', label: 'Shipment Purpose' },
            { name: 'pickup_location', label: 'Pickup Location' },
            { name: 'products_summary', label: 'Summary of Contents' }
        ];

        for (let field of requiredSelectors) {
            const input = document.querySelector(`[name="${field.name}"]`);
            if (!input || !input.value.trim()) {
                isValid = false;
                errorMessage += `\n- ${field.label} is required.`;
            }
        }

        // Account Numbers Validation
        const freightBillTo = document.querySelector('[name="freight_bill_to"]')?.value;
        if (freightBillTo === 'Receiver\'s Account No' || freightBillTo === 'Alternative Account Number') {
            const accNum = document.querySelector('[name="freight_bill_to_account_number"]');
            if (!accNum || !accNum.value.trim() || accNum.disabled) {
                isValid = false;
                errorMessage += `\n- Freight Bill To Account Number is required.`;
            }
        }

        const dutiesBillTo = document.querySelector('[name="duties_taxes_bill_to"]')?.value;
        if (dutiesBillTo === 'Receiver\'s Account No' || dutiesBillTo === 'Alternative Account Number') {
            const accNum = document.querySelector('[name="duties_taxes_bill_to_account_number"]');
            if (!accNum || !accNum.value.trim() || accNum.disabled) {
                isValid = false;
                errorMessage += `\n- Duties & Taxes Account Number is required.`;
            }
        }

        // Validate Pickup Time
        const pickupInput = document.getElementById('pickup_date_time');
        if (!pickupInput.value) {
            isValid = false;
            errorMessage += `\n- Pickup Date & Time is required.`;
        } else {
            const pickupTime = new Date(pickupInput.value);
            const hour = pickupTime.getHours();
            const minutes = pickupTime.getMinutes();
            if (hour < 10 || hour > 17 || (hour === 17 && minutes > 0)) {
                isValid = false;
                errorMessage += `\n- Pickup time must be between 10:00 AM and 5:00 PM.`;
            }
        }

        // Check if documents
        const isDocumentsInput = document.querySelector('[name="is_documents"]');
        const isDocuments = isDocumentsInput && isDocumentsInput.value === "1";

        if (!isDocuments) {
            const itemRows = itemsWrapper.querySelectorAll('.item-row');
            if (itemRows.length === 0) {
                isValid = false;
                errorMessage += `\n- At least one item is required.`;
            } else {
                itemRows.forEach((row, index) => {
                    const desc = row.querySelector(`[name^="items["][name$="[item_description]"]`)?.value;
                    const qty = row.querySelector(`[name^="items["][name$="[quantity]"]`)?.value;
                    const uom = row.querySelector(`[name^="items["][name$="[uom]"]`)?.value;
                    const wgt = row.querySelector(`[name^="items["][name$="[weight]"]`)?.value;
                    const cur = row.querySelector(`[name^="items["][name$="[currency]"]`)?.value;
                    const prc = row.querySelector(`[name^="items["][name$="[unit_price]"]`)?.value;
                    const coi = row.querySelector(`[name^="items["][name$="[country_of_origin]"]`)?.value;
                    
                    if (!desc || !qty || !uom || !wgt || !cur || !prc || !coi) {
                        isValid = false;
                        errorMessage += `\n- All mandatory fields in Item #${index + 1} must be filled.`;
                    }
                });
            }
        }

        // Validate Packages
        const packageRows = packagesWrapper.querySelectorAll('.package-row');
        if (packageRows.length === 0) {
            isValid = false;
            errorMessage += `\n- At least one package is required.`;
        } else {
            packageRows.forEach((row, index) => {
                const wgt = row.querySelector(`[name^="packages["][name$="[package_weight]"]`)?.value;
                const len = row.querySelector(`[name^="packages["][name$="[length]"]`)?.value;
                const wid = row.querySelector(`[name^="packages["][name$="[width]"]`)?.value;
                const hgt = row.querySelector(`[name^="packages["][name$="[height]"]`)?.value;
                
                if (!wgt || !len || !wid || !hgt) {
                    isValid = false;
                    errorMessage += `\n- All mandatory fields in Package #${index + 1} must be filled.`;
                }
            });
        }

        if (!isValid) {
            e.preventDefault();
            alert("Please fix the following errors before submitting:\n" + errorMessage);
            return; // Stop processing
        }

        // Avoid double submission
        const submitBtn = form.querySelector('button[type="submit"]');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Submitting...';
            submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
        }
    });

});
</script>
@endsection