@extends('admin.layouts.app')
@section('title')
    Dashboard - Shortties Admin
@endsection
@section('main')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Admin Dashboard</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a href="{{ route('view-dashboard') }}">Home</a></li>
                </ol>
            </nav>
        </div>

        @include('include.flash')
        
        <section class="section dashboard">
            <div class="row">

                <!-- Key Statistics -->
                <div class="col-lg-3 col-md-6">
                    <div class="card info-card">
                        <div class="card-body">
                            <h5 class="card-title">Total Users</h5>
                            <div class="d-flex align-items-center">
                                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="bi bi-people"></i>
                                </div>
                                <div class="ps-3">
                                    <h6>{{ $totalUsers ?? 0 }}</h6>
                                    <span class="text-success small pt-1 fw-bold">+{{ $newUsers ?? 0 }} this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Exam Statistics -->
                <div class="col-lg-3 col-md-6">
                    <div class="card info-card">
                        <div class="card-body">
                            <h5 class="card-title">Total Reels Uploaded</h5>
                            <div class="d-flex align-items-center">
                                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="bi bi-bar-chart"></i>
                                </div>
                                <div class="ps-3">
                                    <h6>{{ $totalReels }}</h6>
                                    <span class="text-primary small pt-1 fw-bold">+{{ $newReels }} this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Questions Statistics -->
                <div class="col-lg-3 col-md-6">
                    <div class="card info-card">
                        <div class="card-body">
                            <h5 class="card-title">Total Shortties Series Created</h5>
                            <div class="d-flex align-items-center">
                                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="bi bi-question-circle"></i>
                                </div>
                                <div class="ps-3">
                                    <h6>{{ $totalSeries }}</h6>
                                    <span class="text-info small pt-1 fw-bold">+{{ $newSeries }} this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Insights Statistics -->
                <div class="col-lg-3 col-md-6">
                    <div class="card info-card">
                        <div class="card-body">
                            <h5 class="card-title">Reports</h5>
                            <div class="d-flex align-items-center">
                                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="bi bi-lightbulb"></i>
                                </div>
                                <div class="ps-3">
                                    <h6>{{ $totalReports ?? 0 }}</h6>
                                    <span class="text-primary small pt-1 fw-bold">+{{ $newReports ?? 0 }} this month</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- User Demographics -->
                <!--<div class="col-lg-6">-->
                <!--    <div class="card">-->
                <!--        <div class="card-body">-->
                <!--            <h5 class="card-title">User Demographics</h5>-->
                <!--            <div id="userDemographicsChart" style="height: 350px;"></div>-->
                <!--            <script>-->
                <!--                document.addEventListener("DOMContentLoaded", () => {-->
                <!--                    echarts.init(document.querySelector("#userDemographicsChart")).setOption({-->
                <!--                        series: [{-->
                <!--                            name: 'Users by Age Group',-->
                <!--                            type: 'pie',-->
                <!--                            radius: '50%',-->
                <!--                            data: @json($ageGroupData)-->
                <!--                        }]-->
                <!--                    });-->
                <!--                });-->
                <!--            </script>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

            </div>
        </section>

    </main>

    <!-- End #main -->
@endsection