<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    {{-- SEO Meta Tags --}}
    <title>
        @if(request('tab') === 'game')
            Top Up Game Termurah & Tercepat - Ryll Store
        @elseif(request('tab') === 'voucher')
            Voucher Digital Murah & Instan - Ryll Store
        @elseif(request('search'))
            Hasil Pencarian: {{ request('search') }} - Ryll Store
        @else
            Ryll Store - Top Up Game, Voucher Digital, E-Wallet Termurah & Tercepat
        @endif
    </title>
    
    <meta name="description" content="Top up game murah, cepat, dan terpercaya. Mobile Legends, Free Fire, PUBG, Genshin Impact, dan 100+ game lainnya. Proses otomatis 24/7. Harga termurah se-Indonesia!">
    <meta name="keywords" content="top up game, top up murah, diamond ml, uc pubg, genesis crystal, voucher game, e-wallet">
    
    {{-- Open Graph --}}
    <meta property="og:title" content="Ryll Store - Top Up Game Termurah & Tercepat">
    <meta property="og:description" content="Top up game murah, cepat, dan terpercaya. 100+ game tersedia. Proses otomatis 24/7.">
    <meta property="og:image" content="{{ asset('images/ryll.webp') }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="website">
    
    {{-- Twitter Card --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Ryll Store - Top Up Game Termurah">
    <meta name="twitter:description" content="Top up game murah, cepat, dan terpercaya">
    <meta name="twitter:image" content="{{ asset('images/ryll.webp') }}">
    
    <link rel="icon" type="image/webp" href="{{ asset('images/ryll.webp') }}">
    <link rel="canonical" href="{{ url()->current() }}">
    
    {{-- Rest of head content --}}
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* Popular Section */
.popular-section {
    background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,159,64,0.1) 100%);
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.popular-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,107,107,0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.popular-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.popular-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(255,107,107,0.4);
    border-color: #ff6b6b;
}

.popular-card .badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    animation: pulse 2s infinite;
    box-shadow: 0 2px 10px rgba(255,107,107,0.5);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

.category-image {
    position: relative;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.popular-card:hover .category-image img {
    transform: scale(1.1);
}

.placeholder-image {
    width: 100%;
    height: 150px;
}

/* Fire icon animation */
.fa-fire {
    animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.8;
        filter: brightness(1.3);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .popular-section {
        padding: 1.5rem;
    }
    
    .category-image img,
    .placeholder-image {
        height: 120px;
    }
}
        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        [x-cloak] { display: none !important; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1f2937; }
        ::-webkit-scrollbar-thumb { background: #06b6d4; border-radius: 4px; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Glowing effect */
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); }
            50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.6); }
        }
        
        .glow-animation {
            animation: glow 3s ease-in-out infinite;
        }
        
        /* Floating animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        /* Fade in up */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }
        
        /* Card hover effect */
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
        }
    </style>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>

<body class="bg-gray-950 text-white" x-data="{ 
    mobileMenuOpen: false, 
    searchQuery: '', 
    searchOpen: false,
    searchResults: [],
    searchLoading: false,
    activeTab: '{{ request()->get('tab', 'all') }}',
    
    // Debounced search function
    async searchCategories() {
        if (this.searchQuery.length < 2) {
            this.searchResults = [];
            this.searchOpen = false;
            return;
        }
        
        this.searchLoading = true;
        this.searchOpen = true;
        
        try {
            const response = await fetch(`/api/search-categories?q=${encodeURIComponent(this.searchQuery)}&tab=${this.activeTab}`);
            const data = await response.json();
            this.searchResults = data.categories || [];
        } catch (error) {
            console.error('Search error:', error);
            this.searchResults = [];
        } finally {
            this.searchLoading = false;
        }
    },
    
    clearSearch() {
        this.searchQuery = '';
        this.searchResults = [];
        this.searchOpen = false;
    }
}">
{{-- Success/Error Notifications --}}
<div x-data="notificationSystem()" 
     @notification.window="show($event.detail)"
     x-cloak>
    <div x-show="visible" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-4"
         class="fixed top-24 right-4 z-[100] max-w-md">
        <div :class="{
                'bg-green-500': type === 'success',
                'bg-red-500': type === 'error',
                'bg-blue-500': type === 'info',
                'bg-yellow-500': type === 'warning'
             }"
             class="text-white px-6 py-4 rounded-xl shadow-2xl flex items-start gap-3">
            <div class="flex-shrink-0 mt-0.5">
                <i :class="{
                    'fa-check-circle': type === 'success',
                    'fa-exclamation-circle': type === 'error',
                    'fa-info-circle': type === 'info',
                    'fa-exclamation-triangle': type === 'warning'
                   }"
                   class="fas text-xl"></i>
            </div>
            <div class="flex-1">
                <p class="font-bold text-sm mb-1" x-text="title"></p>
                <p class="text-sm opacity-90" x-text="message"></p>
            </div>
            <button @click="hide()" class="flex-shrink-0 hover:opacity-70 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
</div>

