{{-- resources/views/page/agency/themes/default/tours.blade.php --}}
{{-- Ultra Modern Tour Listing & Search Results Page --}}

@php
    $productTypeName = $productType === 'gunubirlik-tur' ? 'Günübirlik Turlar' : 'Kültür Turları';
    $productTypeIcon = $productType === 'gunubirlik-tur' ? 'fa-sun' : 'fa-landmark';

    // Get departure cities for filter
    $departureCities = \App\Models\Definition\City::whereIn('id', function($query) use ($agency, $productType) {
        if ($productType === 'kultur-turu') {
            $query->select('departure_city_id')
                ->from('cultural_tours')
                ->where('agency_id', $agency->id)
                ->where('is_active', true)
                ->where('is_public', true)
                ->whereNotNull('departure_city_id');
        } else {
            $query->select('departure_city_id')
                ->from('day_tours')
                ->where('agency_id', $agency->id)
                ->where('is_active', true)
                ->whereNotNull('departure_city_id');
        }
    })->orderBy('city')->get();
@endphp

<x-agency-theme-layout :agency="$agency" :page="$page" :theme="$theme" :themeSettings="$themeSettings">
    {{-- Hero Section --}}
    <section class="tours-hero">
        <div class="hero-bg-pattern"></div>
        <div class="hero-gradient-overlay"></div>

        <div class="container">
            <div class="hero-content">
                <div class="hero-badge">
                    <i class="fas {{ $productTypeIcon }}"></i>
                    <span>{{ $agency->name }}</span>
                </div>

                <h1 class="hero-title">
                    <span class="title-highlight">{{ $productTypeName }}</span>
                    <span class="title-sub">Hayalinizdeki Tur Burada</span>
                </h1>

                <p class="hero-description">
                    Size özel seçilmiş turlarımızı keşfedin. Unutulmaz deneyimler için doğru adrestesiniz.
                </p>

                {{-- Stats --}}
                <div class="hero-stats">
                    <div class="stat-item">
                        <span class="stat-number">{{ $tours->total() ?? 0 }}</span>
                        <span class="stat-label">Aktif Tur</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-number">{{ $departureCities->count() }}</span>
                        <span class="stat-label">Kalkış Noktası</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-number">7/24</span>
                        <span class="stat-label">Destek</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Floating Elements --}}
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
    </section>

    {{-- Search & Filter Section --}}
    <section class="search-filter-section">
        <div class="container">
            <div class="filter-wrapper">
                <form
                    action="{{ route('customer.agency.tours.list', ['agency' => $agency->slug, 'type' => $productType]) }}"
                    method="GET" class="filter-form" id="filterForm">
                    {{-- Search Input --}}
                    <div class="filter-group search-group">
                        <div class="input-icon-wrapper">
                            <i class="fas fa-search"></i>
                            <input type="text"
                                   name="q"
                                   class="filter-input"
                                   placeholder="Tur adi veya destinasyon ara..."
                                   value="{{ request('q') }}">
                        </div>
                    </div>

                    {{-- Departure City --}}
                    <div class="filter-group">
                        <div class="select-wrapper">
                            <i class="fas fa-map-marker-alt"></i>
                            <select name="departure_city_id" class="filter-select" onchange="this.form.submit()">
                                <option value="">Tum Sehirler</option>
                                @foreach($departureCities as $city)
                                    <option
                                        value="{{ $city->id }}" {{ request('departure_city_id') == $city->id ? 'selected' : '' }}>
                                        {{ $city->city }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Date Filter --}}
                    <div class="filter-group">
                        <div class="input-icon-wrapper">
                            <i class="fas fa-calendar-alt"></i>
                            <input type="date"
                                   name="date"
                                   class="filter-input"
                                   value="{{ request('date') }}"
                                   min="{{ date('Y-m-d') }}"
                                   onchange="this.form.submit()">
                        </div>
                    </div>

                    {{-- Sort --}}
                    <div class="filter-group">
                        <div class="select-wrapper">
                            <i class="fas fa-sort"></i>
                            <select name="sort" class="filter-select" onchange="this.form.submit()">
                                <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>En Yeni
                                </option>
                                <option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Fiyat
                                    (Düşükten Yükseğe)
                                </option>
                                <option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>
                                    Fiyat (Yüksekten Düşüğe)
                                </option>
                                <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>En
                                    Popüler
                                </option>
                            </select>
                        </div>
                    </div>

                    {{-- Search Button --}}
                    <button type="submit" class="filter-submit">
                        <i class="fas fa-search"></i>
                        <span>Ara</span>
                    </button>
                </form>

                {{-- Active Filters --}}
                @if(request('q') || request('departure_city_id') || request('date'))
                    <div class="active-filters">
                        <span class="filters-label">Aktif Filtreler:</span>

                        @if(request('q'))
                            <a href="{{ request()->fullUrlWithQuery(['q' => null]) }}" class="filter-tag">
                                <i class="fas fa-search"></i>
                                {{ request('q') }}
                                <i class="fas fa-times remove"></i>
                            </a>
                        @endif

                        @if(request('departure_city_id'))
                            @php
                                $selectedCity = $departureCities->firstWhere('id', request('departure_city_id'));
                            @endphp
                            @if($selectedCity)
                                <a href="{{ request()->fullUrlWithQuery(['departure_city_id' => null]) }}"
                                   class="filter-tag">
                                    <i class="fas fa-map-marker-alt"></i>
                                    {{ $selectedCity->city }}
                                    <i class="fas fa-times remove"></i>
                                </a>
                            @endif
                        @endif

                        @if(request('date'))
                            <a href="{{ request()->fullUrlWithQuery(['date' => null]) }}" class="filter-tag">
                                <i class="fas fa-calendar"></i>
                                {{ \Carbon\Carbon::parse(request('date'))->format('d.m.Y') }}
                                <i class="fas fa-times remove"></i>
                            </a>
                        @endif

                        <a href="{{ route('customer.agency.tours.list', ['agency' => $agency->slug, 'type' => $productType]) }}"
                           class="clear-filters">
                            <i class="fas fa-eraser"></i>
                            Temizle
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </section>

    {{-- Tours Grid Section --}}
    <section class="tours-grid-section">
        <div class="container">
            {{-- Results Header --}}
            <div class="results-header">
                <div class="results-count">
                    <span class="count-number">{{ $tours->total() }}</span>
                    <span class="count-text">tur bulundu</span>
                </div>

                <div class="view-toggle">
                    <button class="view-btn active" data-view="grid" title="Grid Gorunum">
                        <i class="fas fa-th-large"></i>
                    </button>
                    <button class="view-btn" data-view="list" title="Liste Gorunum">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>

            {{-- Tours Grid --}}
            @if($tours->count() > 0)
                <div class="tours-grid" id="toursGrid">
                    @foreach($tours as $tour)
                        <article class="tour-card" data-aos="fade-up">
                            {{-- Card Image --}}
                            <div class="card-image">
                                @if($tour->cover_image_url)
                                    <img src="{{ $tour->cover_image_url }}"
                                         alt="{{ $tour->name }}"
                                         loading="lazy">
                                @else
                                    <div class="no-image">
                                        <i class="fas fa-image"></i>
                                    </div>
                                @endif

                                {{-- Badges --}}
                                <div class="card-badges">
                                    @if($tour->is_featured)
                                        <span class="badge badge-featured">
                                            <i class="fas fa-star"></i> Öne Çıkan
                                        </span>
                                    @endif
                                    @if($tour->is_bestseller)
                                        <span class="badge badge-bestseller">
                                            <i class="fas fa-fire"></i> Çok Satan
                                        </span>
                                    @endif
                                    @if($tour->is_new)
                                        <span class="badge badge-new">Yeni</span>
                                    @endif
                                </div>

                                {{-- Quick Actions --}}
                                <div class="card-actions">
                                    <button class="action-btn" title="Favorilere Ekle">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn" title="Paylas">
                                        <i class="fas fa-share-alt"></i>
                                    </button>
                                </div>

                                {{-- Overlay --}}
                                <div class="card-overlay">
                                    <a href="{{ route('customer.agency.tours.detail', ['agency' => $agency->slug, 'type' => $productType, 'slug' => $tour->slug]) }}"
                                       class="overlay-link">
                                        <span>Detayları Gör</span>
                                        <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>

                            {{-- Card Content --}}
                            <div class="card-content">
                                {{-- Category & Rating --}}
                                <div class="card-meta-top">
                                    @if($tour->departureCity)
                                        <span class="meta-location">
                                            <i class="fas fa-map-marker-alt"></i>
                                            {{ $tour->departureCity->city ?? $tour->departureCity->name }}
                                        </span>
                                    @endif

                                    @if($tour->rating_average > 0)
                                        <span class="meta-rating">
                                            <i class="fas fa-star"></i>
                                            {{ number_format($tour->rating_average, 1) }}
                                            <small>({{ $tour->rating_count }})</small>
                                        </span>
                                    @endif
                                </div>

                                {{-- Title --}}
                                <h3 class="card-title">
                                    <a href="{{ route('customer.agency.tours.detail', ['agency' => $agency->slug, 'type' => $productType, 'slug' => $tour->slug]) }}">
                                        {{ $tour->name }}
                                    </a>
                                </h3>

                                {{-- Description --}}
                                @if($tour->short_description)
                                    <p class="card-description">
                                        {{ Str::limit($tour->short_description, 100) }}
                                    </p>
                                @endif

                                {{-- Features --}}
                                <div class="card-features">
                                    {{-- Yaklaşan Tarih --}}
                                    @if($tour->upcomingDates && $tour->upcomingDates->count() > 0)
                                        @php
                                            $nextDate = $tour->upcomingDates->first();
                                            $startDate = $productType === 'gunubirlik-tur'
                                                ? ($nextDate->tour_date ?? $nextDate->start_date)
                                                : $nextDate->start_date;
                                        @endphp
                                        <span class="feature feature-date">
                                            <i class="fas fa-calendar-alt"></i>
                                            {{ \Carbon\Carbon::parse($startDate)->format('d.m.Y') }}
                                        </span>
                                    @endif

                                    @if($tour->days)
                                        <span class="feature">
                                            <i class="fas fa-clock"></i>
                                            {{ $tour->days }} Gün
                                            @if($tour->nights)
                                                / {{ $tour->nights }} Gece
                                            @endif
                                        </span>
                                    @elseif($tour->start_time && $tour->end_time)
                                        <span class="feature">
                                            <i class="fas fa-clock"></i>
                                            {{ substr($tour->start_time, 0, 5) }} - {{ substr($tour->end_time, 0, 5) }}
                                        </span>
                                    @endif

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

                                    @if($tour->has_guide)
                                        <span class="feature">
                                            <i class="fas fa-user-tie"></i>
                                            Rehberli
                                        </span>
                                    @endif
                                </div>

                                {{-- Price & CTA --}}
                                <div class="card-footer">
                                    <div class="price-section">
                                        <span class="price-label">Kişi Başı</span>
                                        <span class="price-value">
                                            @if($productType === 'gunubirlik-tur' && $tour->adult_price)
                                                {{ number_format($tour->adult_price, 0, ',', '.') }}
                                                <small>{{ $tour->currency ?? 'TRY' }}</small>
                                            @elseif($tour->formatted_price)
                                                {{ $tour->formatted_price }}
                                            @else
                                                <span class="price-contact">Fiyat Sorunuz</span>
                                            @endif
                                        </span>
                                    </div>

                                    <a href="{{ route('customer.agency.tours.detail', ['agency' => $agency->slug, 'type' => $productType, 'slug' => $tour->slug]) }}"
                                       class="card-cta">
                                        Incele
                                        <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                {{-- Pagination --}}
                @if($tours->hasPages())
                    <div class="pagination-wrapper">
                        {{ $tours->withQueryString()->links('pagination::tailwind') }}
                    </div>
                @endif
            @else
                {{-- No Results --}}
                <div class="no-results">
                    <div class="no-results-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3>Sonuç Bulunamadı</h3>
                    <p>Aramanıza uygun tur bulunamadı. Farklı filtreler deneyebilir veya tüm turlara göz
                        atabilirsiniz.</p>
                    <a href="{{ route('customer.agency.tours.list', ['agency' => $agency->slug, 'type' => $productType]) }}"
                       class="reset-btn">
                        <i class="fas fa-redo"></i>
                        Filtreleri Sıfırla
                    </a>
                </div>
            @endif
        </div>
    </section>

    {{-- CTA Section --}}
    <section class="cta-section">
        <div class="container">
            <div class="cta-card">
                <div class="cta-content">
                    <h2>Aradığınızı Bulamadınız mı?</h2>
                    <p>Size özel tur planı hazırlayalım. İletişime geçin, hayalinizdeki turu birlikte tasarlayalım.</p>
                </div>
                <div class="cta-actions">
                    @if($agency->contact_phone)
                        <a href="tel:{{ $agency->contact_phone }}" class="cta-btn cta-btn-primary">
                            <i class="fas fa-phone"></i>
                            Hemen Ara
                        </a>
                    @endif
                    @if($agency->contact_whatsapp)
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $agency->contact_whatsapp) }}"
                           class="cta-btn cta-btn-secondary" target="_blank">
                            <i class="fab fa-whatsapp"></i>
                            WhatsApp
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </section>

    @push('styles')
        <style>
            /* ============================================
               HERO SECTION
            ============================================ */
            .tours-hero {
                position: relative;
                padding: 6rem 0 4rem;
                background: linear-gradient(135deg,
                var(--primary) 0%,
                var(--secondary) 50%,
                color-mix(in srgb, var(--primary) 60%, var(--secondary)) 100%
                );
                overflow: hidden;
                min-height: 400px;
                display: flex;
                align-items: center;
            }

            .hero-bg-pattern {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 30%);
                z-index: 1;
            }

            .hero-gradient-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 150px;
                background: linear-gradient(to top, var(--background), transparent);
                z-index: 2;
            }

            .tours-hero .container {
                position: relative;
                z-index: 3;
            }

            .hero-content {
                max-width: 800px;
                text-align: center;
                margin: 0 auto;
            }

            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 1.25rem;
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                border-radius: 50px;
                color: white;
                font-size: 0.875rem;
                font-weight: 500;
                margin-bottom: 1.5rem;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .hero-title {
                color: white;
                margin-bottom: 1.5rem;
            }

            .title-highlight {
                display: block;
                font-size: 3.5rem;
                font-weight: 800;
                line-height: 1.1;
                background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .title-sub {
                display: block;
                font-size: 1.25rem;
                font-weight: 400;
                opacity: 0.9;
                margin-top: 0.5rem;
                color: white;
                -webkit-text-fill-color: white;
            }

            .hero-description {
                color: rgba(255, 255, 255, 0.9);
                font-size: 1.125rem;
                max-width: 600px;
                margin: 0 auto 2rem;
                line-height: 1.7;
            }

            .hero-stats {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 2rem;
                flex-wrap: wrap;
            }

            .stat-item {
                text-align: center;
            }

            .stat-number {
                display: block;
                font-size: 2rem;
                font-weight: 700;
                color: white;
            }

            .stat-label {
                display: block;
                font-size: 0.875rem;
                color: rgba(255, 255, 255, 0.8);
            }

            .stat-divider {
                width: 1px;
                height: 40px;
                background: rgba(255, 255, 255, 0.3);
            }

            /* Floating Shapes */
            .floating-shapes {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                pointer-events: none;
                z-index: 1;
            }

            .shape {
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.1);
                animation: float 20s ease-in-out infinite;
            }

            .shape-1 {
                width: 300px;
                height: 300px;
                top: -100px;
                right: -100px;
                animation-delay: 0s;
            }

            .shape-2 {
                width: 200px;
                height: 200px;
                bottom: 50px;
                left: -50px;
                animation-delay: -5s;
            }

            .shape-3 {
                width: 150px;
                height: 150px;
                top: 50%;
                right: 20%;
                animation-delay: -10s;
            }

            @keyframes float {
                0%, 100% {
                    transform: translateY(0) rotate(0deg);
                }
                50% {
                    transform: translateY(-30px) rotate(10deg);
                }
            }

            /* ============================================
               SEARCH & FILTER SECTION
            ============================================ */
            .search-filter-section {
                padding: 0;
                margin-top: -2rem;
                position: relative;
                z-index: 10;
            }

            .filter-wrapper {
                background: white;
                border-radius: 20px;
                padding: 1.5rem;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            }

            .filter-form {
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
                align-items: flex-end;
            }

            .filter-group {
                flex: 1;
                min-width: 180px;
            }

            .filter-group.search-group {
                flex: 2;
                min-width: 280px;
            }

            .input-icon-wrapper,
            .select-wrapper {
                position: relative;
            }

            .input-icon-wrapper i,
            .select-wrapper i {
                position: absolute;
                left: 1rem;
                top: 50%;
                transform: translateY(-50%);
                color: var(--primary);
                font-size: 0.875rem;
                pointer-events: none;
                z-index: 1;
            }

            .filter-input,
            .filter-select {
                width: 100%;
                padding: 0.875rem 1rem 0.875rem 2.75rem;
                border: 2px solid #e5e7eb;
                border-radius: 12px;
                font-size: 0.9375rem;
                color: var(--text);
                background: #f9fafb;
                transition: all 0.2s ease;
                appearance: none;
            }

            .filter-select {
                cursor: pointer;
                padding-right: 2.5rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 0.75rem center;
                background-size: 1.25rem;
            }

            .filter-input:focus,
            .filter-select:focus {
                outline: none;
                border-color: var(--primary);
                background: white;
                box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
            }

            .filter-submit {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                padding: 0.875rem 2rem;
                background: linear-gradient(135deg, var(--primary), var(--secondary));
                color: white;
                border: none;
                border-radius: 12px;
                font-size: 0.9375rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                min-width: 120px;
            }

            .filter-submit:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
            }

            /* Active Filters */
            .active-filters {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                flex-wrap: wrap;
                margin-top: 1rem;
                padding-top: 1rem;
                border-top: 1px solid #e5e7eb;
            }

            .filters-label {
                font-size: 0.875rem;
                font-weight: 500;
                color: #6b7280;
            }

            .filter-tag {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 1rem;
                background: linear-gradient(135deg, var(--primary), var(--secondary));
                color: white;
                border-radius: 50px;
                font-size: 0.8125rem;
                font-weight: 500;
                text-decoration: none;
                transition: all 0.2s ease;
            }

            .filter-tag:hover {
                transform: scale(1.05);
            }

            .filter-tag .remove {
                margin-left: 0.25rem;
                opacity: 0.8;
            }

            .clear-filters {
                display: inline-flex;
                align-items: center;
                gap: 0.375rem;
                font-size: 0.8125rem;
                color: #6b7280;
                text-decoration: none;
                margin-left: auto;
                transition: color 0.2s;
            }

            .clear-filters:hover {
                color: var(--primary);
            }

            /* ============================================
               TOURS GRID SECTION
            ============================================ */
            .tours-grid-section {
                padding: 4rem 0;
                background: var(--muted);
            }

            .results-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 2rem;
            }

            .results-count {
                display: flex;
                align-items: baseline;
                gap: 0.5rem;
            }

            .count-number {
                font-size: 2rem;
                font-weight: 700;
                color: var(--primary);
            }

            .count-text {
                font-size: 1rem;
                color: #6b7280;
            }

            .view-toggle {
                display: flex;
                gap: 0.5rem;
                background: white;
                padding: 0.25rem;
                border-radius: 10px;
                box-shadow: var(--shadow-sm);
            }

            .view-btn {
                padding: 0.625rem 0.875rem;
                border: none;
                background: transparent;
                color: #9ca3af;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s ease;
            }

            .view-btn:hover {
                color: var(--primary);
            }

            .view-btn.active {
                background: linear-gradient(135deg, var(--primary), var(--secondary));
                color: white;
            }

            /* Tours Grid */
            .tours-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
                gap: 2rem;
            }

            .tours-grid.list-view {
                grid-template-columns: 1fr;
            }

            /* Tour Card */
            .tour-card {
                background: white;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .tour-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
            }

            /* Card Image */
            .card-image {
                position: relative;
                height: 240px;
                overflow: hidden;
            }

            .card-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s ease;
            }

            .tour-card:hover .card-image img {
                transform: scale(1.1);
            }

            .card-image .no-image {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
                color: #9ca3af;
                font-size: 3rem;
            }

            /* Badges */
            .card-badges {
                position: absolute;
                top: 1rem;
                left: 1rem;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                z-index: 2;
            }

            .badge {
                display: inline-flex;
                align-items: center;
                gap: 0.375rem;
                padding: 0.375rem 0.75rem;
                border-radius: 50px;
                font-size: 0.75rem;
                font-weight: 600;
            }

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

            .badge-bestseller {
                background: linear-gradient(135deg, #ef4444, #dc2626);
                color: white;
            }

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

            /* Card Actions */
            .card-actions {
                position: absolute;
                top: 1rem;
                right: 1rem;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                z-index: 2;
                opacity: 0;
                transform: translateX(10px);
                transition: all 0.3s ease;
            }

            .tour-card:hover .card-actions {
                opacity: 1;
                transform: translateX(0);
            }

            .action-btn {
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.95);
                border: none;
                border-radius: 50%;
                color: #6b7280;
                cursor: pointer;
                transition: all 0.2s ease;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

            .action-btn:hover {
                background: var(--primary);
                color: white;
                transform: scale(1.1);
            }

            /* Card Overlay */
            .card-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 2rem 1.5rem;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
                display: flex;
                justify-content: center;
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.4s ease;
            }

            .tour-card:hover .card-overlay {
                opacity: 1;
                transform: translateY(0);
            }

            .overlay-link {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.75rem 1.5rem;
                background: white;
                color: var(--text);
                text-decoration: none;
                border-radius: 50px;
                font-weight: 600;
                font-size: 0.875rem;
                transition: all 0.3s ease;
            }

            .overlay-link:hover {
                background: var(--primary);
                color: white;
                transform: scale(1.05);
            }

            /* Card Content */
            .card-content {
                padding: 1.5rem;
            }

            .card-meta-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.75rem;
            }

            .meta-location {
                display: flex;
                align-items: center;
                gap: 0.375rem;
                font-size: 0.8125rem;
                color: var(--primary);
                font-weight: 500;
            }

            .meta-location i {
                font-size: 0.75rem;
            }

            .meta-rating {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                font-size: 0.875rem;
                font-weight: 600;
                color: #f59e0b;
            }

            .meta-rating small {
                color: #9ca3af;
                font-weight: 400;
            }

            .card-title {
                font-size: 1.25rem;
                font-weight: 700;
                margin-bottom: 0.5rem;
                line-height: 1.3;
            }

            .card-title a {
                color: inherit;
                text-decoration: none;
                transition: color 0.2s;
            }

            .card-title a:hover {
                color: var(--primary);
            }

            .card-description {
                font-size: 0.875rem;
                color: #6b7280;
                line-height: 1.6;
                margin-bottom: 1rem;
            }

            /* Card Features */
            .card-features {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem;
                margin-bottom: 1.25rem;
            }

            .feature {
                display: inline-flex;
                align-items: center;
                gap: 0.375rem;
                font-size: 0.8125rem;
                color: #6b7280;
                background: var(--muted);
                padding: 0.375rem 0.75rem;
                border-radius: 50px;
            }

            .feature i {
                color: var(--primary);
                font-size: 0.75rem;
            }

            .feature-date {
                background: linear-gradient(135deg, var(--primary), var(--secondary));
                color: white;
                font-weight: 600;
            }

            .feature-date i {
                color: white;
            }

            /* Card Footer */
            .card-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-top: 1.25rem;
                border-top: 1px solid #e5e7eb;
            }

            .price-section {
                display: flex;
                flex-direction: column;
            }

            .price-label {
                font-size: 0.75rem;
                color: #9ca3af;
            }

            .price-value {
                font-size: 1.5rem;
                font-weight: 700;
                color: var(--primary);
            }

            .price-value small {
                font-size: 0.875rem;
                font-weight: 500;
            }

            .price-contact {
                font-size: 0.875rem;
                font-weight: 500;
            }

            .card-cta {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.75rem 1.5rem;
                background: linear-gradient(135deg, var(--primary), var(--secondary));
                color: white;
                text-decoration: none;
                border-radius: 50px;
                font-weight: 600;
                font-size: 0.875rem;
                transition: all 0.3s ease;
            }

            .card-cta:hover {
                transform: translateX(4px);
                box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
            }

            /* Pagination */
            .pagination-wrapper {
                margin-top: 3rem;
                display: flex;
                justify-content: center;
            }

            /* No Results */
            .no-results {
                text-align: center;
                padding: 5rem 2rem;
                background: white;
                border-radius: 20px;
                box-shadow: var(--shadow-md);
            }

            .no-results-icon {
                width: 100px;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, var(--muted), #e5e7eb);
                border-radius: 50%;
                margin: 0 auto 1.5rem;
                font-size: 2.5rem;
                color: #9ca3af;
            }

            .no-results h3 {
                font-size: 1.5rem;
                margin-bottom: 0.5rem;
            }

            .no-results p {
                color: #6b7280;
                max-width: 400px;
                margin: 0 auto 2rem;
                line-height: 1.6;
            }

            .reset-btn {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.875rem 2rem;
                background: var(--primary);
                color: white;
                text-decoration: none;
                border-radius: 50px;
                font-weight: 600;
                transition: all 0.3s ease;
            }

            .reset-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
            }

            /* ============================================
               CTA SECTION
            ============================================ */
            .cta-section {
                padding: 0 0 5rem;
                background: var(--muted);
            }

            .cta-card {
                background: linear-gradient(135deg, var(--primary), var(--secondary));
                border-radius: 24px;
                padding: 3rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 2rem;
                flex-wrap: wrap;
                position: relative;
                overflow: hidden;
            }

            .cta-card::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -20%;
                width: 400px;
                height: 400px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
            }

            .cta-content {
                position: relative;
                z-index: 1;
            }

            .cta-content h2 {
                color: white;
                font-size: 2rem;
                margin-bottom: 0.5rem;
            }

            .cta-content p {
                color: rgba(255, 255, 255, 0.9);
                font-size: 1.125rem;
            }

            .cta-actions {
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
                position: relative;
                z-index: 1;
            }

            .cta-btn {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 1rem 2rem;
                border-radius: 50px;
                font-weight: 600;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .cta-btn-primary {
                background: white;
                color: var(--primary);
            }

            .cta-btn-primary:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            }

            .cta-btn-secondary {
                background: rgba(255, 255, 255, 0.2);
                color: white;
                border: 2px solid rgba(255, 255, 255, 0.3);
            }

            .cta-btn-secondary:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: translateY(-3px);
            }

            /* ============================================
               RESPONSIVE
            ============================================ */
            @media (max-width: 1024px) {
                .title-highlight {
                    font-size: 2.5rem;
                }

                .hero-stats {
                    gap: 1.5rem;
                }

                .filter-form {
                    flex-wrap: wrap;
                }

                .filter-group {
                    min-width: calc(50% - 0.5rem);
                }

                .tours-grid {
                    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                    gap: 1.5rem;
                }
            }

            @media (max-width: 768px) {
                .tours-hero {
                    padding: 4rem 0 3rem;
                }

                .title-highlight {
                    font-size: 2rem;
                }

                .title-sub {
                    font-size: 1rem;
                }

                .hero-description {
                    font-size: 1rem;
                }

                .hero-stats {
                    flex-direction: column;
                    gap: 1rem;
                }

                .stat-divider {
                    width: 40px;
                    height: 1px;
                }

                .search-filter-section {
                    margin-top: -1.5rem;
                }

                .filter-wrapper {
                    padding: 1rem;
                    border-radius: 16px;
                }

                .filter-group {
                    min-width: 100%;
                }

                .filter-submit {
                    width: 100%;
                }

                .results-header {
                    flex-direction: column;
                    gap: 1rem;
                    align-items: flex-start;
                }

                .tours-grid {
                    grid-template-columns: 1fr;
                }

                .card-image {
                    height: 200px;
                }

                .cta-card {
                    padding: 2rem;
                    flex-direction: column;
                    text-align: center;
                }

                .cta-content h2 {
                    font-size: 1.5rem;
                }

                .cta-actions {
                    justify-content: center;
                    width: 100%;
                }

                .cta-btn {
                    flex: 1;
                    justify-content: center;
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // View Toggle
                const viewBtns = document.querySelectorAll('.view-btn');
                const toursGrid = document.getElementById('toursGrid');

                viewBtns.forEach(btn => {
                    btn.addEventListener('click', function () {
                        viewBtns.forEach(b => b.classList.remove('active'));
                        this.classList.add('active');

                        const view = this.dataset.view;
                        if (view === 'list') {
                            toursGrid.classList.add('list-view');
                        } else {
                            toursGrid.classList.remove('list-view');
                        }
                    });
                });

                // Favorite Button Animation
                const favBtns = document.querySelectorAll('.action-btn');
                favBtns.forEach(btn => {
                    btn.addEventListener('click', function (e) {
                        e.preventDefault();
                        const icon = this.querySelector('i');
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            icon.style.color = '#ef4444';
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            icon.style.color = '';
                        }
                    });
                });
            });
        </script>
    @endpush
</x-agency-theme-layout>