<?php $__env->startSection('content'); ?>

<style>
/* =========================
   ANIMATION & BASE
========================= */
.fade-section {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-section.show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* =========================
   HERO & CARD STYLES
========================= */
.hero-welcome {
    background: linear-gradient(135deg, #091426 0%, #1e293b 100%);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.stat-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    padding: 16px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.06);
    border-color: rgba(203, 213, 225, 1);
}

.card-title {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.card-value {
    margin-top: 4px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

@media (min-width: 640px) {
    .card-title { font-size: 0.85rem; }
    .card-value { font-size: 1.35rem; margin-top: 6px; }
    .stat-card { padding: 20px; }
}

.icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =========================
   LEADERBOARD MODAL SHEET
========================= */
#leaderboardModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#leaderboardModal.show {
    opacity: 1;
    visibility: visible;
}

.leaderboard-sheet {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.15);
}

#leaderboardModal.show .leaderboard-sheet {
    transform: translateY(0);
}

.sheet-bar {
    width: 48px;
    height: 5px;
    background: #e2e8f0;
    border-radius: 999px;
    margin: 12px auto 16px;
}

.sheet-header {
    padding: 0 20px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.sheet-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 20px 24px;
}

.rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f8fafc;
}

.rank-item:last-child {
    border-bottom: none;
}

.rank-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rank-number {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: #f1f5f9;
    color: #475569;
}

