<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thrift Store Indonesia | Premium Secondhand</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .product-card:hover .product-action { transform: translateY(0); opacity: 1; }
    </style>
</head>
<body class="bg-[#F8FAFC]">
    <x-loading />

    {{-- NAVBAR --}}
    <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="flex justify-between items-center h-20">
                
                {{-- Logo Section --}}
                <a href="/" class="text-2xl font-black italic tracking-tighter text-blue-600 flex items-center gap-2">
                    BERKAH.TRF
                </a>

                {{-- MENU USER & CART --}}
                <div class="flex items-center gap-4">
                    
                    {{-- TOMBOL KERANJANG (CART) --}}
                    <a href="{{ route('cart.index') }}" class="relative p-2 text-gray-600 hover:text-blue-600 transition">
                        <i class="fas fa-shopping-bag text-xl"></i>
                        @if(session('cart') && count(session('cart')) > 0)
                            <span class="absolute top-0 right-0 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full border-2 border-white shadow-sm">
                                {{ count(session('cart')) }}
                            </span>
                        @endif
                    </a>

                    @guest
                        {{-- Tampilan Kalau Belum Login --}}
                        <div class="flex items-center gap-2">
                            <a href="{{ route('login') }}" class="text-gray-500 font-bold text-sm hover:text-blue-600 transition px-3 py-2">
                                Masuk
                            </a>
                            <a href="{{ route('register') }}" class="bg-gray-900 text-white px-5 py-2.5 rounded-xl font-bold text-sm hover:bg-blue-600 transition shadow-lg shadow-blue-900/10">
                                Daftar
                            </a>
                        </div>
                    @else
                        {{-- Tampilan Kalau Sudah Login (DROPDOWN MENU) --}}
                        
                        {{-- Logic: Jika Admin, tampilkan tombol Dashboard saja --}}
                        @if(Auth::user()->is_admin == 1)
                            <a href="{{ route('admin.index') }}" class="bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm flex items-center gap-2 hover:bg-blue-700 transition shadow-md">
                                <i class="fas fa-user-shield"></i> Dashboard
                            </a>
                        @else
                            {{-- Logic: Jika Customer, tampilkan Dropdown Menu --}}
                            <div class="relative group">
                                {{-- 1. Tombol Pemicu Dropdown --}}
                                <button class="flex items-center gap-3 focus:outline-none">
                                    <div class="text-right hidden md:block">
                                        <div class="text-[10px] text-gray-400 font-bold uppercase tracking-wider">Halo,</div>
                                        <div class="text-sm font-bold text-gray-900 leading-none">{{ Auth::user()->name }}</div>
                                    </div>
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold border-2 border-white shadow-sm group-hover:bg-blue-600 group-hover:text-white transition">
                                        {{ substr(Auth::user()->name, 0, 1) }}
                                    </div>
                                    <i class="fas fa-chevron-down text-gray-300 text-xs transition-transform group-hover:rotate-180"></i>
                                </button>

                                {{-- 2. Isi Dropdown (Muncul saat Hover) --}}
                                <div class="absolute right-0 mt-4 w-56 bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden transform opacity-0 scale-95 invisible group-hover:opacity-100 group-hover:scale-100 group-hover:visible transition-all duration-200 origin-top-right z-50">
                                    
                                    {{-- Header Dropdown (Mobile only info) --}}
                                    <div class="px-5 py-3 border-b border-gray-50 md:hidden">
                                        <span class="block text-xs text-gray-400 font-bold">Akun Login</span>
                                        <span class="block text-sm font-bold text-gray-900 truncate">{{ Auth::user()->name }}</span>
                                    </div>

                                    <div class="p-2 space-y-1">
                                        {{-- Menu: Profil --}}
                                        {{-- Ganti href="#" dengan route('profile.edit') jika sudah ada --}}
                                        <a href="{{ route('profile.index') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition">
                                            <i class="fas fa-user-circle text-lg w-5"></i> Profil Saya
                                        </a>

                                        {{-- Menu: Pesanan --}}
                                        {{-- Ganti href="#" dengan route('orders.index') jika sudah ada --}}
                                        <a href="{{ route('front.orders') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition">
                                            <i class="fas fa-box-open text-lg w-5"></i> Pesanan Saya
                                        </a>
                                        
                                        <div class="h-px bg-gray-100 my-1 mx-2"></div>

                                        {{-- Menu: Logout --}}
                                        <form action="{{ route('logout') }}" method="POST">
                                            @csrf
                                            <button type="submit" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold text-red-500 hover:bg-red-50 transition text-left">
                                                <i class="fas fa-sign-out-alt text-lg w-5"></i> Keluar
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endif

                    @endguest
                </div>

            </div>
        </div>
    </nav>

    {{-- HERO SECTION --}}
    <div class="relative bg-gradient-to-r from-blue-700 to-indigo-800 pt-20 pb-32 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <svg class="h-full w-full" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
                <polygon points="0,100 100,0 100,100" />
            </svg>
        </div>
        <div class="max-w-7xl mx-auto px-4 text-center relative z-10">
            <span class="inline-block bg-blue-500/30 text-blue-100 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-4">Limited Collection</span>
            <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight">Gaya Berkelas <br><span class="text-blue-300">Tanpa Harus Kuras</span> Brankas</h1>
            <p class="text-blue-100 text-lg md:text-xl max-w-2xl mx-auto opacity-90">Kurasi pakaian secondhand pilihan dengan kualitas yang tetap terjaga. 100% Original atau uang kembali.</p>
        </div>
    </div>

    {{-- SEARCH & CATEGORY --}}
    <div class="max-w-6xl mx-auto px-4 -mt-12 relative z-20">
        <div class="bg-white p-4 md:p-6 rounded-2xl shadow-xl shadow-blue-900/10">
            <form action="{{ route('front.index') }}" method="GET" class="flex gap-3">
                <div class="relative flex-grow">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <input type="text" name="search" placeholder="Cari Brand, Hoodie, atau Jaket..." value="{{ request('search') }}" 
                        class="w-full bg-gray-50 border-none px-12 py-4 rounded-xl focus:ring-2 focus:ring-blue-500 transition text-gray-700">
                </div>
                <button type="submit" class="bg-blue-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-blue-700 shadow-lg shadow-blue-200 transition">
                    Cari
                </button>
            </form>

            <div class="flex gap-3 overflow-x-auto mt-6 pb-2 scrollbar-hide">
                <a href="/" class="px-6 py-2.5 rounded-xl text-sm font-bold whitespace-nowrap transition {{ !request('category') ? 'bg-blue-600 text-white shadow-md' : 'bg-gray-50 text-gray-500 hover:bg-gray-100' }}">
                    Semua Produk
                </a>
                @foreach($categories as $cat)
                    <a href="/?category={{ $cat->slug }}" class="px-6 py-2.5 rounded-xl text-sm font-bold whitespace-nowrap transition {{ request('category') == $cat->slug ? 'bg-blue-600 text-white shadow-md' : 'bg-gray-50 text-gray-500 hover:bg-gray-100' }}">
                        {{ $cat->name }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    {{-- MAIN CONTENT --}}
    <div id="auto-refresh-products" class="max-w-7xl mx-auto px-4 py-16">
        <div class="flex justify-between items-end mb-10">
            <div>
                <h2 class="text-3xl font-extrabold text-gray-900 tracking-tight">
                    {{ request('search') ? 'Hasil Pencarian' : (request('category') ? 'Kategori: '.request('category') : 'Koleksi Terkini') }}
                </h2>
                <div class="h-1.5 w-12 bg-blue-600 rounded-full mt-2"></div>
            </div>
            <p class="text-sm text-gray-500 font-medium hidden md:block">{{ $products->count() }} Produk Ditemukan</p>
        </div>

        @if($products->count() > 0)
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach($products as $product)
                
                {{-- Cek apakah sold out untuk styling card --}}
                <div class="product-card group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-blue-100 transition duration-500 shadow-sm hover:shadow-2xl {{ $product->status == 'sold' ? 'opacity-75 grayscale hover:grayscale-0' : '' }}">
                    
                    {{-- Image Wrapper --}}
                    <div class="relative aspect-[3/4] overflow-hidden bg-gray-100">
                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        
                        {{-- ðŸ”´ LOGIKA STEMPEL SOLD OUT DI SINI --}}
                        @if($product->status == 'sold')
                            <div class="absolute inset-0 bg-black/40 flex items-center justify-center z-10">
                                <span class="bg-red-600 text-white px-6 py-2 text-lg font-black rounded -rotate-12 uppercase tracking-widest border-4 border-white shadow-2xl">
                                    SOLD OUT
                                </span>
                            </div>
                        @endif

                        {{-- Badges --}}
                        <div class="absolute top-3 left-3 flex flex-col gap-2 z-20">
                            <span class="bg-white/90 backdrop-blur px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest shadow-sm">
                                {{ $product->brand }}
                            </span>
                        </div>
                        <div class="absolute top-3 right-3 z-20">
                            <span class="bg-blue-600 text-white px-2 py-1 rounded-md text-[10px] font-bold">
                                Size {{ $product->size }}
                            </span>
                        </div>

                        {{-- Quick Action Overlay --}}
                        <div class="product-action absolute inset-0 bg-black/20 opacity-0 flex items-center justify-center transition-all duration-300 translate-y-4 z-20">
                            <a href="{{ route('product.detail', $product->slug) }}" class="bg-white text-gray-900 px-6 py-3 rounded-xl font-bold text-sm shadow-xl hover:bg-blue-600 hover:text-white transition">
                                Lihat Detail
                            </a>
                        </div>
                    </div>

                    {{-- Product Info --}}
                    <div class="p-5">
                        <h3 class="font-bold text-gray-900 text-lg mb-1 truncate group-hover:text-blue-600 transition">{{ $product->name }}</h3>
                        <p class="text-blue-600 font-extrabold text-xl mb-4">
                            <span class="text-xs mr-1 uppercase">Rp</span>{{ number_format($product->price, 0, ',', '.') }}
                        </p>

                        {{-- ðŸ”´ LOGIKA TOMBOL BELI --}}
                        @if($product->status == 'sold')
                            <button disabled class="flex items-center justify-center gap-2 w-full bg-gray-200 text-gray-500 py-2.5 rounded-xl font-bold cursor-not-allowed">
                                <i class="fas fa-ban"></i> Barang Terjual
                            </button>
                        @else
                            <a href="{{ route('product.detail', $product->slug) }}" class="flex items-center justify-center gap-2 w-full border-2 border-gray-900 text-gray-900 py-2.5 rounded-xl font-bold hover:bg-gray-900 hover:text-white transition group-hover:shadow-md">
                                Beli Sekarang
                            </a>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-24 bg-white rounded-3xl border-2 border-dashed border-gray-200">
                <div class="bg-gray-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-search text-3xl text-gray-300"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800">Ups! Barang tidak ditemukan</h3>
                <p class="text-gray-500 mt-2 mb-6">Coba gunakan kata kunci lain atau cek kategori sebelah.</p>
                <a href="/" class="bg-gray-900 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-600 transition">Kembali Belanja</a>
            </div>
        @endif
    </div>

    {{-- FOOTER --}}
    <footer class="bg-white border-t border-gray-100 pt-16 pb-8">
        <div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
            <div>
                <h4 class="text-xl font-bold text-blue-700 mb-4">BERKAH.TRF</h4>
                <p class="text-gray-500 text-sm leading-relaxed">Pusat pakaian thrift branded original terbaik di Indonesia. Kami memastikan setiap item telah melalui proses pembersihan dan kurasi ketat.</p>
            </div>
            <div>
                <h4 class="font-bold text-gray-900 mb-4">Bantuan</h4>
                <ul class="text-gray-500 text-sm space-y-2">
                    <li><a href="#" class="hover:text-blue-600">Cara Order</a></li>
                    <li><a href="#" class="hover:text-blue-600">Pengiriman</a></li>
                    <li><a href="#" class="hover:text-blue-600">Kebijakan Retur</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold text-gray-900 mb-4">Ikuti Kami</h4>
                <div class="flex gap-4">
                    <a href="https://www.instagram.com/_isfris" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.tiktok.com/@USERNAME_TIKTOK_KAMU" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition">
                        <i class="fab fa-tiktok"></i>
                    </a>
                    <a href="https://wa.me/6289679288966" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition">
                        <i class="fab fa-whatsapp"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="text-center text-gray-400 text-xs border-t border-gray-50 pt-8">
            &copy; {{ date('Y') }} Thrift Store Indonesia. Crafted with passion.
        </div>
    </footer>

    <script>
        let lastProductId = {{ \App\Models\Product::max('id') ?? 0 }};
        
        setInterval(async () => {
            // Jangan sinkronisasi jika user sedang asyik mengetik pencarian
            if (document.activeElement && document.activeElement.tagName === 'INPUT') {
                return;
            }

            try {
                // Ambil parameter search & category saat ini dari URL agar filter tetap jalan
                let currentQuery = window.location.search;
                let endpoint = `{{ route('api.new_products') }}${currentQuery ? currentQuery + '&' : '?'}last_id=${lastProductId}`;
                
                let response = await fetch(endpoint);
                let data = await response.json();

                if (data.has_new && data.latest_id > lastProductId) {
                    lastProductId = data.latest_id;

                    // Mengambil ulang halaman ini di background
                    let pageResponse = await fetch(window.location.href);
                    let pageHtml = await pageResponse.text();
                    
                    // Parse HTML baru
                    let parser = new DOMParser();
                    let doc = parser.parseFromString(pageHtml, 'text/html');
                    
                    // Ganti kontainer produk utama
                    let newContainer = doc.getElementById('auto-refresh-products');
                    let oldContainer = document.getElementById('auto-refresh-products');
                    
                    if (newContainer && oldContainer) {
                        oldContainer.innerHTML = newContainer.innerHTML;
                        
                        // Notifikasi visual tanpa mengganggu layar (Toast)
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'info',
                                title: 'Koleksi Baru Tersedia!',
                                text: 'Wow, admin baru saja menambahkan ' + data.count + ' produk baru.',
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 6000,
                                timerProgressBar: true,
                                background: '#eff6ff',
                                iconColor: '#3b82f6'
                            });
                        }
                    }
                }
            } catch (error) {
                console.error("Gagal mengecek produk baru", error);
            }
        }, 12000); // Mengecek setiap 12 detik
    </script>

</body>
</html> 