

<?php $__env->startSection('content'); ?>
<div class="container mx-auto" x-data="{ 
    showModal: false, 
    editMode: false, 
    form: {
        id: null,
        contact_name: '',
        email: '',
        company_name: '',
        address_1: '',
        address_2: '',
        address_3: '',
        city: '',
        zip_code: '',
        country: '',
        phone_country_code: '',
        phone_number: ''
    },
    openModal(address = null) {
        this.showModal = true;
        if (address) {
            this.editMode = true;
            this.form = { ...address };
        } else {
            this.editMode = false;
            this.resetForm();
        }
    },
    closeModal() {
        this.showModal = false;
        this.editMode = false;
        this.resetForm();
    },
    resetForm() {
        this.form = {
            id: null,
            contact_name: '',
            email: '',
            company_name: '',
            address_1: '',
            address_2: '',
            address_3: '',
            city: '',
            zip_code: '',
            country: '',
            phone_country_code: '',
            phone_number: ''
        };
    }
}">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">Export - Ship To Addresses</h2>
        <button @click="openModal()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            Add New Address
        </button>
    </div>

    <?php if(session('success')): ?>
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline"><?php echo e(session('success')); ?></span>
        </div>
    <?php endif; ?>

    <div class="bg-white shadow-md rounded my-6 overflow-x-auto">
        <table id="addressesTable" class="min-w-full bg-white">
            <thead>
                <tr>
                    <th class="py-2 px-4 border-b">Actions</th>
                    <th class="py-2 px-4 border-b">Contact Name</th>
                    <th class="py-2 px-4 border-b">Company</th>
                    <th class="py-2 px-4 border-b">City</th>
                    <th class="py-2 px-4 border-b">Country</th>
                    <th class="py-2 px-4 border-b">Phone</th>
                </tr>
            </thead>
            <tbody>
                <?php $__currentLoopData = $addresses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $address): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr>
                    <td class="py-2 px-4 border-b">
                        <div class="flex space-x-2">
                            <a href="<?php echo e(route('export.ship_to_address.show', $address->id)); ?>" class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition">View</a>
                            <button @click="openModal(<?php echo e($address); ?>)" class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition">Edit</button>
                        </div>
                    </td>
                    <td class="py-2 px-4 border-b"><?php echo e($address->contact_name); ?></td>
                    <td class="py-2 px-4 border-b"><?php echo e($address->company_name); ?></td>
                    <td class="py-2 px-4 border-b"><?php echo e($address->city); ?></td>
                    <td class="py-2 px-4 border-b"><?php echo e($address->country); ?></td>
                    <td class="py-2 px-4 border-b"><?php echo e($address->phone_country_code); ?> <?php echo e($address->phone_number); ?></td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
    </div>

    <!-- Modal -->
    <div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <form :action="editMode ? '<?php echo e(url('export/ship_to_address/update')); ?>/' + form.id : '<?php echo e(route('export.ship_to_address.store')); ?>'" method="POST">
                    <?php echo csrf_field(); ?>
                    <!-- Add method spoofing for update -->
                    <input type="hidden" name="_method" :value="editMode ? 'PUT' : 'POST'">
                    
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="mb-4">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" x-text="editMode ? 'Edit Address' : 'Add New Address'"></h3>
                        </div>
                        
                        <div class="grid grid-cols-1 gap-4">
                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Contact Name *</label>
                                <input type="text" name="contact_name" x-model="form.contact_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                            </div>
                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Email *</label>
                                <input type="email" name="email" x-model="form.email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                            </div>
                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Company Name</label>
                                <input type="text" name="company_name" x-model="form.company_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                            </div>
                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Address 1 *</label>
                                <input type="text" name="address_1" x-model="form.address_1" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                            </div>
                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Address 2</label>
                                <input type="text" name="address_2" x-model="form.address_2" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                            </div>
                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Address 3</label>
                                <input type="text" name="address_3" x-model="form.address_3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-gray-700 text-sm font-bold mb-2">City *</label>
                                    <input type="text" name="city" x-model="form.city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                                </div>
                                <div>
                                    <label class="block text-gray-700 text-sm font-bold mb-2">Zip/Postal Code *</label>
                                    <input type="text" name="zip_code" x-model="form.zip_code" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                                </div>
                            </div>
                            <div x-data="{
                                open: false,
                                options: <?php echo e(json_encode(array_values($countries))); ?>,
                                get filtered() {
                                    const search = this.form.country ? this.form.country.toLowerCase() : '';
                                    if (search === '') return this.options;
                                    return this.options.filter(i => 
                                        i.toLowerCase().includes(search)
                                    );
                                }
                            }" class="relative">
                                <label class="block text-gray-700 text-sm font-bold mb-2">Country *</label>
                                <input 
                                    type="text" 
                                    name="country" 
                                    x-model="form.country"
                                    @focus="open = true"
                                    @click.away="open = false"
                                    @keydown.escape="open = false"
                                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                                    placeholder="Select or type country"
                                    required
                                    autocomplete="off"
                                >
                                <div x-show="open && filtered.length > 0" class="absolute z-10 w-full bg-white border border-gray-300 mt-1 max-h-60 overflow-y-auto rounded shadow-lg">
                                    <template x-for="item in filtered" :key="item">
                                        <div 
                                            @click="form.country = item; open = false" 
                                            class="px-4 py-2 hover:bg-blue-100 cursor-pointer"
                                            x-text="item"
                                        ></div>
                                    </template>
                                </div>
                            </div>
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-gray-700 text-sm font-bold mb-2">Phone Code *</label>
                                    <input type="text" name="phone_country_code" x-model="form.phone_country_code" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                                </div>
                                <div class="col-span-2">
                                    <label class="block text-gray-700 text-sm font-bold mb-2">Phone Number *</label>
                                    <input type="text" name="phone_number" x-model="form.phone_number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                            Save
                        </button>
                        <button type="button" @click="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    $(document).ready(function() {
        $('#addressesTable').DataTable();
    });
</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/ship_to_address/index.blade.php ENDPATH**/ ?>