@extends('page.layouts.app')

@section('title', 'Onaylı Acenteler - Acente Pro Max')

@section('content')

    {{-- Hero with Filters --}}
    <section class="relative bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 pt-32 pb-16 overflow-hidden">
        <div class="absolute inset-0 opacity-20">
            <div
                class="absolute top-0 -left-4 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
            <div
                class="absolute top-0 -right-4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
            <div
                class="absolute -bottom-8 left-20 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <div
                    class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-6 py-3 rounded-full mb-6">
                    <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                    <span class="text-white font-semibold">Güvenilir ve Onaylı</span>
                </div>

                <h1 class="text-5xl md:text-6xl font-black text-white mb-6">
                    Acente <span class="bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">Ortaklarımız</span>
                </h1>
                <p class="text-xl text-gray-300">Deneyimli ve güvenilir acenteler bizimle çalışmayı seçiyor!</p>
            </div>

            {{-- Filter Panel --}}
            <div class="bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl p-8">
                <form id="filter-form" method="GET" class="space-y-6">
                    {{-- Search --}}
                    <div class="relative">
                        <input type="text" name="search" placeholder="Acente adı veya firma ara..."
                               value="{{ request('search') }}"
                               class="w-full pl-14 pr-4 py-4 border-2 border-gray-200 rounded-2xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all text-lg font-medium bg-gray-50 focus:bg-white">
                        <div class="absolute left-5 top-1/2 -translate-y-1/2 text-blue-500">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                    </div>

                    {{-- Filter Grid --}}
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        {{-- Şehir --}}
                        <select name="city"
                                class="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 bg-gray-50 focus:bg-white transition-all">
                            <option value="">Tüm Şehirler</option>
                            @foreach($cities as $city)
                                <option
                                    value="{{ $city }}" {{ request('city') == $city ? 'selected' : '' }}>{{ $city }}</option>
                            @endforeach
                        </select>

                        {{-- Minimum Tur Sayısı --}}
                        <select name="min_tours"
                                class="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 bg-gray-50 focus:bg-white transition-all">
                            <option value="">Tüm Acenteler</option>
                            <option value="5" {{ request('min_tours') == '5' ? 'selected' : '' }}>5+ Tur</option>
                            <option value="10" {{ request('min_tours') == '10' ? 'selected' : '' }}>10+ Tur</option>
                            <option value="20" {{ request('min_tours') == '20' ? 'selected' : '' }}>20+ Tur</option>
                            <option value="50" {{ request('min_tours') == '50' ? 'selected' : '' }}>50+ Tur</option>
                        </select>

                        {{-- İş Tipi --}}
                        <select name="business_type"
                                class="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 bg-gray-50 focus:bg-white transition-all">
                            <option value="">İş Tipi</option>
                            <option
                                value="tour_operator" {{ request('business_type') == 'tour_operator' ? 'selected' : '' }}>
                                Tur Operatörü
                            </option>
                            <option
                                value="travel_agency" {{ request('business_type') == 'travel_agency' ? 'selected' : '' }}>
                                Seyahat Acentesi
                            </option>
                            <option value="both" {{ request('business_type') == 'both' ? 'selected' : '' }}>Her İkisi
                            </option>
                        </select>

                        {{-- Sıralama --}}
                        <select name="sort"
                                class="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 bg-gray-50 focus:bg-white transition-all">
                            <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>En Yeni</option>
                            <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>En Eski</option>
                            <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>İsim (A-Z)
                            </option>
                            <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>İsim
                                (Z-A)
                            </option>
                            <option value="tours_most" {{ request('sort') == 'tours_most' ? 'selected' : '' }}>En Çok
                                Tur
                            </option>
                            <option value="tours_least" {{ request('sort') == 'tours_least' ? 'selected' : '' }}>En Az
                                Tur
                            </option>
                        </select>
                    </div>

                    <div class="flex gap-3">
                        <button type="submit"
                                class="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 rounded-xl font-bold text-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                            Filtrele
                        </button>
                        <button type="button" id="clear-filters"
                                class="px-8 py-4 border-2 border-gray-300 text-gray-700 rounded-xl font-bold hover:bg-gray-50 transition-all">
                            Temizle
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    {{-- Agencies Grid --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Results Count --}}
            <div class="mb-8 flex justify-between items-center">
                <h2 class="text-2xl font-bold text-gray-900">
                    <span id="agency-count">{{ $agencies->total() }}</span> Acente Bulundu
                </h2>
            </div>

            {{-- Agencies Grid --}}
            <div id="agencies-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                @include('page.partials.agency-cards', ['agencies' => $agencies])
            </div>

            {{-- Loading Indicator --}}
            <div id="loading" class="hidden text-center py-12">
                <div class="inline-flex items-center gap-3 bg-white px-8 py-4 rounded-full shadow-lg">
                    <svg class="animate-spin h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span class="font-semibold text-gray-700">Daha fazla acente yükleniyor...</span>
                </div>
            </div>

            {{-- No More Results --}}
            <div id="no-more" class="hidden text-center py-12">
                <div class="inline-flex items-center gap-3 bg-gray-100 px-8 py-4 rounded-full">
                    <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="font-semibold text-gray-600">Tüm acenteler gösteriliyor</span>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script>
            let currentPage = 1;
            let loading = false;
            let hasMore = {{ $agencies->hasMorePages() ? 'true' : 'false' }};

            // Clear Filters
            document.getElementById('clear-filters').addEventListener('click', function () {
                window.location.href = '{{ route('customer.agencies') }}';
            });

            // Auto-submit on filter change
            document.querySelectorAll('#filter-form select, #filter-form input[name="search"]').forEach(element => {
                if (element.name === 'search') {
                    let timeout;
                    element.addEventListener('input', function () {
                        clearTimeout(timeout);
                        timeout = setTimeout(() => {
                            document.getElementById('filter-form').submit();
                        }, 500);
                    });
                } else {
                    element.addEventListener('change', function () {
                        document.getElementById('filter-form').submit();
                    });
                }
            });

            // Infinite Scroll
            function loadMoreAgencies() {
                if (loading || !hasMore) return;

                loading = true;
                document.getElementById('loading').classList.remove('hidden');

                const formData = new FormData(document.getElementById('filter-form'));
                const params = new URLSearchParams(formData);
                params.append('page', currentPage + 1);

                fetch('{{ route('customer.agencies') }}?' + params.toString(), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('loading').classList.add('hidden');

                        if (data.agencies) {
                            document.getElementById('agencies-container').insertAdjacentHTML('beforeend', data.agencies);
                            currentPage = data.nextPage;
                            hasMore = data.hasMore;

                            if (!hasMore) {
                                document.getElementById('no-more').classList.remove('hidden');
                            }

                            // Animate new cards
                            const newCards = document.querySelectorAll('.agency-card:not(.animated)');
                            newCards.forEach((card, index) => {
                                card.classList.add('animated');
                                card.style.opacity = '0';
                                card.style.transform = 'translateY(30px)';
                                setTimeout(() => {
                                    card.style.transition = 'all 0.6s ease';
                                    card.style.opacity = '1';
                                    card.style.transform = 'translateY(0)';
                                }, index * 50);
                            });
                        }

                        loading = false;
                    })
                    .catch(error => {
                        console.error('Error loading agencies:', error);
                        document.getElementById('loading').classList.add('hidden');
                        loading = false;
                    });
            }

            // Scroll Event
            let scrollTimeout;
            window.addEventListener('scroll', function () {
                clearTimeout(scrollTimeout);
                scrollTimeout = setTimeout(function () {
                    const scrollPosition = window.innerHeight + window.scrollY;
                    const pageHeight = document.documentElement.scrollHeight;

                    if (scrollPosition >= pageHeight - 500) {
                        loadMoreAgencies();
                    }
                }, 100);
            });

            // Animation on load
            document.querySelectorAll('.agency-card').forEach((card, index) => {
                card.classList.add('animated');
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                setTimeout(() => {
                    card.style.transition = 'all 0.6s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 50);
            });
        </script>
    @endpush

@endsection