@extends('backend.admin_backend.admin_dashboard')

@section('admin')

@php

/*
|--------------------------------------------------------------------------
| ================================================================
| AGM SMARTSCHOOL - PROFESSIONAL RESULT ANALYSIS DASHBOARD
| ================================================================
|
| IMPORTANT:
| We are using the Result "total" column for this analysis.
|
| Your Result table already stores:
| CA1 + CA2 + CA3 + Exam -> Final Total
|
| Therefore, we DO NOT recalculate the final result here.
| We simply analyze the final "total" already stored in the database.
|
| Since total is out of 100:
|
|     Average Score = Percentage Performance
|
| Example:
|     Average total = 72.5
|     Percentage performance = 72.5%
|
|--------------------------------------------------------------------------
*/


use App\Models\Student;
use App\Models\StudentClasses;
use App\Models\Teacher;
use App\Models\Subject;
use App\Models\Result;
use App\Models\CbtTest;
use App\Models\CbtAttempt;
use App\Models\Term;
use App\Models\AcademicSession;
use Illuminate\Support\Facades\DB;


/*
|--------------------------------------------------------------------------
| ================================================================
| 1. BASIC SCHOOL INFORMATION
| ================================================================
|--------------------------------------------------------------------------
*/

$totalstudent  = Student::count();
$totalsubject  = Subject::count();
$totalclass    = StudentClasses::count();
$totalteachers = Teacher::count();


/*
|--------------------------------------------------------------------------
| ================================================================
| 2. CURRENT TERM AND CURRENT SESSION
| ================================================================
|--------------------------------------------------------------------------
|
| We use the current term/session as the default values in the
| Analysis Filter.
|
|--------------------------------------------------------------------------
*/

$currentTerm = Term::where('is_current', 1)->first();

$currentSession = AcademicSession::where('is_current', 1)->first();

$currentTermName = $currentTerm ? $currentTerm->name : null;

$currentSessionName = $currentSession ? $currentSession->name : null;


/*
|--------------------------------------------------------------------------
| ================================================================
| 3. ANALYSIS FILTER VALUES
| ================================================================
|--------------------------------------------------------------------------
|
| The administrator can select:
|
|   - Academic Session
|   - Term
|   - Class
|
| If nothing is selected, the dashboard automatically uses:
|
|   Current Session
|   Current Term
|   All Classes
|
|--------------------------------------------------------------------------
*/

$analysisSession = request('analysis_session', $currentSessionName);

$analysisTerm = request('analysis_term', $currentTermName);

$analysisClass = request('analysis_class', 'all');


/*
|--------------------------------------------------------------------------
| ================================================================
| 4. LOAD FILTER OPTIONS
| ================================================================
|--------------------------------------------------------------------------
*/

$analysisSessions = AcademicSession::orderByDesc('name')->get();

$analysisTerms = Term::orderBy('id')->get();

$analysisClasses = StudentClasses::orderBy('class_name')->get();


/*
|--------------------------------------------------------------------------
| ================================================================
| 5. GET RESULT DATA FOR THE SELECTED FILTER
| ================================================================
|--------------------------------------------------------------------------
|
| We only analyze results belonging to:
|
|   Selected Session
|   Selected Term
|   Selected Class (if selected)
|
|--------------------------------------------------------------------------
*/

$analysisResultsQuery = Result::with([
    'student',
    'subject',
    'studentClass'
])
->where('session', $analysisSession)
->where('term', $analysisTerm);


/*
|--------------------------------------------------------------------------
| If administrator selected a specific class,
| restrict the analysis to that class.
|--------------------------------------------------------------------------
*/

if ($analysisClass !== 'all' && !empty($analysisClass)) {

    $analysisResultsQuery->where(
        'student_classes_id',
        $analysisClass
    );
}


/*
|--------------------------------------------------------------------------
| Execute the query.
|--------------------------------------------------------------------------
*/

$analysisResults = $analysisResultsQuery->get();


/*
|--------------------------------------------------------------------------
| ================================================================
| 6. BASIC RESULT COUNTS
| ================================================================
|--------------------------------------------------------------------------
*/

$totalResultRecords = $analysisResults->count();

$totalStudentsAssessed = $analysisResults
    ->pluck('student_id')
    ->unique()
    ->count();

$totalSubjectsAssessed = $analysisResults
    ->pluck('subject_id')
    ->unique()
    ->count();


/*
|--------------------------------------------------------------------------
| ================================================================
| 7. ALL STUDENTS IN SELECTED CLASS
| ================================================================
|--------------------------------------------------------------------------
|
| This is different from "Students Assessed".
|
| Example:
|
| Class has 40 students.
| Only 35 students have results.
|
| Total Students = 40
| Students Assessed = 35
|
| This helps the administrator identify incomplete results.
|
|--------------------------------------------------------------------------
*/

$studentsQuery = Student::query();

if ($analysisClass !== 'all' && !empty($analysisClass)) {

    $studentsQuery->where(
        'student_classes_id',
        $analysisClass
    );
}

$totalStudentsInFilter = $studentsQuery->count();


/*
|--------------------------------------------------------------------------
| ================================================================
| 8. OVERALL AVERAGE SCORE
| ================================================================
|--------------------------------------------------------------------------
|
| We calculate the average of all final result totals.
|
| Example:
|
| 70 + 80 + 60 = 210
|
| 210 / 3 = 70
|
| Overall performance = 70%
|
|--------------------------------------------------------------------------
*/

$overallAverage = $analysisResults->count() > 0
    ? round($analysisResults->avg('total'), 2)
    : 0;


/*
|--------------------------------------------------------------------------
| Because final total is already out of 100,
| the average itself represents percentage performance.
|--------------------------------------------------------------------------
*/

$overallPercentage = $overallAverage;


/*
|--------------------------------------------------------------------------
| ================================================================
| 9. HIGHEST AND LOWEST SCORE
| ================================================================
|--------------------------------------------------------------------------
*/

$highestScore = $analysisResults->count() > 0
    ? round($analysisResults->max('total'), 2)
    : 0;

$lowestScore = $analysisResults->count() > 0
    ? round($analysisResults->min('total'), 2)
    : 0;


/*
|--------------------------------------------------------------------------
| ================================================================
| 10. PASS AND FAIL ANALYSIS
| ================================================================
|--------------------------------------------------------------------------
|
| We use 40 as the pass mark.
|
| You can change this later if your school uses another pass mark.
|
|--------------------------------------------------------------------------
*/

$passMark = 40;


