@extends('layouts.account')
@section('title', __('Addresses'))
@section('account')
<h1 class="mb-6 text-2xl font-extrabold text-primary">{{ __('Addresses') }}</h1>
<div class="grid gap-4 sm:grid-cols-2">
    @foreach ($addresses as $a)
        <article class="rounded-[28px] border border-surface-variant bg-white p-5">
            <div class="flex items-center justify-between"><p class="font-extrabold text-primary">{{ $a->label ?: $a->recipient_name }}</p>
                @if ($a->is_default_shipping)<span class="rounded-full bg-secondary-container px-3 py-1 text-xs font-bold text-on-secondary-container">{{ __('Default') }}</span>@endif</div>
            <p class="mt-2 text-sm text-on-surface-variant">{{ $a->recipient_name }} · {{ $a->phone }}<br>{{ $a->address_line1 }}@if ($a->address_line2), {{ $a->address_line2 }}@endif<br>{{ $a->province }}</p>
            <div class="mt-3 flex gap-3 text-sm font-bold">
                @unless ($a->is_default_shipping)<form method="POST" action="{{ route('account.addresses.default', $a->id) }}">@csrf @method('PATCH')<button class="min-h-[44px] text-primary underline">{{ __('Make default') }}</button></form>@endunless
                <form method="POST" action="{{ route('account.addresses.delete', $a->id) }}">@csrf @method('DELETE')<button class="min-h-[44px] text-on-surface-variant underline hover:text-error">{{ __('Delete') }}</button></form>
            </div>
        </article>
    @endforeach
</div>

<form method="POST" action="{{ route('account.addresses.store') }}" class="mt-8 rounded-[32px] bg-surface-mid p-6">@csrf
    <h2 class="mb-4 text-lg font-extrabold text-primary">{{ __('Add an address') }}</h2>
    <div class="grid gap-4 sm:grid-cols-2">
        <x-field name="label" :label="__('Label (Home, Office…)')"/>
        <x-field name="name" :label="__('Full name')" required/>
        <x-field name="phone" type="tel" :label="__('Phone')" required/>
        <div><label for="province_id" class="mb-1.5 block text-sm font-semibold text-on-surface-variant">{{ __('Province') }}</label>
            <select id="province_id" name="province_id" required class="min-h-[48px] w-full rounded-2xl border border-outline-variant bg-white px-4"><option value="">{{ __('Select…') }}</option>
                @foreach ($provinces as $p)<option value="{{ $p->id }}" @selected((string) old('province_id') === (string) $p->id)>{{ $p->name }}</option>@endforeach</select>
            @error('province_id')<p class="mt-1 text-sm text-error">{{ $message }}</p>@enderror</div>
        <x-field name="address1" :label="__('Address')" required class="sm:col-span-2"/>
        <x-field name="address2" :label="__('Apartment, building, landmark')" class="sm:col-span-2"/>
        <x-field name="postal" :label="__('Postal code')"/>
    </div>
    <div class="mt-5"><x-btn type="submit">{{ __('Save address') }}</x-btn></div>
</form>
@endsection