@extends('layouts.site')

@section('title', 'Custom Tour Quotation')

@section('content')
    @php
        $seed = [
            'destinations' => $destinations ?? [],
            'roomTypes' => $roomTypes ?? [],
            'hotels' => $hotels ?? [],
            'rates' => $rates ?? [],
            'activities' => $activities ?? [],
            'vehicles' => $vehicles ?? [],
            'pricing' => $pricing ?? null,
            'submitUrl' => route('custom-tour.submit'),
            'csrf' => csrf_token(),
        ];
    @endphp

    <script>
        window.__CUSTOM_TOUR__ = @json($seed);
    </script>

    <section class="container-site py-10 md:py-14">
        <div class="max-w-5xl mx-auto">

            <div class="flex items-end justify-between gap-4">
                <div>
                    <h1 class="text-3xl md:text-4xl font-semibold" style="font-family: var(--font-display);">
                        Build Your Custom Sri Lanka Tour
                    </h1>
                    <p class="mt-2 text-slate-600">
                        Create a day-by-day plan and send your request.
                    </p>
                </div>
            </div>

            {{-- Stepper --}}
            <div class="mt-8 grid grid-cols-3 gap-2 text-center text-xs font-semibold tracking-[.18em] uppercase">
                <div id="stepTab1" class="py-3 rounded-2xl bg-slate-900 text-white">Step 1 • Details</div>
                <div id="stepTab2" class="py-3 rounded-2xl bg-slate-100 text-slate-600">Step 2 • Plan</div>
                <div id="stepTab3" class="py-3 rounded-2xl bg-slate-100 text-slate-600">Step 3 • Vehicle</div>
            </div>

            {{-- CARD --}}
            <div class="mt-4 card p-5 md:p-7">

                {{-- STEP 1 --}}
                <div id="step1" class="space-y-5">
                    <div class="text-lg font-semibold">Traveler & Trip Details</div>

                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs font-medium text-slate-600">Full Name <span
                                    class="text-rose-600">*</span></label>
                            <input id="name" class="mt-1 input-premium" placeholder="John Perera">
                            <div id="error-name" class="hidden mt-1 text-xs text-rose-600"></div>
                        </div>

                        <div>
                            <label class="text-xs font-medium text-slate-600">Citizenship</label>
                            <input id="country" class="mt-1 input-premium" placeholder="Netherlands">
                        </div>

                        <div>
                            <label class="text-xs font-medium text-slate-600">Email <span
                                    class="text-rose-600">*</span></label>
                            <input id="email" type="email" class="mt-1 input-premium" placeholder="john@email.com">
                            <div id="error-email" class="hidden mt-1 text-xs text-rose-600"></div>
                        </div>

                        <div>
                            <label class="text-xs font-medium text-slate-600">Phone <span
                                    class="text-rose-600">*</span></label>
                            <input id="phone" class="mt-1 input-premium" placeholder="+94 77 123 4567">
                            <div id="error-phone" class="hidden mt-1 text-xs text-rose-600"></div>
                        </div>

                        <div>
                            <label class="text-xs font-medium text-slate-600">WhatsApp <span
                                    class="text-rose-600">*</span></label>
                            <input id="whatsapp" class="mt-1 input-premium" placeholder="+94 77 123 4567">
                            <div id="error-whatsapp" class="hidden mt-1 text-xs text-rose-600"></div>
                        </div>

                        <div>
                            <label class="text-xs font-medium text-slate-600">Trip Title (optional)</label>
                            <input id="tripTitle" class="mt-1 input-premium" placeholder="Honeymoon + Hill Country">
                        </div>

                        <div>
                            <label class="text-xs font-medium text-slate-600">Start Date <span
                                    class="text-rose-600">*</span></label>
                            <input id="startDate" type="date" class="mt-1 input-premium">
                            <div id="error-startDate" class="hidden mt-1 text-xs text-rose-600"></div>
                        </div>

                        <div>
                            <label class="text-xs font-medium text-slate-600">How Many Nights? <span
                                    class="text-rose-600">*</span></label>
                            <input id="nights" type="number" min="1" max="30" class="mt-1 input-premium" value="5">
                            <div id="error-nights" class="hidden mt-1 text-xs text-rose-600"></div>
                        </div>
                    </div>

                    <div class="flex justify-end">
                        <button id="toStep2" class="btn-gold">Continue →</button>
                    </div>
                </div>

                {{-- STEP 2 --}}
                <div id="step2" class="hidden space-y-5">
                    <div class="flex items-end justify-between gap-4">
                        <div>
                            <div class="text-lg font-semibold">Guests, Rooms & Itinerary</div>
                            <p class="text-sm text-slate-600 mt-1">
                                Set your room requirements globally, then build your day-by-day plan.
                            </p>
                        </div>
                        <button id="back1" class="btn-outline">← Back</button>
                    </div>

                    <div class="grid md:grid-cols-4 gap-4 bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <div>
                            <label class="text-xs font-medium text-slate-600">Adults</label>
                            <input id="adults" type="number" min="1" class="mt-1 input-premium bg-white" value="2">
                            <div id="error-adults" class="hidden mt-1 text-xs text-rose-600"></div>
                        </div>
                        <div>
                            <label class="text-xs font-medium text-slate-600">Children</label>
                            <input id="children" type="number" min="0" class="mt-1 input-premium bg-white" value="0">
                        </div>
                        <div class="md:col-span-2" id="childAgesContainer"></div>
                    </div>

                    <div class="grid md:grid-cols-5 gap-4">
                        <div>
                            <label class="text-xs font-medium text-slate-600">Single Rooms</label>
                            <input id="singleRooms" type="number" min="0" class="mt-1 input-premium" value="0">
                        </div>
                        <div>
                            <label class="text-xs font-medium text-slate-600">Double Rooms</label>
                            <input id="doubleRooms" type="number" min="0" class="mt-1 input-premium" value="1">
                        </div>
                        <div>
                            <label class="text-xs font-medium text-slate-600">Triple Rooms</label>
                            <input id="tripleRooms" type="number" min="0" class="mt-1 input-premium" value="0">
                        </div>
                        <div>
                            <label class="text-xs font-medium text-slate-600">Global Hotel Star</label>
                            <select id="star_rating" class="mt-1 input-premium">
                                <option value="3">3 Star</option>
                                <option value="4" selected>4 Star</option>
                                <option value="5">5 Star</option>
                                <option value="6">Luxury</option>
                                <option value="7">Boutique</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-xs font-medium text-slate-600">Global Room Type</label>
                            <select id="room_type_id" class="mt-1 input-premium"></select>
                        </div>
                    </div>

                    {{-- MOBILE DAY CARDS --}}
                    <div id="itineraryCards" class="md:hidden space-y-4 mt-6"></div>

                    {{-- DESKTOP TABLE --}}
                    <div class="hidden md:block overflow-x-auto border border-slate-200 rounded-2xl mt-6">
                        <table class="min-w-[980px] w-full text-sm">
                            <thead class="bg-slate-50 text-slate-600 border-b border-slate-200">
                                <tr>
                                    <th class="text-left p-3">Day</th>
                                    <th class="text-left p-3">Date</th>
                                    <th class="text-left p-3">Destination</th>
                                    <th class="text-left p-3">Hotel</th>
                                    <th class="text-left p-3 hidden public-price-col">Room Rates (S/D/T)</th>
                                    <th class="text-left p-3 hidden public-price-col">Total Rooms Cost</th>
                                    <th class="text-left p-3">Activities</th>
                                    <th class="text-left p-3 hidden public-price-col">Act. Total</th>
                                </tr>
                            </thead>
                            <tbody id="itineraryBody" class="divide-y divide-slate-200 bg-white"></tbody>
                        </table>
                    </div>

                    <div class="flex items-center justify-between gap-4 mt-4">
                        <div id="hotelTotalWrap" class="hidden text-sm text-slate-600">
                            Total Hotel Estimate: <span class="font-semibold text-slate-900" id="hotelTotal">$0</span>
                        </div>
                        <button id="toStep3" class="btn-gold">Continue →</button>
                    </div>
                </div>

                {{-- STEP 3 --}}
                <div id="step3" class="hidden space-y-5">
                    <div class="flex items-end justify-between gap-4">
                        <div>
                            <div class="text-lg font-semibold">Vehicle & Request Summary</div>
                            <p class="text-sm text-slate-600 mt-1">Select vehicle and submit your request.</p>
                        </div>
                        <button id="back2" class="btn-outline">← Back</button>
                    </div>

                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <div class="text-xs font-medium text-slate-600 uppercase tracking-wider">Select Vehicle</div>
                            <p id="vehicleHint" class="mt-1 text-xs text-slate-500"></p>

                            <div id="vehicleGrid" class="mt-4 grid grid-cols-2 gap-4"></div>
                            <input type="hidden" id="vehicle" />
                        </div>

                        <div class="rounded-2xl border border-slate-200 bg-slate-50 p-6">
                            <div class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4">
                                Request Summary
                            </div>

                            {{-- hidden price summary for customer --}}
                            <div id="publicQuoteSummary" class="hidden space-y-3 text-sm text-slate-700">
                                <div class="flex justify-between">
                                    <span>Hotels (<span id="qNights">0</span> Nights)</span>
                                    <span class="font-semibold" id="sumHotel">$0</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Activities</span>
                                    <span class="font-semibold" id="sumActivities">$0</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Vehicle & Driver</span>
                                    <span class="font-semibold" id="sumVehicle">$0</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Tolls & Parking</span>
                                    <span class="font-semibold" id="sumFees">$0</span>
                                </div>

                                <div class="pt-3 mt-3 border-t border-slate-300 flex justify-between text-lg">
                                    <span class="font-bold text-slate-900">Grand Total</span>
                                    <span class="font-bold text-slate-900" id="sumGrand">$0</span>
                                </div>

                                <div class="pt-3 mt-3 border-t border-slate-300 flex justify-between text-base">
                                    <span class="font-bold text-emerald-700">Advance Due to Confirm</span>
                                    <span class="font-bold text-emerald-700" id="sumAdvance">$0</span>
                                </div>

                                <div class="flex justify-between text-xs text-slate-500 mt-1">
                                    <span>Average per person</span>
                                    <span id="sumPerPerson">$0</span>
                                </div>
                            </div>

                            <div class="text-sm text-slate-600 leading-6">
                                Review your details, itinerary, and vehicle selection, then submit your request.
                                Our team will prepare the final quotation and contact you shortly.
                            </div>

                            <button id="getQuote" class="btn-gold w-full mt-6 py-3" type="button">Submit Request</button>
                            <div id="quoteMsg" class="hidden mt-3 text-sm rounded-xl p-3 text-center"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <script>
        (() => {
            const DATA = window.__CUSTOM_TOUR__;
            const destinations = DATA.destinations || [];
            const roomTypes = DATA.roomTypes || [];
            const hotels = DATA.hotels || [];
            const rates = DATA.rates || [];
            const activities = DATA.activities || [];
            const vehicles = DATA.vehicles || [];
            const pricing = DATA.pricing || null;

            const SUBMIT_URL = DATA.submitUrl;
            const CSRF = DATA.csrf;

            const SHOW_PUBLIC_PRICES = false;

            const stepTab1 = document.getElementById('stepTab1');
            const stepTab2 = document.getElementById('stepTab2');
            const stepTab3 = document.getElementById('stepTab3');
            const step1 = document.getElementById('step1');
            const step2 = document.getElementById('step2');
            const step3 = document.getElementById('step3');

            const toStep2 = document.getElementById('toStep2');
            const toStep3 = document.getElementById('toStep3');
            const back1 = document.getElementById('back1');
            const back2 = document.getElementById('back2');

            const startDateEl = document.getElementById('startDate');
            const nightsEl = document.getElementById('nights');
            const adultsEl = document.getElementById('adults');
            const childrenEl = document.getElementById('children');
            const childAgesContainer = document.getElementById('childAgesContainer');

            const singleRoomsEl = document.getElementById('singleRooms');
            const doubleRoomsEl = document.getElementById('doubleRooms');
            const tripleRoomsEl = document.getElementById('tripleRooms');

            const starRatingEl = document.getElementById('star_rating');
            const roomTypeEl = document.getElementById('room_type_id');

            const itineraryBody = document.getElementById('itineraryBody');
            const hotelTotalEl = document.getElementById('hotelTotal');

            const vehicleGrid = document.getElementById('vehicleGrid');
            const vehicleHidden = document.getElementById('vehicle');
            const vehicleHint = document.getElementById('vehicleHint');

            const sumHotel = document.getElementById('sumHotel');
            const sumActivities = document.getElementById('sumActivities');
            const sumVehicle = document.getElementById('sumVehicle');
            const sumFees = document.getElementById('sumFees');
            const sumGrand = document.getElementById('sumGrand');
            const sumAdvance = document.getElementById('sumAdvance');
            const sumPerPerson = document.getElementById('sumPerPerson');
            const qNights = document.getElementById('qNights');

            const getQuote = document.getElementById('getQuote');
            const quoteMsg = document.getElementById('quoteMsg');
            const itineraryCards = document.getElementById('itineraryCards');

            const currency = (pricing && pricing.currency) ? pricing.currency : 'USD';
            const money = (n) => `${currency} ` + Number(n || 0).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });

            function nightsCount() {
                const n = Number(nightsEl.value || 1);
                return Math.max(1, Math.min(30, n));
            }

            function paxCount() {
                const a = Number(adultsEl?.value || 0);
                const c = Number(childrenEl?.value || 0);
                return a + c;
            }

            function ensureStartDate() {
                if (!startDateEl.value) {
                    const d = new Date();
                    const iso = new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 10);
                    startDateEl.value = iso;
                }
            }

            function applyPublicPriceVisibility() {
                if (SHOW_PUBLIC_PRICES) return;

                document.querySelectorAll('.public-price-col').forEach(el => el.classList.add('hidden'));

                const hotelTotalWrap = document.getElementById('hotelTotalWrap');
                const publicQuoteSummary = document.getElementById('publicQuoteSummary');

                if (hotelTotalWrap) hotelTotalWrap.classList.add('hidden');
                if (publicQuoteSummary) publicQuoteSummary.classList.add('hidden');
            }

            function setStep(n) {
                [step1, step2, step3].forEach(el => el.classList.add('hidden'));
                [stepTab1, stepTab2, stepTab3].forEach(el => {
                    el.classList.remove('bg-slate-900', 'text-white');
                    el.classList.add('bg-slate-100', 'text-slate-600');
                });

                const activeTab = n === 1 ? stepTab1 : n === 2 ? stepTab2 : stepTab3;
                activeTab.classList.add('bg-slate-900', 'text-white');
                activeTab.classList.remove('bg-slate-100', 'text-slate-600');

                (n === 1 ? step1 : n === 2 ? step2 : step3).classList.remove('hidden');
            }

            function generateAgeInputs(savedAges = []) {
                const count = Number(childrenEl.value || 0);
                childAgesContainer.innerHTML = '';

                if (count > 0) {
                    let html = `<label class="text-xs font-medium text-slate-600">Children Ages</label>
                                                        <div class="flex gap-2 mt-1 flex-wrap">`;

                    for (let i = 0; i < count; i++) {
                        const ageValue = savedAges[i] ?? '';
                        html += `<input type="number" class="child-age-input input-premium bg-white text-center w-16 px-1"
                                                            placeholder="Age" min="0" max="17" value="${ageValue}">`;
                    }

                    html += `</div>`;
                    childAgesContainer.innerHTML = html;

                    childAgesContainer.querySelectorAll('.child-age-input').forEach(input => {
                        input.addEventListener('input', calcAllTotals);
                    });
                }

                calcAllTotals();
            }

            function getChildAges() {
                return Array.from(document.querySelectorAll('.child-age-input')).map(el => Number(el.value || 0));
            }

            function fillRoomTypes() {
                if (!roomTypeEl) return;
                roomTypeEl.innerHTML = roomTypes
                    .slice()
                    .sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
                    .map(rt => `<option value="${rt.id}">${rt.name}</option>`)
                    .join('');

                if (!roomTypeEl.value && roomTypes.length) {
                    roomTypeEl.value = String(roomTypes[0].id);
                }
            }

            function addDestOptions(select) {
                select.innerHTML = `<option value="">Select...</option>` +
                    destinations.map(d => `<option value="${d.id}">${d.name}</option>`).join('');
            }

            function getHotelRates(hotelId, roomTypeId) {
                const r = rates.find(x =>
                    Number(x.hotel_id) === Number(hotelId) &&
                    Number(x.room_type_id) === Number(roomTypeId)
                );

                return r ? {
                    s: Number(r.single_rate || 0),
                    d: Number(r.double_rate || 0),
                    t: Number(r.triple_rate || 0)
                } : { s: 0, d: 0, t: 0 };
            }

            function buildHotelOptions(destId, starRating, selectedHotelId = null) {
                const destinationId = Number(destId || 0);
                const selectedId = Number(selectedHotelId || 0);
                const star = Number(starRating || 0);

                const selectedHotel = hotels.find(h =>
                    Number(h.id) === selectedId &&
                    Number(h.destination_id) === destinationId
                );

                let list = hotels.filter(h =>
                    Number(h.destination_id) === destinationId &&
                    Number(h.star_rating) === star
                );

                if (selectedHotel && !list.some(h => Number(h.id) === selectedId)) {
                    list = [selectedHotel, ...list];
                }

                const seen = new Set();
                list = list.filter(h => {
                    const id = Number(h.id);
                    if (seen.has(id)) return false;
                    seen.add(id);
                    return true;
                });

                if (!list.length) {
                    return `<option value="">No hotels found</option>`;
                }

                return `<option value="">Select hotel...</option>` +
                    list.map(h => {
                        const keepTag = Number(h.id) === selectedId && Number(h.star_rating) !== star
                            ? ` (selected)`
                            : '';
                        return `<option value="${h.id}">${h.name}${keepTag}</option>`;
                    }).join('');
            }

            function activitiesForDestination(destId) {
                return activities.filter(a => Number(a.destination_id) === Number(destId));
            }

            function appendActivityRow(wrap, destId, state = null) {
                const list = activitiesForDestination(destId);
                const row = document.createElement('div');
                row.className = "actRow flex gap-2 items-center";
                row.innerHTML = `
                                            <select class="actSelect flex-1 rounded-xl border-slate-200 text-sm"></select>
                                            <input class="actQty w-16 rounded-xl border-slate-200 text-sm text-center" type="number" min="1" value="${state?.qty || 1}">
                                            <button type="button" class="actRemove text-slate-400 hover:text-rose-600" title="Remove">
                                                <i class="fa-solid fa-xmark"></i>
                                            </button>
                                        `;

                const sel = row.querySelector('.actSelect');
                const qty = row.querySelector('.actQty');

                sel.innerHTML = list.length
                    ? `<option value="">Select activity...</option>` +
                    list.map(a => `<option value="${a.id}" data-price="${a.price_per_person}">${a.name}</option>`).join('')
                    : `<option value="">No activities</option>`;

                if (state?.activity_id) {
                    sel.value = String(state.activity_id);
                }

                row.querySelector('.actRemove').addEventListener('click', () => {
                    row.remove();
                    calcAllTotals();
                    syncMobileFromDesktop();
                });

                sel.addEventListener('change', () => {
                    calcAllTotals();
                    syncMobileFromDesktop();
                });

                qty.addEventListener('input', () => {
                    calcAllTotals();
                    syncMobileFromDesktop();
                });

                wrap.appendChild(row);
            }

            function renderActivitiesRows(wrap, destId, activitiesState = []) {
                wrap.innerHTML = '';

                if (activitiesState.length) {
                    activitiesState.forEach(item => appendActivityRow(wrap, destId, item));
                }
            }

            function captureItineraryState() {
                const rows = Array.from(itineraryBody.querySelectorAll('tr'));

                return rows.map((tr, idx) => {
                    const activitiesState = Array.from(tr.querySelectorAll('.actRow')).map(r => ({
                        activity_id: Number(r.querySelector('.actSelect')?.value || 0) || null,
                        qty: Number(r.querySelector('.actQty')?.value || 1),
                    })).filter(x => x.activity_id);

                    return {
                        day_number: idx + 1,
                        date: tr.querySelector('.dayDate')?.value || '',
                        destination_id: Number(tr.querySelector('.dest')?.value || 0) || null,
                        hotel_id: Number(tr.querySelector('.hotel')?.value || 0) || null,
                        activities: activitiesState,
                    };
                });
            }

            function defaultDateForDay(day) {
                const start = new Date(startDateEl.value + 'T00:00:00');
                const date = new Date(start);
                date.setDate(start.getDate() + (day - 1));
                return date.toISOString().slice(0, 10);
            }

            function buildItinerary(savedState = []) {
                ensureStartDate();
                const nights = nightsCount();

                itineraryBody.innerHTML = '';
                if (itineraryCards) itineraryCards.innerHTML = '';

                for (let day = 1; day <= nights; day++) {
                    const state = savedState[day - 1] || null;
                    const iso = state?.date || defaultDateForDay(day);

                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                                                <td class="p-3 font-semibold">Day ${day}</td>
                                                <td class="p-3">
                                                    <input type="date" class="dayDate w-full rounded-xl border-slate-200 text-xs" value="${iso}">
                                                </td>
                                                <td class="p-3">
                                                    <select class="dest w-full rounded-xl border-slate-200 text-sm"></select>
                                                </td>
                                                <td class="p-3">
                                                    <select class="hotel w-full rounded-xl border-slate-200 text-sm"></select>
                                                </td>
                                                <td class="p-3 hidden public-price-col">
                                                    <div class="rateBreakdown text-[11px] text-slate-500 whitespace-nowrap">Select Hotel</div>
                                                </td>
                                                <td class="p-3 hidden public-price-col">
                                                    <div class="nightTotal font-semibold text-slate-900">—</div>
                                                </td>
                                                <td class="p-3">
                                                    <div class="activitiesWrap space-y-2"></div>
                                                    <button type="button" class="addAct mt-2 text-xs font-semibold text-gold-700 hover:text-gold-800">+ Add Activity</button>
                                                </td>
                                                <td class="p-3 hidden public-price-col">
                                                    <div class="actTotal font-semibold text-slate-900">—</div>
                                                </td>
                                            `;

                    itineraryBody.appendChild(tr);

                    const destSel = tr.querySelector('.dest');
                    const hotelSel = tr.querySelector('.hotel');
                    const addBtn = tr.querySelector('.addAct');
                    const wrap = tr.querySelector('.activitiesWrap');

                    addDestOptions(destSel);

                    if (state?.destination_id) {
                        destSel.value = String(state.destination_id);
                    }

                    hotelSel.innerHTML = buildHotelOptions(
                        destSel.value,
                        starRatingEl?.value,
                        state?.hotel_id || null
                    );

                    if (state?.hotel_id) {
                        hotelSel.value = String(state.hotel_id);
                    }

                    renderActivitiesRows(wrap, Number(destSel.value || 0), state?.activities || []);

                    destSel.addEventListener('change', () => {
                        hotelSel.innerHTML = buildHotelOptions(destSel.value, starRatingEl?.value, null);
                        hotelSel.value = '';
                        wrap.innerHTML = '';

                        calcAllTotals();
                        syncMobileFromDesktop();
                    });

                    hotelSel.addEventListener('change', () => {
                        calcAllTotals();
                        syncMobileFromDesktop();
                    });

                    addBtn.addEventListener('click', () => {
                        appendActivityRow(wrap, Number(destSel.value || 0));
                        calcAllTotals();
                        syncMobileFromDesktop();
                    });

                    tr.querySelector('.dayDate')?.addEventListener('change', () => {
                        syncMobileFromDesktop();
                    });

                    if (itineraryCards) {
                        const card = document.createElement('div');
                        card.className = "rounded-2xl border border-slate-200 bg-white p-4";
                        card.dataset.day = String(day);

                        card.innerHTML = `
                                                    <div class="flex justify-between items-center mb-3">
                                                        <div class="font-bold text-slate-900 text-lg">Day ${day}</div>
                                                        <input type="date" class="mDate rounded-xl border-slate-200 text-xs px-2 py-1" value="${iso}">
                                                    </div>

                                                    <div class="space-y-3">
                                                        <div><select class="mDest w-full rounded-xl border-slate-200 text-sm"></select></div>
                                                        <div><select class="mHotel w-full rounded-xl border-slate-200 text-sm"></select></div>

                                                        <div class="hidden public-price-col">
                                                            <div class="flex justify-between items-center bg-slate-50 p-2 rounded text-sm">
                                                                <div class="text-slate-500">Rooms Cost</div>
                                                                <div class="mNight font-semibold text-slate-900">—</div>
                                                            </div>
                                                            <div class="mRates text-[10px] text-slate-400 text-right">S: - | D: - | T: -</div>
                                                        </div>

                                                        <div class="pt-2 border-t border-slate-100">
                                                            <div class="text-xs font-semibold text-slate-600 mb-2">Activities</div>
                                                            <div class="mActs space-y-2"></div>
                                                            <button type="button" class="mAddAct mt-2 text-xs font-semibold text-gold-700">+ Add Activity</button>
                                                        </div>

                                                        <div class="hidden public-price-col flex justify-between items-center text-sm border-t border-slate-200 pt-2">
                                                            <span class="text-slate-600">Act. Total</span>
                                                            <span class="mActTotal font-semibold text-slate-900">—</span>
                                                        </div>
                                                    </div>
                                                `;

                        itineraryCards.appendChild(card);

                        const mDest = card.querySelector('.mDest');
                        const mHotel = card.querySelector('.mHotel');
                        const mDate = card.querySelector('.mDate');
                        const mActs = card.querySelector('.mActs');
                        const mAddAct = card.querySelector('.mAddAct');

                        addDestOptions(mDest);
                        mDest.value = destSel.value || '';

                        mHotel.innerHTML = buildHotelOptions(
                            mDest.value,
                            starRatingEl?.value,
                            hotelSel.value || null
                        );
                        mHotel.value = hotelSel.value || '';

                        mDate.addEventListener('change', () => {
                            tr.querySelector('.dayDate').value = mDate.value;
                            syncMobileFromDesktop();
                        });

                        mDest.addEventListener('change', () => {
                            destSel.value = mDest.value;

                            hotelSel.innerHTML = buildHotelOptions(destSel.value, starRatingEl?.value, null);
                            hotelSel.value = '';

                            mHotel.innerHTML = buildHotelOptions(mDest.value, starRatingEl?.value, null);
                            mHotel.value = '';

                            wrap.innerHTML = '';
                            mActs.innerHTML = '';

                            calcAllTotals();
                            syncMobileFromDesktop();
                        });

                        mHotel.addEventListener('change', () => {
                            hotelSel.value = mHotel.value;
                            calcAllTotals();
                            syncMobileFromDesktop();
                        });

                        mAddAct.addEventListener('click', () => {
                            appendActivityRow(wrap, Number(destSel.value || 0));
                            calcAllTotals();
                            syncMobileFromDesktop();
                        });
                    }
                }

                applyPublicPriceVisibility();
                calcAllTotals();
                buildVehicleCards();
                syncMobileFromDesktop();
            }

            function refreshHotelsByStarOnly() {
                Array.from(itineraryBody.querySelectorAll('tr')).forEach((tr) => {
                    const destSel = tr.querySelector('.dest');
                    const hotelSel = tr.querySelector('.hotel');
                    const currentHotelId = hotelSel.value || '';

                    hotelSel.innerHTML = buildHotelOptions(
                        destSel.value,
                        starRatingEl?.value,
                        currentHotelId
                    );

                    if (currentHotelId) {
                        hotelSel.value = currentHotelId;
                    }
                });

                calcAllTotals();
                syncMobileFromDesktop();
            }

            function buildVehicleCards() {
                const pax = paxCount();
                const days = nightsCount();
                const usable = vehicles.filter(v => Number(v.seats_count || 0) >= pax);

                vehicleHint.textContent = usable.length
                    ? `Choose a vehicle for ${days} day(s).`
                    : `No vehicle available for ${pax} travellers.`;

                if (!vehicleHidden.value && usable.length) {
                    vehicleHidden.value = String(usable[0].id);
                }

                if (vehicleHidden.value && !usable.some(v => String(v.id) === String(vehicleHidden.value))) {
                    vehicleHidden.value = usable.length ? String(usable[0].id) : '';
                }

                vehicleGrid.innerHTML = usable.map(v => {
                    const active = String(v.id) === String(vehicleHidden.value);

                    const imageHtml = v.image
                        ? `<div class="aspect-[16/10] w-full overflow-hidden rounded-xl bg-slate-100 mb-3">
                                    <img src="${v.image}" alt="${v.name}" class="h-full w-full object-cover">
                            </div>`
                        : `<div class="aspect-[16/10] w-full rounded-xl bg-slate-100 mb-3 grid place-items-center">
                                    <i class="fa-solid fa-car-side text-2xl text-slate-400"></i>
                            </div>`;

                    const iconHtml = v.icon
                        ? `<div class="h-10 w-10 rounded-xl bg-white/90 shadow-sm border border-slate-200 grid place-items-center overflow-hidden">
                                    <img src="${v.icon}" alt="${v.name} icon" class="h-6 w-6 object-contain">
                            </div>`
                        : '';

                    return `
                            <button type="button"
                                class="vehicleCard w-full rounded-2xl border ${active
                            ? 'border-gold-500 ring-1 ring-gold-500 bg-gold-50/30'
                            : 'border-slate-200 bg-white hover:border-slate-300'
                        } p-3 md:p-4 text-left transition">

                                ${imageHtml}

                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0 flex-1">
                                        <div class="font-bold text-slate-800 text-sm md:text-base leading-5">${v.name}</div>
                                        <div class="mt-1 text-xs md:text-sm text-slate-500">
                                            ${Number(v.seats_count)} Seats
                                        </div>
                                    </div>

                                    ${iconHtml}
                                </div>

                                <input type="hidden" class="vehicleId" value="${v.id}">
                            </button>
                        `;
                }).join('');

                vehicleGrid.querySelectorAll('.vehicleCard').forEach(btn => {
                    btn.addEventListener('click', () => {
                        vehicleHidden.value = btn.querySelector('.vehicleId').value;
                        buildVehicleCards();
                        calcAllTotals();
                    });
                });

                calcAllTotals();
            }

            function calcAllTotals() {
                const pax = paxCount();
                const adults = Number(adultsEl.value || 0);
                const days = nightsCount();
                const roomTypeId = Number(roomTypeEl?.value || 0);

                const sCount = Number(singleRoomsEl.value || 0);
                const dCount = Number(doubleRoomsEl.value || 0);
                const tCount = Number(tripleRoomsEl.value || 0);

                let hotelTotal = 0;
                let activitiesTotal = 0;

                Array.from(itineraryBody.querySelectorAll('tr')).forEach(tr => {
                    const hotelId = Number(tr.querySelector('select.hotel')?.value || 0);
                    const ratesEl = tr.querySelector('.rateBreakdown');
                    const nightEl = tr.querySelector('.nightTotal');

                    if (!hotelId || !roomTypeId) {
                        if (ratesEl) ratesEl.innerHTML = 'Select Hotel';
                        if (nightEl) nightEl.textContent = '—';
                    } else {
                        const r = getHotelRates(hotelId, roomTypeId);
                        const nightCost = (sCount * r.s) + (dCount * r.d) + (tCount * r.t);

                        if (ratesEl) ratesEl.innerHTML = `S: ${money(r.s)} | D: ${money(r.d)} <br> T: ${money(r.t)}`;
                        if (nightEl) nightEl.textContent = money(nightCost);

                        hotelTotal += nightCost;
                    }

                    const actTotalEl = tr.querySelector('.actTotal');
                    let dayActTotal = 0;

                    tr.querySelectorAll('.actRow').forEach(r => {
                        const opt = r.querySelector('.actSelect')?.selectedOptions?.[0];
                        const qty = Number(r.querySelector('.actQty')?.value || 1);
                        const price = opt ? Number(opt.getAttribute('data-price') || 0) : 0;
                        if (price > 0) dayActTotal += price * pax * qty;
                    });

                    if (actTotalEl) actTotalEl.textContent = dayActTotal > 0 ? money(dayActTotal) : '—';
                    activitiesTotal += dayActTotal;
                });

                if (hotelTotalEl) hotelTotalEl.textContent = money(hotelTotal);
                if (sumHotel) sumHotel.textContent = money(hotelTotal);
                if (sumActivities) sumActivities.textContent = money(activitiesTotal);
                if (qNights) qNights.textContent = days;

                const selectedId = Number(vehicleHidden.value || 0);
                const selectedVehicle = vehicles.find(v => Number(v.id) === selectedId);
                const vehicleTotal = selectedVehicle ? Number(selectedVehicle.per_day_rate || 0) * days : 0;
                if (sumVehicle) sumVehicle.textContent = money(vehicleTotal);

                const highwayFixed = pricing ? Number(pricing.highway_charge_fixed || 0) : 0;
                const parkingFixed = pricing ? Number(pricing.parking_charge_fixed || 0) : 0;
                const driverFoodPerDay = pricing ? Number(pricing.driver_food_per_day || 0) : 0;
                const driverAccPerNight = pricing ? Number(pricing.driver_accommodation_per_night || 0) : 0;
                const feesTotal = highwayFixed + parkingFixed + (driverFoodPerDay * days) + (driverAccPerNight * days);

                if (sumFees) sumFees.textContent = money(feesTotal);

                const grand = hotelTotal + activitiesTotal + vehicleTotal + feesTotal;
                if (sumGrand) sumGrand.textContent = money(grand);
                if (sumPerPerson) sumPerPerson.textContent = money(grand / Math.max(1, pax));

                let advanceTotal = 0;
                if (pricing) {
                    const advPP = Number(pricing.advance_per_person || 0);
                    const childAdv = advPP * (Number(pricing.child_advance_percentage || 50) / 100);

                    advanceTotal += (adults * advPP);

                    document.querySelectorAll('.child-age-input').forEach(input => {
                        const age = Number(input.value || 0);
                        if (age > 4 && age <= 12) advanceTotal += childAdv;
                        else if (age > 12) advanceTotal += advPP;
                    });
                }

                if (sumAdvance) sumAdvance.textContent = money(advanceTotal);
            }

            async function submitRequest() {
                if (!validateStep1()) {
                    setStep(1);
                    return;
                }

                if (!validateStep2()) {
                    setStep(2);
                    return;
                }

                ensureStartDate();

                const originalBtnText = getQuote.innerText;
                getQuote.disabled = true;
                getQuote.innerText = "Processing...";
                quoteMsg.classList.add('hidden');

                const childAges = getChildAges();

                const payload = {
                    full_name: document.getElementById('name').value.trim(),
                    country: document.getElementById('country').value.trim() || null,
                    email: document.getElementById('email').value.trim() || null,
                    phone: document.getElementById('phone').value.trim() || null,
                    whatsapp: document.getElementById('whatsapp').value.trim() || null,
                    trip_title: document.getElementById('tripTitle').value.trim() || null,

                    start_date: startDateEl.value,
                    nights: nightsCount(),
                    adults: Number(adultsEl.value || 1),
                    children: Number(childrenEl.value || 0),
                    children_ages: childAges,

                    single_rooms: Number(singleRoomsEl.value || 0),
                    double_rooms: Number(doubleRoomsEl.value || 0),
                    triple_rooms: Number(tripleRoomsEl.value || 0),

                    vehicle_id: Number(vehicleHidden.value || 0) || null,
                    days: [],
                };

                const roomTypeId = Number(roomTypeEl?.value || 0) || null;

                Array.from(itineraryBody.querySelectorAll('tr')).forEach((tr, idx) => {
                    const date = tr.querySelector('.dayDate')?.value || null;
                    const destId = Number(tr.querySelector('select.dest')?.value || 0) || null;
                    const hotelId = Number(tr.querySelector('select.hotel')?.value || 0) || null;

                    const actPayload = [];
                    tr.querySelectorAll('.actRow').forEach(r => {
                        const actId = Number(r.querySelector('.actSelect')?.value || 0);
                        const qty = Number(r.querySelector('.actQty')?.value || 1);
                        if (actId) actPayload.push({
                            activity_id: actId,
                            qty
                        });
                    });

                    payload.days.push({
                        day_number: idx + 1,
                        date,
                        destination_id: destId,
                        hotel_id: hotelId,
                        room_type_id: roomTypeId,
                        activities: actPayload,
                    });
                });

                try {
                    const res = await fetch(SUBMIT_URL, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': CSRF,
                        },
                        body: JSON.stringify(payload),
                    });

                    const contentType = res.headers.get('content-type') || '';
                    const body = contentType.includes('application/json')
                        ? await res.json()
                        : await res.text();

                    if (!res.ok) {
                        if (res.status === 422 && typeof body === 'object' && body?.errors) {
                            const firstKey = Object.keys(body.errors)[0];
                            alert(body.errors[firstKey][0]);
                        } else {
                            alert('Server error. Check console.');
                        }

                        getQuote.disabled = false;
                        getQuote.innerText = originalBtnText;
                        return;
                    }

                    quoteMsg.classList.remove('hidden', 'text-rose-700', 'bg-rose-50', 'border-rose-200');
                    quoteMsg.classList.add('text-emerald-700', 'bg-emerald-50', 'border-emerald-200');
                    quoteMsg.innerHTML = `✅ Request saved! Reference: <b>${body.reference_no}</b>. We will contact you soon.`;
                    getQuote.innerText = "Submitted Successfully";

                } catch (error) {
                    alert('Network error. Please try again.');
                    getQuote.disabled = false;
                    getQuote.innerText = originalBtnText;
                }
            }

            toStep2.addEventListener('click', () => {
                if (validateStep1()) {
                    setStep(2);
                    buildItinerary(captureItineraryState());
                }
            });

            back1.addEventListener('click', () => setStep(1));

            toStep3.addEventListener('click', () => {
                if (validateStep2()) {
                    setStep(3);
                    buildVehicleCards();
                    calcAllTotals();
                }
            });

            back2.addEventListener('click', () => setStep(2));

            nightsEl.addEventListener('input', () => {
                if (!step2.classList.contains('hidden')) {
                    buildItinerary(captureItineraryState());
                }
            });

            startDateEl.addEventListener('change', () => {
                if (!step2.classList.contains('hidden')) {
                    buildItinerary(captureItineraryState());
                }
            });

            adultsEl.addEventListener('input', () => {
                calcAllTotals();
                buildVehicleCards();
            });

            childrenEl.addEventListener('input', () => {
                const previousAges = getChildAges();
                generateAgeInputs(previousAges);
                buildVehicleCards();
            });

            singleRoomsEl.addEventListener('input', calcAllTotals);
            doubleRoomsEl.addEventListener('input', calcAllTotals);
            tripleRoomsEl.addEventListener('input', calcAllTotals);

            starRatingEl?.addEventListener('change', refreshHotelsByStarOnly);
            roomTypeEl?.addEventListener('change', calcAllTotals);
            getQuote.addEventListener('click', submitRequest);

            fillRoomTypes();
            applyPublicPriceVisibility();
            setStep(1);

            function syncMobileFromDesktop() {
                if (!itineraryCards) return;

                const rows = Array.from(itineraryBody.querySelectorAll('tr'));

                rows.forEach((tr, idx) => {
                    const day = idx + 1;
                    const card = itineraryCards.querySelector(`[data-day="${day}"]`);
                    if (!card) return;

                    const ratesTxt = tr.querySelector('.rateBreakdown')?.innerHTML || '—';
                    const nightTxt = tr.querySelector('.nightTotal')?.textContent?.trim() || '—';
                    const actTotalTxt = tr.querySelector('.actTotal')?.textContent?.trim() || '—';

                    const mRates = card.querySelector('.mRates');
                    const mNight = card.querySelector('.mNight');
                    const mActTotal = card.querySelector('.mActTotal');

                    if (mRates) mRates.innerHTML = ratesTxt.replace('<br>', ' | ');
                    if (mNight) mNight.textContent = nightTxt;
                    if (mActTotal) mActTotal.textContent = actTotalTxt;

                    const destVal = tr.querySelector('select.dest')?.value || '';
                    const hotelVal = tr.querySelector('select.hotel')?.value || '';
                    const dateVal = tr.querySelector('.dayDate')?.value || '';

                    const mDest = card.querySelector('.mDest');
                    const mHotel = card.querySelector('.mHotel');
                    const mDate = card.querySelector('.mDate');

                    if (mDate && dateVal) mDate.value = dateVal;
                    if (mDest) mDest.value = destVal;

                    if (mHotel) {
                        mHotel.innerHTML = buildHotelOptions(destVal, starRatingEl?.value, hotelVal || null);
                        mHotel.value = hotelVal || '';
                    }

                    const mActs = card.querySelector('.mActs');
                    if (!mActs) return;

                    mActs.innerHTML = '';

                    const actRows = Array.from(tr.querySelectorAll('.actRow'));
                    if (!actRows.length) {
                        mActs.innerHTML = `<div class="text-xs text-slate-500">No activities</div>`;
                        return;
                    }

                    actRows.forEach((r) => {
                        const row = document.createElement('div');
                        row.className = "flex gap-2 items-center";

                        const desktopSelect = r.querySelector('.actSelect');
                        const desktopQty = r.querySelector('.actQty');

                        row.innerHTML = `
                                                    <select class="mActSelect flex-1 rounded-xl border-slate-200 text-xs py-1"></select>
                                                    <input class="mActQty w-12 rounded-xl border-slate-200 text-xs text-center py-1" type="number" min="1" value="1">
                                                    <button type="button" class="mActRemove text-slate-400 hover:text-rose-600">
                                                        <i class="fa-solid fa-xmark"></i>
                                                    </button>
                                                `;

                        const mSel = row.querySelector('.mActSelect');
                        const mQty = row.querySelector('.mActQty');

                        mSel.innerHTML = desktopSelect ? desktopSelect.innerHTML : `<option value="">No activities</option>`;
                        if (desktopSelect?.value) mSel.value = desktopSelect.value;
                        mQty.value = desktopQty?.value || 1;

                        mSel.addEventListener('change', () => {
                            if (desktopSelect) desktopSelect.value = mSel.value;
                            calcAllTotals();
                            syncMobileFromDesktop();
                        });

                        mQty.addEventListener('input', () => {
                            if (desktopQty) desktopQty.value = mQty.value;
                            calcAllTotals();
                            syncMobileFromDesktop();
                        });

                        row.querySelector('.mActRemove').addEventListener('click', () => {
                            r.remove();
                            calcAllTotals();
                            syncMobileFromDesktop();
                        });

                        mActs.appendChild(row);
                    });
                });

                applyPublicPriceVisibility();
            }

            function showError(id, message) {
                const el = document.getElementById(`error-${id}`);
                const input = document.getElementById(id);

                if (el) {
                    el.textContent = message;
                    el.classList.remove('hidden');
                }

                if (input) {
                    input.classList.add('border-rose-500', 'ring-2', 'ring-rose-500/20');
                }
            }

            function clearError(id) {
                const el = document.getElementById(`error-${id}`);
                const input = document.getElementById(id);

                if (el) {
                    el.textContent = '';
                    el.classList.add('hidden');
                }

                if (input) {
                    input.classList.remove('border-rose-500', 'ring-2', 'ring-rose-500/20');
                }
            }

            function validEmail(email) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
            }

            function validateStep1() {
                let ok = true;

                const name = document.getElementById('name').value.trim();
                const email = document.getElementById('email').value.trim();
                const phone = document.getElementById('phone').value.trim();
                const whatsapp = document.getElementById('whatsapp').value.trim();
                const startDate = document.getElementById('startDate').value;
                const nights = Number(document.getElementById('nights').value || 0);

                ['name', 'email', 'phone', 'whatsapp', 'startDate', 'nights'].forEach(clearError);

                if (!name) {
                    showError('name', 'Full name is required.');
                    ok = false;
                }

                if (!email) {
                    showError('email', 'Email is required.');
                    ok = false;
                } else if (!validEmail(email)) {
                    showError('email', 'Enter valid email.');
                    ok = false;
                }

                if (!phone) {
                    showError('phone', 'Phone required.');
                    ok = false;
                }

                if (!whatsapp) {
                    showError('whatsapp', 'WhatsApp required.');
                    ok = false;
                }

                if (!startDate) {
                    showError('startDate', 'Start date required.');
                    ok = false;
                }

                if (!nights || nights < 1) {
                    showError('nights', 'Enter at least 1 night.');
                    ok = false;
                }

                return ok;
            }

            function validateStep2() {
                let ok = true;

                const adults = Number(adultsEl.value || 0);
                const s = Number(singleRoomsEl.value || 0);
                const dC = Number(doubleRoomsEl.value || 0);
                const t = Number(tripleRoomsEl.value || 0);

                clearError('adults');

                if (!adults || adults < 1) {
                    showError('adults', 'At least 1 adult is required.');
                    ok = false;
                }

                if ((s + dC + t) === 0) {
                    alert("Please select at least one room (Single, Double, or Triple).");
                    ok = false;
                }

                return ok;
            }
        })();
    </script>
@endsection