@extends('layouts.site')

@section('title', ($package->name ?? 'Tour Package') . ' - Visit Sri Lanka 360')

@php
$cover = !empty($package->cover_image) ? asset('storage/' . ltrim($package->cover_image, '/')) : null;
$price = $package->price_from ? number_format((float) $package->price_from, 0) : null;

$destinations = $package->destinations ?? collect();
$days = $package->days ?? collect();
$gallery = collect($package->gallery_images ?? []);

$includes = collect($package->includes ?? [])
    ->map(fn($x) => is_array($x) ? ($x['text'] ?? null) : $x)
    ->filter()
    ->values();

$excludes = collect($package->excludes ?? [])
    ->map(fn($x) => is_array($x) ? ($x['text'] ?? null) : $x)
    ->filter()
    ->values();

$map = $package->map_embed ?? null;
$mapIsIframe = is_string($map) && str_contains($map, '<iframe');
$typeName = $package->type?->name ?? 'Tour Package';
@endphp

@section('content')
    <div class="tour-show-page ">

        {{-- HERO --}}
        <section class="relative full-bleed">
            <div class="relative overflow-hidden tour-hero-sm">
                @if($cover)
                    <img src="{{ $cover }}" alt="{{ $package->name }}" class="absolute inset-0 h-full w-full object-cover">
                @else
                    <div class="absolute inset-0 bg-slate-200"></div>
                @endif

                <div class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/75"></div>
                <div class="absolute inset-0 tour-hero-lights"></div>

                <div class="relative z-10 container-site h-full flex items-end">
                    <div class="pb-10 md:pb-16 max-w-4xl">
                        <div
                            class="inline-flex items-center gap-2 rounded-full bg-white/10 border border-white/15 px-4 py-2 text-white/90">
                            <span class="text-[11px] tracking-[.22em] uppercase">{{ $typeName }}</span>
                        </div>

                        <h1 class="mt-4 text-white text-3xl sm:text-4xl md:text-6xl font-semibold leading-[1.05]">
                            {{ $package->name }}
                        </h1>

                        @if(!empty($package->short_description))
                            <p class="mt-4 text-white/85 text-sm md:text-lg max-w-2xl leading-relaxed">
                                {{ $package->short_description }}
                            </p>
                        @endif

                        <div class="mt-6 flex flex-wrap gap-3">
                            <a href="#book" class="btn-gold">
                                Book Now
                            </a>
                            <a href="#plan" class="inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-semibold transition
                                          bg-white/10 text-white border border-white/20 hover:bg-white/15">
                                View Tour Plan
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SUMMARY BAR --}}
            <div class="container-site -mt-8 md:-mt-10 relative z-20">
                <div class="rounded-3xl border border-slate-200 bg-white shadow-soft overflow-hidden">
                    <div class="grid grid-cols-2 md:grid-cols-4">
                        <div class="p-5 md:p-6 border-b md:border-b-0 md:border-r border-slate-200">
                            <div class="tour-klabel">Price</div>
                            <div class="mt-2 text-slate-900 font-semibold">
                                @if($price)
                                    {{ $package->currency }} {{ $price }}
                                    <span class="text-xs font-medium text-slate-500">/{{ $package->price_unit }}</span>
                                @else
                                    Contact for price
                                @endif
                            </div>
                        </div>

                        <div class="p-5 md:p-6 border-b md:border-b-0 md:border-r border-slate-200">
                            <div class="tour-klabel">Duration</div>
                            <div class="mt-2 text-slate-900 font-semibold">
                                {{ (int) $package->duration_days }} Days
                                @if((int) $package->duration_nights > 0)
                                    <span class="text-xs font-medium text-slate-500">/ {{ (int) $package->duration_nights }}
                                        Nights</span>
                                @endif
                            </div>
                        </div>

                        <div class="p-5 md:p-6 border-r border-slate-200">
                            <div class="tour-klabel">Destinations</div>
                            <div class="mt-2 text-slate-900 font-semibold">
                                {{ $destinations->count() ?: '—' }}
                                <span class="text-xs font-medium text-slate-500">places</span>
                            </div>
                        </div>

                        <div class="p-5 md:p-6 flex items-center justify-between gap-4">
                            <div>
                                <div class="tour-klabel">Travellers</div>
                                <div class="mt-2 text-slate-900 font-semibold">
                                    Min {{ (int) $package->min_travellers }}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="h-8 md:h-10"></div>
            </div>
        </section>


        {{-- BODY --}}
        <section class="py-8 md:py-12">
            <div class="container-site">
                <div class="grid lg:grid-cols-12 gap-8 lg:gap-10">

                    {{-- LEFT --}}
                    <div class="lg:col-span-8 order-1">

                        {{-- INFO --}}
                        <div id="info" class="scroll-mt-24 mt-10">
                            <h2 class="text-2xl md:text-3xl font-semibold">Information</h2>

                            <div class="mt-6 grid md:grid-cols-2 gap-5">
                                <div class="card p-5">
                                    <div class="tour-klabel">Departure Location</div>
                                    <div class="mt-2 font-semibold text-slate-900">{{ $package->departure_location ?: '—' }}
                                    </div>
                                </div>

                                <div class="card p-5">
                                    <div class="tour-klabel">Return Location</div>
                                    <div class="mt-2 font-semibold text-slate-900">{{ $package->return_location ?: '—' }}
                                    </div>
                                </div>
                            </div>

                            @if($destinations->count())
                                <div class="mt-6 card p-5">
                                    <div class="tour-klabel">Destinations</div>
                                    <div class="mt-3 flex flex-wrap gap-2">
                                        @foreach($destinations as $d)
                                            <a href="{{ route('destinations.show', $d->slug) }}"
                                                class="px-3 py-1.5 rounded-full border border-slate-200 text-sm text-slate-700 hover:border-gold-500 hover:text-gold-700">
                                                {{ $d->name }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="mt-6 grid md:grid-cols-2 gap-5">
                                <div class="card p-5">
                                    <div class="font-semibold">What's included</div>
                                    <ul class="mt-4 space-y-2 text-sm text-slate-700">
                                        @forelse($includes as $i)
                                            <li class="flex gap-2">
                                                <span class="text-emerald-600 mt-0.5"><i
                                                        class="fa-solid fa-circle-check"></i></span>
                                                <span>{{ $i }}</span>
                                            </li>
                                        @empty
                                            <li class="text-slate-500">—</li>
                                        @endforelse
                                    </ul>
                                </div>

                                <div class="card p-5">
                                    <div class="font-semibold">Price does not include</div>
                                    <ul class="mt-4 space-y-2 text-sm text-slate-700">
                                        @forelse($excludes as $i)
                                            <li class="flex gap-2">
                                                <span class="text-rose-600 mt-0.5"><i
                                                        class="fa-solid fa-circle-xmark"></i></span>
                                                <span>{{ $i }}</span>
                                            </li>
                                        @empty
                                            <li class="text-slate-500">—</li>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                        </div>

                        {{-- TOUR PLAN --}}
                        <div id="plan" class="scroll-mt-24 mt-12">
                            <div class="flex items-end justify-between gap-3">
                                <h2 class="text-2xl md:text-3xl font-semibold">Tour Plan</h2>
                                <div class="text-xs text-slate-500 hidden md:block">Click a day to expand details</div>
                            </div>

                            @if($days->count())
                                <div class="mt-6 space-y-4">
                                    @foreach($days as $day)
                                        @php
        $img = !empty($day->image) ? asset('storage/' . ltrim($day->image, '/')) : null;
                                        @endphp

                                        <details class="group card overflow-hidden tour-accordion-item">
                                            <summary class="cursor-pointer list-none p-5 md:p-6 select-none">
                                                <div class="flex items-start gap-4">
                                                    <div
                                                        class="shrink-0 h-12 w-12 rounded-2xl bg-gold-500/15 border border-gold-500/25 grid place-items-center">
                                                        <div class="text-[11px] font-bold tracking-[.22em] uppercase text-gold-800">
                                                            Day
                                                        </div>
                                                        <div class="-mt-1 text-lg font-semibold text-slate-900">
                                                            {{ (int) $day->day_number }}
                                                        </div>
                                                    </div>

                                                    <div class="min-w-0 flex-1">
                                                        <div class="flex items-start justify-between gap-3">
                                                            <div class="min-w-0">
                                                                <div class="text-lg md:text-xl font-semibold text-slate-900">
                                                                    {{ $day->title }}
                                                                </div>

                                                                <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-slate-500">
                                                                    @if(!empty($day->travel_time))
                                                                        <span class="inline-flex items-center gap-2">
                                                                            <i class="fa-regular fa-clock"></i> {{ $day->travel_time }}
                                                                        </span>
                                                                    @endif
                                                                    @if(!empty($day->distance_km))
                                                                        <span class="inline-flex items-center gap-2">
                                                                            <i class="fa-solid fa-road"></i> {{ $day->distance_km }} km
                                                                        </span>
                                                                    @endif
                                                                    @if(!empty($day->overnight_text))
                                                                        <span class="inline-flex items-center gap-2">
                                                                            <i class="fa-solid fa-bed"></i> Overnight included
                                                                        </span>
                                                                    @endif
                                                                </div>
                                                            </div>

                                                            <div
                                                                class="shrink-0 mt-1 h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-600 group-open:border-gold-500/50 group-open:text-gold-700 transition">
                                                                <i class="fa-solid fa-chevron-down transition"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </summary>

                                            <div class="border-t border-slate-200">
                                                <div class="p-5 md:p-6">
                                                    <div class="tour-plan-card">
                                                        @if($img)
                                                            <div class="tour-plan-media">
                                                                <img src="{{ $img }}" alt="">
                                                                <div class="tour-plan-media-overlay"></div>

                                                                <div class="tour-plan-media-badge">
                                                                    <i class="fa-solid fa-image"></i>
                                                                    Day {{ (int) $day->day_number }}
                                                                </div>
                                                            </div>
                                                        @endif

                                                        <div class="tour-plan-content">
                                                            <div class="tour-plan-pills">
                                                                @if(!empty($day->travel_time))
                                                                    <span class="tour-pill"><i class="fa-regular fa-clock"></i> {{ $day->travel_time }}</span>
                                                                @endif
                                                                @if(!empty($day->distance_km))
                                                                    <span class="tour-pill"><i class="fa-solid fa-road"></i> {{ $day->distance_km }} km</span>
                                                                @endif
                                                                @if(!empty($day->overnight_text))
                                                                    <span class="tour-pill"><i class="fa-solid fa-bed"></i> Overnight</span>
                                                                @endif
                                                            </div>

                                                            @if(!empty($day->description))
                                                                <div class="tour-prose">
                                                                    {{ $day->description }}
                                                                </div>
                                                            @endif

                                                            @if(!empty($day->overnight_text))
                                                                <div class="tour-overnight">
                                                                    <div class="tour-overnight-title">
                                                                        <i class="fa-solid fa-bed"></i>
                                                                        Overnight
                                                                    </div>
                                                                    <div class="tour-overnight-text">
                                                                        {{ $day->overnight_text }}
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </details>
                                    @endforeach
                                </div>
                            @else
                                <div class="mt-6 text-slate-600">No day plan added yet.</div>
                            @endif
                        </div>

                        {{-- LOCATION --}}
                        <div id="location" class="scroll-mt-24 mt-12">
                            <h2 class="text-2xl md:text-3xl font-semibold">Location</h2>

                            <div class="mt-6 card p-4">
                                @if($map)
                                    <div class="map-embed border border-slate-200">
                                        @if($mapIsIframe)
                                            {!! $map !!}
                                        @else
                                            <iframe src="{{ $map }}" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
                                                allowfullscreen></iframe>
                                        @endif
                                    </div>
                                @else
                                    <div class="text-slate-500">No map added.</div>
                                @endif
                            </div>
                        </div>

                        {{-- GALLERY --}}
                        <div id="gallery" class="scroll-mt-24 mt-12">
                            <h2 class="text-2xl md:text-3xl font-semibold">Gallery</h2>

                            @if($gallery->count())
                                <div class="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                    @foreach($gallery as $img)
                                        <div class="rounded-2xl overflow-hidden border border-slate-200 bg-slate-100">
                                            <img src="{{ asset('storage/' . ltrim($img, '/')) }}"
                                                class="h-40 sm:h-44 md:h-56 w-full object-cover" alt="">
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="mt-6 text-slate-600">No gallery images yet.</div>
                            @endif
                        </div>

                        {{-- ADDITIONAL --}}
                        <div id="additional" class="scroll-mt-24 mt-12">
                            <h2 class="text-2xl md:text-3xl font-semibold">Additional Info</h2>

                            <div class="mt-6 card p-6 text-slate-700 whitespace-pre-line leading-relaxed">
                                {{ $package->additional_info ?? '—' }}
                            </div>
                        </div>

                        {{-- SIMILAR --}}
                        <div id="similar" class="scroll-mt-24 mt-12">
                            <h2 class="text-2xl md:text-3xl font-semibold">Similar Tours</h2>

                            @if(!empty($similar) && $similar->count())
                                <div class="mt-6 grid sm:grid-cols-2 gap-6">
                                    @foreach($similar as $p)
                                        @php
        $img = $p->cover_image ? asset('storage/' . ltrim($p->cover_image, '/')) : 'https://placehold.co/900x600';
                                        @endphp
                                        <a href="{{ route('tours.show', $p->slug) }}"
                                            class="group rounded-3xl overflow-hidden border border-slate-200 bg-white hover:shadow-soft transition">
                                            <div class="relative h-48 overflow-hidden">
                                                <img src="{{ $img }}"
                                                    class="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-[1.04]"
                                                    alt="">
                                                <div
                                                    class="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent">
                                                </div>
                                                <div class="absolute left-5 right-5 bottom-5 text-white">
                                                    <div class="text-[11px] tracking-[.22em] uppercase text-white/80">
                                                        {{ $p->type?->name ?? 'Tour' }}</div>
                                                    <div class="mt-1 font-semibold">{{ $p->name }}</div>
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            @else
                                <div class="mt-6 text-slate-600">No similar tours found.</div>
                            @endif
                        </div>

                    </div>

                    {{-- RIGHT --}}
                    <aside class="lg:col-span-4 order-2">
                        <div class="lg:sticky lg:top-28 space-y-6">
                            <div id="book" class="card p-6">
                                <div class="text-lg font-semibold">Book this Tour</div>
                                <p class="mt-2 text-sm text-slate-600">Flexible date. We confirm via WhatsApp/email.</p>

                                @if(session('success'))
                                    <div
                                        class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">
                                        {{ session('success') }}
                                    </div>
                                @endif

                                @if(session('error'))
                                    <div class="mt-4 rounded-2xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800">
                                        {{ session('error') }}
                                    </div>
                                @endif

                                <form class="mt-5 space-y-4" method="POST"
                                    action="{{ route('tours.book', $package->slug) }}">
                                    @csrf

                                    {{-- HIDDEN INPUTS FOR JS CALCULATION --}}
                                    <input type="hidden" id="package_price" value="{{ $package->price_from ?? 0 }}">
                                    <input type="hidden" id="package_advance" value="{{ $package->advance_per_person ?? 0 }}">

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Full Name</label>
                                        <input name="full_name" value="{{ old('full_name') }}" class="mt-1 input-premium" required>
                                        @error('full_name')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="grid grid-cols-2 gap-3">
                                        <div>
                                            <label class="text-xs font-medium text-slate-600">Adults</label>
                                            <input name="adults" id="adults" type="number" min="1" value="{{ old('adults', 2) }}"
                                                class="mt-1 input-premium" required oninput="calculateLivePrice()">
                                            @error('adults')
                                                <div class="text-xs text-rose-600 mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div>
                                            <label class="text-xs font-medium text-slate-600">Children</label>
                                            <input name="children" id="children" type="number" min="0" value="{{ old('children', 0) }}"
                                                class="mt-1 input-premium" oninput="generateAgeInputs()">
                                        </div>
                                    </div>

                                    {{-- CHILDREN POLICY + DYNAMIC AGES --}}
                                    <div id="children-policy-wrap" class="hidden mt-2 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-4">
                                        <div class="text-sm font-semibold text-slate-900">Children Policy</div>
                                        <div class="mt-1 text-sm text-slate-700 leading-relaxed">
                                            Children <strong>0–5 years travel free of charge</strong>.<br>
                                            Children <strong>5–12 years are charged half price</strong>.<br>
                                            Children <strong>above 12 years are considered adults</strong>.
                                        </div>

                                        <div id="children-ages-container" class="mt-4"></div>
                                    </div>

                                    @error('children_ages')
                                        <div class="text-xs text-rose-600 mt-1">{{ $message }}</div>
                                    @enderror

                                    @error('children_ages.*')
                                        <div class="text-xs text-rose-600 mt-1">{{ $message }}</div>
                                    @enderror

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Arrival Date</label>
                                        <input name="arrival_date" type="date" class="mt-1 input-premium" required>
                                        @error('arrival_date')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Flight No</label>
                                        <input name="arrival_flight_number" class="mt-1 input-premium" placeholder="EK 650"
                                            value="{{ old('arrival_flight_number') }}" required>
                                        @error('arrival_flight_number')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">WhatsApp</label>
                                        <input name="whatsapp" value="{{ old('whatsapp') }}" class="mt-1 input-premium" placeholder="+94 77 123 4567"
                                            required>
                                        @error('whatsapp')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Email</label>
                                        <input name="email" type="email" value="{{ old('email') }}" class="mt-1 input-premium" placeholder="you@email.com"
                                            required>
                                        @error('email')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                    </div>

                                    <div>
                                        <label class="text-xs font-medium text-slate-600">Message (optional)</label>
                                        <textarea name="message" rows="3" class="mt-1 input-premium"
                                            placeholder="Any special requests?"></textarea>
                                    </div>

                                    {{-- LIVE PRICE SUMMARY CARD --}}
                                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4 mt-2">
                                        <div class="text-sm font-semibold text-slate-800 mb-3">Booking Summary</div>

                                        <div id="price-breakdown" class="space-y-1.5 text-sm text-slate-600 mb-3">
                                            </div>

                                        <div class="border-t border-slate-200 pt-3 flex justify-between items-center text-slate-800 font-semibold">
                                            <span>Total Package:</span>
                                            <span>$<span id="live-total">0.00</span></span>
                                        </div>
                                        <div class="flex justify-between items-center text-gold-700 font-bold mt-1.5">
                                            <span>Advance Due:</span>
                                            <span>$<span id="live-advance">0.00</span></span>
                                        </div>
                                    </div>

                                    <button class="btn-gold w-full justify-center mt-4" type="submit">Pay Advance & Reserve Tour</button>

                                    <div class="text-[11px] text-slate-500 text-center mt-3">
                                        By submitting, you agree we may contact you regarding this tour package.
                                    </div>
                                </form>
                            </div>
                        </div>
                    </aside>

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

    </div>

    @push('scripts')
        <script>
            const oldChildrenAges = @json(old('children_ages', []));

            function generateAgeInputs() {
                    const childrenCount = parseInt(document.getElementById('children').value) || 0;
                    const container = document.getElementById('children-ages-container');
                    const policyWrap = document.getElementById('children-policy-wrap');

                    container.innerHTML = '';

                    if (childrenCount > 0) {
                        policyWrap.classList.remove('hidden');

                        let html = `
                <label class="text-xs font-medium text-slate-600">Children Ages</label>
                <div class="flex flex-wrap gap-2 mt-2">
            `;

                        for (let i = 0; i < childrenCount; i++) {
                            const oldValue = oldChildrenAges[i] ?? '';

                            html += `
                    <div class="w-16">
                        <input
                            type="number"
                            name="children_ages[]"
                            class="input-premium child-age-input text-center px-1"
                            placeholder="Age"
                            min="0"
                            max="17"
                            value="${oldValue}"
                            oninput="clearChildrenAgeError(); calculateLivePrice();"
                            required
                        >
                    </div>
                `;
                        }

                        html += `</div>`;
                        container.innerHTML = html;
                    } else {
                        policyWrap.classList.add('hidden');
                    }

                    calculateLivePrice();
                }

            function clearChildrenAgeError() {
                const errorEl = document.getElementById('children-age-inline-error');
                if (errorEl) {
                    errorEl.remove();
                }
            }

            function showChildrenAgeError(message) {
                clearChildrenAgeError();

                const container = document.getElementById('children-ages-container');
                const div = document.createElement('div');
                div.id = 'children-age-inline-error';
                div.className = 'text-xs text-rose-600 mt-1';
                div.textContent = message;
                container.insertAdjacentElement('afterend', div);
            }

            function calculateLivePrice() {
                const pricePerPerson = parseFloat(document.getElementById('package_price').value) || 0;
                const advancePerPerson = parseFloat(document.getElementById('package_advance').value) || 0;
                const adults = parseInt(document.getElementById('adults').value) || 0;

                let totalPrice = adults * pricePerPerson;
                let totalAdvance = adults * advancePerPerson;

                let breakdownHtml = `
                    <div class="flex justify-between">
                        <span>Adults (${adults} × $${pricePerPerson.toFixed(2)})</span>
                        <span>$${totalPrice.toFixed(2)}</span>
                    </div>
                `;

                const ageInputs = document.querySelectorAll('.child-age-input');

                ageInputs.forEach((input, index) => {
                    const age = parseInt(input.value);

                    if (isNaN(age)) return;

                    if (age <= 5) {
                        breakdownHtml += `
                            <div class="flex justify-between text-emerald-600">
                                <span>Child ${index + 1} (Age ${age})</span>
                                <span>Free</span>
                            </div>
                        `;
                    } else if (age <= 12) {
                        totalPrice += pricePerPerson;
                        totalAdvance += advancePerPerson * 0.5;

                        breakdownHtml += `
                            <div class="flex justify-between">
                                <span>Child ${index + 1} (Age ${age})</span>
                                <span>$${pricePerPerson.toFixed(2)} <span class="text-[10px] text-gold-600">(50% Adv)</span></span>
                            </div>
                        `;
                    } else {
                        totalPrice += pricePerPerson;
                        totalAdvance += advancePerPerson;

                        breakdownHtml += `
                            <div class="flex justify-between">
                                <span>Child ${index + 1} (Age ${age})</span>
                                <span>$${pricePerPerson.toFixed(2)}</span>
                            </div>
                        `;
                    }
                });

                document.getElementById('price-breakdown').innerHTML = breakdownHtml;
                document.getElementById('live-total').innerText = totalPrice.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                document.getElementById('live-advance').innerText = totalAdvance.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            document.addEventListener('DOMContentLoaded', () => {
                const items = document.querySelectorAll('.tour-accordion-item');

                items.forEach((item) => {
                    item.addEventListener('toggle', () => {
                        if (!item.open) return;

                        items.forEach((other) => {
                            if (other !== item) {
                                other.open = false;
                            }
                        });
                    });
                });

                generateAgeInputs();
                calculateLivePrice();

                const form = document.querySelector('form[action="{{ route('tours.book', $package->slug) }}"]');

                if (form) {
                    form.addEventListener('submit', function (e) {
                        clearChildrenAgeError();

                        const childrenCount = parseInt(document.getElementById('children').value) || 0;

                        if (childrenCount > 0) {
                            const ageInputs = document.querySelectorAll('.child-age-input');
                            let allFilled = true;

                            if (ageInputs.length !== childrenCount) {
                                allFilled = false;
                            }

                            ageInputs.forEach((input) => {
                                if (input.value === '' || input.value === null) {
                                    allFilled = false;
                                }
                            });

                            if (!allFilled) {
                                e.preventDefault();
                                showChildrenAgeError('Please provide the age for all children.');
                            }
                        }
                    });
                }
            });
        </script>
    @endpush
@endsection

@push('styles')
    <style>
        /* ✅ KILL MOBILE WHITE SPACE (horizontal overflow) */
        .tour-show-page {
            width: 100%;
            overflow-x: hidden;
        }

        .tour-show-page img,
        .tour-show-page iframe,
        .tour-show-page video,
        .tour-show-page svg {
            max-width: 100%;
        }

        /* ✅ HERO sizing */
        .tour-hero {
            height: 62vh;
            min-height: 520px;
        }

        @media (min-width:768px) {
            .tour-hero {
                height: 72vh;
                min-height: 620px;
            }
        }

        .tour-hero-lights {
            background:
                radial-gradient(900px 520px at 18% 20%, rgba(215, 166, 43, .22), transparent 60%),
                radial-gradient(800px 520px at 85% 35%, rgba(255, 255, 255, .10), transparent 55%);
        }

        /* ============================
                 ✅ PREMIUM TABS (MOBILE FIX)
                 ============================ */
        .tour-tabs {
            border-radius: 18px;
            padding: 10px;
        }

        .tour-tabs-rail {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 4px;
            scroll-snap-type: x mandatory;
        }

        .tour-tabs-rail>a {
            scroll-snap-align: start;
        }

        .tour-no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .tour-no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .tour-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, .35);
            background: #fff;
            color: #0f172a;
            white-space: nowrap;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            transition: all .15s ease;
        }

        .tour-tab:hover {
            background: #f8fafc;
            border-color: rgba(215, 166, 43, .55);
        }

        /* ✅ active section highlight (CSS only) */
        .tour-tab:focus {
            outline: none;
            border-color: rgba(215, 166, 43, .9);
            box-shadow: 0 0 0 4px rgba(215, 166, 43, .16);
        }

        @media (min-width:768px) {
            .tour-tab {
                height: 42px;
                padding: 0 16px;
                font-size: 12px;
                letter-spacing: .16em;
            }
        }

        /* tiny label */
        .tour-klabel {
            font-size: 11px;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: #64748b;
        }

        /* ============================
                 ✅ TOUR PLAN LAYOUT HELPERS
                 ============================ */
        .tour-day-flex {
            display: flex;
            flex-direction: column;
            gap: 18px;
            align-items: flex-start;
        }

        @media (min-width:768px) {
            .tour-day-flex {
                flex-direction: row;
                gap: 24px;
            }
        }

        .tour-day-media {
            width: 100%;
            flex: 0 0 auto;
        }

        @media (min-width:768px) {
            .tour-day-media {
                width: 280px;
            }
        }

        @media (min-width:1024px) {
            .tour-day-media {
                width: 320px;
            }
        }

        .tour-media-box {
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(226, 232, 240, 1);
            background: #f1f5f9;
            aspect-ratio: 16/10;
        }

        .tour-media-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .tour-day-text {
            min-width: 0;
            flex: 1;
            width: 100%;
        }

        /* ============================
                 ✅ PREMIUM DESCRIPTION STYLE
                 ============================ */
        .tour-desc {
            width: 100% !important;
            min-width: 0 !important;
            display: block !important;

            /* keep the one-letter-per-line fix */
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
            white-space: pre-line !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            letter-spacing: normal !important;

            /* premium typography */
            font-size: 14px;
            line-height: 1.75;
            color: #334155;
            background: #fff;
            border: 1px solid rgba(226, 232, 240, 1);
            border-radius: 18px;
            padding: 14px 14px;
        }

        /* subtle accent line */
        .tour-desc {
            position: relative;
        }

        .tour-desc:before {
            content: "";
            position: absolute;
            left: 10px;
            top: 12px;
            bottom: 12px;
            width: 3px;
            border-radius: 99px;
            background: rgba(215, 166, 43, .55);
            opacity: .9;
        }

        .tour-desc {
            padding-left: 22px;
        }

        @media (min-width:768px) {
            .tour-desc {
                font-size: 15px;
                padding: 16px 16px 16px 26px;
            }

            .tour-desc:before {
                left: 12px;
                top: 14px;
                bottom: 14px;
            }
        }

        /* ✅ Map embed responsive */
        .map-embed {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            overflow: hidden;
            border-radius: 16px;
        }

        .map-embed iframe {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            border: 0 !important;
        }

        /* Chevron rotate */
        details[open] i.fa-chevron-down {
            transform: rotate(180deg);
        }

        @layer components {

            /* Tour details hero (smaller) */
            .tour-hero-sm {
                height: 28vh;
                /* ✅ reduce from 34vh */
                min-height: 260px;
                /* ✅ reduce */
            }

            @media (min-width: 768px) {
                .tour-hero-sm {
                    height: 32vh;
                    /* ✅ reduce from 38vh */
                    min-height: 340px;
                    /* ✅ reduce */
                }
            }
        }
    </style>
@endpush