@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')

<div class="space-y-5">

    {{-- ============================================================
        Page Header
    ============================================================ --}}
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">

        <div>
            <h1 class="text-xl font-semibold text-text">
                Dashboard
            </h1>

            <p class="mt-1 text-sm text-muted">
                Overview of today's attendance and school activity.
            </p>
        </div>

        <div class="flex flex-wrap items-center gap-2">

            <div class="btn btn-secondary cursor-default">
                <i class="fa-regular fa-calendar text-muted"></i>

                <span>
                    {{ now()->format('D, d M Y') }}
                </span>
            </div>

            <a
                href="{{ route('students.index') }}"
                class="btn btn-secondary"
            >
                <i class="fa-solid fa-users"></i>
                Students
            </a>

            <a
                href="{{ route('attendance-devices.index') }}"
                class="btn btn-primary"
            >
                <i class="fa-solid fa-fingerprint"></i>
                Devices
            </a>

        </div>

    </div>


    {{-- ============================================================
        Important Notice
    ============================================================ --}}
    <div class="flex items-start gap-3 rounded-lg border border-info/20 bg-infoLight px-4 py-3">

        <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-info/10 text-info">
            <i class="fa-solid fa-circle-info"></i>
        </div>

        <div class="min-w-0 flex-1">

            <p class="text-sm font-medium text-text">
                Attendance collection is active
            </p>

            <p class="mt-0.5 text-xs leading-5 text-muted">
                Biometric devices are currently collecting attendance records for today's session.
            </p>

        </div>

        <button
            type="button"
            class="text-muted transition hover:text-text"
            aria-label="Dismiss"
            onclick="this.parentElement.remove()"
        >
            <i class="fa-solid fa-xmark"></i>
        </button>

    </div>


    {{-- ============================================================
        Primary Statistics
    ============================================================ --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">

        {{-- Total Students --}}
        <div class="card p-5">

            <div class="flex items-start justify-between gap-4">

                <div>
                    <p class="text-xs font-medium text-muted">
                        Total Students
                    </p>

                    <p class="mt-2 text-2xl font-semibold tracking-tight text-text">
                        1,248
                    </p>
                </div>

                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-user-graduate"></i>
                </div>

            </div>

            <div class="mt-4 flex items-center justify-between">

                <span class="text-xs text-muted">
                    Enrolled students
                </span>

                <span class="text-xs font-medium text-primary">
                    +18 this month
                </span>

            </div>

        </div>


        {{-- Present --}}
        <div class="card p-5">

            <div class="flex items-start justify-between gap-4">

                <div>
                    <p class="text-xs font-medium text-muted">
                        Present Today
                    </p>

                    <p class="mt-2 text-2xl font-semibold tracking-tight text-text">
                        1,126
                    </p>
                </div>

                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-successLight text-success">
                    <i class="fa-solid fa-user-check"></i>
                </div>

            </div>

            <div class="mt-4 flex items-center justify-between">

                <span class="text-xs text-muted">
                    Student attendance
                </span>

                <span class="badge-success">
                    90.2%
                </span>

            </div>

        </div>


        {{-- Absent --}}
        <div class="card p-5">

            <div class="flex items-start justify-between gap-4">

                <div>
                    <p class="text-xs font-medium text-muted">
                        Absent Today
                    </p>

                    <p class="mt-2 text-2xl font-semibold tracking-tight text-text">
                        84
                    </p>
                </div>

                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-dangerLight text-danger">
                    <i class="fa-solid fa-user-xmark"></i>
                </div>

            </div>

            <div class="mt-4 flex items-center justify-between">

                <span class="text-xs text-muted">
                    Missing attendance
                </span>

                <span class="badge-danger">
                    6.7%
                </span>

            </div>

        </div>


        {{-- Late --}}
        <div class="card p-5">

            <div class="flex items-start justify-between gap-4">

                <div>
                    <p class="text-xs font-medium text-muted">
                        Late Arrivals
                    </p>

                    <p class="mt-2 text-2xl font-semibold tracking-tight text-text">
                        38
                    </p>
                </div>

                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-warningLight text-warning">
                    <i class="fa-solid fa-clock"></i>
                </div>

            </div>

            <div class="mt-4 flex items-center justify-between">

                <span class="text-xs text-muted">
                    Arrived after schedule
                </span>

                <span class="badge-warning">
                    3.1%
                </span>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Secondary Statistics
    ============================================================ --}}
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">

        {{-- Teachers --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-chalkboard-user"></i>
                </div>

                <div class="min-w-0">
                    <p class="text-lg font-semibold text-text">
                        62
                    </p>

                    <p class="truncate text-xs text-muted">
                        Teachers Present
                    </p>
                </div>

            </div>

        </div>


        {{-- Devices --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-successLight text-success">
                    <i class="fa-solid fa-fingerprint"></i>
                </div>

                <div class="min-w-0">
                    <p class="text-lg font-semibold text-text">
                        4 / 5
                    </p>

                    <p class="truncate text-xs text-muted">
                        Devices Online
                    </p>
                </div>

            </div>

        </div>


        {{-- SMS --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-infoLight text-info">
                    <i class="fa-solid fa-message"></i>
                </div>

                <div class="min-w-0">
                    <p class="text-lg font-semibold text-text">
                        96
                    </p>

                    <p class="truncate text-xs text-muted">
                        SMS Notifications
                    </p>
                </div>

            </div>

        </div>


        {{-- Email --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-envelope"></i>
                </div>

                <div class="min-w-0">
                    <p class="text-lg font-semibold text-text">
                        42
                    </p>

                    <p class="truncate text-xs text-muted">
                        Emails Sent
                    </p>
                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Attendance Trend + Attendance Rate
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Attendance Trend --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-8">

            <div class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">

                <div>
                    <h2 class="text-base font-semibold text-text">
                        Attendance Trend
                    </h2>

                    <p class="mt-1 text-xs text-muted">
                        Present, absent and late attendance over the last 7 days.
                    </p>
                </div>

                <select
                    class="form-select w-full sm:w-36"
                    aria-label="Attendance period"
                >
                    <option>Last 7 Days</option>
                    <option>Last 30 Days</option>
                    <option>This Month</option>
                </select>

            </div>

            <div class="p-4">
                <div
                    id="attendanceTrendChart"
                    class="min-h-[320px]"
                ></div>
            </div>

        </div>


        {{-- Attendance Rate --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-4">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Today's Attendance
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Overall student attendance rate.
                </p>

            </div>

            <div class="p-4">

                <div
                    id="attendanceRadialChart"
                    class="min-h-[230px]"
                ></div>

                <div class="grid grid-cols-3 gap-2 border-t border-border pt-4 text-center">

                    <div>
                        <p class="text-sm font-semibold text-success">
                            1,126
                        </p>

                        <p class="mt-1 text-xs text-muted">
                            Present
                        </p>
                    </div>

                    <div class="border-x border-border">
                        <p class="text-sm font-semibold text-danger">
                            84
                        </p>

                        <p class="mt-1 text-xs text-muted">
                            Absent
                        </p>
                    </div>

                    <div>
                        <p class="text-sm font-semibold text-warning">
                            38
                        </p>

                        <p class="mt-1 text-xs text-muted">
                            Late
                        </p>
                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Class Attendance + Weekly Comparison
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Attendance by Class --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-7">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Attendance by Class
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Today's attendance percentage across classes.
                </p>

            </div>

            <div class="p-4">
                <div
                    id="classAttendanceChart"
                    class="min-h-[300px]"
                ></div>
            </div>

        </div>


        {{-- Weekly Attendance --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-5">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Weekly Overview
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Daily present and absent records.
                </p>

            </div>

            <div class="p-4">
                <div
                    id="weeklyAttendanceChart"
                    class="min-h-[300px]"
                ></div>
            </div>

        </div>

    </div>


    {{-- ============================================================
        Attendance Distribution + Devices
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Status Distribution --}}
        <div class="card col-span-12 overflow-hidden lg:col-span-5">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Attendance Distribution
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Distribution of today's attendance statuses.
                </p>

            </div>

            <div class="p-4">
                <div
                    id="attendanceStatusChart"
                    class="min-h-[280px]"
                ></div>
            </div>

        </div>


        {{-- Device Status --}}
        <div class="card col-span-12 overflow-hidden lg:col-span-7">

            <div class="flex items-center justify-between border-b border-border px-5 py-4">

                <div>
                    <h2 class="text-base font-semibold text-text">
                        Attendance Devices
                    </h2>

                    <p class="mt-1 text-xs text-muted">
                        Current biometric device connectivity.
                    </p>
                </div>

                <a
                    href="{{ route('attendance-devices.index') }}"
                    class="text-xs font-medium text-primary hover:underline"
                >
                    View all
                </a>

            </div>

            <div class="divide-y divide-border">

                <div class="flex items-center gap-4 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-successLight text-success">
                        <i class="fa-solid fa-fingerprint"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-center gap-2">
                            <p class="truncate text-sm font-medium text-text">
                                Main Gate Device
                            </p>

                            <span class="h-2 w-2 rounded-full bg-success"></span>
                        </div>

                        <p class="mt-1 text-xs text-muted">
                            Last sync: 1 minute ago
                        </p>

                    </div>

                    <span class="badge-success">
                        Online
                    </span>

                </div>


                <div class="flex items-center gap-4 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-successLight text-success">
                        <i class="fa-solid fa-fingerprint"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-center gap-2">
                            <p class="truncate text-sm font-medium text-text">
                                Secondary Gate
                            </p>

                            <span class="h-2 w-2 rounded-full bg-success"></span>
                        </div>

                        <p class="mt-1 text-xs text-muted">
                            Last sync: 3 minutes ago
                        </p>

                    </div>

                    <span class="badge-success">
                        Online
                    </span>

                </div>


                <div class="flex items-center gap-4 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-dangerLight text-danger">
                        <i class="fa-solid fa-fingerprint"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-center gap-2">
                            <p class="truncate text-sm font-medium text-text">
                                Staff Room Device
                            </p>

                            <span class="h-2 w-2 rounded-full bg-danger"></span>
                        </div>

                        <p class="mt-1 text-xs text-muted">
                            Last sync: 48 minutes ago
                        </p>

                    </div>

                    <span class="badge-danger">
                        Offline
                    </span>

                </div>


                <div class="flex items-center gap-4 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-successLight text-success">
                        <i class="fa-solid fa-fingerprint"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-center gap-2">
                            <p class="truncate text-sm font-medium text-text">
                                Primary Block
                            </p>

                            <span class="h-2 w-2 rounded-full bg-success"></span>
                        </div>

                        <p class="mt-1 text-xs text-muted">
                            Last sync: 2 minutes ago
                        </p>

                    </div>

                    <span class="badge-success">
                        Online
                    </span>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Live Attendance + Recent Notifications
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Live Attendance --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-7">

            <div class="flex items-center justify-between border-b border-border px-5 py-4">

                <div>
                    <div class="flex items-center gap-2">

                        <h2 class="text-base font-semibold text-text">
                            Live Attendance
                        </h2>

                        <span class="flex items-center gap-1.5 text-xs font-medium text-success">
                            <span class="h-2 w-2 animate-pulse rounded-full bg-success"></span>
                            Live
                        </span>

                    </div>

                    <p class="mt-1 text-xs text-muted">
                        Latest attendance records received from devices.
                    </p>
                </div>

            </div>

            <div class="overflow-x-auto">

                <table class="table">

                    <thead>
                        <tr>
                            <th>Student</th>
                            <th>Class</th>
                            <th>Time</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                    <tbody>

                        <tr>

                            <td>

                                <div class="flex items-center gap-3">

                                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                                        AS
                                    </div>

                                    <div>
                                        <p class="text-sm font-medium text-text">
                                            Aarav Sharma
                                        </p>

                                        <p class="text-xs text-muted">
                                            STU-1024
                                        </p>
                                    </div>

                                </div>

                            </td>

                            <td class="whitespace-nowrap">
                                Class 8 - A
                            </td>

                            <td class="whitespace-nowrap">
                                08:42 AM
                            </td>

                            <td>
                                <span class="badge-success">
                                    Present
                                </span>
                            </td>

                        </tr>


                        <tr>

                            <td>

                                <div class="flex items-center gap-3">

                                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                                        SP
                                    </div>

                                    <div>
                                        <p class="text-sm font-medium text-text">
                                            Saanvi Patel
                                        </p>

                                        <p class="text-xs text-muted">
                                            STU-0918
                                        </p>
                                    </div>

                                </div>

                            </td>

                            <td class="whitespace-nowrap">
                                Class 7 - B
                            </td>

                            <td class="whitespace-nowrap">
                                08:46 AM
                            </td>

                            <td>
                                <span class="badge-success">
                                    Present
                                </span>
                            </td>

                        </tr>


                        <tr>

                            <td>

                                <div class="flex items-center gap-3">

                                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-warningLight text-xs font-semibold text-warning">
                                        RK
                                    </div>

                                    <div>
                                        <p class="text-sm font-medium text-text">
                                            Rohan Kumar
                                        </p>

                                        <p class="text-xs text-muted">
                                            STU-1182
                                        </p>
                                    </div>

                                </div>

                            </td>

                            <td class="whitespace-nowrap">
                                Class 9 - A
                            </td>

                            <td class="whitespace-nowrap">
                                09:12 AM
                            </td>

                            <td>
                                <span class="badge-warning">
                                    Late
                                </span>
                            </td>

                        </tr>


                        <tr>

                            <td>

                                <div class="flex items-center gap-3">

                                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                                        NG
                                    </div>

                                    <div>
                                        <p class="text-sm font-medium text-text">
                                            Nisha Gupta
                                        </p>

                                        <p class="text-xs text-muted">
                                            STU-0847
                                        </p>
                                    </div>

                                </div>

                            </td>

                            <td class="whitespace-nowrap">
                                Class 6 - A
                            </td>

                            <td class="whitespace-nowrap">
                                08:51 AM
                            </td>

                            <td>
                                <span class="badge-success">
                                    Present
                                </span>
                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>


        {{-- Recent Notifications --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-5">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Recent Notifications
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Latest automated attendance communication.
                </p>

            </div>

            <div class="divide-y divide-border">

                <div class="flex gap-3 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-dangerLight text-danger">
                        <i class="fa-solid fa-user-xmark"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-start justify-between gap-3">

                            <p class="text-sm font-medium text-text">
                                Absence notification
                            </p>

                            <span class="whitespace-nowrap text-xs text-muted">
                                4m
                            </span>

                        </div>

                        <p class="mt-1 text-xs leading-5 text-muted">
                            Parent of Anish Rai was notified about today's absence.
                        </p>

                    </div>

                </div>


                <div class="flex gap-3 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-warningLight text-warning">
                        <i class="fa-solid fa-clock"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-start justify-between gap-3">

                            <p class="text-sm font-medium text-text">
                                Late arrival detected
                            </p>

                            <span class="whitespace-nowrap text-xs text-muted">
                                12m
                            </span>

                        </div>

                        <p class="mt-1 text-xs leading-5 text-muted">
                            Rohan Kumar checked in after the allowed arrival time.
                        </p>

                    </div>

                </div>


                <div class="flex gap-3 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-successLight text-success">
                        <i class="fa-solid fa-message"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-start justify-between gap-3">

                            <p class="text-sm font-medium text-text">
                                SMS delivered
                            </p>

                            <span class="whitespace-nowrap text-xs text-muted">
                                18m
                            </span>

                        </div>

                        <p class="mt-1 text-xs leading-5 text-muted">
                            Attendance SMS was successfully delivered to 24 parents.
                        </p>

                    </div>

                </div>


                <div class="flex gap-3 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-infoLight text-info">
                        <i class="fa-solid fa-rotate"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <div class="flex items-start justify-between gap-3">

                            <p class="text-sm font-medium text-text">
                                Device synchronization
                            </p>

                            <span class="whitespace-nowrap text-xs text-muted">
                                25m
                            </span>

                        </div>

                        <p class="mt-1 text-xs leading-5 text-muted">
                            Main Gate Device synchronized 186 attendance records.
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Students Requiring Attention
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Frequently Late --}}
        <div class="card col-span-12 overflow-hidden lg:col-span-6">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Frequent Late Arrivals
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Students with repeated late attendance this month.
                </p>

            </div>

            <div class="divide-y divide-border">

                @foreach([
                    ['name' => 'Rohan Kumar', 'class' => 'Class 9 - A', 'count' => 8, 'initials' => 'RK'],
                    ['name' => 'Aayush Thapa', 'class' => 'Class 8 - B', 'count' => 6, 'initials' => 'AT'],
                    ['name' => 'Suman Rai', 'class' => 'Class 10 - A', 'count' => 5, 'initials' => 'SR'],
                    ['name' => 'Priya Shah', 'class' => 'Class 7 - A', 'count' => 4, 'initials' => 'PS'],
                ] as $student)

                    <div class="flex items-center gap-3 px-5 py-3">

                        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-warningLight text-xs font-semibold text-warning">
                            {{ $student['initials'] }}
                        </div>

                        <div class="min-w-0 flex-1">

                            <p class="truncate text-sm font-medium text-text">
                                {{ $student['name'] }}
                            </p>

                            <p class="mt-0.5 text-xs text-muted">
                                {{ $student['class'] }}
                            </p>

                        </div>

                        <span class="badge-warning">
                            {{ $student['count'] }} late
                        </span>

                    </div>

                @endforeach

            </div>

        </div>


        {{-- Frequent Absence --}}
        <div class="card col-span-12 overflow-hidden lg:col-span-6">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Frequent Absences
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Students requiring attendance follow-up.
                </p>

            </div>

            <div class="divide-y divide-border">

                @foreach([
                    ['name' => 'Anish Rai', 'class' => 'Class 8 - A', 'count' => 7, 'initials' => 'AR'],
                    ['name' => 'Kriti Yadav', 'class' => 'Class 9 - B', 'count' => 6, 'initials' => 'KY'],
                    ['name' => 'Bibek Shah', 'class' => 'Class 7 - B', 'count' => 5, 'initials' => 'BS'],
                    ['name' => 'Riya Sharma', 'class' => 'Class 6 - A', 'count' => 4, 'initials' => 'RS'],
                ] as $student)

                    <div class="flex items-center gap-3 px-5 py-3">

                        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-dangerLight text-xs font-semibold text-danger">
                            {{ $student['initials'] }}
                        </div>

                        <div class="min-w-0 flex-1">

                            <p class="truncate text-sm font-medium text-text">
                                {{ $student['name'] }}
                            </p>

                            <p class="mt-0.5 text-xs text-muted">
                                {{ $student['class'] }}
                            </p>

                        </div>

                        <span class="badge-danger">
                            {{ $student['count'] }} absent
                        </span>

                    </div>

                @endforeach

            </div>

        </div>

    </div>


    {{-- ============================================================
        Monthly Attendance Heatmap
    ============================================================ --}}
    <div class="card overflow-hidden">

        <div class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">

            <div>

                <h2 class="text-base font-semibold text-text">
                    Attendance Heatmap
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Class attendance percentage during the recent school days.
                </p>

            </div>

            <div class="flex items-center gap-3 text-xs text-muted">

                <span class="flex items-center gap-1.5">
                    <span class="h-2.5 w-2.5 rounded-sm bg-danger"></span>
                    Low
                </span>

                <span class="flex items-center gap-1.5">
                    <span class="h-2.5 w-2.5 rounded-sm bg-warning"></span>
                    Medium
                </span>

                <span class="flex items-center gap-1.5">
                    <span class="h-2.5 w-2.5 rounded-sm bg-success"></span>
                    High
                </span>

            </div>

        </div>

        <div class="overflow-x-auto p-4">

            <div
                id="attendanceHeatmap"
                class="min-w-[700px] min-h-[300px]"
            ></div>

        </div>

    </div>


    {{-- ============================================================
        Quick Actions
    ============================================================ --}}
    <div class="card overflow-hidden">

        <div class="border-b border-border px-5 py-4">

            <h2 class="text-base font-semibold text-text">
                Quick Actions
            </h2>

            <p class="mt-1 text-xs text-muted">
                Frequently used administrative actions.
            </p>

        </div>

        <div class="grid grid-cols-2 gap-px bg-border sm:grid-cols-3 xl:grid-cols-6">

            <a
                href="{{ route('students.create') }}"
                class="group bg-card p-4 transition hover:bg-background"
            >
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-user-plus"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    Add Student
                </p>

                <p class="mt-1 text-xs text-muted">
                    New admission
                </p>
            </a>


            <a
                href="{{ route('teachers.create') }}"
                class="group bg-card p-4 transition hover:bg-background"
            >
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-chalkboard-user"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    Add Teacher
                </p>

                <p class="mt-1 text-xs text-muted">
                    Register staff
                </p>
            </a>


            <a
                href="{{ route('school-classes.index') }}"
                class="group bg-card p-4 transition hover:bg-background"
            >
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-infoLight text-info">
                    <i class="fa-solid fa-school"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    Classes
                </p>

                <p class="mt-1 text-xs text-muted">
                    Manage classes
                </p>
            </a>


            <a
                href="{{ route('holidays.create') }}"
                class="group bg-card p-4 transition hover:bg-background"
            >
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-warningLight text-warning">
                    <i class="fa-regular fa-calendar-xmark"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    Add Holiday
                </p>

                <p class="mt-1 text-xs text-muted">
                    School calendar
                </p>
            </a>


            <a
                href="{{ route('attendance-devices.index') }}"
                class="group bg-card p-4 transition hover:bg-background"
            >
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-successLight text-success">
                    <i class="fa-solid fa-fingerprint"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    Devices
                </p>

                <p class="mt-1 text-xs text-muted">
                    Device status
                </p>
            </a>


            <a
                href="{{ route('school-settings.index') }}"
                class="group bg-card p-4 transition hover:bg-background"
            >
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-gear"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    Settings
                </p>

                <p class="mt-1 text-xs text-muted">
                    School configuration
                </p>
            </a>

        </div>

    </div>

</div>

@endsection


@push('scripts')

<script>
document.addEventListener('DOMContentLoaded', function () {

    if (typeof ApexCharts === 'undefined') {
        console.warn('ApexCharts is not loaded.');
        return;
    }

    /*
    |--------------------------------------------------------------------------
    | Theme Helpers
    |--------------------------------------------------------------------------
    */

    const rootStyles = getComputedStyle(document.documentElement);

    const rgbVariable = (name, fallback) => {
        const value = rootStyles.getPropertyValue(name).trim();

        return value
            ? `rgb(${value})`
            : fallback;
    };

    const colors = {
        primary: rgbVariable('--primary', '#0284C7'),
        success: rgbVariable('--success', '#16A34A'),
        danger: rgbVariable('--danger', '#DC2626'),
        warning: rgbVariable('--warning', '#D97706'),
        info: rgbVariable('--info', '#38BDF8'),
        text: rgbVariable('--text', '#1E293B'),
        muted: rgbVariable('--muted', '#64748B'),
        border: rgbVariable('--border', '#E2E8F0'),
        card: rgbVariable('--card', '#FFFFFF'),
    };

    const isDark = document.documentElement.classList.contains('dark');

    const baseChartOptions = {
        chart: {
            fontFamily: 'Inter, sans-serif',
            foreColor: colors.muted,
            toolbar: {
                show: false
            },
            animations: {
                enabled: true,
                speed: 450
            }
        },

        dataLabels: {
            enabled: false
        },

        grid: {
            borderColor: colors.border,
            strokeDashArray: 4
        },

        tooltip: {
            theme: isDark ? 'dark' : 'light'
        }
    };


    /*
    |--------------------------------------------------------------------------
    | Attendance Trend
    |--------------------------------------------------------------------------
    */

    const attendanceTrendElement = document.querySelector('#attendanceTrendChart');

    if (attendanceTrendElement) {

        new ApexCharts(attendanceTrendElement, {

            ...baseChartOptions,

            chart: {
                ...baseChartOptions.chart,
                type: 'area',
                height: 320
            },

            series: [
                {
                    name: 'Present',
                    data: [1084, 1112, 1096, 1138, 1120, 1154, 1126]
                },
                {
                    name: 'Absent',
                    data: [102, 88, 96, 71, 83, 62, 84]
                },
                {
                    name: 'Late',
                    data: [42, 35, 48, 29, 44, 31, 38]
                }
            ],

            colors: [
                colors.success,
                colors.danger,
                colors.warning
            ],

            stroke: {
                curve: 'smooth',
                width: 2
            },

            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.22,
                    opacityTo: 0.02,
                    stops: [0, 95, 100]
                }
            },

            markers: {
                size: 0,
                hover: {
                    size: 4
                }
            },

            grid: baseChartOptions.grid,

            xaxis: {
                categories: [
                    'Mon',
                    'Tue',
                    'Wed',
                    'Thu',
                    'Fri',
                    'Sat',
                    'Today'
                ],

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                }
            },

            yaxis: {
                labels: {
                    formatter: value => Math.round(value)
                }
            },

            legend: {
                position: 'top',
                horizontalAlign: 'right',
                fontSize: '12px',
                markers: {
                    size: 6
                }
            },

            tooltip: baseChartOptions.tooltip

        }).render();

    }


    /*
    |--------------------------------------------------------------------------
    | Attendance Percentage
    |--------------------------------------------------------------------------
    */

    const radialElement = document.querySelector('#attendanceRadialChart');

    if (radialElement) {

        new ApexCharts(radialElement, {

            ...baseChartOptions,

            chart: {
                ...baseChartOptions.chart,
                type: 'radialBar',
                height: 230
            },

            series: [90.2],

            colors: [
                colors.success
            ],

            plotOptions: {
                radialBar: {

                    hollow: {
                        size: '67%'
                    },

                    track: {
                        background: colors.border
                    },

                    dataLabels: {

                        name: {
                            show: true,
                            fontSize: '12px',
                            color: colors.muted,
                            offsetY: 20
                        },

                        value: {
                            fontSize: '24px',
                            fontWeight: 600,
                            color: colors.text,
                            offsetY: -12,
                            formatter: value => `${value}%`
                        }

                    }

                }
            },

            labels: [
                'Attendance Rate'
            ],

            stroke: {
                lineCap: 'round'
            }

        }).render();

    }


    /*
    |--------------------------------------------------------------------------
    | Attendance by Class
    |--------------------------------------------------------------------------
    */

    const classChartElement = document.querySelector('#classAttendanceChart');

    if (classChartElement) {

        new ApexCharts(classChartElement, {

            ...baseChartOptions,

            chart: {
                ...baseChartOptions.chart,
                type: 'bar',
                height: 300
            },

            series: [
                {
                    name: 'Attendance',
                    data: [94, 91, 89, 93, 88, 92, 90, 87, 91, 89]
                }
            ],

            colors: [
                colors.primary
            ],

            plotOptions: {
                bar: {
                    borderRadius: 4,
                    columnWidth: '48%'
                }
            },

            grid: baseChartOptions.grid,

            xaxis: {

                categories: [
                    'Class 1',
                    'Class 2',
                    'Class 3',
                    'Class 4',
                    'Class 5',
                    'Class 6',
                    'Class 7',
                    'Class 8',
                    'Class 9',
                    'Class 10'
                ],

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                },

                labels: {
                    rotate: -35
                }

            },

            yaxis: {
                min: 0,
                max: 100,
                tickAmount: 5,

                labels: {
                    formatter: value => `${value}%`
                }
            },

            tooltip: {
                ...baseChartOptions.tooltip,

                y: {
                    formatter: value => `${value}%`
                }
            }

        }).render();

    }


    /*
    |--------------------------------------------------------------------------
    | Weekly Attendance
    |--------------------------------------------------------------------------
    */

    const weeklyElement = document.querySelector('#weeklyAttendanceChart');

    if (weeklyElement) {

        new ApexCharts(weeklyElement, {

            ...baseChartOptions,

            chart: {
                ...baseChartOptions.chart,
                type: 'bar',
                height: 300,
                stacked: true
            },

            series: [
                {
                    name: 'Present',
                    data: [1084, 1112, 1096, 1138, 1120, 1154]
                },
                {
                    name: 'Absent',
                    data: [102, 88, 96, 71, 83, 62]
                }
            ],

            colors: [
                colors.success,
                colors.danger
            ],

            plotOptions: {
                bar: {
                    borderRadius: 3,
                    columnWidth: '48%'
                }
            },

            grid: baseChartOptions.grid,

            xaxis: {

                categories: [
                    'Mon',
                    'Tue',
                    'Wed',
                    'Thu',
                    'Fri',
                    'Sat'
                ],

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                }

            },

            legend: {
                position: 'top',
                horizontalAlign: 'right',
                fontSize: '12px'
            },

            tooltip: baseChartOptions.tooltip

        }).render();

    }


    /*
    |--------------------------------------------------------------------------
    | Attendance Distribution
    |--------------------------------------------------------------------------
    */

    const statusElement = document.querySelector('#attendanceStatusChart');

    if (statusElement) {

        new ApexCharts(statusElement, {

            ...baseChartOptions,

            chart: {
                ...baseChartOptions.chart,
                type: 'donut',
                height: 280
            },

            series: [
                1126,
                84,
                38
            ],

            labels: [
                'Present',
                'Absent',
                'Late'
            ],

            colors: [
                colors.success,
                colors.danger,
                colors.warning
            ],

            stroke: {
                width: 3,
                colors: [
                    colors.card
                ]
            },

            legend: {
                position: 'bottom',
                fontSize: '12px'
            },

            plotOptions: {
                pie: {
                    donut: {
                        size: '70%',

                        labels: {
                            show: true,

                            name: {
                                show: true,
                                color: colors.muted
                            },

                            value: {
                                show: true,
                                color: colors.text,
                                fontSize: '20px',
                                fontWeight: 600
                            },

                            total: {
                                show: true,
                                label: 'Total',
                                color: colors.muted,

                                formatter: function () {
                                    return '1,248';
                                }
                            }
                        }
                    }
                }
            },

            tooltip: baseChartOptions.tooltip

        }).render();

    }


    /*
    |--------------------------------------------------------------------------
    | Attendance Heatmap
    |--------------------------------------------------------------------------
    */

    const heatmapElement = document.querySelector('#attendanceHeatmap');

    if (heatmapElement) {

        const generateHeatmapData = (values) => {
            return values.map((value, index) => ({
                x: `Day ${index + 1}`,
                y: value
            }));
        };

        new ApexCharts(heatmapElement, {

            ...baseChartOptions,

            chart: {
                ...baseChartOptions.chart,
                type: 'heatmap',
                height: 300
            },

            series: [
                {
                    name: 'Class 10',
                    data: generateHeatmapData([92, 95, 91, 88, 94, 96, 90, 93, 91, 95, 89, 92])
                },
                {
                    name: 'Class 9',
                    data: generateHeatmapData([88, 91, 90, 84, 89, 93, 87, 90, 92, 86, 91, 89])
                },
                {
                    name: 'Class 8',
                    data: generateHeatmapData([90, 87, 92, 89, 91, 88, 94, 90, 86, 93, 89, 91])
                },
                {
                    name: 'Class 7',
                    data: generateHeatmapData([94, 93, 96, 91, 95, 92, 90, 94, 93, 95, 91, 96])
                },
                {
                    name: 'Class 6',
                    data: generateHeatmapData([87, 89, 85, 91, 88, 90, 86, 92, 89, 87, 91, 88])
                },
                {
                    name: 'Class 5',
                    data: generateHeatmapData([91, 94, 90, 93, 92, 95, 89, 91, 94, 90, 93, 92])
                }
            ],

            dataLabels: {
                enabled: false
            },

            plotOptions: {
                heatmap: {
                    radius: 3,
                    enableShades: false,

                    colorScale: {
                        ranges: [
                            {
                                from: 0,
                                to: 84,
                                color: colors.danger,
                                name: 'Low'
                            },
                            {
                                from: 85,
                                to: 90,
                                color: colors.warning,
                                name: 'Medium'
                            },
                            {
                                from: 91,
                                to: 100,
                                color: colors.success,
                                name: 'High'
                            }
                        ]
                    }
                }
            },

            grid: {
                show: false
            },

            xaxis: {
                labels: {
                    style: {
                        fontSize: '11px'
                    }
                }
            },

            tooltip: {
                ...baseChartOptions.tooltip,

                y: {
                    formatter: value => `${value}% attendance`
                }
            }

        }).render();

    }

});
</script>

@endpush