@extends('layouts.app')
@section('title', "Dashboard")
@section('titleHeader', "Dashboard")

@section('content')
<div class="grid gap-6 grid-cols-1 md:grid-cols-3 mb-6">
    <div class="card">
        <div class="card-content">
            <div class="flex items-center justify-between">
                <div class="widget-label">
                    <h3 class="text-sm text-gray-500 mb-1">
                        Materi
                    </h3>
                    <h1 class="text-2xl font-bold">
                        {{ $dashboard['materi'] }}
                    </h1>
                </div>
                <span class="icon widget-icon text-indigo-500"><i class="mdi mdi-file-document mdi-48px"></i></span>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-content">
            <div class="flex items-center justify-between">
                <div class="widget-label">
                    <h3 class="text-sm text-gray-500 mb-1">
                        Tugas
                    </h3>
                    <h1 class="text-2xl font-bold">
                        {{ $dashboard['tugas'] }}
                    </h1>
                </div>
                <span class="icon widget-icon text-teal-500"><i class="mdi mdi-clipboard-text mdi-48px"></i></span>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-content">
            <div class="flex items-center justify-between">
                <div class="widget-label">
                    <h3 class="text-sm text-gray-500 mb-1">
                        Quiz
                    </h3>
                    <h1 class="text-2xl font-bold">
                        {{ $dashboard['quiz'] }}
                    </h1>
                </div>
                <span class="icon widget-icon text-pink-500"><i class="mdi mdi-help-circle mdi-48px"></i></span>
            </div>
        </div>
    </div>
</div>

<div class="grid gap-6 grid-cols-1 md:grid-cols-2 mb-6">
    <!-- Additional statistics cards -->
    <div class="card">
        <div class="card-content">
            <div class="flex items-center justify-between">
                <div class="widget-label">
                    <h3 class="text-sm text-gray-500 mb-1">
                        Kelas
                    </h3>
                    <h1 class="text-2xl font-bold">
                        {{ $dashboard['kelas'] }}
                    </h1>
                </div>
                <span class="icon widget-icon text-purple-500"><i class="mdi mdi-home-variant mdi-48px"></i></span>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-content">
            <div class="flex items-center justify-between">
                <div class="widget-label">
                    <h3 class="text-sm text-gray-500 mb-1">
                        Mata Pelajaran
                    </h3>
                    <h1 class="text-2xl font-bold">
                        {{ $dashboard['mata_pelajaran'] }}
                    </h1>
                </div>
                <span class="icon widget-icon text-yellow-500"><i class="mdi mdi-book-open-variant mdi-48px"></i></span>
            </div>
        </div>
    </div>
</div>

<!-- Chart for monthly activity -->
<div class="card mb-6">
    <header class="card-header">
        <p class="card-header-title">
            <span class="icon"><i class="mdi mdi-finance"></i></span>
            Aktivitas Bulanan
        </p>
        <a href="#" class="card-header-icon">
            <span class="icon"><i class="mdi mdi-reload"></i></span>
        </a>
    </header>
    <div class="card-content">
        <div class="chart-area">
            <div class="h-full">
                <div class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand">
                        <div></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink">
                        <div></div>
                    </div>
                </div>
                <canvas id="big-line-chart" width="2992" height="1000" class="chartjs-render-monitor block"
                    style="height: 400px; width: 1197px;"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Content Distribution Chart -->
