<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match Metrix - Admin Dashboard</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800;900&display=swap" rel="stylesheet">
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        outfit: ['Outfit', 'sans-serif'],
                    },
                    colors: {
                        darkBg: '#080C14',
                        darkCard: '#0F1626',
                        goldAccent: '#FFCC00',
                        glassBg: 'rgba(15, 22, 38, 0.7)',
                    }
                }
            }
        }
    </script>
    <!-- Alpine.js for snappier UI interactions (modals, tabs) -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #080C14;
        }
        .custom-blur {
            backdrop-filter: blur(12px);
        }
        .neon-border:focus {
            box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
            border-color: #FFCC00;
        }
    </style>
</head>
<body class="text-white min-h-screen relative flex flex-col md:flex-row" x-data="{ mobileMenu: false }">

    <!-- Glowing Background Lights -->
    <div class="absolute w-[600px] h-[600px] rounded-full bg-yellow-500/5 blur-[130px] top-[-10%] left-[-10%] pointer-events-none"></div>
    <div class="absolute w-[500px] h-[500px] rounded-full bg-blue-500/5 blur-[120px] bottom-[10%] right-[-10%] pointer-events-none"></div>

    <!-- ─── SIDEBAR ───────────────────────────────────────────────────────── -->
    <aside class="w-full md:w-64 bg-darkCard/95 border-b md:border-b-0 md:border-r border-white/10 flex flex-col justify-between shrink-0 relative z-20 custom-blur">
        <div>
            <!-- Sidebar Header / Logo -->
            <div class="p-6 border-b border-white/10 flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-gradient-to-tr from-goldAccent to-yellow-600 flex items-center justify-center text-black font-black font-outfit text-lg shadow-md shadow-goldAccent/10">
                        M
                    </div>
                    <div>
                        <h2 class="font-outfit font-black text-md leading-none text-white">MATCH METRIX</h2>
                        <span class="text-[10px] text-gray-400 font-semibold tracking-wider uppercase">Console</span>
                    </div>
                </div>
                <!-- Mobile menu toggle -->
                <button @click="mobileMenu = !mobileMenu" class="md:hidden text-gray-400 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>

            <!-- Sidebar Navigation Items -->
            <nav class="p-4 space-y-1.5" :class="mobileMenu ? 'block' : 'hidden md:block'">
                <a href="?tab=dashboard" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'dashboard' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                    </svg>
                    Dashboard
                </a>

                <a href="?tab=packages" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'packages' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                    VIP Packages
                </a>

                <a href="?tab=predictions" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'predictions' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    Predictions
                </a>

                <a href="?tab=users" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'users' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    Users & Subscriptions
                </a>

                <a href="?tab=tickets" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'tickets' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                    Support Tickets
                    <?php if($stats['open_tickets'] > 0): ?>
                        <span class="ml-auto bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">
                            <?php echo e($stats['open_tickets']); ?>

                        </span>
                    <?php endif; ?>
                </a>

                <a href="?tab=earnings" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'earnings' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Earnings
                </a>

                <a href="?tab=notifications" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'notifications' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                    Push Notifications
                </a>

                <a href="?tab=settings" 
                   class="flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-medium transition-all <?php echo e($tab === 'settings' ? 'bg-goldAccent text-black shadow-lg shadow-goldAccent/15' : 'text-gray-400 hover:bg-white/5 hover:text-white'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    Settings
                </a>
            </nav>

        </div>

        <!-- User profile section bottom -->
        <div class="p-4 border-t border-white/10 hidden md:flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center font-bold text-white uppercase">
                <?php echo e(substr(Auth::user()->name, 0, 2)); ?>

            </div>
            <div class="overflow-hidden">
                <h4 class="text-sm font-semibold text-white truncate leading-tight"><?php echo e(Auth::user()->name); ?></h4>
                <a href="<?php echo e(route('admin.logout')); ?>" class="text-xs text-red-400 hover:text-red-300 font-medium">Log out</a>
            </div>
        </div>
    </aside>

    <!-- ─── MAIN CONTENT AREA ─────────────────────────────────────────────── -->
    <main class="flex-1 min-w-0 p-6 md:p-8 overflow-y-auto z-10 relative">
        <!-- Top Stats Summary Header -->
        <header class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-outfit font-black tracking-tight capitalize">
                    <?php echo e($tab); ?> Management
                </h1>
                <p class="text-sm text-gray-400">Match Metrix predictions, subscriptions and settings monitor.</p>
            </div>
        </header>

        <!-- Flash messages -->
        <?php if(session('success')): ?>
            <div class="bg-green-500/15 border border-green-500/30 text-green-400 rounded-xl p-4 mb-6 flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="text-sm font-medium"><?php echo e(session('success')); ?></span>
            </div>
        <?php endif; ?>

        <!-- Tab contents -->
        <div class="space-y-6">

            <!-- ── TAB: DASHBOARD ───────────────────────────────────────────── -->
            <?php if($tab === 'dashboard'): ?>
                <!-- Stats Cards Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Total Users</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-white"><?php echo e($stats['total_users']); ?></h2>
                    </div>
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Active VIP Subs</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-goldAccent"><?php echo e($stats['active_subscribers']); ?></h2>
                    </div>
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">VIP Packages</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-white"><?php echo e($stats['total_packages']); ?></h2>
                    </div>
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Open Tickets</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-red-400"><?php echo e($stats['open_tickets']); ?></h2>
                    </div>
                </div>

                <!-- Financial Overview Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mt-6">
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur hover:border-goldAccent/30 transition-all duration-300">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">USD Revenue (Stripe/Card)</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-white">$<?php echo e(number_format($stats['total_earnings_usd'], 2)); ?></h2>
                    </div>
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur hover:border-emerald-500/30 transition-all duration-300">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">UGX Revenue (Mobile Money)</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-emerald-400"><?php echo e(number_format($stats['total_earnings_ugx'])); ?> <span class="text-xs">UGX</span></h2>
                    </div>
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur hover:border-cyan-400/30 transition-all duration-300">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Card Earnings</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-cyan-400">$<?php echo e(number_format($stats['card_earnings_usd'], 2)); ?></h2>
                    </div>
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-5 custom-blur hover:border-purple-500/30 transition-all duration-300">
                        <span class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Mobile Money Earnings</span>
                        <h2 class="text-3xl font-outfit font-black mt-2 text-purple-400"><?php echo e(number_format($stats['mobile_earnings_ugx'])); ?> <span class="text-xs">UGX</span></h2>
                    </div>
                </div>

                <!-- Recent Support Tickets and predictions overview -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
                    <!-- Open tickets list -->
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-6 custom-blur">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-outfit font-black text-lg text-white">Pending Tickets</h3>
                            <a href="?tab=tickets" class="text-xs text-goldAccent hover:underline">View all</a>
                        </div>
                        <div class="divide-y divide-white/5">
                            <?php $__empty_1 = true; $__currentLoopData = $tickets->where('status', 'open')->take(5); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ticket): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <div class="py-3 flex justify-between items-center">
                                    <div>
                                        <h4 class="text-sm font-semibold text-white"><?php echo e($ticket->subject); ?></h4>
                                        <p class="text-xs text-gray-400"><?php echo e($ticket->user->name ?? 'Guest User'); ?> • <?php echo e($ticket->created_at->diffForHumans()); ?></p>
                                    </div>
                                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider <?php echo e($ticket->priority === 'high' ? 'bg-red-500/10 text-red-400' : 'bg-yellow-500/10 text-yellow-400'); ?>">
                                        <?php echo e($ticket->priority); ?>

                                    </span>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <div class="text-center py-6 text-sm text-gray-400">No open tickets. All clean!</div>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Recent predictions list -->
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-6 custom-blur">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-outfit font-black text-lg text-white">Latest Predictions</h3>
                            <a href="?tab=predictions" class="text-xs text-goldAccent hover:underline">Manage</a>
                        </div>
                        <div class="divide-y divide-white/5">
                            <?php $__empty_1 = true; $__currentLoopData = $predictions->take(5); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pred): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <div class="py-3 flex justify-between items-center">
                                    <div>
                                        <h4 class="text-sm font-semibold text-white"><?php echo e($pred->team1); ?> vs <?php echo e($pred->team2); ?></h4>
                                        <p class="text-xs text-gray-400"><?php echo e($pred->league); ?> • Tip: <span class="text-goldAccent font-semibold"><?php echo e($pred->selection); ?></span></p>
                                    </div>
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider <?php echo e($pred->status === 'won' ? 'bg-green-500/10 text-green-400' : ($pred->status === 'lost' ? 'bg-red-500/10 text-red-400' : 'bg-gray-500/10 text-gray-400')); ?>">
                                        <?php echo e($pred->status); ?>

                                    </span>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <div class="text-center py-6 text-sm text-gray-400">No predictions added yet.</div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

            <!-- ── TAB: PACKAGES (CRUD) ─────────────────────────────────────── -->
            <?php if($tab === 'packages'): ?>
                <div x-data="{ openCreate: false, editPkg: null }">
                    <!-- Add package CTA Header -->
                    <div class="flex justify-end mb-4">
                        <button @click="openCreate = true" class="px-4 py-2.5 bg-gradient-to-r from-goldAccent to-yellow-500 hover:from-yellow-400 hover:to-yellow-600 text-black font-semibold text-sm rounded-xl transition duration-300 flex items-center gap-2 shadow-lg shadow-goldAccent/10">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
                            Add VIP Package
                        </button>
                    </div>

                    <!-- Packages List Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <?php $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pkg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-6 custom-blur flex flex-col justify-between" style="border-top: 4px solid <?php echo e($pkg->start_color); ?>">
                                <div>
                                    <div class="flex justify-between items-start mb-2">
                                        <h3 class="font-outfit font-black text-xl text-white"><?php echo e($pkg->title); ?></h3>
                                        <span class="text-sm font-bold text-goldAccent bg-goldAccent/10 px-2.5 py-0.5 rounded-full"><?php echo e($pkg->price); ?></span>
                                    </div>
                                    <p class="text-xs text-gray-400 mb-4"><?php echo e($pkg->subtitle ?? 'Premium VIP predictions package'); ?></p>
                                    <div class="space-y-2 mb-6">
                                        <div class="flex justify-between text-xs"><span class="text-gray-400">Duration:</span> <span class="font-semibold"><?php echo e($pkg->duration_days); ?> Days</span></div>
                                        <div class="flex justify-between text-xs"><span class="text-gray-400">Card Layout:</span> <span class="font-semibold uppercase"><?php echo e($pkg->layout_name); ?></span></div>
                                        <div class="flex justify-between text-xs"><span class="text-gray-400">State:</span> <span class="font-semibold text-yellow-500"><?php echo e($pkg->is_locked ? 'Locked (Paid)' : 'Free'); ?></span></div>
                                    </div>
                                </div>
                                <div class="flex gap-3 mt-4 border-t border-white/5 pt-4">
                                    <button @click="editPkg = <?php echo e(json_encode($pkg)); ?>" class="flex-1 py-2 bg-white/5 hover:bg-white/10 rounded-xl text-xs font-semibold text-white transition">Edit</button>
                                    <form action="<?php echo e(route('admin.packages.delete', $pkg->id)); ?>" method="POST" onsubmit="return confirm('Delete this package? This cannot be undone.');">
                                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                        <button type="submit" class="p-2 bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 rounded-xl text-red-400 transition">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>

                    <!-- Create Package Modal -->
                    <div x-show="openCreate" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm" style="display: none;">
                        <div @click.outside="openCreate = false" class="bg-darkCard border border-white/10 rounded-3xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto shadow-2xl">
                            <h3 class="font-outfit font-black text-2xl mb-6 text-white">Create VIP Package</h3>
                            <form action="<?php echo e(route('admin.packages.store')); ?>" method="POST" class="space-y-4">
                                <?php echo csrf_field(); ?>
                                <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Title</label><input type="text" name="title" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Price (e.g. $49.99)</label><input type="text" name="price" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Duration (Days)</label><input type="number" name="duration_days" required min="1" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                </div>
                                <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Subtitle</label><input type="text" name="subtitle" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                <div class="grid grid-cols-3 gap-4">
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Card Layout</label><select name="layout_name" class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"><option value="grid">Grid</option><option value="row" selected>Row</option><option value="square">Square</option><option value="tall">Tall</option><option value="free">Free</option></select></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Start Color (Hex)</label><input type="text" name="start_color" value="#7B61FF" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">End Color (Hex)</label><input type="text" name="end_color" value="#00B4FF" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                </div>
                                <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Button text</label><input type="text" name="button_text" value="Unlock VIP Access" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                <div class="flex items-center gap-3 py-2"><input type="checkbox" name="is_locked" value="1" checked id="create_is_locked" class="w-5 h-5 rounded border-white/10 bg-white/5 text-goldAccent focus:ring-0"><label for="create_is_locked" class="text-sm font-semibold text-gray-300">Lock package predictions (require payment)</label></div>
                                <div class="flex gap-4 pt-4 border-t border-white/5"><button type="button" @click="openCreate = false" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Cancel</button><button type="submit" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold">Save Package</button></div>
                            </form>
                        </div>
                    </div>

                    <!-- Edit Package Modal -->
                    <template x-if="editPkg">
                        <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
                            <div class="bg-darkCard border border-white/10 rounded-3xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto shadow-2xl">
                                <h3 class="font-outfit font-black text-2xl mb-6 text-white">Edit VIP Package</h3>
                                <form :action="'/admin/vip-packages/' + editPkg.id" method="POST" class="space-y-4">
                                    <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Title</label><input type="text" name="title" :value="editPkg.title" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Price (e.g. $49.99)</label><input type="text" name="price" :value="editPkg.price" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Duration (Days)</label><input type="number" name="duration_days" :value="editPkg.duration_days" required min="1" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    </div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Subtitle</label><input type="text" name="subtitle" :value="editPkg.subtitle" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div class="grid grid-cols-3 gap-4">
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Card Layout</label><select name="layout_name" :value="editPkg.layout_name" class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"><option value="grid">Grid</option><option value="row">Row</option><option value="square">Square</option><option value="tall">Tall</option><option value="free">Free</option></select></div>
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Start Color (Hex)</label><input type="text" name="start_color" :value="editPkg.start_color" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">End Color (Hex)</label><input type="text" name="end_color" :value="editPkg.end_color" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    </div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Button text</label><input type="text" name="button_text" :value="editPkg.button_text" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div class="flex items-center gap-3 py-2"><input type="checkbox" name="is_locked" value="1" :checked="editPkg.is_locked" id="edit_is_locked" class="w-5 h-5 rounded border-white/10 bg-white/5 text-goldAccent focus:ring-0"><label for="edit_is_locked" class="text-sm font-semibold text-gray-300">Lock package predictions (require payment)</label></div>
                                    <div class="flex gap-4 pt-4 border-t border-white/5"><button type="button" @click="editPkg = null" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Cancel</button><button type="submit" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold">Update Package</button></div>
                                </form>
                            </div>
                        </div>
                    </template>
                </div>
            <?php endif; ?>

            <!-- ── TAB: PREDICTIONS (CRUD) ──────────────────────────────────── -->
            <?php if($tab === 'predictions'): ?>
                <div x-data="{ openCreate: false, editPred: null }">
                    <div class="flex justify-end mb-4">
                        <button @click="openCreate = true" class="px-4 py-2.5 bg-gradient-to-r from-goldAccent to-yellow-500 hover:from-yellow-400 hover:to-yellow-600 text-black font-semibold text-sm rounded-xl transition duration-300 flex items-center gap-2 shadow-lg shadow-goldAccent/10">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
                            Add Match Prediction
                        </button>
                    </div>

                    <!-- Predictions Table -->
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl overflow-hidden custom-blur">
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-sm text-gray-300">
                                <thead class="text-xs uppercase bg-white/5 text-gray-400 border-b border-white/10">
                                    <tr>
                                        <th class="px-6 py-4">League</th>
                                        <th class="px-6 py-4">Fixture</th>
                                        <th class="px-6 py-4">Prediction</th>
                                        <th class="px-6 py-4">Target Package</th>
                                        <th class="px-6 py-4">Date</th>
                                        <th class="px-6 py-4">Status</th>
                                        <th class="px-6 py-4 text-right">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-white/5">
                                    <?php $__empty_1 = true; $__currentLoopData = $predictions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pred): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <tr class="hover:bg-white/5 transition-all">
                                            <td class="px-6 py-4 font-medium text-white"><?php echo e($pred->league); ?></td>
                                            <td class="px-6 py-4">
                                                <div class="flex items-center gap-3">
                                                    <?php if($pred->team1_logo): ?><img src="<?php echo e($pred->team1_logo); ?>" class="w-5 h-5 rounded-full shrink-0"><?php endif; ?>
                                                    <span class="font-semibold"><?php echo e($pred->team1); ?></span>
                                                    <span class="text-gray-500 font-bold">vs</span>
                                                    <span class="font-semibold"><?php echo e($pred->team2); ?></span>
                                                    <?php if($pred->team2_logo): ?><img src="<?php echo e($pred->team2_logo); ?>" class="w-5 h-5 rounded-full shrink-0"><?php endif; ?>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 text-goldAccent font-bold"><?php echo e($pred->selection); ?></td>
                                            <td class="px-6 py-4">
                                                <span class="text-xs font-semibold px-2 py-0.5 rounded bg-white/5 border border-white/10"><?php echo e($pred->vipPackage->title ?? 'None'); ?></span>
                                            </td>
                                            <td class="px-6 py-4"><?php echo e($pred->prediction_date->format('M d, Y')); ?></td>
                                            <td class="px-6 py-4">
                                                <!-- Status update selector -->
                                                <form action="<?php echo e(route('admin.predictions.status', $pred->id)); ?>" method="POST" class="inline-block">
                                                    <?php echo csrf_field(); ?> <?php echo method_field('PATCH'); ?>
                                                    <select name="status" onchange="this.form.submit()" 
                                                        class="bg-darkCard/80 border border-white/10 text-xs font-bold rounded-lg px-2 py-1 uppercase focus:outline-none 
                                                        <?php echo e($pred->status === 'won' ? 'text-green-400 border-green-500/35' : ($pred->status === 'lost' ? 'text-red-400 border-red-500/35' : 'text-gray-400')); ?>">
                                                        <option value="pending" <?php echo e($pred->status === 'pending' ? 'selected' : ''); ?>>Pending</option>
                                                        <option value="won" <?php echo e($pred->status === 'won' ? 'selected' : ''); ?>>Won</option>
                                                        <option value="lost" <?php echo e($pred->status === 'lost' ? 'selected' : ''); ?>>Lost</option>
                                                    </select>
                                                </form>
                                            </td>
                                            <td class="px-6 py-4 text-right">
                                                <div class="flex justify-end gap-3.5">
                                                    <button @click="editPred = <?php echo e(json_encode($pred)); ?>" class="text-xs font-semibold text-gray-400 hover:text-white transition">Edit</button>
                                                    <form action="<?php echo e(route('admin.predictions.delete', $pred->id)); ?>" method="POST" onsubmit="return confirm('Delete this prediction?');">
                                                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                                        <button type="submit" class="text-xs font-semibold text-red-400 hover:text-red-300">Delete</button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                        <tr><td colspan="7" class="px-6 py-8 text-center text-gray-500 text-sm">No predictions registered. Add one to start.</td></tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Create Prediction Modal -->
                    <div x-show="openCreate" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm" style="display: none;">
                        <div @click.outside="openCreate = false" class="bg-darkCard border border-white/10 rounded-3xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto shadow-2xl">
                            <h3 class="font-outfit font-black text-2xl mb-6 text-white">Create Prediction</h3>
                            <form action="<?php echo e(route('admin.predictions.store')); ?>" method="POST" enctype="multipart/form-data" class="space-y-4">
                                <?php echo csrf_field(); ?>
                                <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Vip Package</label><select name="vip_package_id" required class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"><?php $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pkg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><option value="<?php echo e($pkg->id); ?>"><?php echo e($pkg->title); ?> (<?php echo e($pkg->price); ?>)</option><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?></select></div>
                                <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">League / Tournament</label><input type="text" name="league" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent" placeholder="English Premier League"></div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Home Team</label><input type="text" name="team1" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Away Team</label><input type="text" name="team2" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Home Team Logo File</label>
                                        <input type="file" name="team1_logo_file" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs focus:outline-none focus:border-goldAccent">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Away Team Logo File</label>
                                        <input type="file" name="team2_logo_file" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs focus:outline-none focus:border-goldAccent">
                                    </div>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Or Home Logo URL</label><input type="text" name="team1_logo" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Or Away Logo URL</label><input type="text" name="team2_logo" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                </div>
                                <div class="grid grid-cols-3 gap-4">
                                    <div class="col-span-2"><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Tip / Selection</label><input type="text" name="selection" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent" placeholder="Home Win (Odds: 1.85)"></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Status</label><select name="status" required class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"><option value="pending">Pending</option><option value="won">Won</option><option value="lost">Lost</option></select></div>
                                </div>
                                <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Match Date</label><input type="date" name="prediction_date" required value="<?php echo e(date('Y-m-d')); ?>" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                <div class="flex gap-4 pt-4 border-t border-white/5"><button type="button" @click="openCreate = false" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Cancel</button><button type="submit" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold">Save Match</button></div>
                            </form>

                        </div>
                    </div>

                    <!-- Edit Prediction Modal -->
                    <template x-if="editPred">
                        <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
                            <div class="bg-darkCard border border-white/10 rounded-3xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto shadow-2xl">
                                <h3 class="font-outfit font-black text-2xl mb-6 text-white">Edit Prediction</h3>
                                <form :action="'/admin/predictions/' + editPred.id" method="POST" enctype="multipart/form-data" class="space-y-4">
                                    <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Vip Package</label><select name="vip_package_id" x-model="editPred.vip_package_id" required class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"><?php $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pkg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><option value="<?php echo e($pkg->id); ?>"><?php echo e($pkg->title); ?></option><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?></select></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">League / Tournament</label><input type="text" name="league" :value="editPred.league" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Home Team</label><input type="text" name="team1" :value="editPred.team1" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Away Team</label><input type="text" name="team2" :value="editPred.team2" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Home Team Logo File</label>
                                            <input type="file" name="team1_logo_file" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs focus:outline-none focus:border-goldAccent">
                                        </div>
                                        <div>
                                            <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Away Team Logo File</label>
                                            <input type="file" name="team2_logo_file" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs focus:outline-none focus:border-goldAccent">
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Or Home Logo URL</label><input type="text" name="team1_logo" :value="editPred.team1_logo" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Or Away Logo URL</label><input type="text" name="team2_logo" :value="editPred.team2_logo" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    </div>

                                    <div class="grid grid-cols-3 gap-4">
                                        <div class="col-span-2"><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Tip / Selection</label><input type="text" name="selection" :value="editPred.selection" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                        <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Status</label><select name="status" x-model="editPred.status" required class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"><option value="pending">Pending</option><option value="won">Won</option><option value="lost">Lost</option></select></div>
                                    </div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Match Date</label><input type="date" name="prediction_date" :value="editPred.prediction_date ? editPred.prediction_date.substring(0, 10) : ''" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div class="flex gap-4 pt-4 border-t border-white/5"><button type="button" @click="editPred = null" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Cancel</button><button type="submit" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold">Update Match</button></div>
                                </form>
                            </div>
                        </div>
                    </template>
                </div>
            <?php endif; ?>

            <!-- ── TAB: USERS & SUBS ────────────────────────────────────────── -->
            <?php if($tab === 'users'): ?>
                <div x-data="{ grantSubUser: null }">
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl overflow-hidden custom-blur">
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-sm text-gray-300">
                                <thead class="text-xs uppercase bg-white/5 text-gray-400 border-b border-white/10">
                                    <tr>
                                        <th class="px-6 py-4">User Name</th>
                                        <th class="px-6 py-4">Email</th>
                                        <th class="px-6 py-4">Registered Date</th>
                                        <th class="px-6 py-4">Role</th>
                                        <th class="px-6 py-4">Quick Action</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-white/5">
                                    <?php $__empty_1 = true; $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <tr class="hover:bg-white/5 transition-all">
                                            <td class="px-6 py-4 font-semibold text-white"><?php echo e($user->name); ?></td>
                                            <td class="px-6 py-4 text-gray-400"><?php echo e($user->email); ?></td>
                                            <td class="px-6 py-4 text-xs text-gray-500"><?php echo e($user->created_at->format('M d, Y H:i')); ?></td>
                                            <td class="px-6 py-4">
                                                <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider <?php echo e($user->is_admin ? 'bg-goldAccent/10 text-goldAccent border border-goldAccent/20' : 'bg-white/5 text-gray-400'); ?>">
                                                    <?php echo e($user->is_admin ? 'Admin' : 'User'); ?>

                                                </span>
                                            </td>
                                            <td class="px-6 py-4">
                                                <button @click="grantSubUser = <?php echo e(json_encode($user)); ?>" 
                                                    class="px-3.5 py-1.5 bg-white/5 hover:bg-goldAccent hover:text-black rounded-lg text-xs font-semibold text-white transition border border-white/10">
                                                    Manage Subscription
                                                </button>
                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                        <tr><td colspan="5" class="px-6 py-8 text-center text-gray-500 text-sm">No registered users found.</td></tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                        <?php if($users->hasPages()): ?>
                            <div class="px-6 py-4 border-t border-white/10 bg-white/2">
                                <?php echo e($users->appends(['tab' => 'users'])->links()); ?>

                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Manage Subscription Modal -->
                    <template x-if="grantSubUser">
                        <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
                            <div class="bg-darkCard border border-white/10 rounded-3xl w-full max-w-md p-6 shadow-2xl">
                                <h3 class="font-outfit font-black text-xl mb-4 text-white">Manage Plan for <span class="text-goldAccent" x-text="grantSubUser.name"></span></h3>
                                <form :action="'/admin/users/' + grantSubUser.id + '/subscription'" method="POST" class="space-y-4">
                                    <?php echo csrf_field(); ?>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Select VIP Package</label><select name="vip_package_id" required class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"><?php $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pkg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><option value="<?php echo e($pkg->id); ?>"><?php echo e($pkg->title); ?> (<?php echo e($pkg->price); ?>)</option><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?></select></div>
                                    <div><label class="block text-xs font-bold text-gray-400 uppercase mb-2">Subscription Expires On</label><input type="date" name="ends_at" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent"></div>
                                    <div class="flex gap-4 pt-4 border-t border-white/5"><button type="button" @click="grantSubUser = null" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Cancel</button><button type="submit" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold">Grant Access</button></div>
                                </form>
                            </div>
                        </div>
                    </template>
                </div>
            <?php endif; ?>

            <!-- ── TAB: TICKETS ────────────────────────────────────────────── -->
            <?php if($tab === 'tickets'): ?>
                <div x-data="{ replyTkt: null }">
                    <div class="bg-darkCard/60 border border-white/5 rounded-2xl overflow-hidden custom-blur">
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-sm text-gray-300">
                                <thead class="text-xs uppercase bg-white/5 text-gray-400 border-b border-white/10">
                                    <tr>
                                        <th class="px-6 py-4">User</th>
                                        <th class="px-6 py-4">Subject</th>
                                        <th class="px-6 py-4">Message</th>
                                        <th class="px-6 py-4">Priority</th>
                                        <th class="px-6 py-4">Status</th>
                                        <th class="px-6 py-4 text-right font-medium">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-white/5">
                                    <?php $__empty_1 = true; $__currentLoopData = $tickets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tkt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <tr class="hover:bg-white/5 transition-all align-middle">
                                            <td class="px-6 py-4"><div class="font-semibold text-white leading-none"><?php echo e($tkt->user->name ?? 'Guest User'); ?></div><span class="text-[10px] text-gray-500"><?php echo e($tkt->user->email ?? 'no-email'); ?></span></td>
                                            <td class="px-6 py-4 font-bold text-white"><?php echo e($tkt->subject); ?></td>
                                            <td class="px-6 py-4 max-w-xs truncate text-xs text-gray-400"><?php echo e($tkt->message); ?></td>
                                            <td class="px-6 py-4">
                                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider <?php echo e($tkt->priority === 'high' ? 'bg-red-500/10 text-red-400' : 'bg-gray-500/10 text-gray-400'); ?>">
                                                    <?php echo e($tkt->priority); ?>

                                                </span>
                                            </td>
                                            <td class="px-6 py-4">
                                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider <?php echo e($tkt->status === 'resolved' ? 'bg-green-500/10 text-green-400' : 'bg-yellow-500/10 text-yellow-400'); ?>">
                                                    <?php echo e($tkt->status); ?>

                                                </span>
                                            </td>
                                            <td class="px-6 py-4 text-right">
                                                <?php if($tkt->status === 'open'): ?>
                                                    <button @click="replyTkt = <?php echo e(json_encode($tkt)); ?>" 
                                                        class="px-3.5 py-1.5 bg-goldAccent text-black hover:bg-yellow-400 rounded-lg text-xs font-semibold transition shadow-md shadow-goldAccent/10">
                                                        Reply & Resolve
                                                    </button>
                                                <?php else: ?>
                                                    <span class="text-xs text-gray-500 font-semibold italic">Resolved ✓</span>
                                                <?php endif; ?>
                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                        <tr><td colspan="6" class="px-6 py-8 text-center text-gray-500 text-sm">No support tickets found.</td></tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Reply Ticket Modal -->
                    <template x-if="replyTkt">
                        <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
                            <div class="bg-darkCard border border-white/10 rounded-3xl w-full max-w-lg p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
                                <h3 class="font-outfit font-black text-xl mb-4 text-white">Resolve Support Ticket</h3>
                                <div class="bg-white/5 border border-white/10 rounded-xl p-4 mb-4">
                                    <div class="text-[10px] text-gray-400 font-bold uppercase tracking-wider mb-1" x-text="replyTkt.user ? replyTkt.user.name : 'Guest User'"></div>
                                    <div class="text-sm font-semibold text-white mb-2" x-text="replyTkt.subject"></div>
                                    <div class="text-xs text-gray-300 leading-relaxed italic" x-text="'&ldquo;' + replyTkt.message + '&rdquo;'"></div>
                                </div>
                                <form :action="'/admin/tickets/' + replyTkt.id + '/reply'" method="POST" class="space-y-4">
                                    <?php echo csrf_field(); ?>
                                    <div>
                                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Your Reply / Resolution Message</label>
                                        <textarea name="reply" required rows="4" class="w-full bg-white/5 border border-white/10 rounded-xl p-4 text-white focus:outline-none focus:border-goldAccent text-xs leading-relaxed" placeholder="Type your response to the user here..."></textarea>
                                    </div>
                                    <div class="flex gap-4 pt-4 border-t border-white/5"><button type="button" @click="replyTkt = null" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Cancel</button><button type="submit" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold">Send Reply</button></div>
                                </form>
                            </div>
                        </div>
                    </template>
                </div>
            <?php endif; ?>

            <!-- ── TAB: SYSTEM SETTINGS ────────────────────────────────────── -->
            <?php if($tab === 'settings'): ?>
                <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-6 max-w-2xl custom-blur">
                    <h3 class="font-outfit font-black text-xl mb-6 text-white">Global Configuration</h3>
                    <form action="<?php echo e(route('admin.settings.update')); ?>" method="POST" class="space-y-6">
                        <?php echo csrf_field(); ?>

                        <!-- UGX Rate -->
                        <div>
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-2">UGX to 1 USD Exchange Rate</label>
                            <input type="text" name="usd_to_ugx" value="<?php echo e($settings['usd_to_ugx'] ?? '3700'); ?>" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent font-semibold">
                            <span class="text-[10px] text-gray-500 mt-1 block">Used to convert USD packages to UGX Mobile Money payments. (e.g. 3700)</span>
                        </div>

                        <hr class="border-white/5 my-4">

                        <!-- Relworx API -->
                        <div>
                            <h4 class="text-sm font-semibold text-goldAccent mb-4 flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-goldAccent"></span>
                                Relworx Mobile Money settings
                                <span class="ml-auto flex items-center gap-1 text-[10px] font-medium text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-full px-2 py-0.5">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1a5 5 0 0 1 5 5v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3zm0 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
                                    Encrypted at Rest
                                </span>
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2">API Key / Authorization Token</label>
                                    <?php if(!empty($settings['relworx_api_key'])): ?>
                                        <div class="mb-2 flex items-center gap-2 bg-emerald-500/5 border border-emerald-500/20 rounded-xl px-3 py-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-emerald-400 shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1a5 5 0 0 1 5 5v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3z"/></svg>
                                            <code class="text-[10px] text-emerald-300 font-mono truncate"><?php echo e(Str::limit($settings['relworx_api_key'], 48)); ?></code>
                                        </div>
                                        <p class="text-[10px] text-gray-500 mb-2">Currently encrypted. Enter a new value below to replace it.</p>
                                    <?php endif; ?>
                                    <input type="text" name="relworx_api_key" placeholder="<?php echo e(empty($settings['relworx_api_key']) ? 'Enter API Key...' : 'Enter new key to replace existing...'); ?>" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-xs">
                                </div>
                                <div>
                                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Account Number (Merchant ID)</label>
                                    <?php if(!empty($settings['relworx_account_no'])): ?>
                                        <div class="mb-2 flex items-center gap-2 bg-emerald-500/5 border border-emerald-500/20 rounded-xl px-3 py-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-emerald-400 shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1a5 5 0 0 1 5 5v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3z"/></svg>
                                            <code class="text-[10px] text-emerald-300 font-mono truncate"><?php echo e(Str::limit($settings['relworx_account_no'], 48)); ?></code>
                                        </div>
                                        <p class="text-[10px] text-gray-500 mb-2">Currently encrypted. Enter a new value below to replace it.</p>
                                    <?php endif; ?>
                                    <input type="text" name="relworx_account_no" placeholder="<?php echo e(empty($settings['relworx_account_no']) ? 'Enter Account Number...' : 'Enter new account no. to replace existing...'); ?>" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-xs">
                                </div>
                            </div>
                            <span class="text-[10px] text-gray-500 mt-1.5 block">Credentials are <strong class="text-emerald-400">AES-256 encrypted</strong> before storage. Leave fields blank to keep existing values unchanged. Use <strong>placeholder_key</strong> to enable simulation mode.</span>
                        </div>


                        <hr class="border-white/5 my-4">

                        <!-- Flutterwave Config -->
                        <div>
                            <h4 class="text-sm font-semibold text-cyan-400 mb-4 flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-cyan-400"></span>
                                Flutterwave Card settings
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Public Key</label>
                                    <input type="text" name="flutterwave_public_key" value="<?php echo e($settings['flutterwave_public_key'] ?? ''); ?>" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-xs">
                                </div>
                                <div>
                                    <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Secret Key</label>
                                    <input type="text" name="flutterwave_secret_key" value="<?php echo e($settings['flutterwave_secret_key'] ?? ''); ?>" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-xs">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Test Mode</label>
                                <select name="flutterwave_test_mode" class="w-full bg-darkCard border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-sm">
                                    <option value="true" <?php echo e(($settings['flutterwave_test_mode'] ?? 'true') === 'true' ? 'selected' : ''); ?>>True (Sandbox / Testing)</option>
                                    <option value="false" <?php echo e(($settings['flutterwave_test_mode'] ?? 'true') === 'false' ? 'selected' : ''); ?>>False (Live Production)</option>
                                </select>
                            </div>
                        </div>

                        <div class="pt-4 border-t border-white/5 flex justify-end">
                            <button type="submit" class="px-6 py-3.5 bg-gradient-to-r from-goldAccent to-yellow-500 hover:from-yellow-400 hover:to-yellow-600 text-black font-semibold text-sm rounded-xl transition duration-300 shadow-lg shadow-goldAccent/10">
                                Save Settings
                            </button>
                        </div>
                    </form>
                </div>
            <?php endif; ?>

            <!-- ── TAB: EARNINGS ────────────────────────────────────────────── -->
            <?php if($tab === 'earnings'): ?>
                <div x-data="{ 
                    openWithdrawModal: false, 
                    phone: '', 
                    amount: '', 
                    isValidating: false, 
                    isConfirming: false, 
                    isValidated: false, 
                    customerName: '', 
                    calculatedCharge: 0, 
                    calculatedTotal: 0, 
                    validatedPhone: '', 
                    errorMessage: '', 
                    successMessage: '',
                    validateDetails() {
                        if (!this.phone || !this.amount) return;
                        this.isValidating = true;
                        this.errorMessage = '';
                        this.successMessage = '';
                        
                        fetch('<?php echo e(route('admin.withdraw.validate')); ?>', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                            },
                            body: JSON.stringify({ phone: this.phone, amount: this.amount })
                        })
                        .then(res => res.json())
                        .then(data => {
                            this.isValidating = false;
                            if (data.success) {
                                this.isValidated = true;
                                this.customerName = data.customer_name;
                                this.calculatedCharge = data.charge;
                                this.calculatedTotal = data.total;
                                this.validatedPhone = data.phone;
                            } else {
                                this.errorMessage = data.message || 'Validation failed.';
                            }
                        })
                        .catch(err => {
                            this.isValidating = false;
                            this.errorMessage = 'Network error. Please try again.';
                        });
                    },
                    confirmWithdraw() {
                        this.isConfirming = true;
                        this.errorMessage = '';
                        
                        fetch('<?php echo e(route('admin.withdraw.confirm')); ?>', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                            },
                            body: JSON.stringify({ 
                                phone: this.validatedPhone, 
                                amount: this.amount, 
                                customer_name: this.customerName 
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            this.isConfirming = false;
                            if (data.success) {
                                this.successMessage = data.message;
                                setTimeout(() => {
                                    window.location.reload();
                                }, 2000);
                            } else {
                                this.errorMessage = data.message || 'Withdrawal failed.';
                            }
                        })
                        .catch(err => {
                            this.isConfirming = false;
                            this.errorMessage = 'Network error. Please try again.';
                        });
                    },
                    resetForm() {
                        this.phone = '';
                        this.amount = '';
                        this.isValidating = false;
                        this.isConfirming = false;
                        this.isValidated = false;
                        this.customerName = '';
                        this.calculatedCharge = 0;
                        this.calculatedTotal = 0;
                        this.validatedPhone = '';
                        this.errorMessage = '';
                        this.successMessage = '';
                    }
                }" class="space-y-6">
                    <!-- Cards Grid -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        <!-- Card: Total USD -->
                        <div class="bg-darkCard border border-white/10 rounded-3xl p-6 shadow-xl relative overflow-hidden group hover:border-goldAccent/30 transition-all duration-300">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-goldAccent/5 rounded-bl-full pointer-events-none group-hover:bg-goldAccent/10 transition-colors duration-300"></div>
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-2xl bg-goldAccent/10 flex items-center justify-center text-goldAccent shrink-0">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </div>
                                <div>
                                    <span class="text-xs text-gray-400 font-bold uppercase tracking-wider block">Total USD Earnings</span>
                                    <h3 class="font-outfit font-black text-2xl mt-1 text-white">$<?php echo e(number_format($stats['total_earnings_usd'], 2)); ?></h3>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Total UGX -->
                        <div class="bg-darkCard border border-white/10 rounded-3xl p-6 shadow-xl relative overflow-hidden group hover:border-emerald-500/30 transition-all duration-300">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 rounded-bl-full pointer-events-none group-hover:bg-emerald-500/10 transition-colors duration-300"></div>
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 shrink-0">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                                </div>
                                <div>
                                    <span class="text-xs text-gray-400 font-bold uppercase tracking-wider block">Total UGX Earnings</span>
                                    <h3 class="font-outfit font-black text-2xl mt-1 text-white"><?php echo e(number_format($stats['total_earnings_ugx'])); ?> UGX</h3>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Card (USD) -->
                        <div class="bg-darkCard border border-white/10 rounded-3xl p-6 shadow-xl relative overflow-hidden group hover:border-cyan-400/30 transition-all duration-300">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-cyan-400/5 rounded-bl-full pointer-events-none group-hover:bg-cyan-400/10 transition-colors duration-300"></div>
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-2xl bg-cyan-400/10 flex items-center justify-center text-cyan-400 shrink-0">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                </div>
                                <div>
                                    <span class="text-xs text-gray-400 font-bold uppercase tracking-wider block">Card (USD)</span>
                                    <h3 class="font-outfit font-black text-2xl mt-1 text-white">$<?php echo e(number_format($stats['card_earnings_usd'], 2)); ?></h3>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Available Balance (UGX) -->
                        <div class="bg-darkCard border border-white/10 rounded-3xl p-6 shadow-xl relative overflow-hidden group hover:border-purple-500/30 transition-all duration-300">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-bl-full pointer-events-none group-hover:bg-purple-500/10 transition-colors duration-300"></div>
                            <div class="flex items-start justify-between gap-2 mb-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400 shrink-0">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                    </div>
                                    <div>
                                        <span class="text-xs text-gray-400 font-bold uppercase tracking-wider block">Withdrawable Balance</span>
                                        <h3 class="font-outfit font-black text-xl mt-0.5 text-emerald-400"><?php echo e(number_format($stats['available_balance_ugx'])); ?> UGX</h3>
                                    </div>
                                </div>
                                <button type="button" @click="openWithdrawModal = true" class="px-3 py-1.5 bg-goldAccent text-black hover:bg-yellow-400 text-[10px] font-bold uppercase rounded-lg transition shrink-0">
                                    Withdraw
                                </button>
                            </div>
                            <!-- Breakdown -->
                            <div class="border-t border-white/5 pt-3 space-y-1">
                                <div class="flex justify-between text-[10px]">
                                    <span class="text-gray-500">Gross MoMo income:</span>
                                    <span class="text-gray-300 font-semibold"><?php echo e(number_format($stats['mobile_earnings_ugx'])); ?> UGX</span>
                                </div>
                                <?php $totalWithdrawnDisplay = $stats['mobile_earnings_ugx'] - $stats['available_balance_ugx']; ?>
                                <div class="flex justify-between text-[10px]">
                                    <span class="text-gray-500">Total withdrawn + fees:</span>
                                    <span class="text-red-400 font-semibold">-<?php echo e(number_format(max(0, $totalWithdrawnDisplay))); ?> UGX</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Filter Bar -->
                    <div class="flex flex-wrap items-center justify-between gap-4 bg-white/5 border border-white/10 rounded-2xl px-6 py-4">
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Filter By:</span>
                            <div class="flex gap-2">
                                <a href="?tab=earnings" class="px-3 py-1.5 rounded-lg text-xs font-semibold transition-all <?php echo e(!request('method') ? 'bg-goldAccent text-black font-bold' : 'bg-white/5 text-gray-300 hover:bg-white/10'); ?>">All Payments</a>
                                <a href="?tab=earnings&method=card" class="px-3 py-1.5 rounded-lg text-xs font-semibold transition-all <?php echo e(request('method') === 'card' ? 'bg-goldAccent text-black font-bold' : 'bg-white/5 text-gray-300 hover:bg-white/10'); ?>">Card / Stripe</a>
                                <a href="?tab=earnings&method=mobile_money" class="px-3 py-1.5 rounded-lg text-xs font-semibold transition-all <?php echo e(request('method') === 'mobile_money' ? 'bg-goldAccent text-black font-bold' : 'bg-white/5 text-gray-300 hover:bg-white/10'); ?>">Mobile Money</a>
                                <a href="?tab=earnings&method=manual" class="px-3 py-1.5 rounded-lg text-xs font-semibold transition-all <?php echo e(request('method') === 'manual' ? 'bg-goldAccent text-black font-bold' : 'bg-white/5 text-gray-300 hover:bg-white/10'); ?>">Manual / Admin</a>
                            </div>
                        </div>
                        <div class="text-xs text-gray-400 font-medium">
                            Showing <?php echo e($earnings->firstItem() ?? 0); ?>-<?php echo e($earnings->lastItem() ?? 0); ?> of <?php echo e($earnings->total()); ?> payments
                        </div>
                    </div>

                    <!-- Earnings Transactions Table -->
                    <div class="bg-darkCard border border-white/10 rounded-3xl overflow-hidden shadow-2xl">
                        <div class="px-6 py-5 border-b border-white/10 flex justify-between items-center">
                            <h3 class="font-outfit font-black text-xl text-white">Payment Ledger</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-white/5 bg-white/[0.02] text-[10px] font-bold text-gray-400 uppercase tracking-wider">
                                        <th class="px-6 py-4">User</th>
                                        <th class="px-6 py-4">VIP Package</th>
                                        <th class="px-6 py-4">Payment Method</th>
                                        <th class="px-6 py-4">Amount</th>
                                        <th class="px-6 py-4">Transaction Reference</th>
                                        <th class="px-6 py-4">Status</th>
                                        <th class="px-6 py-4">Date & Time</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-white/5 text-xs text-gray-300">
                                    <?php $__empty_1 = true; $__currentLoopData = $earnings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $earn): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <tr class="hover:bg-white/[0.01] transition duration-200">
                                            <td class="px-6 py-4">
                                                <div class="font-semibold text-white"><?php echo e($earn->user->name ?? 'Deleted User'); ?></div>
                                                <div class="text-[10px] text-gray-400"><?php echo e($earn->user->email ?? '-'); ?></div>
                                            </td>
                                            <td class="px-6 py-4">
                                                <span class="text-xs font-semibold px-2 py-0.5 rounded bg-white/5 border border-white/10">
                                                    <?php echo e($earn->vipPackage->title ?? 'Deleted Package'); ?>

                                                </span>
                                            </td>
                                            <td class="px-6 py-4">
                                                <?php if($earn->payment_method === 'card'): ?>
                                                    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-cyan-500/10 text-cyan-400 text-[10px] font-bold uppercase tracking-wider border border-cyan-500/20">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                                        Card / Stripe
                                                    </span>
                                                <?php elseif($earn->payment_method === 'mobile_money'): ?>
                                                    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-purple-500/10 text-purple-400 text-[10px] font-bold uppercase tracking-wider border border-purple-500/20">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                                        Mobile Money
                                                    </span>
                                                <?php else: ?>
                                                    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-amber-500/10 text-amber-400 text-[10px] font-bold uppercase tracking-wider border border-amber-500/20">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                                        Manual / Admin
                                                    </span>
                                                <?php endif; ?>
                                            </td>
                                            <td class="px-6 py-4 font-bold text-white">
                                                <?php if($earn->amount_usd): ?>
                                                    $<?php echo e(number_format($earn->amount_usd, 2)); ?>

                                                <?php elseif($earn->amount_ugx): ?>
                                                    <?php echo e(number_format($earn->amount_ugx)); ?> UGX
                                                <?php else: ?>
                                                    Free
                                                <?php endif; ?>
                                            </td>
                                            <td class="px-6 py-4">
                                                <code class="text-[10px] text-gray-400 font-mono bg-white/5 px-2 py-1 rounded"><?php echo e($earn->transaction_ref ?? 'N/A'); ?></code>
                                            </td>
                                            <td class="px-6 py-4">
                                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-green-500/10 text-green-400 border border-green-500/20">
                                                    <?php echo e($earn->status); ?>

                                                </span>
                                            </td>
                                            <td class="px-6 py-4 text-gray-400">
                                                <?php echo e($earn->created_at->format('M d, Y H:i')); ?>

                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                        <tr>
                                            <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                                                No payments recorded matching your filters.
                                            </td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination links -->
                        <?php if($earnings->hasPages()): ?>
                            <div class="px-6 py-4 border-t border-white/5">
                                <?php echo e($earnings->appends(request()->query())->links()); ?>

                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Withdrawal History Ledger -->
                    <div class="bg-darkCard border border-white/10 rounded-3xl overflow-hidden shadow-2xl mt-8">
                        <div class="px-6 py-5 border-b border-white/10 flex justify-between items-center">
                            <h3 class="font-outfit font-black text-xl text-white">Withdrawal History</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-white/5 bg-white/[0.02] text-[10px] font-bold text-gray-400 uppercase tracking-wider">
                                        <th class="px-6 py-4">Beneficiary Name</th>
                                        <th class="px-6 py-4">Phone Number</th>
                                        <th class="px-6 py-4">Withdrawal Amount</th>
                                        <th class="px-6 py-4">Processing Charge</th>
                                        <th class="px-6 py-4">Total Deducted</th>
                                        <th class="px-6 py-4">Reference</th>
                                        <th class="px-6 py-4">Status</th>
                                        <th class="px-6 py-4">Date</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-white/5 text-xs text-gray-300">
                                    <?php $__empty_1 = true; $__currentLoopData = $withdrawals; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $wd): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <tr class="hover:bg-white/[0.01] transition duration-200">
                                            <td class="px-6 py-4 font-semibold text-white">
                                                <?php echo e($wd->customer_name ?? 'N/A'); ?>

                                            </td>
                                            <td class="px-6 py-4">
                                                <?php echo e($wd->phone); ?>

                                            </td>
                                            <td class="px-6 py-4 font-bold text-white">
                                                <?php echo e(number_format($wd->amount)); ?> UGX
                                            </td>
                                            <td class="px-6 py-4 text-gray-400">
                                                <?php echo e(number_format($wd->charge)); ?> UGX
                                            </td>
                                            <td class="px-6 py-4 font-semibold text-emerald-400">
                                                <?php echo e(number_format($wd->amount + $wd->charge)); ?> UGX
                                            </td>
                                            <td class="px-6 py-4">
                                                <code class="text-[10px] text-gray-400 font-mono bg-white/5 px-2 py-1 rounded"><?php echo e($wd->reference); ?></code>
                                            </td>
                                            <td class="px-6 py-4">
                                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-green-500/10 text-green-400 border border-green-500/20">
                                                    <?php echo e($wd->status); ?>

                                                </span>
                                            </td>
                                            <td class="px-6 py-4 text-gray-400">
                                                <?php echo e($wd->created_at->format('M d, Y H:i')); ?>

                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                        <tr>
                                            <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                                                No withdrawals processed yet.
                                            </td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Withdrawal Modal -->
                    <template x-if="openWithdrawModal">
                        <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
                            <div class="bg-darkCard border border-white/10 rounded-3xl w-full max-w-md p-6 shadow-2xl relative">
                                <h3 class="font-outfit font-black text-xl mb-4 text-white">Withdraw Funds (Uganda MM)</h3>
                                
                                <!-- Step 1: Input details -->
                                <div x-show="!isValidated" class="space-y-4">
                                    <div>
                                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Phone Number</label>
                                        <input type="text" x-model="phone" placeholder="e.g. 0703560861" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-sm">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Amount (UGX)</label>
                                        <input type="number" x-model="amount" min="5000" placeholder="Minimum 5,000 UGX" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-sm">
                                    </div>
                                    
                                    <div x-show="errorMessage" class="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-xl px-3 py-2" x-text="errorMessage"></div>

                                    <div class="flex gap-4 pt-4 border-t border-white/5">
                                        <button type="button" @click="openWithdrawModal = false; resetForm()" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Cancel</button>
                                        <button type="button" @click="validateDetails()" :disabled="isValidating || !phone || !amount" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold flex items-center justify-center gap-2">
                                            <span x-show="isValidating" class="w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin"></span>
                                            Validate Number
                                        </button>
                                    </div>
                                </div>

                                <!-- Step 2: Confirmation -->
                                <div x-show="isValidated" class="space-y-4">
                                    <div class="bg-white/5 border border-white/10 rounded-xl p-4 space-y-3">
                                        <div class="flex justify-between border-b border-white/5 pb-2">
                                            <span class="text-xs text-gray-400">Recipient Name:</span>
                                            <span class="text-xs font-bold text-white" x-text="customerName"></span>
                                        </div>
                                        <div class="flex justify-between border-b border-white/5 pb-2">
                                            <span class="text-xs text-gray-400">Phone Number:</span>
                                            <span class="text-xs font-bold text-white" x-text="validatedPhone"></span>
                                        </div>
                                        <div class="flex justify-between border-b border-white/5 pb-2">
                                            <span class="text-xs text-gray-400">Withdrawal Amount:</span>
                                            <span class="text-xs font-bold text-white" x-text="Number(amount).toLocaleString() + ' UGX'"></span>
                                        </div>
                                        <div class="flex justify-between border-b border-white/5 pb-2">
                                            <span class="text-xs text-gray-400">Processing Charge:</span>
                                            <span class="text-xs font-bold text-amber-400" x-text="Number(calculatedCharge).toLocaleString() + ' UGX'"></span>
                                        </div>
                                        <div class="flex justify-between pt-1">
                                            <span class="text-xs font-bold text-gray-400">Total Deduction:</span>
                                            <span class="text-xs font-black text-goldAccent" x-text="Number(calculatedTotal).toLocaleString() + ' UGX'"></span>
                                        </div>
                                    </div>

                                    <div x-show="errorMessage" class="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-xl px-3 py-2" x-text="errorMessage"></div>
                                    <div x-show="successMessage" class="text-xs text-green-400 bg-green-500/10 border border-green-500/20 rounded-xl px-3 py-2" x-text="successMessage"></div>

                                    <div class="flex gap-4 pt-4 border-t border-white/5" x-show="!successMessage">
                                        <button type="button" @click="isValidated = false; errorMessage = ''" :disabled="isConfirming" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-semibold text-white">Back</button>
                                        <button type="button" @click="confirmWithdraw()" :disabled="isConfirming" class="flex-1 py-3 bg-emerald-500 text-black hover:bg-emerald-400 rounded-xl text-sm font-semibold flex items-center justify-center gap-2">
                                            <span x-show="isConfirming" class="w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin"></span>
                                            Confirm & Transfer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                </div>
            <?php endif; ?>

            <!-- ── TAB: PUSH NOTIFICATIONS ─────────────────────────────────── -->
            <?php if($tab === 'notifications'): ?>
                <div class="bg-darkCard/60 border border-white/5 rounded-2xl p-6 max-w-2xl custom-blur">
                    <h3 class="font-outfit font-black text-xl mb-6 text-white">Send Push Notification</h3>
                    <form action="<?php echo e(route('admin.notifications.send')); ?>" method="POST" enctype="multipart/form-data" class="space-y-6">
                        <?php echo csrf_field(); ?>

                        <!-- Destination / Target -->
                        <div>
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Recipient Target</label>
                            <select name="target" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent font-semibold">
                                <option value="all" class="bg-darkCard text-white font-semibold">📢 Broadcast to All Users (Topic: all_users)</option>
                                <?php $__currentLoopData = $usersWithFcm; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($u->id); ?>" class="bg-darkCard text-white"><?php echo e($u->name); ?> (<?php echo e($u->email); ?>)</option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                            <span class="text-[10px] text-gray-500 mt-1 block">Send to all active users or pick a user with a registered device token.</span>
                        </div>

                        <!-- Title -->
                        <div>
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Notification Title</label>
                            <input type="text" name="title" placeholder="e.g. New Winning Banker prediction posted!" required class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent font-semibold">
                        </div>

                        <!-- Body -->
                        <div>
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Notification Message (Body)</label>
                            <textarea name="body" rows="4" placeholder="Type notification message here..." required class="w-full bg-white/5 border border-white/10 rounded-xl p-4 text-white focus:outline-none focus:border-goldAccent text-sm leading-relaxed"></textarea>
                        </div>

                        <!-- Image options -->
                        <div x-data="{ imageType: 'upload' }">
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Notification Image (Optional)</label>
                            <div class="flex gap-4 mb-3">
                                <label class="flex items-center gap-2 text-xs text-gray-300 cursor-pointer">
                                    <input type="radio" x-model="imageType" value="upload" class="accent-goldAccent"> Upload File
                                </label>
                                <label class="flex items-center gap-2 text-xs text-gray-300 cursor-pointer">
                                    <input type="radio" x-model="imageType" value="url" class="accent-goldAccent"> Image URL
                                </label>
                            </div>

                            <!-- Upload Input -->
                            <div x-show="imageType === 'upload'" class="border-2 border-dashed border-white/10 hover:border-goldAccent/30 rounded-2xl p-6 text-center cursor-pointer transition relative">
                                <input type="file" name="image" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*">
                                <svg class="w-8 h-8 text-gray-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.9 2.9m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>
                                <span class="text-xs text-gray-400 font-bold block">Drag & drop or click to choose file</span>
                                <span class="text-[10px] text-gray-500 mt-1 block">Supports JPEG, PNG, WEBP (Max 4MB)</span>
                            </div>

                            <!-- URL Input -->
                            <div x-show="imageType === 'url'">
                                <input type="url" name="image_url" placeholder="https://example.com/banner.jpg" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-goldAccent text-sm">
                                <span class="text-[10px] text-gray-500 mt-1 block">Paste direct image URL with https.</span>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="flex gap-4 pt-4 border-t border-white/5">
                            <button type="submit" class="flex-1 py-3 bg-goldAccent text-black hover:bg-yellow-400 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 shadow-lg shadow-goldAccent/10 transition">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
                                Broadcast Notification
                            </button>
                        </div>
                    </form>
                </div>
            <?php endif; ?>

        </div>
    </main>

</body>
</html>
<?php /**PATH /Users/apple/Dev/laravel/metrix/resources/views/admin/dashboard.blade.php ENDPATH**/ ?>