@extends('front.layouts.app')

@php
    $pageTitle = $settings->site_name ?? 'Astrotalk';
    $metaDescription = '';
    $metaKeywords = '';

    if (isset($subcategory)) {
        $pageTitle = $subcategory->seo_title ?? $subcategory->name . ' - ' . ($settings->site_name ?? 'Astrotalk');
        $metaDescription = $subcategory->meta_description ?? '';
    } elseif (isset($category)) {
        $pageTitle = $category->seo_title ?? $category->name . ' - ' . ($settings->site_name ?? 'Astrotalk');
        $metaDescription = $category->meta_description ?? '';
    }
@endphp

@section('title', $pageTitle)
@section('meta_description', $metaDescription)
@section('meta_keywords', $metaKeywords)

@push('schema_markup')
    @php
        $shopSchema = \App\Models\SeoSetting::where('page_name', 'shop')->value('schema_markup');
    @endphp
    @if($shopSchema)
        {!! $shopSchema !!}
    @endif
    @if(isset($category) && $category->schema_markup)
        {!! $category->schema_markup !!}
    @endif
    @if(isset($subcategory) && $subcategory->schema_markup)
        {!! $subcategory->schema_markup !!}
    @endif
    @if(isset($product) && $product->schema_markup)
        {!! $product->schema_markup !!}
    @endif
@endpush

