@if($errors->any())<div class="mb-6 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700"><ul class="list-disc pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
<div class="grid gap-6 xl:grid-cols-2">
    <section class="rounded-2xl border border-blue-100 bg-white p-6 shadow-sm"><h2 class="mb-5 font-bold text-slate-900">Party and trip</h2><div class="grid gap-5 sm:grid-cols-2">
        <div><label class="form-label">Quotation number</label><input value="{{ $quotationNumber }}" readonly class="form-input cursor-not-allowed bg-slate-100 font-bold text-blue-700"><p class="mt-1 text-xs text-slate-400">Generated and stored automatically</p></div>
        <div><label class="form-label">Booking for *</label><select id="party-type" name="party_type" class="form-input" data-searchable><option value="company" @selected(old('party_type', $quotation->party_type) === 'company')>Company</option><option value="customer" @selected(old('party_type', $quotation->party_type ?: 'customer') === 'customer')>Individual customer</option></select></div>
        <div id="company-field"><label class="form-label">Company *</label><select id="company-select" name="company_id" class="form-input" data-searchable>@forelse($companies as $company)@if($loop->first)<option value="">Select company</option>@endif<option value="{{ $company->id }}" @selected(old('company_id', $quotation->company_id) == $company->id)>{{ $company->name }}</option>@empty<option value="" selected disabled>No companies available</option>@endforelse</select></div>
        <div id="customer-field"><label class="form-label">Customer *</label><select name="customer_id" class="form-input" data-searchable>@forelse($customers as $customer)@if($loop->first)<option value="">Select customer</option>@endif<option value="{{ $customer->id }}" @selected(old('customer_id', $quotation->customer_id) == $customer->id)>{{ $customer->name }} - {{ $customer->mobile }}</option>@empty<option value="" selected disabled>No customers available</option>@endforelse</select></div>
        <div><label class="form-label">Vehicle type *</label><select id="vehicle-type" name="vehicle_type" class="form-input" data-searchable>@forelse($vehicleTypes as $type)@if($loop->first)<option value="">Select vehicle type</option>@endif<option value="{{ $type }}" @selected(old('vehicle_type', $quotation->vehicle_type) === $type)>{{ $type }}</option>@empty<option value="" selected disabled>No vehicle types available</option>@endforelse</select></div>
        <div><label class="form-label">Vehicle name *</label><select id="vehicle-select" name="vehicle_id" required class="form-input" data-searchable data-selected="{{ old('vehicle_id', $quotation->vehicle_id) }}"></select></div>
        <div><label class="form-label">Start date *</label><input type="date" name="trip_start_date" value="{{ old('trip_start_date', $quotation->trip_start_date?->format('Y-m-d')) }}" required class="form-input"></div><div><label class="form-label">End date</label><input type="date" name="trip_end_date" value="{{ old('trip_end_date', $quotation->trip_end_date?->format('Y-m-d')) }}" class="form-input"></div>
        <div><label class="form-label">Pickup *</label><input name="pickup_location" value="{{ old('pickup_location', $quotation->pickup_location) }}" required class="form-input" placeholder="Enter pickup location"></div><div><label class="form-label">Drop *</label><input name="drop_location" value="{{ old('drop_location', $quotation->drop_location) }}" required class="form-input" placeholder="Enter drop location"></div>
    </div></section>
    <section class="rounded-2xl border border-violet-100 bg-white p-6 shadow-sm"><h2 class="mb-5 font-bold text-slate-900">Pricing and estimate</h2><div class="grid gap-5 sm:grid-cols-2">
        <div><label class="form-label">Pricing method *</label><select name="pricing_method" class="form-input" data-searchable>@foreach(['fixed_trip'=>'Fixed trip','per_day'=>'Per day','per_km'=>'Per KM','package'=>'Package','custom'=>'Custom'] as $value=>$label)<option value="{{ $value }}" @selected(old('pricing_method', $quotation->pricing_method ?: 'fixed_trip') === $value)>{{ $label }}</option>@endforeach</select></div>
        <div><label class="form-label">Rate *</label><input type="number" step=".01" min="0" name="pricing_rate" value="{{ old('pricing_rate', $quotation->pricing_rate ?? 0) }}" required class="form-input" placeholder="Enter quotation rate"></div>
        @foreach(['waiting_charge'=>'Waiting','toll_charge'=>'Toll','parking_charge'=>'Parking','additional_charge'=>'Additional','discount'=>'Discount','tax_percentage'=>'Tax %'] as $field=>$label)<div><label class="form-label">{{ $label }}</label><input type="number" step=".01" min="0" name="{{ $field }}" value="{{ old($field, $quotation->{$field} ?? 0) }}" class="form-input" placeholder="Enter {{ strtolower($label) }}"></div>@endforeach
        <div><label class="form-label">Status</label><select name="status" class="form-input" data-searchable>@foreach(['draft','sent','accepted','rejected','expired','converted'] as $status)<option value="{{ $status }}" @selected(old('status', $quotation->status ?: 'draft') === $status)>{{ ucfirst($status) }}</option>@endforeach</select></div>
        <div class="sm:col-span-2"><label class="form-label">Additional details</label><textarea name="additional_details" rows="3" class="form-input" placeholder="Enter quotation terms, trip notes or special conditions">{{ old('additional_details', $quotation->additional_details) }}</textarea></div>
    </div></section>
</div>
<script>
const quotationVehicles = {{ Illuminate\Support\Js::from($vehicles->map(fn ($vehicle) => ['id' => $vehicle->id, 'type' => $vehicle->vehicle_type, 'label' => $vehicle->name.' - '.$vehicle->registration_number])) }};
const partyType = document.getElementById('party-type');
const companyField = document.getElementById('company-field');
const customerField = document.getElementById('customer-field');
const vehicleType = document.getElementById('vehicle-type');
const vehicleSelect = document.getElementById('vehicle-select');

function refreshVehicleNames() {
    const selectedId = vehicleSelect.dataset.selected || vehicleSelect.value;
    const matchingVehicles = quotationVehicles.filter((vehicle) => vehicle.type === vehicleType.value);
    vehicleSelect.replaceChildren(new Option(vehicleType.value ? 'Select vehicle name' : 'Select vehicle type first', ''));
    matchingVehicles.forEach((vehicle) => vehicleSelect.add(new Option(vehicle.label, vehicle.id, false, String(vehicle.id) === String(selectedId))));
    vehicleSelect.disabled = !vehicleType.value || !matchingVehicles.length;
    window.refreshSearchableSelect?.(vehicleSelect);
}

function syncPartyFields() {
    const isCompany = partyType.value === 'company';
    companyField.classList.toggle('hidden', !isCompany);
    customerField.classList.toggle('hidden', isCompany);
    const companySelect = document.getElementById('company-select');
    const customerSelect = customerField.querySelector('select');
    companySelect.disabled = !isCompany;
    customerSelect.disabled = isCompany;
    window.refreshSearchableSelect?.(companySelect);
    window.refreshSearchableSelect?.(customerSelect);
}

partyType.addEventListener('change', syncPartyFields);
vehicleType.addEventListener('change', () => { vehicleSelect.dataset.selected = ''; refreshVehicleNames(); });
syncPartyFields();
refreshVehicleNames();
</script>