@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-[#fff5f7] py-10">
    <div class="max-w-4xl mx-auto px-4">
        
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-black text-slate-800 italic">Alamat Saya ✨</h1>
                <p class="text-pink-400 font-medium">Kelola lokasi pengiriman pesananmu</p>
            </div>
            <a href="{{ route('address.create') }}" 
               class="bg-pink-400 hover:bg-pink-500 text-white px-6 py-3 rounded-2xl font-bold shadow-lg transition-all transform hover:scale-105">
               + Tambah Alamat
            </a>
        </div>

        <div class="grid gap-6">
            @forelse($addresses as $address)
                <div class="bg-white/80 backdrop-blur-sm p-6 rounded-[30px] border-2 border-pink-100 shadow-sm flex justify-between items-center transition-all hover:shadow-md">
                    <div>
                        <div class="flex items-center gap-3 mb-2">
                            <span class="bg-pink-100 text-pink-600 text-[10px] px-3 py-1 rounded-full font-black uppercase tracking-wider">
                                {{ $address->label }}
                            </span>
                            @if($address->is_default)
                                <span class="bg-slate-800 text-white text-[10px] px-3 py-1 rounded-full font-bold uppercase">Utama</span>
                            @endif
                        </div>
                        <h3 class="text-lg font-bold text-slate-800">{{ $address->receiver_name }}</h3>
                        <p class="text-slate-500 font-medium text-sm">{{ $address->phone }}</p>
                        <p class="text-slate-400 text-sm mt-2 leading-relaxed">
                            {{ $address->full_address }}
                        </p>
                    </div>
                    
                    <div class="flex gap-2">
                        <button class="p-3 bg-slate-50 text-slate-400 rounded-xl hover:bg-pink-50 hover:text-pink-500 transition-colors">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                </div>
            @empty
                <div class="text-center py-20 bg-white rounded-[40px] border-2 border-dashed border-pink-200">
                    <p class="text-slate-400 font-medium text-lg">Belum ada alamat tersimpan. 🌸</p>
                </div>
            @endforelse
        </div>

    </div>
</div>
@endsection