@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="min-h-screen">
        <!-- Breadcrumbs / Header -->
        <div class="border-b border-white/5 bg-white/5">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                <h1 class="text-3xl font-bold text-white uppercase tracking-wide">
                    {{ isset($subcategory) ? $subcategory->name : (isset($category) ? $category->name : 'Shop All') }}
                </h1>
                <nav class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 mt-4">
                    <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>
                    <a href="{{ route('shop.index') }}" class="hover:text-white transition-colors">Shop</a>
                    @if(isset($category))
                        <i data-lucide="chevron-right" class="w-2.5 h-2.5"></i>
                        <a href="{{ route('shop.category', $category->slug) }}" class="hover:text-white transition-colors">
                            {{ $category->name }}
                        </a>
                    @endif
                    @if(isset($subcategory))
                        <i data-lucide="chevron-right" class="w-2.5 h-2.5"></i>
                        <span class="text-slate-300">{{ $subcategory->name }}</span>
                    @endif
                </nav>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="lg:grid lg:grid-cols-4 lg:gap-x-12">
                <!-- Sidebar Filters -->
                <aside class="hidden lg:block space-y-8">
                    <!-- Recent Searches -->
                    @if(isset($recentSearches) && $recentSearches->count() > 0)
                        <div class="border-b border-white/10 pb-6">
                            <h3 class="font-bold text-white mb-4 text-sm uppercase tracking-wide">Recent Searches</h3>
                            <div class="flex flex-wrap gap-2">
                                @foreach($recentSearches as $term)
                                    <a href="{{ route('shop.index', ['search' => $term]) }}"
                                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-white/10 text-slate-300 hover:bg-white/20 hover:text-white transition-colors">
                                        <i data-lucide="clock" class="mr-1.5 w-3 h-3 text-slate-400"></i>
                                        {{ $term }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <form action="{{ request()->url() }}" method="GET" id="filter-form">

                        <!-- Categories Filter -->
                        @if(isset($categories) && $categories->count() > 0 && !isset($category))
                            <div class="border-b border-white/10 py-6">
                                <h3 class="-my-3 flow-root">
                                    <span class="font-medium text-white">Categories</span>
                                </h3>
                                <div class="pt-6">
                                    <div class="space-y-4 max-h-60 overflow-y-auto custom-scrollbar pr-2">
                                        @foreach($categories as $cat)
                                            <div class="flex items-center group cursor-pointer">
                                                <input id="filter-cat-{{ $cat->id }}" name="categories[]" value="{{ $cat->id }}"
                                                    type="checkbox" {{ in_array($cat->id, request('categories', [])) ? 'checked' : '' }} onchange="this.form.submit()"
                                                    class="h-4 w-4 border-slate-600 rounded bg-slate-800 text-yellow-500 focus:ring-yellow-500">
                                                <label for="filter-cat-{{ $cat->id }}"
                                                    class="ml-3 text-sm text-slate-400 group-hover:text-white cursor-pointer transition-colors flex-1 flex justify-between items-center">
                                                    <span>{{ $cat->name }}</span>
                                                    <span
                                                        class="text-[10px] text-slate-600 font-bold bg-white/5 px-2 py-0.5 rounded-full">{{ $cat->products_count }}</span>
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Subcategories Filter -->
                        @if(isset($subcategories) && $subcategories->count() > 0)
                            <div class="border-b border-white/10 py-6">
                                <h3 class="-my-3 flow-root">
                                    <span class="font-medium text-white">Subcategories</span>
                                </h3>
                                <div class="pt-6" id="filter-section-0">
                                    <div class="space-y-4 max-h-60 overflow-y-auto custom-scrollbar pr-2">
                                        @foreach($subcategories as $sub)
                                            <div class="flex items-center group cursor-pointer">
                                                <input id="filter-sub-{{ $sub->id }}" name="subcategories[]" value="{{ $sub->id }}"
                                                    type="checkbox" {{ in_array($sub->id, request('subcategories', [])) ? 'checked' : '' }} onchange="this.form.submit()"
                                                    class="h-4 w-4 border-slate-600 rounded bg-slate-800 text-yellow-500 focus:ring-yellow-500">
                                                <label for="filter-sub-{{ $sub->id }}"
                                                    class="ml-3 text-sm text-slate-400 group-hover:text-white cursor-pointer transition-colors flex-1 flex justify-between items-center">
                                                    <span>{{ $sub->name }}</span>
                                                    <span
                                                        class="text-[10px] text-slate-600 font-bold bg-white/5 px-2 py-0.5 rounded-full">{{ $sub->sub_products_count }}</span>
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Price Filter -->
                        @if(isset($minPrice) && isset($maxPrice) && $minPrice != $maxPrice)
                            <div class="border-b border-white/10 py-6">
                                <h3 class="-my-3 flow-root">
                                    <span class="font-medium text-white">Price Range</span>
                                </h3>
                                <div class="pt-6 px-2">
                                    <div id="price-slider" class="mb-4"></div>
                                    <div class="flex justify-between text-xs font-bold text-slate-400">
                                        <span>₹<span id="price-min-display"></span></span>
                                        <span>₹<span id="price-max-display"></span></span>
                                    </div>
                                    <input type="hidden" name="min_price" id="input-min-price"
                                        value="{{ request('min_price', $minPrice) }}">
                                    <input type="hidden" name="max_price" id="input-max-price"
                                        value="{{ request('max_price', $maxPrice) }}">
                                </div>
                            </div>
                        @endif

                        @if(request()->anyFilled(['search', 'categories', 'subcategories', 'min_price', 'max_price']))
                            <a href="{{ request()->url() }}"
                                class="mt-8 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-xs border border-white/5 uppercase tracking-widest">
                                <i data-lucide="refresh-ccw" class="w-4 h-4"></i>
                                Clear All Filters
                            </a>
                        @endif
                    </form>
                </aside>

                <!-- Product Grid -->
                <div class="mt-6 lg:mt-0 lg:col-span-3">
                    @if($products->count() > 0)
                        <div id="product-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                            @include('shop.partials.product_cards', ['products' => $products])
                        </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 products...</span>
                            </div>
                        </div>

                        <!-- Sentinel for scroll detection -->
                        <div id="scroll-sentinel" class="h-20"></div>
                    @else
                        <div class="text-center py-20 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mb-4">
                                <i data-lucide="search-x" class="w-8 h-8 text-slate-500"></i>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-2">No products found</h3>
                            <p class="text-slate-400 max-w-sm mx-auto">We couldn't find any products matching your filters. Try
                                adjusting them.</p>
                            <a href="{{ request()->url() }}"
                                class="mt-6 px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-colors font-medium">
                                Clear Filters
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.css">
    <style>
        .noUi-connect {
            background: #eab308;
            /* Yellow-500 */
        }

        .noUi-horizontal {
            height: 6px;
            border: none;
            background: #334155;
            /* Slate-700 */
        }

        .noUi-handle {
            background: #eab308;
            border: 2px solid #1e293b;
            box-shadow: none;
            border-radius: 9999px;
            width: 18px;
            height: 18px;
            right: -9px;
            top: -6px;
        }

        .noUi-handle:before,
        .noUi-handle:after {
            display: none;
        }

        .noUi-target {
            background: #334155;
            border: none;
            box-shadow: none;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var slider = document.getElementById('price-slider');
            if (slider) {
                var minPrice = {{ isset($minPrice) ? $minPrice : 0 }};
                var maxPrice = {{ isset($maxPrice) ? $maxPrice : 10000 }};

                // Get current values from hidden inputs if set, else defaults
                var currentMin = {{ request('min_price') ?? (isset($minPrice) ? $minPrice : 0) }};
                var currentMax = {{ request('max_price') ?? (isset($maxPrice) ? $maxPrice : 10000) }};

                noUiSlider.create(slider, {
                    start: [currentMin, currentMax],
                    connect: true,
                    range: {
                        'min': minPrice,
                        'max': maxPrice
                    },
                    step: 10,
                    format: {
                        to: function (value) {
                            return Math.round(value);
                        },
                        from: function (value) {
                            return Number(value);
                        }
                    }
                });

                var minInput = document.getElementById('input-min-price');
                var maxInput = document.getElementById('input-max-price');
                var minDisplay = document.getElementById('price-min-display');
                var maxDisplay = document.getElementById('price-max-display');

                slider.noUiSlider.on('update', function (values, handle) {
                    var value = values[handle];

                    if (handle) {
                        maxInput.value = value;
                        maxDisplay.textContent = value;
                    } else {
                        minInput.value = value;
                        minDisplay.textContent = value;
                    }
                    slider.noUiSlider.on('set', function (values, handle) {
                        document.getElementById('filter-form').submit();
                    });
                }

                    // Infinite Scroll Logic
                    let currentPage = 1;
                const totalPages = {{ $products->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) {
                            loadMoreProducts();
                        }
                    });
                }, observerOptions);

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

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

                    const loader = document.getElementById('infinite-scroll-loader');
                    if (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('product-grid');

                        const temp = document.createElement('div');
                        temp.innerHTML = html;

                        while (temp.firstChild) {
                            grid.appendChild(temp.firstChild);
                        }

                        if (typeof lucide !== 'undefined') {
                            lucide.createIcons();
                        }

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

                    } catch (error) {
                        console.error('Error loading more products:', error);
                        currentPage--;
                    } finally {
                        isLoading = false;
                        if (loader) loader.classList.add('hidden');
                    }
                }
            });
    </script>
@endpush