@extends('layouts.app')
@section('title', 'Dashboard Siswa')
@section('content')
<div class="mb-6">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Dashboard Siswa</h1>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ now()->translatedFormat('l, d F Y') }}</p>
</div>

{{-- Card Profil Siswa --}}
<div
    class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mb-6 flex items-center gap-5">
    @if (optional($student)->photo_url)
    <img src="{{ $student->photo_url }}" class="w-20 h-20 rounded-full object-cover border-2 border-yellow-200"
        alt="{{ $student->full_name }}">
    @else
    <div
        class="w-20 h-20 rounded-full bg-yellow-500 flex items-center justify-center text-white text-3xl font-bold shrink-0">
        {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
    </div>
    @endif
    <div>
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
            {{ optional($student)->full_name ?? auth()->user()->name }}</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400">NIS: {{ optional($student)->student_number ?? '–' }}</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Kelas: {{ optional($student)->classroom->name ?? '–' }}
        </p>
    </div>
    <div class="ml-auto text-right">
        @php $todayAttendance = $todayStatus ?? null; @endphp
        @if ($todayAttendance)
        @php
        $todayStatusValue = $todayAttendance->status instanceof \App\Enums\AttendanceStatus
        ? $todayAttendance->status->value
        : (string) $todayAttendance->status;
        $todayStatusLabel = $todayAttendance->status instanceof \App\Enums\AttendanceStatus
        ? $todayAttendance->status->label()
        : ucfirst($todayStatusValue);
        @endphp
        <x-badge :color="match ($todayStatusValue) {
                    'present' => 'green',
                    'late' => 'yellow',
                    'absent' => 'red',
                    'permission' => 'blue',
                    'sick' => 'purple',
                    default => 'gray',
                }">
            {{ $todayStatusLabel }} Hari Ini
        </x-badge>
        <p class="text-xs text-gray-500 mt-1">Masuk: {{ $todayAttendance->check_in_time ?? '–' }}</p>
        @else
        <x-badge color="gray">Belum Scan</x-badge>
        @endif
    </div>
</div>

{{-- Stat Bulan Ini --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <x-stat-card label="Hadir" value="{{ $stats['present'] ?? 0 }}" icon="check" color="green" />
    <x-stat-card label="Terlambat" value="{{ $stats['late'] ?? 0 }}" icon="clock" color="yellow" />
    <x-stat-card label="Absen" value="{{ $stats['absent'] ?? 0 }}" icon="users" color="red" />
    <x-stat-card label="Izin/Sakit" value="{{ ($stats['permission'] ?? 0) + ($stats['sick'] ?? 0) }}" icon="calendar"
        color="blue" />
</div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-6">
    <div
        class="xl:col-span-2 p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Trend Kehadiran 14 Hari</h3>
            <span class="text-xs text-gray-500 dark:text-gray-400">Hadir/Terlambat = 100%</span>
        </div>
        <div class="h-64">
            <canvas id="studentAttendanceTrendChart" class="w-full h-full"></canvas>
        </div>
    </div>

    <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Distribusi Status Bulan Ini</h3>
        <div class="h-64">
            <canvas id="studentAttendanceStatusChart" class="w-full h-full"></canvas>
        </div>
    </div>
</div>

{{-- Jadwal Hari Ini --}}
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mb-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jadwal Hari Ini</h3>
        <a href="{{ route('student.schedules.index') }}"
            class="text-sm text-primary-600 hover:underline dark:text-primary-400">Lihat semua →</a>
    </div>
    @forelse($todaySchedules ?? [] as $schedule)
    <div class="flex items-center gap-4 p-3 mb-2 rounded-lg border border-gray-100 dark:border-gray-700">
        <div class="text-center min-w-15">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ substr((string) $schedule->start_time, 0,
                5) }}</p>
            <p class="text-xs text-gray-400">{{ substr((string) $schedule->end_time, 0, 5) }}</p>
        </div>
        <div class="flex-1">
            <p class="font-medium text-gray-900 dark:text-white text-sm">{{ $schedule->subject->name ?? '–' }}
            </p>
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $schedule->teacher->full_name ?? '–' }}</p>
        </div>
    </div>
    @empty
    <p class="text-sm text-gray-400 py-4 text-center">Tidak ada jadwal hari ini</p>
    @endforelse
</div>

{{-- Notifikasi --}}
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Notifikasi</h3>
    @forelse($recentNotifications ?? [] as $notif)
    <div class="flex items-start gap-3 py-2 border-b dark:border-gray-700">
        <div class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5 shrink-0"></div>
        <div class="flex-1">
            <p class="text-sm font-medium text-gray-900 dark:text-white">
                {{ $notif->data['title'] ?? 'Notifikasi' }}</p>
            <p class="text-xs text-gray-500">{{ $notif->created_at->diffForHumans() }}</p>
        </div>
    </div>
    @empty
    <p class="text-sm text-gray-400 py-3 text-center">Tidak ada notifikasi baru</p>
    @endforelse
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
    const studentDashboardChartData = {{ \Illuminate\Support\Js::from($chartData ?? []) }};

        document.addEventListener('DOMContentLoaded', function() {
            if (typeof Chart === 'undefined') {
                return;
            }

            const trendCanvas = document.getElementById('studentAttendanceTrendChart');
            const statusCanvas = document.getElementById('studentAttendanceStatusChart');

            if (!(trendCanvas instanceof HTMLCanvasElement) || !(statusCanvas instanceof HTMLCanvasElement)) {
                return;
            }

            const trend = studentDashboardChartData?.trend_14d ?? {
                labels: [],
                percentages: []
            };

            new Chart(trendCanvas, {
                type: 'line',
                data: {
                    labels: trend.labels,
                    datasets: [{
                        label: 'Kehadiran',
                        data: trend.percentages,
                        borderColor: '#2563eb',
                        backgroundColor: 'rgba(37, 99, 235, 0.15)',
                        fill: true,
                        tension: 0.35,
                        pointRadius: 3,
                    }],
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: (value) => `${value}%`,
                            },
                        },
                    },
                    plugins: {
                        legend: {
                            display: false,
                        },
                    },
                },
            });

            const statusValues = studentDashboardChartData?.status_month?.values ?? [];
            const hasStatusData = statusValues.some((value) => Number(value) > 0);

            new Chart(statusCanvas, {
                type: 'doughnut',
                data: {
                    labels: hasStatusData ? (studentDashboardChartData?.status_month?.labels ?? []) : ['Belum ada data'],
                    datasets: [{
                        data: hasStatusData ? statusValues : [1],
                        backgroundColor: hasStatusData ? ['#16a34a', '#f59e0b', '#dc2626', '#2563eb', '#9333ea'] : ['#9ca3af'],
                        borderWidth: 0,
                    }],
                },
                options: {
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                boxWidth: 10,
                                boxHeight: 10,
                            },
                        },
                    },
                },
            });
        });
</script>
@endpush