<!DOCTYPE html>
<html lang="id" x-data="productPage()">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e($category->name); ?> - Ryll Store</title>
    <link rel="icon" type="image/webp" href="<?php echo e(asset('images/ryll.webp')); ?>">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></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">
    
<!-- REPLACE STYLE SECTION (line 17-28) WITH THIS: -->

<style>
    .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; }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    .float-animation { animation: float 3s ease-in-out infinite; }
    
    /* 3D Hero Container */
    .hero-3d { perspective: 1500px; position: relative; }
    .hero-3d-inner { transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
    .hero-3d:hover .hero-3d-inner { transform: rotateX(2deg) rotateY(-2deg); }
    
    /* Floating Badge */
    @keyframes float-smooth {
        0%, 100% { transform: translateY(0px) translateZ(0px); }
        50% { transform: translateY(-10px) translateZ(20px); }
    }
    .float-badge { animation: float-smooth 3s ease-in-out infinite; }
    
    /* Glassmorphism */
    .glass-pro {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    /* Neon Pulse */
    @keyframes neon-pulse-blue {
        0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.4), 0 0 40px rgba(6, 182, 212, 0.2); }
        50% { box-shadow: 0 0 30px rgba(6, 182, 212, 0.6), 0 0 60px rgba(6, 182, 212, 0.4); }
    }
    .neon-blue { animation: neon-pulse-blue 2s ease-in-out infinite; }
    
    /* Star Hover */
    @keyframes star-pop {
        0%, 100% { transform: scale(1) rotate(0deg); }
        25% { transform: scale(1.3) rotate(5deg); }
        75% { transform: scale(1.1) rotate(-5deg); }
    }
    .star-hover:hover { animation: star-pop 0.5s ease; }
    
    /* Shine Effect */
    .shine-effect { position: relative; overflow: hidden; }
    .shine-effect::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 20%;
        height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(25deg);
        animation: shine 3s infinite;
    }
    @keyframes shine { 0% { left: -60%; } 100% { left: 160%; } }
</style>
</head>
<body class="bg-gray-950 text-white">

    <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">
            
            <!-- Logo -->
            <div class="flex items-center flex-shrink-0 relative h-full">
               <a href="/" class="relative flex items-center group z-[60]">
                    <img src="<?php echo e(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 25px rgba(34, 211, 238, 0.7));
                         "
                         fetchpriority="high">
                    
                    <div class="w-12 md:w-60 h-10"></div> 
                </a>
            </div>

            <!-- AJAX REALTIME SEARCH (COPIED FROM HOMEPAGE) -->
            <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>
            
            <!-- Right Actions -->
            <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>
                </a>
                
                <button @click="showTrackModal = true" class="px-3 md:px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition flex items-center gap-2 text-sm font-bold">
                    <i class="fas fa-receipt"></i>
                    <span class="hidden md:inline">Cek Pesanan</span>
                </button>
                
                <?php if(auth()->guard()->check()): ?>
                    <a href="/account/dashboard" class="hidden md:flex items-center gap-2 bg-purple-600 hover:bg-purple-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>
                <?php endif; ?>
            </div>
        </div>
    </div>
</nav>

<div class="max-w-7xl mx-auto px-4 py-8">
    
    <!-- Breadcrumb -->
    <div class="flex items-center gap-2 text-sm text-gray-400 mb-6">
        <a href="/" class="hover:text-cyan-400 transition">
            <i class="fas fa-home"></i> Beranda
        </a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="/?tab=<?php echo e($category->category_type); ?>" class="hover:text-cyan-400 transition capitalize">
            <?php echo e(ucfirst($category->category_type ?? 'Products')); ?>

        </a>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-white"><?php echo e($category->name); ?></span>
    </div>
    
    

