@if($errors->any())<div class="mb-6 rounded-xl bg-red-50 p-4 text-sm text-red-700"><ul>@foreach($errors->all() as $e)<li>{{ $e }}</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">Booking and party</h2><div class="grid gap-5 sm:grid-cols-2"><div><label class="form-label">Booking for</label><select id="party-type" name="party_type" class="form-input"><option value="company" @selected(old('party_type',$booking->party_type)==='company')>Company</option><option value="customer" @selected(old('party_type',$booking->party_type ?: 'customer')==='customer')>Customer</option></select></div><div id="company-field"><label class="form-label">Company</label><select name="company_id" class="form-input">@forelse($companies as $c)@if($loop->first)<option value="">Select company</option>@endif<option value="{{ $c->id }}" @selected(old('company_id',$booking->company_id)==$c->id)>{{ $c->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">@forelse($customers as $c)@if($loop->first)<option value="">Select customer</option>@endif<option value="{{ $c->id }}" @selected(old('customer_id',$booking->customer_id)==$c->id)>{{ $c->name }}</option>@empty<option value="" selected disabled>No customers available</option>@endforelse</select></div><div id="customer-manual-toggle-wrapper" class="sm:col-span-2 hidden">
    <div class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-4">
        <div class="min-w-0">
            <p class="text-sm font-semibold text-slate-800">Manual customer entry</p>
            <p class="mt-1 text-xs text-slate-500">Enable this option to enter and save a new customer.</p>
        </div>

        <button
            id="customer-manual-toggle-button"
            type="button"
            role="switch"
            aria-checked="false"
            aria-label="Enable manual customer entry"
            style="position:relative;display:inline-flex;align-items:center;flex:0 0 auto;width:78px;height:38px;padding:4px;border:0;border-radius:9999px;background:#dc2626;cursor:pointer;overflow:hidden;box-sizing:border-box;transition:background-color .25s ease;"
        >
            <span
                id="customer-manual-toggle-text"
                style="position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:11px;line-height:1;font-weight:700;color:#fff;letter-spacing:.04em;pointer-events:none;"
            >OFF</span>

            <span
                id="customer-manual-toggle-thumb"
                style="position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:9999px;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.28);transform:translateX(0);transition:transform .25s ease;pointer-events:none;"
            ></span>
        </button>

        <input
            id="customer-manual-toggle"
            type="checkbox"
            name="manual_customer_entry"
            value="1"
            class="sr-only"
            @checked(old('manual_customer_entry'))
        >
    </div>
