<x-ui.modal :id="$modalId" title="Edit Customer" description="Update profile details, contact information, and CRM notes." size="lg">
    <form id="edit-customer-form-{{ $customer->id }}" method="POST" action="{{ route('admin.customers.update', $customer) }}" class="grid gap-4 sm:grid-cols-2">
        @csrf
        @method('PUT')

        <x-form.input name="name" label="Full Name" :value="$customer->name" placeholder="Jessica Miller" />
        <x-form.input name="phone" label="Phone Number" :value="$customer->phone" placeholder="(555) 123-4567" />
        <x-form.input name="email" label="Email" type="email" :value="$customer->email" placeholder="jessica@example.com" />
        <x-form.select name="status" label="Customer Status" :value="$customer->status" :options="\App\Models\Customer::STATUSES" />
        <x-form.input name="birthday" label="Birthday" type="date" :value="$customer->birthday?->format('Y-m-d')" />
        <x-form.input name="source" label="Source" :value="$customer->source" placeholder="Public booking page" />
        <x-form.textarea name="address" label="Address" class="sm:col-span-2" :value="$customer->address" placeholder="Street, city, state..." rows="3" />
        <x-form.textarea name="notes" label="Profile Notes" class="sm:col-span-2" :value="$customer->notes" placeholder="Preferences, allergies, service notes, or internal reminders..." />
    </form>

    <form id="delete-customer-form-{{ $customer->id }}" method="POST" action="{{ route('admin.customers.destroy', $customer) }}">
        @csrf
        @method('DELETE')
    </form>

    <x-slot:footer>
        <div class="flex w-full flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between">
            <x-ui.button variant="danger" type="submit" form="delete-customer-form-{{ $customer->id }}">
                Delete Customer
            </x-ui.button>
            <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <x-ui.button variant="secondary" data-modal-close>Cancel</x-ui.button>
                <x-ui.button type="submit" form="edit-customer-form-{{ $customer->id }}">Update Customer</x-ui.button>
            </div>
        </div>
    </x-slot:footer>
</x-ui.modal>
