

<?php $__env->startSection('content'); ?>
<div class="max-w-7xl mx-auto px-6 py-8">

    
    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-gray-900"><?php echo e((isset($exportRequest) && !($isClone ?? false)) ? 'Edit Export Request' : 'Create Export Request'); ?></h1>
        <p class="mt-2 text-gray-500"><?php echo e((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="<?php echo e((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: <?php echo e(old('is_documents', $exportRequest->is_documents ?? false) ? 'true' : 'false'); ?>,
            summary: <?php echo e(json_encode(old('products_summary', $exportRequest->products_summary ?? ''))); ?>

        }"
        x-init="$watch('isDocuments', value => { if(value) summary = 'Documents'; else if(summary === 'Documents') summary = ''; })"
    >
        <?php if(isset($exportRequest) && !($isClone ?? false)): ?>
            <?php echo method_field('PUT'); ?>
        <?php endif; ?>
        <input type="hidden" name="is_documents" :value="isDocuments ? 1 : 0">
        
        <?php echo csrf_field(); ?>

        
        <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">

                
                <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(<?php echo e($shipToAddressesForDropdown->toJson(JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP)); ?>, 'Search address...', 'export_ship_to_address_id', <?php echo e(isset($exportRequest) ? $exportRequest->export_ship_to_address_id : 'null'); ?>, <?php echo e(json_encode(isset($exportRequest) && $exportRequest->shipToAddress ? $exportRequest->shipToAddress->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 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 <?php $__errorArgs = ['export_ship_to_address_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                            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 addresses found.
                            </div>
                    </div>
                    <?php $__errorArgs = ['export_ship_to_address_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div x-data="{ billTo: '<?php echo e(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(<?php echo e(json_encode(['JFI','Receiver\'s Account No','Alternative Account Number'])); ?>, <?php echo e(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' || 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="<?php echo e(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">
                    </div>
                    <?php $__errorArgs = ['freight_bill_to'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    <?php $__errorArgs = ['freight_bill_to_account_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div x-data="{ billTo: '<?php echo e(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(<?php echo e(json_encode(['JFI','Receiver\'s Account No','Alternative Account Number'])); ?>, <?php echo e(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 === '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="<?php echo e(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">
                    </div>
                    <?php $__errorArgs = ['duties_taxes_bill_to'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    <?php $__errorArgs = ['duties_taxes_bill_to_account_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Shipment Purpose *</label>
                    <div x-data="searchableSelect(<?php echo e(json_encode(['Gift','Commercial','Sample'])); ?>, <?php echo e(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>
                    <?php $__errorArgs = ['shipment_purpose'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <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="<?php echo e(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>
                    <?php $__errorArgs = ['pickup_date_time'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Pickup Location *</label>
                    <div x-data="searchableSelect(<?php echo e(json_encode(['Koswatta','Malabe','Wanduranmulla','Panagoda 1','Panagoda 2','Gonawala'])); ?>, <?php echo e(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>
                    <?php $__errorArgs = ['pickup_location'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <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..."><?php echo e(old('remarks', $exportRequest->remarks ?? '')); ?></textarea>
                </div>

            </div>
        </div>

        
        <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 if(isset($exportRequest) && $exportRequest->items->count() > 0): ?>
                    <?php $__currentLoopData = $exportRequest->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <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[<?php echo e($index); ?>][item_description]" required :disabled="isDocuments" value="<?php echo e($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[<?php echo e($index); ?>][quantity]" required :disabled="isDocuments" value="<?php echo e($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(<?php echo e(json_encode(['KG','PCS','BOX'])); ?>, <?php echo e(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[<?php echo e($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 *</label>
                                    <input type="number" step="0.01" name="items[<?php echo e($index); ?>][weight]" required :disabled="isDocuments" value="<?php echo e($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(<?php echo e(json_encode(array_column($currenciesForDropdown, 'name'))); ?>, <?php echo e(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[<?php echo e($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[<?php echo e($index); ?>][unit_price]" required :disabled="isDocuments" value="<?php echo e($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">
                                </div>
                                <div>
                                    <label class="text-sm font-medium text-gray-600">Country of Origin *</label>
                                    <div x-data="searchableSelect(<?php echo e(json_encode(array_column($countriesForDropdown, 'name'))); ?>, <?php echo e(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[<?php echo e($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[<?php echo e($index); ?>][hs_code]" :disabled="isDocuments" value="<?php echo e($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">
                                </div>
                            </div>
                            <button type="button" class="remove-item text-red-500 mt-3 hover:underline <?php echo e($index === 0 ? 'hidden' : ''); ?>">Remove Item</button>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php 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">

                        
                        <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>

                        
                        <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>

                        
                        <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>

                        
                        <div>
                            <label class="text-sm font-medium text-gray-600">Weight *</label>
                            <input type="number" step="0.01" name="items[0][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(<?php echo e(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>

                        
                        <div>
                            <label class="text-sm font-medium text-gray-600">Unit Price *</label>
                            <input type="number" step="0.01" name="items[0][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(<?php echo e(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>
                            <label class="text-sm font-medium text-gray-600">HS Code</label>
                            <input type="text" name="items[0][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 hidden">Remove Item</button>
                </div>
                <?php endif; ?>
            </div>
        </div>

        
        <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>
            <?php $__errorArgs = ['products_summary'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>

        
        <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">
                <?php if(isset($exportRequest) && $exportRequest->packages->count() > 0): ?>
                    <?php $__currentLoopData = $exportRequest->packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $pkg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <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[<?php echo e($index); ?>][package_weight]" required value="<?php echo e($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[<?php echo e($index); ?>][length]" required value="<?php echo e($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[<?php echo e($index); ?>][width]" required value="<?php echo e($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[<?php echo e($index); ?>][height]" required value="<?php echo e($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[<?php echo e($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 <?php echo e($index === 0 ? 'hidden' : ''); ?>">Remove Package</button>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php 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>
                <?php endif; ?>
            </div>
        </div>

        
        <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">
            <?php if(isset($exportRequest) && $exportRequest->attachment && !($isClone ?? false)): ?>
                <div class="mt-2 text-sm">
                    <span class="text-gray-600">Current file:</span>
                    <a href="<?php echo e(route('export_requests.download_attachment', $exportRequest->id)); ?>" class="text-indigo-600 hover:text-indigo-800 underline" target="_blank">
                        View Attachment
                    </a>
                </div>
            <?php endif; ?>
        </div>

        
        <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"> <?php echo e((isset($exportRequest) && !($isClone ?? false)) ? 'Update Request' : 'Submit Request'); ?> </button>
        </div>
    </form>
</div>


<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.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.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 = <?php echo e(isset($exportRequest) ? $exportRequest->items->count() : 1); ?>;
    let packageIndex = <?php echo e(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 = itemsWrapper.children[0].outerHTML;
        const newHtml = template.replace(/\[0\]/g, '[' + itemIndex + ']').replace('hidden', '');
        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) {
        const pickupValue = pickupInput.value;
        if (pickupValue) {
            const pickupTime = new Date(pickupValue);
            const hour = pickupTime.getHours();
            
            // Allow 10:00 AM to 4:00 PM (16:00)
            // If hour is < 10 OR hour >= 16 (assuming 16:01 is bad, 16:00 is okay? 
            // User said "after 4PM". 16:00 is 4PM. 16:30 is after.
            // If I use hour >= 16, then 16:00 is included in the "bad" range? 
            // No, hour returned is integer 0-23.
            // If time is 16:00, hour is 16. 
            // If limit is "till 4PM", usually 4:00 PM is the last slot or the end.
            // Let's assume 16:00 is the hard cutoff for *starting* a pickup? 
            // Or is it the end of the window?
            // "after 4PM... user should not be able to enter a date beyond this time"
            // Let's be strict: anything >= 16 is blocked. Last slot is 15:59.
            // Or maybe 16:00 is allowed? 
            // "Pickup time must be between 10:00 AM and 4:00 PM."
            // I will block >= 16.
            
            const minutes = pickupTime.getMinutes();
            
            if (hour < 10 || hour > 17 || (hour === 17 && minutes > 0)) {
                e.preventDefault();
                alert('Pickup time must be between 10:00 AM and 5:00 PM.');
            }
        }
    });

});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\xampp\htdocs\courier_booking\resources\views/export_requests/create.blade.php ENDPATH**/ ?>