<x-app-layout>
    <div class="max-w-5xl mx-auto py-12 px-4 sm:px-6">
        
        {{-- Header Section --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
            <div>
                <h1 class="text-2xl font-bold text-[#2c1a0e]">Daftar Alamat</h1>
                <p class="text-[#8c6a4a] text-sm">Kelola alamat pengiriman Anda untuk memudahkan proses checkout.</p>
            </div>

            <a href="{{ route('addresses.create') }}"
               class="inline-flex items-center justify-center bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-md shadow-[#f59e0b]/20 active:scale-[0.98]">
                <i class="fas fa-plus mr-2 text-sm"></i> Tambah Alamat
            </a>
        </div>

        {{-- Alert Success --}}
        @if(session('success'))
            <div class="mb-6 p-4 bg-green-100 border-l-4 border-green-500 text-green-700 rounded-r-lg shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span>{{ session('success') }}</span>
                </div>
            </div>
        @endif

        {{-- Address List --}}
        <div class="grid grid-cols-1 gap-6">
            @forelse($addresses as $address)
                <div class="bg-white rounded-2xl shadow-sm border {{ $address->is_default ? 'border-[#f59e0b] ring-1 ring-[#f59e0b]/30' : 'border-[#e0d3c2]' }} p-6 transition-all hover:shadow-md">
                    
                    <div class="flex justify-between items-start mb-3">
                        <div class="flex items-center gap-3">
                            <h2 class="font-bold text-lg text-[#2c1a0e]">{{ $address->label }}</h2>
                            @if($address->is_default)
                                <span class="bg-[#fef3c7] text-[#b45309] text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded-md border border-[#f59e0b]/30">
                                    Utama
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="space-y-1 mb-6">
                        <p class="font-semibold text-[#2c1a0e]">{{ $address->recipient_name }}</p>
                        <p class="text-[#4b3c31] text-sm">{{ $address->phone }}</p>
                        <p class="text-[#4b3c31] text-sm leading-relaxed mt-2">
                            {{ $address->address }}
                        </p>
                        {{-- Menggunakan relasi _rel sesuai Controller --}}
                        <p class="text-[#8c6a4a] text-xs mt-1 italic">
                            {{ $address->village_rel->name ?? '-' }}, {{ $address->district_rel->name ?? '-' }}, 
                            {{ $address->city_rel->name ?? '-' }}, {{ $address->province_rel->name ?? '-' }} 
                            {{ $address->postal_code ? '('.$address->postal_code.')' : '' }}
                        </p>
                    </div>

                    <div class="flex flex-wrap items-center gap-4 pt-4 border-t border-[#f3ede4]">
                        
                        {{-- Edit Button --}}
                        <a href="{{ route('addresses.edit', $address->id) }}" class="text-sm font-bold text-[#f59e0b] hover:text-[#d97706] flex items-center gap-1">
                            <i class="fas fa-edit text-xs"></i> Ubah Alamat
                        </a>

                        {{-- Set Default Button --}}
                        @if(!$address->is_default)
                            <form action="{{ route('addresses.default', $address->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="text-sm font-bold text-blue-600 hover:text-blue-800 flex items-center gap-1">
                                    <i class="fas fa-check text-xs"></i> Jadikan Utama
                                </button>
                            </form>
                        @endif

                        {{-- Delete Button (Jangan tampilkan jika hanya ada 1 alamat atau atas pertimbangan UX tertentu) --}}
                        <form action="{{ route('addresses.destroy', $address->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus alamat ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-sm font-bold text-red-500 hover:text-red-700 flex items-center gap-1">
                                <i class="fas fa-trash-alt text-xs"></i> Hapus
                            </button>
                        </form>

                    </div>
                </div>
            @empty
                <div class="bg-white rounded-2xl border-2 border-dashed border-[#e0d3c2] py-16 px-4 text-center">
                    <div class="bg-[#fef9f0] w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-map-marked-alt text-2xl text-[#8c6a4a]"></i>
                    </div>
                    <h3 class="text-lg font-bold text-[#2c1a0e]">Belum Ada Alamat</h3>
                    <p class="text-[#8c6a4a] text-sm mb-6">Anda belum menambahkan alamat pengiriman.</p>
                    <a href="{{ route('addresses.create') }}" class="inline-block bg-[#2c1a0e] text-white px-6 py-2 rounded-xl font-bold hover:bg-black transition-colors">
                        Tambah Sekarang
                    </a>
                </div>
            @endforelse
        </div>
    </div>

    {{-- FontAwesome for Icons --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</x-app-layout>