.rank-number.gold { background: #fef3c7; color: #d97706; }
.rank-number.silver { background: #f1f5f9; color: #64748b; }
.rank-number.bronze { background: #ffedd5; color: #c2410c; }

.rank-user { font-weight: 700; font-size: 0.85rem; color: #0f172a; }
.rank-orders { color: #64748b; font-size: 0.75rem; }

/* =========================
   CHART CARD
========================= */
.chart-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 16px sm:p-20;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.chart-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.chart-subtitle {
    color: #64748b;
    font-size: 0.72rem;
}

.apexcharts-tooltip {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
</style>

<main class="space-y-4 sm:space-y-6 font-['Inter',sans-serif]">

    <!-- 🌟 SECTION 1: HERO WELCOME BANNER -->
    <section class="fade-section hero-welcome p-5 sm:p-7 text-white shadow-lg">
        <div class="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div class="space-y-1">
                <h1 class="text-xl sm:text-2xl font-extrabold tracking-tight">
                    Hai <span class="text-blue-400"><?php echo e(auth()->user()->name ?? 'User'); ?></span>
                </h1>
                <p class="text-slate-300 text-xs sm:text-sm max-w-md leading-relaxed">
                    Dapatkan nomor virtual instan 24 jam dengan sistem verifikasi OTP cepat & terpercaya.
                </p>
            </div>
            
            <div class="flex items-center gap-2.5 shrink-0 pt-2 sm:pt-0">
                <a href="<?php echo e(route('deposit')); ?>" 
                   class="flex-1 sm:flex-none justify-center px-4 py-2 sm:py-2.5 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold text-xs sm:text-sm transition-all duration-200 shadow-md shadow-blue-600/30 flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[18px]">add_circle</span>
                    <span>Isi Saldo</span>
                </a>
                <a href="<?php echo e(route('orderv2.index')); ?>" 
                   class="flex-1 sm:flex-none justify-center px-4 py-2 sm:py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 font-semibold text-xs sm:text-sm transition-all duration-200 flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[18px]">shopping_cart</span>
                    <span>Beli OTP</span>
                </a>
            </div>
        </div>
        <!-- Ambient Decor -->
        <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-600/20 rounded-full blur-2xl pointer-events-none"></div>
    </section>

    <!-- 📊 SECTION 2: STATS CARDS (Responsive: 2 Kolom di HP, 4 Kolom di PC) -->
    <section class="fade-section grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">

        <!-- CARD SALDO UTAMA -->
        <div class="stat-card col-span-2 sm:col-span-1 bg-gradient-to-br from-blue-50/60 via-white to-blue-50/20 border-blue-100">
            <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                    <p class="card-title text-blue-600">Saldo</p>
                    <h3 class="card-value text-blue-950 truncate">
                        Rp <?php echo e(number_format($balance,0,',','.')); ?>

                    </h3>
                </div>
                <div class="icon-box bg-blue-600 text-white shadow-sm shadow-blue-500/20">
                    <span class="material-symbols-outlined text-[20px]">account_balance_wallet</span>
                </div>
            </div>
        </div>

        <!-- TOTAL DEPOSIT -->
        <div class="stat-card col-span-1">
            <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                    <p class="card-title">Deposit</p>
                    <h3 class="card-value truncate">
                        Rp <?php echo e(number_format($deposits,0,',','.')); ?>

                    </h3>
                </div>
                <div class="icon-box bg-sky-50 text-sky-600 border border-sky-100">
                    <span class="material-symbols-outlined text-[20px]">payments</span>
                </div>
            </div>
        </div>

        <!-- TOTAL ORDER -->
        <div class="stat-card col-span-1">
            <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                    <p class="card-title">Pembelian</p>
                    <h3 class="card-value truncate">
                        <?php echo e(number_format($orders)); ?>

                    </h3>
                </div>
                <div class="icon-box bg-indigo-50 text-indigo-600 border border-indigo-100">
                    <span class="material-symbols-outlined text-[20px]">shopping_bag</span>
                </div>
            </div>
        </div>

        <!-- SUCCESS RATE CARD -->
        <div class="stat-card col-span-2 sm:col-span-1">
            <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                    <p class="card-title">Pembelian Berhasil</p>
                    <h3 class="card-value text-emerald-600 truncate">
                        <?php echo e(number_format($successRate,1)); ?>%
                    </h3>
                </div>
                <div class="icon-box bg-emerald-50 text-emerald-600 border border-emerald-100">
                    <span class="material-symbols-outlined text-[20px]">verified</span>
                </div>
            </div>
            <div class="w-full bg-slate-100 h-1.5 rounded-full mt-2.5 overflow-hidden">
                <div class="bg-emerald-500 h-full rounded-full" style="width: <?php echo e($successRate); ?>%"></div>
            </div>
        </div>

    </section>

    <!-- 🏆 SECTION 3: LEADERBOARD BANNER -->
    <section class="fade-section">
        <button id="openLeaderboard"
            class="w-full bg-white hover:bg-slate-50 border border-slate-200/80 rounded-2xl p-3.5 sm:p-4 flex items-center justify-between shadow-sm transition-all duration-200 group">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-amber-50 text-amber-600 border border-amber-100 flex items-center justify-center text-lg shrink-0 group-hover:scale-105 transition-transform">
                    🏆
                </div>
                <div class="text-left">
                    <div class="font-bold text-slate-900 text-xs sm:text-sm">Leaderboard User Teratas</div>
                    <div class="text-[11px] text-slate-500 mt-0.5">Top 10 pengguna dengan pembelian terbanyak</div>
                </div>
            </div>
            <div class="flex items-center gap-1 text-xs font-semibold text-blue-600 group-hover:translate-x-1 transition-transform">
                <span class="hidden sm:inline">Lihat Ranking</span>
                <span class="material-symbols-outlined text-[18px]">chevron_right</span>
            </div>
        </button>
    </section>
<!-- 📈 SECTION 4: CHARTS SECTION -->
<section class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4 fade-section">
    
    <!-- ORDERS CHART -->
    <div class="chart-card p-4 sm:p-5 bg-white border border-slate-200/80 rounded-2xl shadow-sm">
        <div class="flex items-center justify-between mb-1">
            <div>
                <h3 class="chart-title text-sm sm:text-base font-bold text-slate-900">Statistik Pembelian</h3>
                <p class="chart-subtitle text-[11px] sm:text-xs text-slate-500">Grafik transaksi terbaru</p>
            </div>
            <span class="p-1.5 rounded-xl bg-blue-50 text-blue-600">
                <span class="material-symbols-outlined text-[18px]">show_chart</span>
            </span>
        </div>
        <div id="ordersChart" class="-mx-2"></div>
    </div>

    <!-- SPENDING CHART -->
    <div class="chart-card p-4 sm:p-5 bg-white border border-slate-200/80 rounded-2xl shadow-sm">
        <div class="flex items-center justify-between mb-1">
            <div>
                <h3 class="chart-title text-sm sm:text-base font-bold text-slate-900">Statistik Deposit</h3>
                <p class="chart-subtitle text-[11px] sm:text-xs text-slate-500">Grafik pengisian saldo terbaru</p>
            </div>
            <span class="p-1.5 rounded-xl bg-indigo-50 text-indigo-600">
                <span class="material-symbols-outlined text-[18px]">bar_chart</span>
            </span>
        </div>
        <div id="spendingChart" class="-mx-2"></div>
    </div>

</section>

    <!-- Leaderboard Modal Sheet -->
    <div id="leaderboardModal">
        <div class="leaderboard-sheet">
            <div class="sheet-bar"></div>
            <div class="sheet-header">
                <div class="flex justify-between items-center">
                    <div>
                        <h2 class="text-base font-bold text-slate-900 flex items-center gap-2">
                            <span>🏆</span> Leaderboard User
                        </h2>
                        <p class="text-slate-500 text-xs">Top 10 Pengguna dengan Pembelian Berhasil</p>
                    </div>
                    <button id="closeLeaderboardBtn" class="w-8 h-8 rounded-full hover:bg-slate-100 flex items-center justify-center text-slate-500 text-lg font-medium transition">
                        ×
                    </button>
                </div>
            </div>

            <div class="sheet-body">
                <?php $__currentLoopData = $topUsers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="rank-item">
                    <div class="rank-left">
                        <div class="rank-number
                            <?php if($i==0): ?> gold
                            <?php elseif($i==1): ?> silver
                            <?php elseif($i==2): ?> bronze
                            <?php endif; ?>">
                            <?php echo e($i+1); ?>

                        </div>
                        <div>
                            <div class="rank-user"><?php echo e($user->masked_name); ?></div>
                            <div class="rank-orders"><?php echo e(number_format($user->orders_count)); ?> Pembelian Berhasil</div>
                        </div>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </div>

    <!-- FOOTER INCLUSION -->
    <?php echo $__env->make('components.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

</main>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
// ApexCharts Light Theme
const orderOptions = {
    chart: {
        type: 'area',
        height: 140,
        toolbar: { show: false },
        background: 'transparent',
        sparkline: { enabled: false }
    },
    theme: { mode: 'light' },
    stroke: { curve: 'smooth', width: 3 },
    series: [{
        name: 'Pembelian',
        data: <?php echo json_encode($ordersChart, 15, 512) ?>
    }],
    colors: ['#2563eb'],
    fill: {
        type: 'gradient',
        gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.25,
            opacityTo: 0.0,
            stops: [0, 95, 100]
        }
    },
    grid: {
        borderColor: '#f1f5f9',
        strokeDashArray: 4,
        padding: { top: 0, right: 0, bottom: 0, left: 10 }
    },
    xaxis: {
        categories: <?php echo json_encode($chartLabels, 15, 512) ?>,
        labels: { style: { colors: '#94a3b8', fontSize: '10px' } },
        axisBorder: { show: false },
        axisTicks: { show: false }
    },
    yaxis: {
        labels: { style: { colors: '#94a3b8', fontSize: '10px' } }
    },
    legend: { show: false }
};

const ordersChart = new ApexCharts(document.querySelector("#ordersChart"), orderOptions);
ordersChart.render();

const spendingOptions = {
    chart: {
        type: 'bar',
        height: 140,
        toolbar: { show: false },
        background: 'transparent'
    },
    theme: { mode: 'light' },
    series: [{
        name: 'Deposit',
        data: <?php echo json_encode($depositChart, 15, 512) ?>
    }],
    colors: ['#6366f1'],
    plotOptions: {
        bar: {
            borderRadius: 6,
            columnWidth: '50%'
        }
    },
    dataLabels: { enabled: false },
    grid: {
        borderColor: '#f1f5f9',
        strokeDashArray: 4,
        padding: { top: 0, right: 0, bottom: 0, left: 10 }
    },
    xaxis: {
        categories: <?php echo json_encode($chartLabels, 15, 512) ?>,
        labels: { style: { colors: '#94a3b8', fontSize: '10px' } },
        axisBorder: { show: false },
        axisTicks: { show: false }
    },
    yaxis: {
        labels: { style: { colors: '#94a3b8', fontSize: '10px' } }
    }
};

const spendingChart = new ApexCharts(document.querySelector("#spendingChart"), spendingOptions);
spendingChart.render();

// Realtime Update Chart
setInterval(() => {
    fetch("<?php echo e(route('dashboard.chart')); ?>")
    .then(res => res.json())
    .then(res => {
        ordersChart.updateSeries([{ data: res.orders }]);
        spendingChart.updateSeries([{ data: res.deposits }]);
    }).catch(err => {});
}, 20000);

// Intersection Observer Fade Animation
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if(entry.isIntersecting){
            entry.target.classList.add('show');
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));

// Modal Leaderboard Logic
const modal = document.getElementById('leaderboardModal');
const openBtn = document.getElementById('openLeaderboard');
const closeBtn = document.getElementById('closeLeaderboardBtn');

openBtn.onclick = () => {
    modal.classList.add('show');
    document.body.style.overflow = 'hidden';
};

function closeLeaderboard(){
    modal.classList.remove('show');
    document.body.style.overflow = '';
}

closeBtn.onclick = closeLeaderboard;
modal.onclick = (e) => {
    if(e.target === modal) closeLeaderboard();
};
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/nusaotp/public_html/resources/views/dashboard/index.blade.php ENDPATH**/ ?>