@extends('layouts.inner')

@section('title', 'Tour Destinations — Explore the World')



@section('content')

{{-- ========================= HERO BANNER ========================= --}}
<section class="destination-hero-banner position-relative overflow-hidden" style="min-height:420px;">
    <div class="hero-bg-overlay" style="
        background: url('{{ asset('ajyad_front/img/banner/tour_details banner.jpg') }}') center center / cover no-repeat;
        position:absolute; inset:0; z-index:0;">
    </div>
    <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:180px; padding-bottom:100px;">
        <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 active text-white" aria-current="page">Tour Destinations</li>
            </ol>
        </nav>
        <div class="row">
            <div class="col-lg-8">
                <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;">
                    Explore the World
                </span>
                <h1 class="display-4 fw-bold text-white mb-4" style="line-height:1.15;">
                    Tour Destinations
                </h1>
                <p class="text-white opacity-75 fs-5 mb-0">
                    Handpicked destinations for unforgettable travel experiences
                </p>
            </div>
        </div>
    </div>
</section>
{{-- ========================= /HERO BANNER ========================= --}}


{{-- ========================= DESTINATIONS GRID ========================= --}}
<section class="section destinations-sec py-5">
    <div class="container">

        {{-- Results Count --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <p class="text-muted mb-0 small">
                Showing
                <span class="fw-bold text-dark">{{ $destinations->firstItem() }}–{{ $destinations->lastItem() }}</span>
                of
                <span class="fw-bold text-dark">{{ $destinations->total() }}</span>
                destination{{ $destinations->total() != 1 ? 's' : '' }}
            </p>
        </div>

        @if($destinations->count())

        {{-- ---- Uniform Card Grid (all destinations) ---- --}}
        <div class="row g-3">
            @foreach($destinations as $dest)
            <div class="col-lg-3 col-md-4 col-6">
                <div class="location-wrap wow zoomIn" style="height:220px;">
                    <a href="{{ route('destination.detail', $dest->heading) }}">
                        <img src="{{ asset('storage/'.$dest->photo) }}"
                             alt="{{ $dest->name }}"
                             style="width:100%;height:100%;object-fit:cover;">
                    </a>
                    <div class="loc-name-bottom">
                        <h3 class="mb-1 home-eight-title">{{ $dest->name }}</h3>
                    </div>
                    <a href="{{ route('destination.detail', $dest->heading) }}" class="loc-view-bottom">
                        <i class="isax isax-arrow-right-1"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        {{-- ---- /Uniform Card Grid ---- --}}


        {{-- ========================= PAGINATION ========================= --}}
        @if($destinations->hasPages())
        <div class="d-flex justify-content-center mt-5">
            <nav>
                <ul class="pagination pagination-center">

                    {{-- Previous --}}
                    <li class="page-item {{ $destinations->onFirstPage() ? 'disabled' : '' }}">
                        <a class="page-link page-prev" href="{{ $destinations->previousPageUrl() }}" aria-label="Previous">
                            <i class="isax isax-arrow-left-2"></i>
                        </a>
                    </li>

                    {{-- Page Numbers --}}
                    @foreach($destinations->getUrlRange(1, $destinations->lastPage()) as $page => $url)
                        <li class="page-item {{ $destinations->currentPage() == $page ? 'active' : '' }}">
                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                        </li>
                    @endforeach

                    {{-- Next --}}
                    <li class="page-item {{ !$destinations->hasMorePages() ? 'disabled' : '' }}">
                        <a class="page-link page-next" href="{{ $destinations->nextPageUrl() }}" aria-label="Next">
                            <i class="isax isax-arrow-right-2"></i>
                        </a>
                    </li>

                </ul>
            </nav>
        </div>
        @endif
        {{-- ========================= /PAGINATION ========================= --}}

        @else
        {{-- No destinations at all --}}
        <div class="text-center py-5">
            <div style="font-size:4rem;">🗺️</div>
            <h5 class="mt-3 text-muted">No destinations available at the moment.</h5>
            <p class="text-muted">Please check back soon or contact our team.</p>
        </div>
        @endif

    </div>
</section>
{{-- ========================= /DESTINATIONS GRID ========================= --}}


{{-- ========================= 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 & 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 & 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); }

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

/* ---- location-wrap hover lift ---- */
.location-wrap { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.location-wrap:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.15); }

/* ---- Pagination ---- */
.pagination {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.pagination .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    border: 1px solid #dee2e6;
    color: #555;
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    transition: all 0.2s ease;
    background: #fff;
}
.pagination .page-link:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.pagination .page-item.active .page-link {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}
.pagination .page-prev,
.pagination .page-next {
    background: #f0f4ff;
    border-color: #dee2e6;
    color: var(--bs-primary);
}
</style>
@endpush