@extends('admin.layouts.main')
@section('title', 'Dashboard')
@section('content')
    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="card gradient-1">
                <div class="card-body">
                    <h3 class="card-title text-white">Users</h3>
                    <div class="d-inline-block">
                        <div class="row">
                            <div class="col text-center">
                                <h2 class="text-white">{{ $total['userGuru'] }}</h2>
                                <p class="text-white mb-0">Teacher</p>
                            </div>
                            <div class="col text-center">
                                <h2 class="text-white">{{ $total['userOrtu'] }}</h2>
                                <p class="text-white mb-0">Parent</p>
                            </div>
                            <div class="col text-center">
                                <h2 class="text-white">{{ $total['user'] }}</h2>
                                <p class="text-white mb-0">All</p>
                            </div>
                        </div>
                    </div>
                    <span class="float-right display-5 opacity-5"><i class="fa fa-users text-white"></i></span>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-sm-6">
            <div class="card gradient-3">
                <div class="card-body">
                    <h3 class="card-title text-white">Konseling</h3>
                    <div class="d-inline-block">
                        <div class="row">
                            <div class="col text-center">
                                <h2 class="text-white">{{ $total['konselingType']['pending'] }}</h2>
                                <p class="text-white mb-0">Pending</p>
                            </div>
                            <div class="col text-center">
                                <h2 class="text-white">{{ $total['konselingType']['rejected'] }}</h2>
                                <p class="text-white mb-0">Rejected</p>
                            </div>
                            <div class="col text-center">
                                <h2 class="text-white">{{ $total['konselingType']['approved'] }}</h2>
                                <p class="text-white mb-0">Approved</p>
                            </div>
                        </div>
                    </div>
                    <span class="float-right display-5 opacity-5"><i class="fa fa-calendar text-white"></i></span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card gradient-2">
                <div class="card-body">
                    <h3 class="card-title text-white">Mood</h3>
                    <div class="d-inline-block">
                        <h2 class="text-white">{{ $total['mood'] }}</h2>
                        <p class="text-white mb-0">Total Mood</p>
                    </div>
                    <span class="float-right display-5 opacity-5"><i class="fa fa-meh text-white"></i></span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Mood Statistics</h4>
                    <canvas id="canvas" width="500" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">User Role Statistics</h4>
                    <canvas id="canvas-user" width="500" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Kuisioner Statistik</h4>
                    <canvas id="kuisionerChart" width="500" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h4 class="card-title mb-3">Total Kuisioner DASS-42</h4>
                    <div class="d-flex flex-column gap-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-envelope-paper-fill text-primary me-2"></i><strong>Total Dikirim</strong></span>
                            <span class="badge text-white bg-primary fs-3">{{ $total['kuisionerSended'] }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Sudah Diisi</strong></span>
                            <span class="badge text-white bg-success fs-3">{{ $total['kuisionerFilled'] }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-x-circle-fill text-danger me-2"></i><strong>Belum Diisi</strong></span>
                            <span class="badge text-white bg-danger fs-3">{{ $total['kuisionerNotFilled'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/chart.js/Chart.bundle.min.js') }}"></script>
    <script>
        const config_moods = {
            type: 'bar',
            data: {
                labels: [
                    @foreach($statsMood as $mood)
                        @if($mood->mood == 1)
                            "Sangat Sedih",
                        @elseif($mood->mood == 2)
                                "Sedih",
                        @elseif($mood->mood == 3)
                                "Biasa",
                        @elseif($mood->mood == 4)
                                "Senang",
                        @else
                                "Sangat Senang",
                        @endif
                    @endforeach
                ],
                datasets: [{
                    label: "Mood",
                    data: [
                        @foreach($statsMood as $mood)
                            {{ $mood->total }},
                        @endforeach
                    ],
                    borderColor: "transparent",
                    borderWidth: "0",
                    backgroundColor: ["#ff6384", "#36a2eb", "#cc65fe", "#ffce56", "#4bc0c0"]
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        // Change here
                        barPercentage: 0.5
                    }]
                }
            }
        };
        const config_user = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [
                        @foreach($statsUserRole as $role)
                            {{ $role->total }},
                        @endforeach
                    ],
                    backgroundColor: [
                        'rgba(117, 113, 249, 0.9)',
                        'rgba(255, 64, 123, 0.9)',
                        'rgba(0, 181, 233, 0.9)',
                    ],
                    label: 'Dataset 1'
                }],
                labels: [
                    @foreach($statsUserRole as $role)
                        "{{ $role->role }}",
                    @endforeach
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'User Role Statistics'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        };

        const config_kuisioner = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [
                        {{ $total['kuisionerNotFilled'] }},
                        {{ $total['kuisionerFilled'] }}
                    ],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.9)',
                        'rgba(54, 162, 235, 0.9)',
                    ],
                    label: 'Dataset 1'
                }],
                labels: [
                    'Kuisioner Tidak Terisi',
                    'Kuisioner Terisi'
                ]
            },
        }

        window.onload = function () {
            const ctx = document.getElementById('canvas').getContext('2d');
            window.myDoughnut = new Chart(ctx, config_moods);

            const ctx_user = document.getElementById('canvas-user').getContext('2d');
            window.myDoughnut = new Chart(ctx_user, config_user);

            const ctx_kuisioner = document.getElementById('kuisionerChart').getContext('2d');
            window.myDoughnut = new Chart(ctx_kuisioner, config_kuisioner);
        };
    </script>
@endpush