{{-- Laravel Flash Messages --}}
@if(session('success'))
<div x-data="{ show: true }" 
     x-init="setTimeout(() => show = false, 5000)"
     x-show="show"
     x-transition
     class="fixed top-24 right-4 z-[100] max-w-md">
    <div class="bg-green-500 text-white px-6 py-4 rounded-xl shadow-2xl flex items-start gap-3">
        <i class="fas fa-check-circle text-xl mt-0.5"></i>
        <div class="flex-1">
            <p class="font-bold text-sm mb-1">Berhasil!</p>
            <p class="text-sm opacity-90">{{ session('success') }}</p>
        </div>
        <button @click="show = false" class="hover:opacity-70 transition">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>
@endif

@if(session('error'))
<div x-data="{ show: true }" 
     x-init="setTimeout(() => show = false, 5000)"
     x-show="show"
     x-transition
     class="fixed top-24 right-4 z-[100] max-w-md">
    <div class="bg-red-500 text-white px-6 py-4 rounded-xl shadow-2xl flex items-start gap-3">
        <i class="fas fa-exclamation-circle text-xl mt-0.5"></i>
        <div class="flex-1">
            <p class="font-bold text-sm mb-1">Error!</p>
            <p class="text-sm opacity-90">{{ session('error') }}</p>
        </div>
        <button @click="show = false" class="hover:opacity-70 transition">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>
@endif

<script>
function notificationSystem() {
    return {
        visible: false,
        type: 'info',
        title: '',
        message: '',
        
        show(data) {
            this.type = data.type || 'info';
            this.title = data.title || 'Notification';
            this.message = data.message || '';
            this.visible = true;
            
            setTimeout(() => {
                this.hide();
            }, 5000);
        },
        
        hide() {
            this.visible = false;
        }
    }
}
</script>

<!-- NAVBAR -->
<nav class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50 h-20 backdrop-blur-md bg-gray-900/95">
    <div class="max-w-7xl mx-auto px-4 h-full flex items-center">
        <div class="flex items-center justify-between gap-4 w-full relative">
            
            <div class="flex items-center flex-shrink-0 relative h-full">
               <a href="/" class="relative flex items-center group z-[60]">
                    <img src="{{ asset('images/ryll.webp') }}" 
                         alt="RYLL STORE" 
                         class="h-20 md:h-32 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
                         style="
                            position: absolute; 
                            top: 50%; 
                            transform: translateY(-50%);
                            pointer-events: none; 
                            filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.2));
                         "
                         fetchpriority="high">
                    
                    <div class="w-12 md:w-60 h-10"></div> 
                </a>
            </div>

            <!-- AJAX REALTIME SEARCH -->