/*
|--------------------------------------------------------------------------
| Count passed result records.
|--------------------------------------------------------------------------
*/

$passedResultRecords = $analysisResults
    ->filter(function ($result) use ($passMark) {
        return (float) $result->total >= $passMark;
    })
    ->count();


/*
|--------------------------------------------------------------------------
| Count failed result records.
|--------------------------------------------------------------------------
*/

$failedResultRecords = $analysisResults
    ->filter(function ($result) use ($passMark) {
        return (float) $result->total < $passMark;
    })
    ->count();


/*
|--------------------------------------------------------------------------
| Pass percentage
|--------------------------------------------------------------------------
*/

$passPercentage = $totalResultRecords > 0
    ? round(
        ($passedResultRecords / $totalResultRecords) * 100,
        2
    )
    : 0;


/*
|--------------------------------------------------------------------------
| Fail percentage
|--------------------------------------------------------------------------
*/

$failPercentage = $totalResultRecords > 0
    ? round(
        ($failedResultRecords / $totalResultRecords) * 100,
        2
    )
    : 0;


/*
|--------------------------------------------------------------------------
| ================================================================
| 11. STUDENT OVERALL PERFORMANCE
| ================================================================
|--------------------------------------------------------------------------
|
| IMPORTANT:
|
| We do NOT simply rank individual subject scores.
|
| Instead, we group all subjects belonging to each student.
|
| Example:
|
| John:
| Mathematics = 80
| English     = 70
| Biology     = 90
|
| John Average:
|
| (80 + 70 + 90) / 3 = 80
|
|--------------------------------------------------------------------------
*/

$studentPerformance = $analysisResults
    ->groupBy('student_id')
    ->map(function ($studentResults) {

        /*
        |--------------------------------------------------------------------------
        | Calculate student's average score across all subjects.
        |--------------------------------------------------------------------------
        */

        $average = $studentResults->avg('total');

        $student = $studentResults->first()->student;

        $class = $studentResults->first()->studentClass;

        return [

            'student_id' => $studentResults->first()->student_id,

            'student' => $student,

            'class' => $class,

            'subjects' => $studentResults->count(),

            'total_score' => $studentResults->sum('total'),

            'average' => round($average, 2),

            'percentage' => round($average, 2),

        ];

    })
    ->sortByDesc('average')
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 12. SCHOOL/STUDENT AVERAGE
| ================================================================
|--------------------------------------------------------------------------
|
| This is the average of each student's overall average.
|
| We use this figure to determine:
|
|   Above Average Students
|   Below Average Students
|
|--------------------------------------------------------------------------
*/

$studentOverallAverage = $studentPerformance->count() > 0
    ? round($studentPerformance->avg('average'), 2)
    : 0;


/*
|--------------------------------------------------------------------------
| ================================================================
| 13. STUDENTS ABOVE AVERAGE
| ================================================================
|--------------------------------------------------------------------------
*/

$studentsAboveAverage = $studentPerformance
    ->filter(function ($student) use ($studentOverallAverage) {

        return $student['average'] > $studentOverallAverage;

    })
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 14. STUDENTS BELOW AVERAGE
| ================================================================
|--------------------------------------------------------------------------
*/

$studentsBelowAverage = $studentPerformance
    ->filter(function ($student) use ($studentOverallAverage) {

        return $student['average'] < $studentOverallAverage;

    })
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 15. STUDENTS EXACTLY AT AVERAGE
| ================================================================
|--------------------------------------------------------------------------
*/

$studentsAtAverage = $studentPerformance
    ->filter(function ($student) use ($studentOverallAverage) {

        return $student['average'] == $studentOverallAverage;

    })
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 16. STUDENT PASS / FAIL
| ================================================================
|--------------------------------------------------------------------------
|
| A student is considered to have passed if their overall average
| is at least the school pass mark.
|
|--------------------------------------------------------------------------
*/

$studentsPassed = $studentPerformance
    ->filter(function ($student) use ($passMark) {

        return $student['average'] >= $passMark;

    })
    ->count();


$studentsFailed = $studentPerformance
    ->filter(function ($student) use ($passMark) {

        return $student['average'] < $passMark;

    })
    ->count();


$studentPassPercentage = $totalStudentsAssessed > 0
    ? round(
        ($studentsPassed / $totalStudentsAssessed) * 100,
        2
    )
    : 0;


/*
|--------------------------------------------------------------------------
| ================================================================
| 17. TOP 10 STUDENTS
| ================================================================
|--------------------------------------------------------------------------
*/

$topStudents = $studentPerformance
    ->take(10)
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 18. STUDENTS BELOW AVERAGE
| ================================================================
|--------------------------------------------------------------------------
|
| We show the lowest performers first.
|
|--------------------------------------------------------------------------
*/

$lowestStudents = $studentsBelowAverage
    ->sortBy('average')
    ->take(10)
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 19. CLASS PERFORMANCE
| ================================================================
|--------------------------------------------------------------------------
|
| We group results by class.
|
| Example:
|
| JSS 1 = 68%
| JSS 2 = 72%
| JSS 3 = 75%
|
|--------------------------------------------------------------------------
*/

$classPerformance = $analysisResults
    ->groupBy('student_classes_id')
    ->map(function ($classResults) {

        $class = $classResults->first()->studentClass;

        return [

            'id' => $classResults->first()->student_classes_id,

            'class_name' => $class
                ? $class->class_name
                : 'Unknown Class',

            'average' => round(
                $classResults->avg('total'),
                2
            ),

            'students' => $classResults
                ->pluck('student_id')
                ->unique()
                ->count(),

            'results' => $classResults->count(),

        ];

    })
    ->sortByDesc('average')
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 20. SUBJECT PERFORMANCE
|--------------------------------------------------------------------------
|
| This allows the administrator to know:
|
|   Which subject has high performance?
|   Which subject needs attention?
|
|--------------------------------------------------------------------------
*/

$subjectPerformance = $analysisResults
    ->groupBy('subject_id')
    ->map(function ($subjectResults) {

        $subject = $subjectResults->first()->subject;

        return [

            'id' => $subjectResults->first()->subject_id,

            'subject_name' => $subject
                ? $subject->subject_name
                : 'Unknown Subject',

            'average' => round(
                $subjectResults->avg('total'),
                2
            ),

            'highest' => round(
                $subjectResults->max('total'),
                2
            ),

            'lowest' => round(
                $subjectResults->min('total'),
                2
            ),

            'students' => $subjectResults
                ->pluck('student_id')
                ->unique()
                ->count(),

        ];

    })
    ->sortByDesc('average')
    ->values();


