@extends('admin.layouts.admin')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard-active')

@section('content')
    <div class="space-y-8">

        <!-- Top Stats Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 isolate">

            <!-- Total Revenue -->
            <div
                class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg p-6 text-white shadow-lg relative overflow-hidden group z-0">
                <div class="relative z-10 flex flex-col justify-between h-full">
                    <div class="flex justify-between items-start">
                        <p class="text-xs font-bold uppercase tracking-widest opacity-80">Total Revenue</p>
                        <i class="fas fa-chart-line opacity-50 text-xl group-hover:scale-110 transition-transform"></i>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-2xl font-black italic tracking-tight">$847,290</h3>
                        <p class="text-[10px] mt-2 font-medium"><i class="fas fa-long-arrow-alt-up mr-1 text-green-300"></i>
                            <span class="text-green-300">12.5%</span> from last month
                        </p>
                    </div>
                </div>
                <div class="absolute bottom-0 right-0 p-2 opacity-20">
                    <svg width="100" height="40" viewBox="0 0 100 40" stroke="white" fill="transparent">
                        <path d="M0 35 Q 25 20, 50 30 T 100 5" stroke-width="2" />
                    </svg>
                </div>
            </div>

            <!-- Active Users -->
            <div
                class="bg-gradient-to-r from-teal-400 to-cyan-500 rounded-lg p-6 text-white shadow-lg relative overflow-hidden group z-0">
                <div class="relative z-10 flex flex-col justify-between h-full">
                    <div class="flex justify-between items-start">
                        <p class="text-xs font-bold uppercase tracking-widest opacity-80">Active Users</p>
                        <i class="fas fa-users opacity-50 text-xl group-hover:scale-110 transition-transform"></i>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-2xl font-black italic tracking-tight">24,689</h3>
                        <p class="text-[10px] mt-2 font-medium"><i class="fas fa-long-arrow-alt-up mr-1 text-green-200"></i>
                            <span class="text-green-200">8.2%</span> from last week
                        </p>
                    </div>
                </div>
                <div class="absolute bottom-0 right-0 p-2 opacity-20">
                    <svg width="100" height="40" viewBox="0 0 100 40" stroke="white" fill="transparent">
                        <path d="M0 35 Q 25 10, 50 25 T 100 15" stroke-width="2" />
                    </svg>
                </div>
            </div>

            <!-- Orders -->
            <div
                class="bg-gradient-to-r from-green-400 to-green-600 rounded-lg p-6 text-white shadow-lg relative overflow-hidden group z-0">
                <div class="relative z-10 flex flex-col justify-between h-full">
                    <div class="flex justify-between items-start">
                        <p class="text-xs font-bold uppercase tracking-widest opacity-80">Orders</p>
                        <i class="fas fa-shopping-cart opacity-50 text-xl group-hover:scale-110 transition-transform"></i>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-2xl font-black italic tracking-tight">1,847</h3>
                        <p class="text-[10px] mt-2 font-medium"><i class="fas fa-long-arrow-alt-down mr-1 text-red-100"></i>
                            <span class="text-red-100">2.1%</span> from yesterday
                        </p>
                    </div>
                </div>
                <div class="absolute bottom-4 right-4 flex space-x-1 items-end opacity-20 h-8">
                    <div class="w-1 bg-white h-4 rounded-full"></div>
                    <div class="w-1 bg-white h-6 rounded-full"></div>
                    <div class="w-1 bg-white h-8 rounded-full"></div>
                    <div class="w-1 bg-white h-5 rounded-full"></div>
                </div>
            </div>

            <!-- Conversion Rate -->
            <div
                class="bg-gradient-to-r from-blue-400 to-blue-600 rounded-lg p-6 text-white shadow-lg relative overflow-hidden group z-0">
                <div class="relative z-10 flex flex-col justify-between h-full">
                    <div class="flex justify-between items-start">
                        <p class="text-xs font-bold uppercase tracking-widest opacity-80">Conversion Rate</p>
                        <i class="fas fa-percentage opacity-50 text-xl group-hover:scale-110 transition-transform"></i>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-2xl font-black italic tracking-tight">3.47%</h3>
                        <p class="text-[10px] mt-2 font-medium"><i class="fas fa-long-arrow-alt-up mr-1 text-green-200"></i>
                            <span class="text-green-200">0.3%</span> from last month
                        </p>
                    </div>
                </div>
                <div class="absolute bottom-0 right-0 p-2 opacity-20">
                    <svg width="100" height="40" viewBox="0 0 100 40" stroke="white" fill="transparent">
                        <path d="M0 35 L 20 20 L 40 30 L 70 5 L 100 15" stroke-width="2" />
                    </svg>
                </div>
            </div>

        </div>

        <!-- Analytics Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            <!-- Real-time Analytics -->
            <div
                class="lg:col-span-2 bg-white rounded-lg shadow-sm border border-slate-200 p-4 md:p-8 dark:bg-[#1a233a] dark:border-white/5 transition-colors duration-300">
                <div class="flex items-center justify-between mb-10">
                    <h3 class="text-lg font-bold text-[#404e67] dark:text-slate-200">Real-time Analytics</h3>
                    <div
                        class="flex bg-slate-100 p-1 rounded-md text-[10px] font-black uppercase tracking-tight dark:bg-white/5">
                        <button class="px-3 py-1 text-slate-500">7D</button>
                        <button class="px-3 py-1 bg-blue-600 text-white rounded shadow-sm">30D</button>
                        <button class="px-3 py-1 text-slate-500">90D</button>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-8 mb-10">
                    <div class="flex items-center space-x-4">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center shadow-sm dark:bg-blue-500/10 dark:text-blue-400">
                            <i class="fas fa-link"></i>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1.5">
                                Sessions</p>
                            <h4 class="text-xl font-black text-[#404e67] dark:text-slate-200">47,829</h4>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div
                            class="w-12 h-12 rounded-full bg-cyan-100 text-cyan-600 flex items-center justify-center shadow-sm dark:bg-cyan-500/10 dark:text-cyan-400">
                            <i class="fas fa-chart-area"></i>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1.5">
                                Page Views</p>
                            <h4 class="text-xl font-black text-[#404e67] dark:text-slate-200">186,247</h4>
                        </div>
                    </div>
                </div>

                <div class="h-[250px] md:h-[350px]">
                    <canvas id="realtimeChart"></canvas>
                </div>

                <div class="flex justify-center mt-6 space-x-8">
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 rounded-full bg-primary"></div>
                        <span class="text-xs font-bold text-slate-500">Sessions</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 rounded-full bg-[#36b9cc]"></div>
                        <span class="text-xs font-bold text-slate-500">Page Views</span>
                    </div>
                </div>
            </div>

            <!-- Device Analytics -->
            <div
                class="bg-white rounded-lg shadow-sm border border-slate-200 p-4 md:p-8 flex flex-col dark:bg-[#1a233a] dark:border-white/5 transition-colors duration-300">
                <h3 class="text-lg font-bold text-[#404e67] mb-8 dark:text-slate-200">Device Analytics</h3>
                <div class="flex-1 flex flex-col justify-center items-center">
                    <div class="w-full max-w-[250px] aspect-square mb-10">
                        <canvas id="deviceChart"></canvas>
                    </div>

                    <div class="w-full space-y-6 px-4">
                        <div class="space-y-2">
                            <div
                                class="flex justify-between text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                                <span class="flex items-center"><i class="fas fa-desktop mr-2 text-blue-500"></i>
                                    Desktop</span>
                                <span class="text-slate-700 dark:text-slate-300">45.8%</span>
                            </div>
                            <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden dark:bg-white/5">
                                <div class="h-full bg-blue-600 rounded-full" style="width: 45.8%;"></div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div
                                class="flex justify-between text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                                <span class="flex items-center"><i class="fas fa-mobile-alt mr-2 text-teal-400"></i>
                                    Mobile</span>
                                <span class="text-slate-700 dark:text-slate-300">38.7%</span>
                            </div>
                            <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden dark:bg-white/5">
                                <div class="h-full bg-teal-400 rounded-full" style="width: 38.7%;"></div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div
                                class="flex justify-between text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                                <span class="flex items-center"><i class="fas fa-tablet-alt mr-2 text-purple-400"></i>
                                    Tablet</span>
                                <span class="text-slate-700 dark:text-slate-300">15.5%</span>
                            </div>
                            <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden dark:bg-white/5">
                                <div class="h-full bg-purple-400 rounded-full" style="width: 15.5%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <script>
        window.addEventListener('load', () => {
            // Real-time Analytics Chart
            const ctxRealtime = document.getElementById('realtimeChart').getContext('2d');

            const sessionsGradient = ctxRealtime.createLinearGradient(0, 0, 0, 400);
            sessionsGradient.addColorStop(0, 'rgba(78, 79, 235, 0.4)');
            sessionsGradient.addColorStop(1, 'rgba(78, 79, 235, 0.05)');

            const viewsGradient = ctxRealtime.createLinearGradient(0, 0, 0, 400);
            viewsGradient.addColorStop(0, 'rgba(54, 185, 204, 0.4)');
            viewsGradient.addColorStop(1, 'rgba(54, 185, 204, 0.05)');

            new Chart(ctxRealtime, {
                type: 'line',
                data: {
                    labels: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan'],
                    datasets: [
                        {
                            label: 'Sessions',
                            data: [78, 65, 87, 85, 92],
                            borderColor: 'var(--color-primary)',
                            backgroundColor: sessionsGradient,
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4,
                            pointBackgroundColor: 'var(--color-primary)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                            pointRadius: 4
                        },
                        {
                            label: 'Page Views',
                            data: [87, 95, 81, 69, 85],
                            borderColor: '#36b9cc',
                            backgroundColor: viewsGradient,
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4,
                            pointBackgroundColor: '#36b9cc',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                            pointRadius: 4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { color: document.documentElement.classList.contains('dark') ? 'rgba(255,255,255,0.05)' : '#f1f5f9' },
                            ticks: { color: '#94a3b8', font: { weight: 'bold', size: 10 } }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { color: '#94a3b8', font: { weight: 'bold', size: 10 } }
                        }
                    }
                }
            });

            // Device Analytics Chart
            const ctxDevice = document.getElementById('deviceChart').getContext('2d');
            new Chart(ctxDevice, {
                type: 'doughnut',
                data: {
                    labels: ['Desktop', 'Mobile', 'Tablet'],
                    datasets: [{
                        data: [45.8, 38.7, 15.5],
                        backgroundColor: ['var(--color-primary)', '#59e0c5', '#9b89da'],
                        borderWidth: 0,
                        hoverOffset: 10
                    }]
                },
                options: {
                    cutout: '70%',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } }
                }
            });
        });
    </script>
@endsection