@extends('admin.layout.app')
@section('content')
    <div class="px-4 py-8 sm:px-6 lg:px-8 max-w-9xl mx-auto">
        <!-- Dashboard Header -->
        <div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-4">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 tracking-tight">Overview Dashboard</h2>
                <p class="text-base text-gray-500 mt-2">Welcome back! Here is what's happening across your platform today.</p>
            </div>
            <div class="flex items-center gap-3">
                <div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-lg font-medium text-sm border border-blue-100 flex items-center shadow-sm">
                    <i class="mdi mdi-calendar-clock text-lg mr-2"></i> {{ date('F d, Y') }}
                </div>
            </div>
        </div>

        @php
            $cards = [
                ['label' => 'Banners', 'value' => $banner, 'icon' => 'mdi-image-multiple', 'text_color' => 'text-indigo-600', 'bg_color' => 'bg-indigo-50', 'bar_color' => 'bg-indigo-500'],
                ['label' => 'Users', 'value' => $user, 'icon' => 'mdi-account-group', 'text_color' => 'text-blue-600', 'bg_color' => 'bg-blue-50', 'bar_color' => 'bg-blue-500'],
                ['label' => 'FAQs', 'value' => $faq, 'icon' => 'mdi-comment-question-outline', 'text_color' => 'text-cyan-600', 'bg_color' => 'bg-cyan-50', 'bar_color' => 'bg-cyan-500'],
                ['label' => 'Feedback', 'value' => $feedBack, 'icon' => 'mdi-message-reply-text', 'text_color' => 'text-amber-600', 'bg_color' => 'bg-amber-50', 'bar_color' => 'bg-amber-500'],
                ['label' => 'Servers', 'value' => $server, 'icon' => 'mdi-server', 'text_color' => 'text-emerald-600', 'bg_color' => 'bg-emerald-50', 'bar_color' => 'bg-emerald-500'],
                ['label' => 'Free Subs', 'value' => $freeSubscription, 'icon' => 'mdi-cube-outline', 'text_color' => 'text-purple-600', 'bg_color' => 'bg-purple-50', 'bar_color' => 'bg-purple-500'],
                ['label' => 'Paid Subs', 'value' => $subscription, 'icon' => 'mdi-check-decagram', 'text_color' => 'text-rose-600', 'bg_color' => 'bg-rose-50', 'bar_color' => 'bg-rose-500'],
            ];
            $total = array_sum(array_column($cards, 'value'));
        @endphp

        <!-- Metrics Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-10">
            @foreach ($cards as $card)
                @php
                    $percent = $total > 0 ? round(($card['value'] / $total) * 100) : 0;
                @endphp
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 relative overflow-hidden group cursor-default">
                    <!-- Background Glow Element -->
                    <div class="absolute -right-6 -top-6 w-24 h-24 rounded-full {{ $card['bg_color'] }} opacity-50 group-hover:scale-[2] transition-transform duration-700 ease-out z-0"></div>
                    
                    <div class="relative z-10 flex justify-between items-start mb-4">
                        <div>
                            <p class="text-sm font-semibold text-gray-500 mb-1 uppercase tracking-wider">{{ $card['label'] }}</p>
                            <h3 class="text-3xl font-extrabold text-gray-900 tracking-tight">{{ $card['value'] }}</h3>
                        </div>
                        <div class="w-14 h-14 rounded-2xl {{ $card['bg_color'] }} {{ $card['text_color'] }} flex items-center justify-center shadow-inner group-hover:scale-110 transition-transform duration-300">
                            <i class="mdi {{ $card['icon'] }} text-3xl"></i>
                        </div>
                    </div>
                    
                    <div class="relative z-10 mt-5">
                        <div class="w-full bg-gray-100 rounded-full h-1.5 mb-2 overflow-hidden flex">
                            <div class="{{ $card['bar_color'] }} h-1.5 rounded-full" style="width: {{ $percent }}%; transition: width 1s ease-in-out;"></div>
                        </div>
                        <div class="flex justify-between items-center">
                            <p class="text-xs font-medium text-gray-400">{{ $percent }}% volume ratio</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Charts Grid -->
        <div class="grid grid-cols-1 xl:grid-cols-2 gap-8 mb-8">
            <!-- Bandwidth Chart Container -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-300">
                <div class="mb-6 flex justify-between items-start">
                    <div>
                        <h4 class="text-xl font-bold text-gray-900 tracking-tight">Top Bandwidth Consumers</h4>
                        <p class="text-sm text-gray-500 mt-1">Users ranked by highest assigned bandwidth</p>
                    </div>
                    <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shadow-inner">
                        <i class="mdi mdi-chart-areaspline text-2xl"></i>
                    </div>
                </div>
                <!-- Note from admin: Hover over the eye icons on the graph to see exactly which user it belongs to -->
                <div class="relative h-80 w-full mt-4">
                    <canvas id="bandwidthChart"></canvas>
                </div>
            </div>

            <!-- Data Usage Chart Container -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-300">
                <div class="mb-6 flex justify-between items-start">
                    <div>
                        <h4 class="text-xl font-bold text-gray-900 tracking-tight">Top Data Consumers</h4>
                        <p class="text-sm text-gray-500 mt-1">Users ranked by active data consumption</p>
                    </div>
                    <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shadow-inner">
                        <i class="mdi mdi-chart-histogram text-2xl"></i>
                    </div>
                </div>
                <div class="relative h-80 w-full mt-4">
                    <canvas id="dataUsageChart"></canvas>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('customJs')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        Chart.defaults.font.family = "'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
        Chart.defaults.color = '#9ca3af';
        Chart.defaults.scale.grid.color = '#f3f4f6';

        document.addEventListener("DOMContentLoaded", function() {
            // Setup custom tooltip handler template
            const setupCustomTooltip = (unit) => ({
                backgroundColor: 'rgba(17, 24, 39, 0.95)', // gray-900 with opacity
                padding: 14,
                titleFont: { size: 14, family: 'Inter' },
                titleColor: '#e5e7eb', // gray-200
                bodyFont: { size: 16, weight: 'bold', family: 'Inter' },
                bodyColor: '#60a5fa', // blue-400
                cornerRadius: 12,
                displayColors: false,
                callbacks: {
                    title: function(context) { return "User: " + context[0].label; },
                    label: function(context) { return context.parsed.y + ' ' + unit; }
                }
            });

            // Bandwidth Chart 
            var bCtx = document.getElementById('bandwidthChart').getContext('2d');
            var bgBlueGradiant = bCtx.createLinearGradient(0, 0, 0, 400);
            bgBlueGradiant.addColorStop(0, 'rgba(59, 130, 246, 0.85)');
            bgBlueGradiant.addColorStop(1, 'rgba(59, 130, 246, 0.1)');

            new Chart(bCtx, {
                type: 'bar',
                data: {
                    labels: @json($users->map(fn($user) => $user->name)),
                    datasets: [{
                        data: @json($users->pluck('bandwidth')),
                        backgroundColor: bgBlueGradiant,
                        borderRadius: 6,
                        borderSkipped: false,
                        barPercentage: 0.6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: setupCustomTooltip('Units')
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { borderDash: [4, 4], drawBorder: false },
                            ticks: { padding: 10 }
                        },
                        x: {
                            grid: { display: false, drawBorder: false },
                            ticks: { 
                                display: false
                            }
                        }
                    }
                }
            });

            // Data Usage Chart
            var dCtx = document.getElementById('dataUsageChart').getContext('2d');
            var bgGreenGradiant = dCtx.createLinearGradient(0, 0, 0, 400);
            bgGreenGradiant.addColorStop(0, 'rgba(16, 185, 129, 0.85)');
            bgGreenGradiant.addColorStop(1, 'rgba(16, 185, 129, 0.1)');

            new Chart(dCtx, {
                type: 'bar',
                data: {
                    labels: @json($dataUsers->map(fn($user) => $user->name)),
                    datasets: [{
                        data: @json($dataUsers->pluck('data_use')),
                        backgroundColor: bgGreenGradiant,
                        borderRadius: 6,
                        borderSkipped: false,
                        barPercentage: 0.6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            ...setupCustomTooltip('MB'),
                            bodyColor: '#34d399' // emerald-400
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { borderDash: [4, 4], drawBorder: false },
                            ticks: { padding: 10 }
                        },
                        x: {
                            grid: { display: false, drawBorder: false },
                            ticks: { 
                                display: false
                            }
                        }
                    }
                }
            });
        });
    </script>
@endsection