@extends('layouts.app')

@section('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: '',
        accounts: []
    },
    openModal(address = null) {
        this.showModal = true;
        if (address) {
            this.editMode = true;
            this.form = { ...address, accounts: address.accounts ? JSON.parse(JSON.stringify(address.accounts)) : [] };
        } 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: '',
            accounts: []
        };
    }
}">
    <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>

    @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">{{ session('success') }}</span>
        </div>
    @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>
                @foreach($addresses as $address)
                <tr>
                    <td class="py-2 px-4 border-b">
                        <div class="flex space-x-2">
                            <a href="{{ 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({{ $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">{{ $address->contact_name }}</td>
                    <td class="py-2 px-4 border-b">{{ $address->company_name }}</td>
                    <td class="py-2 px-4 border-b">{{ $address->city }}</td>
                    <td class="py-2 px-4 border-b">{{ $address->country }}</td>
                    <td class="py-2 px-4 border-b">{{ $address->phone_country_code }} {{ $address->phone_number }}</td>
                </tr>
                @endforeach
            </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 ? '{{ url('export/ship_to_address') }}/' + form.id : '{{ route('export.ship_to_address.store') }}'" method="POST">
                    @csrf
                    <!-- 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: {{ 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 (Numbers only) *</label>
                                    <input type="text" name="phone_country_code" x-model="form.phone_country_code" oninput="this.value = this.value.replace(/[^0-9]/g, '')" pattern="[0-9]*" 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 class="mt-6 border-t pt-4">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="text-md font-bold text-gray-700">Courier Accounts</h4>
                                <button type="button" @click="form.accounts.push({courier_service: '', account_number: '', service_type: ''})" class="bg-green-500 text-white px-3 py-1 rounded text-sm hover:bg-green-600">
                                    + Add Account
                                </button>
                            </div>
                            
                            <template x-for="(account, index) in form.accounts" :key="index">
                                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end mb-4 bg-gray-50 p-3 rounded border">
                                    <div>
                                        <label class="block text-gray-700 text-xs font-bold mb-1">Courier Service *</label>
                                        <select x-model="account.courier_service" :name="`accounts[${index}][courier_service]`" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                                            <option value="">Select Service</option>
                                            <option value="DHL">DHL</option>
                                            <option value="FedEx">FedEx</option>
                                            <option value="UPS">UPS</option>
                                            <option value="Aramex">Aramex</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-xs font-bold mb-1">Account Number *</label>
                                        <input type="text" x-model="account.account_number" :name="`accounts[${index}][account_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>
                                        <label class="block text-gray-700 text-xs font-bold mb-1">Service Type *</label>
                                        <select x-model="account.service_type" :name="`accounts[${index}][service_type]`" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                                            <option value="">Select Type</option>
                                            <option value="Freight">Freight</option>
                                            <option value="Duties & Taxes">Duties & Taxes</option>
                                            <option value="Both Freight, Duties and Taxes">Both Freight, Duties and Taxes</option>
                                        </select>
                                    </div>
                                    <div>
                                        <button type="button" @click="form.accounts.splice(index, 1)" class="w-full bg-red-500 text-white px-3 py-2 rounded text-sm hover:bg-red-600">
                                            Remove
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </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>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#addressesTable').DataTable();
    });
</script>
@endsection