@extends('layouts.inner')

@section('title', $destination->meta_title ?? $destination->name . ' — Explore Destinations')

@section('title')
    {{ $destination->meta_title ?? '' }}
@endsection

@section('meta_description')
    {{ $destination->meta_description ?? '' }}
@endsection

@section('meta_keywords')
    {{ $destination->meta_keywords ?? '' }}
@endsection

@section('content')

{{-- ========================= HERO BANNER ========================= --}}
<section class="destination-hero-banner position-relative overflow-hidden" style="min-height:520px;">
    @if($destination->banner)
        <div class="hero-bg-overlay" style="
            background: url('{{ asset('storage/'.$destination->banner) }}') center center / cover no-repeat;
            position:absolute; inset:0; z-index:0;">
        </div>
    @endif
    <div class="hero-dark-gradient" style="
        position:absolute; inset:0; z-index:1;
        background: linear-gradient(to bottom, rgba(10,10,30,0.35) 0%, rgba(10,10,30,0.72) 100%);
    "></div>

    <div class="container position-relative" style="z-index:2; padding-top:140px; padding-bottom:80px;">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-white opacity-75">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('Tour-destinations') }}" class="text-white opacity-75">Destinations</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">{{ $destination->name }}</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-lg-8">
                @if($destination->heading)
                    <span class="badge text-uppercase fw-semibold px-3 py-2 mb-3"
                          style="background:rgba(255,255,255,0.18); color:#fff; letter-spacing:2px; font-size:11px; border-radius:30px;">
                        Featured Destination
                    </span>
                @endif
                <h1 class="display-4 fw-bold text-white mb-4" style="line-height:1.15;">
                    {{ $destination->name }}
                </h1>
                <a href="{{ route('Tour-packages') }}" class="btn btn-primary btn-lg px-5 py-3 rounded-pill shadow">
                    <i class="isax isax-suitcase me-2"></i> Explore Packages
                </a>
            </div>
        </div>
    </div>
</section>
{{-- ========================= /HERO BANNER ========================= --}}


{{-- ========================= STICKY NAV — only show links with content ========================= --}}
<div class="dest-sticky-nav bg-white shadow-sm" style="position:sticky; top:0; z-index:999; border-bottom:1px solid #eee;">
    <div class="container">
        <ul class="nav nav-pills gap-1 py-2 flex-nowrap overflow-auto" style="scrollbar-width:none;">

            {{-- if introduction exists --}}
            @if($destination->introduction)
            <li class="nav-item">
                <a class="nav-link dest-nav-link px-3 py-2" href="#overview">Overview</a>
            </li>
            @endif

            {{-- Experience --}}
            @if($destination->experience)
            <li class="nav-item">
                <a class="nav-link dest-nav-link px-3 py-2" href="#experience">Experience</a>
            </li>
            @endif

            {{-- Weather --}}
            @if($destination->weather)
            <li class="nav-item">
                <a class="nav-link dest-nav-link px-3 py-2" href="#weather">Weather</a>
            </li>
            @endif

            {{-- Accommodation --}}
            @if($destination->hotel)
            <li class="nav-item">
                <a class="nav-link dest-nav-link px-3 py-2" href="#accommodation">Accommodation</a>
            </li>
            @endif

            {{-- Transport --}}
            @if($destination->transportation)
            <li class="nav-item">
                <a class="nav-link dest-nav-link px-3 py-2" href="#transport">Transport</a>
            </li>
            @endif

            {{-- Culture --}}
            @if($destination->culture)
            <li class="nav-item">
                <a class="nav-link dest-nav-link px-3 py-2" href="#culture">Culture</a>
            </li>
            @endif

            {{-- Packages — always show --}}
            <li class="nav-item">
                <a class="nav-link dest-nav-link px-3 py-2" href="#available-packages">Packages</a>
            </li>

        </ul>
    </div>
</div>
{{-- ========================= /STICKY NAV ========================= --}}