<div class="card mb-6">
    <header class="card-header">
        <p class="card-header-title">
            <span class="icon"><i class="mdi mdi-file-document"></i></span>
            Distribusi Konten
        </p>
    </header>
    <div class="card-content">
        <div class="chart-area">
            <div class="h-full">
                <canvas id="content-bar-chart" width="400" height="400" class="chartjs-render-monitor block"
                    style="height: 300px;"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('extraScript')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Chart colors
    const chartColors = {
        primary: '#00D1B2',
        info: '#209CEE',
        danger: '#FF3860',
        success: '#48C78E',
        warning: '#FFDD57',
        purple: '#9C27B0',
        pink: '#E91E63',
        indigo: '#3F51B5',
        teal: '#009688'
    };

    // Monthly Activity Line Chart
    const monthlyChartCtx = document.getElementById('big-line-chart').getContext('2d');
    new Chart(monthlyChartCtx, {
        type: 'line',
        data: {
            labels: @json($dashboard['monthly_activity']['months']),
            datasets: [{
                label: 'Materi',
                fill: false,
                borderColor: chartColors.primary,
                backgroundColor: chartColors.primary,
                borderWidth: 2,
                pointBackgroundColor: chartColors.primary,
                pointBorderColor: 'rgba(255,255,255,0)',
                pointHoverBackgroundColor: chartColors.primary,
                pointBorderWidth: 20,
                pointHoverRadius: 4,
                pointHoverBorderWidth: 15,
                pointRadius: 4,
                data: @json($dashboard['monthly_activity']['materi'])
            }, {
                label: 'Tugas',
                fill: false,
                borderColor: chartColors.info,
                backgroundColor: chartColors.info,
                borderWidth: 2,
                pointBackgroundColor: chartColors.info,
                pointBorderColor: 'rgba(255,255,255,0)',
                pointHoverBackgroundColor: chartColors.info,
                pointBorderWidth: 20,
                pointHoverRadius: 4,
                pointHoverBorderWidth: 15,
                pointRadius: 4,
                data: @json($dashboard['monthly_activity']['tugas'])
            }, {
                label: 'Quiz',
                fill: false,
                borderColor: chartColors.danger,
                backgroundColor: chartColors.danger,
                borderWidth: 2,
                pointBackgroundColor: chartColors.danger,
                pointBorderColor: 'rgba(255,255,255,0)',
                pointHoverBackgroundColor: chartColors.danger,
                pointBorderWidth: 20,
                pointHoverRadius: 4,
                pointHoverBorderWidth: 15,
                pointRadius: 4,
                data: @json($dashboard['monthly_activity']['quiz'])
            }]
        },
        options: {
            maintainAspectRatio: false,
            legend: {
                display: true,
                position: 'top',
                labels: {
                    fontColor: '#9a9a9a',
                    usePointStyle: true
                }
            },
            responsive: true,
            tooltips: {
                backgroundColor: '#f5f5f5',
                titleFontColor: '#333',
                bodyFontColor: '#666',
                bodySpacing: 4,
                xPadding: 12,
                mode: 'nearest',
                intersect: 0,
                position: 'nearest'
            },
            scales: {
                yAxes: [{
                    barPercentage: 1.6,
                    gridLines: {
                        drawBorder: false,
                        color: 'rgba(29,140,248,0.0)',
                        zeroLineColor: 'transparent'
                    },
                    ticks: {
                        padding: 20,
                        fontColor: '#9a9a9a',
                        beginAtZero: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Jumlah',
                        fontColor: '#9a9a9a'
                    }
                }],
                xAxes: [{
                    barPercentage: 1.6,
                    gridLines: {
                        drawBorder: false,
                        color: 'rgba(225,78,202,0.1)',
                        zeroLineColor: 'transparent'
                    },
                    ticks: {
                        padding: 20,
                        fontColor: '#9a9a9a'
                    }
                }]
            }
        }
    });

    // Content distribution bar chart
    const contentBarChartCtx = document.getElementById('content-bar-chart').getContext('2d');
    new Chart(contentBarChartCtx, {
        type: 'bar',
        data: {
            labels: ['Kelas', 'Mata Pelajaran', 'Materi', 'Tugas', 'Quiz'],
            datasets: [{
                label: 'Jumlah',
                data: [
                    {{ $dashboard['kelas'] }}, 
                    {{ $dashboard['mata_pelajaran'] }}, 
                    {{ $dashboard['materi'] }}, 
                    {{ $dashboard['tugas'] }}, 
                    {{ $dashboard['quiz'] }}
                ],
                backgroundColor: [
                    chartColors.purple, 
                    chartColors.warning, 
                    chartColors.indigo, 
                    chartColors.teal, 
                    chartColors.pink
                ],
                borderColor: [
                    chartColors.purple, 
                    chartColors.warning, 
                    chartColors.indigo, 
                    chartColors.teal, 
                    chartColors.pink
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        fontColor: '#9a9a9a'
                    },
                    gridLines: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                }],
                xAxes: [{
                    ticks: {
                        fontColor: '#9a9a9a'
                    },
                    gridLines: {
                        display: false
                    }
                }]
            }
        }
    });
});
</script>
@endpush