{{-- resources/views/page/agency/themes/default/sections/tour_search.blade.php --}}
@php
    // Get agency's active product types (only tour related)
    $tourProductTypes = $agency->productTypes()
        ->where('agency_product_types.is_active', true)
        ->whereIn('code', ['kultur-turu', 'gunubirlik-tur'])
        ->orderBy('sort_order')
        ->get();

    // Get unique departure cities from tours
    $departureCityIds = collect();

    if ($tourProductTypes->contains('code', 'kultur-turu')) {
        $kulturTuruCityIds = \App\Models\Tour\Tour::where('agency_id', $agency->id)
            ->active()
            ->public()
            ->whereNotNull('departure_city_id')
            ->distinct()
            ->pluck('departure_city_id');
        $departureCityIds = $departureCityIds->merge($kulturTuruCityIds);
    }

    if ($tourProductTypes->contains('code', 'gunubirlik-tur')) {
        $gunubirlikCityIds = \App\Models\DayTour\DayTour::where('agency_id', $agency->id)
            ->where('is_active', true)
            ->whereNotNull('departure_city_id')
            ->distinct()
            ->pluck('departure_city_id');
        $departureCityIds = $departureCityIds->merge($gunubirlikCityIds);
    }

    $departureCityIds = $departureCityIds->unique()->filter()->values();

    // Get city names
    $departureCities = \App\Models\Definition\City::whereIn('id', $departureCityIds)
        ->orderBy('city')
        ->get();

    $sectionStyle = $section->getConfig('style', 'default');
    $showBackground = $section->getConfig('show_background', true);
    $backgroundImage = $section->getData('background_image');
@endphp

<section class="tour-search-section {{ $sectionStyle }}" id="tour-search">
    @if($showBackground && $backgroundImage)
        <div class="search-bg-overlay" style="background-image: url('{{ asset('storage/' . $backgroundImage) }}');"></div>
    @endif

    <div class="container">
        @if($section->title || $section->subtitle)
            <div class="search-header">
                @if($section->subtitle)
                    <p class="search-subtitle">{{ $section->subtitle }}</p>
                @endif

                @if($section->title)
                    <h2 class="search-title">{{ $section->title }}</h2>
                @endif
            </div>
        @endif

        <div class="search-box">
            <form action="{{ route('customer.agency.tours.search', $agency->slug) }}" method="GET" class="search-form" id="tourSearchForm">
                {{-- Product Type Selection --}}
                @if($tourProductTypes->count() > 1)
                    <div class="form-group product-type-group">
                        <label class="form-label">
                            <i class="fas fa-tag"></i>
                            Tur Tipi
                        </label>
                        <div class="product-type-tabs">
                            @foreach($tourProductTypes as $index => $productType)
                                <label class="product-type-tab {{ $index === 0 ? 'active' : '' }}">
                                    <input type="radio"
                                           name="product_type"
                                           value="{{ $productType->code }}"
                                           {{ $index === 0 ? 'checked' : '' }}>
                                    <span class="tab-content">
                                        @if($productType->icon)
                                            <i class="fa {{ $productType->icon }}"></i>
                                        @endif
                                        <span>{{ $productType->name }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @elseif($tourProductTypes->count() === 1)
                    <input type="hidden" name="product_type" value="{{ $tourProductTypes->first()->code }}">
                @endif

                {{-- Search Fields --}}
                <div class="search-fields">
                    {{-- Departure Point --}}
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-map-marker-alt"></i>
                            Kalkış Noktası
                        </label>
                        <div class="input-wrapper">
                            <select name="departure_city_id" class="form-input">
                                <option value="">Tum Şehirler</option>
                                @foreach($departureCities as $city)
                                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Destination / Keyword --}}
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-search"></i>
                            Nereye / Anahtar Kelime
                        </label>
                        <div class="input-wrapper">
                            <input type="text"
                                   name="q"
                                   class="form-input"
                                   placeholder="Tur adi, sehir veya bolge..."
                                   autocomplete="off">
                        </div>
                    </div>

                    {{-- Date --}}
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-calendar-alt"></i>
                            Tarih
                        </label>
                        <div class="input-wrapper">
                            <input type="date"
                                   name="date"
                                   class="form-input"
                                   min="{{ date('Y-m-d') }}">
                        </div>
                    </div>

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

        {{-- Quick Links --}}
        @if($section->getConfig('show_quick_links', true) && $departureCities->count() > 0)
            <div class="quick-links">
                <span class="quick-links-label">Populer Kalkis Noktalari:</span>
                <div class="quick-links-list">
                    @foreach($departureCities->take(5) as $city)
                        <a href="{{ route('customer.agency.tours.search', ['agency' => $agency->slug, 'departure_city_id' => $city->id]) }}" class="quick-link">
                            {{ $city->name }}
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>

