@extends('front.layouts.app')

@section('title', 'Browse Astrologers - Astrotalk')

@section('content')
    <style>
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(234, 179, 8, 0.2);
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(234, 179, 8, 0.4);
        }
    </style>
    <div class="py-20 px-6">
        <div class="max-w-[1440px] mx-auto">
            <!-- Breadcrumbs -->
            <nav class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-8">
                <a href="{{ route('home') }}" class="hover:text-white transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-2.5 h-2.5"></i>
                <span class="text-slate-300">Browse Astrologers</span>
            </nav>

            <div class="text-center mb-12">
                <h1 class="text-4xl md:text-5xl font-black text-white mb-4 tracking-tight">
                    @if(request('skill'))
                        Astrologers for <span
                            class="text-yellow-500">{{ ucwords(str_replace('-', ' ', request('skill'))) }}</span>
                    @elseif(request('location'))
                        Astrologers in <span class="text-green-500">{{ request('location') }}</span>
                    @elseif(request('category'))
                        <span class="text-blue-500">{{ ucwords(str_replace('-', ' ', request('category'))) }}</span> Astrologers
                    @else
                        Browse <span class="text-yellow-500">Astrologers</span>
                    @endif
                </h1>
                <p class="text-slate-400 text-lg max-w-2xl mx-auto">Find the best astrologers to guide you through life's
                    journey.</p>
            </div>

            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Sidebar Filters -->
                <aside class="w-full lg:w-1/4 space-y-8">
                    <form id="filterForm" action="{{ route('front.astrologers.index') }}" method="GET" class="space-y-8">
                        <!-- Search Name -->
                        <div class="glass rounded-3xl p-6 border border-white/5">
                            <h3 class="text-white font-bold mb-4 flex items-center gap-2">
                                <i data-lucide="search" class="w-4 h-4 text-yellow-500"></i>
                                Search
                            </h3>
                            <div class="relative">
                                <input type="text" name="search" value="{{ request('search') }}"
                                    placeholder="Astrologer name..." onchange="this.form.submit()"
                                    class="w-full bg-slate-900/50 border border-white/10 rounded-2xl py-3 pl-4 pr-10 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-yellow-500/50 transition-all text-sm">
                                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2">
                                    <i data-lucide="arrow-right" class="w-4 h-4 text-slate-500"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Skill Filter -->
                        <div class="glass rounded-3xl p-6 border border-white/5">
                            <h3 class="text-white font-bold mb-4 flex items-center gap-2">
                                <i data-lucide="sparkles" class="w-4 h-4 text-blue-500"></i>
                                Top Skills
                            </h3>
                            <div class="space-y-2 max-h-60 overflow-y-auto custom-scrollbar pr-2">
                                <label class="flex items-center gap-3 group cursor-pointer">
                                    <input type="radio" name="skill" value="" {{ !request('skill') ? 'checked' : '' }}
                                        onchange="this.form.submit()" class="peer sr-only">
                                    <div
                                        class="w-5 h-5 rounded border border-white/10 flex items-center justify-center peer-checked:bg-yellow-500 peer-checked:border-yellow-500 transition-all">
                                        <i data-lucide="check"
                                            class="w-3 h-3 text-slate-900 opacity-0 peer-checked:opacity-100"></i>
                                    </div>
                                    <span class="text-sm text-slate-400 group-hover:text-white transition-colors">All
                                        Skills</span>
                                </label>
                                @foreach($skills as $skill)
                                    <label class="flex items-center gap-3 group cursor-pointer">
                                        <input type="radio" name="skill" value="{{ $skill->slug }}" {{ request('skill') == $skill->slug ? 'checked' : '' }} onchange="this.form.submit()"
                                            class="peer sr-only">
                                        <div
                                            class="w-5 h-5 rounded border border-white/10 flex items-center justify-center peer-checked:bg-yellow-500 peer-checked:border-yellow-500 transition-all">
                                            <i data-lucide="check"
                                                class="w-3 h-3 text-slate-900 opacity-0 peer-checked:opacity-100"></i>
                                        </div>
                                        <span
                                            class="text-sm text-slate-400 group-hover:text-white transition-colors flex-1 flex justify-between items-center">
                                            {{ $skill->name }}
                                            <span
                                                class="text-[10px] text-slate-600 font-bold bg-white/5 px-2 py-0.5 rounded-full">{{ $skill->users_count }}</span>
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Category Filter -->
                        <div class="glass rounded-3xl p-6 border border-white/5">
                            <h3 class="text-white font-bold mb-4 flex items-center gap-2">
                                <i data-lucide="award" class="w-4 h-4 text-purple-500"></i>
                                Categories
                            </h3>
                            <div class="space-y-2 max-h-60 overflow-y-auto custom-scrollbar pr-2">
                                <label class="flex items-center gap-3 group cursor-pointer">
                                    <input type="radio" name="category" value="" {{ !request('category') ? 'checked' : '' }}
                                        onchange="this.form.submit()" class="peer sr-only">
                                    <div
                                        class="w-5 h-5 rounded border border-white/10 flex items-center justify-center peer-checked:bg-yellow-500 peer-checked:border-yellow-500 transition-all">
                                        <i data-lucide="check"
                                            class="w-3 h-3 text-slate-900 opacity-0 peer-checked:opacity-100"></i>
                                    </div>
                                    <span class="text-sm text-slate-400 group-hover:text-white transition-colors">All
                                        Categories</span>
                                </label>
                                @foreach($categories as $cat)
                                    <label class="flex items-center gap-3 group cursor-pointer">
                                        <input type="radio" name="category" value="{{ $cat->slug }}" {{ request('category') == $cat->slug ? 'checked' : '' }} onchange="this.form.submit()"
                                            class="peer sr-only">
                                        <div
                                            class="w-5 h-5 rounded border border-white/10 flex items-center justify-center peer-checked:bg-yellow-500 peer-checked:border-yellow-500 transition-all">
                                            <i data-lucide="check"
                                                class="w-3 h-3 text-slate-900 opacity-0 peer-checked:opacity-100"></i>
                                        </div>
                                        <span
                                            class="text-sm text-slate-400 group-hover:text-white transition-colors flex-1 flex justify-between items-center">
                                            {{ $cat->name }}
                                            <span
                                                class="text-[10px] text-slate-600 font-bold bg-white/5 px-2 py-0.5 rounded-full">{{ $cat->users_count }}</span>
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Location Filter -->
                        <div class="glass rounded-3xl p-6 border border-white/5">
                            <h3 class="text-white font-bold mb-4 flex items-center gap-2">
                                <i data-lucide="map-pin" class="w-4 h-4 text-red-500"></i>
                                Location
                            </h3>
                            <div class="space-y-2 max-h-60 overflow-y-auto custom-scrollbar pr-2">
                                <label class="flex items-center gap-3 group cursor-pointer">
                                    <input type="radio" name="location" value="" {{ !request('location') ? 'checked' : '' }}
                                        onchange="this.form.submit()" class="peer sr-only">
                                    <div
                                        class="w-5 h-5 rounded border border-white/10 flex items-center justify-center peer-checked:bg-yellow-500 peer-checked:border-yellow-500 transition-all">
                                        <i data-lucide="check"
                                            class="w-3 h-3 text-slate-900 opacity-0 peer-checked:opacity-100"></i>
                                    </div>
                                    <span class="text-sm text-slate-400 group-hover:text-white transition-colors">All
                                        Locations</span>
                                </label>
                                @foreach($locations as $loc)
                                    <label class="flex items-center gap-3 group cursor-pointer">
                                        <input type="radio" name="location" value="{{ $loc->name }}" {{ request('location') == $loc->name ? 'checked' : '' }} onchange="this.form.submit()"
                                            class="peer sr-only">
                                        <div
                                            class="w-5 h-5 rounded border border-white/10 flex items-center justify-center peer-checked:bg-yellow-500 peer-checked:border-yellow-500 transition-all">
                                            <i data-lucide="check"
                                                class="w-3 h-3 text-slate-900 opacity-0 peer-checked:opacity-100"></i>
                                        </div>
                                        <span
                                            class="text-sm text-slate-400 group-hover:text-white transition-colors flex-1 flex justify-between items-center">
                                            {{ $loc->name }}
                                            <span
                                                class="text-[10px] text-slate-600 font-bold bg-white/5 px-2 py-0.5 rounded-full">{{ $loc->users_count }}</span>
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Ratings Filter -->
                        <div class="glass rounded-3xl p-6 border border-white/5">
                            <h3 class="text-white font-bold mb-4 flex items-center gap-2">
                                <i data-lucide="star" class="w-4 h-4 text-yellow-500"></i>
                                Minimum Rating
                            </h3>
                            <div class="space-y-3">
                                @for($i = 5; $i >= 1; $i--)
                                    <label class="flex items-center gap-3 group cursor-pointer">
                                        <input type="radio" name="rating" value="{{ $i }}" {{ request('rating') == $i ? 'checked' : '' }} onchange="this.form.submit()" class="peer sr-only">
                                        <div
                                            class="w-5 h-5 rounded-full border border-white/10 flex items-center justify-center peer-checked:bg-yellow-500 peer-checked:border-yellow-500 transition-all">
                                            <div class="w-2 h-2 rounded-full bg-slate-900 opacity-0 peer-checked:opacity-100">
                                            </div>
                                        </div>
                                        <div class="flex items-center gap-1">
                                            @for($j = 1; $j <= 5; $j++)
                                                <i data-lucide="star"
                                                    class="w-3 h-3 {{ $j <= $i ? 'text-yellow-500 fill-current' : 'text-slate-600' }}"></i>
                                            @endfor
                                            <span class="text-xs text-slate-400 ml-1">& Up</span>
                                        </div>
                                    </label>
                                @endfor
                            </div>
                        </div>

                        <a href="{{ route('front.astrologers.index') }}"
                            class="flex items-center justify-center gap-2 w-full py-4 rounded-3xl text-slate-400 font-bold hover:text-white hover:bg-white/5 transition-all text-sm border border-white/5">
                            <i data-lucide="refresh-ccw" class="w-4 h-4"></i>
                            Clear All Filters
                        </a>
                    </form>
                </aside>

                <!-- Main Content -->
                <div class="w-full lg:w-3/4">
                    @if($astrologers->count() > 0)
                        <div id="astrologer-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @include('front.astrologers.partials.astrologer_cards', ['astrologers' => $astrologers, 'favouriteIds' => $favouriteIds])
                        </div>

                        <!-- Infinite Scroll Loader -->
                        <div id="infinite-scroll-loader" class="mt-12 text-center hidden">
                            <div
                                class="inline-flex items-center gap-3 px-6 py-3 rounded-full bg-white/5 border border-white/10 text-white">
                                <div class="w-5 h-5 border-2 border-yellow-500 border-t-transparent rounded-full animate-spin">
                                </div>
                                <span class="text-sm font-medium">Loading more astrologers...</span>
                            </div>
                        </div>

                        <!-- Sentinal element for scroll detection -->
                        <div id="scroll-sentinel" class="h-20"></div>
                    @else
                        <div class="text-center py-20 glass rounded-[2rem]">
                            <i data-lucide="search-x" class="w-16 h-16 text-slate-600 mx-auto mb-4"></i>
                            <h3 class="text-xl font-bold text-white mb-2">No Astrologers Found</h3>
                            <p class="text-slate-400">We couldn't find any astrologers matching your criteria.</p>
                            <a href="{{ route('front.astrologers.index') }}"
                                class="inline-block mt-6 text-yellow-500 font-bold hover:text-yellow-400">
                                Clear Filters
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        const totalPages = {{ $astrologers->lastPage() }};
        let isLoading = false;

        const observerOptions = {
            root: null,
            rootMargin: '100px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !isLoading && currentPage < totalPages) {
                    loadMoreAstrologers();
                }
            });
        }, observerOptions);

        const sentinel = document.getElementById('scroll-sentinel');
        if (sentinel) {
            observer.observe(sentinel);
        }

        async function loadMoreAstrologers() {
            isLoading = true;
            currentPage++;

            const loader = document.getElementById('infinite-scroll-loader');
            loader.classList.remove('hidden');

            const url = new URL(window.location.href);
            url.searchParams.set('page', currentPage);

            try {
                const response = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (!response.ok) throw new Error('Network response was not ok');

                const html = await response.text();
                const grid = document.getElementById('astrologer-grid');

                // Create a temporary container to hold the new HTML
                const temp = document.createElement('div');
                temp.innerHTML = html;

                // Append nodes one by one
                while (temp.firstChild) {
                    grid.appendChild(temp.firstChild);
                }

                // Re-initialize Lucide icons for new elements
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }

                if (currentPage >= totalPages) {
                    observer.unobserve(sentinel);
                    sentinel.remove();
                }

            } catch (error) {
                console.error('Error loading more astrologers:', error);
                currentPage--; // Reset page on error to retry
            } finally {
                isLoading = false;
                loader.classList.add('hidden');
            }
        }

        function toggleFavourite(astrologerId) {
            if (!{{ auth()->check() ? 'true' : 'false' }}) {
                window.location.href = "{{ route('login') }}?redirect=" + encodeURIComponent(window.location.href);
                return;
            }

            fetch(`{{ url('user/favourites') }}/${astrologerId}/toggle`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const btn = document.getElementById(`fav-btn-${astrologerId}`);
                        const icon = btn.querySelector('i, svg');

                        if (data.isFavourite) {
                            icon.classList.remove('text-white');
                            icon.classList.add('text-red-500', 'fill-red-500');
                        } else {
                            icon.classList.remove('text-red-500', 'fill-red-500');
                            icon.classList.add('text-white');
                        }
                    }
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
@endpush