/*
|--------------------------------------------------------------------------
| ================================================================
| 21. GRADE DISTRIBUTION
|--------------------------------------------------------------------------
|
| This uses the grade already stored inside the Result table.
|
| Example:
|
| A = 20
| B = 30
| C = 25
| D = 10
| E = 5
| F = 3
|
|--------------------------------------------------------------------------
*/

$gradeDistribution = $analysisResults
    ->groupBy(function ($result) {

        return strtoupper(
            trim($result->grade ?? 'N/A')
        );

    })
    ->map(function ($gradeResults) {

        return $gradeResults->count();

    })
    ->sortKeys();


/*
|--------------------------------------------------------------------------
| ================================================================
| 22. SCORE DISTRIBUTION
| ================================================================
|
| This groups scores into understandable performance ranges.
|
| 0 - 39   = Fail
| 40 - 49  = Pass
| 50 - 59
| 60 - 69
| 70 - 79
| 80 - 89
| 90 - 100
|
|--------------------------------------------------------------------------
*/

$scoreRanges = [

    '0 - 39' => 0,

    '40 - 49' => 0,

    '50 - 59' => 0,

    '60 - 69' => 0,

    '70 - 79' => 0,

    '80 - 89' => 0,

    '90 - 100' => 0,

];


foreach ($analysisResults as $result) {

    $score = (float) $result->total;

    if ($score < 40) {

        $scoreRanges['0 - 39']++;

    } elseif ($score < 50) {

        $scoreRanges['40 - 49']++;

    } elseif ($score < 60) {

        $scoreRanges['50 - 59']++;

    } elseif ($score < 70) {

        $scoreRanges['60 - 69']++;

    } elseif ($score < 80) {

        $scoreRanges['70 - 79']++;

    } elseif ($score < 90) {

        $scoreRanges['80 - 89']++;

    } else {

        $scoreRanges['90 - 100']++;

    }

}


/*
|--------------------------------------------------------------------------
| ================================================================
| 23. RESULT COMPLETION ANALYSIS
|--------------------------------------------------------------------------
|
| This compares:
|
|   Students in class
|          VS
|   Students who actually have results
|
|--------------------------------------------------------------------------
*/

$missingResultStudents = max(
    0,
    $totalStudentsInFilter - $totalStudentsAssessed
);


/*
|--------------------------------------------------------------------------
| ================================================================
| 24. CBT ANALYTICS
|--------------------------------------------------------------------------
|
| Keep your existing CBT dashboard analysis.
|--------------------------------------------------------------------------
*/

$totalTests = CbtTest::where('term', $currentTermName)
    ->where('session', $currentSessionName)
    ->count();


$totalAttempts = CbtAttempt::whereHas('test', function ($q)
    use ($currentTermName, $currentSessionName) {

        $q->where('term', $currentTermName)
          ->where('session', $currentSessionName);

    })
    ->count();


$completedAttempts = CbtAttempt::where(
        'status',
        'completed'
    )
    ->whereHas('test', function ($q)
        use ($currentTermName, $currentSessionName) {

            $q->where('term', $currentTermName)
              ->where('session', $currentSessionName);

        })
    ->count();


$inProgressAttempts = CbtAttempt::where(
        'status',
        'in_progress'
    )
    ->whereHas('test', function ($q)
        use ($currentTermName, $currentSessionName) {

            $q->where('term', $currentTermName)
              ->where('session', $currentSessionName);

        })
    ->count();


$passCount = CbtAttempt::where(
        'status',
        'completed'
    )
    ->whereHas('test', function ($q)
        use ($currentTermName, $currentSessionName) {

            $q->where('term', $currentTermName)
              ->where('session', $currentSessionName);

        })
    ->where('score', '>=', 40)
    ->count();


$failCount = CbtAttempt::where(
        'status',
        'completed'
    )
    ->whereHas('test', function ($q)
        use ($currentTermName, $currentSessionName) {

            $q->where('term', $currentTermName)
              ->where('session', $currentSessionName);

        })
    ->where('score', '<', 40)
    ->count();


/*
|--------------------------------------------------------------------------
| ================================================================
| 25. STUDENT GROWTH PER MONTH
| ================================================================
|--------------------------------------------------------------------------
*/

$monthlyStudents = [];

$months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
];


foreach ($months as $index => $month) {

    $monthlyStudents[] = Student::whereYear(
            'created_at',
            date('Y')
        )
        ->whereMonth(
            'created_at',
            $index + 1
        )
        ->count();

}


/*
|--------------------------------------------------------------------------
| ================================================================
| 26. SELECTED CLASS NAME FOR DISPLAY
| ================================================================
|--------------------------------------------------------------------------
*/

$selectedClassName = 'All Classes';

if ($analysisClass !== 'all' && !empty($analysisClass)) {

    $selectedClass = StudentClasses::find($analysisClass);

    if ($selectedClass) {

        $selectedClassName = $selectedClass->class_name;

    }

}

@endphp


{{-- ================================================================
     CUSTOM DASHBOARD CSS
================================================================ --}}

<style>

.dashboard-card {

    min-height: 155px;

    min-width: 160px;

    transition: all 0.3s ease-in-out;

}

.dashboard-card:hover {

    transform: translateY(-7px) scale(1.02);

    box-shadow:
        0 12px 25px rgba(0,0,0,0.15) !important;

}

.dashboard-card .card-body {

    padding: 1.5rem;

}

.dashboard-card h3 {

    font-size: 1.8rem;

}

.analysis-card {

    transition: all 0.3s ease;

}

.analysis-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.08);

}

.chart-card {

    border: 0;

    border-radius: 18px;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.07);

}

.chart-container {

    position: relative;

    height: 350px;

}

.small-chart-container {

    position: relative;

    height: 300px;

}

.analysis-table th {

    white-space: nowrap;

    background: #f8f9fa;

}

.performance-badge {

    font-size: 12px;

    padding: 6px 10px;

    border-radius: 20px;

}

.filter-card {

    border: 0;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.08);

}

.section-title {

    font-weight: 700;

    color: #212529;

}

