@extends('components.dashboard.layouts.master')

@section('title', __('dashboard.dashboard'))

@section('styles')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Cairo', sans-serif;
            background-color: #f8f9fc;
            color: #2c3e50;
        }

        .dashboard {
            padding: 2rem;
            max-width: 1200px;
            margin: auto;
        }

        .heading {
            text-align: center;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2.5rem;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .metric-card {
            background: #fff;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
            text-align: center;
            transition: transform 0.2s ease;
        }

        .metric-card:hover {
            transform: translateY(-5px);
        }

        .metric-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #7f8c8d;
        }

        .metric-value {
            font-size: 2.2rem;
            font-weight: 700;
        }

        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }

        .chart-card {
            background: #fff;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
        }

        .chart-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .chart-container {
            position: relative;
            height: 260px;
        }

    </style>
@endsection

@section('content')
    @php $isTeacher = auth()->user()->type === 'teacher'; @endphp

    <div class="dashboard">
        <div class="heading">
            📊 {{ __('Dashboard Overview') }}
        </div>

        <!-- METRIC CARDS -->
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-title">📚 {{ __('Total Courses') }}</div>
                <div class="metric-value" id="totalCourses" style="color: #ff9f40;">{{ $allcourses }}</div>
            </div>
            <div class="metric-card">
                <div class="metric-title">🎓 {{ __('Total Enrolled Students') }}</div>
                <div class="metric-value" id="totalStudents" style="color: #4bc0c0;">{{ $allstudents }}</div>
            </div>
            @unless($isTeacher)
                <div class="metric-card">
                    <div class="metric-title">🧑‍🏫 {{ __('Total Teachers') }}</div>
                    <div class="metric-value" id="totalTeachers" style="color: #9966ff;">{{ $allteachers }}</div>
                </div>
            @endunless
        </div>

        <!-- CHARTS -->
        <div class="charts-grid">
            <div class="chart-card">
                <div class="chart-title">{{ __('Monthly Courses') }}</div>
                <div class="chart-container">
                    <canvas id="monthlyCoursesChart"></canvas>
                </div>
            </div>

            <div class="chart-card">
                <div class="chart-title">{{ __('Monthly Students') }}</div>
                <div class="chart-container">
                    <canvas id="monthlyStudentsChart"></canvas>
                </div>
            </div>

            @unless($isTeacher)
                <div class="chart-card">
                    <div class="chart-title">{{ __('Monthly Teachers') }}</div>
                    <div class="chart-container">
                        <canvas id="monthlyTeachersChart"></canvas>
                    </div>
                </div>
            @endunless
        </div>
    </div>

    <script>
        function animateCounter(id, value, duration) {
            const el = document.getElementById(id);
            let start = 0;
            const increment = value / (duration / 16);
            const update = () => {
                start += increment;
                el.textContent = start < value ? Math.ceil(start) : value;
                if (start < value) requestAnimationFrame(update);
            };
            requestAnimationFrame(update);
        }

        function renderLineChart(id, label, data, color) {
            const ctx = document.getElementById(id).getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: @json($months),
                    datasets: [{
                        label: label,
                        data: data,
                        borderColor: color.replace('0.2', '1'),
                        backgroundColor: color,
                        fill: false,
                        tension: 0.4,
                        pointRadius: 5,
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'top' },
                        tooltip: { mode: 'index', intersect: false }
                    },
                    interaction: { mode: 'nearest', intersect: false },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: '{{ __("Month") }}',
                                font: { weight: 'bold' }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: label,
                                font: { weight: 'bold' }
                            }
                        }
                    }
                }
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            animateCounter('totalCourses', parseInt("{{ $allcourses ?? 0 }}"), 2000);
            animateCounter('totalStudents', parseInt("{{ $allstudents ?? 0 }}"), 2000);
            @unless($isTeacher)
            animateCounter('totalTeachers', parseInt("{{ $allteachers ?? 0 }}"), 2000);
            @endunless

            renderLineChart('monthlyCoursesChart', '{{ __("Courses") }}', @json($coursesCounts), 'rgba(255, 159, 64, 0.2)');
            renderLineChart('monthlyStudentsChart', '{{ __("Students") }}', @json($studentsCounts), 'rgba(75, 192, 192, 0.2)');
            @unless($isTeacher)
            renderLineChart('monthlyTeachersChart', '{{ __("Teachers") }}', @json($teachersCounts), 'rgba(153, 102, 255, 0.2)');
            @endunless
        });
    </script>
@endsection