Web Editor Absensi

MTs Sabilal Muhtadin - Konfigurasi Link Database Terpusat

Identitas Sekolah

Nama Sekolah

Akan mengganti semua teks "MTs Sabilal Muhtadin" pada aplikasi.

Nama Kepala Sekolah

Akan ditampilkan pada bagian footer portal utama.

URL Logo Sekolah

Masukkan link gambar (JPG/PNG). Sangat disarankan rasio 1:1 (persegi).

Database Google Workspace

1. Data Master Siswa (QR) - Link CSV Google Sheet

Struktur Kolom Wajib: Kolom A (Kelas), Kolom D (NISN), Kolom E (Nama), Kolom F (No. WhatsApp).

2. Data Face ID & RFID - Link CSV Google Sheet

Struktur Kolom Wajib: Kolom A (Kelas), Kolom D (NISN), Kolom E (Nama), Kolom F (WA), Kolom H (Kode Kartu RFID).

3. Form Absensi Siswa - URL Google Form

Parameter Entry ID (FormResponse):
• entry.1533035364 (NISN)
• entry.886597330 (Nama Siswa)
• entry.266156303 (Nomor WhatsApp)
• entry.458458231 (Keterangan: Hadir/Terlambat)
• entry.310457828 (Kelas)

4. Data Registrasi Face ID (Cloud) - Link CSV Google Sheet

Struktur Kolom Bebas: Namun Pastikan memiliki header yang mengandung kata Nama, NISN, dan Face/Wajah/Descriptor.

5. Form Registrasi Face ID - URL Google Form

Parameter Entry ID (FormResponse):
• entry.1683915083 (Nama Siswa)
• entry.324925088 (NISN)
• entry.1416553854 (Data JSON Wajah)

6. Data Jadwal Guru - Link CSV Google Sheet

Struktur Kolom Wajib: Kolom C (Kelas), Kolom D (Jam Ke), Kolom E (Mata Pelajaran), Kolom F (Nama Guru), Kolom H (Nomor HP).

7. Daftar Guru Tidak Mengajar - Link CSV Google Sheet

Struktur Kolom Wajib: Kolom B (Nama), Kolom C (Mata Pelajaran), Kolom D (Kelas), Kolom E (Jam Ke).

8. Form Absensi Guru - URL Google Form

Parameter Entry ID (FormResponse):
• entry.1047756655 (Kelas)
• entry.1749392002 (Jam Ke)
• entry.1783380314 (Status Kehadiran)
• entry.451588271 (No HP/WA)
• entry.568177107 (Nama Guru)
• entry.1150403436 (Mata Pelajaran)

Panel Eksekusi

Kode Sumber Terintegrasi

File absen_html.html telah ditanamkan ke dalam editor ini. Anda tidak perlu lagi menyalin dan menempel kode.

Isi tautan/link baru di sebelah kiri.

Kosongkan kolom jika tidak ada perubahan pada link tersebut.

Klik tombol di bawah untuk memproses dan mengunduh file baru.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Portal Absensi MTs Sabilal Muhtadin</title>
    
    <meta name="theme-color" content="#047857">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Absensi MTs">
    <link id="manifest-link" rel="manifest" href="">
    <link rel="apple-touch-icon" href="https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png">