.stat-icon {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.animate-card {

    opacity: 0;

    transform: translateY(25px);

    animation:
        popUp 0.7s ease forwards;

}

@keyframes popUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@media(max-width: 768px) {

    .chart-container {

        height: 280px;

    }

    .small-chart-container {

        height: 250px;

    }

}

</style>


<div class="container-fluid">


{{-- ================================================================
     PAGE TITLE
================================================================ --}}

<div class="row animate-card">

    <div class="col-12">

        <div class="page-title-box
                    d-sm-flex
                    align-items-center
                    justify-content-between">

            <div>

                <h4 class="mb-sm-1">
                    Admin Dashboard
                </h4>

                <small class="text-muted">

                    School Performance &
                    Result Analysis

                </small>

            </div>


            <div class="page-title-right">

                <ol class="breadcrumb m-0">

                    <li class="breadcrumb-item">

                        <a href="javascript:void(0);">
                            Admin
                        </a>

                    </li>

                    <li class="breadcrumb-item active">

                        Dashboard

                    </li>

                </ol>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     ================================================================
     ANALYSIS FILTER
     ================================================================
================================================================ --}}

<div class="card filter-card mb-4">

    <div class="card-header bg-primary text-white">

        <div class="d-flex
                    justify-content-between
                    align-items-center
                    flex-wrap">

            <div>

                <h5 class="mb-1 text-white">

                    <i class="fas fa-chart-line me-2"></i>

                    Result Analysis Filter

                </h5>

                <small>

                    Select the session, term and class
                    you want to analyze.

                </small>

            </div>

        </div>

    </div>


    <div class="card-body">

        <form
            method="GET"
            action="{{ url()->current() }}"
        >

            <div class="row g-3 align-items-end">


                {{-- SESSION --}}

                <div class="col-lg-4 col-md-6">

                    <label class="form-label fw-semibold">

                        Academic Session

                    </label>

                    <select
                        name="analysis_session"
                        class="form-select"
                    >

                        @foreach($analysisSessions as $session)

                            <option
                                value="{{ $session->name }}"
                                {{ $analysisSession == $session->name ? 'selected' : '' }}
                            >

                                {{ $session->name }}

                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- TERM --}}

                <div class="col-lg-3 col-md-6">

                    <label class="form-label fw-semibold">

                        Term

                    </label>

                    <select
                        name="analysis_term"
                        class="form-select"
                    >

                        @foreach($analysisTerms as $term)

                            <option
                                value="{{ $term->name }}"
                                {{ $analysisTerm == $term->name ? 'selected' : '' }}
                            >

                                {{ $term->name }}

                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- CLASS --}}

                <div class="col-lg-3 col-md-6">

                    <label class="form-label fw-semibold">

                        Class

                    </label>

                    <select
                        name="analysis_class"
                        class="form-select"
                    >

                        <option value="all"
                            {{ $analysisClass == 'all' ? 'selected' : '' }}>

                            All Classes

                        </option>


                        @foreach($analysisClasses as $class)

                            <option
                                value="{{ $class->id }}"
                                {{ $analysisClass == $class->id ? 'selected' : '' }}
                            >

                                {{ $class->class_name }}

                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- FILTER BUTTON --}}

                <div class="col-lg-2 col-md-6">

                    <button
                        type="submit"
                        class="btn btn-primary w-100"
                    >

                        <i class="fas fa-filter me-1"></i>

                        Analyze

                    </button>

                </div>


            </div>

        </form>


        {{-- FILTER SUMMARY --}}

        <div class="mt-3">

            <div class="alert alert-info mb-0">

                <i class="fas fa-info-circle me-2"></i>

                Currently analyzing:

                <strong>
                    {{ $selectedClassName }}
                </strong>

                |

                <strong>
                    {{ $analysisTerm ?: 'No Term Selected' }}
                </strong>

                |

                <strong>
                    {{ $analysisSession ?: 'No Session Selected' }}
                </strong>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     NO RESULT WARNING
================================================================ --}}

@if($totalResultRecords == 0)

<div class="alert alert-warning shadow-sm">

    <i class="fas fa-exclamation-triangle me-2"></i>

    <strong>No result data found.</strong>

    There are currently no results for:

    <strong>{{ $selectedClassName }}</strong>,

    <strong>{{ $analysisTerm }}</strong>,

    <strong>{{ $analysisSession }}</strong>.

</div>

@endif



{{-- ================================================================
     BASIC SCHOOL INFORMATION CARDS
================================================================ --}}

<div class="row g-3 mb-4">


    {{-- TOTAL STUDENTS --}}

    <div class="col-xl-3 col-md-6">

        <div
            class="card dashboard-card
                   shadow-lg
                   border-0
                   rounded-4
                   text-white"
            style="
                background:
                linear-gradient(
                    135deg,
                    #6a11cb,
                    #2575fc
                );
            "
        >

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="mb-1 fw-semibold">

                            Total Students

                        </p>

                        <h3
                            class="fw-bold mb-0 text-white"
                        >

                            {{ $totalstudent }}

                        </h3>

                    </div>

                    <div class="stat-icon
                                bg-white
                                bg-opacity-25">

                        <i class="ri-user-3-line fs-3"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- SUBJECTS --}}

    <div class="col-xl-3 col-md-6">

        <div
            class="card dashboard-card
                   shadow-lg
                   border-0
                   rounded-4
                   text-white"
            style="
                background:
                linear-gradient(
                    135deg,
                    #00b09b,
                    #96c93d
                );
            "
        >

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="mb-1 fw-semibold">

                            Total Subjects

                        </p>

                        <h3
                            class="fw-bold mb-0 text-white"
                        >

                            {{ $totalsubject }}

                        </h3>

                    </div>

                    <div class="stat-icon
                                bg-white
                                bg-opacity-25">

                        <i class="fas fa-book-open fs-3"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- CLASSES --}}

    <div class="col-xl-3 col-md-6">

        <div
            class="card dashboard-card
                   shadow-lg
                   border-0
                   rounded-4
                   text-white"
            style="
                background:
                linear-gradient(
                    135deg,
                    #ff416c,
                    #ff4b2b
                );
            "
        >

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="mb-1 fw-semibold">

                            Total Classes

                        </p>

                        <h3
                            class="fw-bold mb-0 text-white"
                        >

                            {{ $totalclass }}

                        </h3>

                    </div>

                    <div class="stat-icon
                                bg-white
                                bg-opacity-25">

                        <i class="ri-building-line fs-3"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- TEACHERS --}}

    <div class="col-xl-3 col-md-6">

        <div
            class="card dashboard-card
                   shadow-lg
                   border-0
                   rounded-4
                   text-white"
            style="
                background:
                linear-gradient(
                    135deg,
                    #36d1dc,
                    #5b86e5
                );
            "
        >

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="mb-1 fw-semibold">

                            Total Teachers

                        </p>

                        <h3
                            class="fw-bold mb-0 text-white"
                        >

                            {{ $totalteachers }}

                        </h3>

                    </div>

                    <div class="stat-icon
                                bg-white
                                bg-opacity-25">

                        <i class="fas fa-chalkboard-teacher fs-3"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     RESULT ANALYSIS STAT CARDS
