resources/views/customer-orders.blade.php

<x-app-layout>
    <div class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/10 to-blue-900/10 relative overflow-hidden">
        <!-- Floating Background Effects -->
        <div class="absolute inset-0">
            <div class="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
            <div class="absolute bottom-20 right-10 w-80 h-80 bg-gradient-to-r from-pink-500/10 to-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay:2s;"></div>
            <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-gradient-to-r from-cyan-500/15 to-blue-500/15 rounded-full blur-2xl animate-float"></div>
            <div class="absolute bottom-1/3 left-1/4 w-48 h-48 bg-gradient-to-r from-yellow-500/15 to-orange-500/15 rounded-full blur-2xl animate-float" style="animation-delay:3s;"></div>
        </div>

        <!-- Animated Particles -->
        <div class="absolute inset-0 pointer-events-none">
            @for ($i = 0; $i < 12; $i++)
                <div class="absolute w-1 h-1 bg-white/60 rounded-full animate-particle" 
                     style="left:{{ $i*8 }}%; animation-delay:{{ $i*0.5 }}s;"></div>
            @endfor
        </div>

        <div class="relative z-10 py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Header -->
                <div class="text-center mb-16">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-purple-500 to-blue-500 rounded-2xl mb-6 shadow-2xl animate-bounce-slow">
                        <i class="fas fa-history text-white text-3xl"></i>
                    </div>
                    <h1 class="text-5xl md:text-6xl font-black text-white mb-4 bg-gradient-to-r from-white to-purple-200 bg-clip-text text-transparent">
                        Order History
                    </h1>
                    <p class="text-xl text-white/80 max-w-2xl mx-auto">
                        Your gaming journey through time
                    </p>
                </div>

                @if($orders->isEmpty())
                    <!-- Empty State -->
                    <div class="max-w-2xl mx-auto">
                        <div class="glass-bg rounded-3xl p-12 text-center border border-white/10 hover:border-purple-500/30 transition-all duration-500">
                            <div class="w-24 h-24 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-6 border border-purple-500/30">
                                <i class="fas fa-shopping-bag text-4xl text-purple-400"></i>
                            </div>
                            <h3 class="text-3xl font-bold text-white mb-4">No Orders Yet</h3>
                            <p class="text-white/70 mb-8 text-lg">Your gaming adventure awaits!</p>
                            <a href="{{ route('categories') }}" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white rounded-2xl font-bold text-lg transition-all duration-300 shadow-2xl hover:shadow-purple-500/40 transform hover:scale-105">
                                <i class="fas fa-rocket mr-3"></i>Start Your Journey
                            </a>
                        </div>
                    </div>
                @else
                    <!-- Store-Style Filter Section -->
                    <div class="mb-16">
                        <div class="text-center mb-12">
                            <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full border border-blue-500/30 mb-6">
                                <i class="fas fa-filter text-blue-400 mr-2"></i>
                                <span class="text-blue-300 font-medium">Filter Orders</span>
                            </div>
                            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4 gradient-text">Find Your Orders</h2>
                            <p class="text-lg text-white/70">Click on categories to filter your order history</p>
                        </div>

                        <!-- Enhanced Category Selector -->
                        <div class="flex justify-center mb-12">
                            @php
                                // Initialize game stats first
                                $gameStats = [];
                                foreach ($orders as $order) {
                                    $items = json_decode($order->cart_data, true);
                                    if (is_array($items)) {
                                        foreach ($items as $item) {
                                            $product = \App\Models\Product::find($item['id'] ?? null);
                                            if ($product && $product->game) {
                                                $gameStats[$product->game] = ($gameStats[$product->game] ?? 0) + 1;
                                            }
                                        }
                                    }
                                }
                                
                                $totalCategories = count($gameStats) + 1; // +1 for "All Orders"
                            @endphp

                            <!-- Enhanced All Categories Card -->
                            <div class="enhanced-category-card group" data-filter="categories" onclick="showAllCategories()">
                                <!-- Dynamic Glow Effect -->
                                <div class="category-glow-bg"></div>
                                
                                <!-- Decorative Background Elements -->
                                <div class="category-bg-element-1 absolute top-4 right-4 w-20 h-20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                                <div class="category-bg-element-2 absolute bottom-4 left-4 w-16 h-16 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                                <div class="category-bg-element-3 absolute top-1/2 left-4 w-12 h-12 rounded-full blur-md group-hover:scale-110 transition-transform duration-600"></div>
                                
                                <!-- Content -->
                                <div class="category-content">
                                    <div class="category-icon-container">
                                        <div class="category-icon bg-gradient-to-r from-purple-600 to-blue-600">
                                            <i class="fas fa-th-large"></i>
                                        </div>
                                    </div>
                                    
                                    <h3 class="category-title">All Categories</h3>
                                    
                                    <div class="category-stats">
                                        <span class="category-stat-item">
                                            <i class="fas fa-th-large text-purple-400"></i>
                                            <span class="category-count" id="categories-count">{{ $totalCategories }}</span>
                                            <span class="category-badge">Categories</span>
                                        </span>
                                        <span class="category-stat-item">
                                            <i class="fas fa-star text-blue-400"></i>
                                            <span class="category-badge">Browse</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <!-- Quick Filters -->
                        <div class="flex flex-wrap justify-center gap-6 max-w-5xl mx-auto">
                            <div class="status-filter active" data-filter="recently" onclick="setQuickFilter('recently')">
                                <i class="fas fa-clock text-blue-400 mr-3"></i>
                                <span class="font-semibold">Recently</span>
                                <span class="status-count">(All Orders)</span>
                            </div>
                            <div class="status-filter" data-status="pending" onclick="setStatusFilter('pending')">
                                <i class="fas fa-hourglass-half text-amber-400 mr-3"></i>
                                <span class="font-semibold">Pending</span>
                                <span class="status-count">({{ $orders->where('status', 'pending')->count() }})</span>
                            </div>
                            <div class="status-filter" data-status="completed" onclick="setStatusFilter('completed')">
                                <i class="fas fa-check-circle text-emerald-400 mr-3"></i>
                                <span class="font-semibold">Completed</span>
                                <span class="status-count">({{ $orders->where('status', 'completed')->count() }})</span>
                            </div>
                            <div class="status-filter" data-status="cancelled" onclick="setStatusFilter('cancelled')">
                                <i class="fas fa-times-circle text-rose-400 mr-3"></i>
                                <span class="font-semibold">Cancelled</span>
                                <span class="status-count">({{ $orders->where('status', 'cancelled')->count() }})</span>
                            </div>
                        </div>
                    </div>

                    <!-- Orders Grid -->
                    <div id="ordersGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach ($orders as $index => $order)
                            @php
                                $items = json_decode($order->cart_data, true);
                                $orderDate = $order->created_at;
                                
                                // Get primary game
                                $primaryGame = '';
                                $gameColor = '#8b5cf6';
                                if (is_array($items) && count($items) > 0) {
                                    $gameProducts = [];
                                    foreach ($items as $item) {
                                        $product = \App\Models\Product::find($item['id'] ?? null);
                                        if ($product && $product->game) {
                                            $gameProducts[] = $product->game;
                                        }
                                    }
                                    if (!empty($gameProducts)) {
                                        $primaryGame = array_count_values($gameProducts);
                                        $primaryGame = array_key_first($primaryGame);
                                        
                                        // Set game colors
                                        $gameColors = [
                                            'Genshin' => '#f59e0b',
                                            'Starrail' => '#ec4899', 
                                            'WutheringWave' => '#06b6d4'
                                        ];
                                        $gameColor = $gameColors[$primaryGame] ?? '#8b5cf6';
                                    }
                                }
                                
                                $animationDelay = ($index % 9) * 0.1;
                            @endphp
                            
                            <div class="order-card animate-fade-in-up" 
                                 style="animation-delay: {{ $animationDelay }}s; --game-color: {{ $gameColor }};"
                                 data-game="{{ $primaryGame }}"
                                 data-status="{{ $order->status }}">
                                
                                <!-- Clean Card Design -->
                                <div class="glass-bg rounded-3xl p-6 border border-white/10 hover:border-purple-500/30 transition-all duration-500 group h-full flex flex-col">
                                    <!-- Header -->
                                    <div class="flex items-center justify-between mb-6">
                                        <div class="flex items-center space-x-4">
                                            <div class="w-16 h-16 rounded-2xl flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform duration-300"
                                                 style="background: linear-gradient(135deg, {{ $gameColor }}, {{ $gameColor }}dd);">
                                                <i class="fas fa-receipt text-white text-xl"></i>
                                            </div>
                                            <div>
                                                <h3 class="text-2xl font-bold text-white">
                                                    #{{ str_pad($order->id, 4, '0', STR_PAD_LEFT) }}
                                                </h3>
                                                <p class="text-white/70 text-base">{{ $order->created_at->format('M j, Y') }}</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Status Badge -->
                                        <div class="status-badge-small {{ $order->status === 'completed' ? 'status-completed' : ($order->status === 'cancelled' ? 'status-cancelled' : 'status-pending') }}">
                                            @if($order->status === 'completed')
                                                <i class="fas fa-check-circle mr-2"></i>Completed
                                            @elseif($order->status === 'cancelled')
                                                <i class="fas fa-times-circle mr-2"></i>Cancelled
                                            @else
                                                <i class="fas fa-hourglass-half mr-2"></i>Pending
                                            @endif
                                        </div>
                                    </div>
                                    
                                    <!-- Game Badge -->
                                    @if($primaryGame)
                                        <div class="game-badge-small mb-4">
                                            <i class="fas fa-gamepad mr-2"></i>{{ $primaryGame }}
                                        </div>
                                    @endif
                                    
                                    <!-- Customer Info -->
                                    <div class="customer-info-section bg-black/20 rounded-2xl p-4 mb-6 border border-white/10">
                                        <div class="space-y-3">
                                            <div class="flex items-center text-base text-white/90">
                                                <div class="customer-icon-bg w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center mr-3">
                                                    <i class="fas fa-user text-blue-400 text-sm"></i>
                                                </div>
                                                <span class="font-medium">{{ $order->customer_name }}</span>
                                            </div>
                                            <div class="flex items-center text-base text-white/90">
                                                <div class="phone-icon-bg w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center mr-3">
                                                    <i class="fas fa-phone text-green-400 text-sm"></i>
                                                </div>
                                                <span class="font-medium">{{ $order->phone }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Items Quantity -->
                                    @if (is_array($items) && count($items) > 0)
                                        @php
                                            $totalQuantity = 0;
                                            foreach ($items as $item) {
                                                $totalQuantity += $item['quantity'] ?? 1;
                                            }
                                        @endphp
                                        <div class="quantity-display flex items-center text-sm text-white/70 mb-4">
                                            <div class="quantity-icon-bg w-7 h-7 rounded-lg flex items-center justify-center mr-3">
                                                <i class="fas fa-boxes text-xs"></i>
                                            </div>
                                            <span class="font-medium">Quantity: <span class="quantity-number">{{ $totalQuantity }}</span></span>
                                        </div>
                                    @endif
                                    
                                    <!-- Amount -->
                                    <div class="mt-auto">
                                        <div class="text-2xl font-bold text-green-400 mb-2">
                                            ฿{{ number_format($order->total_amount ?? 0, 2) }}
                                        </div>
                                        <div class="text-white/60 text-xs mb-4">{{ $order->created_at->diffForHumans() }}</div>
                                        
                                        <!-- Simple Actions -->
                                        <div class="action-buttons-container flex gap-3">
                                            @if ($order->payment_slip_path)
                                                <button onclick="showPaymentSlip('{{ asset('storage/' . $order->payment_slip_path) }}')" 
                                                        class="action-btn-simple receipt-btn flex-1">
                                                    <i class="fas fa-receipt mr-2"></i>
                                                    <span>Receipt</span>
                                                </button>
                                            @endif
                                            <a href="{{ route('orders.show', $order->id) }}" 
                                               class="action-btn-simple details-btn flex-1">
                                                <i class="fas fa-info-circle mr-2"></i>
                                                <span>Details</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <!-- Loading Indicator -->
                    <div id="loadingIndicator" class="hidden text-center mt-12">
                        <div class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-600/20 to-blue-600/20 text-white rounded-2xl border border-purple-500/30">
                            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-white mr-3"></div>
                            <span class="font-semibold">Loading more orders...</span>
                        </div>
                    </div>
                    
                    <!-- End of Results -->
                    <div id="endOfResults" class="hidden text-center mt-12">
                        <div class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-gray-600/20 to-gray-700/20 text-white/70 rounded-2xl border border-gray-500/30">
                            <i class="fas fa-check-circle mr-3"></i>
                            <span class="font-semibold">All orders loaded</span>
                        </div>
                    </div>
                    


                    <!-- No Results -->
                    <div id="noResults" class="hidden text-center py-16">
                        <div class="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-search text-white/60 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-white mb-4">No Orders Found</h3>
                        <p class="text-white/70">Try selecting a different filter.</p>
                    </div>
                    
                    <!-- Continue Shopping -->
                    <div class="text-center mt-16">
                        <a href="{{ route('categories') }}" class="continue-shopping-btn">
                            <i class="fas fa-rocket mr-3"></i>Continue Your Adventure
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- All Categories Modal -->
    <div id="categoriesModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
        <div class="bg-black/90 backdrop-blur-xl border border-white/20 rounded-3xl max-w-6xl w-full max-h-[90vh] flex flex-col">
            <div class="flex items-center justify-between p-6 border-b border-white/10">
                <div>
                    <h3 class="text-3xl font-bold text-white mb-2">Browse All Categories</h3>
                    <p class="text-white/70">Select a game category to filter your orders</p>
                </div>
                <button onclick="closeCategoriesModal()" class="text-white/60 hover:text-white transition-colors">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
            
            <!-- Search Bar -->
            <div class="p-6 border-b border-white/10">
                <div class="relative max-w-md mx-auto">
                    <input type="text" id="categorySearch" placeholder="🔍 Search categories..." 
                           class="w-full bg-black/30 border border-white/20 rounded-2xl px-6 py-4 pl-12 text-white placeholder-white/50 focus:border-purple-500/50 focus:outline-none transition-colors">
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-white/50"></i>
                </div>
            </div>
            
            <div class="flex-1 overflow-y-auto p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="categoriesGrid">
                    <!-- All Orders Category -->
                    <div class="category-modal-card" data-category="all" onclick="selectCategory('all')">
                        <div class="category-modal-icon bg-gradient-to-r from-purple-600 to-blue-600">
                            <i class="fas fa-list text-3xl"></i>
                        </div>
                        <h4 class="category-modal-title">All Orders</h4>
                        <div class="category-modal-count">{{ $orders->count() }}</div>
                        <div class="category-modal-badge">Total Orders</div>
                    </div>
                    
                    @php
                        $allGameStats = [];
                        foreach ($orders as $order) {
                            $items = json_decode($order->cart_data, true);
                            if (is_array($items)) {
                                foreach ($items as $item) {
                                    $product = \App\Models\Product::find($item['id'] ?? null);
                                    if ($product && $product->game) {
                                        $allGameStats[$product->game] = ($allGameStats[$product->game] ?? 0) + 1;
                                    }
                                }
                            }
                        }
                        
                        $allGameConfigs = [
                            'Genshin' => ['icon' => 'fas fa-star', 'color' => 'from-yellow-400 to-orange-500', 'name' => 'Genshin Impact'],
                            'Starrail' => ['icon' => 'fas fa-rocket', 'color' => 'from-purple-500 to-pink-500', 'name' => 'Honkai: Star Rail'],
                            'WutheringWave' => ['icon' => 'fas fa-water', 'color' => 'from-cyan-400 to-blue-500', 'name' => 'Wuthering Waves']
                        ];
                        
                        // Add other games dynamically
                        foreach ($allGameStats as $game => $count) {
                            if (!isset($allGameConfigs[$game])) {
                                $allGameConfigs[$game] = [
                                    'icon' => 'fas fa-gamepad',
                                    'color' => 'from-indigo-500 to-purple-500',
                                    'name' => $game
                                ];
                            }
                        }
                    @endphp
                    
                    @foreach($allGameConfigs as $game => $config)
                        @if(isset($allGameStats[$game]) && $allGameStats[$game] > 0)
                            <div class="category-modal-card" data-category="{{ $game }}" onclick="selectCategory('{{ $game }}')">
                                <div class="category-modal-icon bg-gradient-to-r {{ $config['color'] }}">
                                    <i class="{{ $config['icon'] }} text-3xl"></i>
                                </div>
                                <h4 class="category-modal-title">{{ $config['name'] }}</h4>
                                <div class="category-modal-count">{{ $allGameStats[$game] }}</div>
                                <div class="category-modal-badge">Orders</div>
                            </div>
                        @endif
                    @endforeach
                </div>
                
                <!-- No Results -->
                <div id="categoryNoResults" class="hidden text-center py-12">
                    <div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-search text-white/60 text-2xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white mb-2">No categories found</h4>
                    <p class="text-white/70">Try a different search term.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Slip Modal -->
    <div id="paymentSlipModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
        <div class="bg-black/90 backdrop-blur-xl border border-white/20 rounded-3xl max-w-4xl w-full max-h-[90vh] flex flex-col">
            <div class="flex items-center justify-between p-6 border-b border-white/10">
                <h3 class="text-2xl font-bold text-white">Payment Receipt</h3>
                <button onclick="closePaymentSlip()" class="text-white/60 hover:text-white transition-colors">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
            
            <div class="flex-1 overflow-hidden p-6">
                <div class="flex items-center justify-center h-full">
                    <img id="paymentSlipImage" src="" alt="Payment slip" 
                         class="max-w-full max-h-full object-contain rounded-2xl shadow-2xl">
                </div>
            </div>
            
            <div class="flex justify-center space-x-4 p-6 border-t border-white/10">
                <button onclick="downloadPaymentSlip()" class="px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-xl font-semibold transition-all duration-300">
                    <i class="fas fa-download mr-2"></i>Download
                </button>
                <button onclick="closePaymentSlip()" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white rounded-xl font-semibold transition-all duration-300">
                    Close
                </button>
            </div>
        </div>
    </div>

    <style>
        /* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        @keyframes particle {
            0% { transform: translateY(100vh) scale(0); opacity: 0; }
            10% { transform: translateY(90vh) scale(1); opacity: 1; }
            90% { transform: translateY(10vh) scale(1); opacity: 1; }
            100% { transform: translateY(0vh) scale(0); opacity: 0; }
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes bounce-slow {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-particle { animation: particle 8s linear infinite; }
        .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
        .animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; }
        
        /* Glass Background */
        .glass-bg {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Let JavaScript handle order and filter card visibility */
        
        /* Enhanced Category Card - Matching Store Page Style */
        .enhanced-category-card {
            position: relative;
            width: 400px;
            height: 240px;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 24px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .enhanced-category-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.4);
        }

        /* Category-specific glass backgrounds */
        .enhanced-category-card[data-category="Genshin"] {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(245, 158, 11, 0.05));
            border-color: rgba(251, 191, 36, 0.2);
        }

        .enhanced-category-card[data-category="Genshin"]:hover {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
            border-color: rgba(251, 191, 36, 0.4);
        }

        .enhanced-category-card[data-category="Starrail"] {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(236, 72, 153, 0.05));
            border-color: rgba(168, 85, 247, 0.2);
        }

        .enhanced-category-card[data-category="Starrail"]:hover {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1));
            border-color: rgba(168, 85, 247, 0.4);
        }

        .enhanced-category-card[data-category="WutheringWave"] {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(59, 130, 246, 0.05));
            border-color: rgba(6, 182, 212, 0.2);
        }

        .enhanced-category-card[data-category="WutheringWave"]:hover {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
            border-color: rgba(6, 182, 212, 0.4);
        }

        /* Dynamic Glow Background */
        .category-glow-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.05));
            border-radius: 20px;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .enhanced-category-card:hover .category-glow-bg {
            opacity: 1;
        }

        /* Dynamic Background Elements */
        .category-bg-element-1 {
            background: linear-gradient(45deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
        }

        .category-bg-element-2 {
            background: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
        }

        .category-bg-element-3 {
            background: linear-gradient(45deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
        }

        /* Category-specific glow colors */
        .enhanced-category-card[data-category="Genshin"] .category-glow-bg {
            background: linear-gradient(45deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.08));
        }

        .enhanced-category-card[data-category="Genshin"] .category-bg-element-1 {
            background: linear-gradient(45deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
        }

        .enhanced-category-card[data-category="Genshin"] .category-bg-element-2 {
            background: linear-gradient(45deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
        }

        .enhanced-category-card[data-category="Genshin"] .category-bg-element-3 {
            background: linear-gradient(45deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15));
        }

        .enhanced-category-card[data-category="Starrail"] .category-glow-bg {
            background: linear-gradient(45deg, rgba(168, 85, 247, 0.08), rgba(236, 72, 153, 0.08));
        }

        .enhanced-category-card[data-category="Starrail"] .category-bg-element-1 {
            background: linear-gradient(45deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
        }

        .enhanced-category-card[data-category="Starrail"] .category-bg-element-2 {
            background: linear-gradient(45deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.2));
        }

        .enhanced-category-card[data-category="Starrail"] .category-bg-element-3 {
            background: linear-gradient(45deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15));
        }

        .enhanced-category-card[data-category="WutheringWave"] .category-glow-bg {
            background: linear-gradient(45deg, rgba(6, 182, 212, 0.08), rgba(59, 130, 246, 0.08));
        }

        .enhanced-category-card[data-category="WutheringWave"] .category-bg-element-1 {
            background: linear-gradient(45deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
        }

        .enhanced-category-card[data-category="WutheringWave"] .category-bg-element-2 {
            background: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
        }

        .enhanced-category-card[data-category="WutheringWave"] .category-bg-element-3 {
            background: linear-gradient(45deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.15));
        }

        /* Enhanced hover shadows for each category */
        .enhanced-category-card[data-category="Genshin"]:hover {
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 50px rgba(251, 191, 36, 0.2);
            border-color: rgba(251, 191, 36, 0.3);
        }

        .enhanced-category-card[data-category="Starrail"]:hover {
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 50px rgba(168, 85, 247, 0.2);
            border-color: rgba(168, 85, 247, 0.3);
        }

        .enhanced-category-card[data-category="WutheringWave"]:hover {
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 50px rgba(6, 182, 212, 0.2);
            border-color: rgba(6, 182, 212, 0.3);
        }

        /* Enhanced icon shadow for categories */
        .enhanced-category-card[data-category="Genshin"]:hover .category-icon {
            box-shadow: 0 25px 50px rgba(251, 191, 36, 0.4);
        }

        .enhanced-category-card[data-category="Starrail"]:hover .category-icon {
            box-shadow: 0 25px 50px rgba(168, 85, 247, 0.4);
        }

        .enhanced-category-card[data-category="WutheringWave"]:hover .category-icon {
            box-shadow: 0 25px 50px rgba(6, 182, 212, 0.4);
        }



        /* Content - Store Page Style */
        .category-content {
            position: relative;
            z-index: 10;
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .category-icon-container {
            position: relative;
            margin-bottom: 20px;
        }

        .category-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            color: white;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
            transition: all 0.5s ease;
        }

        .category-icon i {
            font-size: 2.5rem;
            transition: all 0.3s ease;
        }

        .enhanced-category-card:hover .category-icon {
            transform: scale(1.1) rotate(6deg);
            box-shadow: 0 25px 50px rgba(139, 92, 246, 0.4);
        }

        .enhanced-category-card:hover .category-icon i {
            transform: scale(1.1);
        }

        .category-title {
            color: white;
            font-size: 1.875rem;
            font-weight: 700;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }

        .enhanced-category-card:hover .category-title {
            color: rgba(139, 92, 246, 0.9);
        }

        .category-stats {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            text-sm: true;
            color: rgba(255, 255, 255, 0.6);
        }

        .category-stat-item {
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.2);
            padding: 8px 12px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .enhanced-category-card:hover .category-stat-item {
            background: rgba(139, 92, 246, 0.2);
            color: rgba(255, 255, 255, 0.9);
        }

        .category-count {
            color: #34d399;
            font-weight: 600;
            margin-left: 8px;
        }

        .category-badge {
            color: rgba(255, 255, 255, 0.6);
            font-weight: 600;
            margin-left: 8px;
        }



        /* Responsive Design */
        @media (max-width: 768px) {
            .enhanced-category-card {
                width: 280px;
                height: 180px;
            }
            
            .category-icon {
                width: 60px;
                height: 60px;
            }
            
            .category-title {
                font-size: 20px;
            }
        }
        
        /* Status Filters */
        .status-filter {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 16px 24px;
            color: white;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 16px;
            min-width: 160px;
            justify-content: center;
        }
        
        .status-filter:hover, .status-filter.active {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-4px) scale(1.05);
            border-color: rgba(139, 92, 246, 0.5);
            box-shadow: 0 15px 30px rgba(139, 92, 246, 0.2);
        }
        
        .status-filter.active {
            background: rgba(139, 92, 246, 0.15);
            border-color: rgba(139, 92, 246, 0.6);
        }
        
        .status-count {
            color: rgba(255, 255, 255, 0.6);
            margin-left: 8px;
            font-weight: 500;
        }
        
        /* Order Cards */
        .order-card {
            opacity: 0;
        }
        
        .order-card.show {
            opacity: 1;
        }

        /* Game-specific order card backgrounds */
        .order-card[data-game="Genshin"] .glass-bg {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(245, 158, 11, 0.05));
            border-color: rgba(251, 191, 36, 0.15);
        }

        .order-card[data-game="Genshin"] .glass-bg:hover {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
            border-color: rgba(251, 191, 36, 0.3);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(251, 191, 36, 0.15);
        }

        .order-card[data-game="Starrail"] .glass-bg {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(236, 72, 153, 0.05));
            border-color: rgba(168, 85, 247, 0.15);
        }

        .order-card[data-game="Starrail"] .glass-bg:hover {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1));
            border-color: rgba(168, 85, 247, 0.3);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.15);
        }

        .order-card[data-game="WutheringWave"] .glass-bg {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(59, 130, 246, 0.05));
            border-color: rgba(6, 182, 212, 0.15);
        }

        .order-card[data-game="WutheringWave"] .glass-bg:hover {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
            border-color: rgba(6, 182, 212, 0.3);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(6, 182, 212, 0.15);
        }

        /* Default order cards (no game or unknown game) */
        .order-card[data-game=""] .glass-bg,
        .order-card:not([data-game]) .glass-bg {
            background: rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.1);
        }

        .order-card[data-game=""] .glass-bg:hover,
        .order-card:not([data-game]) .glass-bg:hover {
            background: rgba(0, 0, 0, 0.5);
            border-color: rgba(139, 92, 246, 0.3);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(139, 92, 246, 0.15);
        }
        
        /* Status Badges */
        .status-badge-small {
            padding: 10px 16px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .status-completed {
            background: rgba(52, 211, 153, 0.2);
            color: #34d399;
            border: 2px solid rgba(52, 211, 153, 0.4);
            box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
        }
        
        .status-pending {
            background: rgba(251, 191, 36, 0.2);
            color: #fbbf24;
            border: 2px solid rgba(251, 191, 36, 0.4);
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
        }
        
        .status-cancelled {
            background: rgba(248, 113, 113, 0.2);
            color: #f87171;
            border: 2px solid rgba(248, 113, 113, 0.4);
            box-shadow: 0 4px 12px rgba(248, 113, 113, 0.2);
        }
        
        .game-badge-small {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.15);
            border: 2px solid rgba(255, 255, 255, 0.25);
            border-radius: 16px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* Game-specific badge colors */
        .order-card[data-game="Genshin"] .game-badge-small {
            background: rgba(251, 191, 36, 0.2);
            border-color: rgba(251, 191, 36, 0.4);
            color: #fbbf24;
        }

        .order-card[data-game="Starrail"] .game-badge-small {
            background: rgba(168, 85, 247, 0.2);
            border-color: rgba(168, 85, 247, 0.4);
            color: #a855f7;
        }

        .order-card[data-game="WutheringWave"] .game-badge-small {
            background: rgba(6, 182, 212, 0.2);
            border-color: rgba(6, 182, 212, 0.4);
            color: #06b6d4;
        }

        /* Game-specific customer info section */
        .order-card[data-game="Genshin"] .customer-info-section {
            background: rgba(251, 191, 36, 0.05);
            border-color: rgba(251, 191, 36, 0.1);
        }

        .order-card[data-game="Genshin"] .customer-icon-bg {
            background: rgba(251, 191, 36, 0.2);
        }

        .order-card[data-game="Genshin"] .customer-icon-bg i {
            color: #fbbf24;
        }

        .order-card[data-game="Genshin"] .phone-icon-bg {
            background: rgba(245, 158, 11, 0.2);
        }

        .order-card[data-game="Genshin"] .phone-icon-bg i {
            color: #f59e0b;
        }

        .order-card[data-game="Starrail"] .customer-info-section {
            background: rgba(168, 85, 247, 0.05);
            border-color: rgba(168, 85, 247, 0.1);
        }

        .order-card[data-game="Starrail"] .customer-icon-bg {
            background: rgba(168, 85, 247, 0.2);
        }

        .order-card[data-game="Starrail"] .customer-icon-bg i {
            color: #a855f7;
        }

        .order-card[data-game="Starrail"] .phone-icon-bg {
            background: rgba(236, 72, 153, 0.2);
        }

        .order-card[data-game="Starrail"] .phone-icon-bg i {
            color: #ec4899;
        }

        .order-card[data-game="WutheringWave"] .customer-info-section {
            background: rgba(6, 182, 212, 0.05);
            border-color: rgba(6, 182, 212, 0.1);
        }

        .order-card[data-game="WutheringWave"] .customer-icon-bg {
            background: rgba(6, 182, 212, 0.2);
        }

        .order-card[data-game="WutheringWave"] .customer-icon-bg i {
            color: #06b6d4;
        }

        .order-card[data-game="WutheringWave"] .phone-icon-bg {
            background: rgba(59, 130, 246, 0.2);
        }

        .order-card[data-game="WutheringWave"] .phone-icon-bg i {
            color: #3b82f6;
        }

        /* Enhanced Quantity Display */
        .quantity-display {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 8px 12px;
            transition: all 0.3s ease;
        }

        .quantity-icon-bg {
            background: rgba(139, 92, 246, 0.2);
            transition: all 0.3s ease;
        }

        .quantity-icon-bg i {
            color: #8b5cf6;
        }

        .quantity-number {
            color: #34d399;
            font-weight: 700;
        }

        /* Game-specific quantity styling */
        .order-card[data-game="Genshin"] .quantity-icon-bg {
            background: rgba(251, 191, 36, 0.2);
        }

        .order-card[data-game="Genshin"] .quantity-icon-bg i {
            color: #fbbf24;
        }

        .order-card[data-game="Starrail"] .quantity-icon-bg {
            background: rgba(168, 85, 247, 0.2);
        }

        .order-card[data-game="Starrail"] .quantity-icon-bg i {
            color: #a855f7;
        }

        .order-card[data-game="WutheringWave"] .quantity-icon-bg {
            background: rgba(6, 182, 212, 0.2);
        }

        .order-card[data-game="WutheringWave"] .quantity-icon-bg i {
            color: #06b6d4;
        }

        /* Modern Action Buttons */
        .action-buttons-container {
            margin-top: 16px;
        }

        .action-btn-modern {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            color: white;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            min-height: 60px;
        }



        .action-btn-modern:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
        }

        .btn-icon-wrapper {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            transition: all 0.3s ease;
        }

        .btn-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .btn-label {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 2px;
        }

        .btn-sublabel {
            font-size: 11px;
            opacity: 0.7;
            line-height: 1;
        }

        .btn-arrow {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.6;
            transition: all 0.3s ease;
        }

        .action-btn-modern:hover .btn-arrow {
            opacity: 1;
        }

        /* Receipt Button Styling */
        .receipt-btn .btn-icon-wrapper {
            background: rgba(34, 197, 94, 0.2);
        }

        .receipt-btn .btn-icon-wrapper i {
            color: #22c55e;
        }

        .receipt-btn:hover .btn-icon-wrapper {
            background: rgba(34, 197, 94, 0.3);
        }

        /* Details Button Styling */
        .details-btn .btn-icon-wrapper {
            background: rgba(59, 130, 246, 0.2);
        }

        .details-btn .btn-icon-wrapper i {
            color: #3b82f6;
        }

        .details-btn:hover .btn-icon-wrapper {
            background: rgba(59, 130, 246, 0.3);
        }

        /* Game-specific button styling */
        .order-card[data-game="Genshin"] .details-btn .btn-icon-wrapper {
            background: rgba(251, 191, 36, 0.2);
        }

        .order-card[data-game="Genshin"] .details-btn .btn-icon-wrapper i {
            color: #fbbf24;
        }

        .order-card[data-game="Starrail"] .details-btn .btn-icon-wrapper {
            background: rgba(168, 85, 247, 0.2);
        }

        .order-card[data-game="Starrail"] .details-btn .btn-icon-wrapper i {
            color: #a855f7;
        }

        .order-card[data-game="WutheringWave"] .details-btn .btn-icon-wrapper {
            background: rgba(6, 182, 212, 0.2);
        }

        .order-card[data-game="WutheringWave"] .details-btn .btn-icon-wrapper i {
            color: #06b6d4;
        }

        /* Beautiful Action Buttons */
        .action-buttons-container {
            margin-top: 16px;
        }

        .action-btn-simple {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 18px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            color: white;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 14px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .action-btn-simple::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .action-btn-simple:hover::before {
            opacity: 1;
        }

        .action-btn-simple:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .action-btn-simple i {
            transition: all 0.3s ease;
        }

        .action-btn-simple:hover i {
            transform: scale(1.1);
        }

        /* Receipt Button */
        .receipt-btn {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
            border-color: rgba(34, 197, 94, 0.4);
            box-shadow: 0 4px 15px rgba(34, 197, 94, 0.1);
        }

        .receipt-btn i {
            color: #10b981;
            text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
        }

        .receipt-btn:hover {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.15));
            border-color: rgba(34, 197, 94, 0.6);
            box-shadow: 0 8px 25px rgba(34, 197, 94, 0.2);
        }

        /* Details Button */
        .details-btn {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
            border-color: rgba(59, 130, 246, 0.4);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
        }

        .details-btn i {
            color: #3b82f6;
            text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        }

        .details-btn:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.15));
            border-color: rgba(59, 130, 246, 0.6);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
        }

        /* Game-specific details button */
        .order-card[data-game="Genshin"] .details-btn {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
            border-color: rgba(251, 191, 36, 0.4);
            box-shadow: 0 4px 15px rgba(251, 191, 36, 0.1);
        }

        .order-card[data-game="Genshin"] .details-btn i {
            color: #fbbf24;
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        }

        .order-card[data-game="Genshin"] .details-btn:hover {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.15));
            border-color: rgba(251, 191, 36, 0.6);
            box-shadow: 0 8px 25px rgba(251, 191, 36, 0.2);
        }

        .order-card[data-game="Starrail"] .details-btn {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.1));
            border-color: rgba(168, 85, 247, 0.4);
            box-shadow: 0 4px 15px rgba(168, 85, 247, 0.1);
        }

        .order-card[data-game="Starrail"] .details-btn i {
            color: #a855f7;
            text-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
        }

        .order-card[data-game="Starrail"] .details-btn:hover {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(147, 51, 234, 0.15));
            border-color: rgba(168, 85, 247, 0.6);
            box-shadow: 0 8px 25px rgba(168, 85, 247, 0.2);
        }

        .order-card[data-game="WutheringWave"] .details-btn {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(14, 165, 233, 0.1));
            border-color: rgba(6, 182, 212, 0.4);
            box-shadow: 0 4px 15px rgba(6, 182, 212, 0.1);
        }

        .order-card[data-game="WutheringWave"] .details-btn i {
            color: #06b6d4;
            text-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
        }

        .order-card[data-game="WutheringWave"] .details-btn:hover {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(14, 165, 233, 0.15));
            border-color: rgba(6, 182, 212, 0.6);
            box-shadow: 0 8px 25px rgba(6, 182, 212, 0.2);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .action-buttons-container {
                flex-direction: column;
                gap: 8px;
            }
            
            .action-btn-simple {
                padding: 8px 12px;
                font-size: 13px;
            }
        }
        
        .action-btn-small {
            padding: 12px 20px;
            border-radius: 16px;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            color: white;
            border: 2px solid transparent;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .action-btn-small:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .continue-shopping-btn {
            display: inline-flex;
            align-items: center;
            padding: 16px 32px;
            background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
            color: white;
            border-radius: 25px;
            font-weight: 700;
            font-size: 18px;
            text-decoration: none;
            box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
            transition: all 0.3s ease;
        }
        
        .continue-shopping-btn:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 25px 50px rgba(139, 92, 246, 0.4);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        /* Categories Modal */
        .category-modal-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.15);
            border-radius: 24px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform: scale(0.98);
        }
        
        .category-modal-card:hover {
            transform: scale(1.05) translateY(-8px);
            border-color: rgba(139, 92, 246, 0.6);
            box-shadow: 0 20px 40px rgba(139, 92, 246, 0.25);
        }
        
        .category-modal-icon {
            width: 70px;
            height: 70px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            color: white;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .category-modal-title {
            color: white;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .category-modal-count {
            color: #34d399;
            font-size: 28px;
            font-weight: 900;
            margin-bottom: 4px;
        }
        
        .category-modal-badge {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 600;
        }
    </style>

    <script>
        let currentFilter = 'recently';
        let currentStatus = '';

        // Category configuration system
        const categoryConfigs = {
            'all': {
                icon: 'fas fa-th-large',
                color: 'from-purple-600 to-blue-600',
                name: 'All Categories',
                badge: 'Browse'
            },
            'recently': {
                icon: 'fas fa-th-large',
                color: 'from-purple-600 to-blue-600',
                name: 'All Categories',
                badge: 'Browse'
            },
            'categories': {
                icon: 'fas fa-th-large',
                color: 'from-purple-600 to-blue-600',
                name: 'All Categories',
                badge: 'Browse'
            },
            'Genshin': {
                icon: 'fas fa-star',
                color: 'from-yellow-400 to-orange-500',
                name: 'Genshin Impact',
                badge: 'Orders'
            },
            'Starrail': {
                icon: 'fas fa-rocket',
                color: 'from-purple-500 to-pink-500',
                name: 'Honkai: Star Rail',
                badge: 'Orders'
            },
            'WutheringWave': {
                icon: 'fas fa-water',
                color: 'from-cyan-400 to-blue-500',
                name: 'Wuthering Waves',
                badge: 'Orders'
            }
        };

        // Fallback configuration for unknown categories
        function getCategoryConfig(categoryKey) {
            if (categoryConfigs[categoryKey]) {
                return categoryConfigs[categoryKey];
            }
            
            // Generate fallback config for unknown games
            const colorIndex = Math.abs(categoryKey.split('').reduce((a, b) => a + b.charCodeAt(0), 0)) % 6;
            const colors = [
                'from-indigo-500 to-purple-500',
                'from-emerald-500 to-teal-500',
                'from-rose-500 to-pink-500',
                'from-amber-500 to-orange-500',
                'from-violet-500 to-purple-500',
                'from-sky-500 to-blue-500'
            ];
            
            return {
                icon: 'fas fa-gamepad',
                color: colors[colorIndex],
                name: categoryKey,
                badge: 'Orders'
            };
        }

        // Button update functionality
        function updateCategoryButton(categoryKey) {
            console.log('updateCategoryButton called with:', categoryKey);
            const categoryButton = document.querySelector('[data-filter="categories"]');
            if (!categoryButton) {
                console.log('Category button not found!');
                return;
            }

            const config = getCategoryConfig(categoryKey);
            const count = getCategoryOrderCount(categoryKey);
            console.log('Config:', config, 'Count:', count);

            // Update icon
            const iconElement = categoryButton.querySelector('.category-icon i');
            if (iconElement) {
                iconElement.className = config.icon + ' text-3xl';
                console.log('Updated icon to:', config.icon);
            }

            // Update icon background color
            const iconContainer = categoryButton.querySelector('.category-icon');
            if (iconContainer) {
                iconContainer.className = `category-icon bg-gradient-to-r ${config.color}`;
            }

            // Update title
            const titleElement = categoryButton.querySelector('.category-title');
            if (titleElement) {
                titleElement.textContent = config.name;
            }

            // Update count
            const countElement = categoryButton.querySelector('.category-count');
            if (countElement) {
                countElement.textContent = count;
            }

            // Update badge
            const badgeElement = categoryButton.querySelector('.category-badge');
            if (badgeElement) {
                badgeElement.textContent = config.badge;
            }

            // Update subtitle based on category
            const subtitleElement = categoryButton.querySelector('.category-subtitle');
            if (subtitleElement) {
                if (categoryKey === 'all' || categoryKey === 'recently' || categoryKey === 'categories') {
                    subtitleElement.textContent = 'Browse all game categories';
                } else {
                    subtitleElement.textContent = `Filter by ${config.name}`;
                }
            }
        }

        // Button update functionality
        function updateCategoryButton(categoryKey) {
            const categoryButton = document.querySelector('[data-filter="categories"]');
            if (!categoryButton) return;

            const config = getCategoryConfig(categoryKey);
            const count = getCategoryOrderCount(categoryKey);

            // Update data-category attribute for glow effects
            if (categoryKey === 'all' || categoryKey === 'recently' || categoryKey === 'categories') {
                categoryButton.removeAttribute('data-category');
            } else {
                categoryButton.setAttribute('data-category', categoryKey);
            }

            // Update icon
            const iconElement = categoryButton.querySelector('.category-icon i');
            if (iconElement) {
                iconElement.className = config.icon;
            }

            // Update icon background color
            const iconContainer = categoryButton.querySelector('.category-icon');
            if (iconContainer) {
                iconContainer.className = `category-icon bg-gradient-to-r ${config.color}`;
            }

            // Update title
            const titleElement = categoryButton.querySelector('.category-title');
            if (titleElement) {
                titleElement.textContent = config.name;
            }

            // Update count
            const countElement = categoryButton.querySelector('.category-count');
            if (countElement) {
                countElement.textContent = count;
            }

            // Update stat item icon color to match category
            const statIcon = categoryButton.querySelector('.category-stat-item i');
            if (statIcon && categoryKey !== 'all' && categoryKey !== 'recently' && categoryKey !== 'categories') {
                const colorMap = {
                    'Genshin': 'text-yellow-400',
                    'Starrail': 'text-purple-400', 
                    'WutheringWave': 'text-cyan-400'
                };
                statIcon.className = `${config.icon} ${colorMap[categoryKey] || 'text-purple-400'}`;
            }
        }

        // Calculate order count for a category
        function getCategoryOrderCount(categoryKey) {
            // Handle "all categories" cases
            if (categoryKey === 'all' || categoryKey === 'recently' || categoryKey === 'categories') {
                const totalCategories = new Set();
                document.querySelectorAll('.order-card').forEach(card => {
                    const cardGame = card.dataset.game;
                    if (cardGame && cardGame.trim() !== '') {
                        totalCategories.add(cardGame);
                    }
                });
                return totalCategories.size + 1; // +1 for "All Orders" option
            }

            // Count orders for specific category
            const orderCards = document.querySelectorAll('.order-card');
            let count = 0;
            
            orderCards.forEach(card => {
                const cardGame = card.dataset.game;
                if (cardGame === categoryKey) {
                    count++;
                }
            });

            // Handle zero count gracefully
            return Math.max(0, count);
        }

        // Get total order count for display
        function getTotalOrderCount() {
            return document.querySelectorAll('.order-card').length;
        }

        function setFilter(filter) {
            currentFilter = filter;
            
            // Update category button for any filter change
            updateCategoryButton(filter);
            
            // Reset and filter orders
            resetOrdersView();
        }

        function setQuickFilter(filter) {
            currentFilter = filter;
            currentStatus = ''; // Clear status filter
            
            // Update active filter
            document.querySelectorAll('.status-filter').forEach(filter => {
                filter.classList.remove('active');
            });
            document.querySelector(`[data-filter="${filter}"]`).classList.add('active');
            
            // Reset category button to "All Categories" when recently is selected
            if (filter === 'recently') {
                updateCategoryButton('all');
            }
            
            // Reset and filter orders
            resetOrdersView();
        }

        function setStatusFilter(status) {
            // Toggle status filter
            if (currentStatus === status) {
                currentStatus = '';
                currentFilter = 'recently'; // Reset to recently
                document.querySelectorAll('.status-filter').forEach(filter => {
                    filter.classList.remove('active');
                });
                document.querySelector(`[data-filter="recently"]`).classList.add('active');
            } else {
                currentStatus = status;
                currentFilter = ''; // Clear game filter
                document.querySelectorAll('.status-filter').forEach(filter => {
                    filter.classList.remove('active');
                });
                document.querySelector(`[data-status="${status}"]`).classList.add('active');
            }
            
            // Reset and filter orders
            resetOrdersView();
        }

        function showAllCategories() {
            const modal = document.getElementById('categoriesModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeCategoriesModal() {
            const modal = document.getElementById('categoriesModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        function selectCategory(category) {
            closeCategoriesModal();
            setFilter(category);
            updateCategoryButton(category);
        }



        // Payment slip modal functions
        function showPaymentSlip(imageSrc) {
            const modal = document.getElementById('paymentSlipModal');
            const image = document.getElementById('paymentSlipImage');
            image.src = imageSrc;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closePaymentSlip() {
            const modal = document.getElementById('paymentSlipModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        function downloadPaymentSlip() {
            const image = document.getElementById('paymentSlipImage');
            const link = document.createElement('a');
            link.href = image.src;
            link.download = 'payment-receipt.jpg';
            link.click();
        }

        // Modal event listeners
        document.getElementById('paymentSlipModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closePaymentSlip();
            }
        });

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closePaymentSlip();
            }
        });

        // Category search functionality
        function searchCategories() {
            const searchTerm = document.getElementById('categorySearch').value.toLowerCase();
            const categoryCards = document.querySelectorAll('.category-modal-card');
            const noResults = document.getElementById('categoryNoResults');
            const categoriesGrid = document.getElementById('categoriesGrid');
            let visibleCount = 0;

            categoryCards.forEach(card => {
                const categoryName = card.querySelector('.category-modal-title').textContent.toLowerCase();
                
                if (searchTerm === '' || categoryName.includes(searchTerm)) {
                    card.style.display = '';
                    visibleCount++;
                } else {
                    card.style.display = 'none';
                }
            });

            // Show/hide no results
            if (visibleCount === 0) {
                noResults.classList.remove('hidden');
                categoriesGrid.classList.add('opacity-50');
            } else {
                noResults.classList.add('hidden');
                categoriesGrid.classList.remove('opacity-50');
            }
        }

        // Infinite Scroll Variables
        let visibleOrdersCount = 3; // Start with 3 orders
        let isLoading = false;
        let allOrdersLoaded = false;

        function showOrdersUpTo(count) {
            console.log('showOrdersUpTo called with count:', count);
            
            const orderCards = document.querySelectorAll('.order-card');
            const loadingIndicator = document.getElementById('loadingIndicator');
            const endOfResults = document.getElementById('endOfResults');
            
            console.log('Total order cards found:', orderCards.length);
            
            let visibleCount = 0;
            let filteredCards = [];
            
            // First, collect all cards that match current filters
            orderCards.forEach(card => {
                const cardGame = card.dataset.game;
                const cardStatus = card.dataset.status;
                
                let showCard = true;
                
                // Filter by game or recently
                if (currentFilter === 'recently' || currentFilter === 'all') {
                    showCard = true;
                } else if (currentFilter !== '' && cardGame !== currentFilter) {
                    showCard = false;
                }
                
                // Filter by status
                if (currentStatus !== '' && cardStatus !== currentStatus) {
                    showCard = false;
                }
                
                if (showCard) {
                    filteredCards.push(card);
                }
            });
            
            console.log('Filtered cards count:', filteredCards.length);
            
            // Hide all cards first
            orderCards.forEach(card => {
                card.style.display = 'none';
                card.classList.remove('show');
            });
            
            // Show only the first 'count' filtered cards
            filteredCards.forEach((card, index) => {
                if (index < count) {
                    card.style.display = '';
                    card.classList.add('show');
                    visibleCount++;
                    
                    // Stagger animation
                    setTimeout(() => {
                        card.style.animationDelay = (index * 0.1) + 's';
                    }, 50);
                }
            });
            
            console.log('Visible cards after update:', visibleCount);
            
            // Update loading states
            if (count >= filteredCards.length) {
                allOrdersLoaded = true;
                loadingIndicator.classList.add('hidden');
                if (filteredCards.length > 3) {
                    endOfResults.classList.remove('hidden');
                } else {
                    endOfResults.classList.add('hidden');
                }
                console.log('All orders loaded - showing', visibleCount, 'of', filteredCards.length);
            } else {
                allOrdersLoaded = false;
                loadingIndicator.classList.add('hidden');
                endOfResults.classList.add('hidden');
                console.log('More orders available - showing', visibleCount, 'of', filteredCards.length);
            }
            
            // Handle no results
            const noResults = document.getElementById('noResults');
            const ordersGrid = document.getElementById('ordersGrid');
            
            if (visibleCount === 0) {
                noResults.classList.remove('hidden');
                ordersGrid.classList.add('opacity-50');
            } else {
                noResults.classList.add('hidden');
                ordersGrid.classList.remove('opacity-50');
            }
            
            return filteredCards.length;
        }

        function loadMoreOrders() {
            console.log('loadMoreOrders called', { isLoading, allOrdersLoaded, visibleOrdersCount });
            
            if (isLoading || allOrdersLoaded) return;
            
            isLoading = true;
            const loadingIndicator = document.getElementById('loadingIndicator');
            loadingIndicator.classList.remove('hidden');
            
            console.log('Loading indicator shown, will load 3 more orders...');
            
            // Simulate loading delay for better UX
            setTimeout(() => {
                visibleOrdersCount += 3; // Load 3 more orders
                console.log('New visible count:', visibleOrdersCount);
                showOrdersUpTo(visibleOrdersCount);
                isLoading = false;
            }, 800);
        }

        function resetOrdersView() {
            console.log('Resetting orders view...');
            visibleOrdersCount = 3;
            allOrdersLoaded = false;
            isLoading = false;
            
            const loadingIndicator = document.getElementById('loadingIndicator');
            const endOfResults = document.getElementById('endOfResults');
            
            loadingIndicator.classList.add('hidden');
            endOfResults.classList.add('hidden');
            
            // First hide all orders
            const allOrderCards = document.querySelectorAll('.order-card');
            allOrderCards.forEach(card => {
                card.style.display = 'none';
                card.classList.remove('show');
            });
            
            console.log('All orders hidden, now showing first', visibleOrdersCount);
            showOrdersUpTo(visibleOrdersCount);
        }

        // Override the existing filterOrders function
        function filterOrders() {
            resetOrdersView();
        }

        // Enhanced category card is always visible, no need for filter card functions

        // Infinite scroll event listener (only for orders)
        function handleScroll() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const windowHeight = window.innerHeight;
            const documentHeight = document.documentElement.scrollHeight;
            const distanceFromBottom = documentHeight - (scrollTop + windowHeight);
            
            // Handle orders infinite scroll only
            // Debug scroll position for orders
            if (distanceFromBottom < 500) { // Only log when close to bottom
                console.log('Orders scroll debug:', {
                    scrollTop,
                    windowHeight,
                    documentHeight,
                    distanceFromBottom,
                    isLoading,
                    allOrdersLoaded,
                    visibleOrdersCount
                });
            }
            
            if (!isLoading && !allOrdersLoaded && distanceFromBottom <= 200) {
                console.log('Triggering load more orders...');
                loadMoreOrders();
            }
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, initializing enhanced category card and orders...');
            
            // Initialize category button to default state
            updateCategoryButton('all');
            
            // Initial load with 3 orders
            resetOrdersView();
            
            // Add scroll event listener for infinite scroll
            window.addEventListener('scroll', handleScroll);
            console.log('Scroll listener added');
            
            // Debug: Check how many orders are in DOM
            const allOrders = document.querySelectorAll('.order-card');
            console.log('Total orders in DOM:', allOrders.length);
            
            // Add search event listener
            document.getElementById('categorySearch').addEventListener('input', searchCategories);
            
            // Close modal when clicking outside
            document.getElementById('categoriesModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeCategoriesModal();
                }
            });
            
            console.log('Enhanced category search functionality initialized');
        });
    </script>
</x-app-layout>