@extends('layouts.app')

@section('extra_css')
    <style>
        .filter-wrap {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 1rem;
            flex-wrap: wrap;
        }
        .filter-item {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--color-text-muted);
            cursor: pointer;
            transition: var(--anim-base);
            position: relative;
            white-space: nowrap;
        }
        .filter-item.active, .filter-item:hover {
            color: var(--color-primary);
        }
        .filter-item.active::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: var(--color-secondary);
            border-radius: 10px;
        }
        .filter-outer {
            position: relative;
            width: 100%;
        }
        .scroll-indicator {
            display: none;
        }
        @media (max-width: 768px) {
            .filter-wrap {
                justify-content: flex-start;
                gap: 1.5rem;
                margin-bottom: 3rem;
                padding-bottom: 1rem;
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                margin-left: -1.25rem;
                margin-right: -1.25rem;
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }
            .filter-wrap::-webkit-scrollbar {
                display: none;
            }
            .filter-item.active::after {
                bottom: -16px;
            }
            .scroll-indicator {
                display: flex;
                position: absolute;
                right: 0;
                top: 0;
                bottom: 1.5rem; /* Menyesuaikan padding-bottom filter-wrap */
                align-items: center;
                background: linear-gradient(to left, #fff 40%, transparent);
                padding-left: 4rem;
                padding-right: 1.25rem;
                color: rgba(0, 0, 0, 0.2);
                font-size: 0.8rem;
                pointer-events: none;
                z-index: 10;
                animation: hintSlide 1.5s infinite;
                margin-right: -1.25rem; /* Menutup padding container */
                transition: opacity 0.4s ease, visibility 0.4s;
            }
            @keyframes hintSlide {
                0%, 100% { transform: translateX(0); opacity: 0.5; }
                50% { transform: translateX(-5px); opacity: 1; }
            }
        }
        
        .sticky-filter-section {
            position: sticky;
            top: 70px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            z-index: 100;
            padding-top: 1.5rem;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
        }

        @media (max-width: 768px) {
            .sticky-filter-section {
                top: 55px;
                padding-top: 1.5rem;
                margin-bottom: 2rem;
                margin-left: -1.25rem;
                margin-right: -1.25rem;
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }
            .sticky-filter-section .section-title-wrap {
                margin-bottom: 1rem;
            }
            .sticky-filter-section .section-title {
                font-size: 1.8rem;
            }
            .sticky-filter-section .section-label {
                margin-bottom: 0.3rem;
                font-size: 0.6rem;
            }
            .filter-wrap {
                margin-bottom: 0.5rem !important; /* Overriding previous margin */
            }
        }

        .desktop-only-title {
            display: block;
        }
        .mobile-only-sticky-title {
            display: none;
        }

        @media (max-width: 768px) {
            .desktop-only-title {
                display: none;
            }
            .mobile-only-sticky-title {
                display: block;
            }
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
            animation: gridFade 0.8s var(--ease-out) both;
        }
        @keyframes gridFade {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
@endsection

@section('content')
    <section id="productListSection" class="section-padding" style="margin-top: 20px; padding-top: 140px;">
        <div class="container">
            <div class="section-title-wrap reveal-anim active desktop-only-title">
                <span class="section-label">Koleksi Kami</span>
                <h2 class="section-title">Daftar <strong>Produk</strong></h2>
            </div>

            <div class="sticky-filter-section">
                <div class="section-title-wrap reveal-anim active mobile-only-sticky-title">
                    <span class="section-label">Koleksi Kami</span>
                    <h2 class="section-title">Daftar <strong>Produk</strong></h2>
                </div>

                <!-- Modern Filter -->
                <div class="filter-outer">
                    <div class="filter-wrap reveal-anim active">
                        <a href="javascript:void(0)" class="filter-item {{ $cat_id === 0 ? 'active' : '' }}" onclick="loadCategory(0, this)">Semua</a>
                        @foreach ($categories as $cat)
                            <a href="javascript:void(0)" class="filter-item {{ $cat_id === (int)$cat->id ? 'active' : '' }}" onclick="loadCategory({{ $cat->id }}, this)">
                                {{ $cat->name }}
                            </a>
                        @endforeach
                    </div>
                    <div class="scroll-indicator" id="scrollHint">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>

            <div class="product-grid" id="productGrid">
                @foreach ($products as $p)
                <div class="product-card reveal-anim active">
                    <div class="product-img-box">
                        <img src="{{ $p->main_image ? asset('uploads/'.$p->main_image) : 'https://placehold.co/800x1000/111/444' }}" alt="{{ $p->name }}">
                        @if (($p->availability ?? '') == 'Pre-Order')
                            <div style="position: absolute; bottom: 0; left: 0; background: var(--color-secondary); color: var(--color-primary); padding: 0.2rem 0.5rem; border-radius: 0 10px 0 0; font-size: 6px; font-weight: 700; letter-spacing: 0.1em; z-index: 10;">
                                PRE-ORDER
                            </div>
                        @endif
                        <div class="product-overlay">
                            <a href="{{ route('products.show', $p->id) }}" class="btn-view">Lihat Detail</a>
                        </div>
                    </div>
                    <div class="product-info">
                        <h3 class="product-name">{{ $p->name }}</h3>
                        <p class="product-price">
                            @if ($p->price_to > $p->price)
                                Harga di antara <br>
                                Rp {{ number_format($p->price, 0, ',', '.') }} - Rp {{ number_format($p->price_to, 0, ',', '.') }}
                            @else
                                Rp {{ number_format($p->price, 0, ',', '.') }}
                            @endif
                        </p>
                    </div>
                </div>
                @endforeach
            </div>

            @if (count($products) === 0)
                <div style="text-align: center; padding: 10rem 0; opacity: 0.3;">
                    <i class="fas fa-search-minus text-4xl mb-4"></i>
                    <p style="letter-spacing: 0.3em; font-size: 0.7rem; text-transform: uppercase;">Tidak ada koleksi dalam kategori ini.</p>
                </div>
            @endif
        </div>
    </section>
@endsection

@section('extra_js')
    <script>
        function loadCategory(catId, element) {
            // Update active state in UI
            document.querySelectorAll('.filter-item').forEach(item => item.classList.remove('active'));
            element.classList.add('active');

            const grid = document.getElementById('productGrid');
            grid.style.opacity = '0.5';
            grid.style.transition = 'opacity 0.3s ease';

            fetch(`{{ url('/api/products') }}?category=${catId}`)
                .then(response => response.json())
                .then(data => {
                    grid.innerHTML = '';
                    grid.style.opacity = '1';

                    if (data.length === 0) {
                        grid.innerHTML = `
                            <div style="grid-column: 1 / -1; text-align: center; padding: 5rem 0; opacity: 0.3;">
                                <i class="fas fa-search-minus" style="font-size: 3rem; margin-bottom: 1rem;"></i>
                                <p style="letter-spacing: 0.3em; font-size: 0.7rem; text-transform: uppercase;">Tidak ada koleksi dalam kategori ini.</p>
                            </div>
                        `;
                    } else {
                        data.forEach(p => {
                            const preOrder = p.availability === 'Pre-Order' ? 
                                `<div style="position: absolute; bottom: 0; left: 0; background: var(--color-secondary); color: var(--color-primary); padding: 0.2rem 0.5rem; border-radius: 0 10px 0 0; font-size: 6px; font-weight: 700; letter-spacing: 0.1em; z-index: 10;">PRE-ORDER</div>` : '';
                            
                            const priceHtml = p.price_to > p.price ? 
                                `Harga di antara <br> ${p.price_formatted} - ${p.price_to_formatted}` : 
                                p.price_formatted;

                            const detailUrl = `{{ url('/products') }}/${p.id}`;

                            const card = `
                                <div class="product-card reveal-anim active">
                                    <div class="product-img-box">
                                        <img src="${p.main_image ? '{{ asset('uploads') }}/'+p.main_image : 'https://placehold.co/800x1000/111/444'}" alt="${p.name}">
                                        ${preOrder}
                                        <div class="product-overlay">
                                            <a href="${detailUrl}" class="btn-view">Lihat Detail</a>
                                        </div>
                                    </div>
                                    <div class="product-info">
                                        <h3 class="product-name">${p.name}</h3>
                                        <p class="product-price">${priceHtml}</p>
                                    </div>
                                </div>
                            `;
                            grid.innerHTML += card;
                        });
                    }
                    
                    // Scroll to the product grid
                    setTimeout(() => {
                        const grid = document.getElementById('productGrid');
                        if (grid) {
                            const gridTop = grid.getBoundingClientRect().top + window.pageYOffset;
                            const stickyHeight = document.querySelector('.sticky-filter-section')?.offsetHeight || 0;
                            const navHeight = document.querySelector('.navbar')?.offsetHeight || 0;
                            const offset = gridTop - navHeight - stickyHeight - 20; // 20px extra padding
                            
                            window.scrollTo({
                                top: offset,
                                behavior: 'smooth'
                            });
                        }
                    }, 100);
                });
            
            // Update URL without refresh
            const newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?category=' + catId;
            window.history.pushState({path:newurl},'',newurl);
        }

        const filterWrap = document.querySelector('.filter-wrap');
        const scrollHint = document.getElementById('scrollHint');
        if (filterWrap && scrollHint) {
            filterWrap.addEventListener('scroll', () => {
                if (filterWrap.scrollLeft > 10) {
                    scrollHint.style.opacity = '0';
                    scrollHint.style.pointerEvents = 'none';
                    setTimeout(() => {
                        if (scrollHint.style.opacity === '0') {
                            scrollHint.style.display = 'none';
                        }
                    }, 300);
                }
            });
        }
    </script>
@endsection