<div class="hero-3d mb-8">
    <div class="hero-3d-inner bg-gradient-to-r from-cyan-500 via-blue-600 to-purple-600 rounded-2xl md:rounded-3xl p-4 md:p-8 relative overflow-hidden shine-effect">
        
        <!-- Animated Background -->
        <div class="absolute inset-0 opacity-20">
            <div class="absolute w-32 md:w-40 h-32 md:h-40 bg-white rounded-full blur-3xl -top-10 -left-10" style="animation: float-smooth 6s ease-in-out infinite;"></div>
            <div class="absolute w-24 md:w-32 h-24 md:h-32 bg-cyan-300 rounded-full blur-3xl -bottom-10 -right-10" style="animation: float-smooth 8s ease-in-out infinite reverse;"></div>
        </div>
        
        <!-- Mobile Layout (Stack Vertically) -->
        <div class="block md:hidden relative z-10 space-y-4">
            <!-- Image + Title (Horizontal) -->
            <div class="flex items-center gap-4">
                <?php if($category->image): ?>
                <div class="relative group flex-shrink-0">
                    <div class="absolute -inset-1 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-xl blur opacity-50"></div>
                    <img src="<?php echo e(asset('storage/' . $category->image)); ?>" 
                         alt="<?php echo e($category->name); ?>" 
                         class="relative w-16 h-16 rounded-xl object-cover shadow-2xl"
                         style="box-shadow: 0 15px 40px rgba(0,0,0,0.6);">
                </div>
                <?php else: ?>
                <div class="w-16 h-16 glass-pro rounded-xl flex items-center justify-center shadow-xl flex-shrink-0">
                    <i class="<?php echo e($category->icon ?? 'fas fa-gamepad'); ?> text-3xl text-white"></i>
                </div>
                <?php endif; ?>
                
                <div class="flex-1 min-w-0">
                    <h1 class="text-xl font-black font-orbitron text-white mb-1 truncate" 
                        style="text-shadow: 0 2px 8px rgba(0,0,0,0.4);">
                        <?php echo e($category->name); ?>

                    </h1>
                    <span class="text-xs text-white/90 font-semibold"><?php echo e(ucfirst($category->category_type ?? 'Game')); ?></span>
                </div>
            </div>
            
            <!-- Rating Badge (Full Width) -->
            <?php if(isset($averageRating) && isset($totalReviews) && $totalReviews > 0): ?>
            <div class="glass-pro rounded-xl px-4 py-3 flex items-center justify-between shadow-xl neon-blue">
                <!-- Stars + Rating -->
                <div class="flex items-center gap-2">
                    <div class="flex gap-0.5">
                        <?php for($i = 1; $i <= 5; $i++): ?>
                            <?php if($i <= floor($averageRating)): ?>
                                <i class="fas fa-star text-yellow-300 text-sm" style="filter: drop-shadow(0 1px 3px rgba(251, 191, 36, 0.8));"></i>
                            <?php elseif($i == ceil($averageRating) && $averageRating - floor($averageRating) >= 0.5): ?>
                                <i class="fas fa-star-half-alt text-yellow-300 text-sm"></i>
                            <?php else: ?>
                                <i class="far fa-star text-yellow-200/30 text-sm"></i>
                            <?php endif; ?>
                        <?php endfor; ?>
                    </div>
                    <span class="text-lg font-black text-white"><?php echo e(number_format($averageRating, 1)); ?></span>
                    <span class="text-xs text-white/70">/5</span>
                </div>
                
                <!-- Review Count -->
                <div class="flex items-center gap-1.5">
                    <i class="fas fa-users text-purple-300 text-sm"></i>
                    <span class="text-sm font-bold text-white"><?php echo e($totalReviews > 999 ? number_format($totalReviews / 1000, 1) . 'K' : $totalReviews); ?></span>
                </div>
            </div>
            <?php endif; ?>
            
            <!-- Description -->
            <p class="text-white/95 text-sm leading-relaxed" style="text-shadow: 0 1px 4px rgba(0,0,0,0.3);">
                <?php echo e(Str::limit($category->description ?? 'Top up cepat, murah, dan terpercaya.', 80)); ?>

            </p>
            
            <!-- Feature Badges (2 Columns) -->
            <div class="grid grid-cols-2 gap-2">
                <div class="glass-pro px-3 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-bolt text-yellow-300 text-sm"></i>
                    <span class="text-xs font-bold">Instan</span>
                </div>
                <div class="glass-pro px-3 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-shield-check text-green-300 text-sm"></i>
                    <span class="text-xs font-bold">100% Aman</span>
                </div>
            </div>
        </div>
        
        <!-- Desktop Layout (Original) -->
        <div class="hidden md:flex items-start gap-6 relative z-10">
            
            <!-- Game Image -->
            <?php if($category->image): ?>
            <div class="relative group">
                <div class="absolute -inset-1 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-2xl blur opacity-50 group-hover:opacity-75 transition"></div>
                <img src="<?php echo e(asset('storage/' . $category->image)); ?>" 
                     alt="<?php echo e($category->name); ?>" 
                     class="relative w-28 h-28 rounded-2xl object-cover shadow-2xl transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-500"
                     style="box-shadow: 0 25px 60px rgba(0,0,0,0.6);">
            </div>
            <?php else: ?>
            <div class="w-28 h-28 glass-pro rounded-2xl flex items-center justify-center shadow-2xl transform hover:scale-110 hover:rotate-3 transition-all duration-500 neon-blue">
                <i class="<?php echo e($category->icon ?? 'fas fa-gamepad'); ?> text-5xl text-white"></i>
            </div>
            <?php endif; ?>
            
            <!-- Content -->
            <div class="flex-1 min-w-0">
                
                <!-- Title + Rating -->
                <div class="flex items-start gap-4 mb-3 flex-wrap">
                    <div>
                        <h1 class="text-3xl md:text-4xl font-black font-orbitron text-white mb-1" 
                            style="text-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 30px rgba(255,255,255,0.3);">
                            <?php echo e($category->name); ?>

                        </h1>
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="text-sm text-white/90 font-semibold"><?php echo e(ucfirst($category->category_type ?? 'Game')); ?></span>
                        </div>
                    </div>
                    
                    <!-- ⭐ 3D FLOATING RATING BADGE (Desktop Only) -->
                    <?php if(isset($averageRating) && isset($totalReviews) && $totalReviews > 0): ?>
                    <div class="float-badge">
                        <div class="glass-pro rounded-2xl px-5 py-3 inline-flex items-center gap-3 shadow-2xl neon-blue transform hover:scale-110 hover:-rotate-2 transition-all duration-300 cursor-pointer">
                            
                            <!-- Stars -->
                            <div class="flex gap-0.5">
                                <?php for($i = 1; $i <= 5; $i++): ?>
                                    <?php if($i <= floor($averageRating)): ?>
                                        <i class="fas fa-star text-yellow-300 text-base star-hover" 
                                           style="filter: drop-shadow(0 2px 6px rgba(251, 191, 36, 0.8)); transition-delay: <?php echo e($i * 50); ?>ms;"></i>
                                    <?php elseif($i == ceil($averageRating) && $averageRating - floor($averageRating) >= 0.5): ?>
                                        <i class="fas fa-star-half-alt text-yellow-300 text-base star-hover"></i>
                                    <?php else: ?>
                                        <i class="far fa-star text-yellow-200/30 text-base"></i>
                                    <?php endif; ?>
                                <?php endfor; ?>
                            </div>
                            
                            <!-- Rating -->
                            <div class="flex items-baseline gap-1">
                                <span class="text-2xl font-black text-white" 
                                      style="text-shadow: 0 0 20px rgba(255,255,255,0.5);">
                                    <?php echo e(number_format($averageRating, 1)); ?>

                                </span>
                                <span class="text-xs text-white/70 font-bold">/5</span>
                            </div>
                            
                            <!-- Divider -->
                            <div class="w-px h-8 bg-gradient-to-b from-transparent via-white/40 to-transparent"></div>
                            
                            <!-- Count -->
                            <div class="text-center">
                                <div class="text-xl font-black text-white" 
                                     style="text-shadow: 0 0 15px rgba(255,255,255,0.4);">
                                    <?php echo e($totalReviews > 999 ? number_format($totalReviews / 1000, 1) . 'K' : $totalReviews); ?>

                                </div>
                                <div class="text-[9px] text-white/80 uppercase tracking-wider font-bold">Reviews</div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
                
                <!-- Description -->
                <p class="text-white/95 text-base mb-4 leading-relaxed" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">
                    <?php echo e($category->description ?? 'Top up cepat, murah, dan terpercaya. Proses otomatis 24 jam!'); ?>

                </p>
                
                <!-- Feature Badges -->
                <div class="flex items-center gap-2.5 flex-wrap">
                    <div class="glass-pro px-4 py-2 rounded-full inline-flex items-center gap-2 hover:bg-white/20 transition-all transform hover:scale-105 cursor-pointer group">
                        <i class="fas fa-bolt text-yellow-300 group-hover:animate-pulse"></i>
                        <span class="text-sm font-bold">Proses Instan</span>
                    </div>
                    
                    <div class="glass-pro px-4 py-2 rounded-full inline-flex items-center gap-2 hover:bg-white/20 transition-all transform hover:scale-105 cursor-pointer group">
                        <i class="fas fa-shield-check text-green-300 group-hover:scale-110 transition-transform"></i>
                        <span class="text-sm font-bold">100% Aman</span>
                    </div>
                    
                    <?php if(isset($totalReviews) && $totalReviews > 0): ?>
                    <div class="glass-pro px-4 py-2 rounded-full inline-flex items-center gap-2 hover:bg-white/20 transition-all transform hover:scale-105 cursor-pointer group">
                        <i class="fas fa-users text-purple-300 group-hover:scale-110 transition-transform"></i>
                        <span class="text-sm font-bold"><?php echo e(number_format($totalReviews)); ?>+ Gamers</span>
                    </div>
                    <?php endif; ?>
                    
                    <div class="glass-pro px-4 py-2 rounded-full inline-flex items-center gap-2 hover:bg-white/20 transition-all transform hover:scale-105 cursor-pointer group">
                        <i class="fas fa-headset text-cyan-300 group-hover:rotate-12 transition-transform"></i>
                        <span class="text-sm font-bold">24/7 Support</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    
    <div class="grid lg:grid-cols-3 gap-8">
        
        <!-- LEFT SECTION -->
        <div class="lg:col-span-2 space-y-6">
            
           <?php if(!isset($config['is_voucher']) || !$config['is_voucher']): ?>
