@extends('master-admin')

@section('content')
<section class="py-8">
    <div class="max-w-7xl mx-auto px-4">
        <div class="mb-6">
            @if(session('success'))
                <div class="bg-green-100 border border-green-300 text-green-700 rounded-lg px-6 py-4 mb-4">
                    {{ session('success') }}
                </div>
            @elseif(session('error'))
                <div class="bg-red-100 border border-red-300 text-red-700 rounded-lg px-6 py-4 mb-4">
                    {{ session('error') }}
                </div>
            @endif
        </div>
        <!-- Dashboard Widgets -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-[#3a3058] mb-2">{{ $totalUsers ?? 0 }}</div>
                <div class="text-gray-600">Total Users</div>
            </div>
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-[#3a3058] mb-2">{{ $activeShortUrls ?? 0 }}</div>
                <div class="text-gray-600">Active Short URLs</div>
            </div>
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-[#3a3058] mb-2">{{ $pendingApprovals ?? 0 }}</div>
                <div class="text-gray-600">Pending Approvals</div>
            </div>
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-[#3a3058] mb-2">₹{{ number_format($totalRevenue ?? 0) }}</div>
                <div class="text-gray-600">Total Revenue</div>
            </div>
            <!-- New Widgets -->
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-blue-600 mb-2">{{ $usersToday ?? 0 }}</div>
                <div class="text-gray-600">Users Registered Today</div>
            </div>
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-green-600 mb-2">{{ $urlsToday ?? 0 }}</div>
                <div class="text-gray-600">Short URLs Created Today</div>
            </div>
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-yellow-600 mb-2">₹{{ number_format($revenueToday ?? 0) }}</div>
                <div class="text-gray-600">Revenue Today</div>
            </div>
            <div class="bg-white rounded-xl shadow p-6 flex flex-col items-center">
                <div class="text-3xl font-bold text-pink-600 mb-2">{{ $pendingPrefixes ?? 0 }}</div>
                <div class="text-gray-600">Prefixes Awaiting Approval</div>
            </div>
        </div>
        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="text-lg font-semibold text-[#3a3058] mb-4">User Growth (Last 6 Months)</h3>
                <canvas id="userGrowthChart" height="120"
                    data-chart='@json($userGrowthChartData ?? [])'
                    data-labels='@json($userGrowthChartLabels ?? [])'></canvas>
            </div>
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="text-lg font-semibold text-[#3a3058] mb-4">Short URLs Created (Last 6 Months)</h3>
                <canvas id="urlChart" height="120"
                    data-chart='@json($urlChartData ?? [])'
                    data-labels='@json($urlChartLabels ?? [])'></canvas>
            </div>
        </div>
    </div>
</section>
@stop

@push('post_js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function renderChart(canvasId, chartType, chartData, chartLabels, color) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    new Chart(ctx, {
        type: chartType,
        data: {
            labels: chartLabels,
            datasets: [{
                label: canvasId === 'userGrowthChart' ? 'Users' : 'Short URLs',
                data: chartData,
                backgroundColor: chartType === 'bar' ? color : 'rgba(58,48,88,0.1)',
                borderColor: '#3a3058',
                borderWidth: 2,
                fill: chartType !== 'bar',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });
}
document.addEventListener('DOMContentLoaded', function() {
    const userGrowth = document.getElementById('userGrowthChart');
    if (userGrowth) {
        renderChart(
            'userGrowthChart',
            'line',
            JSON.parse(userGrowth.getAttribute('data-chart') || '[]'),
            JSON.parse(userGrowth.getAttribute('data-labels') || '[]'),
            '#3a3058'
        );
    }
    const urlChart = document.getElementById('urlChart');
    if (urlChart) {
        renderChart(
            'urlChart',
            'bar',
            JSON.parse(urlChart.getAttribute('data-chart') || '[]'),
            JSON.parse(urlChart.getAttribute('data-labels') || '[]'),
            '#facc15'
        );
    }
});
</script>
@endpush