<div class="flex-1 max-w-xl mx-2 relative z-[70]">
                <div class="relative">
                    <input type="text" 
                           x-model="searchQuery"
                           @input.debounce.300ms="searchCategories()"
                           @focus="if(searchQuery.length >= 2) searchOpen = true"
                           @click.away="searchOpen = false"
                           placeholder="Cari Game, Pulsa, E-Wallet, dll..." 
                           class="w-full px-4 py-2 pl-10 pr-10 bg-gray-800 border border-gray-700 rounded-full text-xs md:text-sm text-white focus:border-cyan-500 focus:outline-none transition focus:ring-2 focus:ring-cyan-500/50">                    
                    
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    
                    <!-- Loading spinner -->
                    <div x-show="searchLoading" x-cloak class="absolute right-3 top-1/2 -translate-y-1/2">
                        <i class="fas fa-spinner fa-spin text-cyan-400"></i>
                    </div>
                    
                    <!-- Clear button -->
                    <button x-show="!searchLoading && searchQuery.length > 0" 
                            x-cloak
                            @click="clearSearch()"
                            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition">
                        <i class="fas fa-times-circle"></i>
                    </button>
                    
                    <!-- Realtime Results Dropdown -->
                    <div x-show="searchOpen && searchQuery.length >= 2" 
                         x-cloak 
                         x-transition
                         class="absolute top-full mt-2 w-full bg-gray-800 border border-gray-700 rounded-xl shadow-2xl overflow-hidden z-[100] max-h-96 overflow-y-auto">
                        
                        <!-- Header -->
                        <div class="p-3 text-xs text-gray-400 border-b border-gray-700 bg-gray-900 sticky top-0 flex items-center justify-between">
                            <span>
                                <i class="fas fa-search mr-2"></i>
                                <span x-show="!searchLoading && searchResults.length > 0">
                                    <span x-text="searchResults.length"></span> hasil ditemukan
                                </span>
                                <span x-show="searchLoading">Mencari...</span>
                                <span x-show="!searchLoading && searchResults.length === 0">Tidak ada hasil</span>
                            </span>
                        </div>
                        
                        <!-- Results -->
                        <template x-if="!searchLoading && searchResults.length > 0">
                            <div>
                                <template x-for="cat in searchResults" :key="cat.id">
                                    <a :href="`/${cat.category_type || 'game'}/${cat.slug}`" 
                                       class="flex items-center gap-3 p-3 hover:bg-gray-700 transition group"
                                       @click="searchOpen = false">
                                        <!-- Image -->
                                        <template x-if="cat.image">
                                            <img :src="`/storage/${cat.image}`" 
                                                 :alt="cat.name"
                                                 class="w-12 h-12 rounded-lg object-cover group-hover:scale-105 transition">
                                        </template>
                                        <template x-if="!cat.image">
                                            <div class="w-12 h-12 bg-gradient-to-br from-cyan-400 to-purple-600 rounded-lg flex items-center justify-center group-hover:scale-105 transition">
                                                <i class="fas fa-gamepad text-white text-lg"></i>
                                            </div>
                                        </template>
                                        
                                        <!-- Info -->
                                        <div class="flex-1 min-w-0">
                                            <p class="font-bold text-sm text-white group-hover:text-cyan-400 transition truncate" x-text="cat.name"></p>
                                            <p class="text-xs text-gray-400 capitalize" x-text="cat.category_type || 'game'"></p>
                                        </div>
                                        
                                        <!-- Badge -->
                                        <div class="text-xs text-gray-500">
                                            <i class="fas fa-tag text-cyan-400 mr-1"></i>
                                            <span x-text="cat.product_count || 0"></span>
                                        </div>
                                    </a>
                                </template>
                            </div>
                        </template>
                        
                        <!-- No Results -->
                        <template x-if="!searchLoading && searchResults.length === 0">
                            <div class="p-6 text-center">
                                <i class="fas fa-search text-4xl text-gray-600 mb-3"></i>
                                <p class="text-sm text-gray-400">
                                    Tidak ditemukan hasil untuk "<strong class="text-white" x-text="searchQuery"></strong>"
                                </p>
                            </div>
                        </template>
                        
                        <!-- Loading State -->
                        <template x-if="searchLoading">
                            <div class="p-6 text-center">
                                <i class="fas fa-spinner fa-spin text-3xl text-cyan-400 mb-3"></i>
                                <p class="text-sm text-gray-400">Mencari...</p>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            
            <div class="flex items-center gap-1 md:gap-3 z-[80]">
                <a href="/" class="hidden md:flex items-center gap-2 text-white hover:text-cyan-400 transition text-sm">
                    <i class="fas fa-home"></i> <span>Beranda</span>
                </a>
                
                @auth
                    <a href="/account/dashboard" class="hidden md:flex items-center gap-2 bg-cyan-600 hover:bg-cyan-700 px-4 py-2 rounded-lg text-white text-sm font-bold transition">
                        <i class="fas fa-user-shield"></i> <span>Admin</span>
                    </a>
                @endauth

                @guest
                    <a href="{{ route('login') }}" class="hidden md:flex items-center gap-2 bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-white text-sm font-bold transition">
                        <i class="fas fa-sign-in-alt"></i> <span>Login</span>
                    </a>
                @endguest

                <button @click="mobileMenuOpen = true" class="md:hidden p-2 hover:bg-gray-800 rounded-lg text-white relative z-[90]">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div x-show="mobileMenuOpen" class="fixed inset-0 z-[100] md:hidden" x-cloak>
        <div x-show="mobileMenuOpen" 
             x-transition:enter="transition opacity-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             class="fixed inset-0 bg-black/60 backdrop-blur-sm" 
             @click="mobileMenuOpen = false"></div>
        
        <div x-show="mobileMenuOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="translate-x-full"
             x-transition:enter-end="translate-x-0"
             class="fixed right-0 top-0 h-full w-72 bg-gray-900 shadow-2xl border-l border-gray-800 p-6 flex flex-col">
            
            <div class="flex items-center justify-between mb-10">
                <h2 class="text-xl font-bold text-white font-orbitron">MENU</h2>
                <button @click="mobileMenuOpen = false" class="text-gray-400 hover:text-white">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>

            <div class="flex flex-col gap-6">
                <a href="/" class="flex items-center gap-4 text-gray-300 hover:text-cyan-400 text-lg transition">
                    <i class="fas fa-home"></i> Beranda
                </a>
                @auth
                <a href="/account/dashboard" class="flex items-center gap-4 text-gray-300 hover:text-cyan-400 text-lg transition">
                    <i class="fas fa-user-shield"></i> Admin Dashboard
                </a>
                @else
                <a href="/login" class="flex items-center gap-4 text-gray-300 hover:text-cyan-400 text-lg transition">
                    <i class="fas fa-sign-in-alt"></i> Login Admin
                </a>
                @endauth
            </div>
        </div>
    </div>
</nav>