<div class="bg-gray-900 rounded-xl border border-cyan-500/20 p-6">
    <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
        <i class="fas fa-user-circle text-cyan-400"></i> Data Pelanggan
    </h3>
    
    <div class="space-y-4">
        <!-- User ID / UID Input -->
        <div>
            <label class="block text-sm font-bold text-gray-400 mb-2">
                <i class="fas <?php echo e($config['id_icon']); ?> text-cyan-400 mr-2"></i>
                <?php echo e($config['id_label']); ?> *
            </label>
            <input type="text" 
                   x-model="formData.userId" 
                   @input.debounce.500ms="checkNickname()" 
                   placeholder="<?php echo e($config['id_placeholder']); ?>"
                   class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none transition">
            
            <!-- Nickname Status -->
            <div x-show="nicknameStatus" x-cloak class="mt-2">
                <p x-show="nicknameStatus === 'loading'" class="text-sm text-blue-400 flex items-center gap-2">
                    <i class="fas fa-spinner fa-spin"></i> Checking...
                </p>
                <div x-show="nicknameStatus === 'success'" class="mt-2 p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-400"></i>
                        <span class="text-sm text-green-400 font-semibold" x-text="nickname"></span>
                    </div>
                </div>
                <p x-show="nicknameStatus === 'error'" class="text-sm text-red-400 flex items-center gap-2">
                    <i class="fas fa-times-circle"></i> <span x-text="nicknameError"></span>
                </p>
            </div>
        </div>
        
<?php if($config['show_zone']): ?>
        <div class="mt-4">
            <label class="block text-sm font-bold text-gray-400 mb-2">
                <i class="fas <?php echo e($config['zone_icon'] ?? 'fa-server'); ?> text-cyan-400 mr-2"></i>
                <?php echo e($config['zone_label']); ?> *
            </label>
            
            <div class="relative group"> <?php if(isset($config['zone_type']) && $config['zone_type'] === 'dropdown'): ?>
                    <select x-model="formData.zoneId" 
                            @change="checkNickname()"
                            class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none transition appearance-none cursor-pointer pr-10 hover:border-cyan-500/50">
                        <option value="" disabled selected><?php echo e($config['zone_placeholder']); ?></option>
                        <?php $__currentLoopData = $config['zone_options']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $value => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($value); ?>" class="bg-gray-800 text-white"><?php echo e($label); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                    
                    <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-400 group-hover:text-cyan-400 transition-colors">
                        <i class="fas fa-chevron-down text-xs"></i>
                    </div>
                <?php else: ?>
                    <input type="text" 
                           x-model="formData.zoneId" 
                           @input.debounce.500ms="checkNickname()" 
                           placeholder="<?php echo e($config['zone_placeholder']); ?>"
                           class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none transition hover:border-cyan-500/50">
                <?php endif; ?>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>
<?php else: ?>
            <div class="bg-gray-900 rounded-xl border border-cyan-500/20 p-6">
                <div class="text-center py-6">
                    <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4 float-animation">
                        <i class="fas fa-ticket text-4xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">Voucher Digital</h3>
                    <p class="text-gray-400 text-sm">Pilih nominal voucher untuk mendapatkan kode digital</p>
                </div>
            </div>
            <?php endif; ?>
            
            <!-- Product Selection -->
            <div class="bg-gray-900 rounded-xl border border-cyan-500/20 p-6">
                <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                    <i class="fas fa-box text-cyan-400"></i> Pilih Nominal
                </h3>
                
                <div class="grid md:grid-cols-2 gap-4 max-h-[500px] overflow-y-auto pr-2">
                    <template x-for="product in products" :key="product.id">
                        <div @click="selectProduct(product)" 
                             :class="selectedProduct?.id === product.id ? 'border-cyan-500 bg-cyan-500/10' : 'border-gray-700 hover:border-cyan-500/50'"
                             class="border-2 rounded-xl p-4 cursor-pointer transition">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h4 class="font-bold text-white" x-text="product.name"></h4>
                                    <p class="text-xs text-gray-500 mt-1" x-text="product.sku"></p>
                                </div>
                                <p class="text-lg font-bold text-cyan-400">
                                    Rp <span x-text="Number(product.selling_price).toLocaleString('id-ID')"></span>
                                </p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        
        <!-- RIGHT SIDEBAR -->
        <div class="lg:col-span-1">
            <div class="bg-gray-900 rounded-xl border border-cyan-500/20 p-6 sticky top-24">
                <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                    <i class="fas fa-shopping-cart text-cyan-400"></i> Ringkasan Pesanan
                </h3>
                
                <div x-show="selectedProduct" x-cloak class="mb-4 p-4 bg-gray-800/50 rounded-lg">
                    <p class="text-sm text-gray-400 mb-1">Produk Dipilih</p>
                    <p class="font-bold text-white" x-text="selectedProduct?.name"></p>
                    <p class="text-sm text-gray-500" x-text="selectedProduct?.sku"></p>
                </div>
                
                <div x-show="selectedProduct" x-cloak class="space-y-2 mb-4 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-400">Harga</span>
                        <span class="text-white font-bold">
                            Rp <span x-text="Number(selectedProduct?.selling_price || 0).toLocaleString('id-ID')"></span>
                        </span>
                    </div>
                    
                    <div x-show="discountAmount > 0" x-cloak class="flex justify-between text-green-400 font-bold">
                        <span class="flex items-center gap-2">
                            <i class="fas fa-tag"></i> Diskon
                        </span>
                        <span>- Rp <span x-text="Number(discountAmount).toLocaleString('id-ID')"></span></span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-gray-400">Biaya Payment</span>
                        <span class="text-yellow-400 font-bold">
                            Rp <span x-text="Number(paymentFee).toLocaleString('id-ID')"></span>
                        </span>
                    </div>
                    
                    <div class="flex justify-between pt-2 border-t border-gray-700">
                        <span class="text-cyan-400 font-bold">Total</span>
                        <span class="text-cyan-400 font-bold text-xl">
                            Rp <span x-text="Number(totalAmount).toLocaleString('id-ID')"></span>
                        </span>
                    </div>
                </div>
                
                <!-- Voucher Input -->
                <div x-show="selectedProduct" x-cloak class="mt-4 pt-4 border-t border-gray-700">
                    <h4 class="text-sm font-bold text-cyan-400 mb-3 flex items-center gap-2">
                        <i class="fas fa-ticket"></i> Punya Voucher?
                    </h4>
                    
                    <div class="flex gap-2 mb-2">
                        <input type="text" x-model="voucherCode" placeholder="Kode voucher"
                               :disabled="appliedVoucher !== null"
                               @keyup.enter="applyVoucher()"
                               class="flex-1 px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm uppercase focus:border-cyan-500 focus:outline-none disabled:opacity-50">
                        <button @click="applyVoucher()" :disabled="voucherLoading || appliedVoucher !== null"
                                class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-lg hover:opacity-80 transition disabled:opacity-50">
                            <span x-show="!voucherLoading"><i class="fas fa-check"></i></span>
                            <span x-show="voucherLoading"><i class="fas fa-spinner fa-spin"></i></span>
                        </button>
                    </div>
                    
                    <div x-show="voucherMessage" :class="voucherMessageType === 'error' ? 'text-red-400' : 'text-green-400'" class="text-xs">
                        <i :class="voucherMessageType === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i>
                        <span x-text="voucherMessage"></span>
                    </div>
                    
                    <div x-show="appliedVoucher" x-cloak class="mt-2 bg-green-500/10 border border-green-500/30 rounded-lg p-2">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <p class="text-xs font-bold text-green-400 flex items-center gap-1">
                                    <i class="fas fa-check-circle"></i>
                                    <span x-text="appliedVoucher?.code"></span>
                                </p>
                                <p class="text-xs text-gray-400" x-text="appliedVoucher?.description"></p>
                            </div>
                            <button @click="removeVoucher()" class="text-red-400 hover:text-red-300 ml-2">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <button @click="showPaymentModal = true" 
                        :disabled="!selectedProduct || (!formData.userId && !isVoucher)"
                        :class="selectedProduct && (formData.userId || isVoucher) ? 'bg-gradient-to-r from-cyan-500 to-blue-600 hover:scale-105' : 'bg-gray-700 cursor-not-allowed'"
                        class="w-full px-6 py-4 rounded-xl font-bold text-lg transition shadow-lg disabled:opacity-50 mt-6">
                    <i class="fas fa-shopping-cart mr-2"></i> BELI SEKARANG
                </button>
            </div>
            <br>
