@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@section('content')
    <div class="col-span-12">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">{{ \App\Http\Helpers\MenuHelper::getPageTitle() }}</h1>

        <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Visits</p>
                <p class="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">{{ number_format($totalVisits) }}</p>
            </div>
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Unique IPs</p>
                <p class="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">{{ number_format($uniqueIps) }}</p>
            </div>
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Today Visits</p>
                <p class="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">{{ number_format($todayVisits) }}</p>
            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 gap-5 lg:grid-cols-2">
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">Last 7 Days</h3>
                <canvas id="chart7Days"></canvas>
            </div>
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">Last 30 Days</h3>
                <canvas id="chart30Days"></canvas>
            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 gap-5 lg:grid-cols-2">
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">Devices</h3>
                <canvas id="chartDevices"></canvas>
            </div>
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">Browsers</h3>
                <canvas id="chartBrowsers"></canvas>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const chart7Days = document.getElementById('chart7Days');
        const chart30Days = document.getElementById('chart30Days');
        const chartDevices = document.getElementById('chartDevices');
        const chartBrowsers = document.getElementById('chartBrowsers');

        new Chart(chart7Days, {
            type: 'line',
            data: {
                labels: @json($last7Days->pluck('date')),
                datasets: [{
                    label: 'Visits',
                    data: @json($last7Days->pluck('count')),
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true,
                    tension: 0.3,
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false } },
            }
        });

        new Chart(chart30Days, {
            type: 'bar',
            data: {
                labels: @json($last30Days->pluck('date')),
                datasets: [{
                    label: 'Visits',
                    data: @json($last30Days->pluck('count')),
                    backgroundColor: '#3b82f6',
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false } },
            }
        });

        new Chart(chartDevices, {
            type: 'doughnut',
            data: {
                labels: @json($devices->keys()),
                datasets: [{
                    data: @json($devices->values()),
                    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom' } },
            }
        });

        new Chart(chartBrowsers, {
            type: 'doughnut',
            data: {
                labels: @json($browsers->keys()),
                datasets: [{
                    data: @json($browsers->values()),
                    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'],
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom' } },
            }
        });
    </script>
@endsection