<div class="container py-5">
    <div class="row g-5">

        {{-- ============ MAIN CONTENT ============ --}}
        <div class="col-lg-8">

            {{-- OVERVIEW --}}
            @if($destination->introduction)
            <section id="overview" class="dest-section mb-5 scroll-mt-nav">
                <div class="dest-section-label mb-2">
                    <span class="badge-pill-label"><i class="isax isax-global me-2"></i>Introduction</span>
                </div>
                <h2 class="dest-section-title">{{ $destination->detail_heading ?? 'About ' . $destination->name }}</h2>
                @if($destination->detail_subheading)
                    <p class="text-muted mb-3">{{ $destination->detail_subheading }}</p>
                @endif
                <div class="dest-rich-text">
                    {!! $destination->introduction !!}
                </div>
            </section>
            @endif

            @if($destination->introduction && $destination->experience)
            <hr class="dest-divider">
            @endif

            {{-- EXPERIENCE --}}
            @if($destination->experience)
            <section id="experience" class="dest-section mb-5 scroll-mt-nav">
                <div class="dest-section-label mb-2">
                    <span class="badge-pill-label"><i class="isax isax-star me-2"></i>Experience</span>
                </div>
                <h2 class="dest-section-title">What to Experience</h2>
                <div class="dest-rich-text">
                    {!! $destination->experience !!}
                </div>
            </section>
            @endif

            @if($destination->experience && $destination->weather)
            <hr class="dest-divider">
            @endif

            {{-- WEATHER --}}
            @if($destination->weather)
            <section id="weather" class="dest-section mb-5 scroll-mt-nav">
                <div class="dest-section-label mb-2">
                    <span class="badge-pill-label"><i class="isax isax-cloud-sunny me-2"></i>Climate & Weather</span>
                </div>
                <h2 class="dest-section-title">Best Time to Visit</h2>
                <div class="dest-rich-text">
                    {!! $destination->weather !!}
                </div>
            </section>
            @endif

            @if($destination->weather && $destination->hotel)
            <hr class="dest-divider">
            @endif

            {{-- ACCOMMODATION --}}
            @if($destination->hotel)
            <section id="accommodation" class="dest-section mb-5 scroll-mt-nav">
                <div class="dest-section-label mb-2">
                    <span class="badge-pill-label"><i class="isax isax-buildings me-2"></i>Accommodation</span>
                </div>
                <h2 class="dest-section-title">Where to Stay</h2>
                <div class="dest-rich-text">
                    {!! $destination->hotel !!}
                </div>
            </section>
            @endif

            @if($destination->hotel && $destination->transportation)
            <hr class="dest-divider">
            @endif

            {{-- TRANSPORTATION --}}
            @if($destination->transportation)
            <section id="transport" class="dest-section mb-5 scroll-mt-nav">
                <div class="dest-section-label mb-2">
                    <span class="badge-pill-label"><i class="isax isax-bus me-2"></i>Transportation</span>
                </div>
                <h2 class="dest-section-title">Getting Around</h2>
                <div class="dest-rich-text">
                    {!! $destination->transportation !!}
                </div>
            </section>
            @endif

            @if($destination->transportation && $destination->culture)
            <hr class="dest-divider">
            @endif

            {{-- CULTURE --}}
            @if($destination->culture)
            <section id="culture" class="dest-section mb-5 scroll-mt-nav">
                <div class="dest-section-label mb-2">
                    <span class="badge-pill-label"><i class="isax isax-heart me-2"></i>Culture & Lifestyle</span>
                </div>
                <h2 class="dest-section-title">Culture & Local Life</h2>
                <div class="dest-rich-text">
                    {!! $destination->culture !!}
                </div>
            </section>
            @endif

        </div>
        {{-- ============ /MAIN CONTENT ============ --}}


        {{-- ============ SIDEBAR ============ --}}
        <div class="col-lg-4">
            <div style="position:sticky; top:80px;">

                {{-- Quick Info Card --}}
                <div class="dest-info-card card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                    @if($destination->photo)
                    <div style="height:180px; overflow:hidden;">
                        <img src="{{ asset('storage/'.$destination->photo) }}" alt="{{ $destination->name }}"
                             style="width:100%; height:100%; object-fit:cover;">
                    </div>
                    @endif
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-1">{{ $destination->name }}</h5>
                        @if($destination->short_description)
                            <p class="text-muted small mb-3">{{ Str::limit($destination->short_description, 100) }}</p>
                        @endif
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="isax isax-suitcase text-primary"></i>
                            <span class="small fw-semibold">{{ $packages->count() }} Package{{ $packages->count() != 1 ? 's' : '' }} Available</span>
                        </div>
                        <a href="#available-packages" class="btn btn-primary w-100 rounded-pill mt-2">
                            View All Packages
                        </a>
                    </div>
                </div>

                {{-- Featured Package Teaser --}}
                @if($packages->where('is_featured', 1)->first())
                    @php $featured = $packages->where('is_featured', 1)->first(); @endphp
                    <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                        <div class="card-body p-0">
                            @if($featured->photo)
                            <div style="height:160px; overflow:hidden; position:relative;">
                                <img src="{{ asset('storage/'.$featured->photo) }}" alt="{{ $featured->name }}"
                                     style="width:100%; height:100%; object-fit:cover;">
                                <span class="position-absolute top-0 start-0 m-3 badge bg-warning text-dark fw-bold px-3 py-2 rounded-pill">
                                    ⭐ Featured
                                </span>
                            </div>
                            @endif
                            <div class="p-4">
                                <h6 class="fw-bold mb-1">{{ $featured->name }}</h6>
                                @if($featured->duration)
                                    <span class="text-muted small"><i class="isax isax-clock me-1"></i>{{ $featured->duration }}</span>
                                @endif
                                <div class="d-flex align-items-center justify-content-between mt-3">
                                    <div>
                                        <span class="text-muted small">Starting from</span>
                                        <div class="fs-5 fw-bold text-primary">
                                            {{ $featured->price ? 'AED ' . number_format($featured->price, 0) : 'Contact Us' }}
                                        </div>
                                    </div>
                                    <a href="{{ route('package.detail', $featured->name) }}" class="btn btn-outline-primary btn-sm rounded-pill px-3">
                                        View
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Need Help Card --}}
                <div class="card border-0 rounded-4 text-white overflow-hidden"
                     style="background: linear-gradient(135deg, #1a237e 0%, #283593 60%, #3949ab 100%);">
                    <div class="card-body p-4">
                        <div class="mb-3" style="font-size:2.5rem;">✈️</div>
                        <h6 class="fw-bold mb-2">Need Expert Guidance?</h6>
                        <p class="small opacity-75 mb-3">Our certified travel specialists are available to craft your perfect itinerary.</p>
                        <a href="tel:+971000000000" class="btn btn-light btn-sm rounded-pill px-4 fw-semibold text-primary">
                            <i class="isax isax-call me-1"></i> Call Now
                        </a>
                    </div>
                </div>

            </div>
        </div>
        {{-- ============ /SIDEBAR ============ --}}

    </div>
