@extends('layouts-v2.app')

@section('head')
<style>
    /* Additional custom styles if needed */
</style>
@endsection

@section('content')
<!-- Page Title & Actions -->
<div class="flex justify-between items-end">
    <div>
        <nav class="flex text-sm text-slate-500 mb-2">
            <span class="hover:text-blue-600 cursor-pointer transition-colors">Trang chủ</span>
        </nav>
        <h1 class="text-3xl font-bold text-slate-900">Trang tổng quan</h1>
        <p class="text-slate-500 mt-1">Chào mừng bạn đến với hệ thống quản lý OA</p>
    </div>
    <!-- <div class="flex gap-3">
        <button class="px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors shadow-sm">
            Tải báo cáo
        </button>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm shadow-blue-200">
            Tạo khoá học mới
        </button>
    </div> -->
</div>

<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <!-- Stat Card 1 -->
    <!-- <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Tổng học viên</p>
                <h3 class="text-2xl font-bold text-slate-800 mt-2">12,345</h3>
            </div>
            <div class="p-3 rounded-lg bg-blue-600 bg-opacity-10 text-blue-600">
                <i data-lucide="users" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-emerald-500 font-medium flex items-center gap-1">
                <i data-lucide="trending-up" class="w-3.5 h-3.5"></i> +12%
            </span>
            <span class="text-slate-400 ml-2">so với tháng trước</span>
        </div>
    </div> -->
    
    <!-- Stat Card 2 -->
    <!-- <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Khoá học active</p>
                <h3 class="text-2xl font-bold text-slate-800 mt-2">482</h3>
            </div>
            <div class="p-3 rounded-lg bg-purple-600 bg-opacity-10 text-purple-600">
                <i data-lucide="book-open" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-emerald-500 font-medium flex items-center gap-1">
                <i data-lucide="trending-up" class="w-3.5 h-3.5"></i> +5.2%
            </span>
            <span class="text-slate-400 ml-2">so với tháng trước</span>
        </div>
    </div> -->

    <!-- Stat Card 3 -->
    <!-- <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Giờ học tích luỹ</p>
                <h3 class="text-2xl font-bold text-slate-800 mt-2">84.5k</h3>
            </div>
            <div class="p-3 rounded-lg bg-amber-500 bg-opacity-10 text-amber-500">
                <i data-lucide="clock" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-emerald-500 font-medium flex items-center gap-1">
                <i data-lucide="trending-up" class="w-3.5 h-3.5"></i> +18%
            </span>
            <span class="text-slate-400 ml-2">so với tháng trước</span>
        </div>
    </div> -->

    <!-- Stat Card 4 -->
    <!-- <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Tỷ lệ hoàn thành</p>
                <h3 class="text-2xl font-bold text-slate-800 mt-2">94.2%</h3>
            </div>
            <div class="p-3 rounded-lg bg-emerald-600 bg-opacity-10 text-emerald-600">
                <i data-lucide="trending-up" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-emerald-500 font-medium flex items-center gap-1">
                <i data-lucide="trending-up" class="w-3.5 h-3.5"></i> +2.1%
            </span>
            <span class="text-slate-400 ml-2">so với tháng trước</span>
        </div>
    </div> -->
</div>