<div class="mb-6 bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-500/30 rounded-2xl p-6 backdrop-blur-sm">
    <div class="flex items-start gap-4">
        <!-- Icon -->
        <div class="flex-shrink-0">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <i class="fas fa-info-circle text-xl text-white"></i>
            </div>
        </div>
        
        <!-- Content -->
        <div class="flex-1">
            <h3 class="text-lg font-bold text-white mb-3 flex items-center gap-2">
                <i class="fas fa-book-open text-cyan-400"></i>
                Cara Top Up <?php echo e($category->name); ?>

            </h3>
            
            <div class="space-y-3 text-sm text-gray-300">
                <?php if($category->slug === 'genshin-impact'): ?>
                    <!-- Genshin Impact Tutorial -->
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                        <p>Masukkan <strong class="text-cyan-400">UID</strong> (User ID) kamu</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                        <p>Pilih <strong class="text-cyan-400">Server</strong> (Asia, America, Europe, TW/HK/MO)</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                        <p>Pilih nominal Genesis Crystal yang diinginkan</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                        <p>Pilih metode pembayaran dan selesaikan transaksi</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
                        <p>Genesis Crystal akan otomatis masuk ke akun kamu!</p>
                    </div>
                    
                    <!-- How to find UID -->
                    <div class="mt-4 p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
                        <p class="text-xs text-blue-400 font-bold mb-2">
                            <i class="fas fa-lightbulb mr-2"></i>Cara Menemukan UID:
                        </p>
                        <p class="text-xs text-gray-400">
                            Buka game → Menu Paimon → Settings → Account → UID akan terlihat di pojok kanan bawah
                        </p>
                    </div>
                
                <?php elseif($category->slug === 'pubg-mobile' || $category->slug === 'pubg'): ?>
                    <!-- PUBG Mobile Tutorial -->
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                        <p>Masukkan <strong class="text-cyan-400">User ID</strong> PUBG Mobile kamu</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                        <p>Pilih nominal UC (Unknown Cash) yang diinginkan</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                        <p>Pilih metode pembayaran dan selesaikan transaksi</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                        <p>UC akan otomatis masuk ke akun kamu dalam 1-5 menit!</p>
                    </div>
                    
                    <!-- How to find User ID -->
                    <div class="mt-4 p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
                        <p class="text-xs text-blue-400 font-bold mb-2">
                            <i class="fas fa-lightbulb mr-2"></i>Cara Menemukan User ID:
                        </p>
                        <p class="text-xs text-gray-400">
                            Buka game → Tap icon Avatar (pojok kiri atas) → User ID terlihat di bawah nama karakter
                        </p>
                    </div>
                
                <?php elseif($category->slug === 'mobile-legends'): ?>
                    <!-- Mobile Legends Tutorial -->
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                        <p>Masukkan <strong class="text-cyan-400">User ID</strong> dan <strong class="text-cyan-400">Zone ID</strong></p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                        <p>Pilih nominal Diamond yang diinginkan</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                        <p>Pilih metode pembayaran dan selesaikan transaksi</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                        <p>Diamond akan otomatis masuk ke akun kamu!</p>
                    </div>
                    
                    <div class="mt-4 p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
                        <p class="text-xs text-blue-400 font-bold mb-2">
                            <i class="fas fa-lightbulb mr-2"></i>Cara Menemukan ID:
                        </p>
                        <p class="text-xs text-gray-400">
                            Buka game → Tap icon Avatar → User ID dan Zone ID terlihat di bagian Basic Info
                        </p>
                    </div>
                
                <?php else: ?>
                    <!-- Generic Tutorial -->
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                        <p>Masukkan data akun game kamu dengan benar</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                        <p>Pilih nominal yang diinginkan</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                        <p>Pilih metode pembayaran dan selesaikan transaksi</p>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-cyan-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                        <p>Item akan otomatis masuk ke akun dalam 1-5 menit!</p>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- Warning -->
            <div class="mt-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg flex items-start gap-3">
                <i class="fas fa-exclamation-triangle text-yellow-400 flex-shrink-0 mt-0.5"></i>
                <p class="text-xs text-yellow-400">
                    <strong>Penting:</strong> Pastikan data yang kamu masukkan sudah benar. Kesalahan input bukan tanggung jawab kami!
                </p>
            </div>
        </div>
    </div>
</div>
        </div>
        
    </div>
    
</div>

