@extends('layouts.store')

@section('title', 'My Account')

@section('content')
    @if (session('status'))
        <p class="form-status">{{ session('status') }}</p>
    @endif

    <section class="account-panel">
        <div>
            <span class="eyebrow">Customer account</span>
            <h1>Welcome, {{ $customer->name }}</h1>
        </div>
        <a class="button ghost" href="{{ route('customer.profile.edit') }}">Edit profile</a>

        <dl class="account-details">
            <div>
                <dt>Email</dt>
                <dd>{{ $customer->email }}</dd>
            </div>
            <div>
                <dt>Phone</dt>
                <dd>{{ $customer->phone ?: 'Not added' }}</dd>
            </div>
        </dl>
    </section>

    <section class="admin-grid">
        <article class="panel">
            <h2>Delivery Addresses</h2>
            <div class="customer-grid">
                @forelse ($addresses as $address)
                    <div class="customer-card">
                        <strong>{{ $address->label }}{{ $address->is_default ? ' - Default' : '' }}</strong>
                        <span>{{ $address->recipient_name }} - {{ $address->phone }}</span>
                        <span>{{ $address->summary() }}</span>
                        <div class="table-actions">
                            @unless ($address->is_default)
                                <form method="POST" action="{{ route('customer.addresses.default', $address) }}">
                                    @csrf
                                    @method('PATCH')
                                    <button class="text-button" type="submit">Make default</button>
                                </form>
                            @endunless
                            <form method="POST" action="{{ route('customer.addresses.destroy', $address) }}">
                                @csrf
                                @method('DELETE')
                                <button class="text-button danger" type="submit">Delete</button>
                            </form>
                        </div>
                    </div>
                @empty
                    <p class="empty-state">No delivery address added.</p>
                @endforelse
            </div>
        </article>

        <article class="panel">
            <h2>Add Address</h2>
            <form method="POST" action="{{ route('customer.addresses.store') }}" class="admin-form">
                @csrf
                <label>
                    <span>Label</span>
                    <input name="label" value="{{ old('label', 'Home') }}" required>
                </label>
                <label>
                    <span>Recipient name</span>
                    <input name="recipient_name" value="{{ old('recipient_name', $customer->name) }}" required>
                </label>
                <label>
                    <span>Phone</span>
                    <input name="phone" value="{{ old('phone', $customer->phone) }}" required>
                </label>
                <div class="form-grid two-columns">
                    <label>
                        <span>City</span>
                        <input name="city" value="{{ old('city') }}" required>
                    </label>
                    <label>
                        <span>Area</span>
                        <input name="area" value="{{ old('area') }}">
                    </label>
                </div>
                <label>
                    <span>Address</span>
                    <textarea name="address_line" required>{{ old('address_line') }}</textarea>
                </label>
                <label class="checkbox-label">
                    <input name="is_default" type="checkbox" value="1">
                    <span>Set as default</span>
                </label>
                @if ($errors->any())
                    <p class="form-error">{{ $errors->first() }}</p>
                @endif
                <button class="button primary" type="submit">Save address</button>
            </form>
        </article>
    </section>
@endsection