================================================================ --}}

<div class="row g-3 mb-4">


    {{-- OVERALL AVERAGE --}}

    <div class="col-xl-3 col-md-6">

        <div class="card analysis-card border-0 shadow-sm">

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="text-muted mb-1">

                            Overall Average

                        </p>

                        <h3 class="fw-bold mb-1">

                            {{ number_format($overallAverage, 2) }}%

                        </h3>

                        <small class="text-success">

                            Final result performance

                        </small>

                    </div>

                    <div class="stat-icon bg-primary bg-opacity-10">

                        <i class="fas fa-chart-line text-primary fs-4"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- PASS RATE --}}

    <div class="col-xl-3 col-md-6">

        <div class="card analysis-card border-0 shadow-sm">

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="text-muted mb-1">

                            Pass Rate

                        </p>

                        <h3 class="fw-bold mb-1">

                            {{ number_format($passPercentage, 2) }}%

                        </h3>

                        <small class="text-success">

                            Pass mark: {{ $passMark }}

                        </small>

                    </div>

                    <div class="stat-icon bg-success bg-opacity-10">

                        <i class="fas fa-check-circle text-success fs-4"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- STUDENTS ABOVE AVERAGE --}}

    <div class="col-xl-3 col-md-6">

        <div class="card analysis-card border-0 shadow-sm">

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="text-muted mb-1">

                            Above Average

                        </p>

                        <h3 class="fw-bold mb-1">

                            {{ $studentsAboveAverage->count() }}

                        </h3>

                        <small class="text-success">

                            Students

                        </small>

                    </div>

                    <div class="stat-icon bg-success bg-opacity-10">

                        <i class="fas fa-arrow-up text-success fs-4"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- BELOW AVERAGE --}}

    <div class="col-xl-3 col-md-6">

        <div class="card analysis-card border-0 shadow-sm">

            <div class="card-body">

                <div class="d-flex align-items-center">

                    <div class="flex-grow-1">

                        <p class="text-muted mb-1">

                            Below Average

                        </p>

                        <h3 class="fw-bold mb-1">

                            {{ $studentsBelowAverage->count() }}

                        </h3>

                        <small class="text-danger">

                            Students needing attention

                        </small>

                    </div>

                    <div class="stat-icon bg-danger bg-opacity-10">

                        <i class="fas fa-arrow-down text-danger fs-4"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     SECONDARY ANALYSIS CARDS
================================================================ --}}

<div class="row g-3 mb-4">


    {{-- ASSESSED STUDENTS --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm">

            <div class="card-body">

                <p class="text-muted mb-1">

                    Students Assessed

                </p>

                <h4 class="fw-bold">

                    {{ $totalStudentsAssessed }}

                </h4>

                <small class="text-muted">

                    Out of {{ $totalStudentsInFilter }} students

                </small>

            </div>

        </div>

    </div>


    {{-- MISSING RESULTS --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm">

            <div class="card-body">

                <p class="text-muted mb-1">

                    Missing Results

                </p>

                <h4
                    class="fw-bold
                    {{ $missingResultStudents > 0
                        ? 'text-danger'
                        : 'text-success' }}"
                >

                    {{ $missingResultStudents }}

                </h4>

                <small class="text-muted">

                    Students without result records

                </small>

            </div>

        </div>

    </div>


    {{-- HIGHEST SCORE --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm">

            <div class="card-body">

                <p class="text-muted mb-1">

                    Highest Score

                </p>

                <h4 class="fw-bold text-success">

                    {{ number_format($highestScore, 2) }}%

                </h4>

                <small class="text-muted">

                    Highest recorded subject score

                </small>

            </div>

        </div>

    </div>


    {{-- LOWEST SCORE --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm">

            <div class="card-body">

                <p class="text-muted mb-1">

                    Lowest Score

                </p>

                <h4 class="fw-bold text-danger">

                    {{ number_format($lowestScore, 2) }}%

                </h4>

                <small class="text-muted">

                    Lowest recorded subject score

                </small>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     PERFORMANCE SUMMARY
================================================================ --}}

<div class="card border-0 shadow-sm mb-4">

    <div class="card-header bg-white">

        <h5 class="section-title mb-1">

            <i class="fas fa-info-circle text-primary me-2"></i>

            Performance Summary

        </h5>

        <small class="text-muted">

            Automatic interpretation of the selected result data.

        </small>

    </div>


    <div class="card-body">

        <div class="row g-4">


            <div class="col-lg-4">

                <div class="p-3 bg-light rounded-3">

                    <small class="text-muted d-block">

                        Average Performance

                    </small>

                    <h4 class="fw-bold mt-1">

                        {{ number_format($overallPercentage, 2) }}%

                    </h4>

                    <p class="mb-0 text-muted">

                        This represents the average final score
                        of all result records in the selected analysis.

                    </p>

                </div>

            </div>


            <div class="col-lg-4">

                <div class="p-3 bg-light rounded-3">

                    <small class="text-muted d-block">

                        Student Average

                    </small>

                    <h4 class="fw-bold mt-1">

                        {{ number_format($studentOverallAverage, 2) }}%

                    </h4>

                    <p class="mb-0 text-muted">

                        This is the average of the individual
                        students' overall subject averages.

                    </p>

                </div>

            </div>


            <div class="col-lg-4">

                <div class="p-3 bg-light rounded-3">

                    <small class="text-muted d-block">

                        Result Records

                    </small>

                    <h4 class="fw-bold mt-1">

                        {{ number_format($totalResultRecords) }}

                    </h4>

                    <p class="mb-0 text-muted">

                        Total subject-result records included
                        in this analysis.

                    </p>

                </div>

            </div>


        </div>

    </div>

</div>



{{-- ================================================================
     CHART ROW 1
================================================================ --}}

<div class="row g-4 mb-4">


    {{-- CLASS PERFORMANCE --}}

    <div class="col-xl-8">

        <div class="card chart-card">

            <div class="card-header bg-white border-0">

                <h5 class="mb-1">

                    Class Performance Comparison

                </h5>

                <small class="text-muted">

                    Average final score per class.

                </small>

            </div>

            <div class="card-body">

                <div class="chart-container">

                    <canvas id="classPerformanceChart"></canvas>

                </div>

            </div>

        </div>

    </div>


    {{-- PASS VS FAIL --}}

    <div class="col-xl-4">

        <div class="card chart-card">

            <div class="card-header bg-white border-0">

                <h5 class="mb-1">

                    Pass vs Fail

                </h5>

                <small class="text-muted">

                    Based on {{ $passMark }} pass mark.

                </small>

            </div>

            <div class="card-body">

                <div class="small-chart-container">

                    <canvas id="passFailChart"></canvas>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     CHART ROW 2
================================================================ --}}

<div class="row g-4 mb-4">


    {{-- SUBJECT PERFORMANCE --}}

    <div class="col-xl-7">

        <div class="card chart-card">

            <div class="card-header bg-white border-0">

                <h5 class="mb-1">

                    Subject Performance

                </h5>

                <small class="text-muted">

                    Average score achieved in each subject.

                </small>

            </div>

            <div class="card-body">

                <div class="chart-container">

                    <canvas id="subjectPerformanceChart"></canvas>

                </div>

            </div>

        </div>

    </div>


    {{-- GRADE DISTRIBUTION --}}

    <div class="col-xl-5">

        <div class="card chart-card">

            <div class="card-header bg-white border-0">

                <h5 class="mb-1">

                    Grade Distribution

                </h5>

                <small class="text-muted">

                    Number of result records per grade.

                </small>

            </div>

            <div class="card-body">

                <div class="small-chart-container">

                    <canvas id="gradeDistributionChart"></canvas>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     CHART ROW 3
================================================================ --}}

<div class="row g-4 mb-4">


    {{-- TOP STUDENTS --}}

    <div class="col-xl-7">

        <div class="card chart-card">

            <div class="card-header bg-white border-0">

                <h5 class="mb-1">

                    Top 10 Students

                </h5>

                <small class="text-muted">

                    Ranked according to overall average score.

                </small>

            </div>

            <div class="card-body">

                <div class="chart-container">

                    <canvas id="topStudentsChart"></canvas>

                </div>

            </div>

        </div>

    </div>


    {{-- ABOVE / BELOW AVERAGE --}}

    <div class="col-xl-5">

        <div class="card chart-card">

            <div class="card-header bg-white border-0">

                <h5 class="mb-1">

                    Student Performance Level

                </h5>

                <small class="text-muted">

                    Comparison against student overall average.

                </small>

            </div>

            <div class="card-body">

                <div class="small-chart-container">

                    <canvas id="aboveBelowChart"></canvas>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     SCORE DISTRIBUTION
================================================================ --}}

