@php
    $trip ??= null;
    $inputClass = 'block w-full rounded-card border-gray-300 text-sm shadow-sm focus:border-teal-600 focus:ring-teal-600';
    $labelClass = 'block text-sm font-medium text-gray-700';
@endphp

<div
    class="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2"
    x-data="{
        customer: '{{ old('customer', $trip?->customer?->ulid) }}',
        customerFields: @js($customerFields ?? []),
        fieldValues: @js($fieldValues ?? []),
        oldFieldValues: @js(old('fields', [])),
        activeFields() { return this.customerFields[this.customer] ?? []; },
        valueFor(f) { return this.oldFieldValues[f.ulid] ?? this.fieldValues[f.ulid] ?? ''; },
    }"
>
    <div>
        <label for="date" class="{{ $labelClass }}">{{ __('Date') }}</label>
        <input type="date" name="date" id="date" value="{{ old('date', $trip?->date?->toDateString()) }}" class="{{ $inputClass }} mt-1" required>
        <x-input-error :messages="$errors->get('date')" class="mt-2" />
    </div>

    <div>
        <label for="departure_time" class="{{ $labelClass }}">{{ __('Departure Time') }}</label>
        <input type="time" name="departure_time" id="departure_time" value="{{ old('departure_time', $trip?->departure_time ? substr($trip->departure_time, 0, 5) : null) }}" class="{{ $inputClass }} mt-1">
        <x-input-error :messages="$errors->get('departure_time')" class="mt-2" />
    </div>

    <div>
        <label for="vehicle" class="{{ $labelClass }}">{{ __('Vehicle') }}</label>
        <select name="vehicle" id="vehicle" class="{{ $inputClass }} mt-1" required>
            <option value="">{{ __('Select a vehicle…') }}</option>
            @foreach ($vehicles as $vehicleOption)
                <option value="{{ $vehicleOption->ulid }}" @selected(old('vehicle', $trip?->vehicle?->ulid) === $vehicleOption->ulid)>
                    {{ $vehicleOption->plate }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('vehicle')" class="mt-2" />
    </div>

    <div>
        <label for="driver" class="{{ $labelClass }}">{{ __('Driver') }}</label>
        <select name="driver" id="driver" class="{{ $inputClass }} mt-1" required>
            <option value="">{{ __('Select a driver…') }}</option>
            @foreach ($drivers as $driverOption)
                <option value="{{ $driverOption->ulid }}" @selected(old('driver', $trip?->driver?->ulid) === $driverOption->ulid)>
                    {{ $driverOption->name }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('driver')" class="mt-2" />
    </div>

    <div>
        <label for="customer" class="{{ $labelClass }}">{{ __('Customer') }}</label>
        <select name="customer" id="customer" x-model="customer" class="{{ $inputClass }} mt-1">
            <option value="">{{ __('— No customer —') }}</option>
            @foreach ($customers as $customerOption)
                <option value="{{ $customerOption->ulid }}" @selected(old('customer', $trip?->customer?->ulid) === $customerOption->ulid)>
                    {{ $customerOption->name }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('customer')" class="mt-2" />
    </div>

    {{-- This customer's custom fields (e.g. Gatepass Number, Bill Number) —
         swaps immediately as a different customer is picked, no reload. --}}
    <template x-for="f in activeFields()" :key="f.ulid">
        <div>
            <label :for="'field_' + f.ulid" class="{{ $labelClass }}" x-text="f.field_name"></label>
            <input
                type="text" :name="'fields[' + f.ulid + ']'" :id="'field_' + f.ulid"
                :value="valueFor(f)"
                class="{{ $inputClass }} mt-1"
            >
        </div>
    </template>

    <div>
        <label for="pickup_location" class="{{ $labelClass }}">{{ __('Pickup Location') }}</label>
        <input type="text" name="pickup_location" id="pickup_location" value="{{ old('pickup_location', $trip?->pickup_location) }}" class="{{ $inputClass }} mt-1" required>
        <x-input-error :messages="$errors->get('pickup_location')" class="mt-2" />
    </div>

    <div>
        <label for="dropoff_location" class="{{ $labelClass }}">{{ __('Dropoff Location') }}</label>
        <input type="text" name="dropoff_location" id="dropoff_location" value="{{ old('dropoff_location', $trip?->dropoff_location) }}" class="{{ $inputClass }} mt-1" required>
        <x-input-error :messages="$errors->get('dropoff_location')" class="mt-2" />
    </div>

    <div>
        <label for="status" class="{{ $labelClass }}">{{ __('Status') }}</label>
        <select name="status" id="status" class="{{ $inputClass }} mt-1" required>
            @foreach (\App\Enums\TripStatus::cases() as $status)
                <option value="{{ $status->value }}" @selected(old('status', $trip?->status?->value ?? 'planned') === $status->value)>
                    {{ $status->label() }}
                </option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('status')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <label for="notes" class="{{ $labelClass }}">{{ __('Notes') }}</label>
        <textarea name="notes" id="notes" rows="3" class="{{ $inputClass }} mt-1">{{ old('notes', $trip?->notes) }}</textarea>
        <x-input-error :messages="$errors->get('notes')" class="mt-2" />
    </div>
</div>