@extends('simaju.layouts.main')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-subtitle', 'Ringkasan data sekolah')

@section('content')
<!-- Welcome Banner -->
<div class="bg-gradient-to-br from-indigo-600 via-indigo-700 to-purple-700 rounded-xl md:rounded-2xl p-4 sm:p-6 md:p-8 mb-4 md:mb-6 shadow-2xl relative overflow-hidden">
    <div class="absolute top-0 right-0 w-64 h-64 sm:w-96 sm:h-96 bg-white opacity-5 rounded-full -mr-32 sm:-mr-48 -mt-32 sm:-mt-48"></div>
    <div class="absolute bottom-0 left-0 w-48 h-48 sm:w-72 sm:h-72 bg-white opacity-5 rounded-full -ml-24 sm:-ml-36 -mb-24 sm:-mb-36"></div>
    <div class="relative z-10">
        <div class="flex items-center justify-between">
            <div class="text-white flex-1">
                <h1 class="text-lg sm:text-xl md:text-3xl lg:text-4xl font-bold mb-1 sm:mb-2 md:mb-3 leading-tight">Selamat datang di SMK Bina Bakti Mawasangka</h1>
                <p class="text-indigo-100 text-xs sm:text-sm md:text-base lg:text-lg">Pantau data siswa, guru, kelas, mata pelajaran, jurusan, absensi guru dan nilai akademik.</p>
            </div>
            <div class="hidden lg:block">
                <div class="w-24 h-24 lg:w-32 lg:h-32 bg-white bg-opacity-20 rounded-full flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-graduation-cap text-4xl lg:text-6xl text-white"></i>
                </div>
            </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex flex-wrap gap-2 mt-3 sm:mt-4 md:mt-6">
            <a href="{{ route('simaju.rapor.index') }}" class="inline-flex items-center gap-1.5 sm:gap-2 bg-white bg-opacity-10 hover:bg-opacity-20 backdrop-blur-sm text-white px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all border border-white border-opacity-30">
                <i class="fas fa-file-alt text-sm sm:text-base"></i>
                <span>Cetak Rapor</span>
            </a>
            <a href="{{ route('simaju.nilai.index') }}" class="inline-flex items-center gap-1.5 sm:gap-2 bg-green-500 hover:bg-green-600 text-white px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all shadow-lg">
                <i class="fas fa-download text-sm sm:text-base"></i>
                <span>Export Nilai CSV</span>
            </a>
        </div>
    </div>
</div>

<!-- Guru Information Card (for Wali Kelas) -->
@if(auth()->user()->role === 'wali_kelas' && $currentGuru)
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
    <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
        <i class="fas fa-user-tie text-indigo-600"></i>
        <span>Informasi Guru</span>
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-xs text-gray-500 mb-1">NIP</p>
            <p class="font-semibold text-gray-800">{{ $currentGuru->nip ?? '-' }}</p>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-xs text-gray-500 mb-1">Mapel</p>
            <p class="font-semibold text-gray-800">
                @if($currentGuru->mataPelajarans && $currentGuru->mataPelajarans->count() > 0)
                    {{ $currentGuru->mataPelajarans->pluck('nama_mapel')->join(', ') }}
                @else
                    <span class="text-gray-400">-</span>
                @endif
            </p>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-xs text-gray-500 mb-1">Status Hari Ini</p>
            <p class="font-semibold">
                @if($absensiHariIni)
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $absensiHariIni->status_masuk_badge_class }}">
                        @if($absensiHariIni->status_masuk === 'hadir')
                            <i class="fas fa-check-circle mr-1"></i>
                        @elseif($absensiHariIni->status_masuk === 'terlambat')
                            <i class="fas fa-clock mr-1"></i>
                        @elseif($absensiHariIni->status_masuk === 'izin')
                            <i class="fas fa-info-circle mr-1"></i>
                        @elseif($absensiHariIni->status_masuk === 'sakit')
                            <i class="fas fa-hospital mr-1"></i>
                        @else
                            <i class="fas fa-times-circle mr-1"></i>
                        @endif
                        {{ $absensiHariIni->status_masuk_label }}
                    </span>
                @else
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                        <i class="fas fa-question-circle mr-1"></i>
                        Belum Absen
                    </span>
                @endif
            </p>
        </div>
    </div>
</div>

