@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($importRequest) ? 'Edit Import Request' : 'Create Import Request' }}</h1>
        <p class="mt-2 text-gray-500">{{ isset($importRequest) ? 'Update the details of the import request.' : 'Fill out the details to submit a new import request.' }}</p>
    </div>

    <form id="import-request-form" action="{{ isset($importRequest) ? route('import_requests.update', $importRequest->id) : route('import_requests.store') }}" method="POST" enctype="multipart/form-data" class="space-y-10" x-data="{ isDocuments: {{ old('is_documents', $importRequest->is_documents ?? false) ? 'true' : 'false' }} }">
        @if(isset($importRequest))
            @method('PUT')
        @endif
        <input type="hidden" name="is_documents" :value="isDocuments ? 1 : 0">
        <input type="hidden" name="products_summary" :value="isDocuments ? 'Documents' : 'General Cargo'">
        @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">

                {{-- Shipper searchable dropdown --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Shipper *</label>
                    <div 
                        x-data="searchableDropdown({{ $shippersForDropdown->toJson(JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) }}, 'Search shippers...', 'shipper_id', {{ isset($importRequest) ? $importRequest->shipper_id : 'null' }}, '{{ isset($importRequest) && $importRequest->shipper ? $importRequest->shipper->contact_name : '' }}')"
                        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 shipper by name, 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"
                            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': idx === highlightIndex}"
                                            @mouseenter="highlightIndex = idx"
                                            @mouseleave="highlightIndex = -1"
                                            @click="select(item)"
                                            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 shippers found.
                            </div>
                    </div>
                </div>

                {{-- Shipment Purpose --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Shipment Purpose *</label>
                    <div x-data="searchableSelect(['Gift','Commercial','Sample','Return for Repair','Return after Repair','Return to Seller'], '{{ old('shipment_purpose', $importRequest->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>
                </div>

                {{-- Payment By --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Payment By *</label>
                    <div x-data="searchableSelect(['JF&I Account','Shipper\'s Account','Alternative Account'], '{{ old('payment_by', $importRequest->payment_by ?? '') }}')" class="relative w-full" @click.away="open=false">
                        <input type="text" x-model="search" @focus="open=true" placeholder="Select payment" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">
                        <input type="hidden" name="payment_by" :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>

                {{-- Duties & Taxes Paid By --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Duties & Taxes Paid By *</label>
                    <div x-data="searchableSelect(['JF&I Account','Shipper\'s Account','Alternative Account'], '{{ old('duties_taxes_by', $importRequest->duties_taxes_by ?? '') }}')" 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 type="hidden" name="duties_taxes_by" :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>

                {{-- 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', $importRequest->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 }">
                @if(isset($importRequest) && $importRequest->items->count() > 0)
                    @foreach($importRequest->items 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">
                                </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">
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">UOM *</label>
                                    <div x-data="searchableSelect(['KG','PCS','BOX'], '{{ $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>
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Per Item Value *</label>
                                    <input type="number" step="0.01" name="items[{{ $index }}][per_item_value]" required :disabled="isDocuments" value="{{ $item->per_item_value }}" 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">Per Item Weight *</label>
                                    <input type="number" step="0.01" name="items[{{ $index }}][per_item_weight]" required :disabled="isDocuments" value="{{ $item->per_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">
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Currency *</label>
                                    <div x-data="searchableSelect({{ json_encode(array_column($currenciesForDropdown, 'name')) }}, '{{ $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>
                                </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')) }}, '{{ $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>
                                </div>
                            </div>
                            <button type="button" class="remove-item text-red-500 mt-3 hover:underline">Remove Item</button>
                        </div>
                    @endforeach
                @else
                <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">

                        {{-- Item Description --}}
                        <div>
                            <label class="text-sm font-medium text-gray-600">Item Description *</label>
                            <input type="text" name="items[0][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>

                        {{-- Quantity --}}
                        <div>
                            <label class="text-sm font-medium text-gray-600">Quantity *</label>
                            <input type="number" name="items[0][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>

                        {{-- UOM --}}
                        <div>
                            <label class="text-sm font-medium text-gray-600">UOM *</label>
                            <div x-data="searchableSelect(['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[0][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>

                        {{-- Per Item Value --}}
                        <div>
                            <label class="text-sm font-medium text-gray-600">Per Item Value *</label>
                            <input type="number" step="0.01" name="items[0][per_item_value]" 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>

                        {{-- Per Item Weight --}}
                        <div>
                            <label class="text-sm font-medium text-gray-600">Per Item Weight *</label>
                            <input type="number" step="0.01" name="items[0][per_item_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>

                        {{-- Currency --}}
                        <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[0][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>

                        {{-- Country of Origin --}}
                        <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[0][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>

                    <button type="button" class="remove-item text-red-500 mt-3 hover:underline hidden">Remove Item</button>
                </div>
                @endif
            </div>
        </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($importRequest) && $importRequest->packages->count() > 0)
                    @foreach($importRequest->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 *</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">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 *</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($importRequest) && $importRequest->attachment)
                <div class="mt-2 text-sm">
                    <span class="text-gray-600">Current file:</span>
                    <a href="{{ route('import_requests.download_attachment', $importRequest->id) }}" class="text-indigo-600 hover:text-indigo-800 underline" target="_blank">
                        View Attachment
                    </a>
                </div>
            @endif
        </div>

        {{-- Special Instructions --}}
        <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">Special Instructions</label>
            <textarea name="special_instructions" rows="3" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm">{{ old('special_instructions', $importRequest->special_instructions ?? '') }}</textarea>
        </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($importRequest) ? '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.address1 && i.address1.toLowerCase().includes(q)) ||
                (i.city && i.city.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.address1, item.city, 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 = {{ isset($importRequest) ? $importRequest->items->count() : 1 }};
    let packageIndex = {{ isset($importRequest) ? $importRequest->packages->count() : 1 }};
    const itemsWrapper = document.getElementById('items-wrapper');
    const packagesWrapper = document.getElementById('packages-wrapper');

    document.getElementById('add-item').addEventListener('click', function() {
        const template = itemsWrapper.children[0].outerHTML;
        const newHtml = template.replace(/\[0\]/g, '[' + itemIndex + ']').replace('hidden', '');
        itemsWrapper.insertAdjacentHTML('beforeend', newHtml);
        toggleRemoveButtons(itemsWrapper, '.remove-item');
        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);
        toggleRemoveButtons(packagesWrapper, '.remove-package');
        packageIndex++;
    });

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

    function toggleRemoveButtons(container, selector) {
        const buttons = container.querySelectorAll(selector);
        if (buttons.length > 0) buttons.forEach(b => b.classList.remove('hidden'));
    }

    const form = document.getElementById('import-request-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            let isValid = true;
            let errorMessage = '';

            // Validate top-level hidden/required fields
            const requiredSelectors = [
                { name: 'shipper_id', label: 'Shipper' },
                { name: 'shipment_purpose', label: 'Shipment Purpose' },
                { name: 'payment_by', label: 'Payment By' },
                { name: 'duties_taxes_by', label: 'Duties & Taxes Paid By' }
            ];

            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.`;
                }
            }

            // 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 val = row.querySelector(`[name^="items["][name$="[per_item_value]"]`)?.value;
                        const wgt = row.querySelector(`[name^="items["][name$="[per_item_weight]"]`)?.value;
                        const cur = row.querySelector(`[name^="items["][name$="[currency]"]`)?.value;
                        const coi = row.querySelector(`[name^="items["][name$="[country_of_origin]"]`)?.value;
                        
                        if (!desc || !qty || !uom || !val || !wgt || !cur || !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
            }

            if (!e.defaultPrevented) {
                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