{{-- resources/views/page/agency/themes/default/tour-detail.blade.php --}}
@php
    $productTypeName = $productType === 'gunubirlik-tur' ? 'Günübirlik Tur' : 'Kültür Turu';
    $isKulturTuru = $productType === 'kultur-turu';
    $isGunubirlik = $productType === 'gunubirlik-tur';

    // Fiyat ve Para Birimi
    if ($isKulturTuru) {
        $defaultPricing = $tour->activePricings->where('is_default', true)->first() ?? $tour->activePricings->first();
        $adultPrice = $defaultPricing->adult_price ?? 0;
        $currency = $defaultPricing->currency ?? 'TRY';
    } else {
        $adultPrice = $tour->base_price_adult ?? $tour->adult_price ?? 0;
        $currency = $tour->currency ?? 'TRY';
    }

    $currencySymbol = match ($currency) {
        'TRY', 'TL' => '₺',
        'USD' => '$',
        'EUR' => '€',
        'GBP' => '£',
        default => $currency
    };

    // Görseller
    $galleryImages = $tour->galleryImages ?? collect();
    $allImages = collect();
    if ($tour->coverImage) {
        $allImages->push($tour->coverImage);
    }
    $allImages = $allImages->merge($galleryImages);
@endphp

<x-agency-theme-layout :agency="$agency" :page="$page" :theme="$theme" :themeSettings="$themeSettings">

    {{-- MODERN HERO SECTION --}}
    <section class="tour-hero">
        <div class="hero-bg-slider" id="heroBgSlider">
            @if($allImages->count() > 0)
                @foreach($allImages as $index => $image)
                    <div class="hero-bg-slide {{ $index === 0 ? 'active' : '' }}"
                        style="background-image: url('{{ $image->image_url }}')"></div>
                @endforeach
            @else
                <div class="hero-bg-slide active no-image-pattern">
                    <div class="no-image-content">
                        <i class="fas fa-camera-retro"></i>
                        <span>Henüz fotoğraf galerisi eklenmemiş</span>
                    </div>
                </div>
            @endif
            <div class="hero-overlay-gradient"></div>
        </div>

        <div class="container hero-content-container">
            {{-- Breadcrumb --}}
            <nav class="modern-breadcrumb">
                <a href="{{ route('customer.agency.show', $agency->slug) }}"><i class="fas fa-home"></i>
                    {{ $agency->name }}</a>
                <span class="sep">/</span>
                <a
                    href="{{ route('customer.agency.tours.list', ['agency' => $agency->slug, 'type' => $productType]) }}">{{ $productTypeName }}ları</a>
                <span class="sep">/</span>
                <span class="current">{{ Str::limit($tour->name, 40) }}</span>
            </nav>

            <div class="hero-main-info">
                @if($tour->code)
                    <div class="tour-code"><i class="fas fa-hashtag"></i> {{ $tour->code }}</div>
                @endif
                <div class="hero-badges">
                    <span class="badge badge-type">{{ $productTypeName }}</span>
                    @if($tour->is_featured) <span class="badge badge-featured"><i class="fas fa-star"></i> Öne
                    Çıkan</span> @endif
                    @if($tour->is_new) <span class="badge badge-new">✨ Yeni</span> @endif
                    
                    @if($tour->difficulty_level)
                        @php
                            $diffMap = [
                                'easy' => ['label' => 'Kolay', 'class' => 'easy'],
                                'moderate' => ['label' => 'Orta', 'class' => 'moderate'],
                                'challenging' => ['label' => 'Zorlu', 'class' => 'challenging'],
                                'extreme' => ['label' => 'Ekstrem', 'class' => 'extreme'],
                            ];
                            $diff = $diffMap[$tour->difficulty_level] ?? ['label' => ucfirst($tour->difficulty_level), 'class' => ''];
                        @endphp
                        <span class="badge badge-difficulty {{ $diff['class'] }}">{{ $diff['label'] }}</span>
                    @endif
                </div>

                <h1 class="tour-hero-title">{{ $tour->name }}</h1>

                <div class="hero-meta-row">
                    @if($tour->departureCity)
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>{{ $tour->departureCity->city ?? $tour->departureCity->name }} Çıkışlı</span>
                        </div>
                    @endif

                    @if($isKulturTuru)
                        <div class="meta-item">
                            <i class="fas fa-history"></i>
                            <span>{{ $tour->nights }} Gece / {{ $tour->days }} Gün</span>
                        </div>
                    @elseif($isGunubirlik)
                        <div class="meta-item">
                            <i class="fas fa-clock"></i>
                            <span>
                                @if($tour->departure_time && $tour->return_time)
                                    {{ \Carbon\Carbon::parse($tour->departure_time)->format('H:i') }} -
                                    {{ \Carbon\Carbon::parse($tour->return_time)->format('H:i') }}
                                @else
                                    Günübirlik
                                @endif
                            </span>
                        </div>
                    @endif

                    @if(isset($tour->activeItineraries) && $tour->activeItineraries->count() > 0)
                        <div class="meta-item mobile-hidden">
                            <i class="fas fa-route"></i>
                            <span>{{ $tour->activeItineraries->count() }} Durak</span>
                        </div>
                    @endif

                    {{-- Languages --}}
                    @if(!empty($tour->languages) && is_array($tour->languages) && count($tour->languages) > 0)
                        <div class="meta-item">
                            <i class="fas fa-language"></i>
                            <span>{{ implode(', ', array_map('ucfirst', $tour->languages)) }}</span>
                        </div>
                    @endif

                    {{-- Capacity --}}
                    @if($tour->max_participants)
                        <div class="meta-item">
                            <i class="fas fa-users"></i>
                            <span>Maks. {{ $tour->max_participants }} Kişi</span>
                        </div>
                    @endif

                    {{-- Child Friendly --}}
                    @if($tour->child_friendly)
                        <div class="meta-item">
                            <i class="fas fa-child"></i>
                            <span>Çocuk Dostu</span>
                        </div>
                    @endif

                    {{-- Refundable --}}
                    @if($tour->refundable)
                        <div class="meta-item">
                            <i class="fas fa-undo-alt"></i>
                            <span>İade Edilebilir</span>
                        </div>
                    @endif
                </div>
            </div>

            @if($allImages->count() > 0)
                <div class="hero-gallery-trigger" onclick="openGalleryModal(0)">
                    <i class="fas fa-images"></i>
                    <span>Tüm Fotoğrafları Gör ({{ $allImages->count() }})</span>
                </div>
            @endif
        </div>
    </section>

    {{-- MAIN CONTENT GRID --}}
    <section class="tour-detail-content">
        <div class="container">
            <div class="content-grid">

                {{-- LEFT COLUMN --}}
                <div class="detail-left">

                    {{-- HIGHLIGHTS BAR (Günübirlik/Kültür Farklılaşması) --}}
                    <div class="display-card features-bar">
                        @if($isGunubirlik)
                            <div class="feature-box">
                                <div class="icon"><i class="fas fa-utensils"></i></div>
                                <div class="text">
                                    <small>Yemek</small>
                                    <strong>{{ $tour->meal_included ? ($tour->meal_type ?? 'Dahil') : 'Hariç' }}</strong>
                                </div>
                            </div>
                            <div class="feature-box">
                                <div class="icon"><i class="fas fa-user-tie"></i></div>
                                <div class="text">
                                    <small>Rehberlik</small>
                                    <strong>{{ $tour->has_guide ? 'Profesyonel Rehber' : 'Rehbersiz' }}</strong>
                                </div>
                            </div>
                            <div class="feature-box">
                                <div class="icon"><i class="fas fa-bus"></i></div>
                                <div class="text">
                                    <small>Ulaşım</small>
                                    <strong>{{ $tour->transportation_type ?? 'Lüks Araçlar' }}</strong>
                                </div>
                            </div>
                            @if($tour->min_age)
                                <div class="feature-box">
                                    <div class="icon"><i class="fas fa-user-check"></i></div>
                                    <div class="text">
                                        <small>Yaş Sınırı</small>
                                        <strong>{{ $tour->min_age }}+ Yaş</strong>
                                    </div>
                                </div>
                            @endif
                        @else
                            <div class="feature-box">
                                <div class="icon"><i class="fas fa-bed"></i></div>
                                <div class="text">
                                    <small>Konaklama</small>
                                    <strong>{{ $tour->nights }} Gece</strong>
                                </div>
                            </div>
                            <div class="feature-box">
                                <div class="icon"><i class="fas fa-bus"></i></div>
                                <div class="text">
                                    <small>Ulaşım</small>
                                    <strong>{{ $tour->transportation_type ?? 'Uçak/Otobüs' }}</strong>
                                </div>
                            </div>
                            <div class="feature-box">
                                <div class="icon"><i class="fas fa-suitcase"></i></div>
                                <div class="text">
                                    <small>Kontenjan</small>
                                    <strong>Sınırlı</strong>
                                </div>
                            </div>
                        @endif
                    </div>

                    {{-- TABS NAVIGATION --}}
                    <div class="sticky-tabs-nav" id="stickyTabs">
                        <button onclick="switchTab('section-program')" class="tab-btn active"><i class="fas fa-map-signs"></i> Program</button>
                        <button onclick="switchTab('section-details')" class="tab-btn"><i class="fas fa-info-circle"></i> Detaylar</button>
                        <button onclick="switchTab('section-dates')" class="tab-btn"><i class="fas fa-calendar-check"></i> Tarihler</button>
                        @if($tour->video_url)
                            <button onclick="switchTab('section-video')" class="tab-btn"><i class="fas fa-play-circle"></i> Video</button>
                        @endif
                    </div>

                    {{-- SECTION: DESCRIPTION & HIGHLIGHTS --}}
                    <div class="section-card tab-content-panel active" id="section-program">
                        <h2 class="section-title">Tur Hakkında</h2>

                        @if($tour->short_description)
                            <div class="short-desc">
                                {{ $tour->short_description }}
                            </div>
                        @endif

                        @php
                            $recurringDays = method_exists($tour, 'getRecurringDaysNames') ? $tour->getRecurringDaysNames() : [];
                        @endphp
                        @if(!empty($recurringDays))
                            <div class="mb-4">
                                <strong><i class="far fa-calendar-alt text-primary"></i> Hareket Günleri:</strong>
                                <span class="text-muted">{{ implode(', ', $recurringDays) }}</span>
                            </div>
                        @endif

                        @php
                            $destinations = !empty($tour->destinations) ? $tour->destinations : ($tour->visit_locations ?? []);
                        @endphp
                        @if(!empty($destinations))
                            {{-- Duraklar/Gezilecek Yerler --}}
                            <div class="visit-locations-tags">
                                <h5><i class="fas fa-map-marked-alt"></i> Gezilecek Yerler:</h5>
                                <div class="tags-wrapper">
                                    @foreach($destinations as $location)
                                        <span class="location-tag">{{ $location }}</span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="full-desc">
                            {!! $tour->description !!}
                        </div>

                        {{-- PROGRAM TIMELINE --}}
                        @if($isKulturTuru && isset($tour->activeItineraries) && $tour->activeItineraries->count() > 0)
                            <div class="itinerary-timeline">
                                <h3 class="timeline-main-title">Tur Programı</h3>
                                @foreach($tour->activeItineraries->groupBy('day_number') as $day => $itineraries)
                                    <div class="timeline-day">
                                        <div class="day-marker">
                                            <span class="day-count">{{ $day }}. Gün</span>
                                            <div class="day-line"></div>
                                        </div>
                                        <div class="day-content">
                                            <h4 class="day-title">{{ $itineraries->first()->title ?? $day . '. Gün Programı' }}
                                            </h4>

                                            <div class="day-details">
                                                @foreach($itineraries as $item)
                                                    <div class="timeline-event">
                                                        @if($item->start_time)
                                                            <div class="event-time">
                                                                {{ \Carbon\Carbon::parse($item->start_time)->format('H:i') }}</div>
                                                        @endif
                                                        <div class="event-desc">
                                                            {!! $item->description !!}
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @elseif($isGunubirlik && isset($tour->activeItineraries) && $tour->activeItineraries->count() > 0)
                            {{-- Günübirlik İçin Basitleştirilmiş Akış --}}
                            <div class="daily-flow">
                                <h3 class="flow-title">Tur Akışı</h3>
                                <div class="flow-steps">
                                    @foreach($tour->activeItineraries as $item)
                                        <div class="flow-step">
                                            <div class="step-time">
                                                {{ $item->start_time ? \Carbon\Carbon::parse($item->start_time)->format('H:i') : '' }}
                                            </div>
                                            <div class="step-dot"></div>
                                            <div class="step-info">
                                                <h5>{{ $item->title }}</h5>
                                                <div>{!! $item->description !!}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>

                    {{-- SECTION: INCLUSIONS / EXCLUSIONS --}}
                    <div class="section-card tab-content-panel" id="section-details">
                        <div class="inc-exc-grid">
                            <div class="inc-col">
                                <h3 class="col-title included"><i class="fas fa-check-circle"></i> Fiyata Dahil</h3>
                                <div class="check-list included">
                                    {!! $tour->inclusions ?? 'Bilgi bulunmuyor.' !!}
                                </div>
                            </div>
                            <div class="exc-col">
                                <h3 class="col-title excluded"><i class="fas fa-times-circle"></i> Fiyata Dahil Değil
                                </h3>
                                <div class="check-list excluded">
                                    {!! $tour->exclusions ?? 'Bilgi bulunmuyor.' !!}
                                </div>
                            </div>
                        </div>

                        @if($tour->notes || $tour->requirements)
                            <div class="info-alert-box">
                                <div class="icon"><i class="fas fa-info-circle"></i></div>
                                <div class="content">
                                    <h4>Önemli Bilgilendirme</h4>
                                    @if($tour->requirements)
                                        <div class="mb-2"><strong>Gereklilikler:</strong> {!! $tour->requirements !!}</div>
                                    @endif
                                    @if($tour->notes)
                                        <div>{!! $tour->notes !!}</div>
                                    @endif
                                </div>
                            </div>
                        @endif

                        @if($tour->cancellation_policy)
                            <div class="info-alert-box mt-3" style="background: #fff0f0; border-color: #ffcccc;">
                                <div class="icon"><i class="fas fa-exclamation-triangle" style="color: #ef4444;"></i>
                                </div>
                                <div class="content">
                                    <h4>İptal Koşulları</h4>
                                    <div>{!! $tour->cancellation_policy !!}</div>
                                </div>
                            </div>
                        @endif

                        @if($tour->terms_conditions)
                            <div class="mt-4">
                                <h4 class="mb-2">Şartlar ve Koşullar</h4>
                                <div class="text-muted small">
                                    {!! $tour->terms_conditions !!}
                                </div>
                            </div>
                        @endif
                    </div>

                    {{-- SECTION: DATES TABLE --}}
                    <div class="section-card tab-content-panel" id="section-dates">
                        <div class="card-header-flex">
                            <h2 class="section-title mb-0">Tur Tarihleri</h2>
                            @if($upcomingDates->total() > 0)
                                <span class="badge badge-success">{{ $upcomingDates->total() }} Tarih Müsait</span>
                            @endif
                        </div>

                        @if($upcomingDates && $upcomingDates->count() > 0)
                            <div class="modern-dates-list">
                                @foreach($upcomingDates as $date)
                                    @php
                                        $startDate = $isGunubirlik ? ($date->tour_date ?? $date->start_date) : $date->start_date;
                                        $price = $date->adult_price ?? $adultPrice;
                                        $carbonDate = \Carbon\Carbon::parse($startDate);
                                    @endphp
                                    <div class="date-item-row">
                                        <div class="date-big">
                                            <span class="day">{{ $carbonDate->format('d') }}</span>
                                            <span class="month">{{ $carbonDate->translatedFormat('M') }}</span>
                                        </div>
                                        <div class="date-details">
                                            <h4>{{ $carbonDate->translatedFormat('d F Y l') }}</h4>
                                            @if(!$isGunubirlik && $date->end_date)
                                                <small class="text-muted">Bitiş:
                                                    {{ \Carbon\Carbon::parse($date->end_date)->translatedFormat('d F Y') }}</small>
                                            @endif
                                            @if($isGunubirlik)
                                                <small class="text-muted">{{ \Carbon\Carbon::parse($startDate)->format('Y') }}
                                                    Dönemi</small>
                                            @endif
                                        </div>
                                        <div class="date-price-action">
                                            <div class="price-box">
                                                <span class="curr">{{ $currencySymbol }}</span>
                                                <span class="val">{{ number_format($price, 0, ',', '.') }}</span>
                                            </div>
                                            <button class="btn-book-sm">Seç</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Pagination --}}
                            <div class="dates-pagination">
                                {{ $upcomingDates->withQueryString()->links() }}
                            </div>
                        @else
                            <div class="empty-state">
                                <i class="far fa-calendar-times"></i>
                                <p>Planlanmış bir tarih bulunamadı. Lütfen iletişime geçin.</p>
                            </div>
                        @endif
                    </div>

                    {{-- SECTION: VIDEO --}}
                    @if($tour->video_url)
                        <div class="section-card tab-content-panel" id="section-video">
                            <h2 class="section-title">Tur Videosu</h2>
                            <div class="video-container" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;">
                                <iframe src="{{ str_replace('watch?v=', 'embed/', $tour->video_url) }}" 
                                    style="position:absolute;top:0;left:0;width:100%;height:100%;" 
                                    frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- RIGHT SIDEBAR (STICKY) --}}
                <div class="detail-sidebar">
                    <div class="sidebar-wrapper sticky-content">
                        {{-- Price Booking Card --}}
                        <div class="sidebar-card booking-card">
                            <div class="price-header">
                                <span class="label">Başlangıç Fiyatı</span>
                                <div class="price-tag">
                                    <span class="symbol">{{ $currencySymbol }}</span>
                                    <span class="amount">{{ number_format($adultPrice, 0, ',', '.') }}</span>
                                </div>
                                <span class="per-person">Kişi Başı</span>
                            </div>

                            <hr class="divider">

                            <div class="booking-features">
                                <div class="bf-item"><i class="fas fa-check"></i> En İyi Fiyat Garantisi</div>
                                <div class="bf-item"><i class="fas fa-check"></i> Güvenli Ödeme</div>
                                <div class="bf-item"><i class="fas fa-headset"></i> 7/24 Destek</div>
                                @if($tour->instant_booking)
                                    <div class="bf-item"><i class="fas fa-bolt" style="color:#f59e0b"></i> Anında Onay</div>
                                @endif
                            </div>

                            <div class="action-buttons">
                                @if($agency->contact_phone)
                                    <a href="tel:{{ $agency->contact_phone }}" class="btn-action primary">
                                        <i class="fas fa-phone-alt"></i> Hemen Ara Rezerve Et
                                    </a>
                                @endif

                                @if($agency->contact_whatsapp)
                                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $agency->contact_whatsapp) }}?text={{ urlencode('Merhaba, ' . $tour->name . ' turu hakkında bilgi almak istiyorum.') }}"
                                        target="_blank" class="btn-action whatsapp">
                                        <i class="fab fa-whatsapp"></i> WhatsApp'tan Yaz
                                    </a>
                                @endif
                            </div>
                        </div>

                        {{-- Agency Mini Profile --}}
                        <div class="sidebar-card agency-mini">
                            <div class="agency-head">
                                @if($agency->logo_path)
                                    <img src="{{ asset('storage/' . $agency->logo_path) }}" alt="{{ $agency->name }}">
                                @else
                                    <div class="logo-ph"><i class="fas fa-building"></i></div>
                                @endif
                                <div>
                                    <h5>{{ $agency->name }}</h5>
                                    <small>Onaylı Acente</small>
                                </div>
                            </div>
                            <div class="agency-actions">
                                <a href="{{ route('customer.agency.show', $agency->slug) }}">Diğer Turları</a>
                            </div>
                        </div>

                        {{-- Share Box --}}
                        <div class="share-box-minimal">
                            <span>Paylaş:</span>
                            <div class="share-links">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-whatsapp"></i></a>
                            </div>
                        </div>
                    </div>
                </div>

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

    {{-- Gallery Modal --}}
    <div class="modern-modal" id="galleryModal">
        <div class="modal-backdrop" onclick="closeGalleryModal()"></div>
        <div class="modal-content">
            <span class="modal-close" onclick="closeGalleryModal()"><i class="fas fa-times"></i></span>
            <div class="modal-gallery-view">
                <img src="" alt="Gallery" id="modalImg">
                <button class="nav-btn prev" onclick="changeSlide(-1)"><i class="fas fa-chevron-left"></i></button>
                <button class="nav-btn next" onclick="changeSlide(1)"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            /* Modern Variables */
            :root {
                --primary:
                    {{ $themeSettings['colors']['primary'] ?? '#2563eb' }}
                ;
                --secondary:
                    {{ $themeSettings['colors']['secondary'] ?? '#1e40af' }}
                ;
                --surface: #ffffff;
                --background: #f3f4f6;
                --text-main: #111827;
                --text-light: #6b7280;
                --radius-lg: 16px;
                --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
                --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.1);
                --font-main: 'Inter', system-ui, -apple-system, sans-serif;
            }

            body {
                font-family: var(--font-main);
                background-color: var(--background);
                color: var(--text-main);
            }

            /* Hero Section */
            .tour-hero {
                position: relative;
                height: 60vh;
                min-height: 500px;
                display: flex;
                align-items: flex-end;
                overflow: hidden;
            }

            .hero-bg-slider {
                position: absolute;
                inset: 0;
                z-index: 0;
            }

            .hero-bg-slide {
                position: absolute;
                inset: 0;
                background-size: cover;
                background-position: center;
                opacity: 0;
                transition: opacity 1s ease;
            }

            .hero-bg-slide.active {
                opacity: 1;
                animation: heroZoom 20s infinite alternate;
            }

            @keyframes heroZoom {
                from {
                    transform: scale(1);
                }

                to {
                    transform: scale(1.1);
                }
            }

            .hero-bg-slide.no-image-pattern {
                background: linear-gradient(135deg, #1e293b, #0f172a);
                display: flex;
                align-items: center;
                justify-content: center;
                animation: none !important;
            }

            .hero-bg-slide.no-image-pattern::before {
                content: '';
                position: absolute;
                inset: 0;
                background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
                background-size: 32px 32px;
                animation: panPattern 60s linear infinite;
            }

            @keyframes panPattern {
                from { background-position: 0 0; }
                to { background-position: -320px -320px; }
            }

            .no-image-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1.25rem;
                color: rgba(255, 255, 255, 0.5);
                transform: translateY(-30px);
                z-index: 2;
                pointer-events: none;
            }

            .no-image-content i {
                font-size: 4rem;
                opacity: 0.8;
                filter: drop-shadow(0 4px 15px rgba(0,0,0,0.4));
            }

            .no-image-content span {
                font-size: 1.25rem;
                font-weight: 500;
                letter-spacing: 0.5px;
            }

            .hero-overlay-gradient {
                position: absolute;
                inset: 0;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.1));
                z-index: 1;
            }

            .hero-content-container {
                position: relative;
                z-index: 10;
                padding-bottom: 3rem;
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
                padding-left: 20px;
                padding-right: 20px;
            }

            /* Breadcrumb */
            .modern-breadcrumb {
                color: rgba(255, 255, 255, 0.8);
                font-size: 0.9rem;
                margin-bottom: 1.5rem;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .modern-breadcrumb a {
                color: inherit;
                text-decoration: none;
                transition: 0.3s;
            }

            .modern-breadcrumb a:hover {
                color: #fff;
            }

            .modern-breadcrumb .sep {
                opacity: 0.5;
            }

            .modern-breadcrumb .current {
                color: #fff;
                font-weight: 500;
            }

            /* Hero Info */
            .tour-hero-title {
                font-size: 3rem;
                font-weight: 800;
                color: #fff;
                margin: 0 0 1rem 0;
                line-height: 1.2;
                text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            }

            .tour-code {
                display: inline-block;
                background: rgba(255,255,255,0.15);
                backdrop-filter: blur(5px);
                padding: 4px 12px;
                border-radius: 6px;
                font-size: 0.85rem;
                margin-bottom: 10px;
                color: rgba(255,255,255,0.9);
                border: 1px solid rgba(255,255,255,0.2);
            }

            .hero-badges {
                display: flex;
                gap: 10px;
                margin-bottom: 1rem;
                flex-wrap: wrap;
            }

            .badge {
                padding: 6px 14px;
                border-radius: 50px;
                font-size: 0.8em;
                font-weight: 600;
                text-transform: uppercase;
                color: #fff;
                backdrop-filter: blur(10px);
            }

            .badge-type {
                background: rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.3);
            }

            .badge-featured {
                background: linear-gradient(135deg, #f59e0b, #d97706);
            }

            .badge-new {
                background: linear-gradient(135deg, #10b981, #059669);
            }

            .badge-difficulty {
                background: rgba(0,0,0,0.6);
                border: 1px solid rgba(255,255,255,0.2);
            }
            .badge-difficulty.easy { color: #10b981; }
            .badge-difficulty.moderate { color: #f59e0b; }
            .badge-difficulty.challenging { color: #f97316; }
            .badge-difficulty.extreme { color: #ef4444; }

            .hero-meta-row {
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                color: #fff;
                font-size: 1rem;
                margin-top: 15px;
            }

            .meta-item {
                display: flex;
                align-items: center;
                gap: 8px;
                background: rgba(0, 0, 0, 0.5);
                padding: 8px 16px;
                border-radius: 8px;
                backdrop-filter: blur(5px);
            }

            .meta-item i {
                color: var(--primary);
            }

            .hero-gallery-trigger {
                position: absolute;
                right: 20px;
                bottom: 30px;
                background: #fff;
                color: #111;
                padding: 10px 20px;
                border-radius: 50px;
                font-weight: 600;
                cursor: pointer;
                transition: 0.3s;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            }

            .hero-gallery-trigger:hover {
                transform: translateY(-3px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
            }

            /* Content Layout */
            .tour-detail-content {
                padding: 40px 0;
            }

            .content-grid {
                display: grid;
                grid-template-columns: 1fr 350px;
                gap: 40px;
            }

            /* Left Column */
            .display-card {
                background: var(--surface);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-card);
                padding: 25px;
                margin-bottom: 30px;
            }

            .features-bar {
                display: flex;
                justify-content: space-around;
                padding: 30px;
                background: linear-gradient(to right, #fff, #f9fafb);
            }

            .feature-box {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .feature-box .icon {
                width: 45px;
                height: 45px;
                background: rgba(37, 99, 235, 0.1);
                color: var(--primary);
                border-radius: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
            }

            .feature-box .text {
                display: flex;
                flex-direction: column;
            }

            .feature-box .text small {
                color: var(--text-light);
                font-size: 0.8rem;
                text-transform: uppercase;
            }

            .feature-box .text strong {
                font-size: 1rem;
                color: var(--text-main);
            }

            /* Real Tabs */
            .sticky-tabs-nav {
                background: #fff;
                padding: 5px;
                border-radius: 12px;
                display: flex;
                gap: 5px;
                box-shadow: var(--shadow-card);
                margin-bottom: 20px;
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            .tab-btn {
                flex: 1;
                text-align: center;
                padding: 15px;
                border-radius: 8px;
                color: var(--text-light);
                font-weight: 600;
                transition: 0.3s;
                cursor: pointer;
                border: none;
                background: transparent;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }

            .tab-btn:hover {
                background: #f3f4f6;
                color: var(--primary);
            }

            .tab-btn.active {
                background: var(--primary);
                color: #fff;
                box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
            }

            /* Tab Content Visibility */
            .tab-content-panel {
                display: none;
                animation: fadeIn 0.3s ease;
            }

            .tab-content-panel.active {
                display: block;
            }

            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }

            /* Pagination Customization */
            .dates-pagination {
                margin-top: 2rem;
                display: flex;
                justify-content: center;
            }
            .pagination {
                display: flex;
                gap: 5px;
                list-style: none;
                padding: 0;
            }
            .page-link {
                display: block;
                padding: 8px 16px;
                background: #fff;
                border: 1px solid #e5e7eb;
                border-radius: 8px;
                color: var(--text-main);
                text-decoration: none;
                transition: 0.3s;
            }
            .page-item.active .page-link {
                background: var(--primary);
                color: white;
                border-color: var(--primary);
            }
            .page-link:hover:not(.active) {
                background: #f3f4f6;
            }

            /* Sections */
            .section-card {
                background: #fff;
                border-radius: var(--radius-lg);
                padding: 30px;
                box-shadow: var(--shadow-card);
            }

            .section-title {
                font-size: 1.5rem;
                font-weight: 700;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid #f3f4f6;
                color: var(--text-main);
            }

            .short-desc {
                font-size: 1.1rem;
                line-height: 1.6;
                color: var(--text-main);
                margin-bottom: 20px;
                font-weight: 500;
            }

            .full-desc {
                color: #4b5563;
                line-height: 1.8;
            }

            .full-desc p {
                margin-bottom: 1rem;
            }

            /* Daily Tour Tags */
            .visit-locations-tags {
                margin-bottom: 20px;
                background: #f8faff;
                padding: 15px;
                border-radius: 8px;
                border-left: 4px solid var(--primary);
            }

            .visit-locations-tags h5 {
                margin: 0 0 10px 0;
                color: var(--primary);
            }

            .tags-wrapper {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .location-tag {
                background: #fff;
                padding: 5px 12px;
                border-radius: 20px;
                border: 1px solid #e5e7eb;
                font-size: 0.9rem;
                color: var(--text-main);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
            }

            /* Timeline (Cultural) */
            .itinerary-timeline {
                margin-top: 30px;
                position: relative;
                padding-left: 20px;
            }

            .timeline-day {
                display: flex;
                gap: 20px;
                margin-bottom: 30px;
            }

            .day-marker {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-width: 60px;
            }

            .day-count {
                background: var(--primary);
                color: #fff;
                padding: 5px 10px;
                border-radius: 8px;
                font-weight: 700;
                font-size: 0.9rem;
                z-index: 2;
            }

            .day-line {
                width: 2px;
                background: #e5e7eb;
                flex-grow: 1;
                margin-top: 5px;
            }

            .day-content {
                flex-grow: 1;
                background: #f9fafb;
                padding: 20px;
                border-radius: 12px;
                border: 1px solid #f3f4f6;
            }

            .day-title {
                margin-top: 0;
                color: var(--primary);
                font-size: 1.1rem;
                margin-bottom: 15px;
            }

            .timeline-event {
                margin-bottom: 10px;
                border-left: 3px solid #e5e7eb;
                padding-left: 15px;
            }

            .event-time {
                font-weight: 700;
                color: var(--text-main);
            }

            .event-desc {
                font-size: 0.95rem;
                color: #4b5563;
            }

            /* Daily Flow */
            .daily-flow {
                background: #fff;
            }

            .flow-steps {
                margin-top: 20px;
            }

            .flow-step {
                display: flex;
                gap: 15px;
                padding-bottom: 20px;
                position: relative;
            }

            .flow-step:last-child {
                padding-bottom: 0;
            }

            .flow-step::before {
                content: '';
                position: absolute;
                left: 67px;
                top: 10px;
                bottom: 0;
                width: 2px;
                background: #f0f0f0;
            }

            .flow-step:last-child::before {
                display: none;
            }

            .step-time {
                width: 50px;
                text-align: right;
                font-weight: 600;
                color: var(--primary);
                font-size: 0.9rem;
                padding-top: 2px;
            }

            .step-dot {
                width: 12px;
                height: 12px;
                background: var(--secondary);
                border-radius: 50%;
                border: 3px solid #fff;
                box-shadow: 0 0 0 2px var(--secondary);
                margin-top: 5px;
                z-index: 2;
            }

            .step-info {
                flex: 1;
                padding-left: 10px;
            }

            .step-info h5 {
                margin: 0 0 5px 0;
                font-size: 1rem;
            }

            /* Inclusions */
            .inc-exc-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 30px;
                margin-bottom: 30px;
            }

            .col-title {
                font-size: 1.1rem;
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .col-title.included {
                color: #10b981;
            }

            .col-title.excluded {
                color: #ef4444;
            }

            .check-list ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .check-list li {
                margin-bottom: 8px;
                padding-left: 20px;
                position: relative;
                font-size: 0.95rem;
            }

            .check-list li::before {
                content: '•';
                position: absolute;
                left: 0;
                color: #d1d5db;
                font-size: 1.5rem;
                line-height: 1rem;
                top: 2px;
            }

            .check-list.included li::before {
                content: '✓';
                color: #10b981;
                font-size: 1rem;
            }

            .check-list.excluded li::before {
                content: '✕';
                color: #ef4444;
                font-size: 0.9rem;
            }

            .info-alert-box {
                background: #fff7ed;
                border: 1px solid #fed7aa;
                border-radius: 8px;
                padding: 20px;
                display: flex;
                gap: 15px;
            }

            .info-alert-box .icon {
                font-size: 1.5rem;
                color: #f97316;
            }

            /* Dates List */
            .card-header-flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                border-bottom: 2px solid #f3f4f6;
                padding-bottom: 15px;
            }

            .modern-dates-list {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

            .date-item-row {
                display: flex;
                align-items: center;
                background: #fff;
                border: 1px solid #f3f4f6;
                padding: 15px 20px;
                border-radius: 12px;
                transition: 0.3s;
            }

            .date-item-row:hover {
                border-color: var(--primary);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                transform: translateY(-2px);
            }

            .date-big {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #f3f4f6;
                width: 60px;
                height: 60px;
                border-radius: 10px;
                margin-right: 20px;
                color: var(--text-main);
            }

            .date-big .day {
                font-size: 1.4rem;
                font-weight: 800;
                line-height: 1;
            }

            .date-big .month {
                font-size: 0.8rem;
                text-transform: uppercase;
                font-weight: 600;
            }

            .date-details {
                flex-grow: 1;
            }

            .date-details h4 {
                margin: 0;
                font-size: 1.1rem;
                font-weight: 600;
            }

            .date-price-action {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .price-box {
                text-align: right;
            }

            .price-box .val {
                display: block;
                font-size: 1.3rem;
                font-weight: 800;
                color: var(--primary);
            }

            .btn-book-sm {
                background: var(--primary);
                color: #fff;
                border: none;
                padding: 10px 20px;
                border-radius: 8px;
                font-weight: 600;
                cursor: pointer;
                transition: 0.3s;
            }

            .btn-book-sm:hover {
                background: var(--secondary);
            }

            /* Sidebar */
            .detail-sidebar .sticky-content {
                position: sticky;
                top: 90px;
            }

            .sidebar-card {
                background: #fff;
                border-radius: var(--radius-lg);
                padding: 25px;
                margin-bottom: 20px;
                box-shadow: var(--shadow-card);
            }

            .price-header {
                text-align: center;
            }

            .price-header .label {
                display: block;
                color: var(--text-light);
                font-size: 0.9rem;
                margin-bottom: 5px;
            }

            .price-tag .amount {
                font-size: 2.5rem;
                font-weight: 800;
                color: var(--primary);
            }

            .price-tag .symbol {
                font-size: 1.5rem;
                vertical-align: top;
                font-weight: 600;
            }

            .divider {
                border: 0;
                border-top: 1px solid #f3f4f6;
                margin: 20px 0;
            }

            .booking-features .bf-item {
                color: #4b5563;
                margin-bottom: 10px;
                font-size: 0.95rem;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .booking-features .bf-item i {
                color: #10b981;
            }

            .action-buttons {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 20px;
            }

            .btn-action {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 14px;
                border-radius: 8px;
                text-decoration: none;
                font-weight: 700;
                transition: 0.3s;
                text-align: center;
            }

            .btn-action.primary {
                background: var(--primary);
                color: #fff;
                border: 2px solid var(--primary);
                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
            }

            .btn-action.primary:hover {
                background: var(--secondary);
                border-color: var(--secondary);
            }

            .btn-action.whatsapp {
                background: #25D366;
                color: #fff;
            }

            .btn-action.whatsapp:hover {
                background: #1ebc57;
            }

            .agency-mini {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .agency-head {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .agency-head img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                object-fit: cover;
                border: 2px solid #f3f4f6;
            }

            .agency-head .logo-ph {
                width: 50px;
                height: 50px;
                background: #f3f4f6;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #9ca3af;
            }

            .agency-actions a {
                color: var(--primary);
                font-size: 0.9rem;
                font-weight: 600;
                text-decoration: none;
            }

            .share-box-minimal {
                display: flex;
                align-items: center;
                gap: 15px;
                color: var(--text-light);
            }

            .share-links a {
                color: #9ca3af;
                font-size: 1.1rem;
                transition: 0.3s;
            }

            .share-links a:hover {
                color: var(--primary);
            }

            /* Modal */
            .modern-modal {
                display: none;
                position: fixed;
                inset: 0;
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }

            .modern-modal.show {
                display: flex;
            }

            .modal-backdrop {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.9);
            }

            .modal-content {
                position: relative;
                z-index: 1001;
                max-width: 90vw;
                max-height: 90vh;
            }

            .modal-close {
                position: absolute;
                top: -40px;
                right: -40px;
                color: #fff;
                font-size: 2rem;
                cursor: pointer;
            }

            .modal-gallery-view img {
                max-width: 100%;
                max-height: 80vh;
                border-radius: 4px;
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            }

            .nav-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: rgba(255, 255, 255, 0.1);
                color: #fff;
                border: none;
                padding: 20px;
                cursor: pointer;
                border-radius: 50%;
                backdrop-filter: blur(5px);
                transition: 0.3s;
            }

            .nav-btn:hover {
                background: rgba(255, 255, 255, 0.3);
            }

            .nav-btn.prev {
                left: -80px;
            }

            .nav-btn.next {
                right: -80px;
            }

            /* Responsive */
            @media (max-width: 992px) {
                .content-grid {
                    grid-template-columns: 1fr;
                }

                .tour-hero-title {
                    font-size: 2rem;
                }

                .features-bar {
                    flex-direction: column;
                    gap: 20px;
                    align-items: flex-start;
                }

                .nav-btn.prev {
                    left: 10px;
                }

                .nav-btn.next {
                    right: 10px;
                }

                .modal-close {
                    right: 10px;
                    top: -50px;
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            // Gallery Logic
            const images = @json($allImages->pluck('image_url'));
            let currentIdx = 0;
            const modal = document.getElementById('galleryModal');
            const modalImg = document.getElementById('modalImg');

            function openGalleryModal(index) {
                currentIdx = index;
                updateModalImage();
                modal.classList.add('show');
                document.body.style.overflow = 'hidden';
            }

            function closeGalleryModal() {
                modal.classList.remove('show');
                document.body.style.overflow = 'auto';
            }

            function changeSlide(step) {
                currentIdx += step;
                if (currentIdx < 0) currentIdx = images.length - 1;
                if (currentIdx >= images.length) currentIdx = 0;
                updateModalImage();
            }

            function updateModalImage() {
                modalImg.src = images[currentIdx];
            }

            // Hero Slider Logic
            let heroIdx = 0;
            const heroSlides = document.querySelectorAll('.hero-bg-slide');

            if (heroSlides.length > 1) {
                setInterval(() => {
                    heroSlides[heroIdx].classList.remove('active');
                    heroIdx = (heroIdx + 1) % heroSlides.length;
                    heroSlides[heroIdx].classList.add('active');
                }, 6000);
            }

            // Tab Switching Logic
            function switchTab(tabId) {
                // Remove active class from all buttons
                document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
                
                // Hide all panels
                document.querySelectorAll('.tab-content-panel').forEach(panel => panel.classList.remove('active'));
                
                // Activate clicked button and panel
                const btn = document.querySelector(`button[onclick="switchTab('${tabId}')"]`);
                if(btn) btn.classList.add('active');
                
                const panel = document.getElementById(tabId);
                if(panel) panel.classList.add('active');
            }
        </script>
    @endpush
</x-agency-theme-layout>