<!-- MAIN CONTENT -->
<div class="max-w-7xl mx-auto px-4 py-8" x-data="{
    currentBanner: 0,
    showTrackModal: false,
    
    init() {
        setInterval(() => {
            this.currentBanner = (this.currentBanner + 1) % {{ $sliders->count() > 0 ? $sliders->count() : 1 }};
        }, 5000);
    }
}">

    <!-- BANNER CAROUSEL -->
    @php 
        $sliders = DB::table('sliders')->orderBy('sort_order', 'asc')->get(); 
    @endphp

    <div class="mb-8 relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-cyan-500/10 bg-gray-900 glow-animation fade-in-up">
        <div class="aspect-[16/9] md:aspect-[21/9] relative">
            
            @forelse($sliders as $index => $slide)
                <div x-show="currentBanner === {{ $index }}" 
                     x-transition:enter="transition ease-out duration-700"
                     x-transition:enter-start="opacity-0 scale-105"
                     x-transition:enter-end="opacity-100 scale-100"
                     class="absolute inset-0">
                    <img src="{{ asset($slide->image) }}?v={{ time() }}" 
                         alt="Banner {{ $index + 1 }}" 
                         class="w-full h-full object-cover object-center">
                </div>
            @empty
                <div class="absolute inset-0 flex items-center justify-center border-2 border-dashed border-gray-800 rounded-2xl">
                    <div class="text-center">
                        <i class="fas fa-image text-6xl text-gray-700 mb-4"></i>
                        <p class="font-orbitron uppercase tracking-widest text-xs text-gray-700">No Active Promotion</p>
                    </div>
                </div>
            @endforelse

            @if($sliders->count() > 0)
            <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
                @foreach($sliders as $index => $slide)
                <button @click="currentBanner = {{ $index }}" 
                        :class="currentBanner === {{ $index }} ? 'w-10 bg-cyan-500' : 'w-2 bg-white/20'" 
                        class="h-1.5 rounded-full transition-all duration-500 hover:bg-white/50"></button>
                @endforeach
            </div>
            @endif

            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent pointer-events-none"></div>
        </div>
    </div>

    <!-- QUICK ACTIONS -->
    <div class="flex flex-wrap justify-center gap-3 mb-12 fade-in-up" style="animation-delay: 0.2s;">
        <button @click="showTrackModal = true"
           class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold text-sm hover:scale-105 transition shadow-lg shadow-cyan-500/30 glow-animation">
            <i class="fas fa-search"></i>
            <span>Cek Status Pesanan</span>
        </button>
        
        <a href="https://wa.me/6281234567890?text=Halo%20Ryll%20Store%2C%20saya%20butuh%20bantuan" 
           target="_blank"
           class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white font-bold text-sm hover:scale-105 transition shadow-lg shadow-green-500/30">
            <i class="fab fa-whatsapp text-lg"></i>
            <span>Hubungi CS</span>
        </a>
    </div>

    <!-- Track Order Modal -->
    <div x-show="showTrackModal" 
         x-cloak
         @click.self="showTrackModal = false"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
        <div class="bg-gray-900 rounded-3xl max-w-md w-full p-6 border border-cyan-500/30 shadow-2xl" 
             @click.stop
             x-transition>
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-cyan-400 font-orbitron">
                    <i class="fas fa-search mr-2"></i>CEK STATUS PESANAN
                </h3>
                <button @click="showTrackModal = false" class="text-gray-400 hover:text-white transition">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <p class="text-gray-400 text-sm mb-6">
                Masukkan Order ID yang ada di halaman detail pesanan atau email konfirmasi
            </p>
            
            <form action="/track-order" method="GET" class="space-y-4">
                <div>
                    <label class="block text-sm font-bold text-gray-400 mb-2">Order ID / Invoice Number</label>
                    <input type="text" 
                           name="order_id" 
                           placeholder="Contoh: INV-20260112-XXXXX"
                           required
                           class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none transition focus:ring-2 focus:ring-cyan-500/50">
                </div>
                
                <button type="submit" 
                        class="w-full py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl font-bold text-lg hover:scale-105 transition shadow-lg">
                    <i class="fas fa-search mr-2"></i>Cek Status Pesanan
                </button>
            </form>
            
            <div class="mt-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
                <p class="text-xs text-blue-400">
                    <i class="fas fa-info-circle mr-2"></i>
                    Order ID bisa dilihat di halaman detail pesanan setelah kamu melakukan transaksi.
                </p>
            </div>
        </div>
    </div>

