@props(['offers', 'source' => 'contact', 'selected' => null])
@php
    $showPrices = $showPrices ?? false;
    $fmt = function ($offer) use ($showPrices) {
        if ($showPrices && $offer->price_from) {
            $unit = $offer->price_unit ? ' '.$offer->price_unit : '';
            $to = $offer->price_to ? '–'.number_format($offer->price_to) : '';
            return 'PKR '.number_format($offer->price_from).$to.$unit;
        }
        return 'Starting range on request';
    };
    $book = app(\App\Services\BookingCalendar::class);
    $oldDate = old('appointment_date', '');
@endphp
<form method="post" action="{{ route('contact.store') }}" class="appt" x-data="bookScan(@js(['url' => route('scan.slots'), 'month' => $oldDate ? substr($oldDate, 0, 7) : now($book->timezone())->format('Y-m'), 'min' => now($book->timezone())->format('Y-m'), 'date' => $oldDate, 'time' => old('appointment_time', '')]))" x-cloak>
    @csrf
    <input type="hidden" name="source" value="{{ $source ?? 'contact' }}">
    <input type="hidden" name="appointment_date" :value="cursor">
    <input type="hidden" name="appointment_time" :value="time">
    <p class="hidden" aria-hidden="true"><label>Company website <input type="text" name="company_website" tabindex="-1" autocomplete="off"></label></p>
    <div class="appt-top">
        <p class="kicker">Book a time</p>
        <p class="mt-2 text-sm leading-6 text-muted">Choose a day, then a time. The confirmation email includes a button to add it to Google Calendar. Times are <span x-text="zone || @js($book->timezone())"></span>.</p>
    </div>
    @if(isset($errors) && $errors->any())
        <div class="mx-5 mt-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800" role="alert">{{ $errors->first('appointment_time') ?: 'Check the fields below and try again.' }}</div>
    @endif
    <div class="appt-cal">
        <div class="appt-nav">
            <button type="button" class="appt-arrow" @click="shift(-1)" :disabled="month <= min" aria-label="Previous month"><i data-lucide="arrow-left" class="h-4 w-4"></i></button>
            <p class="appt-month" x-text="label || 'Loading'"></p>
            <button type="button" class="appt-arrow" @click="shift(1)" aria-label="Next month"><i data-lucide="arrow-right" class="h-4 w-4"></i></button>
        </div>
        <div class="appt-week" aria-hidden="true"><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span></div>
        <div class="appt-grid">
            <template x-for="(cell, index) in grid" :key="cell ? cell.key : 'e'+index">
                <button type="button" class="appt-day" :class="{ 'is-open': cell && cell.open, 'is-on': cell && cursor === cell.key }" :disabled="!cell || !cell.open" @click="cell && pick(cell.key)"><span x-text="cell ? cell.d : ''"></span></button>
            </template>
        </div>
        <p class="mt-3 text-sm text-muted" x-show="!loading && cursor === ''">Open days are marked. Closed days stay quiet.</p>
        <p class="mt-3 text-sm text-muted" x-show="loading">Loading open times.</p>
    </div>
    <div class="appt-times" x-show="cursor !== ''">
        <p class="text-sm font-semibold">Open times</p>
        <div class="mt-3 flex flex-wrap gap-2">
            <template x-for="slot in openSlots" :key="slot">
                <button type="button" class="appt-slot" :class="time === slot ? 'is-on' : ''" @click="time = slot" x-text="slot"></button>
            </template>
        </div>
        <p class="mt-3 text-sm" x-show="time !== ''"><span class="text-muted">Held for this form:</span> <span class="font-semibold" x-text="cursor + ' · ' + time"></span></p>
    </div>
    <div class="grid gap-4 px-5 pb-5 sm:grid-cols-2 sm:px-6">
        <label class="grid gap-1 text-sm">Name <input name="name" value="{{ old('name') }}" required autocomplete="name"></label>
        <label class="grid gap-1 text-sm">Role <input name="role" value="{{ old('role') }}" required placeholder="Owner, director"></label>
        <label class="grid gap-1 text-sm sm:col-span-2">School <input name="school" value="{{ old('school') }}" required></label>
        <label class="grid gap-1 text-sm">City <input name="city" value="{{ old('city', 'Lahore') }}"></label>
        <label class="grid gap-1 text-sm">Students on roll <input name="student_count" value="{{ old('student_count') }}" inputmode="numeric"></label>
        <label class="grid gap-1 text-sm">Phone / WhatsApp <input name="phone" value="{{ old('phone') }}" required autocomplete="tel"></label>
        <label class="grid gap-1 text-sm">Email <input type="email" name="email" value="{{ old('email') }}" required autocomplete="email"></label>
        <label class="grid gap-1 text-sm sm:col-span-2">Primary pain
            <select name="pain" required>
                @foreach(['Owner firefighting','Admissions that do not stick','Fee leakage','Teacher instability','No operating rhythm','Not sure yet'] as $pain)
                    <option @selected(old('pain')===$pain)>{{ $pain }}</option>
                @endforeach
            </select>
        </label>
        <label class="grid gap-1 text-sm sm:col-span-2">Preferred route
            <select name="offer_slug">
                <option value="">Help me choose</option>
                @foreach($offers as $offer)
                    <option value="{{ $offer->slug }}" @selected(old('offer_slug', $selected ?? '')===$offer->slug)>{{ $offer->title }} — {{ $fmt($offer) }}</option>
                @endforeach
            </select>
        </label>
        <label class="grid gap-1 text-sm sm:col-span-2">What should we know? <textarea name="message" rows="4">{{ old('message') }}</textarea></label>
    </div>
    <div class="px-5 pb-6 sm:px-6">
        <button data-track="scan_submit" class="btn w-full" :disabled="!cursor || !time"><i data-lucide="calendar" class="h-4 w-4"></i> Book this time <i data-lucide="arrow-right" class="h-4 w-4"></i></button>
        <p class="mt-3 text-xs leading-5 text-muted">A deliverable guarantee, not an admissions guarantee. The diagnostic fee is credited against Edspire 90 if you upgrade within 14 days.</p>
    </div>
</form>