<!DOCTYPE html>
<html lang="id" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BATAS Enterprise Worksuite & Portal - Ust. Saddam Said Muchasin</title>
    
    <!-- PWA Web App Manifest -->
    <link rel="manifest" href="data:application/manifest+json;charset=utf-8,{
        %22name%22: %22BATAS Enterprise Worksuite%22,
        %22short_name%22: %22BATAS%22,
        %22start_url%22: %22.%22,
        %22display%22: %22standalone%22,
        %22background_color%22: %22#f8fafc%22,
        %22theme_color%22: %22#0f172a%22,
        %22icons%22: [
            {
                %22src%22: %22https://placehold.co/192x192/0f172a/ffffff?text=BATAS%22,
                %22sizes%22: %22192x192%22,
                %22type%22: %22image/png%22
            },
            {
                %22src%22: %22https://placehold.co/512x512/0f172a/ffffff?text=BATAS%22,
                %22sizes%22: %22512x512%22,
                %22type%22: %22image/png%22
            }
        ]
    }">
    
    <link rel="apple-touch-icon" href="https://placehold.co/180x180/0f172a/ffffff?text=BATAS">

    <meta name="mobile-web-app-capable" content="yes">
    <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="BATAS">

    <!-- Tailwind CSS & Google Fonts -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Amiri:wght@400;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        enterprise: { 
                            primary: '#0f172a',
                            accent: '#2563eb',
                            lightBg: '#f8fafc',
                            darkBg: '#090d16',
                            darkCard: '#111827',
                            borderLight: '#e2e8f0',
                            borderDark: '#1f2937'
                        }
                    },
                    fontFamily: {
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                        arabic: ['Amiri', 'serif']
                    }
                }
            }
        }
    </script>
    <!-- SheetJS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

    <style>
        @media print { .no-print { display: none !important; } body { background: white; padding: 0; } }
        .arabic-text { font-family: 'Amiri', serif; line-height: 2.6; direction: rtl; }
        .enterprise-card { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
        .enterprise-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08); }
        .sidebar-item { transition: all 0.2s ease; }
        .sidebar-item.active { background-color: #2563eb; color: white; }
    </style>
</head>
<body class="bg-enterprise-lightBg dark:bg-enterprise-darkBg text-slate-900 dark:text-slate-100 min-h-screen flex flex-col font-sans select-none transition-colors duration-300">

    <!-- Toast Notification Container -->
    <div id="toast-container" class="fixed bottom-6 right-6 z-50 space-y-2"></div>

    <!-- ENTERPRISE TOP HEADER BAR -->
    <header class="bg-white/90 dark:bg-enterprise-darkCard/90 backdrop-blur-md border-b border-enterprise-borderLight dark:border-enterprise-borderDark sticky top-0 z-40 px-4 lg:px-8 py-3.5 shadow-2xs">
        <div class="max-w-7xl mx-auto flex items-center justify-between gap-4">
            
            <!-- Brand Logo & Title -->
            <div class="flex items-center gap-3 cursor-pointer" onclick="switchView('store')">
                <div class="w-10 h-10 bg-enterprise-primary dark:bg-slate-800 rounded-xl flex items-center justify-center font-extrabold text-white shadow-sm text-xs tracking-wider border border-slate-700">
                    BATAS
                </div>
                <div>
                    <h1 class="text-sm font-bold tracking-tight flex items-center gap-2">
                        <span class="text-slate-900 dark:text-white">BATAS Enterprise</span> 
                        <span class="text-[10px] text-blue-600 dark:text-blue-400 font-semibold bg-blue-50 dark:bg-blue-950/60 px-2 py-0.5 rounded-md border border-blue-200 dark:border-blue-900">Worksuite v5</span>
                    </h1>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400 font-medium">Beyond Learning Al-Quran System</p>
                </div>
            </div>

            <!-- Global Search & Quick Actions -->
            <div class="flex-1 max-w-md mx-4 hidden md:block">
                <div class="relative flex items-center">
                    <span class="absolute left-3.5 text-slate-400 text-xs">🔍</span>
                    <input type="text" id="store-search" oninput="filterStoreApps(this.value)" placeholder="Cari modul atau instrumen kerja..." class="w-full bg-slate-100 dark:bg-slate-800/80 text-xs text-slate-800 dark:text-slate-100 pl-10 pr-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-enterprise-accent/50 border border-transparent focus:border-enterprise-accent">
                </div>
            </div>

            <!-- Action Controls -->
            <div class="flex items-center gap-2.5">
                <button id="install-pwa-btn" onclick="installPWA()" class="hidden bg-enterprise-primary hover:bg-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 text-white font-semibold text-xs px-4 py-2 rounded-xl shadow-2xs transition flex items-center gap-1.5">
                    📲 Install App
                </button>
                <button onclick="toggleDarkMode()" class="p-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-xs font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition" title="Ganti Tema">
                    🌓
                </button>
            </div>
        </div>
    </header>

    <!-- PROPORTIONAL MAIN LAYOUT (SIDEBAR + CONTENT GRID) -->
    <div class="max-w-7xl mx-auto px-4 lg:px-8 py-6 flex-grow w-full grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">
        
        <!-- SIDEBAR NAVIGATION (Desktop Column 1) -->
        <aside class="bg-white dark:bg-enterprise-darkCard p-4 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-6 lg:sticky lg:top-24">
            <div>
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider px-3 pb-2">Navigasi Utama</p>
                <div class="space-y-1">
                    <button onclick="switchView('store')" id="nav-dashboard" class="sidebar-item active w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left">
                        <span>📊</span> Dashboard Portal
                    </button>
                    <button onclick="openApp('tracker')" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <span>📋</span> Jobdesk & QA Tracker
                    </button>
                </div>
            </div>

            <div>
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider px-3 pb-2">Kitab & Tilawah</p>
                <div class="space-y-1">
                    <button onclick="openApp('quran')" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <span>📖</span> Al-Quran 30 Juz
                    </button>
                    <button onclick="openApp('arbain')" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <span>📜</span> Hadits Arbain
                    </button>
                </div>
            </div>

            <div>
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider px-3 pb-2">Administrasi & Sekolah</p>
                <div class="space-y-1">
                    <button onclick="openApp('presensi')" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <span>📝</span> Presensi Guru
                    </button>
                    <button onclick="openApp('jurnal')" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <span>💡</span> Jurnal JDT
                    </button>
                    <button onclick="openApp('scores')" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <span>📈</span> Weekly Scores
                    </button>
                    <button onclick="openApp('qibla')" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-xs font-bold text-left text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <span>🧭</span> Qiblat & Sholat
                    </button>
                </div>
            </div>

            <div class="pt-3 border-t border-slate-100 dark:border-slate-800">
                <div class="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-2xl text-[11px] text-slate-500 dark:text-slate-400 space-y-1">
                    <p class="font-bold text-slate-700 dark:text-slate-200">Ust. Saddam Said Muchasin</p>
                    <p>GuideBook v5 Active</p>
                </div>
            </div>
        </aside>

        <!-- MAIN CONTENT AREA (Desktop Columns 2 to 4) -->
        <main class="lg:col-span-3 space-y-6">

            <!-- ================= VIEW 1: ENTERPRISE HOME ================= -->
            <div id="view-store" class="space-y-6">
                
                <!-- Corporate Hero Banner -->
                <div class="bg-gradient-to-r from-slate-900 via-enterprise-primary to-blue-950 text-white p-6 md:p-8 rounded-3xl shadow-xl flex flex-col md:flex-row justify-between items-center gap-6 relative overflow-hidden">
                    <div class="space-y-3 z-10 max-w-xl">
                        <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-3.5 py-1.5 rounded-lg text-xs font-semibold text-blue-200 border border-white/10">
                            <span>🏢 Professional Worksuite & Curriculum System</span>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-extrabold tracking-tight">Ecosystem Integrasi Pembelajaran & Manajemen</h2>
                        <p class="text-xs md:text-sm text-slate-300 leading-relaxed font-normal">Sistem terpusat untuk pengelolaan Al-Quran 30 Juz, Hadits Arbain, Presensi Lintas Unit, Jurnal JDT, dan Pemantauan QA.</p>
                        <div class="flex gap-3 pt-2">
                            <button onclick="openApp('quran')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-5 py-2.5 rounded-xl shadow transition">Buka Al-Quran</button>
                            <button onclick="openApp('tracker')" class="bg-white/10 hover:bg-white/20 text-white font-bold text-xs px-5 py-2.5 rounded-xl backdrop-blur border border-white/20 transition">Jobdesk Tracker</button>
                        </div>
                    </div>
                    <div class="w-24 h-24 md:w-28 md:h-28 bg-white/5 rounded-3xl backdrop-blur-md border border-white/10 flex items-center justify-center text-3xl font-black text-yellow-300 shadow-inner z-10 tracking-widest shrink-0">
                        BATAS
                    </div>
                </div>

                <!-- MODULES GRID -->
                <div class="space-y-4">
                    <div class="flex justify-between items-end px-1">
                        <div>
                            <h3 class="font-bold text-base text-slate-900 dark:text-white">Modul & Instrumen Kerja</h3>
                            <p class="text-xs text-slate-500 dark:text-slate-400">Pilih modul di bawah untuk memulai pengelolaan</p>
                        </div>
                        <span class="text-xs text-enterprise-accent dark:text-blue-400 font-bold">7 Modul Aktif</span>
                    </div>
                    <div id="store-app-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"></div>
                </div>

            </div>

            <!-- ================= VIEW 2: RUNNING APP CONTAINER ================= -->
            <div id="view-app-container" class="hidden space-y-4">
                <div id="active-app-render"></div>
            </div>

        </main>

    </div>

    <!-- MOBILE BOTTOM NAVIGATION -->
    <div class="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-enterprise-darkCard border-t border-enterprise-borderLight dark:border-enterprise-borderDark z-40 px-6 py-2.5 flex justify-around items-center text-xs">
        <button onclick="switchView('store')" class="flex flex-col items-center gap-1 text-enterprise-accent dark:text-blue-400 font-bold">
            <span class="text-base">📊</span>
            <span>Dashboard</span>
        </button>
        <button onclick="openApp('quran')" class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-slate-900">
            <span class="text-base">📖</span>
            <span>Al-Quran</span>
        </button>
        <button onclick="openApp('tracker')" class="flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-slate-900">
            <span class="text-base">📋</span>
            <span>Tracker</span>
        </button>
    </div>

    <!-- SCRIPT LOGIC -->
    <script>
        let deferredPrompt;
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            const btn = document.getElementById('install-pwa-btn');
            if(btn) btn.classList.remove('hidden');
        });

        function installPWA() {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        showToast("Aplikasi berhasil diinstal ke perangkat!");
                    }
                    deferredPrompt = null;
                });
            } else {
                showToast("Ketuk menu browser (titik tiga) lalu pilih 'Tambahkan ke Layar Utama'.", "success");
            }
        }

        const storeApps = [
            { id: 'quran', name: "Al-Quran 30 Juz Digital", category: "Kitab", rating: "4.9 ⭐", size: "15 MB", icon: "📖", desc: "Al-Quran lengkap 30 Juz dengan teks Arab Amiri beresolusi tinggi, transliterasi Latin, dan terjemahan.", badge: "Utama" },
            { id: 'arbain', name: "Hadits Arbain Nawawi", category: "Kitab", rating: "4.8 ⭐", size: "8 MB", icon: "📜", desc: "Koleksi lengkap 42 Hadits Arbain Imam Nawawi dari awal sampai akhir beserta terjemahannya.", badge: "Kajian" },
            { id: 'tracker', name: "Jobdesk & QA Tracker", category: "Worksuite", rating: "5.0 ⭐", size: "5 MB", icon: "📋", desc: "Kelola pencapaian deliverable, KPI, dan progres harian QA di bawah bimbingan Tim (Putri & Sari).", badge: "Manajemen" },
            { id: 'presensi', name: "Presensi Guru Digital", category: "Administrasi", rating: "4.9 ⭐", size: "4 MB", icon: "📝", desc: "Pencatatan kehadiran harian guru lintas unit (BLP, TK Al Ikhlas, dan HH) dengan rekap instan.", badge: "Harian" },
            { id: 'jurnal', name: "Jurnal JDT & Refleksi", category: "Worksuite", rating: "4.8 ⭐", size: "6 MB", icon: "💡", desc: "Catatan harian kelas dengan pendekatan Joyful & Deep Thinking serta integrasi nilai Tauhid.", badge: "Kurikulum" },
            { id: 'scores', name: "Weekly Scores Portal", category: "Administrasi", rating: "4.7 ⭐", size: "5 MB", icon: "📈", desc: "Pusat penilaian mingguan siswa mencakup aspek Tahsin, Fiqih, dan capaian kompetensi ISAR.", badge: "Akademik" },
            { id: 'qibla', name: "Qiblat & Jadwal Sholat", category: "Utilitas", rating: "4.9 ⭐", size: "10 MB", icon: "🕌", desc: "Kompas kiblat otomatis berbasis sensor GPS/magnetometer beserta jadwal sholat harian wilayah Jakarta.", badge: "Sensor" }
        ];

        let stateJobdesk = JSON.parse(localStorage.getItem('batas_jobdesk')) || [
            { id: 1, title: "Konsultasi & Sharing Session Kurikulum Keislaman", deliverable: "Insight/notulen sharing per sesi", frequency: "2 minggu sekali, hari Selasa", kpi: "Sesi terlaksana sesuai jadwal", pillar: "TEACHERS CONNECT", status: "Pending", note: "" },
            { id: 2, title: "Menyusun Kurikulum Pengembangan Guru + Review 3 Unit", deliverable: "Kurikulum tersusun + laporan review (HH, TK Al Ikhlas, BLP)", frequency: "Awal TA, review per semester", kpi: "Kurikulum tersedia sebelum TA", pillar: "TEACHERS CREATE", status: "Pending", note: "" },
            { id: 3, title: "Coaching Clinic Guru BATAS", deliverable: "Jadwal & rekap coaching (prioritas guru BLP)", frequency: "Sesuai jadwal", kpi: "Coaching terlaksana", pillar: "TEACHERS CREATE", status: "Pending", note: "" },
            { id: 4, title: "Tahsin Training & Jalur Pengembangan", deliverable: "Jadwal tahsin rutin + panduan steps", frequency: "Tahsin rutin", kpi: "Tahsin terlaksana", pillar: "TEACHERS CONNECT", status: "Pending", note: "" },
            { id: 5, title: "Workshop Parents Kurikulum Keislaman", deliverable: "Materi & dokumentasi workshop orang tua", frequency: "2x per TA", kpi: "2 workshop terlaksana", pillar: "TEACHERS CONTRIBUTE", status: "Pending", note: "" }
        ];
        let stateTeacherAttendance = JSON.parse(localStorage.getItem('batas_teacher_attendance')) || [];
        let stateJurnal = JSON.parse(localStorage.getItem('batas_jurnal')) || [];
        let stateScores = JSON.parse(localStorage.getItem('batas_scores')) || [
            { id: 1, name: "Ahmad Fauzi", unit: "BLP", week: "Week 1", tahsin: 85, fiqih: 90 },
            { id: 2, name: "Siti Maryam", unit: "TK AI Ikhlas", week: "Week 1", tahsin: 88, fiqih: 92 }
        ];

        function showToast(msg, type='success') {
            const container = document.getElementById('toast-container');
            const toast = document.createElement('div');
            toast.className = `p-3 rounded-xl text-xs font-semibold text-white shadow-lg ${type==='success'?'bg-slate-900 dark:bg-slate-800 border border-slate-700':'bg-red-600'}`;
            toast.innerText = msg;
            container.appendChild(toast);
            setTimeout(() => { toast.remove(); }, 3500);
        }

        function toggleDarkMode() {
            const html = document.documentElement;
            if(html.classList.contains('dark')) { html.classList.remove('dark'); localStorage.setItem('theme', 'light'); }
            else { html.classList.add('dark'); localStorage.setItem('theme', 'dark'); }
        }
        if(localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark');

        function renderStoreGrid(filter = '') {
            const grid = document.getElementById('store-app-grid');
            if(!grid) return;
            grid.innerHTML = '';
            
            const filtered = storeApps.filter(a => a.name.toLowerCase().includes(filter.toLowerCase()) || a.desc.toLowerCase().includes(filter.toLowerCase()));
            
            filtered.forEach(app => {
                const card = document.createElement('div');
                card.className = "enterprise-card bg-white dark:bg-enterprise-darkCard p-5 rounded-2xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs flex flex-col justify-between space-y-4";
                card.innerHTML = `
                    <div class="flex items-start gap-3.5">
                        <div class="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-xl flex items-center justify-center text-2xl shadow-inner border border-slate-200 dark:border-slate-700 shrink-0">
                            ${app.icon}
                        </div>
                        <div class="flex-1 min-w-0">
                            <span class="text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">${app.badge}</span>
                            <h4 class="font-bold text-sm text-slate-900 dark:text-white mt-1 truncate">${app.name}</h4>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400">${app.category}</p>
                        </div>
                    </div>
                    <p class="text-xs text-slate-600 dark:text-slate-300 line-clamp-2 leading-relaxed">${app.desc}</p>
                    <div class="pt-3 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between">
                        <div class="text-[11px] font-semibold text-slate-400">${app.rating} • ${app.size}</div>
                        <button onclick="openApp('${app.id}')" class="bg-slate-100 dark:bg-slate-800 hover:bg-enterprise-accent hover:text-white text-slate-800 dark:text-slate-200 font-bold text-xs px-4 py-1.5 rounded-xl transition">
                            Buka Modul
                        </button>
                    </div>
                `;
                grid.appendChild(card);
            });
        }
        renderStoreGrid();

        function filterStoreApps(val) { renderStoreGrid(val); }

        function switchView(view) {
            document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active', 'text-white'));
            document.querySelectorAll('.sidebar-item').forEach(el => el.classList.add('text-slate-700', 'dark:text-slate-300'));
            
            if(view === 'store') {
                document.getElementById('view-store').classList.remove('hidden');
                document.getElementById('view-app-container').classList.add('hidden');
                const dashBtn = document.getElementById('nav-dashboard');
                if(dashBtn) {
                    dashBtn.classList.add('active', 'text-white');
                    dashBtn.classList.remove('text-slate-700', 'dark:text-slate-300');
                }
            } else {
                document.getElementById('view-store').classList.add('hidden');
                document.getElementById('view-app-container').classList.remove('hidden');
            }
        }

        function openApp(appId) {
            switchView('app');
            const container = document.getElementById('active-app-render');
            container.innerHTML = '';

            if(appId === 'quran') {
                container.innerHTML = `
                    <div class="bg-white dark:bg-enterprise-darkCard p-6 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-4">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 border-b border-enterprise-borderLight dark:border-enterprise-borderDark pb-4">
                            <div>
                                <h3 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">📖 Al-Quran 30 Juz Digital</h3>
                                <p class="text-xs text-slate-500">Pilih surah untuk membaca teks Arab Amiri dan terjemahannya.</p>
                            </div>
                            <select id="quran-surah-select" onchange="loadSurah(this.value)" class="text-xs p-2.5 border dark:bg-slate-800 rounded-xl font-semibold md:w-72"></select>
                        </div>
                        <div id="quran-container" class="space-y-4 max-h-[600px] overflow-y-auto pr-2">
                            <div class="text-center py-10 text-slate-400">Memuat daftar surah...</div>
                        </div>
                    </div>
                `;
                initQuranList();
            } else if(appId === 'arbain') {
                container.innerHTML = `
                    <div class="bg-white dark:bg-enterprise-darkCard p-6 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-4">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 border-b border-enterprise-borderLight dark:border-enterprise-borderDark pb-4">
                            <div>
                                <h3 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">📜 Hadits Arbain Nawawi (1 - 42)</h3>
                                <p class="text-xs text-slate-500">Koleksi hadits pilihan lengkap dengan terjemahannya.</p>
                            </div>
                            <select id="arbain-select" onchange="loadArbain(this.value)" class="text-xs p-2.5 border dark:bg-slate-800 rounded-xl font-semibold md:w-72"></select>
                        </div>
                        <div id="arbain-container" class="space-y-4 bg-slate-50 dark:bg-slate-800/50 p-5 rounded-2xl border dark:border-slate-700"></div>
                    </div>
                `;
                initArbainSelect();
            } else if(appId === 'tracker') {
                container.innerHTML = `
                    <div class="space-y-4">
                        <div class="bg-white dark:bg-enterprise-darkCard p-6 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs flex justify-between items-center">
                            <div>
                                <p class="text-[10px] font-bold text-enterprise-accent uppercase tracking-wider">Capaian Progress QA</p>
                                <h2 class="text-4xl font-bold text-slate-900 dark:text-white mt-1" id="stat-percent">0%</h2>
                                <p class="text-xs text-slate-500 mt-0.5" id="stat-count">0 dari 5 Jobdesk Selesai</p>
                            </div>
                            <div class="text-right text-xs text-slate-600 dark:text-slate-300 space-y-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-2xl border">
                                <p><strong>Posisi:</strong> Di Bawah Tim QA (Putri & Sari)</p>
                                <p><strong>Unit Fokus:</strong> HH, TK Al Ikhlas, BLP</p>
                            </div>
                        </div>
                        <div class="flex gap-2 justify-end no-print">
                            <button onclick="window.print()" class="bg-slate-800 text-white text-xs px-4 py-2 rounded-xl font-medium shadow">🖨️ Cetak PDF</button>
                            <button onclick="exportExcel()" class="bg-enterprise-accent text-white text-xs px-4 py-2 rounded-xl font-medium shadow">📊 Ekspor Excel</button>
                        </div>
                        <div id="jobdesk-list" class="space-y-4"></div>
                    </div>
                `;
                renderJobdesk();
            } else if(appId === 'presensi') {
                container.innerHTML = `
                    <div class="bg-white dark:bg-enterprise-darkCard p-6 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-4">
                        <h3 class="text-base font-bold border-b pb-3 text-slate-900 dark:text-white flex justify-between items-center">
                            <span>📝 Catat Kehadiran Guru (Presensi Harian)</span>
                            <button onclick="document.getElementById('teacher-attendance-form').reset()" class="text-xs bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-xl">Reset</button>
                        </h3>
                        <form id="teacher-attendance-form" onsubmit="submitTeacherAttendance(event)" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="text-xs font-bold text-slate-500 block mb-1">Nama Guru</label>
                                <select id="teacher-name" required class="w-full text-xs p-2.5 border dark:bg-slate-800 rounded-xl">
                                    <option value="">Pilih Guru</option>
                                    <option value="Ust. Saddam Said Muchasin">Ust. Saddam Said Muchasin</option>
                                    <option value="Dra. Hj. Siti Aminah, M.Pd">Dra. Hj. Siti Aminah, M.Pd</option>
                                    <option value="Budi Santoso, S.Pd">Budi Santoso, S.Pd</option>
                                </select>
                            </div>
                            <div>
                                <label class="text-xs font-bold text-slate-500 block mb-1">Status Kehadiran</label>
                                <select id="teacher-status" required class="w-full text-xs p-2.5 border dark:bg-slate-800 rounded-xl">
                                    <option value="Hadir">Hadir</option><option value="Izin">Izin</option><option value="Sakit">Sakit</option><option value="Tugas Luar">Tugas Luar</option>
                                </select>
                            </div>
                            <div>
                                <label class="text-xs font-bold text-slate-500 block mb-1">Tanggal</label>
                                <input type="date" id="teacher-date" required class="w-full text-xs p-2.5 border dark:bg-slate-800 rounded-xl">
                            </div>
                            <div>
                                <label class="text-xs font-bold text-slate-500 block mb-1">Unit / Lokasi</label>
                                <select id="teacher-unit" class="w-full text-xs p-2.5 border dark:bg-slate-800 rounded-xl">
                                    <option value="BLP">Unit BLP</option><option value="TK AI Ikhlas">TK Al Ikhlas</option><option value="HH">Unit HH</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <label class="text-xs font-bold text-slate-500 block mb-1">Keterangan / Catatan</label>
                                <textarea id="teacher-note" rows="2" placeholder="Catatan aktivitas..." class="w-full text-xs p-2.5 border dark:bg-slate-800 rounded-xl"></textarea>
                            </div>
                            <div class="md:col-span-2 flex justify-end">
                                <button type="submit" class="bg-enterprise-accent text-white font-bold text-xs px-6 py-2.5 rounded-xl shadow">💾 Simpan Presensi</button>
                            </div>
                        </form>
                        <div class="pt-4 border-t dark:border-slate-800 space-y-3">
                            <h4 class="text-xs font-bold text-slate-600 dark:text-slate-300">Riwayat Presensi Tercatat:</h4>
                            <div class="overflow-x-auto">
                                <table class="w-full text-left text-xs">
                                    <thead class="bg-slate-50 dark:bg-slate-800">
                                        <tr><th class="p-2.5">Nama</th><th class="p-2.5">Waktu</th><th class="p-2.5">Status</th><th class="p-2.5">Unit</th><th class="p-2.5">Keterangan</th><th class="p-2.5 text-center">Aksi</th></tr>
                                    </thead>
                                    <tbody id="teacher-attendance-table" class="divide-y divide-slate-100 dark:divide-slate-800"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                `;
                document.getElementById('teacher-date').valueAsDate = new Date();
                renderTeacherAttendanceTable();
            } else if(appId === 'jurnal') {
                container.innerHTML = `
                    <div class="bg-white dark:bg-enterprise-darkCard p-6 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-4">
                        <h3 class="text-base font-bold border-b pb-3 text-slate-900 dark:text-white">📖 Jurnal & Pendekatan JDT (Joyful & Deep Thinking)</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div><label class="text-xs font-bold text-slate-500 block mb-1">Tanggal</label><input type="date" id="jurnal-tanggal" class="text-xs p-2.5 w-full border dark:bg-slate-800 rounded-xl"></div>
                            <div><label class="text-xs font-bold text-slate-500 block mb-1">Unit</label><select id="jurnal-unit" class="text-xs p-2.5 w-full border dark:bg-slate-800 rounded-xl"><option value="BLP">BLP</option><option value="TK AI Ikhlas">TK Al Ikhlas</option><option value="HH">HH</option></select></div>
                            <div class="md:col-span-2"><label class="text-xs font-bold text-slate-500 block mb-1">Materi / Momen Kelas & Bahasa JDT</label><input type="text" id="jurnal-materi" class="text-xs p-2.5 w-full border dark:bg-slate-800 rounded-xl" placeholder="Contoh: MashaAllah Allah yang menciptakan..."></div>
                            <div class="md:col-span-2"><label class="text-xs font-bold text-slate-500 block mb-1">Refleksi & Amal Harian</label><textarea id="jurnal-refleksi" rows="3" class="text-xs p-2.5 w-full border dark:bg-slate-800 rounded-xl" placeholder="Catatan refleksi..."></textarea></div>
                        </div>
                        <div class="flex justify-end"><button onclick="submitJurnal()" class="bg-enterprise-accent text-white font-bold text-xs px-6 py-2.5 rounded-xl">📖 Simpan Jurnal</button></div>
                        <div id="jurnal-history-list" class="space-y-2 pt-3 border-t dark:border-slate-800"></div>
                    </div>
                `;
                document.getElementById('jurnal-tanggal').valueAsDate = new Date();
                renderJurnalHistory();
            } else if(appId === 'scores') {
                container.innerHTML = `
                    <div class="bg-white dark:bg-enterprise-darkCard p-6 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-4">
                        <div class="flex justify-between items-center border-b pb-3">
                            <h3 class="text-base font-bold text-slate-900 dark:text-white">📈 Weekly Scores Portal (Tahsin & Fiqih)</h3>
                            <select id="score-week" onchange="renderScores()" class="text-xs p-2 border dark:bg-slate-800 rounded-xl font-bold">
                                <option>Week 1</option><option>Week 2</option><option>Week 3</option><option>Week 4</option>
                            </select>
                        </div>
                        <div class="bg-slate-50 dark:bg-slate-800/50 p-4 rounded-2xl border dark:border-slate-700 grid grid-cols-1 md:grid-cols-5 gap-2">
                            <input type="text" id="score-name" placeholder="Nama Peserta" class="text-xs p-2.5 border dark:bg-slate-800 rounded-xl">
                            <select id="score-unit" class="text-xs p-2.5 border dark:bg-slate-800 rounded-xl"><option value="BLP">BLP</option><option value="TK AI Ikhlas">TK Al Ikhlas</option><option value="HH">HH</option></select>
                            <input type="number" id="score-tahsin" placeholder="Tahsin (0-100)" class="text-xs p-2.5 border dark:bg-slate-800 rounded-xl">
                            <input type="number" id="score-fiqih" placeholder="Fiqih (0-100)" class="text-xs p-2.5 border dark:bg-slate-800 rounded-xl">
                            <button onclick="addScore()" class="bg-enterprise-accent text-white font-bold text-xs p-2.5 rounded-xl">Simpan</button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-xs">
                                <thead class="bg-slate-50 dark:bg-slate-800">
                                    <tr><th class="p-2.5">Nama</th><th class="p-2.5">Unit</th><th class="p-2.5">Tahsin</th><th class="p-2.5">Fiqih</th><th class="p-2.5">Rata-Rata</th><th class="p-2.5">Aksi</th></tr>
                                </thead>
                                <tbody id="score-table-body" class="divide-y divide-slate-100 dark:divide-slate-800"></tbody>
                            </table>
                        </div>
                    </div>
                `;
                renderScores();
            } else if(appId === 'qibla') {
                container.innerHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-white dark:bg-enterprise-darkCard p-5 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-3 md:col-span-2">
                            <h3 class="text-sm font-bold border-b pb-2">🕌 Jadwal Sholat Setempat (Jakarta)</h3>
                            <div class="grid grid-cols-5 gap-2 text-center text-xs">
                                <div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-2xl border"><p class="text-[9px] font-bold text-slate-400">SUBUH</p><p id="t-subuh" class="font-bold mt-1">--:--</p></div>
                                <div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-2xl border"><p class="text-[9px] font-bold text-slate-400">DHUHUR</p><p id="t-dhuhur" class="font-bold mt-1">--:--</p></div>
                                <div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-2xl border"><p class="text-[9px] font-bold text-slate-400">ASHAR</p><p id="t-ashar" class="font-bold mt-1">--:--</p></div>
                                <div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-2xl border"><p class="text-[9px] font-bold text-slate-400">MAGHRIB</p><p id="t-maghrib" class="font-bold mt-1">--:--</p></div>
                                <div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-2xl border"><p class="text-[9px] font-bold text-slate-400">ISYA</p><p id="t-isya" class="font-bold mt-1">--:--</p></div>
                            </div>
                        </div>
                        <div class="bg-white dark:bg-enterprise-darkCard p-5 rounded-3xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs flex flex-col items-center justify-center space-y-3">
                            <h3 class="text-sm font-bold">🧭 Kompas Qiblat</h3>
                            <div class="relative w-28 h-28 flex items-center justify-center bg-slate-950 rounded-full border-4 border-enterprise-accent shadow-inner">
                                <div id="qibla-needle" class="absolute w-2 h-20 bg-red-500 rounded-full origin-bottom" style="bottom:50%; transform: rotate(0deg);"></div>
                                <div class="w-3 h-3 bg-white rounded-full z-10"></div>
                            </div>
                            <button onclick="initCompass()" class="text-xs bg-enterprise-accent text-white px-4 py-2 rounded-xl font-medium shadow">Aktifkan Sensor</button>
                        </div>
                    </div>
                `;
                getPrayer();
            }
        }

        async function initQuranList() {
            const sel = document.getElementById('quran-surah-select');
            if(!sel || sel.options.length > 0) return;
            try {
                const res = await fetch('https://equran.id/api/v2/surat');
                const d = await res.json();
                d.data.forEach(s => {
                    const opt = document.createElement('option');
                    opt.value = s.nomor;
                    opt.innerText = `${s.nomor}. ${s.namaLatin} (${s.arti}) - ${s.jumlahAyat} Ayat`;
                    sel.appendChild(opt);
                });
                loadSurah(1);
            } catch(e) {}
        }

        async function loadSurah(num) {
            const container = document.getElementById('quran-container');
            if(!container) return;
            container.innerHTML = `<div class="p-6 text-center text-slate-400">Memuat ayat...</div>`;
            try {
                const res = await fetch(`https://equran.id/api/v2/surat/${num}`);
                const d = await res.json();
                const surah = d.data;
                let html = `<div class="bg-slate-50 dark:bg-slate-800 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 mb-4 text-center">
                    <h3 class="font-bold text-base text-slate-900 dark:text-yellow-300">${surah.namaLatin} (${surah.nama})</h3>
                    <p class="text-xs text-slate-600 dark:text-slate-300">Arti: ${surah.arti} | Tempat Turun: ${surah.tempatTurun} | Jumlah Ayat: ${surah.jumlahAyat}</p>
                </div>`;
                surah.ayat.forEach(a => {
                    html += `<div class="p-5 bg-white dark:bg-enterprise-darkCard border border-enterprise-borderLight dark:border-enterprise-borderDark rounded-2xl space-y-3 shadow-2xs">
                        <div class="flex justify-between items-center text-xs text-enterprise-accent dark:text-blue-400 font-bold border-b border-enterprise-borderLight dark:border-enterprise-borderDark pb-1.5">
                            <span class="bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded">Ayat ${a.nomorAyat}</span><span>Juz ${a.juz}</span>
                        </div>
                        <p class="arabic-text text-right text-3xl font-bold text-slate-900 dark:text-white py-3 px-2">${a.teksArab}</p>
                        <p class="text-xs italic text-blue-700 dark:text-blue-300 font-medium">${a.teksLatin}</p>
                        <p class="text-xs text-slate-700 dark:text-slate-200 leading-relaxed pt-1 border-t border-slate-100 dark:border-slate-800"><strong>Artinya:</strong> ${a.teksIndonesia}</p>
                    </div>`;
                });
                container.innerHTML = html;
            } catch(e) {
                container.innerHTML = `<div class="p-4 text-center text-red-500">Gagal memuat ayat Al-Quran. Periksa koneksi internet Anda.</div>`;
            }
        }

        const arbainList = [
            { no: 1, title: "Amalan Tergantung Niat", arab: "إِنَّمَا الْأَعْمَالُ بِالنَّيَّاتِ، وَإِنَّمَا لِكُلِّ امْرِئٍ مَا نَوَى...", translation: "Sesungguhnya setiap amal perbuatan tergantung niatnya..." },
            { no: 2, title: "Hadits Jibril tentang Islam, Iman, dan Ihsan", arab: "بَيْنَمَا نَحْنُ جُلُوسٌ عِنْدَ رَسُولِ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ ذَاتَ يَوْمٍ...", translation: "Ketika kami sedang duduk di sisi Rasulullah SAW pada suatu hari..." },
            { no: 3, title: "Rukun Islam", arab: "بُنِيَ الْإِسْلَامُ عَلَى خَمْسٍ: شَهَادَةِ أَنْ لَا إِلَهَ إِلَّا اللَّهُ وَأَنَّ مُحَمَّدًا رَسُولُ اللَّهِ...", translation: "Islam dibangun di atas lima perkara..." },
            { no: 4, title: "Tahapan Penciptaan Manusia", arab: "إِنَّ أَحَدَكُمْ يُجْمَعُ خَلْقُهُ فِي بَطْنِ أُمِّهِ أَرْبَعِينَ يَوْمًا نُطْفَةً...", translation: "Sesungguhnya setiap kalian dikumpulkan penciptaannya di dalam perut ibunya..." },
            { no: 5, title: "Penolakan Terhadap Perkara Baru (Bid'ah)", arab: "مَنْ أَحْدَثَ فِي أَمْرِنَا هَذَا مَا لَيْسَ مِنْهُ فَهُوَ رَدٌّ...", translation: "Barangsiapa membuat suatu perkara baru dalam urusan kami ini yang tidak ada asalnya, maka tertolak." }
        ];

        function initArbainSelect() {
            const sel = document.getElementById('arbain-select');
            if(!sel || sel.options.length > 0) return;
            arbainList.forEach(h => {
                const opt = document.createElement('option');
                opt.value = h.no;
                opt.innerText = `Hadits ke-${h.no}: ${h.title}`;
                sel.appendChild(opt);
            });
            loadArbain(1);
        }

        function loadArbain(no) {
            const h = arbainList.find(x => x.no == no);
            const container = document.getElementById('arbain-container');
            if(!container) return;
            container.innerHTML = `
                <div class="space-y-3">
                    <span class="text-[10px] font-bold bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-slate-200 px-2.5 py-1 rounded-full">Hadits Arbain No. ${h.no}</span>
                    <h3 class="font-bold text-sm text-slate-900 dark:text-white">${h.title}</h3>
                    <p class="arabic-text text-right text-2xl font-bold text-slate-900 dark:text-white py-2">${h.arab}</p>
                    <p class="text-xs text-slate-700 dark:text-slate-200 leading-relaxed"><strong>Terjemahan:</strong> ${h.translation}</p>
                </div>
            `;
        }

        function renderJobdesk() {
            const list = document.getElementById('jobdesk-list');
            if(!list) return;
            list.innerHTML = '';
            let completed = 0;
            stateJobdesk.forEach((item, index) => {
                if(item.status === 'Completed') completed++;
                const card = document.createElement('div');
                card.className = "bg-white dark:bg-enterprise-darkCard p-4 rounded-2xl border border-enterprise-borderLight dark:border-enterprise-borderDark shadow-2xs space-y-3";
                card.innerHTML = `
                    <div class="flex justify-between items-center">
                        <span class="text-[10px] font-bold px-2.5 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">${item.pillar}</span>
                        <select onchange="updateJobStatus(${index}, this.value)" class="text-xs px-2.5 py-1 rounded-xl border dark:bg-slate-800 font-medium">
                            <option value="Pending" ${item.status==='Pending'?'selected':''}>Pending</option>
                            <option value="In Progress" ${item.status==='In Progress'?'selected':''}>In Progress</option>
                            <option value="Completed" ${item.status==='Completed'?'selected':''}>Completed</option>
                        </select>
                    </div>
                    <h3 class="font-bold text-sm text-slate-900 dark:text-white">${item.id}. ${item.title}</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
                        <div><strong>Deliverable:</strong> ${item.deliverable}</div>
                        <div><strong>KPI:</strong> ${item.kpi}</div>
                    </div>
                `;
                list.appendChild(card);
            });
            const percent = Math.round((completed/stateJobdesk.length)*100);
            const pEl = document.getElementById('stat-percent');
            const cEl = document.getElementById('stat-count');
            if(pEl) pEl.innerText = percent + "%";
            if(cEl) cEl.innerText = `${completed} dari ${stateJobdesk.length} Jobdesk Selesai`;
        }
        function updateJobStatus(i, val) { stateJobdesk[i].status = val; localStorage.setItem('batas_jobdesk', JSON.stringify(stateJobdesk)); renderJobdesk(); }

        function renderTeacherAttendanceTable() {
            const tbody = document.getElementById('teacher-attendance-table');
            if(!tbody) return;
            tbody.innerHTML = '';
            if (stateTeacherAttendance.length === 0) {
                tbody.innerHTML = `<tr><td colspan="6" class="p-4 text-center text-slate-400 italic">Belum ada data presensi.</td></tr>`;
                return;
            }
            stateTeacherAttendance.forEach((item, index) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td class="p-2.5 font-bold">${item.name}</td>
                    <td class="p-2.5 text-slate-500">${item.date} (${item.time})</td>
                    <td class="p-2.5"><span class="px-2 py-0.5 text-[10px] font-semibold rounded-full border bg-slate-100 text-slate-700">${item.status}</span></td>
                    <td class="p-2.5">${item.unit}</td>
                    <td class="p-2.5 text-slate-600">${item.note || '-'}</td>
                    <td class="p-2.5 text-center"><button onclick="deleteTeacherAttendance(${index})" class="text-red-500 font-bold">Hapus</button></td>
                `;
                tbody.appendChild(tr);
            });
        }
        function submitTeacherAttendance(e) {
            e.preventDefault();
            const name = document.getElementById('teacher-name').value;
            const status = document.getElementById('teacher-status').value;
            const date = document.getElementById('teacher-date').value;
            const unit = document.getElementById('teacher-unit').value;
            const note = document.getElementById('teacher-note').value;
            const time = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) + ' WIB';

            stateTeacherAttendance.push({ name, status, date, time, unit, note });
            localStorage.setItem('batas_teacher_attendance', JSON.stringify(stateTeacherAttendance));
            document.getElementById('teacher-attendance-form').reset();
            document.getElementById('teacher-date').valueAsDate = new Date();
            renderTeacherAttendanceTable();
            showToast("Presensi berhasil disimpan!");
        }
        function deleteTeacherAttendance(index) {
            stateTeacherAttendance.splice(index, 1);
            localStorage.setItem('batas_teacher_attendance', JSON.stringify(stateTeacherAttendance));
            renderTeacherAttendanceTable();
        }

        function submitJurnal() {
            const tanggal = document.getElementById('jurnal-tanggal').value;
            const unit = document.getElementById('jurnal-unit').value;
            const materi = document.getElementById('jurnal-materi').value;
            const refleksi = document.getElementById('jurnal-refleksi').value;
            if(!materi) { showToast("Materi belum diisi!", "error"); return; }
            stateJurnal.push({ id: Date.now(), tanggal, unit, materi, refleksi });
            localStorage.setItem('batas_jurnal', JSON.stringify(stateJurnal));
            renderJurnalHistory();
            showToast("Jurnal tersimpan!");
        }
        function renderJurnalHistory() {
            const list = document.getElementById('jurnal-history-list');
            if(!list) return;
            list.innerHTML = '';
            stateJurnal.forEach(j => {
                const div = document.createElement('div');
                div.className = "p-3 bg-slate-50 dark:bg-slate-800 rounded-xl text-xs";
                div.innerHTML = `<strong>${j.tanggal} (${j.unit})</strong>: ${j.materi} <br><span class="text-slate-400">Refleksi: ${j.refleksi}</span>`;
                list.appendChild(div);
            });
        }

        function renderScores() {
            const week = document.getElementById('score-week').value;
            const tbody = document.getElementById('score-table-body');
            if(!tbody) return;
            tbody.innerHTML = '';
            stateScores.filter(s => s.week === week).forEach(s => {
                const avg = Math.round((s.tahsin + s.fiqih)/2);
                const tr = document.createElement('tr');
                tr.innerHTML = `<td class="p-2.5 font-bold">${s.name}</td><td class="p-2.5">${s.unit}</td><td class="p-2.5">${s.tahsin}</td><td class="p-2.5">${s.fiqih}</td><td class="p-2.5 font-bold text-enterprise-accent">${avg}</td><td class="p-2.5"><button onclick="deleteScore(${s.id})" class="text-red-500 font-bold">Hapus</button></td>`;
                tbody.appendChild(tr);
            });
        }
        function addScore() {
            const name = document.getElementById('score-name').value;
            const unit = document.getElementById('score-unit').value;
            const tahsin = parseInt(document.getElementById('score-tahsin').value) || 0;
            const fiqih = parseInt(document.getElementById('score-fiqih').value) || 0;
            const week = document.getElementById('score-week').value;
            if(!name) { showToast("Nama wajib diisi!", "error"); return; }
            stateScores.push({ id: Date.now(), name, unit, week, tahsin, fiqih });
            localStorage.setItem('batas_scores', JSON.stringify(stateScores));
            document.getElementById('score-name').value = '';
            renderScores();
            showToast("Nilai tersimpan!");
        }
        function deleteScore(id) {
            stateScores = stateScores.filter(s => s.id !== id);
            localStorage.setItem('batas_scores', JSON.stringify(stateScores));
            renderScores();
        }

        async function getPrayer() {
            try {
                const res = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Jakarta&country=Indonesia&method=11');
                const d = await res.json();
                const t = d.data.timings;
                document.getElementById('t-subuh').innerText = t.Fajr;
                document.getElementById('t-dhuhur').innerText = t.Dhuhr;
                document.getElementById('t-ashar').innerText = t.Asr;
                document.getElementById('t-maghrib').innerText = t.Maghrib;
                document.getElementById('t-isya').innerText = t.Isha;
            } catch(e) {}
        }

        function initCompass() {
            if(window.DeviceOrientationEvent) {
                window.addEventListener('deviceorientation', (e) => {
                    const alpha = e.alpha || 0;
                    const needle = document.getElementById('qibla-needle');
                    if(needle) needle.style.transform = `rotate(${295 - alpha}deg)`;
                });
                showToast("Kompas aktif!");
            } else {
                showToast("Kompas tidak didukung.", "error");
            }
        }
    </script>
</body>
</html>
```eof
