@php
    $mode = $mode ?? 'create';
    $isEdit = $mode === 'edit';
    $modalAppointment = $modalAppointment ?? null;
    $modalId = $modalId ?? ($isEdit ? 'edit-appointment-modal-' . $modalAppointment->id : 'create-appointment-modal');
    $formId = $isEdit ? 'edit-appointment-form-' . $modalAppointment->id : 'create-appointment-form';
    $action = $isEdit ? route('admin.appointments.update', $modalAppointment) : route('admin.appointments.store');
    $selectedCustomer = old('customer_id', $modalAppointment?->customer_id);
    $selectedService = old('service_id', $modalAppointment?->service_id);
    $selectedStaff = old('staff_profile_id', $modalAppointment?->staff_profile_id);
    $selectedStatus = old('status', $modalAppointment?->status_value ?? \App\Enums\AppointmentStatus::Pending->value);
    $selectedPayment = old('payment_status', $modalAppointment?->payment_status ?? 'unpaid');
@endphp

<x-ui.modal :id="$modalId" :title="$isEdit ? 'Edit Appointment' : 'Create Appointment'" description="Add or update an appointment on the Booklio calendar." size="lg">
    <form id="{{ $formId }}" method="POST" action="{{ $action }}" class="grid gap-4 sm:grid-cols-2">
        @csrf
        @if ($isEdit)
            @method('PUT')
        @endif

        <x-form.select name="customer_id" label="Customer" placeholder="Choose customer" :value="$selectedCustomer" :options="$customers->pluck('name', 'id')->all()" />
        <x-form.select name="service_id" label="Service" placeholder="Choose service" :value="$selectedService" :options="$services->pluck('name', 'id')->all()" />
        <x-form.select name="staff_profile_id" label="Staff Member" placeholder="Choose staff" :value="$selectedStaff" :options="$staffProfiles->pluck('name', 'id')->all()" />
        <x-form.select name="status" label="Status" :value="$selectedStatus" :options="$statusOptions" />
        <x-form.input name="appointment_date" label="Date" type="date" :value="old('appointment_date', $modalAppointment?->starts_at?->format('Y-m-d'))" />
        <x-form.input name="appointment_time" label="Time" type="time" :value="old('appointment_time', $modalAppointment?->starts_at?->format('H:i'))" />
        <x-form.input name="price" label="Price" type="number" step="0.01" min="0" :value="old('price', $modalAppointment?->price)" placeholder="65.00" />
        <x-form.select name="payment_status" label="Payment Status" :value="$selectedPayment" :options="$paymentStatusOptions" />
        <x-form.textarea name="customer_notes" label="Customer Notes" class="sm:col-span-2" :value="$modalAppointment?->customer_notes" placeholder="Customer preferences, allergies, or notes from booking..." />
        <x-form.textarea name="internal_notes" label="Internal Notes" class="sm:col-span-2" :value="$modalAppointment?->internal_notes" placeholder="Private team note..." />
    </form>

    <x-slot:footer>
        <x-ui.button variant="secondary" data-modal-close>Cancel</x-ui.button>
        <x-ui.button type="submit" form="{{ $formId }}">{{ $isEdit ? 'Update Appointment' : 'Save Appointment' }}</x-ui.button>
    </x-slot:footer>
</x-ui.modal>