<div class="row g-4 mb-4">

    <div class="col-12">

        <div class="card chart-card">

            <div class="card-header bg-white border-0">

                <h5 class="mb-1">

                    Score Distribution

                </h5>

                <small class="text-muted">

                    Shows how many subject results fall inside
                    each score range.

                </small>

            </div>

            <div class="card-body">

                <div class="chart-container">

                    <canvas id="scoreDistributionChart"></canvas>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     TOP STUDENTS TABLE
================================================================ --}}

<div class="card border-0 shadow-sm mb-4">

    <div class="card-header bg-white">

        <h5 class="mb-1">

            <i class="fas fa-trophy text-warning me-2"></i>

            Top Performing Students

        </h5>

        <small class="text-muted">

            Students with the highest overall average.

        </small>

    </div>


    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-hover
                          align-middle
                          analysis-table">

                <thead>

                    <tr>

                        <th>#</th>

                        <th>Student</th>

                        <th>Class</th>

                        <th>Subjects</th>

                        <th>Total Score</th>

                        <th>Average</th>

                        <th>Performance</th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($topStudents as $index => $student)

                        <tr>

                            <td>

                                <strong>
                                    {{ $index + 1 }}
                                </strong>

                            </td>

                            <td>

                                <strong>

                                    {{ $student['student']->name ?? 'Unknown Student' }}

                                </strong>

                            </td>

                            <td>

                                {{ $student['class']->class_name ?? 'Unknown' }}

                            </td>

                            <td>

                                {{ $student['subjects'] }}

                            </td>

                            <td>

                                {{ number_format($student['total_score'], 2) }}

                            </td>

                            <td>

                                <strong>

                                    {{ number_format($student['average'], 2) }}%

                                </strong>

                            </td>

                            <td>

                                <span
                                    class="badge bg-success performance-badge"
                                >

                                    Above Average

                                </span>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="7"
                                class="text-center text-muted py-4">

                                No student result data available.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>



{{-- ================================================================
     BELOW AVERAGE STUDENTS
================================================================ --}}

<div class="card border-0 shadow-sm mb-4">

    <div class="card-header bg-white">

        <h5 class="mb-1">

            <i class="fas fa-user-clock text-danger me-2"></i>

            Students Below Average

        </h5>

        <small class="text-muted">

            These students have an overall average below
            the calculated student average of

            <strong>

                {{ number_format($studentOverallAverage, 2) }}%

            </strong>.

        </small>

    </div>


    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-hover
                          align-middle
                          analysis-table">

                <thead>

                    <tr>

                        <th>#</th>

                        <th>Student</th>

                        <th>Class</th>

                        <th>Subjects</th>

                        <th>Average</th>

                        <th>Difference From Average</th>

                        <th>Status</th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($lowestStudents as $index => $student)

                        @php

                            /*
                            |--------------------------------------------------------------------------
                            | Difference shows how far the student is below
                            | the calculated student average.
                            |--------------------------------------------------------------------------
                            */

                            $difference =
                                $studentOverallAverage
                                - $student['average'];

                        @endphp

                        <tr>

                            <td>

                                {{ $index + 1 }}

                            </td>

                            <td>

                                <strong>

                                    {{ $student['student']->name ?? 'Unknown Student' }}

                                </strong>

                            </td>

                            <td>

                                {{ $student['class']->class_name ?? 'Unknown' }}

                            </td>

                            <td>

                                {{ $student['subjects'] }}

                            </td>

                            <td>

                                <strong class="text-danger">

                                    {{ number_format($student['average'], 2) }}%

                                </strong>

                            </td>

                            <td>

                                {{ number_format($difference, 2) }}%

                            </td>

                            <td>

                                <span class="badge bg-danger">

                                    Below Average

                                </span>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="7"
                                class="text-center
                                       text-success
                                       py-4"
                            >

                                <i class="fas fa-check-circle me-1"></i>

                                No students are currently below average.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>



