@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')

@php
    $summary = $dashboard['summary'];
    $secondary = $dashboard['secondary'];
@endphp

<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>
                    {{ $dashboard['date']->format('D, d M Y') }}
                </span>
            </div>

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

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

        </div>

    </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">
                        {{ number_format($summary['total_students']) }}
                    </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">
                    +{{ number_format($summary['new_students_this_month']) }} 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">
                        {{ number_format($summary['present']) }}
                    </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">
                    {{ number_format($summary['present_percentage'], 1) }}%
                </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">
                        {{ number_format($summary['absent']) }}
                    </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">
                    {{ number_format($summary['absent_percentage'], 1) }}%
                </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">
                        {{ number_format($summary['late']) }}
                    </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">
                    {{ number_format($summary['late_percentage'], 1) }}%
                </span>

            </div>

        </div>

    </div>


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

        <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">
                        {{ number_format($secondary['teachers_present']) }}
                    </p>

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

                </div>

            </div>

        </div>


        <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">
                        {{ number_format($secondary['devices_online']) }}
                        /
                        {{ number_format($secondary['devices_total']) }}
                    </p>

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

                </div>

            </div>

        </div>


        <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">
                        {{ number_format($secondary['sms_sent']) }}
                    </p>

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

                </div>

            </div>

        </div>


        <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">
                        {{ number_format($secondary['emails_sent']) }}
                    </p>

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

                </div>

            </div>

        </div>

    </div>


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

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

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

                <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 recent school days.
                </p>

            </div>

            <div class="p-4">

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

            </div>

        </div>


        <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">
                            {{ number_format($summary['present']) }}
                        </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">
                            {{ number_format($summary['absent']) }}
                        </p>

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

                    </div>

                    <div>

                        <p class="text-sm font-semibold text-warning">
                            {{ number_format($summary['late']) }}
                        </p>

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

                    </div>

                </div>

            </div>

        </div>

    </div>


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

        <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>


        <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 attendance.
                </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">

        <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>


        <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>

                @can('attendance-devices.view')

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

                @endcan

            </div>


            @forelse($dashboard['devices'] as $device)

                <div class="flex items-center gap-4 border-b border-border px-5 py-4 last:border-b-0">

                    <div
                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg
                        {{ $device['online'] ? 'bg-successLight text-success' : '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">
                                {{ $device['name'] }}
                            </p>

                            <span
                                class="h-2 w-2 rounded-full
                                {{ $device['online'] ? 'bg-success' : 'bg-danger' }}"
                            ></span>

                        </div>

                        <p class="mt-1 text-xs text-muted">
                            {{ $device['last_sync'] }}
                        </p>

                    </div>

                    <span class="{{ $device['online'] ? 'badge-success' : 'badge-danger' }}">
                        {{ $device['online'] ? 'Online' : 'Offline' }}
                    </span>

                </div>

            @empty

                <div class="px-5 py-10 text-center">

                    <i class="fa-solid fa-fingerprint text-2xl text-muted"></i>

                    <p class="mt-3 text-sm font-medium text-text">
                        No attendance devices
                    </p>

                    <p class="mt-1 text-xs text-muted">
                        No biometric devices are currently configured.
                    </p>

                </div>

            @endforelse

        </div>

    </div>


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

        <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">
                            Recent Attendance
                        </h2>

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

                    </div>

                    <p class="mt-1 text-xs text-muted">
                        Latest attendance records received today.
                    </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>

                        @forelse($dashboard['recent_attendance'] as $attendance)

                            <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">
                                            {{ $attendance['initials'] }}
                                        </div>

                                        <div>

                                            <p class="text-sm font-medium text-text">
                                                {{ $attendance['student_name'] }}
                                            </p>

                                            <p class="text-xs text-muted">
                                                {{ $attendance['student_code'] }}
                                            </p>

                                        </div>

                                    </div>

                                </td>

                                <td class="whitespace-nowrap">
                                    {{ $attendance['class'] }}
                                </td>

                                <td class="whitespace-nowrap">
                                    {{ $attendance['time'] }}
                                </td>

                                <td>

                                    @switch($attendance['status'])

                                        @case('present')
                                            <span class="badge-success">
                                                Present
                                            </span>
                                            @break

                                        @case('late')
                                            <span class="badge-warning">
                                                Late
                                            </span>
                                            @break

                                        @case('absent')
                                            <span class="badge-danger">
                                                Absent
                                            </span>
                                            @break

                                        @default
                                            <span class="badge-info">
                                                {{ ucfirst($attendance['status']) }}
                                            </span>

                                    @endswitch

                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    <p class="text-sm font-medium text-text">
                                        No attendance recorded today
                                    </p>

                                    <p class="mt-1 text-xs text-muted">
                                        Attendance records will appear here when received.
                                    </p>

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>


        {{-- 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 attendance communication and system activity.
                </p>

            </div>


            @forelse($dashboard['notifications'] as $notification)

                <div class="flex gap-3 border-b border-border px-5 py-4 last:border-b-0">

                    <div
                        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg
                        {{ $notification['type'] === 'danger'
                            ? 'bg-dangerLight text-danger'
                            : ($notification['type'] === 'warning'
                                ? 'bg-warningLight text-warning'
                                : ($notification['type'] === 'success'
                                    ? 'bg-successLight text-success'
                                    : 'bg-infoLight text-info')) }}"
                    >

                        <i class="{{ $notification['icon'] }}"></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">
                                {{ $notification['title'] }}
                            </p>

                            <span class="whitespace-nowrap text-xs text-muted">
                                {{ $notification['time'] }}
                            </span>

                        </div>

                        <p class="mt-1 text-xs leading-5 text-muted">
                            {{ $notification['message'] }}
                        </p>

                    </div>

                </div>

            @empty

                <div class="px-5 py-10 text-center">

                    <i class="fa-regular fa-bell text-2xl text-muted"></i>

                    <p class="mt-3 text-sm font-medium text-text">
                        No recent notifications
                    </p>

                </div>

            @endforelse

        </div>

    </div>


    {{-- ============================================================
        Attendance Attention Lists
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Frequent 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>

            @forelse($dashboard['frequent_late'] as $student)

                <div class="flex items-center gap-3 border-b border-border px-5 py-3 last:border-b-0">

                    <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>

            @empty

                <div class="px-5 py-10 text-center">

                    <p class="text-sm font-medium text-text">
                        No frequent late arrivals
                    </p>

                    <p class="mt-1 text-xs text-muted">
                        No students currently require late-arrival follow-up.
                    </p>

                </div>

            @endforelse

        </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 this month.
                </p>

            </div>

            @forelse($dashboard['frequent_absent'] as $student)

                <div class="flex items-center gap-3 border-b border-border px-5 py-3 last:border-b-0">

                    <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>

            @empty

                <div class="px-5 py-10 text-center">

                    <p class="text-sm font-medium text-text">
                        No frequent absences
                    </p>

                    <p class="mt-1 text-xs text-muted">
                        No students currently require absence follow-up.
                    </p>

                </div>

            @endforelse

        </div>

    </div>


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

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

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

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

        </div>

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

            <div
                id="attendanceHeatmap"
                class="min-h-[300px] min-w-[700px]"
            ></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">

            @can('students.create')

                <a
                    href="{{ route('students.create') }}"
                    class="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>

            @endcan


            @can('teachers.create')

                <a
                    href="{{ route('teachers.create') }}"
                    class="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>

            @endcan


            @can('school-classes.view')

                <a
                    href="{{ route('school-classes.index') }}"
                    class="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>

            @endcan


            @can('holidays.create')

                <a
                    href="{{ route('holidays.create') }}"
                    class="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>

            @endcan


            @can('attendance-devices.view')

                <a
                    href="{{ route('attendance-devices.index') }}"
                    class="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>

            @endcan


            @can('school-settings.view')

                <a
                    href="{{ route('school-settings.index') }}"
                    class="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">
                        Configuration
                    </p>

                </a>

            @endcan

        </div>

    </div>

</div>

@endsection
@php
    $chartData = [
        'attendanceRate' => $dashboard['attendance_rate'] ?? 0,

        'trend' => $dashboard['attendance_trend'] ?? [
            'categories' => [],
            'present' => [],
            'absent' => [],
            'late' => [],
        ],

        'classAttendance' => $dashboard['class_attendance'] ?? [
            'classes' => [],
            'percentages' => [],
        ],

        'weekly' => $dashboard['weekly_attendance'] ?? [
            'categories' => [],
            'present' => [],
            'absent' => [],
        ],

        'distribution' => $dashboard['attendance_distribution'] ?? [
            'present' => 0,
            'absent' => 0,
            'late' => 0,
        ],

        'heatmap' => $dashboard['heatmap'] ?? [],
    ];
@endphp


@push('scripts')

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

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

    /*
    |--------------------------------------------------------------------------
    | Server Data
    |--------------------------------------------------------------------------
    */



    const dashboard = @json($chartData);
     console.log('Dashboard chart data:', dashboard);

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

    const styles = getComputedStyle(document.documentElement);

    function cssColor(variable, fallback) {

        const value = styles
            .getPropertyValue(variable)
            .trim();

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

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

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


    /*
    |--------------------------------------------------------------------------
    | Common Chart Options
    |--------------------------------------------------------------------------
    */

    const common = {

        chart: {
            fontFamily: 'Inter, sans-serif',
            foreColor: colors.muted,
            toolbar: {
                show: false
            },

            animations: {
                enabled: true,
                speed: 400
            }
        },

        dataLabels: {
            enabled: false
        },

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

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

    };


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

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

    if (
        trendElement &&
        dashboard.trend.categories.length
    ) {

        new ApexCharts(trendElement, {

            ...common,

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

            series: [
                {
                    name: 'Present',
                    data: dashboard.trend.present
                },
                {
                    name: 'Absent',
                    data: dashboard.trend.absent
                },
                {
                    name: 'Late',
                    data: dashboard.trend.late
                }
            ],

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

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

            fill: {
                type: 'gradient',

                gradient: {
                    opacityFrom: 0.20,
                    opacityTo: 0.02
                }
            },

            markers: {
                size: 0
            },

            xaxis: {

                categories:
                    dashboard.trend.categories,

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                }

            },

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

        }).render();

    }


    /*
    |--------------------------------------------------------------------------
    | Attendance Rate
    |--------------------------------------------------------------------------
    */

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

    if (radialElement) {

        new ApexCharts(radialElement, {

            ...common,

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

            series: [
                Number(dashboard.attendanceRate || 0)
            ],

            colors: [
                colors.success
            ],

            labels: [
                'Attendance Rate'
            ],

            stroke: {
                lineCap: 'round'
            },

            plotOptions: {

                radialBar: {

                    hollow: {
                        size: '67%'
                    },

                    track: {
                        background: colors.border
                    },

                    dataLabels: {

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

                        value: {
                            fontSize: '24px',
                            fontWeight: 600,
                            color: colors.text,
                            offsetY: -12,

                            formatter: function (value) {
                                return `${Number(value).toFixed(1)}%`;
                            }
                        }

                    }

                }

            }

        }).render();

    }


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

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

    if (
        classElement &&
        dashboard.classAttendance.classes.length
    ) {

        new ApexCharts(classElement, {

            ...common,

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

            series: [
                {
                    name: 'Attendance',
                    data: dashboard.classAttendance.percentages
                }
            ],

            colors: [
                colors.primary
            ],

            plotOptions: {

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

            },

            xaxis: {

                categories:
                    dashboard.classAttendance.classes,

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                }

            },

            yaxis: {

                min: 0,
                max: 100,

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

            },

            tooltip: {

                ...common.tooltip,

                y: {
                    formatter: value =>
                        `${Number(value).toFixed(1)}%`
                }

            }

        }).render();

    }


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

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

    if (
        weeklyElement &&
        dashboard.weekly.categories.length
    ) {

        new ApexCharts(weeklyElement, {

            ...common,

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

            series: [
                {
                    name: 'Present',
                    data: dashboard.weekly.present
                },
                {
                    name: 'Absent',
                    data: dashboard.weekly.absent
                }
            ],

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

            plotOptions: {

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

            },

            xaxis: {

                categories:
                    dashboard.weekly.categories,

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                }

            },

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

        }).render();

    }


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

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

    if (statusElement) {

        const distribution = dashboard.distribution;

        const total =
            Number(distribution.present || 0) +
            Number(distribution.absent || 0) +
            Number(distribution.late || 0);

        new ApexCharts(statusElement, {

            ...common,

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

            series: [
                Number(distribution.present || 0),
                Number(distribution.absent || 0),
                Number(distribution.late || 0)
            ],

            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 total.toLocaleString();
                                }

                            }

                        }

                    }

                }

            }

        }).render();

    }


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

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

    if (
        heatmapElement &&
        dashboard.heatmap.length
    ) {

        new ApexCharts(heatmapElement, {

            ...common,

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

            series:
                dashboard.heatmap,

            dataLabels: {
                enabled: false
            },

            plotOptions: {

                heatmap: {

                    radius: 3,

                    enableShades: false,

                    colorScale: {

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

                    }

                }

            },

            grid: {
                show: false
            },

            tooltip: {

                ...common.tooltip,

                y: {
                    formatter: value =>
                        `${Number(value).toFixed(1)}% attendance`
                }

            }

        }).render();

    }

});
</script>

@endpush