@extends('layouts.app')
@section('title', 'Alamat Saya')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        @include('account.partials.sidebar')
        <div class="flex-1" x-data="{ form: false, editing: null }">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-extrabold">Alamat Pengiriman</h1>
                <button @click="form = !form; editing = null" class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white text-sm font-semibold px-4 py-2.5 rounded-full">
                    <x-icon name="pin" class="w-4 h-4"/> Tambah Alamat
                </button>
            </div>

            @if (session('success'))
                <div class="mb-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 text-sm">{{ session('success') }}</div>
            @endif
            @if ($errors->any())
                <div class="mb-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 px-4 py-3 text-sm"><ul class="list-disc list-inside">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
            @endif

            {{-- Add form --}}
            <form x-show="form" x-cloak method="POST" action="{{ route('account.addresses.store') }}" class="bg-white border border-slate-100 rounded-2xl p-5 mb-6 grid sm:grid-cols-2 gap-4">
                @csrf
                @include('account.partials.address-fields')
                <div class="sm:col-span-2 flex gap-2">
                    <button class="bg-brand-600 hover:bg-brand-700 text-white font-semibold px-5 py-2.5 rounded-xl text-sm">Simpan Alamat</button>
                    <button type="button" @click="form = false" class="border border-slate-200 text-slate-600 px-5 py-2.5 rounded-xl text-sm">Batal</button>
                </div>
            </form>

            @if ($addresses->isEmpty())
                <div class="bg-white border border-slate-100 rounded-2xl p-12 text-center">
                    <x-icon name="pin" class="w-12 h-12 mx-auto text-slate-300 mb-3"/>
                    <p class="font-semibold">Belum ada alamat tersimpan</p>
                    <p class="text-slate-500 text-sm mt-1">Tambahkan alamat agar checkout lebih cepat.</p>
                </div>
            @else
                <div class="grid sm:grid-cols-2 gap-4">
                    @foreach ($addresses as $address)
                        <div class="bg-white border {{ $address->is_default ? 'border-brand-300 ring-1 ring-brand-200' : 'border-slate-100' }} rounded-2xl p-5" x-data="{ edit: false }">
                            <div class="flex items-center justify-between">
                                <span class="inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full bg-slate-100 text-slate-600">{{ $address->label }}</span>
                                @if ($address->is_default)<span class="text-xs font-semibold text-brand-600">Alamat Utama</span>@endif
                            </div>
                            <div x-show="!edit">
                                <p class="font-bold mt-3">{{ $address->recipient_name }}</p>
                                <p class="text-sm text-slate-500">{{ $address->phone }}</p>
                                <p class="text-sm text-slate-600 mt-1">{{ $address->address }}, {{ $address->district }}, {{ $address->city }} {{ $address->postal_code }}</p>
                                <div class="flex flex-wrap gap-2 mt-4 text-sm">
                                    <button @click="edit = true" class="text-brand-600 font-semibold hover:underline">Ubah</button>
                                    @unless ($address->is_default)
                                        <form method="POST" action="{{ route('account.addresses.default', $address) }}">@csrf @method('PATCH')<button class="text-slate-500 hover:underline">Jadikan utama</button></form>
                                    @endunless
                                    <form method="POST" action="{{ route('account.addresses.destroy', $address) }}" onsubmit="return confirm('Hapus alamat ini?')">@csrf @method('DELETE')<button class="text-rose-500 hover:underline">Hapus</button></form>
                                </div>
                            </div>
                            <form x-show="edit" x-cloak method="POST" action="{{ route('account.addresses.update', $address) }}" class="grid gap-3 mt-3">
                                @csrf @method('PUT')
                                @include('account.partials.address-fields', ['address' => $address])
                                <div class="flex gap-2">
                                    <button class="bg-brand-600 text-white font-semibold px-4 py-2 rounded-xl text-sm">Simpan</button>
                                    <button type="button" @click="edit = false" class="border border-slate-200 text-slate-600 px-4 py-2 rounded-xl text-sm">Batal</button>
                                </div>
                            </form>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
@endsection