<!-- Banner -->
<!-- <div class="bg-gradient-to-r from-slate-900 to-slate-800 rounded-xl p-8 shadow-lg text-white relative overflow-hidden">
    <div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full -mr-16 -mt-16 blur-3xl"></div>
    <div class="relative z-10 max-w-2xl">
        <div class="flex items-center gap-2 mb-2">
            <span class="px-2 py-1 bg-blue-500/20 text-blue-300 text-xs font-bold rounded border border-blue-500/30 uppercase tracking-wider">New HTML Layout</span>
        </div>
        <h2 class="text-slate-100 text-2xl font-bold mb-3">Dashboard V2 - Pure HTML/JS Version</h2>
        <p class="text-slate-300 mb-6 leading-relaxed">
            Phiên bản này đã được chuyển đổi hoàn toàn sang HTML thuần, không còn phụ thuộc vào React.
            Sidebar hỗ trợ menu đa cấp (multi-level) với hiệu ứng accordion mượt mà.
        </p>
        <button class="group flex items-center gap-2 bg-white text-slate-900 px-5 py-2.5 rounded-lg font-medium hover:bg-slate-100 transition-colors shadow-lg">
            <i data-lucide="arrow-left" class="w-4 h-4 transition-transform group-hover:-translate-x-1"></i>
            <span>Xem tài liệu</span>
        </button>
    </div>
</div> -->

<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Area Chart -->
    <!-- <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-slate-100">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-bold text-slate-800">Hoạt động truy cập tuần qua</h3>
            <button class="text-slate-400 hover:text-slate-600">
                <i data-lucide="more-horizontal" class="w-5 h-5"></i>
            </button>
        </div>
        <div class="h-80 w-full relative">
            <canvas id="mainChart"></canvas>
        </div>
    </div> -->

    <!-- Secondary Bar Chart -->
    <!-- <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-bold text-slate-800">Phân bổ khoá học</h3>
        </div>
        <div class="h-80 w-full relative">
            <canvas id="barChart"></canvas>
        </div>
    </div> -->
</div>
@endsection

@section('scripts')
<script>
    // Chart.js Configurations
    const chartLabels = ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'];
    const studentData = [400, 300, 200, 278, 189, 239, 349];
    const courseData = [240, 139, 980, 390, 480, 380, 430];
    const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100];

    // Wait for DOM and Chart.js to be ready
    $(document).ready(function() {
        // Initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // Main Chart (Area)
        const ctxMain = document.getElementById('mainChart');
        if (ctxMain && typeof Chart !== 'undefined') {
            const ctx = ctxMain.getContext('2d');
            
            // Gradient for Area Chart
            const gradientStudents = ctx.createLinearGradient(0, 0, 0, 400);
            gradientStudents.addColorStop(0, 'rgba(59, 130, 246, 0.2)'); // Blue
            gradientStudents.addColorStop(1, 'rgba(59, 130, 246, 0)');

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: chartLabels,
                    datasets: [
                        {
                            label: 'Học viên',
                            data: studentData,
                            borderColor: '#3b82f6',
                            backgroundColor: gradientStudents,
                            borderWidth: 3,
                            tension: 0.4,
                            fill: true,
                            pointRadius: 0,
                            pointHoverRadius: 6
                        },
                        {
                            label: 'Khoá học',
                            data: courseData,
                            borderColor: '#a855f7', // Purple
                            backgroundColor: 'transparent',
                            borderWidth: 3,
                            tension: 0.4,
                            fill: false,
                            pointRadius: 0,
                            pointHoverRadius: 6
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: '#fff',
                            titleColor: '#1e293b',
                            bodyColor: '#475569',
                            borderColor: '#e2e8f0',
                            borderWidth: 1,
                            padding: 10,
                            displayColors: true,
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { color: '#94a3b8' }
                        },
                        y: {
                            grid: { color: '#f1f5f9' },
                            ticks: { color: '#94a3b8' },
                            border: { display: false }
                        }
                    }
                }
            });
        }

        // Bar Chart
        const ctxBar = document.getElementById('barChart');
        if (ctxBar && typeof Chart !== 'undefined') {
            const ctx = ctxBar.getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: chartLabels.slice(0, 5),
                    datasets: [{
                        label: 'Doanh thu',
                        data: amtData.slice(0, 5),
                        backgroundColor: '#3b82f6',
                        borderRadius: 4,
                        barThickness: 20
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { color: '#94a3b8' }
                        },
                        y: {
                            display: false
                        }
                    }
                }
            });
        }
    });
</script>
@endsection