@keyframes slideInRight { from { transform: translateX(100%) translateY(-50%); opacity: 0; } to { transform: translateX(0) translateY(0); opacity: 1; } }
        @keyframes fadeOutUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-20px); opacity: 0; } }
        @keyframes popIn { 0% { transform: scale(0.95); opacity: 0.5; } 40% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.toast-enter { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .toast-exit { animation: fadeOutUp 0.3s ease-in forwards; }
        .card-enter { animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.status-radio:checked + div { transform: scale(0.97); border-color: transparent; }
        .status-radio[value="Hadir"]:checked + div { background-color: #10b981; color: white; box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.39); }
        .status-radio[value="Tugas"]:checked + div { background-color: #f59e0b; color: white; box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39); }
        .status-radio[value="Tidak Hadir"]:checked + div { background-color: #f43f5e; color: white; box-shadow: 0 4px 14px 0 rgba(244, 63, 94, 0.39); }
        .smooth-transition { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

.card-menu { transition: all 0.3s ease; }
        .card-menu:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 10px 25px -5px rgba(4, 120, 87, 0.4); 
        }

::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.android-btn-active:active { transform: scale(0.95); opacity: 0.9; }

.camera-container {
            position: relative; 
            width: 100%; 
            max-width: 600px;
            margin: 0 auto; 
            border-radius: 1.5rem; 
            overflow: hidden; 
            background: #000;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
        }
        .camera-container video { width: 100%; height: auto; display: block; }
        .camera-container canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        
        @keyframes scan { 
            0% { top: 0; opacity: 0; } 
            10% { opacity: 1; } 
            90% { opacity: 1; } 
            100% { top: 100%; opacity: 0; } 
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.85); 
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.7); 
            box-shadow: 0 15px 30px -10px rgba(79, 70, 229, 0.08);
        }
        .gradient-main { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
        .btn-hadir-active { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white !important; box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.3); }
        .btn-terlambat-active { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white !important; box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.3); }
        
        #reader { width: 100% !important; border: none !important; border-radius: 1.5rem; overflow: hidden; }
        .scan-box-wrapper { position: relative; border: 4px solid #10b981; border-radius: 1.5rem; overflow: hidden; }
        .scan-line {
            width: 100%; height: 4px; background: linear-gradient(to right, transparent, #10b981, transparent);
            position: absolute; top: 0; left: 0; z-index: 10; animation: moveScan 2.5s infinite ease-in-out; box-shadow: 0 0 15px #10b981;
        }
        @keyframes moveScan { 0%, 100% { top: 5%; } 50% { top: 95%; } }
        
        .floating { animation: floating 4s ease-in-out infinite; }
        @keyframes floating { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
    </style>
</head>
<body class="bg-portal">

<div id="app-portal" class="app-view min-h-screen flex flex-col items-center justify-center py-10 px-4 relative">
        <div id="installBanner" class="fixed top-0 left-0 w-full bg-madrasah-700 text-white p-3 flex justify-between items-center shadow-lg z-50 hidden transition-all duration-300 transform -translate-y-full">
            <div class="flex items-center gap-3 text-sm md:text-base">
                <i class="fa-solid fa-download bg-white text-madrasah-700 p-2 rounded-full"></i>
                <span>Install Aplikasi Absensi di HP Anda untuk akses lebih cepat!</span>
            </div>
            <button id="installBtn" class="bg-white text-madrasah-700 font-bold py-1.5 px-4 rounded-full shadow hover:bg-gray-100 transition text-sm">
                Install
            </button>
        </div>

<header class="text-center mb-10 w-full max-w-3xl animate-fade-in-down">
            <div class="relative inline-block">
                <div class="absolute inset-0 bg-madrasah-500 rounded-full blur-lg opacity-50"></div>
                <img src="https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png" 
                     alt="Logo MTs Sabilal Muhtadin" 
                     class="relative w-32 h-32 mx-auto mb-4 rounded-full shadow-xl border-4 border-white object-cover bg-white">
            </div>
            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 tracking-tight">MTs Sabilal Muhtadin</h1>
            <p class="text-gray-600 mt-2 text-lg">Portal Layanan Absensi Digital</p>
            <div class="h-1 w-24 bg-madrasah-500 mx-auto mt-4 rounded-full"></div>
        </header>

<main class="w-full max-w-5xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10 px-4">
            <a href="#" onclick="openApp('app-scanqr'); return false;" class="card-menu bg-white rounded-2xl p-6 flex items-center gap-5 shadow-md border border-gray-100 group">
                <div class="w-16 h-16 shrink-0 rounded-xl bg-madrasah-100 text-madrasah-700 flex items-center justify-center text-3xl group-hover:bg-madrasah-700 group-hover:text-white transition-colors duration-300 shadow-sm"><i class="fa-solid fa-qrcode"></i></div>
                <div><h2 class="text-lg font-bold text-gray-800 leading-tight">Absensi QR</h2><p class="text-gray-500 text-xs mt-1 line-clamp-2">Scan QR Code absensi siswa.</p></div>
            </a>

<a href="#" onclick="openApp('app-faceid'); return false;" class="card-menu bg-white rounded-2xl p-6 flex items-center gap-5 shadow-md border border-gray-100 group">
                <div class="w-16 h-16 shrink-0 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center text-3xl group-hover:bg-blue-600 group-hover:text-white transition-colors duration-300 shadow-sm"><i class="fa-solid fa-face-viewfinder"></i></div>
                <div><h2 class="text-lg font-bold text-gray-800 leading-tight">Face ID</h2><p class="text-gray-500 text-xs mt-1 line-clamp-2">Pengenalan wajah siswa.</p></div>
            </a>

<a href="#" onclick="openApp('app-rfid'); return false;" class="card-menu bg-white rounded-2xl p-6 flex items-center gap-5 shadow-md border border-gray-100 group">
                <div class="w-16 h-16 shrink-0 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center text-3xl group-hover:bg-purple-600 group-hover:text-white transition-colors duration-300 shadow-sm"><i class="fa-solid fa-id-card"></i></div>
                <div><h2 class="text-lg font-bold text-gray-800 leading-tight">Absensi RFID</h2><p class="text-gray-500 text-xs mt-1 line-clamp-2">Tap kartu pelajar (RFID).</p></div>
            </a>
            
            <a href="#" onclick="openApp('app-guru'); return false;" class="card-menu bg-white rounded-2xl p-6 flex items-center gap-5 shadow-md border border-gray-100 group">
                <div class="w-16 h-16 shrink-0 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center text-3xl group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300 shadow-sm"><i class="fa-solid fa-chalkboard-user"></i></div>
                <div><h2 class="text-lg font-bold text-gray-800 leading-tight">Absensi Guru</h2><p class="text-gray-500 text-xs mt-1 line-clamp-2">Pantau kehadiran guru.</p></div>
            </a>
        </main>

<footer class="mt-16 text-center text-gray-500 text-sm">
            <p>© <span id="year"></span> MTs Sabilal Muhtadin.</p>
            <p class="mt-1">Kepala Madrasah: <strong>Khairullah, SH</strong></p>
        </footer>
    </div>

<div id="app-scanqr" class="app-view hidden w-full min-h-screen relative pb-12">
        <div class="bg-white/80 border-b border-slate-200/80 backdrop-blur sticky top-0 left-0 right-0 z-50 px-4 py-3 shadow-sm">
            <div class="max-w-7xl mx-auto flex items-center justify-between">
                <button onclick="closeApp()" class="bg-indigo-50 px-4 py-2 rounded-full text-indigo-600 font-bold hover:bg-indigo-100 transition flex items-center gap-2 text-sm">
                    <i class="fa-solid fa-arrow-left"></i> Kembali ke Portal
                </button>
                <div class="flex items-center gap-3">
                    <img src="https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png" alt="Logo MTs" class="w-8 h-8 rounded-full object-cover">
                    <span class="text-slate-800 font-extrabold text-sm tracking-tight hidden sm:inline">MTs Sabilal Muhtadin</span>
                </div>
            </div>
        </div>
        
        <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
            <header class="text-center mb-10 max-w-2xl mx-auto">
                <div class="floating inline-flex items-center justify-center w-20 h-20 gradient-main rounded-[2rem] shadow-xl shadow-emerald-200 mb-4 group transition-all">
                    <svg class="h-10 w-10 text-white group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" /></svg>
                </div>
                <h1 class="text-3xl font-black text-slate-950 tracking-tight mb-2">Absensi QR Code Siswa</h1>
                <p class="text-sm font-semibold text-emerald-600 uppercase tracking-widest">Sistem Absensi Cepat Berbasis Kode QR</p>
            </header>
            
            <main class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                <div class="lg:col-span-7 space-y-6">
                    <div class="glass-card rounded-[2.5rem] p-6 sm:p-8 shadow-xl relative overflow-hidden">
                        <div class="absolute -top-12 -left-12 w-40 h-40 bg-emerald-400/10 rounded-full blur-3xl"></div>
                        <div class="absolute -bottom-12 -right-12 w-40 h-40 bg-indigo-400/10 rounded-full blur-3xl"></div>
                        
                        <div class="mb-8 flex bg-slate-200/60 p-1.5 rounded-2xl gap-2 border border-slate-300/50">
                            <button id="qr-mode-hadir" class="flex-1 py-3.5 rounded-xl font-bold text-sm transition-all btn-hadir-active">HADIR</button>
                            <button id="qr-mode-terlambat" class="flex-1 py-3.5 rounded-xl font-bold text-sm transition-all text-slate-500 hover:text-slate-700">TERLAMBAT</button>
                        </div>
                        
                        <div id="qr-reader-container" class="hidden mb-6 group">
                            <div class="scan-box-wrapper shadow-2xl shadow-emerald-100 max-w-md mx-auto">
                                <div class="scan-line"></div>
                                <div id="reader"></div>
                            </div>
                        </div>
                        
                        <div class="space-y-4 max-w-md mx-auto">
                            <button id="qr-start-scan" class="w-full gradient-main text-white font-extrabold py-5 rounded-2xl shadow-xl shadow-emerald-200 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-4 text-base"><i class="fa-solid fa-qrcode text-xl"></i> AKTIFKAN SCANNER</button>
                            <button id="qr-stop-scan" class="hidden w-full bg-rose-100 text-rose-600 font-extrabold py-4 rounded-xl hover:bg-rose-200 transition-all uppercase tracking-wider text-xs">Nonaktifkan Kamera</button>
                        </div>
                    </div>
                </div>
                
                <div class="lg:col-span-5">
                    <div class="glass-card rounded-[2.5rem] p-6 sm:p-8 shadow-xl border border-slate-200/50 flex flex-col max-h-[640px]">
                        <div class="flex justify-between items-center mb-6">
                            <div>
                                <h2 class="font-black text-xl text-slate-900 flex items-center gap-2"><i class="fa-solid fa-clipboard-list text-emerald-600"></i> Log Siswa</h2>
                                <div class="flex items-center gap-2 mt-2 flex-wrap">
                                    <span class="text-[10px] text-emerald-600 font-bold tracking-widest uppercase bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100">Live Absen</span>
                                    <button id="qr-btn-clear" class="hidden px-2.5 py-0.5 bg-rose-500 hover:bg-rose-600 text-white font-extrabold text-[9px] rounded-full uppercase tracking-wider transition-all">🗑️ Bersihkan</button>
                                </div>
                            </div>
                            <div class="bg-emerald-600 w-12 h-12 rounded-xl flex flex-col items-center justify-center shadow-lg shadow-emerald-200">
                                <span id="qr-count" class="text-lg font-black text-white leading-none">0</span>
                                <span class="text-[8px] font-black text-emerald-100 uppercase">Total</span>
                            </div>
                        </div>
                        <div id="qr-list" class="space-y-4 overflow-y-auto flex-1 pr-2 max-h-[420px] lg:max-h-[480px]"></div>
                    </div>
                </div>
            </main>
        </div>
        
        
        <div id="qr-success-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[60] hidden flex items-center justify-center p-8">
            <div class="bg-white rounded-[3rem] p-10 w-full max-w-sm text-center shadow-[0_30px_100px_-15px_rgba(0,0,0,0.4)] transform scale-90 opacity-0 transition-all duration-500" id="qr-modal-content">
                <div id="qr-modal-icon-bg" class="w-20 h-20 mx-auto rounded-[1.5rem] flex items-center justify-center mb-6 shadow-xl">
                    <svg class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" d="M5 13l4 4L19 7" /></svg>
                </div>
                <h3 id="qr-modal-status" class="text-[10px] font-black uppercase tracking-[0.2em] mb-2 text-slate-400">Status Berhasil</h3>
                <h2 id="qr-modal-name" class="text-2xl font-black text-slate-900 leading-tight mb-3">Nama Siswa</h2>
                <p id="qr-modal-info" class="text-slate-500 font-bold text-sm mb-4 bg-slate-50 py-3 rounded-xl border border-slate-100">Kelas • 07:00</p>
            </div>
        </div>
        
        <div id="qr-confirm-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[60] hidden flex items-center justify-center p-8">
            <div class="bg-white rounded-[3rem] p-10 w-full max-w-sm text-center transform scale-90 opacity-0 transition-all duration-500" id="qr-confirm-content">
                <div class="w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-6 shadow-xl bg-rose-100 text-rose-600 text-2xl">🗑️</div>
                <h3 class="text-xs font-black uppercase tracking-[0.2em] mb-2 text-rose-600">Hapus Log</h3>
                <h2 class="text-xl font-black text-slate-900 leading-tight mb-3">Hapus Semua Data?</h2>
                <div class="flex gap-3 mt-6">
                    <button id="qr-btn-cancel-clear" class="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-600 font-extrabold rounded-xl transition-all text-xs uppercase">Batal</button>
                    <button id="qr-btn-ok-clear" class="flex-1 py-3 bg-rose-600 hover:bg-rose-700 text-white font-extrabold rounded-xl transition-all text-xs uppercase shadow-lg">Ya, Hapus</button>
                </div>
            </div>
        </div>
        
        <div id="qr-custom-alert" class="fixed top-5 left-1/2 transform -translate-x-1/2 z-[100] transition-all duration-300 opacity-0 scale-90 pointer-events-none max-w-sm w-full px-4">
            <div class="bg-amber-500 text-white rounded-2xl p-4 shadow-2xl flex items-center gap-4 border border-amber-400/50">
                <div class="bg-white/20 p-2 rounded-xl text-xl">⚠️</div>
                <div class="flex-1">
                    <h4 class="font-black text-sm uppercase tracking-wider">Perhatian</h4>
                    <p id="qr-alert-text" class="text-xs font-semibold text-white/95 mt-0.5"></p>
                </div>
            </div>
        </div>
    </div>

<div id="app-faceid" class="app-view hidden w-full min-h-screen relative text-slate-800 pb-10">
        <div id="faceid-loadingOverlay" class="fixed inset-0 bg-slate-900 z-[60] flex flex-col items-center justify-center text-white transition-opacity duration-300 hidden">
            <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500 mb-4"></div>
            <h2 class="text-xl font-semibold">Memuat Sistem...</h2>
            <p id="faceid-loadingText" class="text-slate-400 mt-2 text-sm text-center px-4">Mengunduh model AI dan data wajah dari Cloud.</p>
        </div>

<nav class="bg-white shadow-sm p-4 sticky top-0 z-40">
            <div class="max-w-7xl mx-auto flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <img src="https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png" alt="Logo" class="w-10 h-10 object-contain rounded-full shadow-sm">
                    <div class="flex flex-col">
                        <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-blue-600 leading-none">SmartAbsen</h1>
                        <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mt-1">MTs Sabilal Muhtadin</span>
                    </div>
                </div>
                <button onclick="closeApp()" class="text-sm font-bold text-red-600 hover:text-red-700 transition flex items-center gap-2 bg-red-50 px-3 py-1.5 rounded-full">
                    <i class="fa-solid fa-arrow-left"></i> Keluar
                </button>
            </div>
        </nav>

<main class="max-w-7xl mx-auto p-4 py-8">
            <div id="faceid-view-dashboard" class="faceid-section">
                <div class="flex justify-end mb-4">
                    <button onclick="openFaceIdCloudSettings()" class="bg-slate-100 text-slate-600 hover:bg-slate-200 px-4 py-2 rounded-lg font-medium text-sm flex items-center gap-2 transition">
                        <i class="fa-solid fa-cloud-arrow-up"></i> Konfigurasi Cloud
                    </button>
                </div>

<div class="text-center mb-10">
                    <img src="https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png" alt="Logo MTs Sabilal Muhtadin" class="w-20 h-20 mx-auto mb-4 object-contain drop-shadow-md">
                    <h2 class="text-3xl font-bold text-slate-900 mb-2">Sistem Absensi Wajah</h2>
                    <h3 class="text-lg font-semibold text-emerald-600 mb-4">MTs Sabilal Muhtadin</h3>
                    <p class="text-slate-600 max-w-lg mx-auto">Gunakan kamera perangkat Anda untuk mendeteksi dan mencatat kehadiran siswa secara instan tanpa kontak fisik.</p>
                </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div onclick="handleFaceIdRegisterClick()" class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition cursor-pointer group">
                        <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 group-hover:text-white transition relative">
                            <i class="fa-solid fa-user-plus text-2xl"></i>
                            <div class="absolute -top-2 -right-2 bg-rose-500 text-white text-[10px] px-1.5 py-0.5 rounded-full font-bold shadow-sm"><i class="fa-solid fa-lock text-[8px]"></i></div>
                        </div>
                        <h3 class="text-lg font-bold mb-2">Registrasi Wajah</h3>
                        <p class="text-slate-500 text-sm">Daftarkan & ambil sampel wajah siswa baru ke sistem lokal & Cloud.</p>
                    </div>

<div onclick="showFaceIdView('scan')" class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition cursor-pointer group">
                        <div class="w-14 h-14 bg-emerald-100 text-emerald-600 rounded-xl flex items-center justify-center mb-4 group-hover:bg-emerald-600 group-hover:text-white transition">
                            <i class="fa-solid fa-face-viewfinder text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-bold mb-2">Mulai Absensi</h3>
                        <p class="text-slate-500 text-sm">Buka kamera untuk scan wajah dan catat kehadiran otomatis.</p>
                    </div>

<div onclick="showFaceIdView('logs')" class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition cursor-pointer group">
                        <div class="w-14 h-14 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 group-hover:text-white transition">
                            <i class="fa-solid fa-clipboard-list text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-bold mb-2">Data Kehadiran</h3>
                        <p class="text-slate-500 text-sm">Lihat daftar siswa yang telah melakukan absensi hari ini.</p>
                    </div>
                </div>

<div class="mt-8 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-4">
                    <div class="flex items-center gap-4">
                        <div class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl shadow-lg"><i class="fa-solid fa-cloud-arrow-down"></i></div>
                        <div>
                            <h3 class="font-bold text-slate-800">Sinkronisasi Database Wajah</h3>
                            <p class="text-xs text-slate-500 mt-1">Tarik data wajah terbaru dari server (Google Sheets) ke perangkat ini.</p>
                        </div>
                    </div>
                    <button onclick="faceIdSyncFromCloud()" class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-bold transition shadow-md whitespace-nowrap">
                        Tarik Data Sekarang
                    </button>
                </div>

<div class="mt-8 bg-white rounded-2xl p-6 shadow-sm border border-slate-100 flex justify-around text-center">
                    <div>
                        <p class="text-slate-500 text-sm font-medium mb-1">Total Terdaftar</p>
                        <p id="faceid-stat-registered" class="text-3xl font-bold text-slate-800">0</p>
                    </div>
                    <div class="w-px bg-slate-200"></div>
                    <div>
                        <p class="text-slate-500 text-sm font-medium mb-1">Hadir Hari Ini</p>
                        <p id="faceid-stat-attended" class="text-3xl font-bold text-blue-600">0</p>
                    </div>
                </div>
            </div>

<div id="faceid-view-register" class="faceid-section hidden">
                <div class="flex items-center mb-6 gap-3">
                    <button onclick="showFaceIdView('dashboard')" class="p-2 bg-white rounded-full shadow-sm hover:bg-slate-50 text-slate-600"><i class="fa-solid fa-arrow-left"></i></button>
                    <h2 class="text-2xl font-bold text-slate-800">Registrasi Wajah</h2>
                </div>
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Pilih Data Siswa</label>
                        <select id="faceid-studentName" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
                            <option value="">Memuat data dari server...</option>
                        </select>
                    </div>
                    <div class="camera-container mb-6 bg-slate-900 flex justify-center items-center h-64 md:h-96">
                        <video id="faceid-registerVideo" autoplay muted playsinline></video>
                        <canvas id="faceid-registerCanvas"></canvas>
                        <div id="faceid-registerOverlay" class="absolute inset-0 flex items-center justify-center pointer-events-none hidden">
                            <div class="border-2 border-dashed border-white/50 w-48 h-48 rounded-full flex items-center justify-center">
                                <span class="text-white/50 text-xs text-center px-4">Posisikan wajah<br>di tengah</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-4">
                        <button id="faceid-btnStartReg" onclick="faceIdStartCamera('register')" class="flex-1 bg-slate-800 text-white py-3 rounded-lg font-medium hover:bg-slate-900 transition flex justify-center items-center gap-2">
                            <i class="fa-solid fa-camera"></i> Buka Kamera
                        </button>
                        <button id="faceid-btnCapture" onclick="faceIdCaptureAndRegister()" disabled class="flex-1 bg-blue-600 disabled:bg-blue-300 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition flex justify-center items-center gap-2">
                            Simpan & Kirim ke Cloud
                        </button>
                    </div>
                    <p class="text-xs text-slate-500 mt-4 text-center">Tips: Miringkan kepala perlahan selama 1-2 detik saat tombol Simpan ditekan agar AI merekam variasi wajah.</p>
                </div>
            </div>

<div id="faceid-view-scan" class="faceid-section hidden">
                <div class="flex justify-between items-center mb-6">
                    <div class="flex items-center gap-3">
                        <button onclick="showFaceIdView('dashboard')" class="p-2 bg-white rounded-full shadow-sm hover:bg-slate-50 text-slate-600"><i class="fa-solid fa-arrow-left"></i></button>
                        <h2 class="text-2xl font-bold text-slate-800">Scan Kehadiran Wajah</h2>
                    </div>
                    <span class="flex h-3 w-3 relative">
                      <span id="faceid-scanIndicatorPing" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75 hidden"></span>
                      <span id="faceid-scanIndicator" class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                    </span>
                </div>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                    <div class="lg:col-span-7 space-y-4">
                        <div class="bg-white p-5 rounded-2xl border border-slate-200/60 shadow-md">
                            <div class="camera-container bg-slate-900 flex justify-center items-center h-[50vh] md:h-[420px]">
                                <video id="faceid-scanVideo" autoplay muted playsinline></video>
                                <canvas id="faceid-scanCanvas"></canvas>
                                <div id="faceid-scanLine" class="hidden absolute top-0 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_15px_3px_rgba(16,185,129,0.7)] animate-[scan_2s_ease-in-out_infinite]"></div>
                            </div>
                            <div class="mt-4 flex gap-4">
                                <button id="faceid-btnStartScan" onclick="faceIdStartCamera('scan')" class="w-full bg-emerald-600 text-white py-3.5 rounded-xl font-bold hover:bg-emerald-700 transition shadow-lg shadow-emerald-100 flex items-center justify-center gap-2">
                                    <i class="fa-solid fa-play"></i> MULAI SCAN
                                </button>
                                <button id="faceid-btnStopScan" onclick="faceIdStopCamera()" class="hidden w-full bg-red-600 text-white py-3.5 rounded-xl font-bold hover:bg-red-700 transition flex items-center justify-center gap-2">
                                    <i class="fa-solid fa-stop"></i> BERHENTI
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="lg:col-span-5">
                        <div class="bg-white rounded-2xl shadow-md border border-slate-200/60 p-5 flex flex-col max-h-[500px]">
                            <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-100">
                                <h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider flex items-center gap-2"><i class="fa-solid fa-history text-emerald-500"></i> Kehadiran Baru Saja</h3>
                            </div>
                            <div class="overflow-x-auto flex-1 max-h-[380px] overflow-y-auto">
                                <table class="w-full text-left border-collapse text-sm">
                                    <thead>
                                        <tr class="bg-slate-50 text-slate-500 uppercase text-[10px] tracking-wider border-b border-slate-200">
                                            <th class="p-3 font-semibold">Waktu</th>
                                            <th class="p-3 font-semibold">Nama Siswa</th>
                                            <th class="p-3 font-semibold">Kelas</th>
                                        </tr>
                                    </thead>
                                    <tbody id="faceid-miniLogContainer" class="divide-y divide-slate-100 text-xs"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div id="faceid-view-logs" class="faceid-section hidden">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center gap-3">
                        <button onclick="showFaceIdView('dashboard')" class="p-2 bg-white rounded-full shadow-sm hover:bg-slate-50 text-slate-600"><i class="fa-solid fa-arrow-left"></i></button>
                        <h2 class="text-2xl font-bold text-slate-800">Daftar Kehadiran</h2>
                    </div>
                    <button onclick="faceIdClearLogs()" class="text-red-500 text-sm font-medium hover:text-red-700 transition bg-red-50 px-3 py-1.5 rounded-lg">Reset Hari Ini</button>
                </div>
                <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-slate-50 text-slate-500 text-sm uppercase tracking-wider border-b border-slate-200">
                                <th class="p-4 font-medium">No</th>
                                <th class="p-4 font-medium">Kelas</th>
                                <th class="p-4 font-medium">Nama Siswa</th>
                                <th class="p-4 font-medium">Waktu</th>
                            </tr>
                        </thead>
                        <tbody id="faceid-logsTableBody" class="divide-y divide-slate-100"></tbody>
                    </table>
                </div>
            </div>
        </main>

<div id="faceid-pin-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[70] hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-3xl p-8 w-full max-w-sm text-center shadow-2xl transform scale-90 opacity-0 transition-all duration-300" id="faceid-pin-content">
                <div class="w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"><i class="fa-solid fa-shield-halved text-2xl"></i></div>
                <h3 class="text-2xl font-bold text-slate-800 mb-2">Otorisasi Diperlukan</h3>
                <p class="text-slate-500 text-sm mb-6">Masukkan PIN untuk mengakses menu Registrasi Siswa.</p>
                <input type="password" inputmode="numeric" id="faceid-pin-input" onkeydown="if(event.key==='Enter') verifyFaceIdPin()" class="w-full text-center text-3xl tracking-[0.5em] p-4 border-2 border-slate-200 rounded-2xl focus:border-blue-500 focus:ring-0 outline-none mb-2 font-mono transition-colors" maxlength="4" placeholder="••••">
                <p id="faceid-pin-error" class="text-rose-500 text-sm mb-6 h-5 opacity-0 transition-opacity font-medium">PIN salah!</p>
                <div class="flex gap-4">
                    <button onclick="closeFaceIdPin()" class="flex-1 bg-slate-100 text-slate-700 py-3.5 rounded-xl font-bold hover:bg-slate-200 transition">Batal</button>
                    <button onclick="verifyFaceIdPin()" class="flex-1 bg-blue-600 text-white py-3.5 rounded-xl font-bold hover:bg-blue-700 transition shadow-lg shadow-blue-200">Buka Menu</button>
                </div>
            </div>
        </div>

<div id="faceid-cloud-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[70] hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-3xl p-8 w-full max-w-lg shadow-2xl transform scale-90 opacity-0 transition-all duration-300" id="faceid-cloud-content">
                <h3 class="text-xl font-bold text-slate-800 mb-1"><i class="fa-solid fa-cloud text-blue-500"></i> Konfigurasi Cloud Database</h3>
                <p class="text-slate-500 text-xs mb-6 border-b pb-4">Simpan dan panggil data wajah via Google Sheets & Forms.</p>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Link CSV Data Wajah (Dari Publikasi Sheet)</label>
                        <input type="text" id="faceid-cloud-csv" class="w-full p-3 border border-slate-200 rounded-xl text-xs bg-slate-50" placeholder="https://docs.google.com/spreadsheets/d/.../pub?output=csv">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">URL Action Form (Untuk Pengiriman)</label>
                        <input type="text" id="faceid-cloud-form" class="w-full p-3 border border-slate-200 rounded-xl text-xs bg-slate-50" placeholder="https://docs.google.com/forms/d/e/.../formResponse">
                    </div>
                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Entry ID (Nama)</label>
                            <input type="text" id="faceid-cloud-entry-name" class="w-full p-3 border border-slate-200 rounded-xl text-xs bg-slate-50" placeholder="entry.111111">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Entry ID (NISN)</label>
                            <input type="text" id="faceid-cloud-entry-nisn" class="w-full p-3 border border-slate-200 rounded-xl text-xs bg-slate-50" placeholder="entry.222222">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1">Entry ID (JSON Wajah)</label>
                            <input type="text" id="faceid-cloud-entry-data" class="w-full p-3 border border-slate-200 rounded-xl text-xs bg-slate-50" placeholder="entry.333333">
                        </div>
                    </div>
                </div>
                <div class="flex gap-4 mt-8">
                    <button onclick="closeFaceIdCloudSettings()" class="flex-1 bg-slate-100 text-slate-700 py-3 rounded-xl font-bold hover:bg-slate-200 transition">Tutup</button>
                    <button onclick="saveFaceIdCloudSettings()" class="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700 transition">Simpan Konfigurasi</button>
                </div>
            </div>
        </div>

<div id="global-alert-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[100] hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-3xl p-6 w-full max-w-sm text-center shadow-2xl transform scale-90 opacity-0 transition-all duration-300" id="global-alert-content">
                <div class="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4"><i class="fa-solid fa-circle-check text-2xl"></i></div>
                <h3 class="text-xl font-bold text-slate-800 mb-2" id="global-alert-title">Informasi</h3>
                <p class="text-slate-500 text-sm mb-6 whitespace-pre-line" id="global-alert-message">Pesan notifikasi aplikasi.</p>
                <button onclick="closeGlobalAlert()" class="w-full bg-emerald-600 text-white py-3.5 rounded-xl font-bold hover:bg-emerald-700 transition shadow-lg">Selesai</button>
            </div>
        </div>

<div id="global-confirm-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[100] hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-3xl p-6 w-full max-w-sm text-center shadow-2xl transform scale-90 opacity-0 transition-all duration-300" id="global-confirm-content">
                <div class="w-16 h-16 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto mb-4"><i class="fa-solid fa-triangle-exclamation text-2xl"></i></div>
                <h3 class="text-xl font-bold text-slate-800 mb-2" id="global-confirm-title">Konfirmasi</h3>
                <p class="text-slate-500 text-sm mb-6" id="global-confirm-message">Apakah Anda yakin ingin melakukan tindakan ini?</p>
                <div class="flex gap-4">
                    <button id="global-confirm-cancel-btn" class="flex-1 bg-slate-150 text-slate-700 py-3 rounded-xl font-bold hover:bg-slate-200 transition">Batal</button>
                    <button id="global-confirm-ok-btn" class="flex-1 bg-emerald-600 text-white py-3 rounded-xl font-bold hover:bg-emerald-700 transition shadow-lg">Lanjutkan</button>
                </div>
            </div>
        </div>
    </div>

<div id="app-rfid" class="app-view hidden w-full min-h-screen relative text-gray-800 pb-10">
        <div id="rfid-loading-screen" class="min-h-screen bg-green-50 flex flex-col items-center justify-center p-4">
            <i data-lucide="refresh-cw" class="w-12 h-12 text-emerald-600 animate-spin mb-4"></i>
            <h2 class="text-xl font-bold text-gray-800">Menyinkronkan Database...</h2>
        </div>
        <div id="rfid-error-screen" class="min-h-screen bg-red-50 flex flex-col items-center justify-center p-4 hidden">
            <i data-lucide="shield-alert" class="w-16 h-16 text-red-500 mb-4"></i>
            <h2 class="text-xl font-bold text-red-800 mb-2">Terjadi Kesalahan</h2>
            <button onclick="closeApp()" class="mt-2 px-6 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg font-medium transition">Kembali</button>
        </div>
        <div id="rfid-main-app" class="hidden min-h-screen">
            <header class="bg-emerald-700 shadow-md">
                <div class="max-w-6xl mx-auto px-4 py-6 flex flex-col md:flex-row items-center justify-center md:justify-start gap-4">
                    <button onclick="closeApp()" class="absolute top-4 left-4 p-2 bg-emerald-800 rounded-full text-white hover:bg-emerald-900 transition shadow"><i class="fa-solid fa-arrow-left"></i></button>
                    <img src="https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png" alt="Logo" class="w-20 h-20 bg-white rounded-full p-1 shadow-sm object-cover"/>
                    <div class="text-center md:text-left">
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white tracking-wide uppercase">Sistem Absensi RFID</h1>
                        <p class="text-emerald-100 font-medium mt-1">MTs Sabilal Muhtadin</p>
                    </div>
                    <div class="md:ml-auto text-emerald-50 text-sm flex items-center bg-emerald-800 py-2 px-4 rounded-full shadow-inner mt-4 md:mt-0">
                        <i data-lucide="user-check" class="w-4 h-4 mr-2"></i> Total Data Siswa: <span id="rfid-total-students" class="font-bold ml-1">0</span>
                    </div>
                </div>
            </header>
            <main class="max-w-6xl mx-auto px-4 py-8 grid gap-8 md:grid-cols-[1fr_2fr]">
                <section class="flex flex-col gap-6">
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
                        <div class="mb-5 flex bg-slate-100 p-1.5 rounded-xl gap-2 border border-slate-200">
                            <button id="rfid-mode-hadir" class="flex-1 py-3 rounded-lg font-bold text-sm bg-emerald-500 text-white shadow-sm transition-all">HADIR</button>
                            <button id="rfid-mode-terlambat" class="flex-1 py-3 rounded-lg font-bold text-sm text-slate-500 hover:text-slate-700 transition-all">TERLAMBAT</button>
                        </div>
                        <input id="rfid-input" type="text" class="w-full text-center text-2xl font-mono p-4 bg-gray-50 border-2 border-emerald-500 border-dashed rounded-xl focus:outline-none focus:ring-4 focus:ring-emerald-200 transition-all opacity-80" placeholder="Tap RFID disini..." autocomplete="off"/>
                    </div>
                    <div id="rfid-message-container" class="hidden p-6 rounded-2xl shadow-lg border-l-8 transform transition-all duration-300 ease-in-out flex items-start gap-4">
                        <div id="rfid-message-icon" class="flex-shrink-0"></div>
                        <div>
                            <h3 id="rfid-message-title" class="text-xl font-bold"></h3>
                            <p id="rfid-message-subtext" class="mt-1 font-medium"></p>
                        </div>
                    </div>
                </section>
                <section class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden flex flex-col h-[600px]">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                        <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2"><i data-lucide="clock" class="w-5 h-5 text-gray-500"></i> Riwayat Hari Ini</h2>
                        <span id="rfid-total-logs" class="text-sm bg-gray-200 text-gray-700 px-3 py-1 rounded-full font-medium">0 Scan</span>
                    </div>
                    <div class="flex-1 overflow-auto p-0">
                        <div id="rfid-empty-logs" class="flex flex-col items-center justify-center h-full text-gray-400">
                            <i data-lucide="alert-circle" class="w-12 h-12 mb-2 opacity-50"></i><p>Belum ada data scan siswa hari ini.</p>
                        </div>
                        <table id="rfid-logs-table" class="w-full text-left text-sm whitespace-nowrap hidden">
                            <thead class="bg-gray-50 sticky top-0 shadow-sm z-10 text-gray-600">
                                <tr>
                                    <th class="py-3 px-6">Waktu</th>
                                    <th class="py-3 px-6">Nama Siswa</th>
                                    <th class="py-3 px-6">Kelas</th>
                                    <th class="py-3 px-6">Status</th>
                                </tr>
                            </thead>
                            <tbody id="rfid-logs-body" class="divide-y divide-gray-100"></tbody>
                        </table>
                    </div>
                </section>
            </main>
        </div>
    </div>

<div id="app-guru" class="app-view hidden w-full min-h-screen relative pb-32 text-slate-800 antialiased">
        <header class="bg-gradient-to-r from-indigo-700 via-indigo-600 to-blue-600 text-white shadow-lg sticky top-0 z-30">
            <div class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <button onclick="closeApp()" class="p-2 bg-white/10 hover:bg-white/20 rounded-full transition mr-1">
                        <i class="fa-solid fa-arrow-left"></i>
                    </button>
                    <img src="https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png" alt="Logo MTs" class="w-10 h-10 object-cover rounded-xl bg-white p-0.5 shadow-md border border-indigo-300/50">
                    <div>
                        <h1 class="text-xl font-extrabold tracking-tight leading-tight">Absensi Guru</h1>
                        <p class="text-indigo-100 text-[10px] font-medium mt-0.5 opacity-90 uppercase tracking-wider">MTs Sabilal Muhtadin</p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button onclick="openGuruAbsenHariIni()" title="Daftar Guru Tidak Mengajar" class="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 px-3 py-1.5 rounded-full text-xs font-bold backdrop-blur-sm border border-emerald-400 transition-all active:scale-95 shadow-md text-white">
                        <i class="fa-solid fa-clipboard-list"></i>
                        <span class="hidden sm:inline">Absen Hari ini</span>
                    </button>
                    
                    <button onclick="guruFetchData(true, true)" title="Tarik data terbaru" class="flex items-center gap-2 bg-white/15 hover:bg-white/25 px-3 py-1.5 rounded-full text-xs font-semibold backdrop-blur-sm border border-white/20 transition-all active:scale-95 shadow-sm">
                        <i class="fa-solid fa-rotate-right"></i>
                        <span class="hidden sm:inline">Refresh Data</span>
                    </button>
                </div>
            </div>
        </header>

<main class="flex-grow max-w-4xl mx-auto w-full px-4 py-6">
            
            <div id="guru-loading-state" class="flex flex-col items-center justify-center py-32 text-slate-400">
                <div class="relative">
                    <div class="w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
                </div>
                <p class="text-lg font-semibold mt-6 text-slate-600">Menyinkronkan Data...</p>
            </div>
            
            
            <div id="guru-app-content" class="hidden flex-col gap-6">
                
                <div class="overflow-x-auto hide-scrollbar pb-1">
                    <div id="guru-class-tabs" class="flex gap-3 px-1 w-max">
                        
                    </div>
                </div>

<div id="guru-cards-container" class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-6">
                    
                </div>
            </div>
        </main>

<div id="guru-bottom-bar" class="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-md border-t border-slate-200 shadow-[0_-10px_20px_-10px_rgba(0,0,0,0.1)] p-4 z-40 hidden">
            <div class="max-w-4xl mx-auto flex items-center justify-between">
                <div class="text-sm font-semibold text-slate-600 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
                    <div><span id="guru-selected-count" class="text-indigo-600 font-bold text-lg">0</span> / <span id="guru-total-count" class="font-bold">0</span> Guru Dipilih</div>
                    <span id="guru-completion-badge" class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 w-fit">Belum Lengkap</span>
                </div>
                <button id="guru-submit-btn" onclick="guruSubmitData()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-bold transition shadow-lg shadow-indigo-200 flex items-center gap-2 opacity-50 cursor-not-allowed" disabled>
                    <i class="fa-solid fa-paper-plane"></i> Kirim Data
                </button>
            </div>
        </div>

<div id="guru-absen-hari-ini-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[80] hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-3xl p-6 w-full max-w-md max-h-[85vh] flex flex-col shadow-2xl transform scale-90 opacity-0 transition-all duration-300" id="guru-absen-hari-ini-content">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-black text-slate-800 flex items-center gap-2"><i class="fa-solid fa-users-slash text-rose-500"></i> Tidak Mengajar Hari Ini</h3>
                    <button onclick="closeGuruAbsenHariIni()" class="text-slate-400 hover:text-slate-600 bg-slate-100 p-2 rounded-full transition w-8 h-8 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
                </div>
                
                <div id="guru-absen-loading" class="flex flex-col items-center justify-center py-8 text-slate-400 hidden">
                    <div class="w-8 h-8 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-3"></div>
                    <p class="text-sm font-semibold">Memuat data dari server...</p>
                </div>

<div class="flex flex-col gap-3 mt-auto border-t border-slate-100 pt-4">
                    <button id="guru-wa-btn" onclick="sendGuruAbsenToWA()" class="w-full bg-[#25D366] text-white py-3.5 rounded-xl font-bold hover:bg-[#128C7E] transition shadow-lg shadow-green-200 flex items-center justify-center gap-2 text-sm">
                        <i class="fa-brands fa-whatsapp text-xl"></i> Kirim Data ke WhatsApp
                    </button>
                </div>
            </div>
        </div>
    </div>

<script>
        let activeApp = 'app-portal';
        let initStatus = { scanqr: false, faceid: false, rfid: false, guru: false };

function showGlobalAlert(title, message) {
            document.getElementById('global-alert-title').innerText = title;
            document.getElementById('global-alert-message').innerText = message;
            const modal = document.getElementById('global-alert-modal');
            const content = document.getElementById('global-alert-content');
            modal.classList.remove('hidden');
            setTimeout(() => content.classList.remove('scale-90', 'opacity-0'), 50);
        }

function closeGlobalAlert() {
            const modal = document.getElementById('global-alert-modal');
            const content = document.getElementById('global-alert-content');
            content.classList.add('scale-90', 'opacity-0');
            setTimeout(() => modal.classList.add('hidden'), 300);
        }

let globalConfirmCallback = null;
        function showGlobalConfirm(title, message, onConfirm) {
            document.getElementById('global-confirm-title').innerText = title;
            document.getElementById('global-confirm-message').innerText = message;
            globalConfirmCallback = onConfirm;

const modal = document.getElementById('global-confirm-modal');
            const content = document.getElementById('global-confirm-content');
            modal.classList.remove('hidden');
            setTimeout(() => content.classList.remove('scale-90', 'opacity-0'), 50);
        }

document.getElementById('global-confirm-cancel-btn').onclick = function() {
            const modal = document.getElementById('global-confirm-modal');
            const content = document.getElementById('global-confirm-content');
            content.classList.add('scale-90', 'opacity-0');
            setTimeout(() => modal.classList.add('hidden'), 300);
            globalConfirmCallback = null;
        };

document.getElementById('global-confirm-ok-btn').onclick = function() {
            if(globalConfirmCallback) globalConfirmCallback();
            document.getElementById('global-confirm-cancel-btn').click();
        };

function openApp(appId) {
            document.querySelectorAll('.app-view').forEach(el => el.classList.add('hidden'));
            document.body.className = `bg-${appId.replace('app-', '')}`;

document.getElementById(appId).classList.remove('hidden');
            activeApp = appId;
            window.scrollTo(0,0);

if (appId === 'app-scanqr' && !initStatus.scanqr) { initScanQR(); initStatus.scanqr = true; }
            if (appId === 'app-faceid' && !initStatus.faceid) { initFaceID(); initStatus.faceid = true; }
            if (appId === 'app-rfid' && !initStatus.rfid) { initRFID(); initStatus.rfid = true; }
            
            // MODIFIKASI: Menu Absensi Guru selalu memanggil inisiasi baru saat dibuka
            if (appId === 'app-guru') { initGuru(); }
        }

function closeApp() {
            if (typeof qrStopCamera === 'function') qrStopCamera();
            if (typeof faceIdStopCamera === 'function') faceIdStopCamera();

isFaceIdPinVerified = false;

document.querySelectorAll('.app-view').forEach(el => el.classList.add('hidden'));
            document.getElementById('app-portal').classList.remove('hidden');
            document.body.className = 'bg-portal';
            activeApp = 'app-portal';
            window.scrollTo(0,0);
        }

document.getElementById('year').textContent = new Date().getFullYear();

let deferredPrompt;
        const manifestObj = { 
            "name": "Portal Absensi Terintegrasi MTs", 
            "short_name": "Absensi MTs", 
            "start_url": window.location.href.split('#')[0], 
            "display": "standalone", 
            "background_color": "#f3f4f6", 
            "theme_color": "#047857", 
            "icons": [ 
                { "src": "https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png", "sizes": "192x192", "type": "image/png" }, 
                { "src": "https://i.ibb.co.com/zWs6JZ2g/Gemini-Generated-Image-xoibutxoibutxoib.png", "sizes": "512x512", "type": "image/png" } 
            ] 
        };
        const manifestBlob = new Blob([JSON.stringify(manifestObj)], {type: 'application/json'});
        document.getElementById('manifest-link').setAttribute('href', URL.createObjectURL(manifestBlob));

window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault(); 
            deferredPrompt = e;
            const banner = document.getElementById('installBanner');
            if(banner) { 
                banner.classList.remove('hidden'); 
                setTimeout(() => banner.classList.remove('-translate-y-full'), 100); 
            }
        });

// -------------------------
        // ABSENSI QR CODE SCRIPTS
        // -------------------------
        let qrMasterStudents = []; 
        let qrAttendance = JSON.parse(localStorage.getItem('absensi_pwa_v3_super_colorful')) || []; 
        let qrScanStatus = 'Hadir'; 
        let qrHtml5QrCode = null; 
        let qrIsProcessing = false;

async function initScanQR() { 
            qrHtml5QrCode = new Html5Qrcode("reader");
            try { 
                const res = await fetch('https://docs.google.com/spreadsheets/d/1PMOTLwHiH68gUprKBjcve11WbbYetZqZ9O5xSQmARho/export?format=csv&gid=1897365642'); 
                const csv = await res.text(); 
                qrMasterStudents = csv.split('\n').slice(1).map(row => { 
                    const c = row.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/); 
                    return { 
                        nisn: c[3]?.trim(), 
                        nama: c[4]?.trim()?.replace(/"/g, ''), 
                        kelas: c[0]?.trim()?.replace(/"/g, ''),
                        whatsapp: c[5]?.trim()?.replace(/"/g, '') || ''
                    }; 
                }); 
            } catch (e) { 
                console.error("Gagal load data QR: ", e);
            } 
            qrRenderList();

async function qrStartCamera() { 
            document.getElementById('qr-reader-container').classList.remove('hidden'); 
            document.getElementById('qr-start-scan').classList.add('hidden'); 
            document.getElementById('qr-stop-scan').classList.remove('hidden'); 
            try { 
                await qrHtml5QrCode.start({ facingMode: "environment" }, { fps: 15, qrbox: 250 }, qrOnScan); 
            } catch (err) { 
                qrIsProcessing = false; 
            } 
        }

async function qrOnScan(text) {
            if (qrIsProcessing) return; 
            qrIsProcessing = true; 
            
            const student = qrMasterStudents.find(s => s.nisn === text.trim()); 
            if (!student) { 
                qrIsProcessing = false; 
                return; 
            }
            
            const isExist = qrAttendance.find(a => a.nisn === student.nisn && a.date === new Date().toLocaleDateString());
            if (isExist) { 
                qrShowAlert(student.nama + " sudah diabsen hari ini."); 
                await qrStopCamera(); 
                setTimeout(() => { qrStartCamera(); }, 2500); 
                return; 
            }
            
            const time = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }); 
            const entry = { ...student, status: qrScanStatus, time, date: new Date().toLocaleDateString(), synced: false };
            
            qrAttendance.unshift(entry); 
            localStorage.setItem('absensi_pwa_v3_super_colorful', JSON.stringify(qrAttendance));
            qrShowSuccess(entry); 
            qrRenderList(); 
            await qrStopCamera();
            
            // PENGIRIMAN ABSENSI QR CODE KE 1 GOOGLE FORM UTAMA
            const success = await sendToUnifiedGoogleForm(entry.nisn, entry.nama, entry.whatsapp, entry.status, entry.kelas);
            if (success) { 
                entry.synced = true; 
                localStorage.setItem('absensi_pwa_v3_super_colorful', JSON.stringify(qrAttendance)); 
                qrRenderList(); 
            }
        }

// FUNGSI UTAMA PENGIRIMAN KE GOOGLE FORM (UNIFIED FORM)
        async function sendToUnifiedGoogleForm(nisn, nama, whatsapp, keterangan, kelas) {
            const formData = new URLSearchParams();
            formData.append('entry.1533035364', nisn || '');
            formData.append('entry.886597330', nama || '');
            formData.append('entry.266156303', whatsapp || '');
            formData.append('entry.458458231', keterangan || '');
            formData.append('entry.310457828', kelas || '');

try {
                await fetch('https://docs.google.com/forms/d/e/1FAIpQLSetjpp26fzgKBvhBI40vAKXxrPdgR_mE37Zxn1ToSSuVMiFyQ/formResponse', {
                    method: 'POST',
                    mode: 'no-cors',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: formData.toString()
                });
                return true;
            } catch(e) {
                console.error("Error sending to unified form:", e);
                return false;
            }
        }

function qrShowAlert(msg) { 
            const alertEl = document.getElementById('qr-custom-alert'); 
            document.getElementById('qr-alert-text').textContent = msg; 
            alertEl.classList.remove('opacity-0', 'scale-90', 'pointer-events-none'); 
            setTimeout(() => alertEl.classList.add('opacity-0', 'scale-90', 'pointer-events-none'), 3500); 
        }

// -------------------------
        // ABSENSI FACE ID SCRIPTS
        // -------------------------
        let faceIdLoaded = false;
        let faceIdStream = null;
        let faceIdScanInterval = null;
        let faceIdMatcher = null;
        let faceIdStudents = [];
        let faceIdMatchBuffer = {}; 
        let isFaceIdPinVerified = false;

async function initFaceID() {
            if(faceIdLoaded) return;
            document.getElementById('faceid-loadingOverlay').classList.remove('hidden');
            
            try {
                let config = JSON.parse(localStorage.getItem('faceid_cloud_config'));
                if(!config || !config.csvUrl) {
                    config = {
                        csvUrl: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRrUeuK1SpWIRAH_zqgo92UrArKboulks6HB-H_3s5uM0bm4tVxXaPPie94MnKlY1Z2gkFmVJUa0cOt/pub?gid=591901476&single=true&output=csv',
                        formUrl: 'https://docs.google.com/forms/d/e/1FAIpQLSdijXBHUr1sXThudGBTZRqiGeJr0PJbfDbfZV-17QQXpqVxIA/formResponse',
                        entryName: 'entry.1683915083',
                        entryNisn: 'entry.324925088',
                        entryData: 'entry.1416553854'
                    };
                    localStorage.setItem('faceid_cloud_config', JSON.stringify(config));
                }

await faceapi.tf.setBackend('webgl'); 
                await faceapi.tf.ready();
                
                const MODEL_URL = 'https://justadudewhohacks.github.io/face-api.js/models';
                await Promise.all([
                    faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
                    faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
                    faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL)
                ]);
                
                const res = await fetch('https://docs.google.com/spreadsheets/d/e/2PACX-1vTBhWd8LFN_BH22LJ8vE5qpVb0RHXsHKLsYbuKTXFLgKgq3HErsJP6zZKXwt-M7mKiIVSkTLz6_mXWm/pub?gid=1897365642&single=true&output=csv');
                const csv = await res.text();
                
                faceIdStudents = csv.split('\n').slice(1).map(line => {
                    const cols = line.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/).map(c => c.replace(/^"|"$/g, '').trim());
                    return cols.length >= 6 ? { 
                        kelas: cols[0], 
                        nisn: cols[3], 
                        nama: cols[4],
                        whatsapp: cols[5] || ''
                    } : null;
                }).filter(Boolean);

faceIdLoaded = true;
                document.getElementById('faceid-loadingOverlay').classList.add('hidden');
                
                if(config.csvUrl) {
                    await faceIdSyncFromCloud(true);
                } else {
                    faceIdInitMatcher();
                    faceIdUpdateStats();
                }
            } catch (e) {
                document.getElementById('faceid-loadingOverlay').innerHTML = `<p class="text-white">Gagal memuat AI. Periksa koneksi atau muat ulang halaman.</p>`;
            }
        }

function openFaceIdCloudSettings() {
            const config = JSON.parse(localStorage.getItem('faceid_cloud_config') || '{}');
            document.getElementById('faceid-cloud-csv').value = config.csvUrl || '';
            document.getElementById('faceid-cloud-form').value = config.formUrl || '';
            document.getElementById('faceid-cloud-entry-name').value = config.entryName || '';
            document.getElementById('faceid-cloud-entry-nisn').value = config.entryNisn || '';
            document.getElementById('faceid-cloud-entry-data').value = config.entryData || '';
            
            const modal = document.getElementById('faceid-cloud-modal');
            const content = document.getElementById('faceid-cloud-content');
            modal.classList.remove('hidden');
            setTimeout(() => content.classList.remove('scale-90', 'opacity-0'), 50);
        }

function closeFaceIdCloudSettings() {
            const modal = document.getElementById('faceid-cloud-modal');
            const content = document.getElementById('faceid-cloud-content');
            content.classList.add('scale-90', 'opacity-0');
            setTimeout(() => modal.classList.add('hidden'), 300);
        }

function saveFaceIdCloudSettings() {
            const config = {
                csvUrl: document.getElementById('faceid-cloud-csv').value.trim(),
                formUrl: document.getElementById('faceid-cloud-form').value.trim(),
                entryName: document.getElementById('faceid-cloud-entry-name').value.trim(),
                entryNisn: document.getElementById('faceid-cloud-entry-nisn').value.trim(),
                entryData: document.getElementById('faceid-cloud-entry-data').value.trim()
            };
            localStorage.setItem('faceid_cloud_config', JSON.stringify(config));
            closeFaceIdCloudSettings();
            showGlobalAlert("Sukses", "Konfigurasi Cloud berhasil disimpan. Sistem siap digunakan.");
        }

async function faceIdSyncFromCloud(isSilent = false) {
            const config = JSON.parse(localStorage.getItem('faceid_cloud_config') || '{}');
            if(!config.csvUrl) {
                if(!isSilent) showGlobalAlert("Info", "Link CSV belum dikonfigurasi. Silakan masuk ke Konfigurasi Cloud.");
                return;
            }

if(!isSilent) {
                document.getElementById('faceid-loadingText').innerText = "Menarik data koordinat wajah terbaru...";
                document.getElementById('faceid-loadingOverlay').classList.remove('hidden');
            }

try {
                let fetchUrl = config.csvUrl;
                fetchUrl += fetchUrl.includes('?') ? `&_t=${Date.now()}` : `?_t=${Date.now()}`;

const response = await fetch(fetchUrl);
                const csvData = await response.text();
                
                Papa.parse(csvData, {
                    header: false,
                    skipEmptyLines: 'greedy',
                    complete: function(results) {
                        const rows = results.data;
                        if (!rows || rows.length < 2) {
                            if(!isSilent) {
                                document.getElementById('faceid-loadingOverlay').classList.add('hidden');
                                showGlobalAlert("Informasi", "Koneksi terhubung, namun tidak ada baris data siswa yang ditemukan.");
                            }
                            return;
                        }

const header = rows[0];
                        let nameIdx = 1, nisnIdx = 2, faceIdx = 3;

if (header && header.length > 0) {
                            header.forEach((col, idx) => {
                                const val = col.toLowerCase().trim();
                                if (val.includes("nama") || val.includes("name")) nameIdx = idx;
                                else if (val.includes("nisn")) nisnIdx = idx;
                                else if (val.includes("face") || val.includes("wajah") || val.includes("descriptor") || val.includes("id")) faceIdx = idx;
                            });
                        }

let cloudDB = {};
                        let successCount = 0, failCount = 0, skipCount = 0;

rows.slice(1).forEach((row, rowIndex) => {
                            const name = row[nameIdx]?.trim();
                            const nisn = row[nisnIdx]?.trim();
                            let faceDataRaw = row[faceIdx]?.trim();
                            
                            if (!name) { skipCount++; return; }
                            if (!faceDataRaw) { failCount++; return; }

faceDataRaw = faceDataRaw.replace(/^["']|["']$/g, '').trim().replace(/""/g, '"');

if (faceDataRaw.startsWith('[') && faceDataRaw.endsWith(']')) {
                                try {
                                    let parsedDescriptors = JSON.parse(faceDataRaw);
                                    if(Array.isArray(parsedDescriptors) && parsedDescriptors.length > 0) {
                                        if (typeof parsedDescriptors[0] === 'number') parsedDescriptors = [parsedDescriptors];
                                        cloudDB[name] = { name: name, nisn: nisn || '', descriptors: parsedDescriptors };
                                        successCount++;
                                    } else { failCount++; }
                                } catch(e) { failCount++; }
                            } else { failCount++; }
                        });

const finalDbArray = Object.values(cloudDB);
                        if(finalDbArray.length > 0) localStorage.setItem('faceid_db', JSON.stringify(finalDbArray));

faceIdInitMatcher();
                        faceIdUpdateStats();
                        
                        if(!isSilent) {
                            document.getElementById('faceid-loadingOverlay').classList.add('hidden');
                            const msg = `Sinkronisasi Google Sheets Berhasil!\n\n` +
                                        `• Siswa Terhubung: ${successCount} Orang\n` +
                                        `• Data Wajah Rusak/Gagal: ${failCount} Baris\n` +
                                        `• Baris Kosong Dilewati: ${skipCount} Baris\n\n` +
                                        `Database Face ID lokal Anda kini sinkron dengan versi Cloud.`;
                            showGlobalAlert("Hasil Sinkronisasi", msg);
                        }
                    }
                });
            } catch (error) {
                if(!isSilent) {
                    document.getElementById('faceid-loadingOverlay').classList.add('hidden');
                    showGlobalAlert("Gagal Terhubung", "Tidak dapat menghubungi server Cloud. Pastikan HP terhubung ke internet.");
                }
            }
        }

function handleFaceIdRegisterClick() {
            if (isFaceIdPinVerified) { showFaceIdView('register'); } 
            else { openFaceIdPin(); }
        }

function openFaceIdPin() {
            const modal = document.getElementById('faceid-pin-modal');
            const content = document.getElementById('faceid-pin-content');
            const input = document.getElementById('faceid-pin-input');
            const errorMsg = document.getElementById('faceid-pin-error');
            
            input.value = ''; 
            errorMsg.classList.add('opacity-0'); 
            input.classList.remove('border-rose-500'); 
            input.classList.add('border-slate-200');
            
            modal.classList.remove('hidden'); 
            setTimeout(() => { content.classList.remove('scale-90', 'opacity-0'); input.focus(); }, 50);
        }

function closeFaceIdPin() {
            const modal = document.getElementById('faceid-pin-modal'); 
            const content = document.getElementById('faceid-pin-content');
            content.classList.add('scale-90', 'opacity-0'); 
            setTimeout(() => modal.classList.add('hidden'), 300);
        }

async function faceIdStartCamera(mode) {
            const videoId = mode === 'register' ? 'faceid-registerVideo' : 'faceid-scanVideo';
            try {
                faceIdStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }});
                document.getElementById(videoId).srcObject = faceIdStream;
                if(mode === 'register') {
                    document.getElementById('faceid-btnStartReg').classList.add('hidden'); 
                    document.getElementById('faceid-btnCapture').disabled = false; 
                    document.getElementById('faceid-registerOverlay').classList.remove('hidden');
                } else if (mode === 'scan') {
                    document.getElementById('faceid-btnStartScan').classList.add('hidden'); 
                    document.getElementById('faceid-btnStopScan').classList.remove('hidden'); 
                    document.getElementById('faceid-scanLine').classList.remove('hidden');
                    faceIdProcessScan(document.getElementById(videoId));
                }
            } catch(e) {
                console.error("Camera access failed", e);
            }
        }

async function faceIdCaptureAndRegister() {
            const selectedNisn = document.getElementById('faceid-studentName').value;
            if(!selectedNisn) return showGlobalAlert("Info", "Silakan pilih nama siswa terlebih dahulu!");
            
            const studentObj = faceIdStudents.find(s => s.nisn === selectedNisn);
            const name = studentObj.nama;
            const nisn = studentObj.nisn;

const video = document.getElementById('faceid-registerVideo');
            const btnCapture = document.getElementById('faceid-btnCapture');
            
            btnCapture.disabled = true;
            btnCapture.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Memproses Registrasi...';

let capturedDescriptors = [];
            const captureOptions = new faceapi.TinyFaceDetectorOptions({ inputSize: 416, scoreThreshold: 0.75 });

for(let i = 0; i < 3; i++) {
                const det = await faceapi.detectSingleFace(video, captureOptions).withFaceLandmarks().withFaceDescriptor();
                if(det) { capturedDescriptors.push(Array.from(det.descriptor)); }
                await new Promise(r => setTimeout(r, 600)); 
            }

if(capturedDescriptors.length > 0) {
                let db = JSON.parse(localStorage.getItem('faceid_db') || '[]');
                db = db.filter(d => d.name !== name); 
                const jsonData = JSON.stringify(capturedDescriptors);
                db.push({ name: name, descriptors: capturedDescriptors });
                localStorage.setItem('faceid_db', JSON.stringify(db));
                
                const config = JSON.parse(localStorage.getItem('faceid_cloud_config') || '{}');
                let cloudSent = false;
                if(config.formUrl && config.entryName && config.entryNisn && config.entryData) {
                    try {
                        const fd = new URLSearchParams();
                        fd.append(config.entryName, name);
                        fd.append(config.entryNisn, nisn);
                        fd.append(config.entryData, jsonData);
                        
                        await fetch(config.formUrl, { 
                            method: 'POST', 
                            mode: 'no-cors', 
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded'}, 
                            body: fd.toString() 
                        });
                        cloudSent = true;
                    } catch (e) { 
                        console.error("Cloud form post error:", e); 
                    }
                }

showGlobalAlert(
                    "Pendaftaran Berhasil", 
                    `Siswa: ${name} (NISN: ${nisn})\nBerhasil disimpan` + (cloudSent ? " dan disinkronkan ke Cloud Google Sheets." : " secara lokal perangkat.")
                );
                document.getElementById('faceid-studentName').value = '';
                showFaceIdView('dashboard');
            } else {
                showGlobalAlert("Gagal Registrasi Wajah", "Kamera gagal menangkap deteksi wajah Anda dengan jelas. Dekatkan perangkat dan pastikan cahaya terang.");
            }

btnCapture.disabled = false;
            btnCapture.innerHTML = 'Simpan & Kirim ke Cloud';
        }

const faceIdCooldown = new Map();
        
        function faceIdProcessScan(video) {
            const canvas = document.getElementById('faceid-scanCanvas');
            const scanOptions = new faceapi.TinyFaceDetectorOptions({ inputSize: 416, scoreThreshold: 0.7 });
            faceIdMatchBuffer = {};

video.addEventListener('play', () => {
                setTimeout(() => {
                    const displaySize = { width: video.videoWidth, height: video.videoHeight };
                    faceapi.matchDimensions(canvas, displaySize);
                    
                    faceIdScanInterval = setInterval(async () => {
                        if (video.paused || video.ended || !faceIdMatcher) return;
                        
                        const dets = await faceapi.detectAllFaces(video, scanOptions).withFaceLandmarks().withFaceDescriptors();
                        const resizedDets = faceapi.resizeResults(dets, displaySize);
                        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
                        
                        let currentLabels = [];

resizedDets.forEach(d => {
                            const result = faceIdMatcher.findBestMatch(d.descriptor);
                            const box = d.detection.box;
                            const color = result.label === 'unknown' ? '#ef4444' : '#10b981';
                            
                            const displayLabel = result.label === 'unknown' ? 'Tidak Dikenal' : `${result.label} (${(result.distance).toFixed(2)})`;
                            new faceapi.draw.DrawBox(box, { label: displayLabel, boxColor: color }).draw(canvas);
                            
                            if(result.label !== 'unknown') {
                                currentLabels.push(result.label);
                                faceIdMatchBuffer[result.label] = (faceIdMatchBuffer[result.label] || 0) + 1;

if(faceIdMatchBuffer[result.label] >= 2) {
                                    faceIdLog(result.label);
                                }
                            }
                        });

Object.keys(faceIdMatchBuffer).forEach(lbl => {
                            if(!currentLabels.includes(lbl)) {
                                faceIdMatchBuffer[lbl] = Math.max(0, faceIdMatchBuffer[lbl] - 1);
                            }
                        });
                    }, 500);
                }, 500);
            }, {once:true});
        }

function faceIdLog(name) {
            const now = new Date(); 
            const last = faceIdCooldown.get(name);
            if(last && (now - last) < 10000) return; 
            
            faceIdCooldown.set(name, now);

function faceIdUpdateStats() {
            document.getElementById('faceid-stat-registered').textContent = JSON.parse(localStorage.getItem('faceid_db') || '[]').length;
            document.getElementById('faceid-stat-attended').textContent = JSON.parse(localStorage.getItem('faceid_logs') || '[]').filter(l => l.date === new Date().toISOString().split('T')[0]).length;
        }

function faceIdClearLogs() {
            showGlobalConfirm("Hapus Absen", "Apakah Anda yakin ingin menghapus data absen Face ID hari ini?", function() {
                let logs = JSON.parse(localStorage.getItem('faceid_logs') || '[]');
                logs = logs.filter(l => l.date !== new Date().toISOString().split('T')[0]);
                localStorage.setItem('faceid_logs', JSON.stringify(logs)); 
                faceIdRenderLogs();
            });
        }

// -------------------------
        // ABSENSI RFID SCRIPTS
        // -------------------------
        let rfidStudents = []; 
        let rfidLogs = []; 
        let rfidScanMode = 'Hadir';

async function initRFID() {
            lucide.createIcons(); 
            document.getElementById('rfid-loading-screen').classList.remove('hidden'); 
            document.getElementById('rfid-main-app').classList.add('hidden');
            
            try {
                const res = await fetch('https://docs.google.com/spreadsheets/d/e/2PACX-1vTBhWd8LFN_BH22LJ8vE5qpVb0RHXsHKLsYbuKTXFLgKgq3HErsJP6zZKXwt-M7mKiIVSkTLz6_mXWm/pub?gid=1897365642&single=true&output=csv'); 
                const text = await res.text();
                
                rfidStudents = text.split('\n').slice(1).map(line => { 
                    if(!line.trim()) return null; 
                    const c = line.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/).map(col => col.replace(/^"|"$/g, '').trim()); 
                    if(c.length >= 8 && c[7]) {
                        return { 
                            kelas: c[0]||'-', 
                            nisn: c[3]||'-', 
                            nama: c[4]||'Tanpa Nama', 
                            rfid: c[7].replace(/\r/g,'').trim(),
                            whatsapp: c[5] || ''
                        }; 
                    }
                    return null; 
                }).filter(Boolean);

// -------------------------
        // ABSENSI GURU SCRIPTS
        // -------------------------
        let guruData = [];
        let guruClasses = [];
        let guruActiveKelas = '';
        let guruStatuses = {};

async function initGuru() {
            // Memaksa fetch data baru dari Google Sheets setiap kali menu ini dibuka, tanpa cached check
            await guruFetchData(true, false);
        }

// Tambah argumen isManualRefresh untuk mengendalikan alert notifikasi berhasil
        async function guruFetchData(forceRefresh = true, isManualRefresh = false) {
            document.getElementById('guru-loading-state').classList.remove('hidden');
            document.getElementById('guru-app-content').classList.add('hidden');
            const bottomBar = document.getElementById('guru-bottom-bar');
            if(bottomBar) bottomBar.classList.add('hidden');

try {
                // Selalu menambahkan timestamp (_t) agar data tidak diambil dari browser cache
                const url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRPjm08wy0RggsHANUwdNA4xuLo82OhnSwYGSF4iDcwEg158h-PmuhzP32HNXUGQ4pef6Qrp9Nuwv5q/pub?gid=927622494&single=true&output=csv' + (forceRefresh ? `&_t=${Date.now()}` : '');
                
                const response = await fetch(url);
                if (!response.ok) throw new Error("Gagal terhubung ke Google Sheets");
                const csvText = await response.text();
                
                Papa.parse(csvText, {
                    header: false,
                    skipEmptyLines: true,
                    complete: function(results) {
                        const rows = results.data;
                        guruData = [];
                        
                        for (let i = 1; i < rows.length; i++) {
                            const row = rows[i];
                            // Memastikan panjang kolom mencukupi sebelum memanggil data
                            if (row.length >= 6) { 
                                const kelas = row[2] ? row[2].trim() : ''; // Kolom C
                                const jamKe = row[3] ? row[3].trim() : ''; // Kolom D
                                const mapel = row[4] ? row[4].trim() : ''; // Kolom E (Mata Pelajaran)
                                const nama = row[5] ? row[5].trim() : ''; // Kolom F (Nama Guru)
                                const hp = row.length > 7 && row[7] ? row[7].trim() : ''; // Kolom H
                                
                                if (nama && kelas) {
                                    guruData.push({
                                        index: i, // ID unik per baris
                                        nama: nama,
                                        hp: hp,
                                        kelas: kelas,
                                        jamKe: jamKe,
                                        mapel: mapel
                                    });
                                }
                            }
                        }
                        
                        // Ekstraksi kelas yang unik
                        guruClasses = [...new Set(guruData.map(item => item.kelas))].sort();
                        
                        if (guruClasses.length > 0) {
                            // Pertahankan kelas aktif saat direfresh jika masih ada
                            if (!guruActiveKelas || !guruClasses.includes(guruActiveKelas)) {
                                guruActiveKelas = guruClasses[0];
                            }
                        }
                        
                        if (forceRefresh) {
                            guruStatuses = {}; 
                            // Tampilkan alert HANYA jika ini merupakan klik manual dari tombol "Refresh Data"
                            if (isManualRefresh) {
                                showGlobalAlert("Berhasil", "Data Absensi Guru berhasil diperbarui dari server.");
                            }
                        }

document.getElementById('guru-loading-state').classList.add('hidden');
                        document.getElementById('guru-app-content').classList.remove('hidden');
                        document.getElementById('guru-app-content').classList.add('flex');
                        if(bottomBar) bottomBar.classList.remove('hidden');
                        
                        guruRenderTabs();
                        guruRenderCards();
                    },
                    error: function(err) {
                        throw new Error(err.message);
                    }
                });
            } catch (error) {
                document.getElementById('guru-loading-state').innerHTML = `
                    <div class="text-rose-500 mb-4"><i class="fa-solid fa-triangle-exclamation text-5xl"></i></div>
                    <p class="text-slate-700 font-bold text-lg">Gagal Mengambil Data</p>
                    <p class="text-sm text-slate-500 mt-2 text-center max-w-xs">Periksa koneksi internet Anda atau pastikan link Google Sheets valid.</p>
                    <button onclick="guruFetchData(true, true)" class="mt-6 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-6 py-2.5 rounded-xl font-bold transition">Coba Lagi</button>
                `;
            }
        }

// ==========================================
        // FIXED FUNCTIONS: GURU TABS, CARDS & SUBMIT
        // ==========================================

function guruRenderTabs() {
            const container = document.getElementById('guru-class-tabs');
            if (!container) return;
            
            container.innerHTML = guruClasses.map(kelas => {
                const classItems = guruData.filter(item => item.kelas === kelas);
                const classCompleted = classItems.every(item => guruStatuses[item.index]);
                const isSelected = guruActiveKelas === kelas;

return `
                <button onclick="guruSetKelas('${kelas}')" 
                        class="px-5 py-2.5 rounded-xl font-bold text-sm transition-all shadow-sm border whitespace-nowrap flex-shrink-0 flex items-center gap-2 ${isSelected ? 'bg-indigo-600 text-white border-indigo-600 shadow-indigo-200' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'}">
                    <span>Kelas ${kelas}</span>
                    ${classCompleted ? `<i class="fa-solid fa-circle-check ${isSelected ? 'text-emerald-300' : 'text-emerald-500'} text-xs"></i>` : ''}
                </button>
                `;
            }).join('');
        }

function guruSetKelas(kelas) {
            guruActiveKelas = kelas;
            guruRenderTabs();
            guruRenderCards();
        }

function guruSetStatus(index, status) {
            guruStatuses[index] = status;
            guruRenderTabs(); // Update centang hijau di tab kelas
            guruUpdateSelectionCount();
        }

function guruUpdateSelectionCount() {
            // Evaluasi berdasarkan kelas yang aktif saat ini
            const currentClassData = guruData.filter(item => item.kelas === guruActiveKelas);
            const totalInClass = currentClassData.length;
            
            let countInClass = 0;
            currentClassData.forEach(item => {
                if (guruStatuses[item.index]) countInClass++;
            });
            
            const countEl = document.getElementById('guru-selected-count');
            const totalEl = document.getElementById('guru-total-count');
            const badgeEl = document.getElementById('guru-completion-badge');
            const btn = document.getElementById('guru-submit-btn');

if (countEl) countEl.innerText = countInClass;
            if (totalEl) totalEl.innerText = totalInClass;

const isClassCompleted = totalInClass > 0 && countInClass === totalInClass;

if (badgeEl) {
                if (isClassCompleted) {
                    badgeEl.innerText = "Kelas Selesai";
                    badgeEl.className = "text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-emerald-100 text-emerald-700 w-fit";
                } else {
                    badgeEl.innerText = "Belum Lengkap";
                    badgeEl.className = "text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 w-fit";
                }
            }

if (btn) {
                // Aktifkan tombol kirim jika ada minimal 1 data yang dipilih di kelas tersebut
                if (countInClass > 0) {
                    btn.classList.remove('opacity-50', 'cursor-not-allowed');
                    btn.disabled = false;
                } else {
                    btn.classList.add('opacity-50', 'cursor-not-allowed');
                    btn.disabled = true;
                }
            }
        }

async function guruSubmitData() {
            // Hanya ambil data untuk kelas yang sedang aktif (dipilih petugas saat ini)
            const currentClassData = guruData.filter(item => item.kelas === guruActiveKelas);
            
            const itemsToSubmit = currentClassData.map(item => {
                return {
                    data: item,
                    status: guruStatuses[item.index]
                };
            }).filter(item => item.status); // Hanya ambil yang sudah diberi keterangan
            
            if (itemsToSubmit.length === 0) {
                showGlobalAlert("Peringatan", "Silakan pilih keterangan (Hadir/Tugas/Tidak Hadir) untuk minimal satu guru di kelas ini.");
                return;
            }

let guruAbsenHariIniData = [];

async function openGuruAbsenHariIni() {
            const modal = document.getElementById('guru-absen-hari-ini-modal');
            const content = document.getElementById('guru-absen-hari-ini-content');
            modal.classList.remove('hidden');
            setTimeout(() => content.classList.remove('scale-90', 'opacity-0'), 50);
            
            await fetchGuruAbsenHariIni();
        }

function closeGuruAbsenHariIni() {
            const modal = document.getElementById('guru-absen-hari-ini-modal');
            const content = document.getElementById('guru-absen-hari-ini-content');
            content.classList.add('scale-90', 'opacity-0');
            setTimeout(() => modal.classList.add('hidden'), 300);
        }

async function fetchGuruAbsenHariIni() {
            const listContainer = document.getElementById('guru-absen-list');
            const loading = document.getElementById('guru-absen-loading');
            
            listContainer.innerHTML = '';
            loading.classList.remove('hidden');
            
            try {
                // Link CSV sesuai permintaan (kolom B: Nama, C: Mapel, D: Kelas, E: Jam Ke)
                const url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRPjm08wy0RggsHANUwdNA4xuLo82OhnSwYGSF4iDcwEg158h-PmuhzP32HNXUGQ4pef6Qrp9Nuwv5q/pub?gid=1397934454&single=true&output=csv&_t=' + Date.now();
                const res = await fetch(url);
                const text = await res.text();
                
                Papa.parse(text, {
                    header: false,
                    skipEmptyLines: true,
                    complete: function(results) {
                        const rows = results.data;
                        guruAbsenHariIniData = [];
                        
                        // Mulai dari 1 untuk skip header di baris pertama
                        for(let i = 1; i < rows.length; i++) {
                            const row = rows[i];
                            if(row.length >= 5) {
                                // row[1] adalah Kolom B, row[2] adalah Kolom C dst.
                                const nama = row[1] ? row[1].trim() : '';
                                const mapel = row[2] ? row[2].trim() : '';
                                const kelas = row[3] ? row[3].trim() : '';
                                const jam = row[4] ? row[4].trim() : '';
                                
                                if(nama) {
                                    guruAbsenHariIniData.push({ nama, mapel, kelas, jam });
                                }
                            }
                        }
                        
                        loading.classList.add('hidden');
                        renderGuruAbsenHariIni();
                    }
                });
            } catch (error) {
                loading.classList.add('hidden');
                listContainer.innerHTML = '<div class="text-center text-rose-500 p-4 font-semibold">Gagal memuat data dari server.</div>';
            }
        }