</div>


{{-- ========================= AVAILABLE PACKAGES ========================= --}}
<section id="available-packages" class="section py-5 bg-light scroll-mt-nav">
    <div class="container">

        <div class="text-center mb-5">
            @if($destination->package_heading)
                <h2 class="fw-bold mb-2">{{ $destination->package_heading }}</h2>
            @else
                <h2 class="fw-bold mb-2">Holiday Packages — {{ $destination->name }}</h2>
            @endif
            @if($destination->package_subheading)
                <p class="text-muted lead">{{ $destination->package_subheading }}</p>
            @endif
        </div>

        @if($packages->isEmpty())
            <div class="text-center py-5">
                <div style="font-size:4rem;">🗺️</div>
                <h5 class="mt-3 text-muted">No packages available for this destination at the moment.</h5>
                <p class="text-muted">Please check back soon or contact our team for custom packages.</p>
            </div>
        @else
            <div class="row g-4">
                @foreach($packages as $pkg)
                <div class="col-lg-4 col-md-6">
                    <div class="dest-pkg-card card border-0 shadow-sm rounded-4 h-100 overflow-hidden">

                        <div style="height:220px; overflow:hidden; position:relative;">
                            @if($pkg->photo)
                                <img src="{{ asset('storage/'.$pkg->photo) }}" alt="{{ $pkg->name }}"
                                     style="width:100%; height:100%; object-fit:cover; transition:transform .4s ease;">
                            @else
                                <div class="d-flex align-items-center justify-content-center h-100"
                                     style="background:linear-gradient(135deg,#e3f2fd,#bbdefb);">
                                    <i class="isax isax-gallery text-primary" style="font-size:3rem;opacity:0.4;"></i>
                                </div>
                            @endif

                            @if($pkg->is_featured)
                                <span class="position-absolute top-0 end-0 m-3 badge bg-warning text-dark fw-bold px-3 py-2 rounded-pill small">
                                    ⭐ Featured
                                </span>
                            @endif

                            @if($pkg->duration)
                                <span class="position-absolute bottom-0 start-0 m-3 badge text-white px-3 py-2 rounded-pill small"
                                      style="background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);">
                                    <i class="isax isax-clock me-1"></i> {{ $pkg->duration }}
                                </span>
                            @endif
                        </div>

                        <div class="card-body p-4 d-flex flex-column">
                            <h5 class="fw-bold mb-1" style="font-size:1rem;">{{ $pkg->name }}</h5>

                            @if($pkg->location)
                                <p class="text-muted small mb-2">
                                    <i class="isax isax-location text-primary me-1"></i>{{ $pkg->location }}
                                </p>
                            @endif

                            @if($pkg->short_description)
                                <p class="text-muted small mb-3" style="flex:1;">
                                    {{ Str::limit($pkg->short_description, 90) }}
                                </p>
                            @endif

                            @if($pkg->tour_start_date)
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <span class="badge bg-light text-secondary border small">
                                    <i class="isax isax-calendar me-1"></i>
                                    {{ \Carbon\Carbon::parse($pkg->tour_start_date)->format('d M Y') }}
                                    @if($pkg->tour_end_date)
                                        &mdash; {{ \Carbon\Carbon::parse($pkg->tour_end_date)->format('d M Y') }}
                                    @endif
                                </span>
                            </div>
                            @endif

                            @if($pkg->last_booking_date)
                            <div class="mb-3">
                                <span class="text-danger small fw-semibold">
                                    <i class="isax isax-info-circle me-1"></i>
                                    Book before {{ \Carbon\Carbon::parse($pkg->last_booking_date)->format('d M Y') }}
                                </span>
                            </div>
                            @endif

                            <div class="d-flex align-items-center justify-content-between mt-auto pt-3"
                                 style="border-top:1px solid #f0f0f0;">
                                <div>
                                    <span class="text-muted" style="font-size:11px;">Starting from</span>
                                    <div class="fw-bold text-primary" style="font-size:1.2rem;">
                                        {{ $pkg->price ? 'AED ' . number_format($pkg->price, 0) : 'Contact Us' }}
                                        @if($pkg->price)
                                            <span class="text-muted fw-normal" style="font-size:12px;">/ person</span>
                                        @endif
                                    </div>
                                </div>
                                <a href="{{ route('package.detail', $pkg->name) }}"
                                   class="btn btn-primary rounded-pill px-4 fw-semibold">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @endif

    </div>
