@extends('layouts.app')
@section('content')
<main class="plp-main">
                        <!-- Category Pill Filters -->
        <div class="product-type-filters" style="display: flex; gap: 12px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap;">
            <a href="{{ route('engagement-rings') }}" class="category-pill {{ !request('type') ? 'active' : '' }}">
                <i data-lucide="sparkles" style="width: 16px; height: 16px;"></i> All
            </a>
            
            @php
                $categoriesData = [
                    'Rings' => 'gem',
                    'Wedding Band' => 'circle',
                    'Necklaces' => 'link',
                    'Earrings' => 'droplet',
                    'Bracelets' => 'circle-dashed'
                ];
            @endphp
            
            @foreach($categoriesData as $t => $icon)
            <a href="{{ route('engagement-rings', ['type' => $t]) }}" class="category-pill {{ request('type') == $t ? 'active' : '' }}">
                <i data-lucide="{{ $icon }}" style="width: 16px; height: 16px;"></i> {{ $t }}
            </a>
            @endforeach
            
            <style>
                .category-pill {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 10px 22px;
                    border: 1px solid #ddd;
                    border-radius: 30px;
                    text-decoration: none;
                    color: #555;
                    font-size: 13px;
                    font-weight: 500;
                    letter-spacing: 0.5px;
                    transition: all 0.2s ease;
                    background: #fff;
                }
                .category-pill:hover {
                    border-color: #1a252f;
                    color: #1a252f;
                }
                .category-pill.active {
                    background: #1a252f;
                    color: #fff;
                    border-color: #1a252f;
                }
            </style>
        </div>

        <!-- Items count -->
        <div class="plp-meta">
            <span class="items-count">{{ $products->total() }} Items</span>
        </div>

        <!-- Product Grid -->
        <div class="plp-grid" id="plp-grid-container">
            @include('partials.products-list')
        </div>

        <!-- Loading Spinner -->
        <div id="infinite-scroll-loader" style="display:none; text-align:center; padding:20px;">
            <div class="spinner" style="border: 4px solid #f3f3f3; border-top: 4px solid #333; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"></div>
            <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
            <script>document.addEventListener('DOMContentLoaded', function() { if (typeof lucide !== 'undefined') { lucide.createIcons(); } });</script>
        </div>
    </main>
<script>
document.addEventListener('DOMContentLoaded', function() {
    function attachSwatchEvents() {
        const swatches = document.querySelectorAll('.dynamic-swatch:not(.bound)');
        swatches.forEach(swatch => {
            swatch.classList.add('bound');
            swatch.addEventListener('mouseenter', function() {
                const card = this.closest('.plp-card');
                if (card) {
                    const imgEl = card.querySelector('.plp-main-img');
                    if (imgEl && this.dataset.img) { imgEl.src = this.dataset.img; }
                    const priceEl = card.querySelector('.plp-price');
                    if (priceEl && this.dataset.price) { priceEl.textContent = '$ ' + this.dataset.price + ' USD'; }
                    const links = card.querySelectorAll('.plp-img-link, .plp-title-link');
                    links.forEach(link => { if (this.dataset.link) { link.href = this.dataset.link; } });
                    const cardSwatches = card.querySelectorAll('.dynamic-swatch');
                    cardSwatches.forEach(s => { s.classList.remove('active'); s.textContent = ''; });
                    this.classList.add('active');
                    let mLabel = 'YG';
                    if(this.classList.contains('white-gold')) mLabel = 'WG';
                    if(this.classList.contains('rose-gold')) mLabel = 'RG';
                    if(this.classList.contains('platinum')) mLabel = 'PL';
                    this.textContent = mLabel;
                }
            });
        });
    }
    attachSwatchEvents();

    // Infinite Scroll Logic
    let currentPage = 1;
    let hasMorePages = {{ $products->hasMorePages() ? 'true' : 'false' }};
    let isLoading = false;
    const loader = document.getElementById('infinite-scroll-loader');
    const container = document.getElementById('plp-grid-container');

    window.addEventListener('scroll', function() {
        if (!hasMorePages || isLoading) return;
        
        // Check if near bottom
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
            loadMoreProducts();
        }
    });

    function loadMoreProducts() {
        isLoading = true;
        loader.style.display = 'block';
        currentPage++;

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

        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.text())
        .then(html => {
            if (html.trim() === '' || html.includes('no-products-msg')) {
                hasMorePages = false;
            } else {
                container.insertAdjacentHTML('beforeend', html);
                attachSwatchEvents();
            }
            isLoading = false;
            loader.style.display = 'none';
        })
        .catch(err => {
            console.error('Error loading more products:', err);
            isLoading = false;
            loader.style.display = 'none';
        });
    }
});
</script>
@endsection