{{-- ✅ GAME POPULER SECTION --}}
@if($popularGames->count() > 0)
<div class="mb-8 fade-in-up" style="animation-delay: 0.1s;">
    <div class="flex items-center gap-3 mb-4">
        <div class="h-1 w-8 bg-gradient-to-r from-red-500 to-orange-600 rounded-full"></div>
        <h2 class="text-xl md:text-2xl font-bold font-orbitron uppercase tracking-wider text-white flex items-center gap-2">
            <i class="fas fa-fire text-red-500 animate-pulse"></i>
            GAME POPULER
        </h2>
        <div class="flex-1 h-1 bg-gradient-to-r from-orange-600 to-transparent rounded-full"></div>
    </div>
    
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
        @foreach($popularGames as $game)
        <div class="bg-gray-900 rounded-xl md:rounded-2xl border border-gray-800 hover:border-red-500 transition overflow-hidden group card-hover">
            <a href="/game/{{ $game->slug }}">
                <div class="aspect-square relative overflow-hidden">
                    {{-- Badge Hot --}}
                    <div class="absolute top-2 left-2 z-10">
                        <span class="inline-flex items-center gap-1 px-2 py-1 bg-red-500 text-white text-[10px] font-bold rounded-full shadow-lg">
                            <i class="fas fa-fire text-[10px]"></i> HOT
                        </span>
                    </div>
                    
                    @if($game->image)
                    <img src="{{ asset('storage/' . $game->image) }}" 
                         alt="{{ $game->name }}" 
                         class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    @else
                    <div class="w-full h-full bg-gradient-to-br from-red-500/20 to-orange-500/20 flex items-center justify-center">
                        <i class="fas fa-gamepad text-4xl md:text-5xl text-red-400/50 float-animation"></i>
                    </div>
                    @endif
                    
                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
                </div>
                <div class="p-3 md:p-4">
                    <h3 class="font-bold text-white text-sm mb-1 line-clamp-1 group-hover:text-red-400 transition">{{ $game->name }}</h3>
                    <p class="text-xs text-gray-400 line-clamp-1">{{ $game->description ?? 'Top up cepat & murah' }}</p>
                    <div class="mt-2 flex items-center justify-between text-[10px] md:text-xs text-gray-500">
                        <span><i class="fas fa-tag text-cyan-400 mr-1"></i>{{ $game->product_count ?? 0 }} Produk</span>
                        <span><i class="fas fa-bolt text-green-400 mr-1"></i>Instan</span>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>
@endif

{{-- ✅ VOUCHER POPULER SECTION --}}
@if($popularVouchers->count() > 0)
<div class="mb-8 fade-in-up" style="animation-delay: 0.2s;">
    <div class="flex items-center gap-3 mb-4">
        <div class="h-1 w-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full"></div>
        <h2 class="text-xl md:text-2xl font-bold font-orbitron uppercase tracking-wider text-white flex items-center gap-2">
            <i class="fas fa-ticket-alt text-purple-500 animate-pulse"></i>
            VOUCHER POPULER
        </h2>
        <div class="flex-1 h-1 bg-gradient-to-r from-pink-600 to-transparent rounded-full"></div>
    </div>
    
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
        @foreach($popularVouchers as $voucher)
        <div class="bg-gray-900 rounded-xl md:rounded-2xl border border-gray-800 hover:border-purple-500 transition overflow-hidden group card-hover">
            <a href="/voucher/{{ $voucher->slug }}">
                <div class="aspect-square relative overflow-hidden">
                    {{-- Badge Hot --}}
                    <div class="absolute top-2 left-2 z-10">
                        <span class="inline-flex items-center gap-1 px-2 py-1 bg-purple-500 text-white text-[10px] font-bold rounded-full shadow-lg">
                            <i class="fas fa-fire text-[10px]"></i> HOT
                        </span>
                    </div>
                    
                    @if($voucher->image)
                    <img src="{{ asset('storage/' . $voucher->image) }}" 
                         alt="{{ $voucher->name }}" 
                         class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    @else
                    <div class="w-full h-full bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
                        <i class="fas fa-ticket-alt text-4xl md:text-5xl text-purple-400/50 float-animation"></i>
                    </div>
                    @endif
                    
                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
                </div>
                <div class="p-3 md:p-4">
                    <h3 class="font-bold text-white text-sm mb-1 line-clamp-1 group-hover:text-purple-400 transition">{{ $voucher->name }}</h3>
                    <p class="text-xs text-gray-400 line-clamp-1">{{ $voucher->description ?? 'Voucher digital instan' }}</p>
                    <div class="mt-2 flex items-center justify-between text-[10px] md:text-xs text-gray-500">
                        <span><i class="fas fa-tag text-cyan-400 mr-1"></i>{{ $voucher->product_count ?? 0 }} Produk</span>
                        <span><i class="fas fa-bolt text-green-400 mr-1"></i>Instan</span>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>
@endif


    <div class="mb-10 fade-in-up" style="animation-delay: 0.3s;">
        <div class="flex items-center gap-4 mb-8">
            <div class="h-1 w-12 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full"></div>
            <h2 class="text-2xl md:text-3xl font-bold font-orbitron uppercase tracking-widest text-white">
                @if(request('search'))
                    <i class="fas fa-search mr-2 text-cyan-400"></i>
                    <span class="text-cyan-400">HASIL PENCARIAN: "{{ request('search') }}"</span>
                @elseif(request('tab') === 'all' || !request('tab'))
                    SEMUA KATEGORI
                @elseif(request('tab') === 'game')
                    DAFTAR GAMES
                @elseif(request('tab') === 'voucher')
                    VOUCHER
                @else
                    {{ strtoupper(request('tab')) }}
                @endif
            </h2>
            <div class="flex-1 h-1 bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
            
            @if(request('search'))
            <a href="{{ request('tab') ? '/?tab=' . request('tab') : '/' }}" 
               class="px-4 py-2 bg-red-500 hover:bg-red-600 rounded-lg text-sm font-bold transition text-white">
                <i class="fas fa-times mr-2"></i>Hapus Pencarian
            </a>
            @endif
        </div>
    </div>

