<?php $__env->startSection('title', 'Overview - Centipid ISP CRM'); ?>
<?php $__env->startSection('breadcrumb_parent', 'Overview'); ?>
<?php $__env->startSection('breadcrumb_current', 'Dashboard'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    <!-- Top Welcome & Status Banner -->
    <div class="custom-card rounded-2xl p-6 relative overflow-hidden">
        <div class="flex items-center justify-between">
            <div>
                <div class="flex items-center gap-2 text-xs text-slate-400 font-semibold mb-1">
                    <span>DATA</span>
                    <span>&mdash;</span>
                    <span class="text-emerald-400 font-bold flex items-center gap-1">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                        <?php echo e($onlineNowCount); ?> ONLINE RIGHT NOW
                    </span>
                    <span>&mdash;</span>
                    <span>LATE SHIFT</span>
                </div>
                <h1 class="text-3xl font-extrabold text-white tracking-tight">
                    Good evening, <span class="text-orange-500">Chandra</span>.
                </h1>
                <p class="text-xs text-slate-400 mt-2 flex items-center gap-2">
                    <span class="text-amber-400 font-semibold">&bull; SMS credit low</span> &mdash; a few things need a minute.
                </p>
            </div>
            <div class="text-right">
                <p class="text-[10px] uppercase font-bold text-slate-500 tracking-widest">Traffic &bull; Last Hour</p>
                <p class="text-xs text-slate-400 font-mono mt-1">Peak: 1.2 Gbps &bull; Active</p>
            </div>
        </div>
    </div>

    <!-- Setup Account Checklist Card -->
    <div class="custom-card rounded-2xl p-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-sm font-bold text-white">Set up your account</h3>
                <p class="text-xs text-slate-400">2 of 6 done &bull; 4 steps left</p>
            </div>
            <div class="flex items-center gap-3">
                <div class="w-32 h-2 bg-[#27272a] rounded-full overflow-hidden">
                    <div class="bg-orange-500 h-full w-[33%]"></div>
                </div>
                <span class="text-xs font-bold text-slate-300">33%</span>
            </div>
        </div>

        <div class="bg-gradient-to-r from-orange-500 to-amber-600 p-4 rounded-xl flex items-center justify-between text-white shadow-lg cursor-pointer">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center font-bold text-sm">
                    3
                </div>
                <div>
                    <p class="text-[10px] uppercase font-bold tracking-widest opacity-80">Next Step</p>
                    <p class="text-sm font-extrabold">Choose payment gateway integration</p>
                </div>
            </div>
            <i data-lucide="arrow-right" class="w-5 h-5"></i>
        </div>

        <div class="flex items-center gap-3 mt-4 text-xs font-semibold">
            <span class="text-slate-500">ALREADY DONE</span>
            <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                <i data-lucide="check" class="w-3.5 h-3.5"></i> Set network name & logo
            </span>
            <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                <i data-lucide="check" class="w-3.5 h-3.5"></i> Configure SMS provider
            </span>
        </div>
    </div>

    <!-- Subscriber Health Section -->
    <div class="space-y-3">
        <div class="flex items-center justify-between">
            <h3 class="text-sm font-bold text-white uppercase tracking-wider">Subscriber Health</h3>
            <span class="text-xs text-slate-400">Calculated in real-time</span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            <!-- At Risk -->
            <div class="custom-card p-5 rounded-2xl">
                <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">At Risk</p>
                <p class="text-3xl font-extrabold text-white mt-1"><?php echo e($atRiskCount); ?></p>
                <p class="text-[11px] text-slate-500 mt-1">no session in 30+ days</p>
            </div>

            <!-- Churned -->
            <div class="custom-card p-5 rounded-2xl">
                <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">Churned</p>
                <p class="text-3xl font-extrabold text-white mt-1"><?php echo e($churnedCount); ?></p>
                <p class="text-[11px] text-slate-500 mt-1">services cancelled</p>
            </div>

            <!-- Expiring in 7 Days -->
            <div class="custom-card p-5 rounded-2xl">
                <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">Expiring in 7D</p>
                <p class="text-3xl font-extrabold text-orange-500 mt-1"><?php echo e($expiring7DaysCount); ?></p>
                <p class="text-[11px] text-slate-500 mt-1">ending in next week</p>
            </div>
        </div>
    </div>

    <!-- Charts Row: Expiry Trend & Network Pulse Heatmap -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Expiry Trend Chart -->
        <div class="custom-card p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-sm font-bold text-white">Expiry Trend</h3>
                    <p class="text-xs text-slate-400">Expiries per day &bull; Last 14 days</p>
                </div>
                <span class="text-[11px] font-mono text-orange-500 bg-orange-500/10 px-2.5 py-1 rounded-md">Daily Forecast</span>
            </div>
            <div class="h-64 w-full">
                <canvas id="expiryChart"></canvas>
            </div>
        </div>

        <!-- Network Pulse Heatmap -->
        <div class="custom-card p-6 rounded-2xl flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-sm font-bold text-white">Your network's pulse</h3>
                        <p class="text-xs text-slate-400">Last 7 days &bull; day &times; hour &bull; by traffic volume</p>
                    </div>
                </div>

                <!-- Traffic Volume Heatmap Grid -->
                <div class="space-y-2 mt-4 text-xs font-mono">
                    <div class="grid grid-cols-6 gap-2 text-center text-slate-500 text-[10px] font-bold">
                        <div>DAY</div>
                        <div>00</div>
                        <div>06</div>
                        <div>12</div>
                        <div>18</div>
                        <div>24</div>
                    </div>

                    <?php $__currentLoopData = $days; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $d): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="grid grid-cols-6 gap-2 items-center text-center text-slate-400 text-[11px] font-bold">
                            <div class="text-left text-slate-500"><?php echo e($d); ?></div>
                            <?php $__currentLoopData = $timeBlocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $val = $heatmapMatrix[$d][$t] ?? 2;
                                    $bg = $val == 5 ? 'bg-orange-500 text-black' : ($val == 4 ? 'bg-amber-600/80 text-white' : ($val == 3 ? 'bg-amber-800/40 text-amber-200' : 'bg-[#222226] text-slate-500'));
                                ?>
                                <div class="<?php echo e($bg); ?> py-1.5 rounded-md font-bold transition-all hover:scale-105 cursor-pointer" title="<?php echo e($d); ?> <?php echo e($t); ?>:00 Traffic level <?php echo e($val); ?>/5">
                                    <?php echo e($val * 20); ?>%
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            <div class="mt-6 pt-4 border-t border-[#2a2a2e] flex justify-between text-center text-xs">
                <div>
                    <p class="text-slate-500 text-[10px]">Peak Hour</p>
                    <p class="font-bold text-orange-500">20:00 - 22:00</p>
                </div>
                <div>
                    <p class="text-slate-500 text-[10px]">Quietest</p>
                    <p class="font-bold text-slate-300">03:00 - 05:00</p>
                </div>
                <div>
                    <p class="text-slate-500 text-[10px]">Avg Bandwidth</p>
                    <p class="font-bold text-emerald-400">840 Mbps</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Operational Key Metrics Grid -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-5">
        <div class="custom-card p-5 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">Revenue Today</p>
            <p class="text-2xl font-extrabold text-white mt-1">Rs <?php echo e(number_format($revenueToday, 2)); ?></p>
            <p class="text-[11px] text-emerald-400 mt-1">&uarr; +18.4% vs yesterday</p>
        </div>

        <div class="custom-card p-5 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">Active Subscriptions</p>
            <p class="text-2xl font-extrabold text-white mt-1"><?php echo e($activeSubscriptionsCount); ?></p>
            <p class="text-[11px] text-slate-400 mt-1">PPPoE & Hotspot accounts</p>
        </div>

        <div class="custom-card p-5 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">Online Now</p>
            <p class="text-2xl font-extrabold text-emerald-400 mt-1"><?php echo e($onlineNowCount); ?></p>
            <p class="text-[11px] text-emerald-400 mt-1">Connected to RADIUS</p>
        </div>

        <div class="custom-card p-5 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">SMS Credits</p>
            <p class="text-2xl font-extrabold text-amber-400 mt-1">450</p>
            <p class="text-[11px] text-amber-400 mt-1">Refill recommended</p>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('expiryChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($expiryLabels, 15, 512) ?>,
                datasets: [{
                    label: 'Expiries',
                    data: <?php echo json_encode($expiryData, 15, 512) ?>,
                    backgroundColor: '#ff8800',
                    borderRadius: 4,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: { ticks: { color: '#71717a', font: { size: 10 } }, grid: { display: false } },
                    y: { ticks: { color: '#71717a', font: { size: 10 } }, grid: { color: '#27272a' } }
                }
            }
        });
    });
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\RentEz\Desktop\projects\billingCRM\resources\views/admin/dashboard.blade.php ENDPATH**/ ?>