</div><div id="customer-manual-field" class="sm:col-span-2 hidden"><div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-4"><p class="mb-3 text-sm font-semibold text-slate-700">Add the customer details below and they will be saved to the customers table.</p><div class="grid gap-4 md:grid-cols-2"><div><label class="form-label">Customer name</label><input name="customer_name" value="{{ old('customer_name') }}" class="form-input" placeholder="Enter customer name"></div><div><label class="form-label">Customer mobile</label><input name="customer_mobile" value="{{ old('customer_mobile') }}" class="form-input" placeholder="Enter mobile number"></div><div><label class="form-label">Customer email</label><input type="email" name="customer_email" value="{{ old('customer_email') }}" class="form-input" placeholder="Enter email"></div><div><label class="form-label">Customer tax number</label><input name="customer_tax_number" value="{{ old('customer_tax_number') }}" class="form-input" placeholder="Enter tax number"></div><div class="md:col-span-2"><label class="form-label">Customer address</label><textarea name="customer_address" rows="3" class="form-input" placeholder="Enter address">{{ old('customer_address') }}</textarea></div><div class="md:col-span-2"><label class="form-label">Customer remarks</label><textarea name="customer_remarks" rows="3" class="form-input" placeholder="Add notes">{{ old('customer_remarks') }}</textarea></div></div></div></div><div><label class="form-label">Trip type</label><select name="trip_type" class="form-input">@foreach(['one_way','round_trip','local','outstation','airport'] as $v)<option value="{{ $v }}" @selected(old('trip_type',$booking->trip_type)===$v)>{{ str($v)->replace('_',' ')->title() }}</option>@endforeach</select></div><div><label class="form-label">Pickup</label><input name="pickup_location" value="{{ old('pickup_location',$booking->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',$booking->drop_location) }}" required class="form-input" placeholder="Enter drop location"></div><div><label class="form-label">Pickup date/time</label><input type="datetime-local" name="pickup_at" value="{{ old('pickup_at',$booking->pickup_at?->format('Y-m-d\TH:i')) }}" required class="form-input" placeholder="Select pickup date and time"></div><div><label class="form-label">Return date/time</label><input type="datetime-local" name="return_at" value="{{ old('return_at',$booking->return_at?->format('Y-m-d\TH:i')) }}" class="form-input" placeholder="Select return date and time"></div><div><label class="form-label">Passengers</label><input type="number" min="1" name="passenger_count" value="{{ old('passenger_count',$booking->passenger_count ?: 1) }}" class="form-input" placeholder="Enter passenger count"></div></div></section>
<section class="rounded-2xl border border-emerald-100 bg-white p-6 shadow-sm"><h2 class="mb-5 font-bold">Vehicle, driver and pricing</h2><div class="grid gap-5 sm:grid-cols-2"><div><label class="form-label">Vehicle type</label><select id="booking-vehicle-type" name="vehicle_type" required class="form-input">@forelse($vehicleTypes as $vehicleType)@if($loop->first)<option value="">Select vehicle type</option>@endif<option value="{{ $vehicleType }}" @selected(old('vehicle_type',$booking->vehicle_type)===$vehicleType)>{{ $vehicleType }}</option>@empty<option value="" selected disabled>No vehicle types available</option>@endforelse</select></div><div><label class="form-label">Assign vehicle</label><select id="booking-vehicle" name="vehicle_id" class="form-input" data-selected="{{ old('vehicle_id', $booking->vehicle_id) }}">@foreach($vehicles as $v)<option value="{{ $v->id }}" data-vehicle-type="{{ $v->vehicle_type }}">{{ $v->registration_number }} - {{ $v->name }}</option>@endforeach</select></div><div><label class="form-label">Driver name</label><input name="driver_name" value="{{ old('driver_name',$booking->driver_name) }}" class="form-input" placeholder="Enter driver name"></div><div><label class="form-label">Driver mobile</label><input name="driver_mobile" value="{{ old('driver_mobile',$booking->driver_mobile) }}" class="form-input" placeholder="+91 98765 43210"></div><div><label class="form-label">Pricing method</label><input name="pricing_method" value="{{ old('pricing_method',$booking->pricing_method ?: 'fixed_trip') }}" required class="form-input" placeholder="Enter pricing method"></div><div><label class="form-label">Rate</label><input type="number" step=".01" min="0" name="pricing_rate" value="{{ old('pricing_rate',$booking->pricing_rate ?? 0) }}" required class="form-input" placeholder="Enter rate"></div><div><label class="form-label">Estimated amount</label><input type="number" step=".01" min="0" name="estimated_amount" value="{{ old('estimated_amount',$booking->estimated_amount ?? 0) }}" required class="form-input" placeholder="Enter estimated amount"></div><div><label class="form-label">Status</label><select name="status" class="form-input">@foreach(['confirmed','vehicle_assigned','driver_added','trip_started','in_progress','completed','cancelled'] as $s)<option value="{{ $s }}" @selected(old('status',$booking->status ?: 'confirmed')===$s)>{{ str($s)->replace('_',' ')->title() }}</option>@endforeach</select></div><div class="sm:col-span-2"><label class="form-label">Special instructions</label><textarea name="special_instructions" rows="3" class="form-input" placeholder="Enter passenger requests, route notes or driver instructions">{{ old('special_instructions',$booking->special_instructions) }}</textarea></div></div></section></div>
<script>
    const pt = document.getElementById('party-type');
    const cf = document.getElementById('company-field');
    const uf = document.getElementById('customer-field');
    const manualCustomerField = document.getElementById('customer-manual-field');
    const manualCustomerToggleWrapper = document.getElementById('customer-manual-toggle-wrapper');
    const manualCustomerToggle = document.getElementById('customer-manual-toggle');
    const manualCustomerToggleButton = document.getElementById('customer-manual-toggle-button');
    const manualCustomerToggleThumb = document.getElementById('customer-manual-toggle-thumb');
    const manualCustomerToggleText = document.getElementById('customer-manual-toggle-text');
    const customerSelect = document.querySelector('select[name="customer_id"]');
    const vehicleType = document.getElementById('booking-vehicle-type');
    const vehicle = document.getElementById('booking-vehicle');
    const vehicleOptions = Array.from(vehicle.options).map((option) => ({
        value: option.value,
        label: option.textContent,
        type: option.dataset.vehicleType,
    }));


    function updateManualToggleUI(isEnabled) {
        manualCustomerToggleButton.setAttribute(
            'aria-checked',
            isEnabled ? 'true' : 'false'
        );

        manualCustomerToggleButton.style.backgroundColor = isEnabled
            ? '#16a34a'
            : '#dc2626';

        manualCustomerToggleThumb.style.transform = isEnabled
            ? 'translateX(40px)'
            : 'translateX(0)';

        manualCustomerToggleText.textContent = isEnabled ? 'ON' : 'OFF';
        manualCustomerToggleText.style.left = isEnabled ? '11px' : 'auto';
        manualCustomerToggleText.style.right = isEnabled ? 'auto' : '11px';
    }

    function toggleParty() {
        cf.classList.toggle('hidden', pt.value !== 'company');
        uf.classList.toggle('hidden', pt.value !== 'customer');
        manualCustomerToggleWrapper.classList.toggle('hidden', pt.value !== 'customer');

        if (pt.value !== 'customer') {
            manualCustomerField.classList.add('hidden');
            manualCustomerToggle.checked = false;
            updateManualToggleUI(false);
            return;
        }

        const showManual = manualCustomerToggle.checked && !customerSelect.value;
        manualCustomerField.classList.toggle('hidden', !showManual);
        const isManualEntryEnabled = manualCustomerToggle.checked;

        updateManualToggleUI(isManualEntryEnabled);
    }

    function filterVehicles(keepSelected = false) {
        const selectedType = vehicleType.value;
        const previousValue = keepSelected ? vehicle.dataset.selected : vehicle.value;
        const matches = vehicleOptions.filter((option) => option.type === selectedType);

        vehicle.replaceChildren();

        const placeholder = new Option(
            selectedType ? (matches.length ? 'Assign later' : `No ${selectedType} vehicles available`) : 'Select vehicle type first',
            '',
            true,
            !matches.some((option) => option.value === previousValue),
        );
        placeholder.disabled = matches.length === 0;
        vehicle.add(placeholder);

        matches.forEach((option) => {
            vehicle.add(new Option(option.label, option.value, false, option.value === previousValue));
        });
    }

    pt.addEventListener('change', toggleParty);
    customerSelect.addEventListener('change', toggleParty);
    manualCustomerToggleButton.addEventListener('click', () => {
        manualCustomerToggle.checked = !manualCustomerToggle.checked;
        toggleParty();
    });
    manualCustomerToggle.addEventListener('change', toggleParty);
    vehicleType.addEventListener('change', () => filterVehicles());
    toggleParty();
    filterVehicles(true);
</script>