@php
    $appointmentCustomers = $customers->map(function ($customer) {
        return [
            'id' => $customer->id,
            'customer_number' => $customer->customer_number,
            'name' => $customer->name,
            'email' => $customer->email,
            'phone' => $customer->phone,
            'address' => $customer->address,
            'emirate' => $customer->emirate,
            'pets' => $customer->pets->map(function ($pet) {
                return [
                    'id' => $pet->id,
                    'name' => $pet->name,
                    'species' => $pet->species,
                    'breed' => $pet->breed,
                    'gender' => $pet->gender,
                    'dob' => $pet->dob,
                    'weight_kg' => $pet->weight_kg,
                    'size_category' => $pet->size_category,
                    'neutered_spayed' => $pet->neutered_spayed,
                    'vaccination_status' => $pet->vaccination_status,
                    'special_instructions' => $pet->special_instructions,
                    'photo' => $pet->photo,
                    'photo_url' => $pet->photo ? Storage::disk('public')->url($pet->photo) : null,
                    'document_paths' => $pet->document_paths ?? [],
                    'vaccinations' => $pet->vaccinations->map(fn ($vaccination) => [
                        'id' => $vaccination->id,
                        'name' => $vaccination->vaccine_name,
                        'given' => optional($vaccination->date_administered)->format('Y-m-d'),
                        'expiry' => optional($vaccination->next_due_date)->format('Y-m-d'),
                    ])->values(),
                ];
            })->values(),
        ];
    })->values();

    $appointmentServices = $categories->flatMap(function ($category) {
        return $category->services->map(fn ($service) => [
            'id' => $service->id,
            'category_id' => $category->id,
            'category_name' => $category->name,
            'name' => $service->name,
            'base_price' => (float) $service->base_price,
            'duration_minutes' => $service->duration_minutes,
            'buffer_minutes' => $service->buffer_minutes,
            'packages' => $service->packages->where('status', 'active')->map(fn ($package) => [
                'id' => $package->id,
                'name' => $package->name,
                'price' => (float) $package->price,
                'sessions_count' => $package->sessions_count,
                'duration_minutes' => $package->effective_duration,
            ])->values(),
        ]);
    })->values();

    $appointmentStaff = $staffMembers->map(fn ($staff) => [
        'id' => $staff->id,
        'name' => $staff->name,
        'role' => $staff->roles->first()?->name ?? 'Team member',
        'service_ids' => $staff->services->pluck('id')->values(),
    ])->values();
    $appointmentResources = $resources->map(fn ($resource) => [
        'id' => $resource->id,
        'name' => $resource->name,
        'type' => str($resource->type)->headline()->toString(),
    ])->values();
    $appointmentOldInput = session()->getOldInput();
    $appointmentVatRate = (float) config('pawstreet.vat_rate', 5);
@endphp

