<!DOCTYPE html>
<html lang="id" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presensi Kelas - SIA SD</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        darkbg: '#12141c',
                        darksurface: '#1e2329',
                        darksidebar: '#161a20',
                        accent: '#14b8a6',
                    }
                }
            }
        }
    </script>
    <style>
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #161a20; }
        ::-webkit-scrollbar-thumb { background: #374151; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
        
        /* Menyembunyikan radio button default */
        input[type="radio"] { display: none; }
        /* Style untuk label saat radio button dipilih */
        input[type="radio"]:checked + label.hadir { background-color: #059669; color: white; border-color: #059669; }
        input[type="radio"]:checked + label.sakit { background-color: #2563eb; color: white; border-color: #2563eb; }
        input[type="radio"]:checked + label.izin { background-color: #d97706; color: white; border-color: #d97706; }
        input[type="radio"]:checked + label.alpa { background-color: #dc2626; color: white; border-color: #dc2626; }
    </style>
</head>
<body class="bg-darkbg text-gray-300 font-sans antialiased flex h-screen overflow-hidden">

    <aside class="w-64 bg-darksidebar border-r border-gray-800 flex flex-col justify-between hidden md:flex">
        <div>
            <div class="h-20 flex items-center px-6 border-b border-gray-800">
                <div class="w-8 h-8 bg-teal-500 rounded-lg flex items-center justify-center text-white font-bold mr-3 shadow-lg">SD</div>
                <div>
                    <h1 class="text-white font-bold text-sm tracking-wide">SIA SD Cerdas</h1>
                    <p class="text-xs text-gray-500">Panel Guru</p>
                </div>
            </div>

            <div class="px-4 py-6 overflow-y-auto">
                <div class="mb-6">
                    <p class="px-4 text-xs font-semibold text-gray-500 tracking-wider mb-2 uppercase">Utama</p>
                    <a href="/guru/dashboard" class="flex items-center px-4 py-2.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded-xl transition-colors mb-1">
                        <i class="fas fa-border-all w-6"></i> Dashboard
                    </a>
                </div>

                <div class="mb-6">
                    <p class="px-4 text-xs font-semibold text-gray-500 tracking-wider mb-2 uppercase">Akademik</p>
                    <a href="/guru/presensi" class="flex items-center px-4 py-2.5 bg-teal-600/20 text-teal-400 rounded-xl font-medium mb-1">
                        <i class="fas fa-calendar-check w-6"></i> Presensi Kelas
                    </a>
                    <a href="#" class="flex items-center px-4 py-2.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded-xl transition-colors mb-1">
                        <i class="fas fa-book-open w-6"></i> Jurnal Mengajar
                    </a>
                    <a href="#" class="flex items-center px-4 py-2.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded-xl transition-colors">
                        <i class="fas fa-clipboard-list w-6"></i> Input Nilai
                    </a>
                </div>
            </div>
        </div>
    </aside>

    <main class="flex-1 flex flex-col h-screen overflow-y-auto">
        
        <header class="h-20 flex items-center justify-between px-8 border-b border-gray-800 shrink-0">
            <div>
                <h2 class="text-xl font-bold text-white tracking-wide">Presensi Kelas</h2>
                <p class="text-sm text-gray-400 mt-1">Kelola kehadiran siswa harian</p>
            </div>
            <div class="flex items-center bg-gray-800 px-4 py-2 rounded-lg border border-gray-700">
                <i class="far fa-calendar-alt text-teal-400 mr-2"></i>
                <span class="text-sm font-medium">{{ $tanggal_sekarang }}</span>
            </div>
        </header>

        <div class="p-8">
            
            @if(session('success'))
            <div class="bg-teal-500/20 border border-teal-500 text-teal-400 px-4 py-3 rounded-xl mb-6 flex items-center">
                <i class="fas fa-check-circle mr-3 text-lg"></i>
                <span>{{ session('success') }}</span>
            </div>
            @endif

            <div class="bg-darksurface rounded-2xl shadow-sm border border-gray-800 flex flex-col h-full">
                
                <div class="px-6 py-5 border-b border-gray-800 flex justify-between items-center">
                    <div>
                        <h3 class="font-bold text-white text-lg">Daftar Siswa {{ $kelas_binaan }}</h3>
                        <p class="text-xs text-gray-400 mt-1">Silakan pilih status kehadiran siswa untuk hari ini.</p>
                    </div>
                </div>

                <form action="/guru/presensi/simpan" method="POST" class="p-0">
                    @csrf
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="bg-gray-800/30">
                                    <th class="py-4 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider w-12 text-center">No</th>
                                    <th class="py-4 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider">NIS</th>
                                    <th class="py-4 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider">Nama Lengkap</th>
                                    <th class="py-4 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider text-center">L/P</th>
                                    <th class="py-4 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider text-center">Status Kehadiran</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-800/50">
                                @foreach($daftar_siswa as $index => $s)
                                <tr class="hover:bg-gray-800/20 transition-colors">
                                    <td class="py-4 px-6 text-sm text-gray-500 text-center">{{ $index + 1 }}</td>
                                    <td class="py-4 px-6 text-sm text-gray-400">{{ $s->nis }}</td>
                                    <td class="py-4 px-6 text-sm text-gray-200 font-medium">{{ $s->nama }}</td>
                                    <td class="py-4 px-6 text-sm text-gray-400 text-center">{{ $s->jk }}</td>
                                    <td class="py-4 px-6 flex justify-center space-x-2">
                                        <div>
                                            <input type="radio" id="h_{{ $s->id }}" name="kehadiran[{{ $s->id }}]" value="H" checked>
                                            <label for="h_{{ $s->id }}" class="hadir cursor-pointer border border-gray-600 text-gray-400 text-xs font-bold px-3 py-1.5 rounded hover:border-emerald-500 transition-all">
                                                Hadir
                                            </label>
                                        </div>
                                        <div>
                                            <input type="radio" id="s_{{ $s->id }}" name="kehadiran[{{ $s->id }}]" value="S">
                                            <label for="s_{{ $s->id }}" class="sakit cursor-pointer border border-gray-600 text-gray-400 text-xs font-bold px-3 py-1.5 rounded hover:border-blue-500 transition-all">
                                                Sakit
                                            </label>
                                        </div>
                                        <div>
                                            <input type="radio" id="i_{{ $s->id }}" name="kehadiran[{{ $s->id }}]" value="I">
                                            <label for="i_{{ $s->id }}" class="izin cursor-pointer border border-gray-600 text-gray-400 text-xs font-bold px-3 py-1.5 rounded hover:border-amber-500 transition-all">
                                                Izin
                                            </label>
                                        </div>
                                        <div>
                                            <input type="radio" id="a_{{ $s->id }}" name="kehadiran[{{ $s->id }}]" value="A">
                                            <label for="a_{{ $s->id }}" class="alpa cursor-pointer border border-gray-600 text-gray-400 text-xs font-bold px-3 py-1.5 rounded hover:border-red-500 transition-all">
                                                Alpa
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="px-6 py-4 border-t border-gray-800 flex justify-end bg-gray-800/10 rounded-b-2xl">
                        <button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-6 rounded-lg shadow-lg transition duration-200 flex items-center">
                            <i class="fas fa-save mr-2"></i> Simpan Presensi
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </main>
</body>
</html>