{{-- ================================================================
     SUBJECT PERFORMANCE TABLE
================================================================ --}}

<div class="card border-0 shadow-sm mb-4">

    <div class="card-header bg-white">

        <h5 class="mb-1">

            <i class="fas fa-book text-primary me-2"></i>

            Subject Performance Analysis

        </h5>

        <small class="text-muted">

            Helps management identify subjects that require
            additional academic attention.

        </small>

    </div>


    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-hover
                          align-middle
                          analysis-table">

                <thead>

                    <tr>

                        <th>#</th>

                        <th>Subject</th>

                        <th>Students</th>

                        <th>Average</th>

                        <th>Highest</th>

                        <th>Lowest</th>

                        <th>Performance Level</th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($subjectPerformance as $index => $subject)

                        @php

                            /*
                            |--------------------------------------------------------------------------
                            | We classify the subject based on its average.
                            |
                            | This is a descriptive classification,
                            | not a ranking of students.
                            |--------------------------------------------------------------------------
                            */

                            if ($subject['average'] >= 70) {

                                $subjectLevel = 'Strong';

                                $subjectBadge = 'success';

                            } elseif ($subject['average'] >= 50) {

                                $subjectLevel = 'Moderate';

                                $subjectBadge = 'warning';

                            } else {

                                $subjectLevel = 'Needs Attention';

                                $subjectBadge = 'danger';

                            }

                        @endphp

                        <tr>

                            <td>

                                {{ $index + 1 }}

                            </td>

                            <td>

                                <strong>

                                    {{ $subject['subject_name'] }}

                                </strong>

                            </td>

                            <td>

                                {{ $subject['students'] }}

                            </td>

                            <td>

                                <strong>

                                    {{ number_format($subject['average'], 2) }}%

                                </strong>

                            </td>

                            <td class="text-success">

                                {{ number_format($subject['highest'], 2) }}%

                            </td>

                            <td class="text-danger">

                                {{ number_format($subject['lowest'], 2) }}%

                            </td>

                            <td>

                                <span
                                    class="badge bg-{{ $subjectBadge }}"
                                >

                                    {{ $subjectLevel }}

                                </span>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="7"
                                class="text-center text-muted py-4"
                            >

                                No subject result data available.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>



{{-- ================================================================
     CLASS PERFORMANCE TABLE
================================================================ --}}

<div class="card border-0 shadow-sm mb-4">

    <div class="card-header bg-white">

        <h5 class="mb-1">

            <i class="fas fa-school text-primary me-2"></i>

            Class Performance Analysis

        </h5>

        <small class="text-muted">

            Average result performance by class.

        </small>

    </div>


    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-hover
                          align-middle
                          analysis-table">

                <thead>

                    <tr>

                        <th>#</th>

                        <th>Class</th>

                        <th>Students Assessed</th>

                        <th>Result Records</th>

                        <th>Average</th>

                        <th>Performance</th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($classPerformance as $index => $class)

                        <tr>

                            <td>

                                {{ $index + 1 }}

                            </td>

                            <td>

                                <strong>

                                    {{ $class['class_name'] }}

                                </strong>

                            </td>

                            <td>

                                {{ $class['students'] }}

                            </td>

                            <td>

                                {{ $class['results'] }}

                            </td>

                            <td>

                                <strong>

                                    {{ number_format($class['average'], 2) }}%

                                </strong>

                            </td>

                            <td>

                                @if($class['average'] >= 70)

                                    <span class="badge bg-success">

                                        Strong

                                    </span>

                                @elseif($class['average'] >= 50)

                                    <span class="badge bg-warning">

                                        Moderate

                                    </span>

                                @else

                                    <span class="badge bg-danger">

                                        Needs Attention

                                    </span>

                                @endif

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="6"
                                class="text-center text-muted py-4"
                            >

                                No class result data available.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>



{{-- ================================================================
     CBT SUMMARY
================================================================ --}}

<div class="row g-3 mb-4">


    <div class="col-xl-3 col-md-6">

        <div class="card dashboard-card
                    shadow-sm border-0 rounded-4">

            <div class="card-body">

                <p class="text-muted mb-1">

                    CBT Tests

                </p>

                <h3 class="fw-bold">

                    {{ $totalTests }}

                </h3>

                <small class="text-muted">

                    Current term/session

                </small>

            </div>

        </div>

    </div>


    <div class="col-xl-3 col-md-6">

        <div class="card dashboard-card
                    shadow-sm border-0 rounded-4">

            <div class="card-body">

                <p class="text-muted mb-1">

                    CBT Attempts

                </p>

                <h3 class="fw-bold">

                    {{ $totalAttempts }}

                </h3>

                <small class="text-muted">

                    Total attempts

                </small>

            </div>

        </div>

    </div>


    <div class="col-xl-3 col-md-6">

        <div class="card dashboard-card
                    shadow-sm border-0 rounded-4">

            <div class="card-body">

                <p class="text-muted mb-1">

                    Completed CBT

                </p>

                <h3 class="fw-bold text-success">

                    {{ $completedAttempts }}

                </h3>

                <small class="text-muted">

                    Completed attempts

                </small>

            </div>

        </div>

    </div>


    <div class="col-xl-3 col-md-6">

        <div class="card dashboard-card
                    shadow-sm border-0 rounded-4">

            <div class="card-body">

                <p class="text-muted mb-1">

                    CBT In Progress

                </p>

                <h3 class="fw-bold text-warning">

                    {{ $inProgressAttempts }}

                </h3>

                <small class="text-muted">

                    Active attempts

                </small>

            </div>

        </div>

    </div>

</div>



{{-- ================================================================
     STUDENT GROWTH
================================================================ --}}

<div class="card chart-card mb-4">

    <div class="card-header bg-white border-0">

        <h5 class="mb-1">

            Student Growth

        </h5>

        <small class="text-muted">

            Number of students registered each month
            during {{ date('Y') }}.

        </small>

    </div>

    <div class="card-body">

        <div class="chart-container">

            <canvas id="studentGrowthChart"></canvas>

        </div>

    </div>

</div>



</div>



{{-- ================================================================
     CHART.JS
================================================================ --}}

<script>

/*
================================================================
AGM SMARTSCHOOL CHART CONFIGURATION
================================================================

All chart data is generated by Laravel/PHP above and passed into
JavaScript using Laravel's JSON helper.

|--------------------------------------------------------------------------
*/