<x-layouts.company-admin title="Schedule Appointments - Paw Street ERP">
    <div class="pos-appointment-page" x-data="posAppointmentBuilder()" x-init="init()">
        <h1 class="sr-only">Create Appointment</h1>

        @if($errors->any())
            <div class="mb-6 rounded-2xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-800" role="alert">
                <p class="font-semibold">Please review the appointment details.</p>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="pos-appt-hero">
            <div class="pos-appt-greeting">
                <span>Hello, {{ explode(' ', Auth::user()->name)[0] }}</span>
                <i class="fa-solid fa-paw" aria-hidden="true"></i>
            </div>

            <div class="pos-client-search">
                <label for="existing-client-search" class="sr-only">Search Existing Client</label>
                <input id="existing-client-search" type="search" x-model="clientSearch"
                       @focus="searchOpen = true" @input="searchOpen = true"
                       @keydown.escape="searchOpen = false" autocomplete="off"
                       placeholder="Search Existing Client">
                <div x-cloak x-show="searchOpen && filteredCustomers.length" @click.outside="searchOpen = false"
                     class="pos-client-results">
                    <template x-for="customer in filteredCustomers" :key="customer.id">
                        <button type="button" class="pos-client-result" @click="selectCustomer(customer)">
                            <strong class="block" x-text="customer.name"></strong>
                            <span class="text-[11px] text-slate-500" x-text="customer.phone + ' · ' + (customer.customer_number || 'Customer')"></span>
                        </button>
                    </template>
                </div>
            </div>
            <div></div>
        </div>

        <form x-ref="appointmentForm" method="POST" action="{{ route('company-admin.appointments.store') }}" enctype="multipart/form-data"
              @submit.prevent="submitAppointment($event)" @reset.prevent="resetBuilder">
            @csrf

            <div class="pos-appt-owner-grid">
                <section class="pos-appt-card">
                    <div class="flex items-center justify-between gap-3">
                        <h2>Pet Owner Details</h2>
                        <button x-cloak x-show="!ownerEditing" type="button" @click="ownerEditing = true" class="rounded-xl bg-purple-50 px-3 py-2 text-[10px] font-black text-purple-700 hover:bg-purple-100">
                            <i class="fa-solid fa-pen-to-square mr-1" aria-hidden="true"></i>Edit Owner
                        </button>
                    </div>
                    <div class="pos-form-stack">
                        <div class="pos-field">
                            <label for="owner-name">Full Name*</label>
                            <input id="owner-name" name="owner[name]" type="text" class="pos-input" x-model="owner.name" :readonly="!ownerEditing" required>
                        </div>
                        <div class="pos-field">
                            <label for="owner-email">Email</label>
                            <input id="owner-email" name="owner[email]" type="email" class="pos-input" x-model="owner.email" :readonly="!ownerEditing">
                        </div>
                        <div class="pos-field">
                            <label for="owner-phone">Mobile Number*</label>
                            <input id="owner-phone" name="owner[phone]" type="tel" class="pos-input" x-model="owner.phone"
                                   @input.debounce.500ms="lookupCustomerByPhone" :readonly="!ownerEditing" autocomplete="tel"
                                   placeholder="Enter phone to find existing customer" required>
                            <p x-cloak x-show="phoneLookupMessage" x-text="phoneLookupMessage" role="status"
                               class="mt-2 text-xs font-medium"
                               :class="phoneLookupState === 'found' ? 'text-emerald-700' : (phoneLookupState === 'error' ? 'text-red-600' : 'text-slate-500')"></p>
                        </div>
                        <div class="pos-field">
                            <label for="owner-address">Address</label>
                            <input id="owner-address" name="owner[address]" type="text" class="pos-input" x-model="owner.address" :readonly="!ownerEditing">
                        </div>
                        <div class="pos-field">
                            <span class="pos-field-label">Emirates ID Photo</span>
                            <label class="pos-upload">
                                <span x-text="emiratesFileName || 'Choose File'"></span>
                                <i class="fa-solid fa-upload" aria-hidden="true"></i>
                                <input x-ref="emiratesIdInput" name="emirates_id" type="file" accept="image/*,.pdf" @change="emiratesFileName = $event.target.files[0]?.name || ''" aria-label="Upload Emirates ID photo">
                            </label>
                        </div>
                    </div>
                </section>

                <section class="pos-appt-card">
                    <h2>Secondary Contact</h2>
                    <div class="pos-form-stack">
                        <div class="pos-field">
                            <label for="secondary-name">Full Name*</label>
                            <input id="secondary-name" name="secondary[name]" type="text" class="pos-input" x-model="secondary.name">
                        </div>
                        <div class="pos-field">
                            <label for="secondary-email">Email</label>
                            <input id="secondary-email" name="secondary[email]" type="email" class="pos-input" x-model="secondary.email">
                        </div>
                        <div class="pos-field">
                            <label for="secondary-phone">Mobile Number</label>
                            <input id="secondary-phone" name="secondary[phone]" type="tel" class="pos-input" x-model="secondary.phone">
                        </div>
                        <div class="pos-field">
                            <label for="secondary-address">Address</label>
                            <input id="secondary-address" name="secondary[address]" type="text" class="pos-input" x-model="secondary.address">
                        </div>
                    </div>
                </section>

                <section class="pos-appt-card">
                    <h2>Notes</h2>
                    <div class="pos-field">
                        <label for="appointment-notes" class="sr-only">Appointment notes</label>
                        <textarea id="appointment-notes" name="notes" class="pos-textarea" x-model="notes"></textarea>
                    </div>
                    <div class="pos-field mt-4">
                            <span class="pos-field-label">Payment Option</span>
                            <div class="pos-segmented" role="group" aria-label="Payment option">
                                <button type="button" :class="paymentStatus === 'pay_later' ? 'is-active' : ''" @click="paymentStatus = 'pay_later'">Pay Later</button>
                                <button type="button" :class="paymentStatus === 'partial' ? 'is-active' : ''" @click="paymentStatus = 'partial'">Deposit</button>
                                <button type="button" :class="paymentStatus === 'paid' ? 'is-active' : ''" @click="paymentStatus = 'paid'">Pay Now</button>
                            </div>
                        </div>
                        <div class="pos-field mt-4" x-show="paymentStatus !== 'pay_later'" x-cloak>
                            <label for="payment-method">Payment Method</label>
                            <select id="payment-method" class="pos-select" x-model="paymentMethod">
                                <option value="card">Card</option>
                                <option value="cash">Cash</option>
                                <option value="bank_transfer">Bank Transfer</option>
                                <option value="online">Online</option>
                            </select>
                        </div>
                        <div class="pos-field mt-4" x-show="paymentStatus === 'partial'" x-cloak>
                            <label for="payment-amount">Deposit Amount (AED)</label>
                            <input id="payment-amount" type="number" min="0.01" step="0.01" class="pos-input" x-model.number="paymentAmount" :max="Math.max(0, grandTotal - 0.01)">
                        </div>
                </section>
            </div>

            <template x-if="selectedPet">
            <section id="pet-editor" x-cloak x-show="petEditorOpen" x-transition class="pos-appt-section-card pos-pet-card">
                <div class="mb-5 flex items-center justify-between gap-3">
                    <div>
                        <h2>Edit Pet Details</h2>
                        <p class="pos-section-subtitle">Update the selected pet and save it to the owner's profile.</p>
                    </div>
                    <button type="button" @click="petEditorOpen = false" class="flex h-9 w-9 items-center justify-center rounded-xl bg-slate-100 text-slate-500" aria-label="Close pet editor">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="pos-pet-grid">
                    <div class="space-y-4">
                        <img :src="petPhoto" alt="Selected pet" class="pos-pet-avatar">
                        <label class="pos-outline-button cursor-pointer">
                            Upload New Photo
                            <input x-ref="petPhotoInput" name="pet_photo" type="file" accept="image/*" class="sr-only" @change="previewPetPhoto($event)">
                        </label>
                        <div>
                            <span class="pos-field-label">Vaccinated?</span>
                            <div class="pos-segmented">
                                <button type="button" :class="petIsVaccinated(selectedPet) ? 'is-active' : ''" @click="selectedPet.vaccination_status = 'up_to_date'">Yes</button>
                                <button type="button" :class="!petIsVaccinated(selectedPet) ? 'is-active' : ''" @click="selectedPet.vaccination_status = 'unknown'">No</button>
                            </div>
                            <div x-show="(selectedPet?.vaccinations || []).length" class="mt-3 space-y-1 rounded-xl bg-emerald-50 p-3 text-[10px] text-emerald-900">
                                <p class="font-black uppercase tracking-wider">Saved vaccination details</p>
                                <template x-for="record in selectedPet?.vaccinations || []" :key="record.id || record.name + record.expiry">
                                    <p><b x-text="record.name"></b> <span x-text="'· ' + (record.given || '-') + ' to ' + (record.expiry || '-')"></span></p>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="pos-form-stack">
                        <div class="pos-field">
                            <label for="pet-name">Pet Name</label>
                            <input id="pet-name" name="pet[name]" type="text" class="pos-input" x-model="selectedPet.name">
                        </div>
                        <div class="pos-field">
                            <label for="pet-species">Species</label>
                            <select id="pet-species" name="pet[species]" class="pos-select" x-model="selectedPet.species">
                                <option>Dog</option><option>Cat</option><option>Bird</option><option>Rabbit</option><option>Reptile</option><option>Small Animal</option><option>Other</option>
                            </select>
                        </div>
                        <div class="pos-field">
                            <label for="pet-breed">Breed</label>
                            <input id="pet-breed" name="pet[breed]" type="text" class="pos-input" x-model="selectedPet.breed">
                        </div>
                        <div class="pos-field">
                            <label for="pet-gender">Gender</label>
                            <select id="pet-gender" name="pet[gender]" class="pos-select" x-model="selectedPet.gender">
                                <option value="">Select</option><option>Male</option><option>Female</option><option>Unknown</option>
                            </select>
                        </div>
                    </div>

                    <div class="pos-form-stack">
                        <div class="pos-field">
                            <label for="pet-dob">Birth Date</label>
                            <input id="pet-dob" name="pet[dob]" type="date" class="pos-input" x-model="selectedPet.dob">
                        </div>
                        <div class="pos-field">
                            <label for="pet-weight">Weight/Kg</label>
                            <input id="pet-weight" name="pet[weight_kg]" type="number" step="0.01" min="0" class="pos-input" x-model="selectedPet.weight_kg">
                        </div>
                        <div class="pos-field">
                            <label for="pet-size">Size</label>
                            <select id="pet-size" name="pet[size_category]" class="pos-select" x-model="selectedPet.size_category">
                                <option value="">Select</option><option>XS</option><option>S</option><option>M</option><option>L</option><option>XL</option>
                            </select>
                        </div>
                        <div class="pos-field">
                            <span class="pos-field-label">Attach Documents</span>
                            <label class="pos-upload">
                                <span x-text="petDocumentName || 'Choose File'"></span>
                                <i class="fa-solid fa-upload" aria-hidden="true"></i>
                                <input x-ref="petDocumentsInput" name="pet_documents[]" type="file" accept="image/*,.pdf" multiple @change="petDocumentName = Array.from($event.target.files || []).map(file => file.name).join(', ')" aria-label="Attach pet documents">
                            </label>
                        </div>
                    </div>

                    <div class="pos-form-stack">
                        <div>
                            <span class="pos-field-label">Neutered Or Spayed?</span>
                            <div class="pos-segmented">
                                <button type="button" :class="selectedPet?.neutered_spayed ? 'is-active' : ''" @click="selectedPet.neutered_spayed = true">Yes</button>
                                <button type="button" :class="!selectedPet?.neutered_spayed ? 'is-active' : ''" @click="selectedPet.neutered_spayed = false">No</button>
                            </div>
                        </div>
                        <div class="pos-field">
                            <label for="pet-internal-notes">Internal Notes</label>
                            <textarea id="pet-internal-notes" name="pet[special_instructions]" class="pos-textarea" x-model="selectedPet.special_instructions"></textarea>
                        </div>
                    </div>
                </div>
                <p x-cloak x-show="petActionError" class="mt-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs font-semibold text-red-700" x-text="petActionError" role="alert"></p>
                <div class="mt-6 flex justify-end gap-3 border-t border-slate-100 pt-4">
                    <button type="button" @click="petEditorOpen = false" class="h-10 rounded-xl bg-slate-100 px-5 text-xs font-bold text-slate-700">Cancel</button>
                    <button type="button" @click="updatePet" :disabled="savingPet" class="h-10 rounded-xl bg-purple-700 px-5 text-xs font-bold text-white disabled:cursor-not-allowed disabled:opacity-60">
                        <span x-show="!savingPet">Save Pet Changes</span>
                        <span x-show="savingPet">Saving...</span>
                    </button>
                </div>
            </section>
            </template>

            <section id="owner-pets" class="pos-appt-section-card">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2>Pet List</h2>
                        <p x-show="selectedCustomerId" class="pos-section-subtitle"><span x-text="customerPets.length"></span> active pet<span x-show="customerPets.length !== 1">s</span> linked to this owner</p>
                        <p x-show="!selectedCustomerId" class="pos-section-subtitle">Enter an existing owner's phone number to load their pets.</p>
                    </div>
                    <button type="button" class="pos-outline-button" @click="openAddPetModal">
                        <i class="fa-solid fa-plus mr-2" aria-hidden="true"></i>Add Pet
                    </button>
                </div>

                <p x-cloak x-show="petActionError && !petEditorOpen" class="mt-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs font-semibold text-red-700" x-text="petActionError" role="alert"></p>

                <div x-show="!selectedCustomerId" class="mt-5 rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-5 py-8 text-center">
                    <i class="fa-solid fa-paw text-2xl text-purple-300" aria-hidden="true"></i>
                    <p class="mt-2 text-sm font-bold text-slate-700">Pet list will appear here</p>
                    <p class="mt-1 text-xs text-slate-500">Enter the owner's name and phone, then choose Add Pet. A new owner will be saved automatically.</p>
                </div>

                <div x-cloak x-show="selectedCustomerId && customerPets.length === 0" class="mt-5 rounded-2xl border border-dashed border-purple-200 bg-purple-50/50 px-5 py-8 text-center">
                    <p class="text-sm font-bold text-purple-900">No active pets registered for this owner.</p>
                    <button type="button" class="mt-3 text-xs font-bold text-purple-700 underline" @click="openAddPetModal">Add the first pet</button>
                </div>

                <div x-cloak x-show="selectedCustomerId && customerPets.length" class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                    <template x-for="pet in customerPets" :key="pet.id">
                        <article class="rounded-2xl border bg-white p-4 transition"
                                 :class="Number(selectedPet?.id) === Number(pet.id) ? 'border-purple-400 shadow-md shadow-purple-100' : 'border-slate-200 hover:border-purple-200'">
                            <div class="flex items-start gap-3">
                                <img :src="petDisplayPhoto(pet)" :alt="pet.name" class="h-14 w-14 rounded-2xl border border-purple-100 bg-purple-50 object-cover p-1">
                                <div class="min-w-0 flex-1">
                                    <h3 class="truncate text-sm font-black text-slate-900" x-text="pet.name"></h3>
                                    <p class="mt-0.5 truncate text-xs text-slate-500" x-text="[pet.species, pet.breed].filter(Boolean).join(' - ')"></p>
                                    <p class="mt-1 text-[10px] font-semibold text-slate-400" x-text="[pet.gender, pet.size_category].filter(Boolean).join(' | ')"></p>
                                </div>
                            </div>

                            <div class="mt-4 flex items-center justify-between border-t border-slate-100 pt-3">
                                <button type="button" @click="togglePetVaccinations(pet)" class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-black"
                                        :class="petIsVaccinated(pet) ? 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' : 'bg-red-50 text-red-600'">
                                    <i class="fa-solid" :class="petIsVaccinated(pet) ? 'fa-shield-halved' : 'fa-circle-exclamation'" aria-hidden="true"></i>
                                    <span x-text="petIsVaccinated(pet) ? 'Vaccinated' : 'Not Vaccinated'"></span>
                                    <i x-show="petIsVaccinated(pet)" class="fa-solid fa-chevron-down text-[8px]" aria-hidden="true"></i>
                                </button>
                                <span class="text-[10px] font-bold text-slate-400">Select below in Service Details</span>
                            </div>

                            <div x-cloak x-show="Number(expandedVaccinationPetId) === Number(pet.id)" x-transition class="mt-3 rounded-xl bg-slate-50 p-3">
                                <p class="text-[10px] font-black uppercase tracking-wider text-slate-500">Vaccination Details</p>
                                <div x-show="(pet.vaccinations || []).length" class="mt-2 space-y-2">
                                    <template x-for="record in pet.vaccinations || []" :key="record.id || record.name + record.expiry">
                                        <div class="rounded-lg bg-white px-3 py-2 text-[10px] shadow-sm">
                                            <p class="font-black text-slate-800" x-text="record.name"></p>
                                            <p class="mt-1 text-slate-500" x-text="'Given: ' + (record.given || '-') + ' | Expires: ' + (record.expiry || '-')"></p>
                                        </div>
                                    </template>
                                </div>
                                <p x-show="!(pet.vaccinations || []).length" class="mt-2 text-[10px] text-slate-500">Vaccinated status is saved, but no vaccination records are available.</p>
                            </div>

                            <div class="mt-4 grid grid-cols-2 gap-2">
                                <button type="button" @click="selectPetForEditing(pet)" class="rounded-xl bg-purple-50 px-3 py-2 text-[10px] font-black text-purple-700 hover:bg-purple-100">
                                    <i class="fa-solid fa-pen-to-square mr-1" aria-hidden="true"></i>Edit Pet
                                </button>
                                <button type="button" @click="removePet(pet)" :disabled="Number(removingPetId) === Number(pet.id)" class="rounded-xl bg-red-50 px-3 py-2 text-[10px] font-black text-red-600 hover:bg-red-100 disabled:opacity-50">
                                    <i class="fa-solid fa-trash-can mr-1" aria-hidden="true"></i><span x-text="Number(removingPetId) === Number(pet.id) ? 'Removing...' : 'Remove Pet'"></span>
                                </button>
                            </div>
                        </article>
                    </template>
                </div>
            </section>
            <h2 class="pos-section-heading">Service Details</h2>
            <p class="pos-section-subtitle">Enter Details</p>
            <section class="pos-appt-section-card pos-service-card mt-0!">
                <div class="pos-table-wrap">
                    <table class="pos-data-table min-w-[1980px]">
                        <thead>
                            <tr><th class="w-12"></th><th>Species</th><th>Pet</th><th>Size</th><th>Service</th><th>Package / Sessions</th><th>Team Member</th><th>Resource</th><th>Appointment Time</th><th>QTY</th><th>Cost</th><th>Discount</th><th class="w-12"></th></tr>
                        </thead>
                        <tbody>
                            <template x-for="(row, index) in serviceRows" :key="row.key">
                                <tr>
                                    <td class="pos-row-handle"><i class="fa-solid fa-grip-vertical" aria-hidden="true"></i></td>
                                    <td><input type="text" class="pos-input" :value="petFor(row.pet_id)?.species || ''" readonly aria-label="Species"></td>
                                    <td>
                                        <select class="pos-select" x-model.number="row.pet_id" @change="syncSelectedPetFromRow(row)" :aria-label="'Pet ' + (index + 1)">
                                            <template x-for="pet in customerPets" :key="pet.id"><option :value="pet.id" x-text="pet.name"></option></template>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="pos-select" x-model="row.size" :aria-label="'Size ' + (index + 1)">
                                            <option>XS</option><option>S</option><option>M</option><option>L</option><option>XL</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="pos-select min-w-[280px]!" x-model.number="row.service_id" @change="syncServiceRow(row); loadSlots(row)" :aria-label="'Service ' + (index + 1)">
                                            <option value="">Select service</option>
                                            <template x-for="service in services" :key="service.id"><option :value="service.id" x-text="`${service.name} - AED ${money(service.base_price)}`"></option></template>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="pos-select min-w-[250px]!" x-model="row.service_package_id" @change="syncPackageRow(row); loadSlots(row)" :aria-label="'Package ' + (index + 1)">
                                            <option value="">Base service</option>
                                            <template x-for="pkg in packagesFor(row.service_id)" :key="pkg.id">
                                                <option :value="String(pkg.id)" x-text="`${pkg.name} · ${pkg.sessions_count} session${Number(pkg.sessions_count) === 1 ? '' : 's'}`"></option>
                                            </template>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="pos-select min-w-[200px]!" x-model="row.staff_id" @change="loadSlots(row)" :aria-label="'Team member ' + (index + 1)">
                                            <option value="">Auto assign</option>
                                            <template x-for="staff in staffFor(row.service_id)" :key="staff.id"><option :value="String(staff.id)" x-text="`${staff.name} · ${staff.role}`"></option></template>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="pos-select min-w-[190px]!" x-model="row.resource_id" :aria-label="'Resource ' + (index + 1)">
                                            <option value="">No resource</option>
                                            <template x-for="resource in resources" :key="resource.id"><option :value="String(resource.id)" x-text="`${resource.name} · ${resource.type}`"></option></template>
                                        </select>
                                    </td>
                                    <td>
                                        <div class="min-w-[235px] space-y-2">
                                            <input type="datetime-local" class="pos-input" x-model="row.appointment_at" :min="minimumAppointmentDateTime" @change="loadSlots(row)" :aria-label="'Appointment time ' + (index + 1)">
                                            <button type="button" class="text-[10px] font-black text-purple-700 hover:underline" @click="loadSlots(row)" :disabled="row.loading_slots" x-text="row.loading_slots ? 'Checking...' : 'Check available times'"></button>
                                            <select x-cloak x-show="(row.available_slots || []).length" class="pos-select" @change="chooseSlot(row, $event.target.value); $event.target.value = ''" :aria-label="'Available time suggestions ' + (index + 1)">
                                                <option value="">Choose an available time</option>
                                                <template x-for="slot in row.available_slots || []" :key="slot.start_time"><option :value="slot.start_time" x-text="slot.display_time + ' - ' + slot.end_time"></option></template>
                                            </select>
                                            <p x-show="row.slot_message" class="text-[10px] font-semibold text-slate-500" x-text="row.slot_message"></p>
                                        </div>
                                    </td>
                                    <td><input type="number" min="1" max="10" class="pos-input w-[74px]! min-w-[74px]!" x-model.number="row.quantity" aria-label="Quantity"></td>
                                    <td><input type="text" class="pos-input w-[115px]!" :value="'AED ' + money(row.cost)" readonly aria-label="Cost"></td>
                                    <td><input type="number" min="0" step="0.01" :max="Math.max(0, Number(row.cost || 0) * Number(row.quantity || 0))" class="pos-input w-[90px]!" x-model.number="row.discount" aria-label="Discount"></td>
                                    <td><button type="button" class="pos-row-action" @click="removeServiceRow(index)" :disabled="serviceRows.length === 1" aria-label="Remove service"><i class="fa-solid fa-trash-can" aria-hidden="true"></i></button></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                    <button type="button" class="pos-add-row" @click="addServiceRow()"><i class="fa-solid fa-plus" aria-hidden="true"></i> Add Service</button>
                </div>
            </section>

            <h2 class="pos-section-heading">Package Add-on</h2>
            <p class="pos-section-subtitle">Enter Details</p>
            <section class="pos-appt-section-card mt-0!">
                <div class="pos-table-wrap">
                    <table class="pos-data-table min-w-[920px]">
                        <thead><tr><th class="w-12"></th><th>Pet</th><th>Add On Type</th><th>Qty</th><th>Price</th><th>Total</th><th class="w-12"></th></tr></thead>
                        <tbody>
                            <template x-for="(row, index) in addOns" :key="row.key">
                                <tr>
                                    <td class="pos-row-handle"><i class="fa-solid fa-grip-vertical" aria-hidden="true"></i></td>
                                    <td><select class="pos-select" x-model.number="row.pet_id" :aria-label="'Add-on pet ' + (index + 1)"><template x-for="pet in customerPets" :key="pet.id"><option :value="pet.id" x-text="pet.name"></option></template></select></td>
                                    <td><select class="pos-select min-w-[250px]!" x-model="row.name" @change="syncAddonRow(row)" :aria-label="'Add-on type ' + (index + 1)">@foreach($addonCatalog as $addon)<option value="{{ $addon['name'] }}">{{ $addon['name'] }}</option>@endforeach</select></td>
                                    <td><input type="number" min="1" max="10" class="pos-input w-[78px]! min-w-[78px]!" x-model.number="row.quantity" aria-label="Add-on quantity"></td>
                                    <td><input type="text" class="pos-input" :value="'AED ' + money(row.price)" readonly aria-label="Add-on price"></td>
                                    <td><input type="text" class="pos-input" :value="'AED ' + money(row.price * row.quantity)" readonly aria-label="Add-on total"></td>
                                    <td><button type="button" class="pos-row-action" @click="addOns.splice(index, 1)" aria-label="Remove add-on"><i class="fa-solid fa-trash-can" aria-hidden="true"></i></button></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                    <button type="button" class="pos-add-row" @click="addAddonRow"><i class="fa-solid fa-plus" aria-hidden="true"></i> Add Add-On Service</button>
                </div>
            </section>

            <h2 class="pos-section-heading">Products</h2>
            <p class="pos-section-subtitle">Enter Details</p>
            <section class="pos-appt-section-card pos-products-card">
                <div class="pos-table-wrap">
                    <table class="pos-data-table min-w-[900px]">
                        <thead><tr><th class="w-12"></th><th>Category</th><th>Search Product</th><th>QTY</th><th>Cost</th><th>Total</th><th class="w-12"></th></tr></thead>
                        <tbody>
                            <template x-for="(row, index) in products" :key="row.key">
                                <tr>
                                    <td class="pos-row-handle"><i class="fa-solid fa-grip-vertical" aria-hidden="true"></i></td>
                                    <td><input type="text" class="pos-input" x-model="row.category" :readonly="!row.openline" :aria-label="'Product category ' + (index + 1)"></td>
                                    <td>
                                        <template x-if="!row.openline"><select class="pos-select min-w-[270px]!" x-model="row.name" @change="syncProductRow(row)" :aria-label="'Product ' + (index + 1)">@foreach($productCatalog as $product)<option value="{{ $product['name'] }}">{{ $product['name'] }}</option>@endforeach</select></template>
                                        <template x-if="row.openline"><input type="text" class="pos-input min-w-[270px]!" x-model="row.name" :aria-label="'Open line item ' + (index + 1)"></template>
                                    </td>
                                    <td><input type="number" min="1" max="99" class="pos-input w-[78px]! min-w-[78px]!" x-model.number="row.quantity" aria-label="Product quantity"></td>
                                    <td>
                                        <template x-if="!row.openline"><input type="text" class="pos-input" :value="'AED ' + money(row.price)" readonly aria-label="Product cost"></template>
                                        <template x-if="row.openline"><input type="number" min="0" step="0.01" class="pos-input" x-model.number="row.price" aria-label="Open line item cost"></template>
                                    </td>
                                    <td><input type="text" class="pos-input" :value="'AED ' + money(row.price * row.quantity)" readonly aria-label="Product total"></td>
                                    <td><button type="button" class="pos-row-action" @click="products.splice(index, 1)" aria-label="Remove product"><i class="fa-solid fa-trash-can" aria-hidden="true"></i></button></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                    <button type="button" class="pos-add-row" @click="addProduct"><i class="fa-solid fa-plus" aria-hidden="true"></i> Add Product</button>
                    <button type="button" class="pos-add-row block!" @click="addOpenLineProduct"><i class="fa-solid fa-plus" aria-hidden="true"></i> Add Openline Item</button>
                </div>
            </section>

            <section class="ml-auto mt-6 w-full max-w-md rounded-2xl border border-purple-100 bg-white p-5 shadow-sm" aria-label="Appointment total">
                <div class="flex justify-between py-1.5 text-sm text-slate-600"><span>Subtotal</span><span x-text="'AED ' + money(subtotal)"></span></div>
                <div class="flex justify-between py-1.5 text-sm text-slate-600"><span>Discounts</span><span x-text="'- AED ' + money(totalDiscount)"></span></div>
                <div class="flex justify-between py-1.5 text-sm text-slate-600"><span>VAT ({{ rtrim(rtrim(number_format($appointmentVatRate, 2), '0'), '.') }}%)</span><span x-text="'AED ' + money(taxAmount)"></span></div>
                <div class="mt-2 flex justify-between border-t border-purple-100 pt-4 text-lg font-bold text-[#3e145f]"><span>Total</span><span x-text="'AED ' + money(grandTotal)"></span></div>
            </section>

            <input type="hidden" name="customer_id" :value="selectedCustomerId">
            <input type="hidden" name="pet_id" :value="primaryRow()?.pet_id || ''">
            <input type="hidden" name="service_category_id" :value="primaryService()?.category_id || ''">
            <input type="hidden" name="service_id" :value="primaryRow()?.service_id || ''">
            <input type="hidden" name="service_package_id" :value="primaryRow()?.service_package_id || ''">
            <input type="hidden" name="staff_id" :value="primaryRow()?.staff_id || ''">
            <input type="hidden" name="resource_id" :value="primaryRow()?.resource_id || ''">
            <input type="hidden" name="scheduled_date" :value="primarySchedule.date">
            <input type="hidden" name="start_time" :value="primarySchedule.start">
            <input type="hidden" name="end_time" :value="primarySchedule.end">
            <input type="hidden" name="payment_status" :value="paymentStatus">
            <input type="hidden" name="payment_method" :value="paymentStatus !== 'pay_later' ? paymentMethod : ''">
            <input type="hidden" name="payment_amount" :value="paymentStatus === 'partial' ? paymentAmount : ''">
            <input type="hidden" name="subtotal" :value="subtotal.toFixed(2)">
            <input type="hidden" name="discount_amount" :value="totalDiscount">
            <input type="hidden" name="tax_amount" :value="taxAmount.toFixed(2)">
            <input type="hidden" name="total_amount" :value="grandTotal.toFixed(2)">
            <input type="hidden" name="booking_details" :value="bookingDetailsJson">
            <input type="hidden" name="pet[id]" :value="selectedPet?.id || ''">
            <input type="hidden" name="pet[vaccination_status]" :value="selectedPet?.vaccination_status || 'Pending'">
            <input type="hidden" name="pet[neutered_spayed]" :value="selectedPet?.neutered_spayed ? 1 : 0">

            <template x-for="(row, index) in completeVaccinations" :key="'hidden-vaccine-' + row.key">
                <span class="hidden">
                    <input type="hidden" :name="`vaccinations[${index}][id]`" :value="row.id || ''">
                    <input type="hidden" :name="`vaccinations[${index}][name]`" :value="row.name">
                    <input type="hidden" :name="`vaccinations[${index}][given]`" :value="row.given">
                    <input type="hidden" :name="`vaccinations[${index}][expiry]`" :value="row.expiry">
                </span>
            </template>

            <template x-for="(row, index) in serviceRows" :key="'hidden-service-' + row.key">
                <span class="hidden">
                    <input type="hidden" :name="`service_rows[${index}][pet_id]`" :value="row.pet_id">
                    <input type="hidden" :name="`service_rows[${index}][service_id]`" :value="row.service_id">
                    <input type="hidden" :name="`service_rows[${index}][service_package_id]`" :value="row.service_package_id || ''">
                    <input type="hidden" :name="`service_rows[${index}][staff_id]`" :value="row.staff_id || ''">
                    <input type="hidden" :name="`service_rows[${index}][resource_id]`" :value="row.resource_id || ''">
                    <input type="hidden" :name="`service_rows[${index}][appointment_at]`" :value="row.appointment_at">
                    <input type="hidden" :name="`service_rows[${index}][quantity]`" :value="row.quantity">
                    <input type="hidden" :name="`service_rows[${index}][discount]`" :value="row.discount || 0">
                </span>
            </template>
            <template x-for="(row, index) in addOns" :key="'hidden-addon-' + row.key">
                <span class="hidden">
                    <input type="hidden" :name="`add_ons[${index}][pet_id]`" :value="row.pet_id">
                    <input type="hidden" :name="`add_ons[${index}][name]`" :value="row.name">
                    <input type="hidden" :name="`add_ons[${index}][quantity]`" :value="row.quantity">
                </span>
            </template>
            <template x-for="(row, index) in submittedProducts" :key="'hidden-product-' + row.key">
                <span class="hidden">
                    <input type="hidden" :name="`products[${index}][pet_id]`" :value="row.pet_id || primaryRow()?.pet_id || ''">
                    <input type="hidden" :name="`products[${index}][category]`" :value="row.category">
                    <input type="hidden" :name="`products[${index}][name]`" :value="row.name">
                    <input type="hidden" :name="`products[${index}][quantity]`" :value="row.quantity">
                    <input type="hidden" :name="`products[${index}][price]`" :value="row.price">
                    <input type="hidden" :name="`products[${index}][open_line]`" :value="row.openline ? 1 : 0">
                </span>
            </template>

            <p x-cloak x-show="formMessage" class="mt-8 rounded-2xl border border-purple-200 bg-purple-50 px-5 py-4 text-sm text-purple-900" role="status" x-text="formMessage"></p>

            <div class="pos-form-footer">
                <button type="submit" class="pos-submit-button disabled:cursor-not-allowed disabled:opacity-60" :disabled="submitting">
                    <span x-text="submitting ? 'Creating Appointment...' : 'Submit'"></span>
                </button>
                <button type="reset" class="pos-reset-button">Reset</button>
            </div>
        </form>

        <div x-cloak x-show="addPetModalOpen" x-transition.opacity class="fixed inset-0 z-[90] flex items-center justify-center bg-slate-950/50 p-4 backdrop-blur-sm" @click.self="closeAddPetModal" @keydown.escape.window="closeAddPetModal">
            <form @submit.prevent="createPet" class="max-h-[92vh] w-full max-w-2xl overflow-y-auto rounded-3xl bg-white p-6 shadow-2xl">
                <div class="flex items-start justify-between border-b border-slate-100 pb-4">
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-[0.18em] text-purple-600">Existing Owner</p>
                        <h2 class="mt-1 text-xl font-black text-slate-950">Add New Pet</h2>
                        <p class="mt-1 text-xs text-slate-500" x-text="'Add a pet for ' + (owner.name || 'this customer')"></p>
                    </div>
                    <button type="button" @click="closeAddPetModal" class="flex h-9 w-9 items-center justify-center rounded-xl bg-slate-100 text-slate-500" aria-label="Close add pet form">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                </div>

                <div x-show="addPetError" class="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs font-medium text-red-700" x-text="addPetError" role="alert"></div>

                <div class="mt-5 grid gap-4 sm:grid-cols-2">
                    <div class="pos-field">
                        <label for="new-pet-name">Pet Name*</label>
                        <input id="new-pet-name" type="text" class="pos-input" x-model="newPet.name" required>
                    </div>
                    <div class="pos-field">
                        <label for="new-pet-species">Species*</label>
                        <select id="new-pet-species" class="pos-select" x-model="newPet.species" required>
                            <option value="">Select species</option><option>Dog</option><option>Cat</option><option>Bird</option><option>Rabbit</option><option>Reptile</option><option>Small Animal</option><option>Other</option>
                        </select>
                    </div>
                    <div class="pos-field">
                        <label for="new-pet-breed">Breed</label>
                        <input id="new-pet-breed" type="text" class="pos-input" x-model="newPet.breed">
                    </div>
                    <div class="pos-field">
                        <label for="new-pet-gender">Gender</label>
                        <select id="new-pet-gender" class="pos-select" x-model="newPet.gender">
                            <option value="">Select gender</option><option>Male</option><option>Female</option><option>Unknown</option>
                        </select>
                    </div>
                    <div class="pos-field">
                        <label for="new-pet-dob">Birth Date</label>
                        <input id="new-pet-dob" type="date" class="pos-input" x-model="newPet.dob">
                    </div>
                    <div class="pos-field">
                        <label for="new-pet-weight">Weight/Kg</label>
                        <input id="new-pet-weight" type="number" min="0" max="999.99" step="0.01" class="pos-input" x-model="newPet.weight_kg">
                    </div>
                    <div class="pos-field">
                        <label for="new-pet-size">Size</label>
                        <select id="new-pet-size" class="pos-select" x-model="newPet.size_category">
                            <option value="">Select size</option><option>XS</option><option>S</option><option>M</option><option>L</option><option>XL</option>
                        </select>
                    </div>
                    <div class="pos-field">
                        <label for="new-pet-photo">Pet Photo</label>
                        <input x-ref="newPetPhotoInput" id="new-pet-photo" type="file" accept="image/*" class="pos-input py-2">
                    </div>
                    <div class="pos-field sm:col-span-2">
                        <label for="new-pet-documents">Pet Documents</label>
                        <input x-ref="newPetDocumentsInput" id="new-pet-documents" type="file" accept="image/*,.pdf" multiple class="pos-input py-2">
                    </div>
                    <div class="pos-field">
                        <span class="pos-field-label">Vaccinated?</span>
                        <div class="pos-segmented">
                            <button type="button" :class="newPet.vaccination_status === 'up_to_date' ? 'is-active' : ''" @click="newPet.vaccination_status = 'up_to_date'">Yes</button>
                            <button type="button" :class="newPet.vaccination_status !== 'up_to_date' ? 'is-active' : ''" @click="newPet.vaccination_status = 'unknown'">No / Unknown</button>
                        </div>
                    </div>
                    <div class="pos-field">
                        <span class="pos-field-label">Neutered or Spayed?</span>
                        <div class="pos-segmented">
                            <button type="button" :class="newPet.neutered_spayed ? 'is-active' : ''" @click="newPet.neutered_spayed = true">Yes</button>
                            <button type="button" :class="!newPet.neutered_spayed ? 'is-active' : ''" @click="newPet.neutered_spayed = false">No</button>
                        </div>
                    </div>
                    <div x-cloak x-show="newPet.vaccination_status === 'up_to_date'" class="grid gap-4 rounded-2xl border border-emerald-100 bg-emerald-50/60 p-4 sm:col-span-2 sm:grid-cols-3">
                        <div class="pos-field">
                            <label for="new-pet-vaccine-name">Vaccine Name</label>
                            <input id="new-pet-vaccine-name" type="text" class="pos-input" x-model="newPet.vaccine_name" placeholder="e.g. Rabies">
                        </div>
                        <div class="pos-field">
                            <label for="new-pet-vaccine-given">Date Given</label>
                            <input id="new-pet-vaccine-given" type="date" class="pos-input" x-model="newPet.vaccine_given">
                        </div>
                        <div class="pos-field">
                            <label for="new-pet-vaccine-expiry">Valid Until</label>
                            <input id="new-pet-vaccine-expiry" type="date" class="pos-input" x-model="newPet.vaccine_expiry">
                        </div>
                        <p class="text-[10px] font-medium text-emerald-800 sm:col-span-3">Enter all three fields to save a vaccination record. You can leave all three blank if the owner will provide the certificate later.</p>
                    </div>
                    <div class="pos-field sm:col-span-2">
                        <label for="new-pet-notes">Special Instructions</label>
                        <textarea id="new-pet-notes" class="pos-textarea" x-model="newPet.special_instructions"></textarea>
                    </div>
                </div>

                <div class="mt-6 flex justify-end gap-3 border-t border-slate-100 pt-4">
                    <button type="button" @click="closeAddPetModal" class="h-10 rounded-xl bg-slate-100 px-5 text-xs font-bold text-slate-700">Cancel</button>
                    <button type="submit" :disabled="addingPet" class="h-10 rounded-xl bg-purple-700 px-5 text-xs font-bold text-white disabled:cursor-not-allowed disabled:opacity-60">
                        <span x-show="!addingPet">Add Pet</span>
                        <span x-show="addingPet">Adding...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function posAppointmentBuilder() {
            return {
                customers: @json($appointmentCustomers),
                services: @json($appointmentServices),
                staffMembers: @json($appointmentStaff),
                resources: @json($appointmentResources),
                addonCatalog: @json($addonCatalog),
                productCatalog: @json($productCatalog),
                vatRate: @json($appointmentVatRate),
                phoneLookupUrl: @json(route('api.customers.search-phone')),
                slotLookupUrl: @json(route('api.available-slots')),
                customerSaveUrl: @json(route('company-admin.customers.ajax')),
                petCreateBaseUrl: @json(url('/company-admin/customers')),
                defaultPetPhoto: @json(asset('images/pawstreet-mark.svg')),
                initialCustomerId: @json($initialCustomerId),
                initialPetId: @json($initialPetId),
                initialScheduleAt: @json($initialScheduleAt),
                rebookData: @json($rebookData),
                selectedCustomerId: null,
                selectedCustomer: null,
                customerPets: [],
                selectedPet: null,
                clientSearch: '',
                searchOpen: false,
                ownerEditing: true,
                savingOwner: false,
                owner: { name: '', email: '', phone: '', address: '' },
                secondary: { name: '', email: '', phone: '', address: '' },
                notes: '',
                paymentStatus: 'pay_later',
                paymentMethod: 'card',
                paymentAmount: '',
                emiratesFileName: '',
                petDocumentName: '',
                petPhoto: '',
                vaccinations: [],
                serviceRows: [],
                addOns: [],
                products: [],
                formMessage: '',
                phoneLookupState: 'idle',
                phoneLookupMessage: '',
                phoneLookupSequence: 0,
                expandedVaccinationPetId: null,
                petEditorOpen: false,
                savingPet: false,
                removingPetId: null,
                petActionError: '',
                addPetModalOpen: false,
                addingPet: false,
                addPetError: '',
                newPet: { name: '', species: '', breed: '', gender: '', dob: '', weight_kg: '', size_category: '', vaccination_status: 'unknown', neutered_spayed: false, special_instructions: '', vaccine_name: '', vaccine_given: '', vaccine_expiry: '' },
                submitting: false,
                keyCounter: 1,

                init() {
                    this.customers = this.customers.map(customer => ({
                        ...customer,
                        pets: (customer.pets || []).map(pet => this.normalisePet(pet)),
                    }));
                    if (!this.initialCustomerId) return;
                    const customer = this.customers.find(item => Number(item.id) === Number(this.initialCustomerId));
                    if (!customer) return;
                    this.selectCustomer(customer);

                    const preferredPet = this.petFor(this.initialPetId);
                    if (preferredPet) this.selectPetForEditing(preferredPet, false);

                    if (this.rebookData?.items?.length) {
                        this.notes = this.rebookData.notes || '';
                        this.serviceRows = this.rebookData.items.map(row => ({
                            key: this.nextKey(),
                            pet_id: row.pet_id,
                            size: this.petFor(row.pet_id)?.size_category || '',
                            service_id: row.service_id,
                            service_package_id: row.service_package_id || '',
                            staff_id: row.staff_id || '',
                            resource_id: row.resource_id || '',
                            appointment_at: row.appointment_at || '',
                            quantity: row.quantity || 1,
                            cost: Number(row.cost || 0),
                            discount: Number(row.discount || 0),
                            available_slots: [], loading_slots: false, slot_message: '',
                        }));
                    }
                },

                get filteredCustomers() {
                    const needle = this.clientSearch.trim().toLowerCase();
                    if (!needle) return this.customers.slice(0, 8);
                    return this.customers.filter(customer => [customer.name, customer.phone, customer.email, customer.customer_number]
                        .filter(Boolean).some(value => String(value).toLowerCase().includes(needle))).slice(0, 8);
                },

                selectCustomer(customer) {
                    const normalisedCustomer = {
                        ...customer,
                        pets: (customer.pets || []).map(pet => this.normalisePet(pet)),
                    };
                    this.selectedCustomer = JSON.parse(JSON.stringify(normalisedCustomer));
                    this.selectedCustomerId = customer.id;
                    this.clientSearch = customer.name;
                    this.searchOpen = false;
                    this.owner = {
                        name: customer.name || '', email: customer.email || '', phone: customer.phone || '', address: customer.address || ''
                    };
                    this.customerPets = JSON.parse(JSON.stringify(normalisedCustomer.pets || []));
                    this.selectedPet = this.customerPets.length ? this.customerPets[0] : null;
                    this.petPhoto = this.petDisplayPhoto(this.selectedPet);
                    this.loadVaccinations();
                    this.expandedVaccinationPetId = null;
                    this.petEditorOpen = false;
                    this.petActionError = '';
                    this.seedRows();
                },

                selectPetForEditing(pet, openEditor = true) {
                    const selected = this.petFor(pet?.id) || pet;
                    if (!selected) return;
                    this.selectedPet = selected;
                    this.petPhoto = this.petDisplayPhoto(selected);
                    this.petDocumentName = '';
                    this.petActionError = '';
                    this.loadVaccinations();
                    this.petEditorOpen = openEditor;
                    if (openEditor) {
                        this.$nextTick(() => document.getElementById('pet-editor')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
                    }
                },

                usePetForBooking(pet) {
                    this.selectPetForEditing(pet, false);
                    const existingRow = this.serviceRows.find(row => Number(row.pet_id) === Number(pet.id));
                    if (!existingRow) {
                        const emptyRow = this.serviceRows.find(row => !row.service_id && !row.appointment_at);
                        if (emptyRow) {
                            emptyRow.pet_id = pet.id;
                            emptyRow.size = pet.size_category || '';
                        } else {
                            this.addServiceRow(pet.id);
                        }
                    }
                    this.formMessage = `${pet.name} is selected for this booking.`;
                },

                petIsVaccinated(pet) {
                    if (!pet) return false;
                    const status = String(pet.vaccination_status || '').toLowerCase();
                    if (['valid', 'up_to_date', 'due_soon', 'vaccinated'].includes(status)) return true;
                    const today = new Date().toISOString().slice(0, 10);
                    return (pet.vaccinations || []).some(record => record.expiry && record.expiry >= today);
                },

                togglePetVaccinations(pet) {
                    if (!this.petIsVaccinated(pet)) return;
                    this.expandedVaccinationPetId = Number(this.expandedVaccinationPetId) === Number(pet.id) ? null : pet.id;
                },

                async openAddPetModal() {
                    if (!this.selectedCustomerId) {
                        const customer = await this.saveOwner();
                        if (!customer) return;
                    }
                    this.newPet = this.blankPet();
                    this.addPetError = '';
                    this.addPetModalOpen = true;
                },

                closeAddPetModal() {
                    if (this.addingPet) return;
                    this.addPetModalOpen = false;
                    this.addPetError = '';
                },

                async createPet() {
                    if (!this.selectedCustomerId || this.addingPet) return;
                    this.addingPet = true;
                    this.addPetError = '';
                    try {
                        const formData = this.petFormData(this.newPet);
                        const photo = this.$refs.newPetPhotoInput?.files?.[0];
                        if (photo) formData.append('photo', photo);
                        Array.from(this.$refs.newPetDocumentsInput?.files || []).forEach(file => formData.append('documents[]', file));
                        const response = await fetch(`${this.petCreateBaseUrl}/${this.selectedCustomerId}/pets`, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            credentials: 'same-origin',
                            body: formData,
                        });
                        const result = await response.json().catch(() => ({}));
                        if (!response.ok) {
                            const validationMessage = Object.values(result.errors || {}).flat()[0];
                            throw new Error(validationMessage || result.message || 'Pet could not be added.');
                        }

                        const pet = this.normalisePet(result.pet);
                        this.customerPets.push(pet);
                        this.syncCustomerPetCache();
                        this.addPetModalOpen = false;
                        this.newPet = this.blankPet();
                        if (this.$refs.newPetPhotoInput) this.$refs.newPetPhotoInput.value = '';
                        if (this.$refs.newPetDocumentsInput) this.$refs.newPetDocumentsInput.value = '';
                        this.usePetForBooking(pet);
                        this.formMessage = result.message || `${pet.name} was added successfully.`;
                    } catch (error) {
                        this.addPetError = error.message || 'Pet could not be added.';
                    } finally {
                        this.addingPet = false;
                    }
                },

                async updatePet() {
                    if (!this.selectedCustomerId || !this.selectedPet?.id || this.savingPet) return;
                    this.savingPet = true;
                    this.petActionError = '';
                    try {
                        const formData = this.petFormData(this.selectedPet);
                        formData.append('_method', 'PATCH');
                        const photo = this.$refs.petPhotoInput?.files?.[0];
                        if (photo) formData.append('photo', photo);
                        Array.from(this.$refs.petDocumentsInput?.files || []).forEach(file => formData.append('documents[]', file));
                        const response = await fetch(`${this.petCreateBaseUrl}/${this.selectedCustomerId}/pets/${this.selectedPet.id}`, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            credentials: 'same-origin',
                            body: formData,
                        });
                        const result = await response.json().catch(() => ({}));
                        if (!response.ok) {
                            const validationMessage = Object.values(result.errors || {}).flat()[0];
                            throw new Error(validationMessage || result.message || 'Pet could not be updated.');
                        }

                        const updatedPet = this.normalisePet(result.pet);
                        const petIndex = this.customerPets.findIndex(pet => Number(pet.id) === Number(updatedPet.id));
                        if (petIndex >= 0) this.customerPets.splice(petIndex, 1, updatedPet);
                        this.selectedPet = updatedPet;
                        this.petPhoto = this.petDisplayPhoto(updatedPet);
                        if (this.$refs.petPhotoInput) this.$refs.petPhotoInput.value = '';
                        if (this.$refs.petDocumentsInput) this.$refs.petDocumentsInput.value = '';
                        this.petDocumentName = '';
                        this.loadVaccinations();
                        this.syncCustomerPetCache();
                        this.petEditorOpen = false;
                        this.formMessage = result.message || `${result.pet.name} was updated successfully.`;
                        this.$nextTick(() => document.getElementById('owner-pets')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
                    } catch (error) {
                        this.petActionError = error.message || 'Pet could not be updated.';
                    } finally {
                        this.savingPet = false;
                    }
                },

                async removePet(pet) {
                    if (!this.selectedCustomerId || !pet?.id || this.removingPetId) return;
                    if (!window.confirm(`Remove ${pet.name} from this owner's active pet list? Previous appointment history will be kept.`)) return;

                    this.removingPetId = pet.id;
                    this.petActionError = '';
                    try {
                        const response = await fetch(`${this.petCreateBaseUrl}/${this.selectedCustomerId}/pets/${pet.id}`, {
                            method: 'DELETE',
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            credentials: 'same-origin',
                        });
                        const result = await response.json().catch(() => ({}));
                        if (!response.ok) throw new Error(result.message || 'Pet could not be removed.');

                        const removedId = Number(pet.id);
                        this.customerPets = this.customerPets.filter(item => Number(item.id) !== removedId);
                        this.serviceRows = this.serviceRows.filter(row => Number(row.pet_id) !== removedId);
                        this.addOns = this.addOns.filter(row => Number(row.pet_id) !== removedId);
                        this.products = this.products.filter(row => Number(row.pet_id) !== removedId);
                        this.expandedVaccinationPetId = Number(this.expandedVaccinationPetId) === removedId ? null : this.expandedVaccinationPetId;

                        if (Number(this.selectedPet?.id) === removedId) {
                            this.selectedPet = this.customerPets[0] || null;
                            this.petPhoto = this.petDisplayPhoto(this.selectedPet);
                            this.loadVaccinations();
                            this.petEditorOpen = false;
                        }
                        if (this.customerPets.length && !this.serviceRows.length) this.addServiceRow(this.selectedPet?.id || this.customerPets[0].id);
                        this.syncCustomerPetCache();
                        this.formMessage = result.message || `${pet.name} was removed.`;
                    } catch (error) {
                        this.petActionError = error.message || 'Pet could not be removed.';
                    } finally {
                        this.removingPetId = null;
                    }
                },

                petFormPayload(pet) {
                    return {
                        name: pet.name || '',
                        species: pet.species || '',
                        breed: pet.breed || null,
                        gender: pet.gender || null,
                        dob: pet.dob || null,
                        weight_kg: pet.weight_kg === '' ? null : pet.weight_kg,
                        size_category: pet.size_category || null,
                        vaccination_status: pet.vaccination_status || 'unknown',
                        neutered_spayed: Boolean(pet.neutered_spayed),
                        special_instructions: pet.special_instructions || null,
                    };
                },

                petFormData(pet) {
                    const formData = new FormData();
                    Object.entries(this.petFormPayload(pet)).forEach(([key, value]) => {
                        if (value === null || value === undefined) value = '';
                        if (typeof value === 'boolean') value = value ? '1' : '0';
                        formData.append(key, value);
                    });
                    ['vaccine_name', 'vaccine_given', 'vaccine_expiry'].forEach(key => {
                        if (pet[key]) formData.append(key, pet[key]);
                    });
                    return formData;
                },

                syncCustomerPetCache() {
                    const pets = JSON.parse(JSON.stringify(this.customerPets));
                    if (this.selectedCustomer) this.selectedCustomer.pets = pets;
                    const customerIndex = this.customers.findIndex(customer => Number(customer.id) === Number(this.selectedCustomerId));
                    if (customerIndex >= 0) this.customers[customerIndex].pets = pets;
                },

                blankPet() {
                    return { name: '', species: '', breed: '', gender: '', dob: '', weight_kg: '', size_category: '', vaccination_status: 'unknown', neutered_spayed: false, special_instructions: '', vaccine_name: '', vaccine_given: '', vaccine_expiry: '' };
                },

                async lookupCustomerByPhone() {
                    const enteredPhone = String(this.owner.phone || '').trim();
                    const normalizedPhone = this.normalizePhone(enteredPhone);
                    const selectedPhone = this.normalizePhone(this.selectedCustomer?.phone || '');

                    if (this.selectedCustomerId && normalizedPhone !== selectedPhone) {
                        this.clearSelectedCustomer(enteredPhone);
                    }

                    if (normalizedPhone.length < 9) {
                        this.phoneLookupSequence++;
                        this.phoneLookupState = 'idle';
                        this.phoneLookupMessage = '';
                        return;
                    }

                    const requestNumber = ++this.phoneLookupSequence;
                    this.phoneLookupState = 'searching';
                    this.phoneLookupMessage = 'Checking existing customer records...';

                    try {
                        const response = await fetch(`${this.phoneLookupUrl}?phone=${encodeURIComponent(enteredPhone)}`, {
                            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                            credentials: 'same-origin',
                        });
                        if (!response.ok) throw new Error('Lookup failed');
                        const result = await response.json();
                        if (requestNumber !== this.phoneLookupSequence) return;

                        if (result.found && result.customer) {
                            const customer = { ...result.customer, pets: result.pets || [] };
                            const existingIndex = this.customers.findIndex(item => Number(item.id) === Number(customer.id));
                            if (existingIndex >= 0) this.customers.splice(existingIndex, 1, customer);
                            else this.customers.push(customer);
                            this.selectCustomer(customer);
                            this.ownerEditing = true;
                            this.phoneLookupState = 'found';
                            this.phoneLookupMessage = customer.pets.length
                                ? `Existing customer found. Loaded ${customer.pets.length} pet${customer.pets.length === 1 ? '' : 's'}.`
                                : 'Existing customer found. No registered pets are available.';
                            return;
                        }

                        this.clearSelectedCustomer(enteredPhone, true);
                        this.phoneLookupState = 'not_found';
                        this.phoneLookupMessage = 'No existing customer found for this phone number.';
                    } catch (error) {
                        if (requestNumber !== this.phoneLookupSequence) return;
                        this.phoneLookupState = 'error';
                        this.phoneLookupMessage = 'Could not check this phone number. Please try again.';
                    }
                },

                clearSelectedCustomer(phone = '', preserveOwnerDetails = false) {
                    const currentOwner = { ...this.owner };
                    this.selectedCustomerId = null;
                    this.selectedCustomer = null;
                    this.customerPets = [];
                    this.selectedPet = null;
                    this.clientSearch = '';
                    this.searchOpen = false;
                    this.owner = preserveOwnerDetails
                        ? { ...currentOwner, phone }
                        : { name: '', email: '', phone, address: '' };
                    this.secondary = { name: '', email: '', phone: '', address: '' };
                    this.petPhoto = '';
                    this.vaccinations = [];
                    this.serviceRows = [];
                    this.addOns = [];
                    this.products = [];
                    this.expandedVaccinationPetId = null;
                    this.petEditorOpen = false;
                    this.savingPet = false;
                    this.removingPetId = null;
                    this.petActionError = '';
                    this.addPetModalOpen = false;
                },

                normalizePhone(value) {
                    let digits = String(value || '').replace(/\D/g, '');
                    if (digits.startsWith('05')) digits = `971${digits.slice(1)}`;
                    return digits;
                },

                async saveOwner() {
                    if (this.savingOwner) return this.selectedCustomer;
                    const normalizedPhone = this.normalizePhone(this.owner.phone);
                    if (!String(this.owner.name || '').trim() || normalizedPhone.length < 9) {
                        this.formMessage = 'Enter the owner full name and a complete mobile number first.';
                        this.ownerEditing = true;
                        return null;
                    }

                    this.savingOwner = true;
                    this.phoneLookupSequence++;
                    this.formMessage = '';
                    const previousRows = JSON.parse(JSON.stringify(this.serviceRows));
                    const previousAddOns = JSON.parse(JSON.stringify(this.addOns));
                    const previousProducts = JSON.parse(JSON.stringify(this.products));
                    const previousPetId = this.selectedPet?.id || null;
                    const existingCustomerId = this.selectedCustomerId;

                    try {
                        const formData = new FormData();
                        if (this.selectedCustomerId) formData.append('customer_id', this.selectedCustomerId);
                        formData.append('name', String(this.owner.name || '').trim());
                        formData.append('email', String(this.owner.email || '').trim());
                        formData.append('phone', String(this.owner.phone || '').trim());
                        formData.append('address', String(this.owner.address || '').trim());
                        const emiratesId = this.$refs.emiratesIdInput?.files?.[0];
                        if (emiratesId) formData.append('emirates_id', emiratesId);

                        const response = await fetch(this.customerSaveUrl, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            credentials: 'same-origin',
                            body: formData,
                        });
                        const result = await response.json().catch(() => ({}));
                        if (!response.ok) {
                            const validationMessage = Object.values(result.errors || {}).flat()[0];
                            throw new Error(validationMessage || result.message || 'Owner could not be saved.');
                        }

                        const customer = {
                            ...result.customer,
                            pets: (result.customer?.pets || []).map(pet => this.normalisePet(pet)),
                        };
                        const customerIndex = this.customers.findIndex(item => Number(item.id) === Number(customer.id));
                        if (customerIndex >= 0) this.customers.splice(customerIndex, 1, customer);
                        else this.customers.push(customer);
                        this.selectCustomer(customer);

                        if (Number(existingCustomerId) === Number(customer.id) && previousRows.length) {
                            this.serviceRows = previousRows;
                            this.addOns = previousAddOns;
                            this.products = previousProducts;
                            const previousPet = this.petFor(previousPetId);
                            if (previousPet) this.selectPetForEditing(previousPet, false);
                        }

                        this.ownerEditing = false;
                        this.phoneLookupState = 'found';
                        this.phoneLookupMessage = result.created
                            ? 'New owner saved. Add the owner’s pets below.'
                            : (result.existing ? 'Existing owner found. Their pets are loaded below.' : 'Owner details updated.');
                        this.formMessage = result.message || 'Owner saved successfully.';
                        this.emiratesFileName = '';
                        if (this.$refs.emiratesIdInput) this.$refs.emiratesIdInput.value = '';
                        return customer;
                    } catch (error) {
                        this.formMessage = error.message || 'Owner could not be saved.';
                        this.ownerEditing = true;
                        return null;
                    } finally {
                        this.savingOwner = false;
                    }
                },

                normalisePet(pet) {
                    if (!pet) return null;
                    const sizeMap = { Small: 'S', Medium: 'M', Large: 'L', Giant: 'XL' };
                    return {
                        ...pet,
                        species: pet.species === 'Small mammal' ? 'Small Animal' : pet.species,
                        size_category: sizeMap[pet.size_category] || pet.size_category || '',
                        vaccinations: pet.vaccinations || [],
                    };
                },

                petDisplayPhoto(pet) {
                    return pet?.photo_url || this.defaultPetPhoto;
                },

                previewPetPhoto(event) {
                    const file = event.target.files?.[0];
                    if (!file) return;
                    this.petPhoto = URL.createObjectURL(file);
                },

                loadVaccinations() {
                    const records = this.selectedPet?.vaccinations || [];
                    this.vaccinations = records.map(item => {
                        if (!item.key) item.key = this.nextKey();
                        return item;
                    });
                    if (this.selectedPet) this.selectedPet.vaccinations = this.vaccinations;
                },

                seedRows() {
                    const pet = this.selectedPet;
                    if (!pet) {
                        this.serviceRows = [];
                        this.addOns = [];
                        this.products = [];
                        return;
                    }
                    this.serviceRows = [{
                        key: this.nextKey(), pet_id: pet.id, size: pet.size_category || '', service_id: '',
                        service_package_id: '', staff_id: '', resource_id: '', appointment_at: this.initialScheduleAt || '',
                        quantity: 1, cost: 0, discount: 0, available_slots: [], loading_slots: false, slot_message: '',
                    }];
                    this.addOns = [];
                    this.products = [];
                },

                addVaccination() {
                    this.vaccinations.push({ id: null, key: this.nextKey(), name: '', given: '', expiry: '' });
                },

                addServiceRow(petId = null) {
                    const pet = this.petFor(petId || this.customerPets[0]?.id);
                    if (!pet) {
                        this.formMessage = 'Select an existing customer before adding a service.';
                        return;
                    }
                    this.serviceRows.push({
                        key: this.nextKey(), pet_id: pet.id, size: pet.size_category || '', service_id: '',
                        service_package_id: '', staff_id: '', resource_id: '',
                        appointment_at: this.initialScheduleAt || '', quantity: 1, cost: 0, discount: 0, available_slots: [], loading_slots: false, slot_message: '',
                    });
                },

                removeServiceRow(index) {
                    if (this.serviceRows.length > 1) this.serviceRows.splice(index, 1);
                },

                addAddonRow() {
                    const pet = this.customerPets[0];
                    const addon = this.addonCatalog[0];
                    if (!pet || !addon) return;
                    this.addOns.push({ key: this.nextKey(), pet_id: pet.id, name: addon.name, quantity: 1, price: Number(addon.price) });
                },

                addProduct() {
                    if (!this.productCatalog.length) return;
                    const product = this.productCatalog[0];
                    this.products.push({ key: this.nextKey(), pet_id: this.primaryRow()?.pet_id || '', category: product.category, name: product.name, quantity: 1, price: Number(product.price), openline: false });
                },

                addOpenLineProduct() {
                    this.products.push({ key: this.nextKey(), pet_id: this.primaryRow()?.pet_id || '', category: '', name: '', quantity: 1, price: 0, openline: true });
                },

                syncServiceRow(row) {
                    const service = this.services.find(item => Number(item.id) === Number(row.service_id));
                    row.service_package_id = '';
                    row.cost = Number(service?.base_price || 0);
                    if (row.staff_id && !this.staffFor(row.service_id).some(staff => Number(staff.id) === Number(row.staff_id))) {
                        row.staff_id = '';
                    }
                    row.available_slots = [];
                    row.slot_message = '';
                },

                syncPackageRow(row) {
                    const selectedPackage = this.packagesFor(row.service_id)
                        .find(item => Number(item.id) === Number(row.service_package_id));
                    const service = this.services.find(item => Number(item.id) === Number(row.service_id));
                    row.cost = Number(selectedPackage?.price ?? service?.base_price ?? 0);
                },

                packagesFor(serviceId) {
                    return this.services.find(item => Number(item.id) === Number(serviceId))?.packages || [];
                },

                staffFor(serviceId) {
                    if (!serviceId) return this.staffMembers;
                    return this.staffMembers.filter(staff => !(staff.service_ids || []).length
                        || staff.service_ids.some(id => Number(id) === Number(serviceId)));
                },

                async loadSlots(row) {
                    row.available_slots = [];
                    if (!row.service_id || !row.staff_id) {
                        row.slot_message = 'Choose a service and team member to check live availability.';
                        return;
                    }
                    let date = String(row.appointment_at || '').split('T')[0];
                    if (!date) {
                        const tomorrow = new Date();
                        tomorrow.setDate(tomorrow.getDate() + 1);
                        date = `${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(2, '0')}-${String(tomorrow.getDate()).padStart(2, '0')}`;
                    }

                    row.loading_slots = true;
                    row.slot_message = 'Checking live availability...';
                    try {
                        const params = new URLSearchParams({ employee_id: row.staff_id, service_id: row.service_id, date });
                        if (row.service_package_id) params.set('service_package_id', row.service_package_id);
                        const response = await fetch(`${this.slotLookupUrl}?${params.toString()}`, {
                            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                            credentials: 'same-origin',
                        });
                        const result = await response.json().catch(() => ({}));
                        if (!response.ok) {
                            const validationMessage = Object.values(result.errors || {}).flat()[0];
                            throw new Error(validationMessage || result.message || 'Availability could not be loaded.');
                        }
                        row.available_slots = (result.slots || []).filter(slot => slot.available);
                        row.slot_message = row.available_slots.length
                            ? `${row.available_slots.length} available time${row.available_slots.length === 1 ? '' : 's'} on ${date}.`
                            : `No available times on ${date}. Try another date or team member.`;
                    } catch (error) {
                        row.slot_message = error.message || 'Availability could not be loaded.';
                    } finally {
                        row.loading_slots = false;
                    }
                },

                chooseSlot(row, startTime) {
                    if (!startTime) return;
                    let date = String(row.appointment_at || '').split('T')[0];
                    if (!date) return;
                    row.appointment_at = `${date}T${startTime}`;
                    row.slot_message = `Selected ${startTime}.`;
                },

                syncSelectedPetFromRow(row) {
                    const pet = this.petFor(row.pet_id);
                    if (!pet) return;
                    row.size = pet.size_category || row.size || 'M';
                    if (this.serviceRows.indexOf(row) === 0) {
                        this.selectPetForEditing(pet, false);
                    }
                },

                syncAddonRow(row) {
                    const addon = this.addonCatalog.find(item => item.name === row.name);
                    row.price = Number(addon?.price || 0);
                },

                syncProductRow(row) {
                    const product = this.productCatalog.find(item => item.name === row.name);
                    if (!product) return;
                    row.category = product.category;
                    row.name = product.name;
                    row.price = Number(product.price);
                },

                syncPrimarySchedule() {},

                petFor(id) {
                    return this.customerPets.find(pet => Number(pet.id) === Number(id));
                },

                primaryRow() {
                    return this.serviceRows[0] || null;
                },

                primaryService() {
                    return this.services.find(service => Number(service.id) === Number(this.primaryRow()?.service_id)) || null;
                },

                get primarySchedule() {
                    const value = this.primaryRow()?.appointment_at || '';
                    if (!value.includes('T')) return { date: '', start: '', end: '' };
                    const [date, startValue] = value.split('T');
                    const start = startValue.slice(0, 5);
                    const selectedPackage = this.packagesFor(this.primaryRow()?.service_id)
                        .find(item => Number(item.id) === Number(this.primaryRow()?.service_package_id));
                    const duration = Number(selectedPackage?.duration_minutes || this.primaryService()?.duration_minutes || 60)
                        + Number(this.primaryService()?.buffer_minutes || 0);
                    const [hours, minutes] = start.split(':').map(Number);
                    const endDate = new Date(2000, 0, 1, hours, minutes + duration);
                    const end = `${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
                    return { date, start, end };
                },

                get minimumAppointmentDateTime() {
                    const date = new Date();
                    date.setMinutes(date.getMinutes() + 5);
                    date.setSeconds(0, 0);
                    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}T${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
                },

                get completeVaccinations() {
                    return this.vaccinations.filter(row => row.name && row.given && row.expiry);
                },

                get submittedProducts() {
                    return this.products.filter(row => row.category && row.name && Number(row.quantity) > 0);
                },

                get serviceSubtotal() {
                    return this.serviceRows.reduce((total, row) => total + (Number(row.cost || 0) * Number(row.quantity || 0)), 0);
                },

                get addonSubtotal() {
                    return this.addOns.reduce((total, row) => total + (Number(row.price || 0) * Number(row.quantity || 0)), 0);
                },

                get productSubtotal() {
                    return this.submittedProducts.reduce((total, row) => total + (Number(row.price || 0) * Number(row.quantity || 0)), 0);
                },

                get subtotal() {
                    return this.serviceSubtotal + this.addonSubtotal + this.productSubtotal;
                },

                get totalDiscount() {
                    return this.serviceRows.reduce((total, row) => {
                        const rowGross = Math.max(0, Number(row.cost || 0) * Number(row.quantity || 0));
                        return total + Math.min(rowGross, Math.max(0, Number(row.discount || 0)));
                    }, 0);
                },

                get taxAmount() {
                    return Math.max(0, this.subtotal - this.totalDiscount) * (Number(this.vatRate || 0) / 100);
                },

                get grandTotal() {
                    return Math.max(0, this.subtotal - this.totalDiscount) + this.taxAmount;
                },

                get bookingDetailsJson() {
                    return JSON.stringify({
                        source: 'pos-reference-appointment-builder',
                        owner_snapshot: this.owner,
                        secondary_contact: this.secondary,
                        pet_snapshot: this.selectedPet,
                        vaccinations: this.completeVaccinations.map(({ key, ...row }) => row),
                        service_rows: this.serviceRows.map(({ key, ...row }) => row),
                        add_ons: this.addOns.map(({ key, ...row }) => row),
                        products: this.submittedProducts.map(({ key, ...row }) => row),
                        totals: { subtotal: this.subtotal, discount: this.totalDiscount, tax: this.taxAmount, total: this.grandTotal },
                    });
                },

                appointmentValidationMessage() {
                    this.formMessage = '';
                    const incompleteService = this.serviceRows.some(row => !row.pet_id || !row.service_id || !row.appointment_at);
                    const pastService = this.serviceRows.some(row => row.appointment_at && row.appointment_at < this.minimumAppointmentDateTime);
                    const incompleteVaccination = this.vaccinations.some(row => (row.name || row.given || row.expiry) && !(row.name && row.given && row.expiry));
                    const incompleteProduct = this.products.some(row => (row.category || row.name || Number(row.price) > 0) && !(row.category && row.name && Number(row.quantity) > 0));
                    if (!this.selectedCustomerId) return 'Enter the owner name and mobile number.';
                    if (!this.serviceRows.length || !this.primaryRow()?.pet_id) return 'Choose a pet in Service Details.';
                    if (!this.primaryRow()?.service_id) return 'Choose a service for the selected pet.';
                    if (!this.primarySchedule.date || incompleteService) return 'Choose an appointment time for every service row.';
                    if (pastService) return 'Choose a future appointment time for every service.';
                    if (incompleteVaccination) return 'Complete all vaccine fields or remove the incomplete vaccine row.';
                    if (incompleteProduct) return 'Complete every product name, category, quantity and price, or remove the incomplete row.';
                    if (this.paymentStatus === 'partial' && (!(Number(this.paymentAmount) > 0) || Number(this.paymentAmount) >= this.grandTotal)) {
                        return 'Enter a deposit greater than zero and less than the appointment total.';
                    }
                    return '';
                },

                async submitAppointment(event) {
                    if (this.submitting || this.savingOwner) return;

                    const customer = await this.saveOwner();
                    if (!customer) return;

                    const bookingPet = this.petFor(this.primaryRow()?.pet_id);
                    if (bookingPet) this.selectPetForEditing(bookingPet, false);

                    const validationMessage = this.appointmentValidationMessage();
                    if (validationMessage) {
                        this.formMessage = validationMessage;
                        return;
                    }

                    const form = event.currentTarget || this.$refs.appointmentForm;
                    await this.$nextTick();
                    if (!form.checkValidity()) {
                        form.reportValidity();
                        return;
                    }

                    this.submitting = true;
                    form.submit();
                },

                resetBuilder() {
                    this.clientSearch = '';
                    this.formMessage = '';
                    this.selectedCustomerId = null;
                    this.selectedCustomer = null;
                    this.customerPets = [];
                    this.selectedPet = null;
                    this.owner = { name: '', email: '', phone: '', address: '' };
                    this.secondary = { name: '', email: '', phone: '', address: '' };
                    this.notes = '';
                    this.paymentStatus = 'pay_later';
                    this.paymentMethod = 'card';
                    this.paymentAmount = '';
                    this.ownerEditing = true;
                    this.emiratesFileName = '';
                    this.petDocumentName = '';
                    this.petPhoto = '';
                    this.vaccinations = [];
                    this.serviceRows = [];
                    this.addOns = [];
                    this.products = [];
                    this.phoneLookupState = 'idle';
                    this.phoneLookupMessage = '';
                    this.phoneLookupSequence++;
                    this.expandedVaccinationPetId = null;
                    this.petEditorOpen = false;
                    this.savingPet = false;
                    this.removingPetId = null;
                    this.petActionError = '';
                    this.addPetModalOpen = false;
                    this.addingPet = false;
                    this.addPetError = '';
                    this.submitting = false;
                    this.newPet = this.blankPet();
                },

                money(value) {
                    return Number(value || 0).toFixed(2);
                },

                nextKey() {
                    return this.keyCounter++;
                },

            };
        }
    </script>
</x-layouts.company-admin>