{{-- Vehicle inquiry / test-drive form. Expects: $vehicles (id, title, year), optional $selected (Vehicle) --}}
@php
    $selectedId = old('vehicle_id', isset($selected) ? $selected->id : null);
    $initialVehicle = old('vehicle_interest') ? 'other' : ($selectedId ? (string) $selectedId : '');
    $initialMode = old('type', request('mode') === 'test-drive' ? 'test_drive' : 'vehicle_inquiry');
@endphp
@if (session('inquiry_sent') && in_array(session('inquiry_sent'), ['vehicle_inquiry', 'test_drive'], true))
    <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-6 text-emerald-900" role="status">
        <div class="flex items-center gap-3">
            <x-icon name="check-circle" class="size-8 text-emerald-600" />
            <h3 class="font-display text-xl font-semibold">Request received</h3>
        </div>
        <p class="mt-2 text-sm">{{ session('status') }}</p>
    </div>
@else
    <form method="POST" action="{{ route('inquiries.store') }}" class="space-y-4"
          x-data="{ mode: @js($initialMode), vehicle: @js($initialVehicle), sending: false }" @submit="sending = true">
        @csrf
        <input type="hidden" name="type" :value="mode">
        <input type="hidden" name="anchor" value="inquiry-form">
        <div class="hidden" aria-hidden="true"><input type="text" name="website" tabindex="-1" autocomplete="off"></div>

        <div class="inline-flex rounded-lg border border-gray-200 bg-gray-100 p-1 text-sm font-medium" role="tablist">
            <button type="button" @click="mode = 'vehicle_inquiry'" :class="mode === 'vehicle_inquiry' ? 'bg-white text-navy-900 shadow-sm' : 'text-gray-500'" class="rounded-md px-4 py-1.5">Request Info</button>
            <button type="button" @click="mode = 'test_drive'" :class="mode === 'test_drive' ? 'bg-white text-navy-900 shadow-sm' : 'text-gray-500'" class="rounded-md px-4 py-1.5">Schedule Test Drive</button>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
            <x-form.input name="name" label="Full Name" placeholder="Full Name" required autocomplete="name" :value="auth()->user()?->name" />
            <x-form.input name="phone" label="Phone Number" type="tel" placeholder="Phone Number" required autocomplete="tel" :value="auth()->user()?->phone" />
            <x-form.input name="email" label="Email Address" type="email" placeholder="Email Address" required autocomplete="email" :value="auth()->user()?->email" />
            <div>
                <label for="vehicle_select" class="form-label">Vehicle of Interest</label>
                <select id="vehicle_select" x-model="vehicle" :name="vehicle && vehicle !== 'other' ? 'vehicle_id' : ''" class="form-input">
                    <option value="">Select or Enter Model</option>
                    @foreach ($vehicles as $option)
                        <option value="{{ $option->id }}" @selected((string) $selectedId === (string) $option->id)>{{ $option->year }} {{ $option->title }}</option>
                    @endforeach
                    <option value="other">Other — I'll enter the model</option>
                </select>
                @error('vehicle_id')<p class="form-error">{{ $message }}</p>@enderror
            </div>
        </div>

        <div x-cloak x-show="vehicle === 'other' || vehicle === ''" x-collapse>
            <x-form.input name="vehicle_interest" label="Make / model you're looking for" placeholder="e.g. 2022 Porsche Cayenne" />
        </div>

        <div x-cloak x-show="mode === 'test_drive'" x-collapse class="grid gap-4 sm:grid-cols-2">
            <x-form.input name="preferred_date" label="Preferred Date" type="date" :min="now()->toDateString()" />
            <x-form.select name="preferred_time" label="Preferred Time" placeholder="Any time" :options="['Morning' => 'Morning (9am – 12pm)', 'Afternoon' => 'Afternoon (12pm – 4pm)', 'Evening' => 'Evening (4pm – 6pm)']" />
        </div>

        <x-form.textarea name="message" label="Message (Optional)" rows="3" placeholder="Tell us what you're looking for..." />

        <div class="flex flex-wrap gap-x-6 gap-y-2">
            <x-form.checkbox name="financing_interest" label="I'm interested in financing" />
            <x-form.checkbox name="trade_in" label="I have a trade-in" />
        </div>

        <button type="submit" class="btn-gold w-full py-3.5!" :disabled="sending">
            <span x-text="sending ? 'Sending…' : (mode === 'test_drive' ? 'Request Test Drive' : 'Submit Request')">Submit Request</span>
            <x-icon name="arrow-right" class="size-4" />
        </button>
        <p class="text-center text-xs text-gray-500">By submitting, you agree to be contacted about your inquiry.</p>
    </form>
@endif