@extends('layouts.app')

@section('title', 'Addresses')

@section('content')
<div class="container">
    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card section-card">
                <div class="card-body p-4">
                    <h1 class="h3 mb-4">Add address</h1>
                    <div class="small text-muted mb-3">You can store multiple delivery and billing addresses here, then choose or copy them during checkout.</div>
                    <form method="post" action="{{ route('account.addresses.store') }}" class="row g-3">
                        @csrf
                        <div class="col-md-6"><label class="form-label" for="address_label">Address label</label><input id="address_label" name="label" class="form-control" placeholder="Home / Work"></div>
                        <div class="col-md-6"><label class="form-label" for="address_type">Address type</label><select id="address_type" name="type" class="form-select"><option value="shipping">Shipping</option><option value="billing">Billing</option></select></div>
                        <div class="col-12"><label class="form-label" for="address_full_name">Full name</label><input id="address_full_name" name="full_name" class="form-control" placeholder="Full name"></div>
                        <div class="col-md-6"><label class="form-label" for="address_phone">Phone</label><input id="address_phone" name="phone" class="form-control" placeholder="Phone"></div>
                        <div class="col-md-6"><label class="form-label" for="address_postcode">Postcode</label><input id="address_postcode" name="postcode" class="form-control" placeholder="Postcode"></div>
                        <div class="col-12"><label class="form-label" for="address_line_1">Address line 1</label><input id="address_line_1" name="line_1" class="form-control" placeholder="Address line 1"></div>
                        <div class="col-12"><label class="form-label" for="address_line_2">Address line 2</label><input id="address_line_2" name="line_2" class="form-control" placeholder="Address line 2"></div>
                        <div class="col-md-6"><label class="form-label" for="address_city">Town / city</label><input id="address_city" name="city" class="form-control" placeholder="Town / city"></div>
                        <div class="col-md-6"><label class="form-label" for="address_county">County</label><input id="address_county" name="county" class="form-control" placeholder="County"></div>
                        <div class="col-md-6"><label class="form-label" for="address_country">Country code</label><input id="address_country" name="country" class="form-control" value="GB"></div>
                        <div class="col-12 form-check ms-1"><input class="form-check-input" type="checkbox" name="is_default" value="1" id="defaultAddress"><label class="form-check-label" for="defaultAddress">Set as default</label></div>
                        <div class="col-12"><button class="btn btn-primary">Save address</button></div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card section-card">
                <div class="card-body p-4">
                    <h2 class="h4 mb-4">Saved addresses</h2>
                    @forelse($addresses as $address)
                        <div class="border rounded-4 p-3 mb-3">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <strong>{{ $address->label }}</strong> <span class="text-muted small">({{ ucfirst($address->type) }})</span><br>
                                    {{ $address->full_name }}<br>
                                    {{ $address->line_1 }} {{ $address->line_2 }}<br>
                                    {{ $address->city }}, {{ $address->county }} {{ $address->postcode }}<br>
                                    {{ $address->country }}
                                </div>
                                <form method="post" action="{{ route('account.addresses.destroy', $address) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-outline-danger btn-sm">Delete</button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-info mb-0">No saved addresses yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection