<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard Admin') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-gradient-to-br from-green-500 to-green-400 text-white rounded-xl shadow-lg p-6 flex items-center gap-4">
                    <i class="fas fa-users fa-2x"></i>
                    <div>
                        <div class="text-2xl font-bold">{{ $jumlahSantri ?? '...' }}</div>
                        <div class="text-sm">Santri</div>
                    </div>
                </div>
                <div class="bg-gradient-to-br from-yellow-400 to-yellow-300 text-gray-900 rounded-xl shadow-lg p-6 flex items-center gap-4">
                    <i class="fas fa-chalkboard-teacher fa-2x"></i>
                    <div>
                        <div class="text-2xl font-bold">{{ $jumlahGuru ?? '...' }}</div>
                        <div class="text-sm">Guru</div>
                    </div>
                </div>
                <div class="bg-gradient-to-br from-green-400 to-green-300 text-white rounded-xl shadow-lg p-6 flex items-center gap-4">
                    <i class="fas fa-school fa-2x"></i>
                    <div>
                        <div class="text-2xl font-bold">{{ $jumlahKelas ?? '...' }}</div>
                        <div class="text-sm">Kelas</div>
                    </div>
                </div>
                <div class="bg-gradient-to-br from-yellow-300 to-yellow-200 text-gray-900 rounded-xl shadow-lg p-6 flex items-center gap-4">
                    <i class="fas fa-user-shield fa-2x"></i>
                    <div>
                        <div class="text-2xl font-bold">{{ $jumlahUser ?? '...' }}</div>
                        <div class="text-sm">User</div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4 border-l-4 border-green-500">
                    <i class="fas fa-calendar-check fa-2x text-green-500"></i>
                    <div>
                        <div class="text-xl font-bold">{{ $absensiHariIni ?? '...' }}</div>
                        <div class="text-sm text-gray-600">Absensi Hari Ini</div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4 border-l-4 border-yellow-400">
                    <i class="fas fa-trophy fa-2x text-yellow-400"></i>
                    <div>
                        <div class="text-xl font-bold">{{ $jumlahPrestasi ?? '...' }}</div>
                        <div class="text-sm text-gray-600">Prestasi</div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4 border-l-4 border-red-400">
                    <i class="fas fa-exclamation-triangle fa-2x text-red-400"></i>
                    <div>
                        <div class="text-xl font-bold">{{ $pelanggaranBulanIni ?? '...' }}</div>
                        <div class="text-sm text-gray-600">Pelanggaran Bulan Ini</div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4 border-l-4 border-green-400">
                    <i class="fas fa-money-bill-wave fa-2x text-green-400"></i>
                    <div>
                        <div class="text-xl font-bold">{{ $pembayaranBulanIni ?? '...' }}</div>
                        <div class="text-sm text-gray-600">Pembayaran Bulan Ini</div>
                    </div>
                </div>
            </div>
            <!-- <div class="bg-white rounded-xl shadow p-6 mt-8">
                <h3 class="text-lg font-bold mb-4 text-gray-800">Ringkasan Data Terbaru</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-semibold mb-2">Absensi Terbaru</h4>
                        <ul class="divide-y divide-gray-200">
                            @foreach($absensiTerbaru ?? [] as $absen)
                                <li class="py-2 flex justify-between items-center">
                                    <span>{{ $absen->santri->nama ?? '-' }} ({{ $absen->tanggal }})</span>
                                    <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $absen->status == 'hadir' ? 'bg-green-100 text-green-800' : ($absen->status == 'izin' ? 'bg-yellow-100 text-yellow-800' : ($absen->status == 'sakit' ? 'bg-orange-100 text-orange-800' : 'bg-red-100 text-red-800')) }}">
                                        {{ ucfirst($absen->status) }}
                                    </span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold mb-2">Pelanggaran Terbaru</h4>
                        <ul class="divide-y divide-gray-200">
                            @foreach($pelanggaranTerbaru ?? [] as $pel)
                                <li class="py-2 flex justify-between items-center">
                                    <span>{{ $pel->santri->nama ?? '-' }} ({{ $pel->tanggal_pelanggaran ?? '-' }})</span>
                                    <span class="px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">{{ $pel->jenis_pelanggaran ?? '-' }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</x-app-layout> 