{{-- FILTER TABS --}}
<div class="mb-6">
    <div class="flex flex-wrap items-center gap-2 md:gap-3">
        <a href="/?tab=all" 
           class="px-4 md:px-6 py-2 md:py-3 rounded-xl font-bold text-sm md:text-base transition inline-flex items-center gap-2 {{ request('tab', 'all') === 'all' ? 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/30' : 'bg-gray-800 text-gray-400 hover:bg-gray-700' }}">
            <i class="fas fa-th"></i>
            <span>Semua Kategori</span>
            <span class="px-2 py-0.5 rounded-full text-xs {{ request('tab', 'all') === 'all' ? 'bg-white/20' : 'bg-gray-700' }}">
                {{ DB::table('categories')->where('is_active', true)->count() }}
            </span>
        </a>
        <a href="/?tab=game" 
           class="px-4 md:px-6 py-2 md:py-3 rounded-xl font-bold text-sm md:text-base transition inline-flex items-center gap-2 {{ request('tab') === 'game' ? 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/30' : 'bg-gray-800 text-gray-400 hover:bg-gray-700' }}">
            <i class="fas fa-gamepad"></i>
            <span>Games</span>
            <span class="px-2 py-0.5 rounded-full text-xs {{ request('tab') === 'game' ? 'bg-white/20' : 'bg-gray-700' }}">
                {{ DB::table('categories')->where('is_active', true)->where('category_type', 'game')->count() }}
            </span>
        </a>
        <a href="/?tab=voucher" 
           class="px-4 md:px-6 py-2 md:py-3 rounded-xl font-bold text-sm md:text-base transition inline-flex items-center gap-2 {{ request('tab') === 'voucher' ? 'bg-gradient-to-r from-purple-500 to-pink-600 text-white shadow-lg shadow-purple-500/30' : 'bg-gray-800 text-gray-400 hover:bg-gray-700' }}">
            <i class="fas fa-ticket-alt"></i>
            <span>Vouchers</span>
            <span class="px-2 py-0.5 rounded-full text-xs {{ request('tab') === 'voucher' ? 'bg-white/20' : 'bg-gray-700' }}">
                {{ DB::table('categories')->where('is_active', true)->where('category_type', 'voucher')->count() }}
            </span>
        </a>
    </div>