<!-- Riwayat Absensi 7 Hari Terakhir -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
    <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
        <i class="fas fa-history text-indigo-600"></i>
        <span>Riwayat 7 Hari Terakhir</span>
    </h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jam Masuk</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jam Pulang</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Keterangan</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($riwayatAbsensi as $absensi)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                        {{ $absensi->tanggal->format('d M Y') }}
                        <span class="text-xs text-gray-500 block">{{ $absensi->tanggal->format('l') }}</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                        {{ $absensi->jam_masuk ?? '-' }}
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                        {{ $absensi->jam_pulang ?? '-' }}
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $absensi->status_masuk_badge_class }}">
                            {{ $absensi->status_masuk_label }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500">
                        {{ $absensi->keterangan ?? '-' }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl text-gray-300 mb-2"></i>
                        <p>Belum ada riwayat absensi</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endif

<!-- Main Stats -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6 md:mb-8">
    <!-- Total Siswa Card -->
    <div class="group bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10">
            <div class="flex items-center justify-between mb-4">
                <div class="w-14 h-14 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-graduate text-2xl text-white"></i>
                </div>
                <span class="text-white text-xs bg-white bg-opacity-20 px-3 py-1 rounded-full font-medium">+8%</span>
            </div>
            <p class="text-white text-opacity-90 text-sm font-medium mb-1">Total Siswa</p>
            <p class="text-4xl font-bold text-white mb-2">{{ number_format($stats['total_siswa']) }}</p>
            <p class="text-xs text-white text-opacity-75 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i>
                <span>dari semester lalu</span>
            </p>
        </div>
    </div>

    <!-- Total Guru Card -->
    <div class="group bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10">
            <div class="flex items-center justify-between mb-4">
                <div class="w-14 h-14 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-chalkboard-teacher text-2xl text-white"></i>
                </div>
                <span class="text-white text-xs bg-white bg-opacity-20 px-3 py-1 rounded-full font-medium">Aktif</span>
            </div>
            <p class="text-white text-opacity-90 text-sm font-medium mb-1">Total Guru</p>
            <p class="text-4xl font-bold text-white mb-2">{{ number_format($stats['total_guru']) }}</p>
            <p class="text-xs text-white text-opacity-75">Tenaga pengajar profesional</p>
        </div>
    </div>

    <!-- Total Kelas Card -->
    <div class="group bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10">
            <div class="flex items-center justify-between mb-4">
                <div class="w-14 h-14 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-door-open text-2xl text-white"></i>
                </div>
                <span class="text-white text-xs bg-white bg-opacity-20 px-3 py-1 rounded-full font-medium">Rombel</span>
            </div>
            <p class="text-white text-opacity-90 text-sm font-medium mb-1">Total Kelas</p>
            <p class="text-4xl font-bold text-white mb-2">{{ number_format($stats['total_kelas']) }}</p>
            <p class="text-xs text-white text-opacity-75">Rombongan belajar aktif</p>
        </div>
    </div>

    <!-- Total Mapel Card -->
    <div class="group bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10">
            <div class="flex items-center justify-between mb-4">
                <div class="w-14 h-14 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-book-open text-2xl text-white"></i>
                </div>
                <span class="text-white text-xs bg-white bg-opacity-20 px-3 py-1 rounded-full font-medium">Aktif</span>
            </div>
            <p class="text-white text-opacity-90 text-sm font-medium mb-1">Mata Pelajaran</p>
            <p class="text-4xl font-bold text-white mb-2">{{ number_format($stats['total_mapel']) }}</p>
            <p class="text-xs text-white text-opacity-75">Semester ini</p>
        </div>
    </div>
</div>

<!-- Asset Management Statistics -->
<div class="mb-6">
    <h2 class="text-2xl font-heading font-bold text-gray-800 mb-4">📦 Manajemen Aset</h2>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 shadow-sm border border-blue-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-blue-700">Total Aset</p><p class="text-3xl font-heading font-bold text-blue-800 mt-1">{{ $asetStats['total_aset'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-blue-200 rounded-xl flex items-center justify-center"><i class="fas fa-box text-2xl text-blue-700"></i></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 shadow-sm border border-green-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-green-700">Aset Aktif</p><p class="text-3xl font-heading font-bold text-green-800 mt-1">{{ $asetStats['aset_aktif'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-green-200 rounded-xl flex items-center justify-center"><i class="fas fa-check-circle text-2xl text-green-700"></i></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-xl p-6 shadow-sm border border-teal-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-teal-700">Kondisi Baik</p><p class="text-3xl font-heading font-bold text-teal-800 mt-1">{{ $asetStats['aset_baik'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-teal-200 rounded-xl flex items-center justify-center"><i class="fas fa-thumbs-up text-2xl text-teal-700"></i></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 shadow-sm border border-orange-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-orange-700">Perlu Perbaikan</p><p class="text-3xl font-heading font-bold text-orange-800 mt-1">{{ $asetStats['aset_rusak'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-orange-200 rounded-xl flex items-center justify-center"><i class="fas fa-wrench text-2xl text-orange-700"></i></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 shadow-sm border border-purple-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-purple-700">Total Nilai</p><p class="text-lg font-heading font-bold text-purple-800 mt-1">Rp {{ number_format($asetStats['total_nilai'] ?? 0, 0, ',', '.') }}</p></div>
            <div class="w-14 h-14 bg-purple-200 rounded-xl flex items-center justify-center"><i class="fas fa-money-bill-wave text-2xl text-purple-700"></i></div>
        </div>
    </div>
</div>

<!-- Library Statistics -->
<div class="mb-6">
    <h2 class="text-2xl font-heading font-bold text-gray-800 mb-4">📚 Perpustakaan</h2>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 mb-8">
    <div class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl p-6 shadow-sm border border-amber-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-amber-700">Total Buku</p><p class="text-3xl font-heading font-bold text-amber-800 mt-1">{{ $perpustakaan['total_buku'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-amber-200 rounded-xl flex items-center justify-center"><svg class="w-7 h-7 text-amber-700" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h16V4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v2H4v2h16v-2h-4v-2h4c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 12V6h16v12H4z"/></svg></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 shadow-sm border border-green-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-green-700">Buku Tersedia</p><p class="text-3xl font-heading font-bold text-green-800 mt-1">{{ $perpustakaan['buku_tersedia'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-green-200 rounded-xl flex items-center justify-center"><svg class="w-7 h-7 text-green-700" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2V17zm4 0h-2V7h2V17zm4 0h-2v-11h2V17z"/></svg></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 shadow-sm border border-blue-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-blue-700">Kategori</p><p class="text-3xl font-heading font-bold text-blue-800 mt-1">{{ $perpustakaan['total_kategori'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-blue-200 rounded-xl flex items-center justify-center"><svg class="w-7 h-7 text-blue-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 shadow-sm border border-purple-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-purple-700">Anggota Aktif</p><p class="text-3xl font-heading font-bold text-purple-800 mt-1">{{ $perpustakaan['total_anggota'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-purple-200 rounded-xl flex items-center justify-center"><svg class="w-7 h-7 text-purple-700" fill="currentColor" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.89 1.97 1.74 1.97 2.95V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 shadow-sm border border-orange-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-orange-700">Peminjaman Aktif</p><p class="text-3xl font-heading font-bold text-orange-800 mt-1">{{ $perpustakaan['peminjaman_aktif'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-orange-200 rounded-xl flex items-center justify-center"><svg class="w-7 h-7 text-orange-700" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg></div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-xl p-6 shadow-sm border border-red-200 card-hover transition-all">
        <div class="flex items-center justify-between">
            <div><p class="text-sm font-medium text-red-700">Buku Terlambat</p><p class="text-3xl font-heading font-bold text-red-800 mt-1">{{ $perpustakaan['buku_terlambat'] ?? 0 }}</p></div>
            <div class="w-14 h-14 bg-red-200 rounded-xl flex items-center justify-center"><svg class="w-7 h-7 text-red-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" transform="rotate(180 12 12)"/></svg></div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
        <h3 class="font-heading font-semibold text-gray-800 mb-4">Buku Terbaru</h3>
        <div class="space-y-3">
            @forelse($bukuTerbaru as $buku)
                <a href="{{ route('perpustakaan.buku.edit', $buku) }}" class="flex items-center gap-3 p-3 bg-gray-50 hover:bg-amber-50 rounded-lg transition-colors">
                    <div class="w-10 h-10 bg-gradient-to-br from-amber-400 to-orange-500 rounded-lg flex items-center justify-center text-white font-semibold text-sm">📖</div>
                    <div class="flex-1">
                        <p class="font-medium text-gray-800 text-sm">{{ Str::limit($buku->judul_buku, 30) }}</p>
                        <p class="text-xs text-gray-500">{{ $buku->kategori->nama_kategori ?? '-' }}</p>
                    </div>
                    <span class="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded">{{ $buku->jumlah_tersedia }} tersedia</span>
                </a>
            @empty
                <p class="text-gray-500 text-sm text-center py-4">Belum ada buku</p>
            @endforelse
        </div>
    </div>
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
        <h3 class="font-heading font-semibold text-gray-800 mb-4">Peminjaman Aktif Terbaru</h3>
        <div class="space-y-3">
            @forelse($peminjamanTerbaru as $pinjam)
                <a href="{{ route('perpustakaan.peminjaman.edit', $pinjam) }}" class="flex items-center gap-3 p-3 bg-gray-50 hover:bg-orange-50 rounded-lg transition-colors">
                    <div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-lg flex items-center justify-center text-white font-semibold text-sm">👤</div>
                    <div class="flex-1">
                        <p class="font-medium text-gray-800 text-sm">{{ $pinjam->anggota->nama_anggota }}</p>
                        <p class="text-xs text-gray-500">{{ Str::limit($pinjam->buku->judul_buku, 25) }}</p>
                    </div>
                    @if(now()->isAfter($pinjam->tanggal_pengembalian_target))
                        <span class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded">Terlambat</span>
                    @else
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">{{ $pinjam->tanggal_pengembalian_target->diffInDays() }} hari</span>
                    @endif
                </a>
            @empty
                <p class="text-gray-500 text-sm text-center py-4">Belum ada peminjaman</p>
            @endforelse
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="mb-6">
    <h2 class="text-2xl font-heading font-bold text-gray-800 mb-4">📊 Analitik & Statistik</h2>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Distribusi Per Tingkat -->
    <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-heading font-bold text-gray-800 text-lg">Distribusi Per Tingkat</h3>
                <p class="text-xs text-gray-500 mt-1">Data siswa berdasarkan tingkat kelas</p>
            </div>
            <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center">
                <i class="fas fa-chart-pie text-blue-600"></i>
            </div>
        </div>
        <div class="h-72"><canvas id="tingkatChart"></canvas></div>
    </div>

    <!-- Distribusi Per Jurusan -->
    <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-heading font-bold text-gray-800 text-lg">Distribusi Per Jurusan</h3>
                <p class="text-xs text-gray-500 mt-1">Jumlah siswa per program keahlian</p>
            </div>
            <div class="w-10 h-10 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg flex items-center justify-center">
                <i class="fas fa-chart-bar text-purple-600"></i>
            </div>
        </div>
        <div class="h-72"><canvas id="jurusanChart"></canvas></div>
    </div>

    <!-- Trend Absensi Chart -->
    <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-heading font-bold text-gray-800 text-lg">Trend Kehadiran Siswa</h3>
                <p class="text-xs text-gray-500 mt-1">Data absensi 7 hari terakhir</p>
            </div>
            <div class="w-10 h-10 bg-gradient-to-br from-green-100 to-green-200 rounded-lg flex items-center justify-center">
                <i class="fas fa-chart-line text-green-600"></i>
            </div>
        </div>
        <div class="h-72"><canvas id="absensiTrendChart"></canvas></div>
    </div>

    <!-- Rekap Absensi Pie Chart -->
    <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-heading font-bold text-gray-800 text-lg">Rekap Absensi Hari Ini</h3>
                <p class="text-xs text-gray-500 mt-1">Persentase kehadiran siswa</p>
            </div>
            <div class="w-10 h-10 bg-gradient-to-br from-orange-100 to-orange-200 rounded-lg flex items-center justify-center">
                <i class="fas fa-chart-donut text-orange-600"></i>
            </div>
        </div>
        <div class="h-72"><canvas id="absensiPieChart"></canvas></div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
        <h3 class="font-heading font-semibold text-gray-800 mb-4">Rekap Absensi Hari Ini</h3>
        <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg"><span class="font-medium text-green-700">Hadir</span><span class="text-xl font-bold text-green-600">{{ $statsToday['hadir'] ?? 0 }}</span></div>
            <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"><span class="font-medium text-yellow-700">Sakit</span><span class="text-xl font-bold text-yellow-600">{{ $statsToday['sakit'] ?? 0 }}</span></div>
            <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"><span class="font-medium text-blue-700">Izin</span><span class="text-xl font-bold text-blue-600">{{ $statsToday['izin'] ?? 0 }}</span></div>
            <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg"><span class="font-medium text-red-700">Alpha</span><span class="text-xl font-bold text-red-600">{{ $statsToday['alfa'] ?? 0 }}</span></div>
        </div>
    </div>
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
        <h3 class="font-heading font-semibold text-gray-800 mb-4">Kelas Terbaru</h3>
        <div class="space-y-3">@forelse($kelasTerbaru as $kelas)<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div><p class="font-medium text-gray-800">{{ $kelas->nama_kelas }}</p><p class="text-xs text-gray-500">{{ $kelas->jurusan?->nama_jurusan }}</p></div></div>@empty<p class="text-gray-500 text-sm text-center py-4">Belum ada data</p>@endforelse</div>
    </div>
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
        <h3 class="font-heading font-semibold text-gray-800 mb-4">Siswa Terbaru</h3>
        <div class="space-y-3">@forelse($siswaTerbaru as $siswa)<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center text-white font-semibold text-sm">{{ substr($siswa->nama, 0, 2) }}</div><div class="flex-1"><p class="font-medium text-gray-800 text-sm">{{ $siswa->nama }}</p><p class="text-xs text-gray-500">{{ $siswa->kelas?->nama_kelas ?? '-' }}</p></div></div>@empty<p class="text-gray-500 text-sm text-center py-4">Belum ada data</p>@endforelse</div>
    </div>
</div>

<!-- Quick Actions Section
<div class="bg-white rounded-2xl p-8 shadow-xl border border-gray-100 mb-6">
    <div class="flex items-center gap-3 mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg">
            <i class="fas fa-bolt text-2xl"></i>
        </div>
        <div>
            <h3 class="text-2xl font-bold text-gray-900">Aksi Cepat</h3>
            <p class="text-sm text-gray-500">Shortcut untuk operasi umum</p>
        </div>
    </div>
    
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <a href="{{ route('simaju.siswa.create') }}" class="group flex flex-col items-center gap-3 p-5 bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
            <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-md group-hover:shadow-xl transition-all">
                <i class="fas fa-user-plus text-2xl"></i>
            </div>
            <span class="text-sm font-bold text-blue-800">Tambah Siswa</span>
        </a>
        <a href="{{ route('simaju.guru.create') }}" class="group flex flex-col items-center gap-3 p-5 bg-gradient-to-br from-purple-50 to-purple-100 hover:from-purple-100 hover:to-purple-200 rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
            <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center text-white shadow-md group-hover:shadow-xl transition-all">
                <i class="fas fa-chalkboard-teacher text-2xl"></i>
            </div>
            <span class="text-sm font-bold text-purple-800">Tambah Guru</span>
        </a>
        <a href="{{ route('simaju.kelas.create') }}" class="group flex flex-col items-center gap-3 p-5 bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
            <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center text-white shadow-md group-hover:shadow-xl transition-all">
                <i class="fas fa-school text-2xl"></i>
            </div>
            <span class="text-sm font-bold text-green-800">Tambah Kelas</span>
        </a>
        <a href="{{ route('simaju.nilai.create') }}" class="group flex flex-col items-center gap-3 p-5 bg-gradient-to-br from-amber-50 to-amber-100 hover:from-amber-100 hover:to-amber-200 rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
            <div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl flex items-center justify-center text-white shadow-md group-hover:shadow-xl transition-all">
                <i class="fas fa-file-alt text-2xl"></i>
            </div>
            <span class="text-sm font-bold text-amber-800">Input Nilai</span>
        </a>
        <a href="{{ route('simaju.absensi.create') }}" class="group flex flex-col items-center gap-3 p-5 bg-gradient-to-br from-red-50 to-red-100 hover:from-red-100 hover:to-red-200 rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
            <div class="w-14 h-14 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white shadow-md group-hover:shadow-xl transition-all">
                <i class="fas fa-calendar-check text-2xl"></i>
            </div>
            <span class="text-sm font-bold text-red-800">Catat Absensi</span>
        </a>
        <a href="{{ route('simaju.rapor.index') }}" class="group flex flex-col items-center gap-3 p-5 bg-gradient-to-br from-indigo-50 to-indigo-100 hover:from-indigo-100 hover:to-indigo-200 rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
            <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center text-white shadow-md group-hover:shadow-xl transition-all">
                <i class="fas fa-graduation-cap text-2xl"></i>
            </div>
            <span class="text-sm font-bold text-indigo-800">Lihat Rapor</span>
        </a>
    </div>
</div> -->

<!-- Asset & Library Quick Access -->
<!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Asset Management -->
    <!-- <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 shadow-lg border border-blue-100">
        <div class="flex items-center gap-3 mb-5">
            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-md">
                <i class="fas fa-boxes text-xl"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-900">Manajemen Aset</h3>
        </div>
        <div class="grid grid-cols-3 gap-3">
            <a href="{{ route('simaju.aset.index') }}" class="group flex flex-col items-center gap-2 p-4 bg-white hover:bg-blue-50 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                <i class="fas fa-list text-2xl text-blue-600 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-semibold text-gray-700">Daftar Aset</span>
            </a>
            <a href="{{ route('simaju.aset.create') }}" class="group flex flex-col items-center gap-2 p-4 bg-white hover:bg-green-50 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                <i class="fas fa-plus-circle text-2xl text-green-600 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-semibold text-gray-700">Tambah Aset</span>
            </a>
            <a href="{{ route('simaju.aset-peminjaman.index') }}" class="group flex flex-col items-center gap-2 p-4 bg-white hover:bg-purple-50 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                <i class="fas fa-hand-holding text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-semibold text-gray-700">Peminjaman</span>
            </a>
        </div>
    </div> --> -->

    <!-- Library Management
    <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl p-6 shadow-lg border border-amber-100">
        <div class="flex items-center gap-3 mb-5">
            <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg flex items-center justify-center text-white shadow-md">
                <i class="fas fa-book text-xl"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-900">Perpustakaan</h3>
        </div>
        <div class="grid grid-cols-3 gap-3">
            <a href="{{ route('perpustakaan.buku.index') }}" class="group flex flex-col items-center gap-2 p-4 bg-white hover:bg-amber-50 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                <i class="fas fa-book text-2xl text-amber-600 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-semibold text-gray-700">Daftar Buku</span>
            </a>
            <a href="{{ route('perpustakaan.anggota.index') }}" class="group flex flex-col items-center gap-2 p-4 bg-white hover:bg-blue-50 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                <i class="fas fa-users text-2xl text-blue-600 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-semibold text-gray-700">Anggota</span>
            </a>
            <a href="{{ route('perpustakaan.peminjaman.index') }}" class="group flex flex-col items-center gap-2 p-4 bg-white hover:bg-orange-50 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                <i class="fas fa-book-reader text-2xl text-orange-600 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-semibold text-gray-700">Peminjaman</span>
            </a>
        </div>
    </div>
</div> -->
@endsection

@push('scripts')
<script>
// Chart.js Configuration
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.color = '#6B7280';

// Distribusi Per Tingkat - Doughnut Chart
new Chart(document.getElementById('tingkatChart').getContext('2d'), {
    type: 'doughnut',
    data: {
        labels: ['Kelas X', 'Kelas XI', 'Kelas XII'],
        datasets: [{
            data: [{{ $siswaPerTingkat['X'] }}, {{ $siswaPerTingkat['XI'] }}, {{ $siswaPerTingkat['XII'] }}],
            backgroundColor: [
                'rgba(59, 130, 246, 0.9)',
                'rgba(139, 92, 246, 0.9)',
                'rgba(16, 185, 129, 0.9)'
            ],
            borderWidth: 3,
            borderColor: '#ffffff',
            hoverOffset: 15
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 12, weight: '600' },
                    usePointStyle: true,
                    pointStyle: 'circle'
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                titleFont: { size: 13, weight: 'bold' },
                bodyFont: { size: 12 },
                callbacks: {
                    label: function(context) {
                        let label = context.label || '';
                        let value = context.parsed || 0;
                        let total = context.dataset.data.reduce((a, b) => a + b, 0);
                        let percentage = ((value / total) * 100).toFixed(1);
                        return label + ': ' + value + ' siswa (' + percentage + '%)';
                    }
                }
            }
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});

// Distribusi Per Jurusan - Bar Chart
const jrLabels = {!! json_encode(array_column($distribusiPerJurusan, 'jurusan')) !!};
const jrData = {!! json_encode(array_column($distribusiPerJurusan, 'count')) !!};
new Chart(document.getElementById('jurusanChart').getContext('2d'), {
    type: 'bar',
    data: {
        labels: jrLabels,
        datasets: [{
            label: 'Jumlah Siswa',
            data: jrData,
            backgroundColor: [
                'rgba(59, 130, 246, 0.8)',
                'rgba(139, 92, 246, 0.8)',
                'rgba(16, 185, 129, 0.8)',
                'rgba(245, 158, 11, 0.8)',
                'rgba(239, 68, 68, 0.8)',
                'rgba(6, 182, 212, 0.8)'
            ],
            borderRadius: 8,
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                titleFont: { size: 13, weight: 'bold' },
                bodyFont: { size: 12 }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0, 0, 0, 0.05)',
                    drawBorder: false
                },
                ticks: {
                    font: { size: 11 },
                    padding: 8
                }
            },
            x: {
                grid: { display: false },
                ticks: {
                    font: { size: 11 },
                    padding: 8
                }
            }
        }
    }
});

// Trend Absensi - Line Chart
new Chart(document.getElementById('absensiTrendChart').getContext('2d'), {
    type: 'line',
    data: {
        labels: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'],
        datasets: [
            {
                label: 'Hadir',
                data: [{{ $stats['total_siswa'] * 0.95 }}, {{ $stats['total_siswa'] * 0.92 }}, {{ $stats['total_siswa'] * 0.94 }}, {{ $stats['total_siswa'] * 0.96 }}, {{ $stats['total_siswa'] * 0.93 }}, {{ $stats['total_siswa'] * 0.85 }}, 0],
                borderColor: 'rgb(16, 185, 129)',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                tension: 0.4,
                fill: true,
                borderWidth: 3,
                pointRadius: 5,
                pointHoverRadius: 7,
                pointBackgroundColor: 'rgb(16, 185, 129)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            },
            {
                label: 'Tidak Hadir',
                data: [{{ $stats['total_siswa'] * 0.05 }}, {{ $stats['total_siswa'] * 0.08 }}, {{ $stats['total_siswa'] * 0.06 }}, {{ $stats['total_siswa'] * 0.04 }}, {{ $stats['total_siswa'] * 0.07 }}, {{ $stats['total_siswa'] * 0.15 }}, 0],
                borderColor: 'rgb(239, 68, 68)',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                tension: 0.4,
                fill: true,
                borderWidth: 3,
                pointRadius: 5,
                pointHoverRadius: 7,
                pointBackgroundColor: 'rgb(239, 68, 68)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 12, weight: '600' },
                    usePointStyle: true,
                    pointStyle: 'circle'
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                titleFont: { size: 13, weight: 'bold' },
                bodyFont: { size: 12 },
                mode: 'index',
                intersect: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0, 0, 0, 0.05)',
                    drawBorder: false
                },
                ticks: {
                    font: { size: 11 },
                    padding: 8
                }
            },
            x: {
                grid: { display: false },
                ticks: {
                    font: { size: 11 },
                    padding: 8
                }
            }
        },
        interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false
        }
    }
});

// Rekap Absensi Hari Ini - Pie Chart
new Chart(document.getElementById('absensiPieChart').getContext('2d'), {
    type: 'pie',
    data: {
        labels: ['Hadir', 'Sakit', 'Izin', 'Alpha'],
        datasets: [{
            data: [
                {{ $statsToday['hadir'] ?? 0 }},
                {{ $statsToday['sakit'] ?? 0 }},
                {{ $statsToday['izin'] ?? 0 }},
                {{ $statsToday['alfa'] ?? 0 }}
            ],
            backgroundColor: [
                'rgba(16, 185, 129, 0.9)',
                'rgba(245, 158, 11, 0.9)',
                'rgba(59, 130, 246, 0.9)',
                'rgba(239, 68, 68, 0.9)'
            ],
            borderWidth: 3,
            borderColor: '#ffffff',
            hoverOffset: 15
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 12, weight: '600' },
                    usePointStyle: true,
                    pointStyle: 'circle'
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                titleFont: { size: 13, weight: 'bold' },
                bodyFont: { size: 12 },
                callbacks: {
                    label: function(context) {
                        let label = context.label || '';
                        let value = context.parsed || 0;
                        let total = context.dataset.data.reduce((a, b) => a + b, 0);
                        let percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                        return label + ': ' + value + ' siswa (' + percentage + '%)';
                    }
                }
            }
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});
</script>
@endpush