document.addEventListener(
    'DOMContentLoaded',
    function () {


        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 1. CLASS PERFORMANCE CHART
        | ================================================================
        |
        | Shows the average final score for every class.
        |
        |--------------------------------------------------------------------------
        */

        const classPerformanceElement =
            document.getElementById(
                'classPerformanceChart'
            );


        if (classPerformanceElement) {

            new Chart(
                classPerformanceElement,
                {

                    type: 'bar',

                    data: {

                        labels: @json(
                            $classPerformance
                                ->pluck('class_name')
                                ->values()
                        ),

                        datasets: [{

                            label:
                                'Average Score (%)',

                            data: @json(
                                $classPerformance
                                    ->pluck('average')
                                    ->values()
                            ),

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                display: false

                            }

                        },

                        scales: {

                            y: {

                                beginAtZero: true,

                                max: 100,

                                title: {

                                    display: true,

                                    text: 'Average Score (%)'

                                }

                            }

                        }

                    }

                }
            );

        }



        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 2. PASS VS FAIL CHART
        | ================================================================
        */

        const passFailElement =
            document.getElementById(
                'passFailChart'
            );


        if (passFailElement) {

            new Chart(
                passFailElement,
                {

                    type: 'doughnut',

                    data: {

                        labels: [
                            'Passed',
                            'Failed'
                        ],

                        datasets: [{

                            data: [

                                {{ $passedResultRecords }},

                                {{ $failedResultRecords }}

                            ],

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                position: 'bottom'

                            }

                        }

                    }

                }
            );

        }



        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 3. SUBJECT PERFORMANCE CHART
        | ================================================================
        |
        | Each bar represents the average result for a subject.
        |
        |--------------------------------------------------------------------------
        */

        const subjectPerformanceElement =
            document.getElementById(
                'subjectPerformanceChart'
            );


        if (subjectPerformanceElement) {

            new Chart(
                subjectPerformanceElement,
                {

                    type: 'bar',

                    data: {

                        labels: @json(
                            $subjectPerformance
                                ->pluck('subject_name')
                                ->values()
                        ),

                        datasets: [{

                            label:
                                'Average Score (%)',

                            data: @json(
                                $subjectPerformance
                                    ->pluck('average')
                                    ->values()
                            ),

                            borderWidth: 1

                        }]

                    },

                    options: {

                        indexAxis: 'y',

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                display: false

                            }

                        },

                        scales: {

                            x: {

                                beginAtZero: true,

                                max: 100

                            }

                        }

                    }

                }
            );

        }



        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 4. GRADE DISTRIBUTION
        | ================================================================
        */

        const gradeDistributionElement =
            document.getElementById(
                'gradeDistributionChart'
            );


        if (gradeDistributionElement) {

            new Chart(
                gradeDistributionElement,
                {

                    type: 'doughnut',

                    data: {

                        labels: @json(
                            $gradeDistribution
                                ->keys()
                                ->values()
                        ),

                        datasets: [{

                            label:
                                'Number of Results',

                            data: @json(
                                $gradeDistribution
                                    ->values()
                                    ->values()
                            ),

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                position: 'bottom'

                            }

                        }

                    }

                }
            );

        }



        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 5. TOP STUDENTS CHART
        | ================================================================
        |
        | We display the top 10 students according to their overall
        | average across all subjects.
        |
        |--------------------------------------------------------------------------
        */

        const topStudentsElement =
            document.getElementById(
                'topStudentsChart'
            );


        if (topStudentsElement) {

            new Chart(
                topStudentsElement,
                {

                    type: 'bar',

                    data: {

                        labels: @json(
                            $topStudents
                                ->map(function ($student) {

                                    return
                                        $student['student']->name
                                        ?? 'Unknown Student';

                                })
                                ->values()
                        ),

                        datasets: [{

                            label:
                                'Overall Average (%)',

                            data: @json(
                                $topStudents
                                    ->pluck('average')
                                    ->values()
                            ),

                            borderWidth: 1

                        }]

                    },

                    options: {

                        indexAxis: 'y',

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                display: false

                            }

                        },

                        scales: {

                            x: {

                                beginAtZero: true,

                                max: 100

                            }

                        }

                    }

                }
            );

        }



        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 6. ABOVE / BELOW AVERAGE CHART
        |--------------------------------------------------------------------------
        */

        const aboveBelowElement =
            document.getElementById(
                'aboveBelowChart'
            );


        if (aboveBelowElement) {

            new Chart(
                aboveBelowElement,
                {

                    type: 'doughnut',

                    data: {

                        labels: [

                            'Above Average',

                            'Below Average',

                            'Exactly Average'

                        ],

                        datasets: [{

                            data: [

                                {{ $studentsAboveAverage->count() }},

                                {{ $studentsBelowAverage->count() }},

                                {{ $studentsAtAverage->count() }}

                            ],

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                position: 'bottom'

                            }

                        }

                    }

                }

            );

        }



        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 7. SCORE DISTRIBUTION CHART
        | ================================================================
        */

        const scoreDistributionElement =
            document.getElementById(
                'scoreDistributionChart'
            );


        if (scoreDistributionElement) {

            new Chart(
                scoreDistributionElement,
                {

                    type: 'bar',

                    data: {

                        labels: @json(
                            array_keys($scoreRanges)
                        ),

                        datasets: [{

                            label:
                                'Number of Results',

                            data: @json(
                                array_values($scoreRanges)
                            ),

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: false,

                        plugins: {

                            legend: {

                                display: false

                            }

                        },

                        scales: {

                            y: {

                                beginAtZero: true,

                                ticks: {

                                    precision: 0

                                }

                            }

                        }

                    }

                }

            );

        }



        /*
        |--------------------------------------------------------------------------
        | ================================================================
        | 8. STUDENT GROWTH CHART
        | ================================================================
        */

        const studentGrowthElement =
            document.getElementById(
                'studentGrowthChart'
            );


        if (studentGrowthElement) {

            new Chart(
                studentGrowthElement,
                {

                    type: 'line',

                    data: {

                        labels: @json($months),

                        datasets: [{

                            label:
                                'Students Registered',

                            data: @json($monthlyStudents),

                            borderWidth: 2,

                            fill: true,

                            tension: 0.4

                        }]

                    },

                    options: {

                        responsive: true,

                        maintainAspectRatio: false,

                        scales: {

                            y: {

                                beginAtZero: true,

                                ticks: {

                                    precision: 0

                                }

                            }

                        }

                    }

                }

            );

        }


    }
);

</script>



@endsection