<!-- PAYMENT MODAL -->
<div x-show="showPaymentModal" 
     x-cloak
     @click.self="showPaymentModal = false"
     class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
    
    <div class="bg-gray-900 rounded-3xl w-full max-w-md border border-cyan-500/30 shadow-2xl overflow-hidden flex flex-col" 
         style="max-height: 90vh;"
         @click.stop>
        
        <!-- Header -->
        <div class="bg-gradient-to-r from-cyan-500 to-blue-600 p-6 rounded-t-3xl flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-2xl font-bold font-orbitron">PAYMENT</h3>
                <button @click="showPaymentModal = false" class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 transition flex items-center justify-center">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <p class="text-white/80 text-sm mt-2">Pilih metode pembayaran</p>
        </div>
        
        <!-- Content -->
        <div class="overflow-y-auto flex-1">
            <div class="p-6 space-y-6">
                
<!-- Order Summary -->
                <div class="bg-gray-800/50 rounded-xl p-4">
                    <h4 class="text-sm text-gray-400 mb-3 flex items-center gap-2">
                        <i class="fas fa-shopping-cart"></i> Order Summary
                    </h4>
                    
                    <div class="flex items-center gap-3 mb-3 pb-3 border-b border-gray-700">
                        <?php if($category->image): ?>
                        <img src="<?php echo e(asset('storage/' . $category->image)); ?>" alt="<?php echo e($category->name); ?>" class="w-12 h-12 rounded-lg object-cover">
                        <?php else: ?>
                        <div class="w-12 h-12 bg-gradient-to-br from-cyan-400 to-purple-600 rounded-lg flex items-center justify-center">
                            <i class="<?php echo e($category->icon ?? 'fas fa-gamepad'); ?> text-xl"></i>
                        </div>
                        <?php endif; ?>
                        
                        <div class="flex-1">
                            <p class="text-xs text-gray-400"><?php echo e(ucfirst($category->category_type ?? 'Game')); ?>:</p>
                            <p class="font-bold text-white"><?php echo e($category->name); ?></p>
                        </div>
                    </div>
                    
                    <?php if(!isset($config['is_voucher']) || !$config['is_voucher']): ?>
                    <div class="mb-3 pb-3 border-b border-gray-700">
                        <p class="text-xs text-gray-400 mb-1"><?php echo e($config['id_label']); ?>:</p>
                        <p class="font-mono text-cyan-400" x-text="formData.userId"></p>
                        
                        <?php if($config['show_zone']): ?>
                        <p class="text-xs text-gray-400 mb-1 mt-2"><?php echo e($config['zone_label']); ?>:</p>
                        <p class="font-mono text-cyan-400" x-text="formData.zoneId"></p>
                        <?php endif; ?>
                        
                        <p x-show="nickname" class="text-xs text-green-400 mt-2">
                            <i class="fas fa-user-check mr-1"></i>
                            <span x-text="nickname"></span>
                        </p>
                    </div>
                    <?php endif; ?>
                    
                    <div class="mb-3">
                        <p class="text-xs text-gray-400 mb-1">Produk:</p>
                        <p class="font-bold text-white" x-text="selectedProduct?.name"></p>
                        <p class="text-xs text-gray-500" x-text="selectedProduct?.sku"></p>
                    </div>
                    
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-400">Harga Produk</span>
                            <span class="text-white">Rp <span x-text="Number(selectedProduct?.selling_price || 0).toLocaleString('id-ID')"></span></span>
                        </div>
                        
                        <div x-show="discountAmount > 0" x-cloak class="flex justify-between">
                            <span class="text-green-400 font-bold flex items-center gap-2">
                                <i class="fas fa-tag"></i>Diskon Voucher
                            </span>
                            <span class="text-green-400 font-bold">- Rp <span x-text="Number(discountAmount).toLocaleString('id-ID')"></span></span>
                        </div>
                        
                        <div class="flex justify-between">
                            <span class="text-gray-400">Biaya Payment</span>
                            <span class="text-yellow-400">+ Rp <span x-text="Number(paymentFee).toLocaleString('id-ID')"></span></span>
                        </div>
                        
                        <div class="flex justify-between pt-2 border-t border-gray-700">
                            <span class="font-bold text-cyan-400">Total Bayar</span>
                            <span class="font-bold text-cyan-400 text-lg">Rp <span x-text="Number(totalAmount).toLocaleString('id-ID')"></span></span>
                        </div>
                    </div>
                    
                    <p class="text-xs text-blue-400 mt-3 p-2 bg-blue-500/10 rounded">
                        <i class="fas fa-info-circle mr-1"></i>
                        Biaya payment gateway ditanggung pembeli untuk transparansi harga.
                    </p>
                </div>
                
                <!-- Voucher Section -->
                <div class="border-t border-gray-700 pt-6">
                    <h3 class="text-sm font-bold text-cyan-400 mb-3 flex items-center gap-2">
                        <i class="fas fa-ticket"></i>Punya Kode Voucher?
                    </h3>
                    
                    <div class="flex gap-2 mb-2">
                        <input type="text" x-model="voucherCode" placeholder="Kode voucher"
                               :disabled="appliedVoucher !== null"
                               @keyup.enter="applyVoucher()"
                               class="flex-1 px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm uppercase focus:border-cyan-500 focus:outline-none disabled:opacity-50">
                        <button @click="applyVoucher()" :disabled="voucherLoading || appliedVoucher !== null"
                                class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-lg hover:opacity-80 transition disabled:opacity-50">
                            <span x-show="!voucherLoading"><i class="fas fa-check"></i></span>
                            <span x-show="voucherLoading"><i class="fas fa-spinner fa-spin"></i></span>
                        </button>
                    </div>
                    
                    <div x-show="voucherMessage" :class="voucherMessageType === 'error' ? 'text-red-400' : 'text-green-400'" class="text-xs mb-2">
                        <i :class="voucherMessageType === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i>
                        <span x-text="voucherMessage"></span>
                    </div>
                    
                    <div x-show="appliedVoucher" x-cloak class="bg-green-500/10 border border-green-500/30 rounded-lg p-2">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <p class="text-xs font-bold text-green-400 flex items-center gap-1">
                                    <i class="fas fa-check-circle"></i>
                                    <span x-text="appliedVoucher?.code"></span>
                                </p>
                                <p class="text-xs text-gray-400" x-text="appliedVoucher?.description"></p>
                            </div>
                            <button @click="removeVoucher()" class="text-red-400 hover:text-red-300 ml-2">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Customer Info -->
                <div>
                    <h4 class="text-sm font-bold text-gray-400 mb-3 flex items-center gap-2">
                        <i class="fas fa-user"></i> Customer Information
                    </h4>
                    
                    <div class="space-y-3">
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Name *</label>
                            <input type="text" x-model="paymentData.customer_name" placeholder="Your Name"
                                   class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none">
                        </div>
                        
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Email *</label>
                            <input type="email" x-model="paymentData.customer_email" placeholder="your@email.com"
                                   class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none">
                        </div>
                        
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Phone (Optional)</label>
                            <input type="tel" x-model="paymentData.customer_phone" placeholder="08123456789"
                                   class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:border-cyan-500 focus:outline-none">
                        </div>
                    </div>
                </div>
                
                <!-- Payment Methods -->
                <div>
                    <h4 class="text-sm font-bold text-gray-400 mb-3 flex items-center gap-2">
                        <i class="fas fa-credit-card"></i> Select Payment Method
                    </h4>
                    
                    <div x-show="loadingChannels" class="text-center py-8">
                        <i class="fas fa-spinner fa-spin text-3xl text-cyan-400"></i>
                        <p class="text-sm text-gray-400 mt-2">Loading payment methods...</p>
                    </div>
                    
                    <div x-show="!loadingChannels" class="space-y-4">
                        
                        <!-- E-Wallet -->
                        <div x-show="paymentChannels.ewallet && paymentChannels.ewallet.length > 0">
                            <button @click="activeTab = 'ewallet'" 
                                    :class="activeTab === 'ewallet' ? 'bg-cyan-500 text-white' : 'bg-gray-800 text-gray-400'"
                                    class="w-full px-4 py-2 rounded-lg font-bold text-sm transition mb-2">
                                <i class="fas fa-wallet mr-2"></i>E-Wallet
                                <span class="ml-2 px-2 py-0.5 bg-green-500/20 text-green-400 rounded text-xs">Murah!</span>
                            </button>
                            
                            <div x-show="activeTab === 'ewallet'" class="space-y-2">
                                <template x-for="channel in paymentChannels.ewallet" :key="channel.code">
                                    <div @click="selectPaymentMethod(channel)" 
                                         :class="paymentData.payment_method === channel.code ? 'border-cyan-500 bg-cyan-500/10' : 'border-gray-700 hover:border-cyan-500/50'"
                                         class="border-2 rounded-lg p-3 cursor-pointer transition">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-wallet text-cyan-400"></i>
                                                </div>
                                                <div>
                                                    <p class="font-bold text-white text-sm" x-text="channel.name"></p>
                                                    <p class="text-xs text-gray-500">
                                                        Fee: Rp <span x-text="Number(channel.fee || 0).toLocaleString('id-ID')"></span>
                                                    </p>
                                                </div>
                                            </div>
                                            <i x-show="paymentData.payment_method === channel.code" class="fas fa-check-circle text-cyan-400 text-xl"></i>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        
                        <!-- Retail -->
                        <div x-show="paymentChannels.retail && paymentChannels.retail.length > 0">
                            <button @click="activeTab = 'retail'" 
                                    :class="activeTab === 'retail' ? 'bg-cyan-500 text-white' : 'bg-gray-800 text-gray-400'"
                                    class="w-full px-4 py-2 rounded-lg font-bold text-sm transition mb-2">
                                <i class="fas fa-store mr-2"></i>Retail
                            </button>
                            
                            <div x-show="activeTab === 'retail'" class="space-y-2">
                                <template x-for="channel in paymentChannels.retail" :key="channel.code">
                                    <div @click="selectPaymentMethod(channel)" 
                                         :class="paymentData.payment_method === channel.code ? 'border-cyan-500 bg-cyan-500/10' : 'border-gray-700 hover:border-cyan-500/50'"
                                         class="border-2 rounded-lg p-3 cursor-pointer transition">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-store text-orange-400"></i>
                                                </div>
                                                <div>
                                                    <p class="font-bold text-white text-sm" x-text="channel.name"></p>
                                                    <p class="text-xs text-gray-500">
                                                        Fee: Rp <span x-text="Number(channel.fee || 0).toLocaleString('id-ID')"></span>
                                                    </p>
                                                </div>
                                            </div>
                                            <i x-show="paymentData.payment_method === channel.code" class="fas fa-check-circle text-cyan-400 text-xl"></i>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        
                        <!-- Virtual Account -->
                        <div x-show="paymentChannels.va && paymentChannels.va.length > 0">
                            <button @click="activeTab = 'va'" 
                                    :class="activeTab === 'va' ? 'bg-cyan-500 text-white' : 'bg-gray-800 text-gray-400'"
                                    class="w-full px-4 py-2 rounded-lg font-bold text-sm transition mb-2">
                                <i class="fas fa-university mr-2"></i>Virtual Account
                            </button>
                            
                            <div x-show="activeTab === 'va'" class="space-y-2">
                                <template x-for="channel in paymentChannels.va" :key="channel.code">
                                    <div @click="selectPaymentMethod(channel)" 
                                         :class="paymentData.payment_method === channel.code ? 'border-cyan-500 bg-cyan-500/10' : 'border-gray-700 hover:border-cyan-500/50'"
                                         class="border-2 rounded-lg p-3 cursor-pointer transition">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-university text-blue-400"></i>
                                                </div>
                                                <div>
                                                    <p class="font-bold text-white text-sm" x-text="channel.name"></p>
                                                    <p class="text-xs text-gray-500">
                                                        Fee: Rp <span x-text="Number(channel.fee || 0).toLocaleString('id-ID')"></span>
                                                    </p>
                                                </div>
                                            </div>
                                            <i x-show="paymentData.payment_method === channel.code" class="fas fa-check-circle text-cyan-400 text-xl"></i>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Process Payment Button -->
                <button @click="processPayment()" 
                        :disabled="!paymentData.payment_method || !paymentData.customer_name || !paymentData.customer_email || processingPayment"
                        :class="paymentData.payment_method && paymentData.customer_name && paymentData.customer_email && !processingPayment ? 'bg-gradient-to-r from-cyan-500 to-blue-600 hover:scale-105' : 'bg-gray-700 cursor-not-allowed'"
                        class="w-full px-6 py-4 rounded-xl font-bold text-lg transition shadow-lg disabled:opacity-50">
                    <span x-show="!processingPayment">
                        <i class="fas fa-lock mr-2"></i>Process Payment
                    </span>
                    <span x-show="processingPayment">
                        <i class="fas fa-spinner fa-spin mr-2"></i>Processing...
                    </span>
                </button>
                
                <p class="text-xs text-center text-gray-500">
                    <i class="fas fa-shield-alt mr-1"></i> Secured by Tripay
                </p>
            </div>
        </div>
    </div>