</div>

    <!-- CATEGORIES GRID WITH LOADING -->
    <div x-data="{ ...loadMoreHandler(), gridLoading: false }" @loading.window="gridLoading = $event.detail">
        
        {{-- Loading Skeleton --}}
        <div x-show="gridLoading" x-cloak class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-8">
            @for($i = 0; $i < 10; $i++)
            <div class="bg-gray-900 rounded-xl md:rounded-2xl border border-gray-800 overflow-hidden animate-pulse">
                <div class="aspect-square bg-gray-800"></div>
                <div class="p-4 space-y-3">
                    <div class="h-4 bg-gray-800 rounded"></div>
                    <div class="h-3 bg-gray-800 rounded w-3/4"></div>
                    <div class="flex gap-2">
                        <div class="h-3 bg-gray-800 rounded flex-1"></div>
                        <div class="h-3 bg-gray-800 rounded flex-1"></div>
                    </div>
                </div>
            </div>
            @endfor
        </div>
        
        {{-- Actual Grid --}}
        <div x-show="!gridLoading" id="game-grid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
            @forelse($categories as $category)
                <div class="bg-gray-900 rounded-2xl border border-gray-800 hover:border-cyan-500 transition overflow-hidden group card-hover fade-in-up" 
                     style="animation-delay: {{ ($loop->index * 0.05) }}s;">
                    <a href="/{{ $category->category_type ?? 'game' }}/{{ $category->slug }}">
                        <div class="aspect-square relative overflow-hidden">
                            @if($category->image)
                                <img src="{{ asset('storage/' . $category->image) }}" 
                                     alt="{{ $category->name }}" 
                                     class="w-full h-full object-cover group-hover:scale-110 transition duration-500"
                                     loading="lazy">
                            @else
                                <div class="w-full h-full bg-gradient-to-br from-cyan-500/20 to-purple-500/20 flex items-center justify-center">
                                    <i class="fas fa-gamepad text-6xl text-cyan-400/50 float-animation"></i>
                                </div>
                            @endif
                            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-bold text-white mb-1 line-clamp-1 group-hover:text-cyan-400 transition">{{ $category->name }}</h3>
                            <p class="text-sm text-gray-400 line-clamp-2">{{ $category->description ?? 'Top up cepat & murah' }}</p>
                            <div class="mt-2 flex items-center justify-between text-xs text-gray-500">
                                <span><i class="fas fa-tag text-cyan-400 mr-1"></i>{{ $category->product_count ?? 0 }} Produk</span>
                                <span><i class="fas fa-bolt text-green-400 mr-1"></i>Instan</span>
                            </div>
                        </div>
                    </a>
                </div>
            @empty
                {{-- Enhanced Empty States --}}
                <div class="col-span-full text-center py-16">
                    <div class="inline-block">
                        @if(request('search'))
                            <i class="fas fa-search text-6xl text-gray-700 mb-4"></i>
                            <h3 class="text-xl font-semibold text-white mb-2">Tidak ada hasil ditemukan</h3>
                            <p class="text-gray-400 mb-6">Tidak ditemukan kategori untuk "<strong class="text-cyan-400">{{ request('search') }}</strong>"</p>
                            <a href="/" class="px-6 py-3 bg-cyan-500 hover:bg-cyan-600 text-white rounded-lg transition font-semibold inline-block">
                                <i class="fas fa-th-large mr-2"></i>Lihat Semua Kategori
                            </a>
                        @elseif(request('tab') === 'game')
                            <i class="fas fa-gamepad text-6xl text-gray-700 mb-4"></i>
                            <h3 class="text-xl font-semibold text-white mb-2">Belum Ada Game</h3>
                            <p class="text-gray-400 mb-6">Game categories akan segera ditambahkan</p>
                            <a href="/?tab=all" class="px-6 py-3 bg-cyan-500 hover:bg-cyan-600 text-white rounded-lg transition font-semibold inline-block">
                                <i class="fas fa-arrow-left mr-2"></i>Kembali ke Semua Kategori
                            </a>
                        @elseif(request('tab') === 'voucher')
                            <i class="fas fa-ticket-alt text-6xl text-gray-700 mb-4"></i>
                            <h3 class="text-xl font-semibold text-white mb-2">Belum Ada Voucher</h3>
                            <p class="text-gray-400 mb-6">Voucher categories akan segera ditambahkan</p>
                            <a href="/?tab=all" class="px-6 py-3 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition font-semibold inline-block">
                                <i class="fas fa-arrow-left mr-2"></i>Kembali ke Semua Kategori
                            </a>
                        @else
                            <i class="fas fa-folder-open text-6xl text-gray-700 mb-4"></i>
                            <h3 class="text-xl font-semibold text-white mb-2">Tidak ada kategori</h3>
                            <p class="text-gray-400">Kategori akan segera ditambahkan</p>
                        @endif
                    </div>
                </div>
            @endforelse
        </div>

        @if($categories->hasMorePages())
        <div class="flex justify-center mt-12" id="load-more-container">
            <button @click="loadMore()" 
                    :disabled="loading"
                    class="px-10 py-4 bg-gray-900 border border-cyan-500/30 text-cyan-400 rounded-full font-bold hover:bg-cyan-500 hover:text-white transition flex items-center gap-3 shadow-lg">
                <span x-show="!loading">TAMPILKAN LAINNYA</span>
                <span x-show="loading" class="flex items-center gap-2" x-cloak>
                    <i class="fas fa-spinner animate-spin"></i> LOADING...
                </span>
            </button>
        </div>
        @endif
    </div>
</div> {{-- Penutup Container Utama --}}

