<x-app-layout>
    <div class="max-w-3xl mx-auto py-12 px-4 sm:px-6 bg-[#FAF7F2] min-h-screen">
        {{-- Breadcrumb / Back Link --}}
        <div class="mb-6">
            <a href="{{ url()->previous() }}" class="text-sm text-[#8c6a4a] hover:text-[#f59e0b] flex items-center gap-1 transition-colors group">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform group-hover:-translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Kembali
            </a>
        </div>

        <div class="bg-white rounded-2xl shadow-lg border border-[#e0d3c2] overflow-hidden">
            <div class="p-6 sm:p-8">
                <div class="mb-8">
                    <div class="flex items-center gap-2 text-sm text-[#8c6a4a] mb-1">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Alamat Pengiriman</span>
                    </div>
                    <h1 class="text-2xl font-bold text-[#2c1a0e]">Tambah Alamat Baru</h1>
                    <p class="text-[#8c6a4a] text-sm mt-1">Pastikan alamat lengkap agar kurir mudah menemukan lokasi Anda.</p>
                </div>

                <form action="{{ route('addresses.store') }}" method="POST" class="space-y-6">
                    @csrf
                    <input type="hidden" name="redirect" value="{{ $redirect ?? '' }}">

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {{-- Label Alamat --}}
                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Label Alamat</label>
                            <input type="text" name="label" placeholder="Rumah / Kantor" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" required>
                        </div>

                        {{-- Nama Penerima --}}
                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Nama Penerima</label>
                            <input type="text" name="recipient_name" placeholder="Nama Lengkap" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" required>
                        </div>

                        {{-- Nomor Telepon --}}
                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Nomor Telepon</label>
                            <input type="text" 
                                name="phone" 
                                placeholder="0812xxxx" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" 
                                required
                                inputmode="numeric"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                        </div>

                        {{-- Kode Pos --}}
                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Kode Pos (Opsional)</label>
                            <input type="text" 
                                name="postal_code" 
                                id="postal_code"
                                placeholder="12345" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all"
                                inputmode="numeric"
                                maxlength="5"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                        </div>

                        {{-- Alamat Lengkap --}}
                        <div class="md:col-span-2">
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Alamat Lengkap (Jalan, No. Rumah, RT/RW)</label>
                            <textarea name="address" rows="3" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" required></textarea>
                        </div>

                        {{-- Dropdown Wilayah --}}
                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Provinsi</label>
                            <select name="province" id="province" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" required>
                                <option value="">Pilih Provinsi</option>
                                @foreach($provinces as $code => $name)
                                    <option value="{{ $code }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Kota</label>
                            <select name="city" id="city" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" disabled required>
                                <option value="">Pilih Kota</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Kecamatan</label>
                            <select name="district" id="district" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" disabled required>
                                <option value="">Pilih Kecamatan</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-[#2c1a0e] mb-2">Desa</label>
                            <select name="village" id="village" 
                                class="w-full rounded-xl border-[#e0d3c2] bg-[#fef9f0] focus:ring-2 focus:ring-[#f59e0b]/50 focus:border-[#f59e0b] transition-all" disabled required>
                                <option value="">Pilih Desa</option>
                            </select>
                        </div>
                    </div>

                    <button type="submit" 
                        class="w-full bg-gradient-to-r from-[#f59e0b] to-[#d97706] hover:from-[#d97706] hover:to-[#b45309] text-white font-bold py-4 rounded-xl transition-all shadow-md shadow-[#f59e0b]/20 active:scale-[0.98]">
                        <i class="fas fa-save mr-2"></i> Simpan Alamat
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Script AJAX (tidak diubah, hanya ditambahkan FontAwesome jika belum ada) --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function resetDropdown(ids) {
                ids.forEach(id => {
                    let label = id === 'city' ? 'Kota' : (id === 'district' ? 'Kecamatan' : 'Desa');
                    $(`#${id}`).html(`<option value="">Pilih ${label}</option>`).prop('disabled', true);
                });
            }

            $('#province').on('change', function() {
                let code = $(this).val();
                resetDropdown(['city', 'district', 'village']);
                if (code) {
                    $('#city').prop('disabled', false).html('<option>Loading...</option>');
                    $.get('/api/wilayah/cities/' + code, function(data) {
                        $('#city').html('<option value="">Pilih Kota</option>');
                        data.forEach(item => {
                            $('#city').append(`<option value="${item.code}">${item.name}</option>`);
                        });
                    });
                }
            });

            $('#city').on('change', function() {
                let code = $(this).val();
                resetDropdown(['district', 'village']);
                if (code) {
                    $('#district').prop('disabled', false).html('<option>Loading...</option>');
                    $.get('/api/wilayah/districts/' + code, function(data) {
                        $('#district').html('<option value="">Pilih Kecamatan</option>');
                        data.forEach(item => {
                            $('#district').append(`<option value="${item.code}">${item.name}</option>`);
                        });
                    });
                }
            });

            $('#district').on('change', function() {
                let code = $(this).val();
                resetDropdown(['village']);
                if (code) {
                    $('#village').prop('disabled', false).html('<option>Loading...</option>');
                    $.get('/api/wilayah/villages/' + code, function(data) {
                        $('#village').html('<option value="">Pilih Desa</option>');
                        data.forEach(item => {
                            $('#village').append(`<option value="${item.code}" data-pos="${item.postal_code || ''}">${item.name}</option>`);
                        });
                    });
                }
            });

            $('#village').on('change', function() {
                let selectedPostalCode = $(this).find(':selected').attr('data-pos');
                if (selectedPostalCode) {
                    $('#postal_code').val(selectedPostalCode);
                } else {
                    $('#postal_code').val('');
                }
            });
        });
    </script>
</x-app-layout>