</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 border border-cyan-500/30 shadow-2xl p-8" @click.stop>
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-2xl font-bold font-orbitron text-cyan-400">
                <i class="fas fa-search mr-2"></i>CEK STATUS PESANAN
            </h3>
            <button @click="showTrackModal = false" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        
        <p class="text-gray-400 mb-6">Masukkan Order ID yang ada di halaman detail pesanan atau email konfirmasi</p>
        
        <form @submit.prevent="trackOrder" class="space-y-4">
            <div>
                <label class="block text-sm font-bold text-gray-400 mb-2">Order ID / Invoice Number</label>
                <div class="relative">
                    <input type="text" x-model="trackOrderId" placeholder="Contoh: INV-20260112-XXXXX"
                           class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none pr-12">
                    <button type="button" @click="pasteInvoice()"
                            class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-cyan-500/20 hover:bg-cyan-500/30 rounded-lg transition"
                            title="Tempel dari clipboard">
                        <i class="fas fa-paste text-cyan-400"></i>
                    </button>
                </div>
            </div>
            
            <button type="submit"
                    class="w-full px-6 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl font-bold text-lg transition shadow-lg hover:scale-105">
                <i class="fas fa-search mr-2"></i>Cek Status Pesanan
            </button>
        </form>
        
        <p class="text-center text-xs text-gray-500 mt-4">
            <i class="fas fa-info-circle mr-1"></i>
            Order ID bisa dilihat di halaman detail pesanan setelah kamu melakukan transaksi
        </p>
    </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="<?php echo e(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>
            
            <!-- Social Media (Optional) -->
            <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 mb-6">
                <a href="https://www.instagram.com/ryll_storeee?igsh=MTF4NndsMnJmeTJpZA==" class="w-10 h-10 bg-gray-800 hover:bg-cyan-600 rounded-full flex items-center justify-center transition">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-cyan-600 rounded-full flex items-center justify-center transition">
                    <i class="fab fa-whatsapp"></i>
                </a>
                <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-cyan-600 rounded-full flex items-center justify-center transition">
                    <i class="fab fa-telegram"></i>
                </a>
            </div>
            
            <p class="text-xs text-gray-600">© <?php echo e(date('Y')); ?> Ryll Store. All rights reserved.</p>
        </div>
    </div>