<script>
function loadMoreHandler() {
    return {
        page: {{ $categories->currentPage() }},
        loading: false,
        async loadMore() {
            if (this.loading) return;
            this.loading = true;
            this.page++;

            try {
                const urlParams = new URLSearchParams(window.location.search);
                const tab = urlParams.get('tab') || 'all';
                const search = urlParams.get('search') || '';

                const response = await fetch(`?tab=${tab}&search=${search}&page=${this.page}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });

                const data = await response.json();
                if (data.html && data.html.trim() !== "") {
                    document.getElementById('game-grid').insertAdjacentHTML('beforeend', data.html);
                }
                if (!data.hasMore) {
                    const el = document.getElementById('load-more-container');
                    if(el) el.remove();
                }
            } catch (error) {
                console.error("Error:", error);
                this.page--;
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>

    
    {{-- No Results State --}}
    <div x-show="searchQuery.length > 0" x-cloak class="text-center py-16">
        <div class="inline-block">
            <i class="fas fa-search text-6xl text-gray-700 mb-4"></i>
            <h3 class="text-xl font-semibold text-white mb-2">Tidak ada hasil ditemukan</h3>
            <p class="text-gray-400 mb-6">
                Coba kata kunci lain atau lihat semua kategori
            </p>
            <button @click="searchQuery = ''; searchOpen = false" 
                    class="px-6 py-3 bg-cyan-500 hover:bg-cyan-600 text-white rounded-lg transition font-semibold">
                <i class="fas fa-th-large mr-2"></i>Lihat Semua Kategori
            </button>
        </div>
    </div>

<!-- FOOTER -->
<footer class="bg-gray-900 border-t border-gray-800 mt-20">
    <div class="max-w-7xl mx-auto px-4 py-12">
        <div class="flex flex-col items-center justify-center">
            
            <a href="/" class="relative flex items-center justify-center group z-[60] w-full max-w-[240px]">
                <img src="{{ asset('images/ryll.webp') }}" 
                     alt="RYLL STORE" 
                     class="h-20 md:h-32 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
                     style="
                        /* Cabut position absolute améh nuturkeun alur flex */
                        filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.2));
                     "
                     fetchpriority="high">
            </a>
<p class="text-gray-400 text-xs md:text-sm mb-8 font-medium tracking-widest uppercase opacity-80 text-center">
    <span class="inline-block border-b border-cyan-500/30 pb-2">
        Top Up Game <span class="text-cyan-400">Termurah</span> & <span class="text-cyan-400">Tercepat</span> di Indonesia
    </span>
</p>

<div class="flex flex-wrap items-center justify-center gap-4 md:gap-8 text-[11px] md:text-xs font-bold uppercase tracking-wider mb-10">
    <div class="flex items-center gap-2 px-4 py-2 bg-gray-900/50 border border-gray-800 rounded-full hover:border-green-400/50 transition-all duration-300 group">
        <i class="fas fa-bolt text-green-400 group-hover:scale-125 transition-transform"></i>
        <span class="text-gray-400 group-hover:text-gray-200">Proses Instan</span>
    </div>
    
    <div class="flex items-center gap-2 px-4 py-2 bg-gray-900/50 border border-gray-800 rounded-full hover:border-blue-400/50 transition-all duration-300 group">
        <i class="fas fa-shield-alt text-blue-400 group-hover:scale-125 transition-transform"></i>
        <span class="text-gray-400 group-hover:text-gray-200">100% Aman</span>
    </div>
    
    <div class="flex items-center gap-2 px-4 py-2 bg-gray-900/50 border border-gray-800 rounded-full hover:border-purple-400/50 transition-all duration-300 group">
        <i class="fas fa-headset text-purple-400 group-hover:scale-125 transition-transform"></i>
        <span class="text-gray-400 group-hover:text-gray-200">24/7 Support</span>
    </div>
</div>
            
            <div class="mb-6">
<p class="w-full max-w-[240px] mx-auto text-center font-orbitron text-xs md:text-sm tracking-[0.2em] uppercase text-cyan-400/80 font-bold py-4 relative group z-[60]">
    <span class="relative z-10">Follow Us</span>
    
    <span class="absolute left-0 top-1/2 w-8 h-[1px] bg-gradient-to-r from-transparent to-cyan-500/50"></span>
    <span class="absolute right-0 top-1/2 w-8 h-[1px] bg-gradient-to-l from-transparent to-cyan-500/50"></span>
</p>                <div class="flex items-center justify-center gap-4">
                    <a href="https://www.instagram.com/ryll_storeee?igsh=MTF4NndsMnJmeTJpZA==" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-instagram text-xl"></i>
                    </a>
                    <a href="https://tiktok.com/@ryllstore" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-black flex items-center justify-center hover:scale-110 transition shadow-lg border border-white/20">
                        <i class="fab fa-tiktok text-xl"></i>
                    </a>
                    <a href="https://wa.me/6281234567890" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-whatsapp text-xl"></i>
                    </a>
                    <a href="https://discord.gg/ryllstore" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-discord text-xl"></i>
                    </a>
                    <a href="https://t.me/ryllstore" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-500 to-blue-500 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-telegram text-xl"></i>
                    </a>
                </div>
            </div>
            
            <p class="text-xs text-gray-600">© {{ date('Y') }} Ryll Store. All rights reserved.</p>
        </div>
    </div>
</footer>
<script>
    async searchCategories() {
    if (this.searchQuery.length < 2) {
        this.searchResults = [];
        this.searchOpen = false;
        return;
    }
    
    this.searchLoading = true;
    this.searchOpen = true;
    
    try {
        const url = `/api/search-categories?q=${encodeURIComponent(this.searchQuery)}&tab=all`;
        console.log('Fetching:', url); // ✅ DEBUG
        
        const response = await fetch(url);
        const data = await response.json();
        
        console.log('API Response:', data); // ✅ DEBUG
        console.log('Total results:', data.total); // ✅ DEBUG
        
        this.searchResults = data.categories || [];
    } catch (error) {
        console.error('Search error:', error);
        this.searchResults = [];
    } finally {
        this.searchLoading = false;
    }
}
</script>
{{-- Scroll to Top Button --}}
<div x-data="{ showScroll: false }" 
     @scroll.window="showScroll = window.pageYOffset > 400"
     x-cloak>
    <button x-show="showScroll" 
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-0"
            x-transition:enter-end="opacity-100 scale-100"
            @click="window.scrollTo({ top: 0, behavior: 'smooth' })"
            class="fixed bottom-8 right-8 z-50 w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full shadow-2xl hover:scale-110 transition-transform duration-300 flex items-center justify-center group">
        <i class="fas fa-arrow-up text-white text-lg group-hover:scale-110 transition-transform"></i>
        <div class="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 opacity-0 group-hover:opacity-20 blur-xl transition-opacity"></div>
    </button>
</div>

</body>
</html>