<style>
    .tour-search-section {
        position: relative;
        padding: 5rem 0;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        overflow: hidden;
    }

    .tour-search-section.with-bg {
        min-height: 500px;
        display: flex;
        align-items: center;
    }

    .search-bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.15;
        z-index: 0;
    }

    .tour-search-section > .container {
        position: relative;
        z-index: 1;
    }

    .search-header {
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .search-subtitle {
        color: var(--primary, #3B82F6);
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .search-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    .search-box {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
        max-width: 1100px;
        margin: 0 auto;
    }

    .search-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-label i {
        color: var(--primary, #3B82F6);
        width: 16px;
    }

    .product-type-tabs {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .product-type-tab {
        cursor: pointer;
        margin: 0;
    }

    .product-type-tab input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .product-type-tab .tab-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        background: #f3f4f6;
        border-radius: 50px;
        font-weight: 500;
        color: #6b7280;
        transition: all 0.2s ease;
        border: 2px solid transparent;
    }

    .product-type-tab .tab-content i {
        font-size: 1rem;
    }

    .product-type-tab:hover .tab-content {
        background: #e5e7eb;
    }

    .product-type-tab.active .tab-content,
    .product-type-tab input:checked + .tab-content {
        background: linear-gradient(135deg, var(--primary, #3B82F6), var(--secondary, #8B5CF6));
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .search-fields {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        align-items: end;
    }

    .input-wrapper {
        position: relative;
    }

    .form-input {
        width: 100%;
        padding: 0.875rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 1rem;
        color: #111827;
        background: #f9fafb;
        transition: all 0.2s ease;
    }

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

    .form-input::placeholder {
        color: #9ca3af;
    }

    .search-button-group {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .search-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 2rem;
        background: linear-gradient(135deg, var(--primary, #3B82F6), var(--secondary, #8B5CF6));
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        height: 52px;
    }

    .search-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

    .search-button:active {
        transform: translateY(0);
    }

    .quick-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
        flex-wrap: wrap;
    }

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

    .quick-links-list {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .quick-link {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        background: white;
        border-radius: 50px;
        font-size: 0.875rem;
        color: #374151;
        text-decoration: none;
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }

    .quick-link:hover {
        background: var(--primary, #3B82F6);
        color: white;
        border-color: var(--primary, #3B82F6);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .search-fields {
            grid-template-columns: repeat(2, 1fr);
        }

        .search-button-group {
            grid-column: span 2;
        }
    }

    @media (max-width: 768px) {
        .tour-search-section {
            padding: 3rem 0;
        }

        .search-title {
            font-size: 1.75rem;
        }

        .search-box {
            padding: 1.5rem;
            border-radius: 16px;
        }

        .search-fields {
            grid-template-columns: 1fr;
        }

        .search-button-group {
            grid-column: span 1;
        }

        .product-type-tabs {
            justify-content: center;
        }

        .quick-links {
            flex-direction: column;
            text-align: center;
        }

        .quick-links-list {
            justify-content: center;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Product type tab switching
        const productTypeTabs = document.querySelectorAll('.product-type-tab');

        productTypeTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                productTypeTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
    });
</script>