@php
    $v = $vehicle;
    $old = fn ($k, $default = null) => old($k, $v->{$k} ?? $default);
    $editing = $v->exists;
@endphp

<div x-data="vehicleForm({ makeId: '{{ old('make_id', $v->make_id) }}', modelId: '{{ old('model_id', $v->model_id) }}', rates: @js($rates ?? []), currency: '{{ old('purchase_currency', 'KES') }}' })"
     class="space-y-8">

    <fieldset class="space-y-4">
        <legend class="text-base font-semibold">Identity</legend>
        <div class="grid gap-4 sm:grid-cols-3">
            <div>
                <label for="vin" class="mb-1 block text-sm font-medium">VIN or chassis number</label>
                <input id="vin" name="vin" value="{{ $old('vin') }}" required class="field uppercase" maxlength="17" autocomplete="off" aria-describedby="vin-help">
                <p id="vin-help" class="mt-1 text-xs text-muted">Japanese imports often use a short chassis number such as NZE141-1234567.</p>
            </div>
            <div>
                <label for="registration_no" class="mb-1 block text-sm font-medium">Registration plate</label>
                <input id="registration_no" name="registration_no" value="{{ $old('registration_no') }}" class="field uppercase" maxlength="12">
            </div>
            <div>
                <label class="mb-1 block text-sm font-medium">Stock ID</label>
                <p class="field bg-ground text-muted">{{ $editing ? $v->stock_id : 'Assigned when you save' }}</p>
            </div>
        </div>
    </fieldset>

    <fieldset class="space-y-4">
        <legend class="text-base font-semibold">Vehicle</legend>
        <div class="grid gap-4 sm:grid-cols-4">
            <div>
                <label for="make_id" class="mb-1 block text-sm font-medium">Make</label>
                <select id="make_id" name="make_id" x-model="makeId" @change="loadModels()" class="field" :required="!newMake">
                    <option value="">Select make</option>
                    @foreach ($makes as $m)<option value="{{ $m->id }}">{{ $m->name }}</option>@endforeach
                </select>
                <button type="button" class="mt-1 text-xs underline" @click="newMake = !newMake; if (newMake) { makeId = ''; models = []; }" x-text="newMake ? 'Pick from the list' : 'Make not listed?'"></button>
                <input x-show="newMake" x-cloak name="new_make_name" value="{{ old('new_make_name') }}" class="field mt-1" placeholder="Type the make" aria-label="New make">
            </div>
            <div>
                <label for="model_id" class="mb-1 block text-sm font-medium">Model</label>
                <select id="model_id" name="model_id" x-model="modelId" class="field" :required="!newModel" :disabled="newModel">
                    <option value="">Select model</option>
                    <template x-for="m in models" :key="m.id"><option :value="m.id" x-text="m.name" :selected="m.id == modelId"></option></template>
                </select>
                <button type="button" class="mt-1 text-xs underline" @click="newModel = !newModel; if (newModel) modelId = ''" x-text="newModel ? 'Pick from the list' : 'Model not listed?'"></button>
                <input x-show="newModel" x-cloak name="new_model_name" value="{{ old('new_model_name') }}" class="field mt-1" placeholder="Type the model" aria-label="New model">
            </div>
            <div>
                <label for="year" class="mb-1 block text-sm font-medium">Year</label>
                <input id="year" name="year" type="number" value="{{ $old('year') }}" required min="1980" max="{{ now()->year + 1 }}" class="field">
            </div>
            <div>
                <label for="trim" class="mb-1 block text-sm font-medium">Grade / trim</label>
                <input id="trim" name="trim" value="{{ $old('trim') }}" class="field">
            </div>
            <div>
                <label for="body_type" class="mb-1 block text-sm font-medium">Body type</label>
                <select id="body_type" name="body_type" class="field"><option value="">Not set</option>
                    @foreach (config('inventory.body_types') as $k => $l)<option value="{{ $k }}" @selected($old('body_type') === $k)>{{ $l }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="transmission" class="mb-1 block text-sm font-medium">Transmission</label>
                <select id="transmission" name="transmission" required class="field"><option value="">Select</option>
                    @foreach (config('inventory.transmissions') as $k => $l)<option value="{{ $k }}" @selected($old('transmission') === $k)>{{ $l }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="fuel_type" class="mb-1 block text-sm font-medium">Fuel type</label>
                <select id="fuel_type" name="fuel_type" required class="field"><option value="">Select</option>
                    @foreach (config('inventory.fuel_types') as $k => $l)<option value="{{ $k }}" @selected($old('fuel_type') === $k)>{{ $l }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="engine_cc" class="mb-1 block text-sm font-medium">Engine (cc)</label>
                <input id="engine_cc" name="engine_cc" type="number" value="{{ $old('engine_cc') }}" class="field">
            </div>
            <div>
                <label for="drive_type" class="mb-1 block text-sm font-medium">Drive</label>
                <select id="drive_type" name="drive_type" class="field"><option value="">Not set</option>
                    @foreach (config('inventory.drive_types') as $k => $l)<option value="{{ $k }}" @selected($old('drive_type') === $k)>{{ $l }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="color" class="mb-1 block text-sm font-medium">Color</label>
                <input id="color" name="color" value="{{ $old('color') }}" required class="field">
            </div>
            <div>
                <label for="mileage" class="mb-1 block text-sm font-medium">Mileage</label>
                <div class="flex gap-2">
                    <input id="mileage" name="mileage" type="number" min="0" value="{{ $old('mileage', 0) }}" required class="field">
                    <select name="mileage_unit" class="field w-20" aria-label="Mileage unit">
                        @foreach (['km', 'mi'] as $u)<option @selected($old('mileage_unit', 'km') === $u)>{{ $u }}</option>@endforeach
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-2">
                <div><label for="doors" class="mb-1 block text-sm font-medium">Doors</label><input id="doors" name="doors" type="number" value="{{ $old('doors') }}" class="field"></div>
                <div><label for="seats" class="mb-1 block text-sm font-medium">Seats</label><input id="seats" name="seats" type="number" value="{{ $old('seats') }}" class="field"></div>
            </div>
        </div>
    </fieldset>

    <fieldset class="space-y-4">
        <legend class="text-base font-semibold">Origin and duty</legend>
        <div class="grid gap-4 sm:grid-cols-4">
            <div>
                <label for="condition" class="mb-1 block text-sm font-medium">Condition</label>
                <select id="condition" name="condition" required class="field">
                    @foreach (config('inventory.conditions') as $k => $l)<option value="{{ $k }}" @selected($old('condition') === $k)>{{ $l }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="duty_status" class="mb-1 block text-sm font-medium">Duty status</label>
                <select id="duty_status" name="duty_status" required class="field">
                    @foreach (config('inventory.duty_statuses') as $k => $l)<option value="{{ $k }}" @selected($old('duty_status') === $k)>{{ $l }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="supplier_id" class="mb-1 block text-sm font-medium">Supplier</label>
                <select id="supplier_id" name="supplier_id" class="field"><option value="">None</option>
                    @foreach ($suppliers as $s)<option value="{{ $s->id }}" @selected($old('supplier_id') == $s->id)>{{ $s->name }}{{ $s->country_code ? " ({$s->country_code})" : '' }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="shipment_id" class="mb-1 block text-sm font-medium">Shipment</label>
                <select id="shipment_id" name="shipment_id" class="field"><option value="">None</option>
                    @foreach ($shipments as $s)<option value="{{ $s->id }}" @selected($old('shipment_id') == $s->id)>{{ $s->reference }}{{ $s->bill_of_lading_no ? " · BL {$s->bill_of_lading_no}" : '' }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="auction_lot_no" class="mb-1 block text-sm font-medium">Auction lot no.</label>
                <input id="auction_lot_no" name="auction_lot_no" value="{{ $old('auction_lot_no') }}" class="field">
            </div>
            <div>
                <label for="auction_grade" class="mb-1 block text-sm font-medium">Auction grade</label>
                <input id="auction_grade" name="auction_grade" value="{{ $old('auction_grade') }}" class="field" maxlength="10">
            </div>
        </div>
    </fieldset>

    <fieldset class="space-y-4">
        <legend class="text-base font-semibold">Pricing (KES)</legend>
        <div class="grid gap-4 sm:grid-cols-4">
            <div>
                <label for="selling_price" class="mb-1 block text-sm font-medium">Selling price</label>
                <input id="selling_price" name="selling_price" type="number" step="0.01" min="0" value="{{ $old('selling_price') }}" class="field">
            </div>
            <div>
                <label for="minimum_price" class="mb-1 block text-sm font-medium">Minimum price</label>
                <input id="minimum_price" name="minimum_price" type="number" step="0.01" min="0" value="{{ $old('minimum_price') }}" class="field">
            </div>
        </div>
    </fieldset>

    @unless ($editing)
    <fieldset class="space-y-4">
        <legend class="text-base font-semibold">Where is it now, and what did it cost?</legend>
        <div class="grid gap-4 sm:grid-cols-4">
            <div>
                <label for="status" class="mb-1 block text-sm font-medium">Starting status</label>
                <select id="status" name="status" class="field">
                    <option value="in_transit" @selected(old('status', 'in_transit') === 'in_transit')>In transit (not yet at the yard)</option>
                    <option value="in_stock" @selected(old('status') === 'in_stock')>In stock (already at the yard)</option>
                </select>
            </div>
            <div>
                <label for="purchase_amount" class="mb-1 block text-sm font-medium">Purchase price</label>
                <input id="purchase_amount" name="purchase_amount" type="number" step="0.01" min="0" value="{{ old('purchase_amount') }}" class="field">
            </div>
            <div>
                <label for="purchase_currency" class="mb-1 block text-sm font-medium">Currency</label>
                <select id="purchase_currency" name="purchase_currency" x-model="currency" class="field">
                    @foreach ($currencies as $c)<option value="{{ $c->code }}">{{ $c->code }}</option>@endforeach
                </select>
            </div>
            <div x-show="currency !== 'KES'" x-cloak>
                <label for="purchase_exchange_rate" class="mb-1 block text-sm font-medium">KES per 1 <span x-text="currency"></span></label>
                <input id="purchase_exchange_rate" name="purchase_exchange_rate" type="number" step="0.00000001" min="0" value="{{ old('purchase_exchange_rate') }}" :placeholder="rates[currency] ? 'Stored: ' + rates[currency] : 'Enter the rate'" class="field">
            </div>
        </div>
        <p class="text-xs text-muted">Freight, duty, port charges and refurbishment are added later from the vehicle or its shipment.</p>
    </fieldset>
    @endunless

    <div>
        <label for="notes" class="mb-1 block text-sm font-medium">Notes</label>
        <textarea id="notes" name="notes" rows="3" class="field">{{ $old('notes') }}</textarea>
    </div>
</div>

<script>
    function vehicleForm(init) {
        return {
            makeId: init.makeId, modelId: init.modelId, rates: init.rates, currency: init.currency || 'KES',
            models: [], newMake: false, newModel: false,
            init() { if (this.makeId) this.loadModels(); },
            async loadModels() {
                this.models = []; if (!this.makeId) return;
                const r = await fetch(`{{ url('/catalog/makes') }}/${this.makeId}/models`, { headers: { 'Accept': 'application/json' } });
                if (r.ok) this.models = await r.json();
            },
        };
    }
</script>