@extends('layouts.app')

@section('title', 'Dashboard Admin')

@section('content')
<div x-data="{ period: '7d' }">
    {{-- Page Header --}}
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Dashboard Super Admin</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Selamat datang, {{ auth()->user()->name }}. Berikut
            ringkasan sistem hari ini.</p>
    </div>

    {{-- STAT CARDS --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
        <x-stat-card label="Guru Aktif" value="{{ $stats['active_teachers'] ?? 0 }}" icon="users" color="blue" />
        <x-stat-card label="Siswa Aktif" value="{{ $stats['active_students'] ?? 0 }}" icon="users" color="green" />
        <x-stat-card label="Total Kelas" value="{{ $stats['total_classrooms'] ?? 0 }}" icon="calendar" color="purple" />
        <x-stat-card label="Kehadiran Hari Ini" value="{{ $stats['today_attendance_pct'] ?? '0' }}%" icon="check"
            color="yellow" />
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-6">

        {{-- Grafik Kehadiran 7 Hari --}}
        <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</h3>
                <div class="flex gap-2">
                    <button @click="period = '7d'"
                        :class="period === '7d' ? 'bg-primary-700 text-white' :
                                'bg-white text-gray-700 border border-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600'"
                        class="px-3 py-1.5 text-xs font-medium rounded-lg hover:bg-primary-800 hover:text-white transition-colors">
                        7 Hari
                    </button>
                    <button @click="period = '30d'"
                        :class="period === '30d' ? 'bg-primary-700 text-white' :
                                'bg-white text-gray-700 border border-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600'"
                        class="px-3 py-1.5 text-xs font-medium rounded-lg hover:bg-primary-800 hover:text-white transition-colors">
                        30 Hari
                    </button>
                </div>
            </div>
            <div class="h-64">
                <canvas id="attendanceTrendChart" class="w-full h-full"></canvas>
            </div>
        </div>

        {{-- Statistik Kehadiran Hari Ini --}}
        <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">Status Kehadiran</h3>
            <div class="mb-4 h-48">
                <canvas id="attendanceStatusChart" class="w-full h-full"></canvas>
            </div>
            <ul class="space-y-3">
                @foreach ([['label' => 'Hadir', 'value' => $stats['hadir'] ?? 0, 'color' => 'green'], ['label' =>
                'Terlambat', 'value' => $stats['terlambat'] ?? 0, 'color' => 'yellow'], ['label' => 'Absen', 'value' =>
                $stats['absen'] ?? 0, 'color' => 'red'], ['label' => 'Izin', 'value' => $stats['izin'] ?? 0, 'color' =>
                'blue'], ['label' => 'Sakit', 'value' => $stats['sakit'] ?? 0, 'color' => 'purple']] as $item)
                <li class="flex items-center justify-between">
                    <span class="text-sm text-gray-600 dark:text-gray-400">{{ $item['label'] }}</span>
                    <x-badge :color="$item['color']">{{ $item['value'] }}</x-badge>
                </li>
                @endforeach
            </ul>
        </div>
    </div>

    {{-- Alert Terbaru --}}
    <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">Alert Terbaru</h3>
            <a href="{{ route('admin.notifications') }}"
                class="text-sm text-primary-600 hover:underline dark:text-primary-400">Lihat semua →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-4 py-3">Pesan</th>
                        <th class="px-4 py-3">Waktu</th>
                        <th class="px-4 py-3">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($recentAlerts ?? [] as $alert)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">
                            {{ $alert->data['title'] ?? '–' }}</td>
                        <td class="px-4 py-3">{{ $alert->created_at->diffForHumans() }}</td>
                        <td class="px-4 py-3">
                            <x-badge :color="$alert->read_at ? 'gray' : 'red'">
                                {{ $alert->read_at ? 'Dibaca' : 'Baru' }}
                            </x-badge>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="px-4 py-6 text-center text-gray-400">Tidak ada alert</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Quick Links --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        @foreach ([['label' => 'Absensi Guru', 'href' => route('admin.teacher-daily-attendances.index'), 'icon' =>
        'users', 'color' => 'blue'], ['label' => 'Absensi Siswa', 'href' =>
        route('admin.student-daily-attendances.index'), 'icon' => 'users', 'color' => 'green'], ['label' => 'Izin
        Pending', 'href' => route('admin.teacher-leaves.index'), 'icon' => 'clock', 'color' => 'yellow'], ['label' =>
        'QR Token', 'href' => route('admin.qr.index'), 'icon' => 'check', 'color' => 'purple']] as $link)
        <a href="{{ $link['href'] }}"
            class="flex flex-col items-center justify-center p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md dark:bg-gray-800 dark:border-gray-700 transition-shadow group">
            <div
                class="p-3 mb-3 rounded-full bg-{{ $link['color'] }}-100 dark:bg-{{ $link['color'] }}-900 group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6 text-{{ $link['color'] }}-600 dark:text-{{ $link['color'] }}-400"
                    fill="currentColor" viewBox="0 0 20 20">
                    <path
                        d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
                </svg>
            </div>
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $link['label'] }}</span>
        </a>
        @endforeach
    </div>
</div>
@endsection

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

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

            const trendCanvas = document.getElementById('attendanceTrendChart');
            const statusCanvas = document.getElementById('attendanceStatusChart');

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

            const root = trendCanvas.closest('[x-data]');
            const alpineScope = root && root.__x ? root.__x.$data : null;

            const trendDatasets = {
                '7d': dashboardChartData?.trend_7d ?? {
                    labels: [],
                    percentages: []
                },
                '30d': dashboardChartData?.trend_30d ?? {
                    labels: [],
                    percentages: []
                },
            };

            const initialPeriod = alpineScope?.period === '30d' ? '30d' : '7d';

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

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

            new Chart(statusCanvas, {
                type: 'doughnut',
                data: {
                    labels: hasStatusData ? (dashboardChartData?.status_today?.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,
                            }
                        }
                    }
                }
            });

            if (alpineScope && typeof alpineScope.$watch === 'function') {
                alpineScope.$watch('period', (newPeriod) => {
                    const selectedPeriod = newPeriod === '30d' ? '30d' : '7d';
                    trendChart.data.labels = trendDatasets[selectedPeriod].labels;
                    trendChart.data.datasets[0].data = trendDatasets[selectedPeriod].percentages;
                    trendChart.update();
                });
            }
        });
</script>
@endpush