</section>
{{-- ========================= /AVAILABLE PACKAGES ========================= --}}


{{-- ========================= TRUST STRIP ========================= --}}
<section class="py-5 bg-white border-top border-bottom">
    <div class="container">
        <div class="row g-4 text-center">
            <div class="col-6 col-md-3">
                <div class="trust-item">
                    <div class="trust-icon mb-2">🛡️</div>
                    <h6 class="fw-bold mb-1">100% Secure Booking</h6>
                    <p class="text-muted small mb-0">Your data &amp; payments are fully protected</p>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="trust-item">
                    <div class="trust-icon mb-2">🏆</div>
                    <h6 class="fw-bold mb-1">Award-Winning Service</h6>
                    <p class="text-muted small mb-0">Recognised globally for excellence</p>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="trust-item">
                    <div class="trust-icon mb-2">📞</div>
                    <h6 class="fw-bold mb-1">24/7 Expert Support</h6>
                    <p class="text-muted small mb-0">Dedicated specialists, always available</p>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="trust-item">
                    <div class="trust-icon mb-2">✈️</div>
                    <h6 class="fw-bold mb-1">10,000+ Happy Travellers</h6>
                    <p class="text-muted small mb-0">Trusted by families, corporates &amp; VIPs</p>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- ========================= /TRUST STRIP ========================= --}}

@endsection


@push('styles')
<style>
/* Breadcrumb */
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }

/* Sticky Nav Pills */
.dest-nav-link {
    font-size: 13px; font-weight: 600; color: #555;
    border-radius: 30px; white-space: nowrap;
    transition: all 0.2s;
}
.dest-nav-link:hover,
.dest-nav-link.active {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

/* Section Labels */
.badge-pill-label {
    display: inline-flex; align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 6px 14px; border-radius: 30px;
}
.dest-section-title { font-size: 1.6rem; font-weight: 700; color: #1a1a2e; }
.dest-rich-text { color: #4a4a6a; line-height: 1.85; font-size: 0.97rem; }
.dest-rich-text p { margin-bottom: 1rem; }
.dest-divider { border: none; border-top: 1px solid #eef0f5; margin: 2.5rem 0; }

/* Package Cards */
.dest-pkg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    transition: all 0.3s ease;
}
.dest-pkg-card:hover img { transform: scale(1.05); }

/* Trust Strip */
.trust-icon { font-size: 2.2rem; }

/* Scroll offset for sticky nav */
.scroll-mt-nav { scroll-margin-top: 80px; }
</style>
@endpush


@push('scripts')
<script>
// Active nav highlight on scroll — only targets visible sections
const sections = document.querySelectorAll('.dest-section');
const navLinks = document.querySelectorAll('.dest-nav-link');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            navLinks.forEach(link => link.classList.remove('active'));
            const active = document.querySelector(`.dest-nav-link[href="#${entry.target.id}"]`);
            if (active) active.classList.add('active');
        }
    });
}, { rootMargin: '-60px 0px -60% 0px' });

sections.forEach(s => observer.observe(s));
</script>
@endpush