</footer>
<script>
function productPage() {
    return {
        // ===== EXISTING PRODUCT PAGE DATA =====
        products: <?php echo json_encode($products, 15, 512) ?>,
        selectedProduct: null,
        
        formData: {
            userId: '',
            zoneId: '',
        },
        
        nickname: '',
        nicknameStatus: null,
        nicknameError: '',
        nicknameCountry: '',
        isVoucher: <?php echo e(isset($config['is_voucher']) && $config['is_voucher'] ? 'true' : 'false'); ?>,
        
        voucherCode: '',
        voucherLoading: false,
        voucherMessage: '',
        voucherMessageType: '',
        appliedVoucher: null,
        discountAmount: 0,
        
        showPaymentModal: false,
        paymentChannels: { ewallet: [], retail: [], va: [] },
        loadingChannels: false,
        activeTab: 'ewallet',
        
        paymentData: {
            payment_method: '',
            customer_name: '',
            customer_email: '',
            customer_phone: '',
        },
        
        paymentFee: 0,
        totalAmount: 0,
        processingPayment: false,
        
        showTrackModal: false,
        trackOrderId: '',
        
        // ===== SEARCH DATA (FROM HOMEPAGE) =====
        searchQuery: '', 
        searchOpen: false,
        searchResults: [],
        searchLoading: false,
        showError: false,
        errorMessage: '',
        showSuccess: false,
        successMessage: '',

        showErrorMsg(message) {
            this.errorMessage = message;
            this.showError = true;
            setTimeout(() => this.showError = false, 5000);
        },

        showSuccessMsg(message) {
            this.successMessage = message;
            this.showSuccess = true;
            setTimeout(() => this.showSuccess = false, 5000);
        },
        
        // ===== INIT =====
        init() {
            this.loadPaymentChannels();
        },
        
        // ===== SEARCH FUNCTIONS (FROM HOMEPAGE) =====
        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)}`);
                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;
        },
        
        // ===== PRODUCT FUNCTIONS =====
        selectProduct(product) {
            if (this.selectedProduct && this.selectedProduct.id !== product.id && this.appliedVoucher) {
                this.removeVoucher();
                this.voucherMessage = 'Voucher dihapus karena produk berubah';
                this.voucherMessageType = 'error';
                setTimeout(() => { this.voucherMessage = ''; }, 3000);
            }
            
            this.selectedProduct = product;
            this.paymentData.payment_method = '';
            this.paymentFee = 0;
            this.calculateTotal();
        },
        
        // ===== VOUCHER FUNCTIONS =====
        async applyVoucher() {
            const code = this.voucherCode.trim().toUpperCase();
            
            if (!code) {
                this.voucherMessage = 'Masukkan kode voucher!';
                this.voucherMessageType = 'error';
                return;
            }
            
            if (!this.selectedProduct) {
                this.voucherMessage = 'Pilih produk terlebih dahulu!';
                this.voucherMessageType = 'error';
                return;
            }
            
            this.voucherLoading = true;
            this.voucherMessage = '';
            
            try {
                const response = await fetch('/api/payment/voucher/validate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        code: code,
                        total_amount: this.selectedProduct.selling_price,
                        customer_email: this.paymentData.customer_email || ''
                    })
                });
                
                const data = await response.json();
                
                if (data.valid) {
                    this.appliedVoucher = data.voucher;
                    this.discountAmount = data.discount.amount;
                    this.voucherMessage = 'Voucher berhasil diterapkan!';
                    this.voucherMessageType = 'success';
                    this.voucherCode = '';
                    
                    if (this.paymentData.payment_method) {
                        const channel = Object.values(this.paymentChannels)
                            .flat()
                            .find(c => c.code === this.paymentData.payment_method);
                        
                        if (channel) {
                            this.paymentFee = parseInt(channel.fee || 0);
                        }
                    }
                    
                    this.calculateTotal();
                    
                    setTimeout(() => {
                        this.voucherMessage = '';
                    }, 3000);
                } else {
                    this.voucherMessage = data.message;
                    this.voucherMessageType = 'error';
                }
                
            } catch (error) {
                this.voucherMessage = 'Gagal memvalidasi voucher';
                this.voucherMessageType = 'error';
                console.error('Voucher error:', error);
            } finally {
                this.voucherLoading = false;
            }
        },
        
        removeVoucher() {
            this.appliedVoucher = null;
            this.discountAmount = 0;
            this.voucherCode = '';
            this.voucherMessage = '';
            
            if (this.paymentData.payment_method) {
                const channel = Object.values(this.paymentChannels)
                    .flat()
                    .find(c => c.code === this.paymentData.payment_method);
                
                if (channel) {
                    this.paymentFee = parseInt(channel.fee || 0);
                }
            }
            
            this.calculateTotal();
        },
        
        // ===== NICKNAME CHECK =====
        async checkNickname() {
            const inputType = '<?php echo e($category->input_type ?? "user-id"); ?>';
            
            if (inputType === 'email' || inputType === 'phone' || inputType === 'username' || inputType === 'voucher') {
                this.nicknameStatus = null;
                return;
            }
            
            if (!this.formData.userId || this.formData.userId.length < 3) {
                this.nicknameStatus = null;
                return;
            }
            
            const needZone = <?php echo e($config['show_zone'] ? 'true' : 'false'); ?>;
            if (needZone && !this.formData.zoneId) {
                this.nicknameStatus = null;
                return;
            }
            
            this.nicknameStatus = 'loading';
            this.nickname = '';
            this.nicknameError = '';
            
            try {
                const requestData = {
                    game_code: '<?php echo e($category->brand_code ?? $category->slug); ?>',
                    user_id: this.formData.userId,
                };

                // ✅ Only add zone_id if it's a valid string
                if (this.formData.zoneId && typeof this.formData.zoneId === 'string') {
                    requestData.zone_id = this.formData.zoneId;
                }

                const response = await fetch('/api/check-nickname', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(requestData)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.nicknameStatus = 'success';
                    this.nickname = data.nickname;
                    this.nicknameCountry = data.country || '';
                } else {
                    this.nicknameStatus = 'error';
                    this.nicknameError = data.message || 'ID Tidak Ditemukan';
                }
                
            } catch (error) {
                console.error('Nickname check error:', error);
                this.nicknameStatus = 'error';
                this.nicknameError = 'Sistem Gangguan';
            }
        },
        
        getCountryCode(country) {
            const countryMap = {
                'Indonesia': 'id',
                'Malaysia': 'my',
                'Singapore': 'sg',
                'Philippines': 'ph',
                'Thailand': 'th',
                'Vietnam': 'vn'
            };
            return countryMap[country] || 'id';
        },
        
        // ===== PAYMENT FUNCTIONS =====
        async loadPaymentChannels() {
            this.loadingChannels = true;
            try {
                const response = await fetch('/transactions/payment-methods?product_id=1');
                const data = await response.json();
                
                if (data.success && data.data.channels) {
                    const channels = data.data.channels;
                    
                    this.paymentChannels = {
                        ewallet: channels['E-Wallet'] || [],
                        retail: channels['Retail'] || [],
                        va: channels['Virtual Account'] || []
                    };
                }
            } catch (error) {
                console.error('Failed to load payment channels:', error);
            } finally {
                this.loadingChannels = false;
            }
        },
        
        selectPaymentMethod(channel) {
            this.paymentData.payment_method = channel.code;
            this.paymentFee = parseInt(channel.fee || 0);
            this.calculateTotal();
        },
        
        calculateTotal() {
            if (!this.selectedProduct) {
                this.totalAmount = 0;
                return;
            }
            
            const price = parseInt(this.selectedProduct.selling_price);
            const discount = parseInt(this.discountAmount || 0);
            const fee = parseInt(this.paymentFee || 0);
            
            this.totalAmount = (price - discount) + fee;
        },
        
        async processPayment() {
    if (this.processingPayment) return;
    
    // ✅ Step 1: Validate product
    if (!this.selectedProduct) {
        this.showErrorMsg('Pilih produk terlebih dahulu!');
        return;
    }
    
    // ✅ Step 2: Validate customer data (non-voucher)
    if (!this.isVoucher) {
        if (!this.formData.userId || this.formData.userId.trim() === '') {
            this.showErrorMsg('Masukkan <?php echo e($config["id_label"] ?? "User ID"); ?> terlebih dahulu!');
            return;
        }
        
        <?php if(isset($config['show_zone']) && $config['show_zone']): ?>
        if (!this.formData.zoneId || this.formData.zoneId.trim() === '') {
            this.showErrorMsg('Masukkan <?php echo e($config["zone_label"] ?? "Zone ID"); ?> terlebih dahulu!');
            return;
        }
        <?php endif; ?>
    }
    
    // ✅ Step 3: Validate customer info
    if (!this.paymentData.customer_name || this.paymentData.customer_name.trim() === '') {
        this.showErrorMsg('Masukkan nama lengkap!');
        return;
    }
    
    if (!this.paymentData.customer_email || this.paymentData.customer_email.trim() === '') {
        this.showErrorMsg('Masukkan email!');
        return;
    }
    
    // ✅ Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(this.paymentData.customer_email)) {
        this.showErrorMsg('Format email tidak valid!');
        return;
    }
    
    // ✅ Step 4: Validate payment method
    if (!this.paymentData.payment_method) {
        this.showErrorMsg('Pilih metode pembayaran terlebih dahulu!');
        return;
    }
    
    this.processingPayment = true;
    
    try {
        const response = await fetch('/transactions/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                product_id: this.selectedProduct.id,
                customer_data: this.isVoucher ? 
                    'VOUCHER-' + Date.now() : 
                    this.formData.userId + (this.formData.zoneId ? '|' + this.formData.zoneId : ''),
                payment_method: this.paymentData.payment_method,
                customer_name: this.paymentData.customer_name.trim(),
                customer_email: this.paymentData.customer_email.trim(),
                customer_phone: this.paymentData.customer_phone.trim(),
                voucher_code: this.appliedVoucher ? this.appliedVoucher.code : '',
            })
        });
        
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.message || 'Payment creation failed');
        }
        
        const data = await response.json();
        
        if (data.success && data.data.invoice_number) {
            window.location.href = `/transactions/${data.data.invoice_number}/payment`;
        } else {
            throw new Error(data.message || 'Payment creation failed');
        }
        
    } catch (error) {
        console.error('Payment error:', error);
        this.showErrorMsg(error.message || 'Terjadi kesalahan. Silakan coba lagi.');
    } finally {
        this.processingPayment = false;
    }
},
        
        // ===== TRACK ORDER =====
        trackOrder() {
            if (!this.trackOrderId) {
                alert('Masukkan Order ID terlebih dahulu!');
                return;
            }
            window.location.href = '/track-order?order_id=' + this.trackOrderId;
        },
        
        async pasteInvoice() {
            try {
                const text = await navigator.clipboard.readText();
                this.trackOrderId = text;
            } catch (err) {
                console.error('Failed to read clipboard:', err);
            }
        }
    }
}
</script>

<!-- ✅ TOAST NOTIFICATIONS -->
<div x-show="showError" 
     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-[200] max-w-md"
     x-cloak>
    <div class="bg-red-500 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="fas fa-exclamation-circle text-xl"></i>
        </div>
        <div class="flex-1">
            <p class="font-bold text-sm mb-1">Error!</p>
            <p class="text-sm opacity-90" x-text="errorMessage"></p>
        </div>
        <button @click="showError = false" class="flex-shrink-0 hover:opacity-70 transition">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>

<div x-show="showSuccess" 
     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-[200] max-w-md"
     x-cloak>
    <div class="bg-green-500 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="fas fa-check-circle text-xl"></i>
        </div>
        <div class="flex-1">
            <p class="font-bold text-sm mb-1">Berhasil!</p>
            <p class="text-sm opacity-90" x-text="successMessage"></p>
        </div>
        <button @click="showSuccess = false" class="flex-shrink-0 hover:opacity-70 transition">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>

</body>
</html><?php /**PATH /home/instinct/Documents/belajar/php/ryll-topup/resources/views/products.blade.php ENDPATH**/ ?>