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

<div
    class="mb-6 flex items-center gap-5 rounded-lg border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800">
    @if (optional($teacher)->photo_url)
    <img src="{{ $teacher->photo_url }}" class="h-20 w-20 rounded-full border-2 border-primary-200 object-cover"
        alt="{{ $teacher->full_name }}">
    @else
    <div
        class="flex h-20 w-20 shrink-0 items-center justify-center rounded-full bg-green-600 text-3xl font-bold text-white">
        {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
    </div>
    @endif
    <div>
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ optional($teacher)->full_name ??
            auth()->user()->name }}</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400">NIP: {{ optional($teacher)->employee_number ?? '–' }}</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ optional($teacher)->specialization ?? 'Guru' }}</p>
    </div>
</div>

<div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
    <x-stat-card label="Hadir Bulan Ini" 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="mb-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
    <div
        class="xl:col-span-2 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="mb-4 flex items-center justify-between">
            <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="teacherAttendanceTrendChart" class="h-full w-full"></canvas>
        </div>
    </div>

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

<div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
    <div class="mb-4 flex items-center justify-between">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jadwal Hari Ini</h3>
        <a href="{{ route('teacher.schedules.today') }}"
            class="text-sm text-primary-600 hover:underline dark:text-primary-400">Lihat semua →</a>
    </div>
    @forelse($todaySchedules ?? [] as $schedule)
    <div
        class="mb-2 flex items-center gap-4 rounded-lg border border-gray-100 p-3 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700">
        <div class="min-w-18 text-center">
            <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">{{ $schedule->subject->name ?? 'Mapel' }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $schedule->classroom->name ?? 'Kelas' }}</p>
        </div>
        <x-badge :color="$schedule->today_teaching_count > 0 ? 'green' : 'gray'">{{ $schedule->today_teaching_count > 0
            ? 'Selesai' : 'Belum' }}</x-badge>
    </div>
    @empty
    <p class="py-4 text-center text-sm text-gray-400">Tidak ada jadwal hari ini</p>
    @endforelse
</div>

<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
    <h3 class="mb-3 text-lg font-semibold text-gray-900 dark:text-white">Notifikasi Terbaru</h3>
    @forelse($recentNotifications ?? [] as $notif)
    <div class="flex items-start gap-3 border-b py-2 dark:border-gray-700">
        <div class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary-500"></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="py-3 text-center text-sm text-gray-400">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 teacherDashboardChartData = {{ \Illuminate\Support\Js::from($chartData ?? []) }};

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

            const trendCanvas = document.getElementById('teacherAttendanceTrendChart');
            const statusCanvas = document.getElementById('teacherAttendanceStatusChart');

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

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

            new Chart(trendCanvas, {
                type: 'line',
                data: {
                    labels: trend.labels,
                    datasets: [{
                        label: 'Kehadiran',
                        data: trend.percentages,
                        borderColor: '#16a34a',
                        backgroundColor: 'rgba(22, 163, 74, 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 = teacherDashboardChartData?.status_month?.values ?? [];
            const hasStatusData = statusValues.some((value) => Number(value) > 0);

            new Chart(statusCanvas, {
                type: 'doughnut',
                data: {
                    labels: hasStatusData ? (teacherDashboardChartData?.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