<?php
session_start();

// Database Configuration
$db_host = 'localhost';
$db_name = 'u781889995_sisiswa';
$db_user = 'u781889995_sisiswaku';
$db_pass = 'Sawangankm3';

try {
    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES => false,
    ]);
} catch (PDOException $e) {
    // If database request is AJAX, send JSON error
    if (isset($_GET['action']) || isset($_POST['action'])) {
        header('Content-Type: application/json');
        echo json_encode(['status' => 'error', 'message' => 'Koneksi database gagal. Periksa setting $db_user dan $db_pass di index.php']);
        exit;
    }
    // Render error view on regular load
    $db_error_message = "Gagal terhubung ke MySQL Database ($db_name). Silahkan sesuaikan variabel \$db_user, \$db_pass, dan \$db_name di bagian atas file index.php ini.";
}

if (isset($_REQUEST['action'])) {
    header('Content-Type: application/json');
    $action = $_REQUEST['action'];

    if (!isset($pdo)) {
        echo json_encode(['status' => 'error', 'message' => $db_error_message ?? 'Database Offline']);
        exit;
    }

    try {
        switch ($action) {
            case 'login':
                $username = trim($_POST['username'] ?? '');
                $password = trim($_POST['password'] ?? '');

                $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
                $stmt->execute([$username]);
                $user = $stmt->fetch();

                if ($user && password_verify($password, $user['password'])) {
                    $_SESSION['sisiswa_user'] = [
                        'username' => $user['username'],
                        'role' => $user['role']
                    ];
                    echo json_encode(['status' => 'success', 'user' => $_SESSION['sisiswa_user']]);
                } else {
                    echo json_encode(['status' => 'error', 'message' => 'Username atau kata sandi tidak valid!']);
                }
                exit;

            case 'logout':
                unset($_SESSION['sisiswa_user']);
                session_destroy();
                echo json_encode(['status' => 'success']);
                exit;

            case 'check_session':
                if (isset($_SESSION['sisiswa_user'])) {
                    echo json_encode(['status' => 'success', 'user' => $_SESSION['sisiswa_user']]);
                } else {
                    echo json_encode(['status' => 'unauthenticated']);
                }
                exit;

            case 'change_password':
                if (!isset($_SESSION['sisiswa_user'])) {
                    echo json_encode(['status' => 'error', 'message' => 'Akses ditolak']);
                    exit;
                }
                $new_pass = trim($_POST['password'] ?? '');
                if (strlen($new_pass) < 4) {
                    echo json_encode(['status' => 'error', 'message' => 'Password minimal 4 karakter']);
                    exit;
                }
                $hashed = password_hash($new_pass, PASSWORD_BCRYPT);
                $stmt = $pdo->prepare("UPDATE users SET password = ? WHERE username = ?");
                $stmt->execute([$hashed, $_SESSION['sisiswa_user']['username']]);
                echo json_encode(['status' => 'success', 'message' => 'Kata sandi berhasil diperbarui!']);
                exit;

            case 'get_all_data':
                // Fetch Kelas
                $stmt = $pdo->query("SELECT * FROM kelas ORDER BY nama_kelas ASC");
                $kelasRows = $stmt->fetchAll();
                $kelas = array_column($kelasRows, 'nama_kelas');
                
                $kelasWaliMap = [];
                foreach ($kelasRows as $k) {
                    if (!empty($k['wali_kelas_nama'])) {
                        $kelasWaliMap[$k['nama_kelas']] = $k['wali_kelas_nama'];
                    }
                }

                // Fetch Guru
                $stmt = $pdo->query("SELECT id, nip, nama, jabatan, wali_kelas AS waliKelas, hp FROM guru ORDER BY nama ASC");
                $guru = $stmt->fetchAll();

                // Fetch Siswa
                $stmt = $pdo->query("SELECT id, nis, nisn, nama, jk, nik, kelas FROM siswa ORDER BY nama ASC");
                $siswa = $stmt->fetchAll();

                echo json_encode([
                    'status' => 'success',
                    'kelas' => $kelas,
                    'kelasWaliMap' => $kelasWaliMap,
                    'guru' => $guru,
                    'siswa' => $siswa
                ]);
                exit;

            case 'save_siswa':
                $id = trim($_POST['id'] ?? '');
                $nis = trim($_POST['nis'] ?? '');
                $nisn = trim($_POST['nisn'] ?? '');
                $nama = trim($_POST['nama'] ?? '');
                $jk = trim($_POST['jk'] ?? 'L');
                $nik = trim($_POST['nik'] ?? '');
                $kelas = trim($_POST['kelas'] ?? '');

                if (empty($id)) $id = 's_' . time() . '_' . rand(100, 999);

                $stmt = $pdo->prepare("INSERT INTO siswa (id, nis, nisn, nama, jk, nik, kelas) 
                    VALUES (?, ?, ?, ?, ?, ?, ?) 
                    ON DUPLICATE KEY UPDATE nis=VALUES(nis), nisn=VALUES(nisn), nama=VALUES(nama), jk=VALUES(jk), nik=VALUES(nik), kelas=VALUES(kelas)");
                $stmt->execute([$id, $nis, $nisn, $nama, $jk, $nik, $kelas]);

                echo json_encode(['status' => 'success', 'id' => $id]);
                exit;

            case 'delete_siswa':
                $ids = json_decode($_POST['ids'] ?? '[]', true);
                if (is_array($ids) && count($ids) > 0) {
                    $in  = str_repeat('?,', count($ids) - 1) . '?';
                    $stmt = $pdo->prepare("DELETE FROM siswa WHERE id IN ($in)");
                    $stmt->execute($ids);
                }
                echo json_encode(['status' => 'success']);
                exit;

            case 'bulk_kenaikan':
                $ids = json_decode($_POST['ids'] ?? '[]', true);
                $targetKelas = trim($_POST['target_kelas'] ?? '');
                if (is_array($ids) && count($ids) > 0 && !empty($targetKelas)) {
                    $in  = str_repeat('?,', count($ids) - 1) . '?';
                    $params = array_merge([$targetKelas], $ids);
                    $stmt = $pdo->prepare("UPDATE siswa SET kelas = ? WHERE id IN ($in)");
                    $stmt->execute($params);
                }
                echo json_encode(['status' => 'success']);
                exit;

            case 'save_guru':
                $id = trim($_POST['id'] ?? '');
                $nip = trim($_POST['nip'] ?? '');
                $nama = trim($_POST['nama'] ?? '');
                $jabatan = trim($_POST['jabatan'] ?? 'Guru Mapel');
                $waliKelas = trim($_POST['wali_kelas'] ?? '');
                $hp = trim($_POST['hp'] ?? '');

                if (empty($id)) $id = 'g_' . time() . '_' . rand(100, 999);

                $stmt = $pdo->prepare("INSERT INTO guru (id, nip, nama, jabatan, wali_kelas, hp) 
                    VALUES (?, ?, ?, ?, ?, ?) 
                    ON DUPLICATE KEY UPDATE nip=VALUES(nip), nama=VALUES(nama), jabatan=VALUES(jabatan), wali_kelas=VALUES(wali_kelas), hp=VALUES(hp)");
                $stmt->execute([$id, $nip, $nama, $jabatan, $waliKelas, $hp]);

                if (!empty($waliKelas)) {
                    $stmtWali = $pdo->prepare("UPDATE kelas SET wali_kelas_nama = ? WHERE nama_kelas = ?");
                    $stmtWali->execute([$nama, $waliKelas]);
                }

                echo json_encode(['status' => 'success', 'id' => $id]);
                exit;

            case 'delete_guru':
                $id = trim($_POST['id'] ?? '');
                if (!empty($id)) {
                    $stmt = $pdo->prepare("DELETE FROM guru WHERE id = ?");
                    $stmt->execute([$id]);
                }
                echo json_encode(['status' => 'success']);
                exit;

            case 'save_kelas':
                $namaKelas = trim($_POST['nama_kelas'] ?? '');
                $waliKelasNama = trim($_POST['wali_kelas_nama'] ?? '');

                if (!empty($namaKelas)) {
                    $stmt = $pdo->prepare("INSERT INTO kelas (nama_kelas, wali_kelas_nama) VALUES (?, ?) 
                        ON DUPLICATE KEY UPDATE wali_kelas_nama = VALUES(wali_kelas_nama)");
                    $stmt->execute([$namaKelas, $waliKelasNama]);
                }
                echo json_encode(['status' => 'success']);
                exit;

            case 'delete_kelas':
                $namaKelas = trim($_POST['nama_kelas'] ?? '');
                if (!empty($namaKelas)) {
                    $stmt = $pdo->prepare("DELETE FROM kelas WHERE nama_kelas = ?");
                    $stmt->execute([$namaKelas]);
                }
                echo json_encode(['status' => 'success']);
                exit;

            case 'import_siswa_batch':
                $batch = json_decode($_POST['batch'] ?? '[]', true);
                if (is_array($batch) && count($batch) > 0) {
                    $pdo->beginTransaction();
                    $stmtClass = $pdo->prepare("INSERT IGNORE INTO kelas (nama_kelas) VALUES (?)");
                    $stmtSiswa = $pdo->prepare("INSERT INTO siswa (id, nis, nisn, nama, jk, nik, kelas) VALUES (?, ?, ?, ?, ?, ?, ?)
                        ON DUPLICATE KEY UPDATE nis=VALUES(nis), nisn=VALUES(nisn), nama=VALUES(nama), jk=VALUES(jk), nik=VALUES(nik), kelas=VALUES(kelas)");

                    foreach ($batch as $s) {
                        if (!empty($s['kelas'])) {
                            $stmtClass->execute([$s['kelas']]);
                        }
                        $stmtSiswa->execute([
                            $s['id'], $s['nis'], $s['nisn'], $s['nama'], $s['jk'], $s['nik'] ?? '', $s['kelas']
                        ]);
                    }
                    $pdo->commit();
                }
                echo json_encode(['status' => 'success']);
                exit;

            case 'import_guru_batch':
                $batch = json_decode($_POST['batch'] ?? '[]', true);
                if (is_array($batch) && count($batch) > 0) {
                    $pdo->beginTransaction();
                    $stmtGuru = $pdo->prepare("INSERT INTO guru (id, nip, nama, jabatan, wali_kelas, hp) VALUES (?, ?, ?, ?, ?, ?)
                        ON DUPLICATE KEY UPDATE nip=VALUES(nip), nama=VALUES(nama), jabatan=VALUES(jabatan), wali_kelas=VALUES(wali_kelas), hp=VALUES(hp)");
                    $stmtClassWali = $pdo->prepare("UPDATE kelas SET wali_kelas_nama = ? WHERE nama_kelas = ?");

                    foreach ($batch as $g) {
                        $stmtGuru->execute([
                            $g['id'], $g['nip'] ?? '', $g['nama'], $g['jabatan'] ?? 'Guru Mapel', $g['waliKelas'] ?? '', $g['hp'] ?? ''
                        ]);
                        if (!empty($g['waliKelas'])) {
                            $stmtClassWali->execute([$g['nama'], $g['waliKelas']]);
                        }
                    }
                    $pdo->commit();
                }
                echo json_encode(['status' => 'success']);
                exit;

            default:
                echo json_encode(['status' => 'error', 'message' => 'Action tidak dikenali']);
                exit;
        }
    } catch (Exception $e) {
        echo json_encode(['status' => 'error', 'message' => $e->getMessage()]);
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SiSiswa - Database & Penilaian Siswa Realtime (PHP Server)</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- SheetJS (XLSX Import/Export) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            color: #1f2937;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Glassmorphism & UI Accents */
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(229, 231, 235, 0.8);
        }

        /* Tighter Print Margins for Higher Kop Surat */
        @media print {
            body {
                background: white !important;
                color: black !important;
                font-size: 11pt;
            }
            .no-print {
                display: none !important;
            }
            .print-area {
                display: block !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
                background: white !important;
            }
            .page-a4-portrait {
                width: 210mm;
                min-height: 297mm;
                padding: 6mm 12mm 12mm 12mm;
                margin: 0 auto;
                background: white;
                box-sizing: border-box;
                page-break-after: always;
            }
            .page-a4-landscape {
                width: 297mm;
                min-height: 210mm;
                padding: 5mm 10mm 10mm 10mm;
                margin: 0 auto;
                background: white;
                box-sizing: border-box;
                page-break-after: always;
            }
            @page {
                size: A4 portrait;
                margin: 0;
            }
            @page landscape {
                size: A4 landscape;
                margin: 0;
            }
            table {
                border-collapse: collapse !important;
                width: 100% !important;
            }
            th, td {
                border: 1px solid #000 !important;
                padding: 4px 6px !important;
                font-size: 9pt !important;
            }
            th {
                background-color: #f2f2f2 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

        /* Screen Preview for A4 Sheets */
        .a4-preview-portrait {
            width: 210mm;
            min-height: 297mm;
            background: white;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
            padding: 6mm 12mm 12mm 12mm;
            box-sizing: border-box;
        }

        .a4-preview-landscape {
            width: 297mm;
            min-height: 210mm;
            background: white;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
            padding: 5mm 10mm 10mm 10mm;
            box-sizing: border-box;
            overflow-x: auto;
        }

        .grid-box-table {
            border-collapse: collapse;
            width: 100%;
        }

        .grid-box-table th, .grid-box-table td {
            border: 1px solid #1e293b;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">

    <!-- Toast Notification Container -->
    <div id="toast-container" class="fixed top-5 right-5 z-50 flex flex-col gap-2 max-w-md w-full pointer-events-none"></div>

    <!-- Modal Background Backdrop -->
    <div id="modal-backdrop" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-40 hidden transition-opacity duration-200"></div>

    <!-- VIEW 1: LOGIN PAGE -->
    <div id="view-login" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-900 via-slate-900 to-blue-950 p-4">
        <div class="glass-card w-full max-w-md p-8 rounded-2xl shadow-2xl text-slate-800 border border-white/20 relative overflow-hidden">
            <div class="absolute -top-12 -right-12 w-32 h-32 bg-indigo-500/20 rounded-full blur-2xl"></div>
            <div class="absolute -bottom-12 -left-12 w-32 h-32 bg-blue-500/20 rounded-full blur-2xl"></div>
            
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-600 text-white mb-3 shadow-lg shadow-indigo-500/30">
                    <i class="fa-solid fa-graduation-cap text-3xl"></i>
                </div>
                <h1 class="text-2xl font-bold text-slate-900 tracking-tight">SiSiswa PHP Server</h1>
                <p class="text-sm text-slate-500 mt-1">MI Al Khoiriyah Sawangan</p>
            </div>

            <?php if (isset($db_error_message)): ?>
                <div class="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-xl text-amber-900 text-xs leading-relaxed">
                    <i class="fa-solid fa-triangle-exclamation text-amber-600 mr-1"></i>
                    <strong>Peringatan Database:</strong> <?php echo htmlspecialchars($db_error_message); ?>
                </div>
            <?php endif; ?>

            <form id="form-login" onsubmit="handleLogin(event)" class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-1">Username / NIP</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <i class="fa-solid fa-user"></i>
                        </span>
                        <input type="text" id="login-username" required value="admin" 
                            class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:bg-white outline-none transition"
                            placeholder="Masukkan username">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-1">Kata Sandi</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <i class="fa-solid fa-lock"></i>
                        </span>
                        <input type="password" id="login-password" required value="admin123" 
                            class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:bg-white outline-none transition"
                            placeholder="••••••••">
                    </div>
                </div>

                <div class="pt-2">
                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 rounded-xl transition shadow-lg shadow-indigo-600/30 flex items-center justify-center gap-2">
                        <i class="fa-solid fa-right-to-bracket"></i> Masuk ke Sistem
                    </button>
                </div>
            </form>

            <div class="mt-6 pt-6 border-t border-slate-100 text-xs text-slate-500 text-center">
                <p class="font-medium text-slate-600 mb-1">Demo Akun Cepat (Database SQL):</p>
                <div class="flex justify-center gap-2">
                    <button type="button" onclick="fillQuickLogin('admin', 'admin123')" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-2.5 py-1 rounded-lg transition font-medium">Admin: admin</button>
                    <button type="button" onclick="fillQuickLogin('guru', 'guru123')" class="bg-emerald-50 hover:bg-emerald-100 text-emerald-700 px-2.5 py-1 rounded-lg transition font-medium">Guru: guru</button>
                </div>
            </div>
        </div>
    </div>

    <!-- VIEW 2: MAIN DASHBOARD -->
    <div id="view-dashboard" class="hidden flex-1 flex flex-col md:flex-row min-h-screen">
        <!-- Sidebar Navigation -->
        <aside class="no-print w-full md:w-64 bg-slate-900 text-slate-300 flex-shrink-0 flex flex-col justify-between border-r border-slate-800">
            <div>
                <!-- Brand Logo -->
                <div class="p-5 flex items-center gap-3 border-b border-slate-800">
                    <div class="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white font-bold shadow-lg shadow-indigo-500/30">
                        <i class="fa-solid fa-graduation-cap text-xl"></i>
                    </div>
                    <div>
                        <h2 class="text-white font-bold text-base leading-tight">SiSiswa Apps</h2>
                        <span id="sync-status" class="inline-flex items-center gap-1.5 text-[10px] text-emerald-400 font-medium">
                            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> MySQL Connected
                        </span>
                    </div>
                </div>

                <!-- Nav Menu Links -->
                <nav class="p-3 space-y-1">
                    <button onclick="switchTab('siswa')" id="nav-btn-siswa" 
                        class="nav-tab-btn w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition text-white bg-indigo-600/90 shadow-md">
                        <i class="fa-solid fa-users text-lg w-5"></i>
                        <span>Database Siswa</span>
                    </button>

                    <button onclick="switchTab('guru')" id="nav-btn-guru" 
                        class="nav-tab-btn w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition text-slate-400 hover:bg-slate-800 hover:text-white">
                        <i class="fa-solid fa-user-tie text-lg w-5"></i>
                        <span>Guru & Staff</span>
                    </button>

                    <button onclick="switchTab('kelas')" id="nav-btn-kelas" 
                        class="nav-tab-btn w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition text-slate-400 hover:bg-slate-800 hover:text-white">
                        <i class="fa-solid fa-chalkboard-user text-lg w-5"></i>
                        <span>Kelola Kelas</span>
                    </button>

                    <button onclick="switchTab('absen')" id="nav-btn-absen" 
                        class="nav-tab-btn w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition text-slate-400 hover:bg-slate-800 hover:text-white">
                        <i class="fa-solid fa-clipboard-user text-lg w-5"></i>
                        <span>Cetak Absensi (A4)</span>
                    </button>

                    <button onclick="switchTab('nilai')" id="nav-btn-nilai" 
                        class="nav-tab-btn w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition text-slate-400 hover:bg-slate-800 hover:text-white">
                        <i class="fa-solid fa-file-signature text-lg w-5"></i>
                        <span>Lembar Penilaian (A4)</span>
                    </button>

                    <button onclick="switchTab('datasiswa')" id="nav-btn-datasiswa" 
                        class="nav-tab-btn w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition text-slate-400 hover:bg-slate-800 hover:text-white">
                        <i class="fa-solid fa-file-lines text-lg w-5"></i>
                        <span>Cetak Data Siswa (A4)</span>
                    </button>
                </nav>
            </div>

            <!-- User Info & Logout -->
            <div class="p-4 border-t border-slate-800 bg-slate-950/50">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-slate-700 flex items-center justify-center text-slate-200 font-semibold text-sm">
                            <i class="fa-solid fa-user-gear"></i>
                        </div>
                        <div class="text-xs">
                            <div id="user-display-name" class="font-semibold text-white">Administrator</div>
                            <div id="user-display-role" class="text-slate-400 capitalize">Operator</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-1">
                        <button onclick="openChangePasswordModal()" title="Ubah Password" class="text-slate-400 hover:text-amber-400 p-2 rounded-lg hover:bg-slate-800 transition">
                            <i class="fa-solid fa-key text-base"></i>
                        </button>
                        <button onclick="handleLogout()" title="Keluar" class="text-slate-400 hover:text-rose-400 p-2 rounded-lg hover:bg-slate-800 transition">
                            <i class="fa-solid fa-power-off text-base"></i>
                        </button>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-slate-100 p-4 md:p-8">

            <!-- TAB 1: DATABASE SISWA & KENAIKAN KELAS -->
            <section id="tab-content-siswa" class="tab-content space-y-6">
                <div class="no-print flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Database Siswa</h1>
                        <p class="text-slate-500 text-sm">Kelola biodata, kenaikan kelas, hapus massal, dan import/export Excel.</p>
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        <button onclick="exportSiswaToExcel()" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2.5 rounded-xl shadow-sm transition flex items-center gap-2">
                            <i class="fa-solid fa-file-export"></i> Export Excel
                        </button>
                        <button onclick="openImportExcelModal()" class="bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium px-4 py-2.5 rounded-xl shadow-sm transition flex items-center gap-2">
                            <i class="fa-solid fa-file-excel"></i> Import Excel
                        </button>
                        <button onclick="downloadExcelTemplate()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 text-sm font-medium px-3 py-2.5 rounded-xl transition flex items-center gap-2" title="Download Format Excel">
                            <i class="fa-solid fa-download"></i> Template
                        </button>
                        <button onclick="openAddSiswaModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium px-4 py-2.5 rounded-xl shadow-md transition flex items-center gap-2">
                            <i class="fa-solid fa-user-plus"></i> Tambah Siswa
                        </button>
                    </div>
                </div>

                <div class="no-print bg-white p-4 rounded-2xl shadow-sm border border-slate-200 flex flex-col md:flex-row gap-3 items-center justify-between">
                    <div class="flex flex-1 flex-col sm:flex-row gap-3 w-full">
                        <div class="relative flex-1">
                            <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-3 text-slate-400 text-sm"></i>
                            <input type="text" id="search-siswa" oninput="renderSiswaTable()" placeholder="Cari Nama, NIS, NISN, NIK..." 
                                class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                        </div>

                        <div class="w-full sm:w-56">
                            <select id="filter-kelas-siswa" onchange="renderSiswaTable()" class="w-full py-2 px-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none">
                                <option value="ALL">Semua Kelas</option>
                            </select>
                        </div>
                    </div>

                    <div id="bulk-action-bar" class="hidden w-full md:w-auto flex items-center justify-between gap-2 bg-indigo-50 border border-indigo-200 px-4 py-2 rounded-xl">
                        <span class="text-xs text-indigo-900 font-semibold mr-2">
                            <span id="selected-count">0</span> Terpilih
                        </span>
                        <button onclick="openBulkKenaikanModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow transition flex items-center gap-1.5">
                            <i class="fa-solid fa-angles-up"></i> Naikkan / Pindah
                        </button>
                        <button onclick="executeBulkDelete()" class="bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow transition flex items-center gap-1.5">
                            <i class="fa-solid fa-trash-can"></i> Hapus Terpilih
                        </button>
                    </div>
                </div>

                <!-- Gender Summary Counter -->
                <div id="siswa-gender-summary" class="hidden no-print flex items-center gap-4 bg-white px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-semibold text-slate-700"></div>

                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left text-sm text-slate-600">
                            <thead class="bg-slate-50 text-slate-700 text-xs uppercase font-semibold border-b border-slate-200">
                                <tr>
                                    <th class="p-4 w-10 text-center no-print">
                                        <input type="checkbox" id="check-all-siswa" onchange="toggleSelectAllSiswa(this)" class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
                                    </th>
                                    <th class="p-4">No</th>
                                    <th class="p-4">NIS</th>
                                    <th class="p-4">NISN</th>
                                    <th class="p-4">Nama Lengkap</th>
                                    <th class="p-4">JK</th>
                                    <th class="p-4">NIK</th>
                                    <th class="p-4">Kelas</th>
                                    <th class="p-4 text-center no-print">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-siswa" class="divide-y divide-slate-100"></tbody>
                        </table>
                    </div>
                    <div id="empty-siswa-msg" class="hidden p-8 text-center text-slate-400">
                        <i class="fa-regular fa-folder-open text-4xl mb-2"></i>
                        <p>Tidak ada data siswa ditemukan.</p>
                    </div>
                </div>
            </section>

            <!-- TAB 2: DATABASE GURU & STAFF -->
            <section id="tab-content-guru" class="tab-content hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Database Guru & Staff</h1>
                        <p class="text-slate-500 text-sm">Kelola data pendidik, wali kelas, guru mata pelajaran, dan staff TU.</p>
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        <button onclick="exportGuruToExcel()" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2.5 rounded-xl shadow-sm transition flex items-center gap-2">
                            <i class="fa-solid fa-file-export"></i> Export Excel
                        </button>
                        <button onclick="openImportGuruModal()" class="bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium px-4 py-2.5 rounded-xl shadow-sm transition flex items-center gap-2">
                            <i class="fa-solid fa-file-excel"></i> Import Excel
                        </button>
                        <button onclick="downloadGuruTemplate()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 text-sm font-medium px-3 py-2.5 rounded-xl transition flex items-center gap-2" title="Download Format Excel">
                            <i class="fa-solid fa-download"></i> Template
                        </button>
                        <button onclick="openAddGuruModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium px-4 py-2.5 rounded-xl shadow-md transition flex items-center gap-2">
                            <i class="fa-solid fa-user-plus"></i> Tambah Guru / Staff
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left text-sm text-slate-600">
                            <thead class="bg-slate-50 text-slate-700 text-xs uppercase font-semibold border-b border-slate-200">
                                <tr>
                                    <th class="p-4">No</th>
                                    <th class="p-4">NIP / NUPTK</th>
                                    <th class="p-4">Nama Lengkap & Gelar</th>
                                    <th class="p-4">Jabatan / Peran</th>
                                    <th class="p-4">Wali Kelas</th>
                                    <th class="p-4">No HP / WhatsApp</th>
                                    <th class="p-4 text-center no-print">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-guru" class="divide-y divide-slate-100"></tbody>
                        </table>
                    </div>
                </div>
            </section>

            <!-- TAB 3: MANAJEMEN KELAS -->
            <section id="tab-content-kelas" class="tab-content hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Manajemen Kelas</h1>
                        <p class="text-slate-500 text-sm">Buat kelas dan tetapkan Wali Kelas penanggung jawab.</p>
                    </div>
                    <button onclick="openAddKelasModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium px-4 py-2.5 rounded-xl shadow-md transition flex items-center gap-2">
                        <i class="fa-solid fa-plus"></i> Tambah Kelas Baru
                    </button>
                </div>

                <div id="grid-kelas" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"></div>
            </section>

            <!-- TAB 4: CETAK ABSENSI (A4) -->
            <section id="tab-content-absen" class="tab-content hidden space-y-6">
                <div class="no-print bg-white p-5 rounded-2xl shadow-sm border border-slate-200 space-y-4">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <h1 class="text-xl font-bold text-slate-900">Cetak Presensi / Absensi Siswa (A4 Landscape)</h1>
                            <p class="text-xs text-slate-500">Kop rapat & presisi untuk pencetakan dokumen A4.</p>
                        </div>
                        <button onclick="triggerPrint('absen')" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-5 py-2.5 rounded-xl shadow-md transition flex items-center gap-2">
                            <i class="fa-solid fa-print"></i> Cetak Lembar Absen A4
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-3 pt-2 border-t border-slate-100">
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Pilih Kelas</label>
                            <select id="absen-select-kelas" onchange="renderAbsenPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium"></select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Bulan & Tahun</label>
                            <input type="month" id="absen-month-picker" onchange="renderAbsenPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Sekolah</label>
                            <input type="text" id="absen-input-sekolah" value="MI AL KHOIRIYAH SAWANGAN" oninput="renderAbsenPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Wali Kelas</label>
                            <input type="text" id="absen-input-walikelas" value="Budi Santoso, S.Pd." oninput="renderAbsenPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium">
                        </div>
                    </div>
                </div>

                <div class="overflow-x-auto pb-8">
                    <div id="print-absen-target" class="a4-preview-landscape print-area font-sans text-slate-900"></div>
                </div>
            </section>

            <!-- TAB 5: LEMBAR PENILAIAN (A4 PORTRAIT) -->
            <section id="tab-content-nilai" class="tab-content hidden space-y-6">
                <div class="no-print bg-white p-5 rounded-2xl shadow-sm border border-slate-200 space-y-4">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <h1 class="text-xl font-bold text-slate-900">Cetak Lembar Penilaian Kotak (A4 Portrait)</h1>
                            <p class="text-xs text-slate-500">Format kotak kosong A4 presisi siap diisi TULIS TANGAN.</p>
                        </div>
                        <button onclick="triggerPrint('nilai')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-5 py-2.5 rounded-xl shadow-md transition flex items-center gap-2">
                            <i class="fa-solid fa-print"></i> Cetak Lembar Penilaian
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-5 gap-3 pt-2 border-t border-slate-100">
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Pilih Kelas</label>
                            <select id="nilai-select-kelas" onchange="renderNilaiPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium"></select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Mata Pelajaran</label>
                            <input type="text" id="nilai-input-mapel" value="Matematika" oninput="renderNilaiPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Semester / Tahun</label>
                            <input type="text" id="nilai-input-semester" value="Semester I / 2024-2025" oninput="renderNilaiPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Guru Pengampu</label>
                            <input type="text" id="nilai-input-guru" value="Siti Aminah, M.Pd." oninput="renderNilaiPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Kepala Sekolah</label>
                            <input type="text" id="nilai-input-kepsek" value="Drs. H. Ahmad Wijaya, M.M." oninput="renderNilaiPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm">
                        </div>
                    </div>
                </div>

                <div class="overflow-x-auto pb-8">
                    <div id="print-nilai-target" class="a4-preview-portrait print-area font-sans text-slate-900"></div>
                </div>
            </section>

            <!-- TAB 6: CETAK DATA SISWA (A4 PORTRAIT) -->
            <section id="tab-content-datasiswa" class="tab-content hidden space-y-6">
                <div class="no-print bg-white p-5 rounded-2xl shadow-sm border border-slate-200 space-y-4">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <h1 class="text-xl font-bold text-slate-900">Cetak Lembar Data Siswa (A4 Portrait)</h1>
                            <p class="text-xs text-slate-500">Biodata ringkas (NO, NIS, NISN, NAMA, GENDER, KETERANGAN).</p>
                        </div>
                        <button onclick="triggerPrint('datasiswa')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-5 py-2.5 rounded-xl shadow-md transition flex items-center gap-2">
                            <i class="fa-solid fa-print"></i> Cetak Lembar Data Siswa
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-3 pt-2 border-t border-slate-100">
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Pilih Kelas</label>
                            <select id="datasiswa-select-kelas" onchange="renderDataSiswaPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium"></select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Sekolah</label>
                            <input type="text" id="datasiswa-input-sekolah" value="MI AL KHOIRIYAH SAWANGAN" oninput="renderDataSiswaPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Tahun Ajaran</label>
                            <input type="text" id="datasiswa-input-ta" value="2024/2025" oninput="renderDataSiswaPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Wali Kelas</label>
                            <input type="text" id="datasiswa-input-walikelas" value="Budi Santoso, S.Pd." oninput="renderDataSiswaPreview()" class="w-full p-2 bg-slate-50 border border-slate-200 rounded-xl text-sm">
                        </div>
                    </div>
                </div>

                <div class="overflow-x-auto pb-8">
                    <div id="print-datasiswa-target" class="a4-preview-portrait print-area font-sans text-slate-900"></div>
                </div>
            </section>

        </main>
    </div>

    <!-- Modal 1: Tambah / Edit Siswa -->
    <div id="modal-siswa" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden border border-slate-200">
            <div class="px-6 py-4 bg-slate-900 text-white flex items-center justify-between">
                <h3 id="modal-siswa-title" class="font-bold text-base">Tambah Data Siswa</h3>
                <button onclick="closeModal('modal-siswa')" class="text-slate-400 hover:text-white p-1">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            <form id="form-siswa" onsubmit="saveSiswa(event)" class="p-6 space-y-4">
                <input type="hidden" id="siswa-id">

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">NIS *</label>
                        <input type="text" id="siswa-nis" required class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">NISN *</label>
                        <input type="text" id="siswa-nisn" required class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Lengkap Siswa *</label>
                    <input type="text" id="siswa-nama" required class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Jenis Kelamin *</label>
                        <select id="siswa-jk" required class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="L">Laki-Laki (L)</option>
                            <option value="P">Perempuan (P)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Kelas *</label>
                        <select id="siswa-kelas" required class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none"></select>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">NIK (Nomor Induk Kependudukan)</label>
                    <input type="text" id="siswa-nik" placeholder="320..." class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
                    <button type="button" onclick="closeModal('modal-siswa')" class="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 transition">Batal</button>
                    <button type="submit" class="px-5 py-2 rounded-xl text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white shadow-md transition">Simpan Data</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal 2: Bulk Kenaikan Kelas -->
    <div id="modal-bulk" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-slate-200">
            <div class="px-6 py-4 bg-indigo-900 text-white flex items-center justify-between">
                <h3 class="font-bold text-base flex items-center gap-2">
                    <i class="fa-solid fa-angles-up text-amber-400"></i> Kenaikan / Pindah Kelas
                </h3>
                <button onclick="closeModal('modal-bulk')" class="text-slate-400 hover:text-white p-1">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            <div class="p-6 space-y-4">
                <div class="p-3 bg-amber-50 border border-amber-200 rounded-xl text-amber-900 text-xs leading-relaxed">
                    Anda telah memilih <span id="bulk-modal-count" class="font-bold text-amber-950">0</span> siswa. Silahkan pilih kelas tujuan untuk memindahkan semua siswa terpilih.
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Pilih Kelas Tujuan *</label>
                    <select id="bulk-target-kelas" class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm font-medium focus:ring-2 focus:ring-indigo-500 outline-none"></select>
                </div>

                <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
                    <button type="button" onclick="closeModal('modal-bulk')" class="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 transition">Batal</button>
                    <button onclick="executeBulkKenaikan()" class="px-5 py-2 rounded-xl text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white shadow-md transition">Proses Kenaikan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 3: Import Siswa Excel -->
    <div id="modal-import" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-slate-200">
            <div class="px-6 py-4 bg-emerald-800 text-white flex items-center justify-between">
                <h3 class="font-bold text-base flex items-center gap-2">
                    <i class="fa-solid fa-file-excel"></i> Import Siswa dari Excel / CSV
                </h3>
                <button onclick="closeModal('modal-import')" class="text-slate-400 hover:text-white p-1">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            <div class="p-6 space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Default Target Kelas (jika di Excel kosong)</label>
                    <select id="import-target-kelas" class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm font-medium"></select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Pilih File Excel (.xlsx, .xls, .csv)</label>
                    <input type="file" id="file-import-excel" accept=".xlsx, .xls, .csv" 
                        class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                </div>

                <div class="text-[11px] text-slate-500 bg-slate-50 p-3 rounded-xl border border-slate-200">
                    <p class="font-semibold text-slate-700 mb-1">Format Kolom Excel yang Dibaca:</p>
                    <p>Kolom A: <strong>NIS</strong> | Kolom B: <strong>NISN</strong> | Kolom C: <strong>NAMA</strong> | Kolom D: <strong>JK</strong> (L/P) | Kolom E: <strong>NIK</strong> | Kolom F: <strong>KELAS</strong></p>
                </div>

                <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
                    <button type="button" onclick="closeModal('modal-import')" class="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 transition">Batal</button>
                    <button onclick="processExcelImport()" class="px-5 py-2 rounded-xl text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-white shadow-md transition">Import Data</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 4: Tambah / Edit Guru -->
    <div id="modal-guru" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-slate-200">
            <div class="px-6 py-4 bg-slate-900 text-white flex items-center justify-between">
                <h3 id="modal-guru-title" class="font-bold text-base">Tambah Guru / Staff</h3>
                <button onclick="closeModal('modal-guru')" class="text-slate-400 hover:text-white p-1">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            <form id="form-guru" onsubmit="saveGuru(event)" class="p-6 space-y-4">
                <input type="hidden" id="guru-id">

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">NIP / NUPTK</label>
                    <input type="text" id="guru-nip" placeholder="1985..." class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Lengkap & Gelar *</label>
                    <input type="text" id="guru-nama" required placeholder="Budi Santoso, S.Pd." class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Jabatan / Peran *</label>
                        <select id="guru-jabatan" required class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="Wali Kelas">Wali Kelas</option>
                            <option value="Guru Mapel">Guru Mapel</option>
                            <option value="Kepala Sekolah">Kepala Sekolah</option>
                            <option value="Staff TU">Staff TU</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Wali Kelas (Opsional)</label>
                        <select id="guru-walikelas" class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="">-- Bukan Wali Kelas --</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">No HP / WhatsApp</label>
                    <input type="text" id="guru-hp" placeholder="081234567890" class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
                    <button type="button" onclick="closeModal('modal-guru')" class="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 transition">Batal</button>
                    <button type="submit" class="px-5 py-2 rounded-xl text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white shadow-md transition">Simpan Data</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal 5: Tambah / Edit Kelas -->
    <div id="modal-kelas" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-slate-200">
            <div class="px-6 py-4 bg-slate-900 text-white flex items-center justify-between">
                <h3 class="font-bold text-base">Kelola Kelas & Wali Kelas</h3>
                <button onclick="closeModal('modal-kelas')" class="text-slate-400 hover:text-white p-1">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            <form id="form-kelas" onsubmit="saveKelas(event)" class="p-6 space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Nama Kelas *</label>
                    <input type="text" id="input-nama-kelas" required placeholder="Contoh: Kelas 1A, Kelas 6B" 
                        class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Tugaskan Wali Kelas</label>
                    <select id="input-wali-kelas" class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm font-medium focus:ring-2 focus:ring-indigo-500 outline-none">
                        <option value="">-- Belum Ada Wali Kelas --</option>
                    </select>
                </div>

                <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
                    <button type="button" onclick="closeModal('modal-kelas')" class="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 transition">Batal</button>
                    <button type="submit" class="px-5 py-2 rounded-xl text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white shadow-md transition">Simpan Kelas</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal 6: Import Guru Excel -->
    <div id="modal-import-guru" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-slate-200">
            <div class="px-6 py-4 bg-emerald-800 text-white flex items-center justify-between">
                <h3 class="font-bold text-base flex items-center gap-2">
                    <i class="fa-solid fa-file-excel"></i> Import Guru & Staff dari Excel
                </h3>
                <button onclick="closeModal('modal-import-guru')" class="text-slate-400 hover:text-white p-1">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            <div class="p-6 space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Pilih File Excel (.xlsx, .xls, .csv)</label>
                    <input type="file" id="file-import-guru-excel" accept=".xlsx, .xls, .csv" 
                        class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                </div>

                <div class="text-[11px] text-slate-500 bg-slate-50 p-3 rounded-xl border border-slate-200">
                    <p class="font-semibold text-slate-700 mb-1">Format Kolom Excel yang Dibaca:</p>
                    <p>Kolom A: <strong>NIP/NUPTK</strong> | Kolom B: <strong>NAMA LENGKAP</strong> | Kolom C: <strong>JABATAN/PERAN</strong> | Kolom D: <strong>WALI KELAS</strong> | Kolom E: <strong>NO HP</strong></p>
                </div>

                <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
                    <button type="button" onclick="closeModal('modal-import-guru')" class="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 transition">Batal</button>
                    <button onclick="processGuruExcelImport()" class="px-5 py-2 rounded-xl text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-white shadow-md transition">Import Data Guru</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 7: Ubah Password -->
    <div id="modal-password" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-slate-200">
            <div class="px-6 py-4 bg-slate-900 text-white flex items-center justify-between">
                <h3 class="font-bold text-base flex items-center gap-2">
                    <i class="fa-solid fa-key text-amber-400"></i> Ubah Kata Sandi Akun
                </h3>
                <button onclick="closeModal('modal-password')" class="text-slate-400 hover:text-white p-1">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            <form id="form-password" onsubmit="saveNewPassword(event)" class="p-6 space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Kata Sandi Baru *</label>
                    <input type="password" id="input-new-pass" required placeholder="••••••••" 
                        class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Konfirmasi Kata Sandi Baru *</label>
                    <input type="password" id="input-confirm-pass" required placeholder="••••••••" 
                        class="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>

                <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
                    <button type="button" onclick="closeModal('modal-password')" class="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 transition">Batal</button>
                    <button type="submit" class="px-5 py-2 rounded-xl text-sm font-medium bg-amber-600 hover:bg-amber-700 text-white shadow-md transition">Simpan Password Baru</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        /* Global Application State synced with PHP PDO Backend */
        window.AppState = {
            currentUser: null,
            kelas: [],
            kelasWaliMap: {},
            guru: [],
            siswa: [],
            selectedSiswaIds: new Set()
        };

        window.onload = function() {
            checkUserSession();

            const now = new Date();
            const yearMonth = now.toISOString().slice(0, 7);
            const monthPicker = document.getElementById('absen-month-picker');
            if (monthPicker) monthPicker.value = yearMonth;
        };

        /* API Helper function */
        async function apiCall(action, postData = null) {
            try {
                let url = 'index.php?action=' + action;
                let options = { method: 'GET' };

                if (postData) {
                    options.method = 'POST';
                    if (postData instanceof FormData) {
                        options.body = postData;
                    } else {
                        const formData = new FormData();
                        for (let key in postData) {
                            formData.append(key, postData[key]);
                        }
                        options.body = formData;
                    }
                }

                const res = await fetch(url, options);
                return await res.json();
            } catch (err) {
                console.error("API error:", err);
                return { status: 'error', message: 'Gagal terhubung ke server PHP' };
            }
        }

        async function fetchServerData() {
            const res = await apiCall('get_all_data');
            if (res.status === 'success') {
                window.AppState.kelas = res.kelas || [];
                window.AppState.kelasWaliMap = res.kelasWaliMap || {};
                window.AppState.guru = res.guru || [];
                window.AppState.siswa = res.siswa || [];
                renderAllViews();
            } else if (res.message) {
                showToast(res.message, 'error');
            }
        }

        async function checkUserSession() {
            const res = await apiCall('check_session');
            if (res.status === 'success') {
                window.AppState.currentUser = res.user;
                document.getElementById('user-display-name').textContent = res.user.username;
                document.getElementById('user-display-role').textContent = res.user.role;
                document.getElementById('view-login').classList.add('hidden');
                document.getElementById('view-dashboard').classList.remove('hidden');
                fetchServerData();
            } else {
                document.getElementById('view-login').classList.remove('hidden');
                document.getElementById('view-dashboard').classList.add('hidden');
            }
        }

        function showToast(message, type = 'success') {
            const container = document.getElementById('toast-container');
            if (!container) return;

            const toast = document.createElement('div');
            const bgClass = type === 'success' ? 'bg-emerald-600' : type === 'error' ? 'bg-rose-600' : 'bg-indigo-600';
            const icon = type === 'success' ? 'fa-circle-check' : type === 'error' ? 'fa-circle-xmark' : 'fa-circle-info';

            toast.className = `${bgClass} text-white px-4 py-3 rounded-xl shadow-xl flex items-center justify-between gap-3 transform transition-all duration-300 translate-y-[-10px] opacity-0 pointer-events-auto`;
            toast.innerHTML = `
                <div class="flex items-center gap-2 text-sm font-medium">
                    <i class="fa-solid ${icon} text-base"></i>
                    <span>${message}</span>
                </div>
                <button onclick="this.parentElement.remove()" class="text-white/70 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
            `;

            container.appendChild(toast);
            setTimeout(() => toast.classList.remove('translate-y-[-10px]', 'opacity-0'), 10);
            setTimeout(() => {
                if (toast.parentElement) {
                    toast.classList.add('opacity-0');
                    setTimeout(() => toast.remove(), 300);
                }
            }, 3500);
        }

        function fillQuickLogin(user, pass) {
            document.getElementById('login-username').value = user;
            document.getElementById('login-password').value = pass;
        }

        async function handleLogin(e) {
            e.preventDefault();
            const u = document.getElementById('login-username').value.trim();
            const p = document.getElementById('login-password').value.trim();

            const res = await apiCall('login', { username: u, password: p });

            if (res.status === 'success') {
                window.AppState.currentUser = res.user;
                document.getElementById('user-display-name').textContent = res.user.username;
                document.getElementById('user-display-role').textContent = res.user.role;

                document.getElementById('view-login').classList.add('hidden');
                document.getElementById('view-dashboard').classList.remove('hidden');

                showToast(`Selamat datang, ${res.user.username}!`, 'success');
                fetchServerData();
            } else {
                showToast(res.message || 'Gagal login!', 'error');
            }
        }

        async function handleLogout() {
            await apiCall('logout');
            window.AppState.currentUser = null;
            document.getElementById('view-dashboard').classList.add('hidden');
            document.getElementById('view-login').classList.remove('hidden');
            showToast('Anda telah keluar dari sistem.');
        }

        function openChangePasswordModal() {
            document.getElementById('form-password').reset();
            openModal('modal-password');
        }

        async function saveNewPassword(e) {
            e.preventDefault();
            const p1 = document.getElementById('input-new-pass').value;
            const p2 = document.getElementById('input-confirm-pass').value;

            if (p1 !== p2) {
                showToast('Konfirmasi kata sandi tidak cocok!', 'error');
                return;
            }

            const res = await apiCall('change_password', { password: p1 });
            if (res.status === 'success') {
                showToast('Kata sandi berhasil diperbarui!', 'success');
                closeModal('modal-password');
            } else {
                showToast(res.message || 'Gagal mengubah kata sandi', 'error');
            }
        }

        function switchTab(tabName) {
            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
            document.querySelectorAll('.nav-tab-btn').forEach(btn => {
                btn.classList.remove('bg-indigo-600/90', 'text-white', 'shadow-md');
                btn.classList.add('text-slate-400');
            });

            const activeTab = document.getElementById(`tab-content-${tabName}`);
            const activeNav = document.getElementById(`nav-btn-${tabName}`);

            if (activeTab && activeNav) {
                activeTab.classList.remove('hidden');
                activeNav.classList.add('bg-indigo-600/90', 'text-white', 'shadow-md');
                activeNav.classList.remove('text-slate-400');
            }

            if (tabName === 'absen') renderAbsenPreview();
            if (tabName === 'nilai') renderNilaiPreview();
            if (tabName === 'datasiswa') renderDataSiswaPreview();
        }

        window.renderAllViews = function() {
            populateClassDropdowns();
            renderSiswaTable();
            renderGuruTable();
            renderKelasGrid();
            renderAbsenPreview();
            renderNilaiPreview();
            renderDataSiswaPreview();
        };

        function populateClassDropdowns() {
            const classes = window.AppState.kelas || [];
            
            const filterSiswa = document.getElementById('filter-kelas-siswa');
            if (filterSiswa) {
                const currentFilterVal = filterSiswa.value;
                filterSiswa.innerHTML = `<option value="ALL">Semua Kelas (${(window.AppState.siswa || []).length} Siswa)</option>` + 
                    classes.map(k => `<option value="${k}">${k}</option>`).join('');
                if (currentFilterVal && Array.from(filterSiswa.options).some(o => o.value === currentFilterVal)) {
                    filterSiswa.value = currentFilterVal;
                }
            }

            const modalSiswaClass = document.getElementById('siswa-kelas');
            if (modalSiswaClass) modalSiswaClass.innerHTML = classes.map(k => `<option value="${k}">${k}</option>`).join('');

            const modalBulkTarget = document.getElementById('bulk-target-kelas');
            if (modalBulkTarget) modalBulkTarget.innerHTML = classes.map(k => `<option value="${k}">${k}</option>`).join('');

            const modalImportTarget = document.getElementById('import-target-kelas');
            if (modalImportTarget) modalImportTarget.innerHTML = classes.map(k => `<option value="${k}">${k}</option>`).join('');

            const modalGuruWali = document.getElementById('guru-walikelas');
            if (modalGuruWali) {
                modalGuruWali.innerHTML = `<option value="">-- Bukan Wali Kelas --</option>` + 
                    classes.map(k => `<option value="${k}">${k}</option>`).join('');
            }

            const modalKelasWali = document.getElementById('input-wali-kelas');
            if (modalKelasWali) {
                const gurus = window.AppState.guru || [];
                modalKelasWali.innerHTML = `<option value="">-- Belum Ada Wali Kelas --</option>` + 
                    gurus.map(g => `<option value="${g.nama}">${g.nama}</option>`).join('');
            }

            const absenSelect = document.getElementById('absen-select-kelas');
            if (absenSelect) {
                const prev = absenSelect.value;
                absenSelect.innerHTML = classes.map(k => `<option value="${k}">${k}</option>`).join('');
                if (prev) absenSelect.value = prev;
            }

            const nilaiSelect = document.getElementById('nilai-select-kelas');
            if (nilaiSelect) {
                const prev = nilaiSelect.value;
                nilaiSelect.innerHTML = classes.map(k => `<option value="${k}">${k}</option>`).join('');
                if (prev) nilaiSelect.value = prev;
            }

            const datasiswaSelect = document.getElementById('datasiswa-select-kelas');
            if (datasiswaSelect) {
                const prev = datasiswaSelect.value;
                datasiswaSelect.innerHTML = classes.map(k => `<option value="${k}">${k}</option>`).join('');
                if (prev) datasiswaSelect.value = prev;
            }
        }

        function renderSiswaTable() {
            const tbody = document.getElementById('tbody-siswa');
            const emptyMsg = document.getElementById('empty-siswa-msg');
            const searchInput = document.getElementById('search-siswa');
            const filterSelect = document.getElementById('filter-kelas-siswa');

            if (!tbody) return;

            const search = searchInput ? searchInput.value.toLowerCase() : '';
            const filterKelas = filterSelect ? filterSelect.value : 'ALL';

            let filtered = (window.AppState.siswa || []).filter(s => {
                const matchSearch = (s.nama || '').toLowerCase().includes(search) || 
                                    (s.nis || '').toLowerCase().includes(search) || 
                                    (s.nisn || '').toLowerCase().includes(search) ||
                                    (s.nik && s.nik.toLowerCase().includes(search));
                const matchKelas = filterKelas === 'ALL' || s.kelas === filterKelas;
                return matchSearch && matchKelas;
            });

            filtered.sort((a, b) => (a.nama || '').localeCompare(b.nama || '', 'id', { sensitivity: 'base' }));

            const countL = filtered.filter(s => s.jk === 'L').length;
            const countP = filtered.filter(s => s.jk === 'P').length;
            const genderSummaryElem = document.getElementById('siswa-gender-summary');
            if (genderSummaryElem) {
                if (filtered.length > 0) {
                    genderSummaryElem.classList.remove('hidden');
                    genderSummaryElem.innerHTML = `
                        <span>Total Siswa Tampil: <strong>${filtered.length}</strong></span>
                        <span class="text-blue-600 bg-blue-50 px-2 py-0.5 rounded-md border border-blue-200">Laki-Laki (L): <strong>${countL}</strong></span>
                        <span class="text-pink-600 bg-pink-50 px-2 py-0.5 rounded-md border border-pink-200">Perempuan (P): <strong>${countP}</strong></span>
                    `;
                } else {
                    genderSummaryElem.classList.add('hidden');
                }
            }

            if (filtered.length === 0) {
                tbody.innerHTML = '';
                if (emptyMsg) emptyMsg.classList.remove('hidden');
                updateBulkBarUI();
                return;
            }

            if (emptyMsg) emptyMsg.classList.add('hidden');

            tbody.innerHTML = filtered.map((s, idx) => {
                const isChecked = window.AppState.selectedSiswaIds.has(s.id) ? 'checked' : '';
                return `
                    <tr class="hover:bg-slate-50 transition">
                        <td class="p-4 text-center no-print">
                            <input type="checkbox" value="${s.id}" ${isChecked} onchange="toggleSelectSiswa('${s.id}', this.checked)" class="siswa-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
                        </td>
                        <td class="p-4 text-slate-400 font-medium">${idx + 1}</td>
                        <td class="p-4 font-mono font-semibold text-slate-800">${s.nis}</td>
                        <td class="p-4 font-mono text-slate-600">${s.nisn}</td>
                        <td class="p-4 font-semibold text-slate-900">${s.nama}</td>
                        <td class="p-4">
                            <span class="px-2 py-0.5 text-xs font-bold rounded-md ${s.jk === 'L' ? 'bg-blue-100 text-blue-700' : 'bg-pink-100 text-pink-700'}">
                                ${s.jk}
                            </span>
                        </td>
                        <td class="p-4 font-mono text-xs text-slate-500">${s.nik || '-'}</td>
                        <td class="p-4">
                            <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200">
                                ${s.kelas}
                            </span>
                        </td>
                        <td class="p-4 text-center no-print">
                            <div class="flex items-center justify-center gap-1">
                                <button onclick="openEditSiswaModal('${s.id}')" title="Edit Siswa" class="p-1.5 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition">
                                    <i class="fa-solid fa-pen-to-square text-base"></i>
                                </button>
                                <button onclick="deleteSiswa('${s.id}')" title="Hapus Siswa" class="p-1.5 text-slate-500 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition">
                                    <i class="fa-solid fa-trash-can text-base"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');

            updateBulkBarUI();
        }

        function renderGuruTable() {
            const tbody = document.getElementById('tbody-guru');
            if (!tbody) return;

            const gurus = (window.AppState.guru || []).sort((a, b) => (a.nama || '').localeCompare(b.nama || '', 'id', { sensitivity: 'base' }));

            if (gurus.length === 0) {
                tbody.innerHTML = `<tr><td colspan="7" class="text-center py-6 text-slate-400">Belum ada data guru/staff.</td></tr>`;
                return;
            }

            tbody.innerHTML = gurus.map((g, idx) => `
                <tr class="hover:bg-slate-50 transition">
                    <td class="p-4 text-slate-400 font-medium">${idx + 1}</td>
                    <td class="p-4 font-mono font-semibold text-slate-800">${g.nip || '-'}</td>
                    <td class="p-4 font-semibold text-slate-900">${g.nama}</td>
                    <td class="p-4">
                        <span class="px-2.5 py-1 text-xs font-semibold rounded-lg ${g.jabatan === 'Wali Kelas' ? 'bg-amber-50 text-amber-700 border border-amber-200' : 'bg-slate-100 text-slate-700'}">
                            ${g.jabatan}
                        </span>
                    </td>
                    <td class="p-4 font-medium text-slate-700">${g.waliKelas || '-'}</td>
                    <td class="p-4 font-mono text-xs text-slate-600">${g.hp || '-'}</td>
                    <td class="p-4 text-center no-print">
                        <div class="flex items-center justify-center gap-1">
                            <button onclick="openEditGuruModal('${g.id}')" title="Edit Guru" class="p-1.5 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition">
                                <i class="fa-solid fa-pen-to-square text-base"></i>
                            </button>
                            <button onclick="deleteGuru('${g.id}')" title="Hapus Guru" class="p-1.5 text-slate-500 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition">
                                <i class="fa-solid fa-trash-can text-base"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        function toggleSelectSiswa(id, isChecked) {
            if (isChecked) {
                window.AppState.selectedSiswaIds.add(id);
            } else {
                window.AppState.selectedSiswaIds.delete(id);
            }
            updateBulkBarUI();
        }

        function toggleSelectAllSiswa(masterCheckbox) {
            const checkboxes = document.querySelectorAll('.siswa-checkbox');
            checkboxes.forEach(cb => {
                cb.checked = masterCheckbox.checked;
                if (masterCheckbox.checked) {
                    window.AppState.selectedSiswaIds.add(cb.value);
                } else {
                    window.AppState.selectedSiswaIds.delete(cb.value);
                }
            });
            updateBulkBarUI();
        }

        function updateBulkBarUI() {
            const count = window.AppState.selectedSiswaIds.size;
            const bulkBar = document.getElementById('bulk-action-bar');
            const countElem = document.getElementById('selected-count');
            if (countElem) countElem.textContent = count;

            if (bulkBar) {
                if (count > 0) bulkBar.classList.remove('hidden');
                else bulkBar.classList.add('hidden');
            }
        }

        function openBulkKenaikanModal() {
            const count = window.AppState.selectedSiswaIds.size;
            if (count === 0) return;
            document.getElementById('bulk-modal-count').textContent = count;
            openModal('modal-bulk');
        }

        async function executeBulkKenaikan() {
            const targetKelas = document.getElementById('bulk-target-kelas').value;
            const selectedIds = Array.from(window.AppState.selectedSiswaIds);

            const res = await apiCall('bulk_kenaikan', {
                ids: JSON.stringify(selectedIds),
                target_kelas: targetKelas
            });

            if (res.status === 'success') {
                showToast(`Berhasil memindahkan ${selectedIds.length} siswa ke ${targetKelas}!`, 'success');
                window.AppState.selectedSiswaIds.clear();
                const checkAll = document.getElementById('check-all-siswa');
                if (checkAll) checkAll.checked = false;
                closeModal('modal-bulk');
                fetchServerData();
            } else {
                showToast(res.message || 'Gagal memproses kenaikan kelas', 'error');
            }
        }

        async function executeBulkDelete() {
            const selectedIds = Array.from(window.AppState.selectedSiswaIds);
            if (selectedIds.length === 0) return;

            if (confirm(`Apakah Anda yakin ingin MENGHAPUS ${selectedIds.length} data siswa terpilih?`)) {
                const res = await apiCall('delete_siswa', {
                    ids: JSON.stringify(selectedIds)
                });

                if (res.status === 'success') {
                    showToast(`Berhasil menghapus ${selectedIds.length} data siswa!`, 'info');
                    window.AppState.selectedSiswaIds.clear();
                    const checkAll = document.getElementById('check-all-siswa');
                    if (checkAll) checkAll.checked = false;
                    fetchServerData();
                } else {
                    showToast(res.message || 'Gagal menghapus data', 'error');
                }
            }
        }

        function openModal(id) {
            const backdrop = document.getElementById('modal-backdrop');
            const modal = document.getElementById(id);
            if (backdrop) backdrop.classList.remove('hidden');
            if (modal) modal.classList.remove('hidden');
        }

        function closeModal(id) {
            const backdrop = document.getElementById('modal-backdrop');
            const modal = document.getElementById(id);
            if (backdrop) backdrop.classList.add('hidden');
            if (modal) modal.classList.add('hidden');
        }

        function openAddSiswaModal() {
            document.getElementById('modal-siswa-title').textContent = 'Tambah Data Siswa';
            document.getElementById('form-siswa').reset();
            document.getElementById('siswa-id').value = '';
            openModal('modal-siswa');
        }

        function openEditSiswaModal(id) {
            const s = window.AppState.siswa.find(x => x.id === id);
            if (!s) return;

            document.getElementById('modal-siswa-title').textContent = 'Edit Data Siswa';
            document.getElementById('siswa-id').value = s.id;
            document.getElementById('siswa-nis').value = s.nis;
            document.getElementById('siswa-nisn').value = s.nisn;
            document.getElementById('siswa-nama').value = s.nama;
            document.getElementById('siswa-jk').value = s.jk;
            document.getElementById('siswa-kelas').value = s.kelas;
            document.getElementById('siswa-nik').value = s.nik || '';

            openModal('modal-siswa');
        }

        async function saveSiswa(e) {
            e.preventDefault();
            const data = {
                id: document.getElementById('siswa-id').value,
                nis: document.getElementById('siswa-nis').value.trim(),
                nisn: document.getElementById('siswa-nisn').value.trim(),
                nama: document.getElementById('siswa-nama').value.trim(),
                jk: document.getElementById('siswa-jk').value,
                kelas: document.getElementById('siswa-kelas').value,
                nik: document.getElementById('siswa-nik').value.trim()
            };

            const res = await apiCall('save_siswa', data);
            if (res.status === 'success') {
                closeModal('modal-siswa');
                showToast('Data siswa berhasil disimpan!', 'success');
                fetchServerData();
            } else {
                showToast(res.message || 'Gagal menyimpan siswa', 'error');
            }
        }

        async function deleteSiswa(id) {
            if (confirm("Apakah Anda yakin ingin menghapus data siswa ini?")) {
                const res = await apiCall('delete_siswa', { ids: JSON.stringify([id]) });
                if (res.status === 'success') {
                    showToast('Data siswa telah dihapus.', 'info');
                    fetchServerData();
                } else {
                    showToast('Gagal menghapus siswa', 'error');
                }
            }
        }

        function openAddGuruModal() {
            document.getElementById('modal-guru-title').textContent = 'Tambah Guru / Staff';
            document.getElementById('form-guru').reset();
            document.getElementById('guru-id').value = '';
            openModal('modal-guru');
        }

        function openEditGuruModal(id) {
            const g = window.AppState.guru.find(x => x.id === id);
            if (!g) return;

            document.getElementById('modal-guru-title').textContent = 'Edit Guru / Staff';
            document.getElementById('guru-id').value = g.id;
            document.getElementById('guru-nip').value = g.nip || '';
            document.getElementById('guru-nama').value = g.nama || '';
            document.getElementById('guru-jabatan').value = g.jabatan || 'Guru Mapel';
            document.getElementById('guru-walikelas').value = g.waliKelas || '';
            document.getElementById('guru-hp').value = g.hp || '';

            openModal('modal-guru');
        }

        async function saveGuru(e) {
            e.preventDefault();
            const data = {
                id: document.getElementById('guru-id').value,
                nip: document.getElementById('guru-nip').value.trim(),
                nama: document.getElementById('guru-nama').value.trim(),
                jabatan: document.getElementById('guru-jabatan').value,
                wali_kelas: document.getElementById('guru-walikelas').value,
                hp: document.getElementById('guru-hp').value.trim()
            };

            const res = await apiCall('save_guru', data);
            if (res.status === 'success') {
                closeModal('modal-guru');
                showToast('Data guru berhasil disimpan!', 'success');
                fetchServerData();
            } else {
                showToast(res.message || 'Gagal menyimpan data guru', 'error');
            }
        }

        async function deleteGuru(id) {
            if (confirm("Hapus data guru/staff ini?")) {
                const res = await apiCall('delete_guru', { id: id });
                if (res.status === 'success') {
                    showToast('Data guru telah dihapus.', 'info');
                    fetchServerData();
                } else {
                    showToast('Gagal menghapus guru', 'error');
                }
            }
        }

        function renderKelasGrid() {
            const grid = document.getElementById('grid-kelas');
            if (!grid) return;

            grid.innerHTML = (window.AppState.kelas || []).map(k => {
                const siswaInClass = (window.AppState.siswa || []).filter(s => s.kelas === k);
                const countL = siswaInClass.filter(s => s.jk === 'L').length;
                const countP = siswaInClass.filter(s => s.jk === 'P').length;
                const waliNama = window.AppState.kelasWaliMap[k] || 'Belum ditugaskan';

                return `
                    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between hover:border-indigo-300 transition">
                        <div>
                            <div class="flex items-start justify-between">
                                <div>
                                    <h3 class="font-bold text-slate-900 text-lg">${k}</h3>
                                    <p class="text-xs text-indigo-600 font-medium mt-0.5"><i class="fa-solid fa-user-tie text-[10px] mr-1"></i>${waliNama}</p>
                                </div>
                                <span class="w-10 h-10 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold text-base">
                                    <i class="fa-solid fa-users text-sm"></i>
                                </span>
                            </div>

                            <div class="mt-4 flex items-center gap-2">
                                <span class="text-[11px] font-semibold px-2 py-0.5 rounded-md bg-slate-100 text-slate-700">Total: ${siswaInClass.length}</span>
                                <span class="text-[11px] font-semibold px-2 py-0.5 rounded-md bg-blue-50 text-blue-700">L: ${countL}</span>
                                <span class="text-[11px] font-semibold px-2 py-0.5 rounded-md bg-pink-50 text-pink-700">P: ${countP}</span>
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-t border-slate-100 flex justify-between items-center text-xs">
                            <button onclick="filterSiswaByKelas('${k}')" class="text-indigo-600 font-semibold hover:underline flex items-center gap-1">
                                Lihat Siswa <i class="fa-solid fa-arrow-right text-[10px]"></i>
                            </button>
                            <button onclick="deleteKelas('${k}')" class="text-slate-400 hover:text-rose-600 transition" title="Hapus Kelas">
                                <i class="fa-solid fa-trash-can"></i>
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
        }

        function filterSiswaByKelas(kelasName) {
            switchTab('siswa');
            const filterElem = document.getElementById('filter-kelas-siswa');
            if (filterElem) filterElem.value = kelasName;
            renderSiswaTable();
        }

        function openAddKelasModal() {
            document.getElementById('form-kelas').reset();
            openModal('modal-kelas');
        }

        async function saveKelas(e) {
            e.preventDefault();
            const nama = document.getElementById('input-nama-kelas').value.trim();
            const wali = document.getElementById('input-wali-kelas').value;

            if (!nama) return;

            const res = await apiCall('save_kelas', {
                nama_kelas: nama,
                wali_kelas_nama: wali
            });

            if (res.status === 'success') {
                showToast(`Kelas "${nama}" berhasil disimpan!`, 'success');
                closeModal('modal-kelas');
                fetchServerData();
            } else {
                showToast('Gagal menyimpan kelas', 'error');
            }
        }

        async function deleteKelas(nama) {
            if (confirm(`Hapus kelas "${nama}"? Siswa di kelas ini tetap ada di database.`)) {
                const res = await apiCall('delete_kelas', { nama_kelas: nama });
                if (res.status === 'success') {
                    showToast(`Kelas "${nama}" telah dihapus.`, 'info');
                    fetchServerData();
                } else {
                    showToast('Gagal menghapus kelas', 'error');
                }
            }
        }

        function openImportGuruModal() {
            const f = document.getElementById('file-import-guru-excel');
            if (f) f.value = '';
            openModal('modal-import-guru');
        }

        function downloadGuruTemplate() {
            const templateData = [
                ["NIP / NUPTK", "NAMA LENGKAP & GELAR", "JABATAN / PERAN", "WALI KELAS", "NO HP / WHATSAPP"],
                ["198501012010011001", "Budi Santoso, S.Pd.", "Wali Kelas", "Kelas 1A", "081234567890"],
                ["198802022012022002", "Siti Aminah, M.Pd.", "Guru Mapel", "", "081298765432"]
            ];
            const ws = XLSX.utils.aoa_to_sheet(templateData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Template Data Guru");
            XLSX.writeFile(wb, "Template_Import_Guru.xlsx");
            showToast('Template Excel Guru berhasil diunduh.', 'success');
        }

        function processGuruExcelImport() {
            const fileInput = document.getElementById('file-import-guru-excel');

            if (!fileInput || !fileInput.files.length) {
                showToast('Pilih file Excel terlebih dahulu!', 'error');
                return;
            }

            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = async function(e) {
                try {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, { type: 'array' });
                    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                    const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                    const importedBatch = [];
                    for (let i = 1; i < json.length; i++) {
                        const row = json[i];
                        if (row && row.length >= 2 && row[1]) {
                            const newId = 'g_' + Date.now() + '_' + i;
                            const waliKelasVal = row[3] ? String(row[3]).trim() : '';
                            importedBatch.push({
                                id: newId,
                                nip: String(row[0] || ''),
                                nama: String(row[1] || ''),
                                jabatan: String(row[2] || 'Guru Mapel'),
                                waliKelas: waliKelasVal,
                                hp: String(row[4] || '')
                            });
                        }
                    }

                    if (importedBatch.length > 0) {
                        const res = await apiCall('import_guru_batch', { batch: JSON.stringify(importedBatch) });
                        if (res.status === 'success') {
                            showToast(`Berhasil mengimpor ${importedBatch.length} data guru!`, 'success');
                            closeModal('modal-import-guru');
                            fetchServerData();
                        } else {
                            showToast(res.message || 'Gagal menyimpan data import', 'error');
                        }
                    } else {
                        showToast('Tidak ada data valid ditemukan di file Excel.', 'error');
                    }
                } catch (err) {
                    showToast('Gagal memproses file Excel Guru.', 'error');
                }
            };
            reader.readAsArrayBuffer(file);
        }

        function exportGuruToExcel() {
            const gurus = window.AppState.guru || [];
            gurus.sort((a, b) => (a.nama || '').localeCompare(b.nama || '', 'id', { sensitivity: 'base' }));

            if (gurus.length === 0) {
                showToast('Tidak ada data guru untuk diexport.', 'error');
                return;
            }

            const exportData = [
                ["NIP / NUPTK", "NAMA LENGKAP & GELAR", "JABATAN / PERAN", "WALI KELAS", "NO HP / WHATSAPP"],
                ...gurus.map(g => [g.nip || '', g.nama || '', g.jabatan || '', g.waliKelas || '', g.hp || ''])
            ];

            const ws = XLSX.utils.aoa_to_sheet(exportData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Data Guru & Staff");
            XLSX.writeFile(wb, "Data_Guru_dan_Staff.xlsx");
            showToast(`Berhasil mengexport ${gurus.length} data guru!`, 'success');
        }

        function openImportExcelModal() {
            document.getElementById('file-import-excel').value = '';
            openModal('modal-import');
        }

        function downloadExcelTemplate() {
            const templateData = [
                ["NIS", "NISN", "NAMA LENGKAP", "JENIS KELAMIN (L/P)", "NIK", "KELAS"],
                ["24006", "0123456786", "Eko Prasetyo", "L", "3201123456780006", "Kelas 1A"],
                ["24007", "0123456787", "Fitri Handayani", "P", "3201123456780007", "Kelas 1B"]
            ];
            const ws = XLSX.utils.aoa_to_sheet(templateData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Template Data Siswa");
            XLSX.writeFile(wb, "Template_Import_Siswa.xlsx");
            showToast('Template Excel berhasil diunduh.', 'success');
        }

        function processExcelImport() {
            const fileInput = document.getElementById('file-import-excel');
            const targetKelasFallback = document.getElementById('import-target-kelas').value;

            if (!fileInput.files.length) {
                showToast('Pilih file Excel terlebih dahulu!', 'error');
                return;
            }

            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = async function(e) {
                try {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, { type: 'array' });
                    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                    const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                    const importedBatch = [];
                    for (let i = 1; i < json.length; i++) {
                        const row = json[i];
                        if (row && row.length >= 3 && row[2]) {
                            const newId = 's_' + Date.now() + '_' + i;
                            const classFromExcel = row[5] ? String(row[5]).trim() : '';
                            const assignedClass = classFromExcel || targetKelasFallback;

                            importedBatch.push({
                                id: newId,
                                nis: String(row[0] || ''),
                                nisn: String(row[1] || ''),
                                nama: String(row[2] || ''),
                                jk: String(row[3] || 'L').toUpperCase().startsWith('P') ? 'P' : 'L',
                                nik: String(row[4] || ''),
                                kelas: assignedClass
                            });
                        }
                    }

                    if (importedBatch.length > 0) {
                        const res = await apiCall('import_siswa_batch', { batch: JSON.stringify(importedBatch) });
                        if (res.status === 'success') {
                            showToast(`Berhasil mengimpor ${importedBatch.length} data siswa!`, 'success');
                            closeModal('modal-import');
                            fetchServerData();
                        } else {
                            showToast(res.message || 'Gagal menyimpan data import', 'error');
                        }
                    } else {
                        showToast('Tidak ada data valid di file Excel.', 'error');
                    }
                } catch (err) {
                    showToast('Gagal memproses file Excel.', 'error');
                }
            };
            reader.readAsArrayBuffer(file);
        }

        function exportSiswaToExcel() {
            const search = (document.getElementById('search-siswa')?.value || '').toLowerCase();
            const filterKelas = document.getElementById('filter-kelas-siswa')?.value || 'ALL';

            let filtered = (window.AppState.siswa || []).filter(s => {
                const matchSearch = (s.nama || '').toLowerCase().includes(search) || 
                                    (s.nis || '').toLowerCase().includes(search) || 
                                    (s.nisn || '').toLowerCase().includes(search) ||
                                    (s.nik && s.nik.toLowerCase().includes(search));
                const matchKelas = filterKelas === 'ALL' || s.kelas === filterKelas;
                return matchSearch && matchKelas;
            });

            filtered.sort((a, b) => (a.nama || '').localeCompare(b.nama || '', 'id', { sensitivity: 'base' }));

            if (filtered.length === 0) {
                showToast('Tidak ada data siswa untuk diexport.', 'error');
                return;
            }

            const exportData = [
                ["NIS", "NISN", "NAMA LENGKAP SISWA", "JENIS KELAMIN", "NIK", "KELAS"],
                ...filtered.map(s => [s.nis, s.nisn, s.nama, s.jk, s.nik || '', s.kelas])
            ];

            const ws = XLSX.utils.aoa_to_sheet(exportData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Data Siswa");
            XLSX.writeFile(wb, `Data_Siswa_${filterKelas}_MI_Al_Khoiriyah.xlsx`);
            showToast(`Berhasil mengexport ${filtered.length} data siswa!`, 'success');
        }

        function renderAbsenPreview() {
            const target = document.getElementById('print-absen-target');
            if (!target) return;

            const selectedKelas = document.getElementById('absen-select-kelas')?.value || 'Kelas 1A';
            const monthVal = document.getElementById('absen-month-picker')?.value || '2024-08';
            const sekolah = document.getElementById('absen-input-sekolah')?.value || 'MI AL KHOIRIYAH SAWANGAN';
            
            const detectedWali = window.AppState.kelasWaliMap[selectedKelas] || 'Budi Santoso, S.Pd.';
            const walikelas = document.getElementById('absen-input-walikelas')?.value || detectedWali;

            const [year, month] = monthVal.split('-');
            const monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
            const monthText = (monthNames[parseInt(month) - 1] || 'Agustus') + " " + year;
            const daysInMonth = new Date(year, month, 0).getDate();

            const siswaList = (window.AppState.siswa || [])
                .filter(s => s.kelas === selectedKelas)
                .sort((a, b) => (a.nama || '').localeCompare(b.nama || '', 'id', { sensitivity: 'base' }));

            const countL = siswaList.filter(s => s.jk === 'L').length;
            const countP = siswaList.filter(s => s.jk === 'P').length;

            let dayHeaders = '';
            for (let d = 1; d <= 31; d++) {
                if (d <= daysInMonth) dayHeaders += `<th class="w-6 text-center text-[9px] p-0">${d}</th>`;
                else dayHeaders += `<th class="w-6 text-center text-[9px] p-0 bg-slate-100"></th>`;
            }

            let rowsHtml = '';
            if (siswaList.length === 0) {
                rowsHtml = `<tr><td colspan="39" class="text-center py-6 text-slate-400">Tidak ada data siswa di ${selectedKelas}</td></tr>`;
            } else {
                rowsHtml = siswaList.map((s, i) => {
                    let dayCells = '';
                    for (let d = 1; d <= 31; d++) dayCells += `<td class="w-6 h-7 text-center"></td>`;
                    return `
                        <tr>
                            <td class="text-center font-medium">${i + 1}</td>
                            <td class="font-mono text-[10px] text-center">${s.nis}</td>
                            <td class="font-semibold px-2">${s.nama}</td>
                            <td class="text-center">${s.jk}</td>
                            ${dayCells}
                            <td class="w-6 text-center font-medium"></td>
                            <td class="w-6 text-center font-medium"></td>
                            <td class="w-6 text-center font-medium"></td>
                        </tr>
                    `;
                }).join('');
            }

            target.innerHTML = `
                <div class="text-center mb-2">
                    <h2 class="text-xl font-bold uppercase tracking-wide border-b-2 border-black pb-1 inline-block">${sekolah}</h2>
                    <h3 class="text-base font-bold uppercase mt-1">DAFTAR HADIR / PRESENSI SISWA</h3>
                    <div class="flex justify-between items-center text-xs font-semibold mt-2 px-2">
                        <span>KELAS: ${selectedKelas}</span>
                        <span>BULAN: ${monthText.toUpperCase()}</span>
                        <span>JUMLAH: ${siswaList.length} ANAK (L: ${countL}, P: ${countP})</span>
                    </div>
                </div>

                <table class="w-full text-xs grid-box-table mt-1">
                    <thead>
                        <tr>
                            <th rowspan="2" class="w-8 text-center">NO</th>
                            <th rowspan="2" class="w-16 text-center">NIS</th>
                            <th rowspan="2" class="text-left px-2">NAMA LENGKAP SISWA</th>
                            <th rowspan="2" class="w-8 text-center">JK</th>
                            <th colspan="31" class="text-center py-1">TANGGAL</th>
                            <th colspan="3" class="text-center py-1 bg-slate-100">REKAP</th>
                        </tr>
                        <tr>
                            ${dayHeaders}
                            <th class="w-6 text-center bg-slate-100">S</th>
                            <th class="w-6 text-center bg-slate-100">I</th>
                            <th class="w-6 text-center bg-slate-100">A</th>
                        </tr>
                    </thead>
                    <tbody>${rowsHtml}</tbody>
                </table>

                <div class="mt-6 flex justify-between text-xs px-6">
                    <div class="text-center">
                        <p>Mengetahui,</p>
                        <p class="font-semibold">Kepala Sekolah</p>
                        <div class="h-14"></div>
                        <p class="font-bold underline">_______________________</p>
                        <p>NIP. .................................</p>
                    </div>
                    <div class="text-center">
                        <p>Tanggal Cetak: ${new Date().toLocaleDateString('id-ID')}</p>
                        <p class="font-semibold">Wali Kelas ${selectedKelas}</p>
                        <div class="h-14"></div>
                        <p class="font-bold underline">${walikelas}</p>
                        <p>NIP. .................................</p>
                    </div>
                </div>
            `;
        }

        function renderNilaiPreview() {
            const target = document.getElementById('print-nilai-target');
            if (!target) return;

            const selectedKelas = document.getElementById('nilai-select-kelas')?.value || 'Kelas 1A';
            const mapel = document.getElementById('nilai-input-mapel')?.value || 'Matematika';
            const semester = document.getElementById('nilai-input-semester')?.value || 'Semester I / 2024-2025';
            const guru = document.getElementById('nilai-input-guru')?.value || 'Siti Aminah, M.Pd.';
            const kepsek = document.getElementById('nilai-input-kepsek')?.value || 'Drs. H. Ahmad Wijaya, M.M.';

            const siswaList = (window.AppState.siswa || [])
                .filter(s => s.kelas === selectedKelas)
                .sort((a, b) => (a.nama || '').localeCompare(b.nama || '', 'id', { sensitivity: 'base' }));

            let rowsHtml = '';
            if (siswaList.length === 0) {
                rowsHtml = `<tr><td colspan="11" class="text-center py-6 text-slate-400">Tidak ada data siswa di ${selectedKelas}</td></tr>`;
            } else {
                rowsHtml = siswaList.map((s, i) => `
                    <tr>
                        <td class="text-center font-medium">${i + 1}</td>
                        <td class="font-mono text-[10px] text-center">${s.nis}</td>
                        <td class="font-semibold px-2">${s.nama}</td>
                        <td class="text-center">${s.jk}</td>
                        <td class="w-10 h-7 text-center"></td>
                        <td class="w-10 h-7 text-center"></td>
                        <td class="w-10 h-7 text-center"></td>
                        <td class="w-10 h-7 text-center"></td>
                        <td class="w-10 h-7 text-center bg-indigo-50/20"></td>
                        <td class="w-10 h-7 text-center bg-indigo-50/20"></td>
                        <td class="w-12 h-7 text-center bg-slate-50"></td>
                    </tr>
                `).join('');
            }

            target.innerHTML = `
                <div class="text-center mb-2">
                    <h2 class="text-lg font-bold uppercase tracking-wide border-b-2 border-black pb-1 inline-block">LEMBAR PENILAIAN SISWA</h2>
                    <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs font-semibold mt-2 text-left">
                        <div>MATA PELAJARAN : ${mapel.toUpperCase()}</div>
                        <div>KELAS : ${selectedKelas}</div>
                        <div>SEMESTER / TAHUN : ${semester.toUpperCase()}</div>
                        <div>GURU PENGAMPU : ${guru.toUpperCase()}</div>
                    </div>
                </div>

                <table class="w-full text-xs grid-box-table mt-2">
                    <thead>
                        <tr>
                            <th rowspan="2" class="w-8 text-center">NO</th>
                            <th rowspan="2" class="w-16 text-center">NIS</th>
                            <th rowspan="2" class="text-left px-2">NAMA LENGKAP SISWA</th>
                            <th rowspan="2" class="w-8 text-center">JK</th>
                            <th colspan="4" class="text-center py-1 bg-amber-50">NILAI HARIAN (NH)</th>
                            <th rowspan="2" class="w-10 text-center bg-indigo-100">STS</th>
                            <th rowspan="2" class="w-10 text-center bg-indigo-100">SAS</th>
                            <th rowspan="2" class="w-12 text-center bg-slate-200">KET</th>
                        </tr>
                        <tr>
                            <th class="w-10 text-center bg-amber-50">NH 1</th>
                            <th class="w-10 text-center bg-amber-50">NH 2</th>
                            <th class="w-10 text-center bg-amber-50">NH 3</th>
                            <th class="w-10 text-center bg-amber-50">NH 4</th>
                        </tr>
                    </thead>
                    <tbody>${rowsHtml}</tbody>
                </table>

                <div class="mt-6 flex justify-between text-xs px-6">
                    <div class="text-center">
                        <p>Mengetahui,</p>
                        <p class="font-semibold">Kepala Sekolah</p>
                        <div class="h-14"></div>
                        <p class="font-bold underline">${kepsek}</p>
                        <p>NIP. .................................</p>
                    </div>
                    <div class="text-center">
                        <p>Tanggal Cetak: ${new Date().toLocaleDateString('id-ID')}</p>
                        <p class="font-semibold">Guru Mata Pelajaran</p>
                        <div class="h-14"></div>
                        <p class="font-bold underline">${guru}</p>
                        <p>NIP. .................................</p>
                    </div>
                </div>
            `;
        }

        function renderDataSiswaPreview() {
            const target = document.getElementById('print-datasiswa-target');
            if (!target) return;

            const selectedKelas = document.getElementById('datasiswa-select-kelas')?.value || 'Kelas 1A';
            const sekolah = document.getElementById('datasiswa-input-sekolah')?.value || 'MI AL KHOIRIYAH SAWANGAN';
            const ta = document.getElementById('datasiswa-input-ta')?.value || '2024/2025';
            
            const detectedWali = window.AppState.kelasWaliMap[selectedKelas] || 'Budi Santoso, S.Pd.';
            const walikelas = document.getElementById('datasiswa-input-walikelas')?.value || detectedWali;

            const siswaList = (window.AppState.siswa || [])
                .filter(s => s.kelas === selectedKelas)
                .sort((a, b) => (a.nama || '').localeCompare(b.nama || '', 'id', { sensitivity: 'base' }));

            const countL = siswaList.filter(s => s.jk === 'L').length;
            const countP = siswaList.filter(s => s.jk === 'P').length;

            let rowsHtml = '';
            if (siswaList.length === 0) {
                rowsHtml = `<tr><td colspan="6" class="text-center py-6 text-slate-400">Tidak ada data siswa di ${selectedKelas}</td></tr>`;
            } else {
                rowsHtml = siswaList.map((s, i) => `
                    <tr>
                        <td class="text-center font-medium py-1.5">${i + 1}</td>
                        <td class="font-mono text-[11px] text-center py-1.5">${s.nis}</td>
                        <td class="font-mono text-[11px] text-center py-1.5">${s.nisn}</td>
                        <td class="font-semibold px-2 py-1.5">${s.nama}</td>
                        <td class="text-center py-1.5">${s.jk}</td>
                        <td class="px-2 py-1.5"></td>
                    </tr>
                `).join('');
            }

            target.innerHTML = `
                <div class="text-center mb-2">
                    <h2 class="text-xl font-bold uppercase tracking-wide border-b-2 border-black pb-1 inline-block">${sekolah}</h2>
                    <h3 class="text-base font-bold uppercase mt-1">LEMBAR DATA SISWA</h3>
                    <div class="flex justify-between items-center text-xs font-semibold mt-2 px-2">
                        <span>KELAS: ${selectedKelas}</span>
                        <span>TAHUN AJARAN: ${ta}</span>
                        <span>JUMLAH SISWA: ${siswaList.length} ANAK (L: ${countL}, P: ${countP})</span>
                    </div>
                </div>

                <table class="w-full text-xs grid-box-table mt-1">
                    <thead>
                        <tr>
                            <th class="w-10 text-center py-2">NO</th>
                            <th class="w-24 text-center py-2">NIS</th>
                            <th class="w-28 text-center py-2">NISN</th>
                            <th class="text-left px-2 py-2">NAMA LENGKAP SISWA</th>
                            <th class="w-16 text-center py-2">GENDER</th>
                            <th class="w-40 text-center py-2">KETERANGAN</th>
                        </tr>
                    </thead>
                    <tbody>${rowsHtml}</tbody>
                </table>

                <div class="mt-6 flex justify-between text-xs px-6">
                    <div class="text-center">
                        <p>Mengetahui,</p>
                        <p class="font-semibold">Kepala Sekolah</p>
                        <div class="h-14"></div>
                        <p class="font-bold underline">_______________________</p>
                        <p>NIP. .................................</p>
                    </div>
                    <div class="text-center">
                        <p>Tanggal Cetak: ${new Date().toLocaleDateString('id-ID')}</p>
                        <p class="font-semibold">Wali Kelas ${selectedKelas}</p>
                        <div class="h-14"></div>
                        <p class="font-bold underline">${walikelas}</p>
                        <p>NIP. .................................</p>
                    </div>
                </div>
            `;
        }

        function triggerPrint(type) {
            window.print();
        }
    </script>
</body>
</html>