Source Code Aplikasi Administrasi Guru Lengkap dengan Guru Wali Profil Nama & Sekolah Tinggal Edit

Sistem Administrasi Guru Ultra Premium V5.4

Selamat datang rekan-rekan pendidik. Berikut adalah update terbaru Source Code Aplikasi Administrasi Guru & Wali Kelas berbasis Google Apps Script dengan fitur Edit Profil dan Laporan Fix.

Fitur Unggulan V5.4:

✅ Edit Profil Dinamis: Ubah Nama Guru & Sekolah tanpa coding.
✅ Laporan Fix: Kolom kelas otomatis muncul.
✅ Guru Wali: Fitur input siswa binaan & BK.

Langkah Instalasi

Buka Google Spreadsheet Baru.
Klik menu Ekstensi > Apps Script.
Salin kode di bawah ini ke file yang sesuai.

1. Code.gs (Backend)

/**
 * SISTEM ADMINISTRASI GURU - ULTRA PREMIUM V5.4 (REPORT FIX)
 * Fitur: Fix Kolom Kelas di Laporan, Fix Simpan Wali, Fix Status Agenda
 */

function doGet() {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate()
      .setTitle('Sistem Admin Guru Premium')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function getDatabase() {
  return SpreadsheetApp.getActiveSpreadsheet();
}

function setupNewDatabase(ss) {
  const configs = [
    { name: "Profil",      head: ["Key", "Value"] }, 
    { name: "DataSiswa",   head: ["No", "Nama Siswa", "Kelas"] },
    { name: "Absensi",     head: ["Waktu", "Kelas", "Nama Siswa", "Status"] },
    { name: "Nilai",       head: ["Waktu", "Jenis", "Kelas", "Nama Siswa", "Nilai", "Keterangan"] },
    { name: "Agenda",      head: ["Tanggal", "Jam", "Kelas", "Materi", "RPP", "Status", "Absen", "Keterangan"] },
    { name: "SiswaBinaan", head: ["No", "Nama Siswa", "Kelas", "Nama Ortu", "No HP"] },
    { name: "Bimbingan",   head: ["Tanggal", "Nama Siswa", "Kelas", "Permasalahan", "Penyelesaian", "Status"] }
  ];

  configs.forEach(c => {
    let sheet = ss.getSheetByName(c.name);
    if (!sheet) {
      sheet = ss.insertSheet(c.name);
      sheet.appendRow(c.head);
      if(c.name == "Profil"){
         sheet.appendRow(["Nama", "Nama Guru"]);
         sheet.appendRow(["Sekolah", "Nama Sekolah"]);
         sheet.appendRow(["Mapel", "Mata Pelajaran"]);
      }
    }
  });
  let def = ss.getSheetByName("Sheet1"); if (def) ss.deleteSheet(def);
}

function getSheet(name) {
  const ss = getDatabase();
  let sheet = ss.getSheetByName(name);
  if (!sheet) { setupNewDatabase(ss); sheet = ss.getSheetByName(name); }
  return sheet;
}

// --- CORE FUNCTIONS ---

function getKelasList() {
  const s = getSheet("DataSiswa");
  if (s.getLastRow() < 2) return [];
  const data = s.getRange(2, 3, s.getLastRow()-1, 1).getValues();
  return [...new Set(data.flat().filter(String))].sort();
}

// PROFIL
function getProfileData() {
  const s = getSheet("Profil");
  const data = s.getRange(2, 1, s.getLastRow()-1, 2).getValues();
  let p = { nama: "", sekolah: "", mapel: "" };
  data.forEach(r => {
    if(r[0] == "Nama") p.nama = r[1];
    if(r[0] == "Sekolah") p.sekolah = r[1];
    if(r[0] == "Mapel") p.mapel = r[1];
  });
  return p;
}
function saveProfileData(n, s, m) {
  const sh = getSheet("Profil");
  const data = sh.getRange(2, 1, sh.getLastRow()-1, 2).getValues();
  data.forEach((r, i) => {
    if(r[0] == "Nama") sh.getRange(i+2, 2).setValue(n);
    if(r[0] == "Sekolah") sh.getRange(i+2, 2).setValue(s);
    if(r[0] == "Mapel") sh.getRange(i+2, 2).setValue(m);
  });
}

// IMPORT
function importDataServer(sheetName, dataMatrix) {
  const sheet = getSheet(sheetName);
  const lastRow = sheet.getLastRow();
  let startNo = lastRow === 1 ? 1 : lastRow;
  const finalData = dataMatrix.map((row, i) => [startNo + i, row[0], row[1]]);
  sheet.getRange(lastRow + 1, 1, finalData.length, finalData[0].length).setValues(finalData);
  return "Sukses Import " + finalData.length + " Data!";
}

// SISWA & ABSENSI
function getSiswaByKelas(k) {
  const s = getSheet("DataSiswa"); if(s.getLastRow()<2) return [];
  const d = s.getRange(2, 2, s.getLastRow()-1, 2).getValues();
  return d.filter(r => r[1].toString().toUpperCase() === k.toString().toUpperCase()).map(r => r[0]);
}
function tambahSiswaBaru(nama, kelas) { 
  const sheet = getSheet("DataSiswa");
  sheet.appendRow([sheet.getLastRow(), nama, kelas.toUpperCase()]); 
}
function hapusSiswaPermanen(n, k) {
  const s = getSheet("DataSiswa");
  const d = s.getRange(2, 2, s.getLastRow()-1, 2).getValues();
  for(let i=0; i<d.length; i++){
    if(d[i][0]==n && d[i][1].toString().toUpperCase()==k.toString().toUpperCase()){
      s.deleteRow(i+2); return;
    }
  }
}
function simpanAbsensiServer(k, d) {
  const s = getSheet("Absensi"); const t = new Date();
  const rows = d.map(x => [t, k.toUpperCase(), x.nama, x.status]);
  s.getRange(s.getLastRow()+1, 1, rows.length, 4).setValues(rows);
}

// UPDATE: MENAMBAHKAN KOLOM KELAS DI RETURN DATA
function getRekapAbsensi(b, t, k) {
  const s = getSheet("Absensi"); if(s.getLastRow()<2) return [];
  const d = s.getRange(2, 1, s.getLastRow()-1, 4).getValues();
  return d.filter(r => {
    let dt = new Date(r[0]);
    return dt.getMonth() == (b-1) && dt.getFullYear() == t && r[1].toString().toUpperCase() == k.toString().toUpperCase();
  }).map(r => [new Date(r[0]).toLocaleDateString('id-ID'), r[1], r[2], r[3]]); 
  // Return: [Tgl, Kelas, Nama, Status]
}

// NILAI
function simpanNilaiServer(j, k, ket, d) {
  const s = getSheet("Nilai"); const t = new Date();
  const rows = d.map(x => [t, j, k.toUpperCase(), x.nama, x.nilai, ket]);
  s.getRange(s.getLastRow()+1, 1, rows.length, 6).setValues(rows);
}

// UPDATE: MENAMBAHKAN KOLOM KELAS DI RETURN DATA
function getAllNilaiData(k) {
  const s = getSheet("Nilai"); if(s.getLastRow()<2) return [];
  const d = s.getRange(2, 1, s.getLastRow()-1, 6).getValues();
  // Jika k kosong (Semua Kelas), return semua. Jika ada k, filter.
  const res = k ? d.filter(r => r[2].toString().toUpperCase() == k.toString().toUpperCase()) : d;
  return res.map(r => [new Date(r[0]).toLocaleDateString('id-ID'), r[2], r[1], r[3], r[4], r[5]]);
  // Return: [Tgl, Kelas, Jenis, Nama, Nilai, Ket]
}

// AGENDA
function tambahAgenda(d) { getSheet("Agenda").appendRow(d); }
function getAgenda() {
  const s = getSheet("Agenda"); if(s.getLastRow()<2) return [];
  return s.getRange(2, 1, s.getLastRow()-1, 8).getDisplayValues();
}

// WALI
function getSiswaBinaan() {
  const s = getSheet("SiswaBinaan"); if(s.getLastRow()<2) return [];
  return s.getRange(2, 1, s.getLastRow()-1, 5).getDisplayValues();
}
function simpanSiswaBinaan(n, k) { getSheet("SiswaBinaan").appendRow([getSheet("SiswaBinaan").getLastRow(), n, k.toUpperCase(), '-', '-']); }
function getBimbingan() {
  const s = getSheet("Bimbingan"); if(s.getLastRow()<2) return [];
  return s.getRange(2, 1, s.getLastRow()-1, 6).getDisplayValues();
}

// FIX: MENCARI KELAS OTOMATIS SAAT SIMPAN BIMBINGAN
function simpanBimbinganWaliFix(nama, masalah, solusi) {
  const sBinaan = getSheet("SiswaBinaan");
  let kelas = "-";
  
  // Cari kelas siswa tersebut di data Siswa Binaan
  if(sBinaan.getLastRow() >= 2) {
    const data = sBinaan.getRange(2, 2, sBinaan.getLastRow()-1, 2).getValues(); // Ambil Nama & Kelas
    for(let i=0; i<data.length; i++) {
      if(data[i][0] === nama) {
        kelas = data[i][1];
        break;
      }
    }
  }

  const s = getSheet("Bimbingan");
  s.appendRow([new Date(), nama, kelas, masalah, solusi, 'Done']);
}

function hapusDataWali(s, i) { getSheet(s).deleteRow(i+2); }

2. Index.html (Frontend)

<!DOCTYPE html>
<html lang="id">
<head>
  <base target="_top">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sistem Guru Premium</title>
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <style>
    :root { --gold: #FFD700; --cyan: #00FFFF; --white: #FFFFFF; --glass: rgba(255, 255, 255, 0.95); }
    body { background-color: #f0f2f5; font-family: 'Lato', sans-serif; padding-bottom: 80px; }
    .hidden { display: none !important; }

    /* --- HEADER ULTRA KONTRAS --- */
    .header-premium {
      background: linear-gradient(-45deg, #000000, #141E30, #243B55, #0f2027);
      background-size: 400% 400%; animation: gradientBG 15s ease infinite;
      padding: 15px 20px; text-align: center; border-bottom: 4px solid var(--gold);
      box-shadow: 0 5px 15px rgba(0,0,0,0.6); position: sticky; top: 0; z-index: 1000;
    }
    @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    .fade-in { animation: fadeIn 2s ease-in-out; }
    @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }

    /* Typography Kontras Tinggi */
    .txt-sekolah { 
      font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 900; 
      color: var(--gold); 
      text-shadow: 2px 2px 0px #000, 0 0 10px rgba(255, 215, 0, 0.5); /* Outline Hitam Tebal */
      display: block; letter-spacing: 1px;
    }
    .txt-sistem { 
      font-family: 'Lato', sans-serif; font-size: 0.9rem; letter-spacing: 3px; 
      color: var(--white); font-weight: 900;
      text-shadow: 2px 2px 4px #000; /* Bayangan agar tidak tabrakan dengan background */
      text-transform: uppercase; display: block; margin: 5px 0; 
    }
    .txt-guru { 
      font-family: 'Cinzel', serif; font-size: 1.1rem; 
      color: var(--cyan); 
      text-shadow: 2px 2px 0px #000, 0 0 10px rgba(0, 255, 255, 0.5);
      display: block; 
    }

    /* --- NAVIGASI & TOMBOL --- */
    .nav-scroller { background: white; padding: 10px; overflow-x: auto; white-space: nowrap; display: flex; gap: 8px; border-bottom: 1px solid #ddd; justify-content: center; }
    .btn-nav { border-radius: 20px; border: 1px solid #e0e0e0; padding: 8px 15px; background: white; color: #555; transition: 0.3s; font-weight: bold; font-size: 0.85rem; display: flex; align-items: center; gap: 8px;}
    .btn-nav:hover, .btn-nav.active { background: #141E30; color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); border-color: var(--gold); }
    
    /* Warna Ikon Navigasi Menu Atas */
    .btn-nav .fa-th-large { color: #6c757d; } /* Home - Abu */
    .btn-nav .fa-users { color: #0d6efd; } /* Siswa - Biru */
    .btn-nav .fa-check-circle { color: #198754; } /* Absen - Hijau */
    .btn-nav .fa-star { color: #ffc107; } /* Nilai - Kuning */
    .btn-nav .fa-book { color: #fd7e14; } /* Agenda - Oranye */
    .btn-nav .fa-user-tie { color: #d63384; } /* Wali - Pink */
    .btn-nav .fa-id-card { color: #212529; } /* Profil - Hitam */
    
    /* Jika tombol aktif, ubah ikon jadi emas semua */
    .btn-nav.active i { color: var(--gold) !important; }

    /* --- DASHBOARD CARDS --- */
    .hint-box { background: #e3f2fd; border-left: 5px solid #2196f3; padding: 15px; border-radius: 8px; font-size: 0.9rem; color: #0d47a1; margin-bottom: 15px; }
    .card-premium { background: var(--glass); border: none; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); padding: 20px; margin-bottom: 20px; }
    
    .card-dash { height: 100%; padding: 20px; border-radius: 15px; color: white; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); }
    .card-dash:hover { transform: translateY(-5px); filter: brightness(1.1); }
    
    /* Ikon Dashboard berwarna Emas Terang agar kontras dengan background kartu */
    .card-dash i { 
        font-size: 2.5rem; margin-bottom: 10px; 
        color: #FFD700; /* Warna Ikon */
        filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5)); /* Bayangan Ikon */
    }
    .card-dash h5 { font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
    
    .gr-1 { background: linear-gradient(135deg, #000428, #004e92); } /* Biru Malam */
    .gr-2 { background: linear-gradient(135deg, #134E5E, #71B280); } /* Hijau Tosca */
    .gr-3 { background: linear-gradient(135deg, #870000, #190A05); } /* Merah Gelap */
    .gr-4 { background: linear-gradient(135deg, #514A9D, #24C6DC); } /* Ungu Biru */
    .gr-5 { background: linear-gradient(135deg, #C31432, #240b36); } /* Merah Ungu */
    .gr-6 { background: linear-gradient(135deg, #232526, #414345); } /* Hitam Abu */
    
    .container-main { max-width: 800px; margin: 20px auto; padding: 0 15px; }
    .page-title { border-left: 5px solid var(--gold); padding-left: 15px; margin-bottom: 20px; font-family: 'Cinzel', serif; font-weight: bold; }
  </style>
</head>
<body>

<header class="header-premium">
  <div class="fade-in">
    <span id="h-sekolah" class="txt-sekolah">LOADING SYSTEM...</span>
    <span class="txt-sistem">Sistem Administrasi Guru</span>
    <span id="h-guru" class="txt-guru">Menyiapkan Data...</span>
  </div>
</header>

<div class="nav-scroller">
  <button class="btn-nav active" onclick="nav('home', this)"><i class="fas fa-th-large"></i> Home</button>
  <button class="btn-nav" onclick="nav('siswa', this)"><i class="fas fa-users"></i> Siswa</button>
  <button class="btn-nav" onclick="nav('absen', this)"><i class="fas fa-check-circle"></i> Absen</button>
  <button class="btn-nav" onclick="nav('nilai', this)"><i class="fas fa-star"></i> Nilai</button>
  <button class="btn-nav" onclick="nav('agenda', this)"><i class="fas fa-book"></i> Agenda</button>
  <button class="btn-nav" onclick="nav('wali', this)"><i class="fas fa-user-tie"></i> Wali</button>
  <button class="btn-nav" onclick="openProfile()"><i class="fas fa-id-card"></i> Profil</button>
</div>

<div class="container-main">

  <div id="v-home" class="view-sec">
     <div class="hint-box"><i class="fas fa-info-circle me-2"></i><b>Info:</b> Selamat Datang. Gunakan menu di atas atau kartu di bawah ini.</div>
     <div class="row g-3">
        <div class="col-6 col-md-4"><div class="card-dash gr-1" onclick="triggerNav('siswa')"><i class="fas fa-users"></i><h5>Data Siswa</h5></div></div>
        <div class="col-6 col-md-4"><div class="card-dash gr-2" onclick="triggerNav('absen')"><i class="fas fa-calendar-check"></i><h5>Absensi</h5></div></div>
        <div class="col-6 col-md-4"><div class="card-dash gr-3" onclick="triggerNav('nilai')"><i class="fas fa-medal"></i><h5>Input Nilai</h5></div></div>
        <div class="col-6 col-md-4"><div class="card-dash gr-4" onclick="triggerNav('agenda')"><i class="fas fa-journal-whills"></i><h5>Agenda</h5></div></div>
        <div class="col-6 col-md-4"><div class="card-dash gr-5" onclick="triggerNav('wali')"><i class="fas fa-user-graduate"></i><h5>Guru Wali</h5></div></div>
        <div class="col-6 col-md-4"><div class="card-dash gr-6" onclick="openProfile()"><i class="fas fa-user-edit"></i><h5>Edit Profil</h5></div></div>
     </div>
  </div>

  <div id="v-siswa" class="view-sec hidden">
     <h4 class="page-title">Data Siswa</h4>
     <div class="card-premium">
        <h6 class="fw-bold"><i class="fas fa-file-csv"></i> Import Data</h6>
        <div class="d-flex gap-2">
           <button onclick="dlTemplateSiswa()" class="btn btn-sm btn-outline-dark">1. Template</button>
           <button onclick="document.getElementById('f-imp-siswa').click()" class="btn btn-sm btn-success">2. Import</button>
           <input type="file" id="f-imp-siswa" hidden onchange="importSiswa(this)">
        </div>
     </div>
     <div class="card-premium">
        <div class="input-group mb-3">
           <select id="s-filter" class="form-select cls-select"><option value="" disabled selected>Pilih Kelas...</option></select>
           <button onclick="loadSiswa()" class="btn btn-dark">Tampil</button>
        </div>
        <div class="table-responsive"><table class="table table-hover mb-0"><thead class="table-light"><tr><th>Nama Siswa</th><th class="text-end">#</th></tr></thead><tbody id="tbl-siswa"><tr><td colspan="2" class="text-center">Pilih Kelas</td></tr></tbody></table></div>
     </div>
     <div class="card-premium">
        <h6 class="fw-bold border-bottom pb-2">Tambah Manual</h6>
        <div class="row g-2">
           <div class="col-md-5"><input id="s-nama-add" class="form-control" placeholder="Nama"></div>
           <div class="col-md-4"><input id="s-kls-add" class="form-control" placeholder="Kelas"></div>
           <div class="col-md-3"><button onclick="addSiswa()" class="btn btn-primary w-100">Simpan</button></div>
        </div>
     </div>
  </div>

  <div id="v-nilai" class="view-sec hidden">
     <h4 class="page-title">Input Nilai</h4>
     <div class="card-premium">
        <div class="row g-2 mb-2">
            <div class="col-md-3">
               <label class="small fw-bold">Kelas</label>
               <select id="n-kls" class="form-select cls-select"><option value="">Pilih...</option></select>
            </div>
            <div class="col-md-3">
              <label class="small fw-bold">Jenis</label>
              <select id="n-jns" class="form-select"><option>UH 1</option><option>UH 2</option><option>UTS</option><option>UAS</option><option>TUGAS</option></select>
            </div>
            <div class="col-md-4"><label class="small fw-bold">Materi</label><input id="n-ket" class="form-control" placeholder="Bab..."></div>
            <div class="col-md-2"><label class="small text-white">.</label><button onclick="loadNilaiSiswa()" class="btn btn-dark w-100">Load</button></div>
        </div>
        <div class="table-responsive border rounded bg-white mb-2" style="max-height: 300px;">
           <table class="table table-sm table-striped mb-0"><thead class="table-dark"><tr><th>Nama Siswa</th><th width="100">Nilai</th></tr></thead><tbody id="tbl-nilai"><tr><td colspan="2" class="text-center p-3">Load Form Dulu</td></tr></tbody></table>
        </div>
        <button onclick="saveNilai()" class="btn btn-success w-100 fw-bold">SIMPAN NILAI</button>
     </div>
     <div class="card-premium">
        <h6 class="fw-bold">Laporan Nilai</h6>
        <div class="input-group mb-2">
           <select id="nv-kls" class="form-select cls-select form-select-sm"><option value="">Semua</option></select>
           <button onclick="loadRiwayatNilai()" class="btn btn-secondary btn-sm">Cek</button>
        </div>
        <div class="table-responsive border mb-2"><table class="table table-sm small table-bordered" id="tbl-nilai-hist"><thead><tr><th>Tgl</th><th>Kelas</th><th>Jenis</th><th>Nama</th><th>Nilai</th><th>Ket</th></tr></thead><tbody></tbody></table></div>
        <div class="d-flex gap-2">
            <button onclick="exportTableToCSV('tbl-nilai-hist', 'Rekap_Nilai')" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-file-csv"></i> Unduh CSV</button>
            <button onclick="exportTableToPDF('tbl-nilai-hist', 'Rekap_Nilai')" class="btn btn-sm btn-outline-danger w-50"><i class="fas fa-file-pdf"></i> Unduh PDF</button>
        </div>
     </div>
  </div>

  <div id="v-absen" class="view-sec hidden">
     <h4 class="page-title">Absensi</h4>
     <div class="card-premium">
        <div class="input-group mb-3">
           <select id="a-kls" class="form-select cls-select"><option value="">Pilih Kelas...</option></select>
           <button onclick="loadAbsenSiswa()" class="btn btn-primary">Buka Absen</button>
        </div>
        <div class="table-responsive border rounded bg-white mb-3" style="max-height: 350px;">
           <table class="table table-sm text-center align-middle mb-0"><thead class="table-dark sticky-top"><tr><th>Nama</th><th>H</th><th>S</th><th>I</th><th>A</th></tr></thead><tbody id="tbl-absen"></tbody></table>
        </div>
        <button onclick="saveAbsen()" class="btn btn-warning w-100 fw-bold">SIMPAN ABSEN</button>
     </div>

     <div class="card-premium">
        <h6 class="fw-bold"><i class="fas fa-print"></i> Laporan Absensi</h6>
        <div class="row g-2 mb-2">
           <div class="col-4"><select id="r-kls" class="form-select cls-select form-select-sm"><option value="">Kelas...</option></select></div>
           <div class="col-4"><select id="r-bln" class="form-select form-select-sm"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">Mei</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Agu</option><option value="9">Sep</option><option value="10">Okt</option><option value="11">Nov</option><option value="12">Des</option></select></div>
           <div class="col-4"><button onclick="loadRekap()" class="btn btn-info w-100 text-white btn-sm">Lihat</button></div>
        </div>
        <div class="table-responsive border mb-2"><table class="table table-sm table-bordered mb-0" id="tbl-rekap-view"><thead><tr><th>Tgl</th><th>Kelas</th><th>Nama</th><th>Status</th></tr></thead><tbody></tbody></table></div>
        <div class="d-flex gap-2">
           <button onclick="exportTableToCSV('tbl-rekap-view', 'Laporan_Absen')" class="btn btn-outline-success w-50 btn-sm"><i class="fas fa-file-csv"></i> Unduh CSV</button>
           <button onclick="exportTableToPDF('tbl-rekap-view', 'Laporan_Absen')" class="btn btn-outline-danger w-50 btn-sm"><i class="fas fa-file-pdf"></i> Unduh PDF</button>
        </div>
     </div>
  </div>

  <div id="v-agenda" class="view-sec hidden">
     <h4 class="page-title">Agenda Mengajar</h4>
     <div class="card-premium">
        <div class="row g-2">
           <div class="col-md-4"><input type="date" id="ag-tgl" class="form-control"></div>
           <div class="col-md-3"><select id="ag-kls" class="form-select cls-select"><option>Kelas...</option></select></div>
           <div class="col-md-2"><input id="ag-jam" class="form-control" placeholder="Jam Ke"></div>
           <div class="col-md-3"><select id="ag-sts" class="form-select"><option>Hadir</option><option>Tugas</option></select></div>
           <div class="col-12"><textarea id="ag-mat" class="form-control" rows="2" placeholder="Materi & Catatan..."></textarea></div>
           <button onclick="saveAgenda()" class="btn btn-primary w-100">SIMPAN AGENDA</button>
        </div>
     </div>
     <div class="card-premium">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h6>Riwayat Agenda</h6>
            <button onclick="loadAgenda()" class="btn btn-sm btn-secondary">Refresh</button>
        </div>
        <div class="table-responsive mb-2"><table class="table table-sm table-bordered small" id="tbl-agenda-view"><thead><tr><th>Tgl</th><th>Kelas/Jam</th><th>Materi</th><th>Status</th></tr></thead><tbody></tbody></table></div>
        <div class="d-flex gap-2">
            <button onclick="exportTableToCSV('tbl-agenda-view', 'Jurnal_Mengajar')" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-file-csv"></i> Unduh CSV</button>
            <button onclick="exportTableToPDF('tbl-agenda-view', 'Jurnal_Mengajar')" class="btn btn-sm btn-outline-danger w-50"><i class="fas fa-file-pdf"></i> Unduh PDF</button>
        </div>
     </div>
  </div>

  <div id="v-wali" class="view-sec hidden">
     <h4 class="page-title">Guru Wali</h4>
     <div class="card-premium">
        <ul class="nav nav-pills nav-fill mb-3">
           <li class="nav-item"><button class="nav-link active" onclick="showWaliTab('binaan')">Siswa Binaan</button></li>
           <li class="nav-item"><button class="nav-link" onclick="showWaliTab('bk')">Bimbingan Wali</button></li>
        </ul>

        <div id="tab-binaan">
           <div class="input-group mb-2">
              <input id="wb-nama" class="form-control" placeholder="Nama">
              <select id="wb-kls" class="form-select cls-select" style="max-width: 120px;"><option value="">Kelas</option></select>
              <button onclick="addBinaan()" class="btn btn-success">+</button>
           </div>
           <table class="table table-sm" id="tbl-binaan"><thead><tr><th>Nama</th><th>Kelas</th><th>#</th></tr></thead><tbody></tbody></table>
        </div>

        <div id="tab-bk" class="hidden">
           <div class="mb-2">
              <label class="small fw-bold">Pilih Siswa</label>
              <select id="wk-nama" class="form-select mb-2"></select>
              <label class="small fw-bold">Permasalahan</label>
              <textarea id="wk-masalah" class="form-control mb-2" rows="2"></textarea>
              <label class="small fw-bold">Penyelesaian</label>
              <textarea id="wk-solusi" class="form-control mb-2" rows="2"></textarea>
              <button onclick="saveBimbingan()" class="btn btn-warning w-100 fw-bold">Simpan Bimbingan</button>
           </div>
           <hr>
           <div class="d-flex justify-content-between mb-2">
              <h6>Laporan Bimbingan</h6>
           </div>
           <div class="table-responsive mb-2">
              <table class="table table-sm table-bordered small" id="tbl-bk-view">
                 <thead class="table-light">
                    <tr><th>Tgl</th><th>Nama Siswa</th><th>Kelas</th><th>Masalah</th><th>Solusi</th><th>#</th></tr>
                 </thead>
                 <tbody></tbody>
              </table>
           </div>
           <div class="d-flex gap-2">
              <button onclick="exportTableToCSV('tbl-bk-view', 'Laporan_Bimbingan')" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-file-csv"></i> Unduh CSV</button>
              <button onclick="exportTableToPDF('tbl-bk-view', 'Laporan_Bimbingan')" class="btn btn-sm btn-outline-danger w-50"><i class="fas fa-file-pdf"></i> Unduh PDF</button>
           </div>
        </div>
     </div>
  </div>

</div>

<div class="modal fade" id="modalProfile" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-dark text-white"><h5 class="modal-title">Edit Profil</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
         <div class="mb-2"><label>Nama Lengkap</label><input id="p-nama" class="form-control"></div>
         <div class="mb-2"><label>Nama Sekolah</label><input id="p-sekolah" class="form-control"></div>
         <div class="mb-2"><label>Mata Pelajaran</label><input id="p-mapel" class="form-control"></div>
      </div>
      <div class="modal-footer"><button onclick="saveProfile()" class="btn btn-primary w-100">Simpan Perubahan</button></div>
    </div>
  </div>
</div>

<script>
const { jsPDF } = window.jspdf;
let modalProfile;

window.onload = function() {
   modalProfile = new bootstrap.Modal(document.getElementById('modalProfile'));
   loadProfileHeader();
   loadAgenda();
   loadClassDropdowns();
   document.getElementById('r-bln').value = new Date().getMonth() + 1;
};

// AUTO LOAD DROPDOWNS
function loadClassDropdowns() {
  google.script.run.withSuccessHandler(list => {
     let opts = '<option value="" disabled selected>Pilih Kelas</option>';
     list.forEach(c => opts += `<option value="${c}">${c}</option>`);
     
     document.querySelectorAll('.cls-select').forEach(el => {
         let oldVal = el.value;
         if(el.id === 'nv-kls') el.innerHTML = '<option value="">Semua Kelas</option>' + opts;
         else el.innerHTML = opts;
         if(oldVal && list.includes(oldVal)) el.value = oldVal;
     });
  }).getKelasList();
}

function nav(id, el) {
   document.querySelectorAll('.view-sec').forEach(d => d.classList.add('hidden'));
   document.getElementById('v-'+id).classList.remove('hidden');
   if(el) { document.querySelectorAll('.btn-nav').forEach(b => b.classList.remove('active')); el.classList.add('active'); }
   if(id === 'wali') loadWali();
}
function triggerNav(id) {
   let btns = document.querySelectorAll('.btn-nav');
   const map = {'siswa':1, 'absen':2, 'nilai':3, 'agenda':4, 'wali':5};
   nav(id, btns[map[id]]);
}
function openProfile(){ modalProfile.show(); }

function loadProfileHeader() {
   google.script.run.withSuccessHandler(p => {
      document.getElementById('h-sekolah').innerText = p.sekolah || "NAMA SEKOLAH";
      document.getElementById('h-guru').innerText = p.nama || "NAMA GURU";
      document.getElementById('p-nama').value = p.nama; 
      document.getElementById('p-sekolah').value = p.sekolah; 
      document.getElementById('p-mapel').value = p.mapel;
   }).getProfileData();
}
function saveProfile() {
   const n=document.getElementById('p-nama').value, s=document.getElementById('p-sekolah').value, m=document.getElementById('p-mapel').value;
   google.script.run.withSuccessHandler(()=>{ modalProfile.hide(); loadProfileHeader(); Swal.fire('Sukses','Profil Disimpan','success'); }).saveProfileData(n,s,m);
}

// IMPORT
function dlTemplateSiswa(){ downloadCSV("Nama Siswa,Kelas\nBudi Santoso,X IPA 1\nSiti Aminah,X IPS 2", "template_siswa_fix.csv"); }
function importSiswa(input) { 
    parseCSV(input, (data) => {
        let matrix = [];
        for(let i=1; i<data.length; i++) { 
            let row = data[i];
            if(row.length >= 1 && row[0] !== "") {
                let nama = row[0]; let kelas = row[1] || "-";
                matrix.push([nama, kelas]); 
            }
        }
        if(matrix.length > 0) {
            google.script.run.withSuccessHandler(r => {
                Swal.fire('Sukses', r, 'success'); loadClassDropdowns(); loadSiswa();
            }).importDataServer("DataSiswa", matrix);
        } else { Swal.fire('Error', 'CSV Kosong', 'error'); }
    }); 
}

// SISWA
function loadSiswa() {
   const k = document.getElementById('s-filter').value;
   if(!k) return Swal.fire('','Pilih Kelas','info');
   google.script.run.withSuccessHandler(d => {
      let h = ''; d.forEach(n => h += `<tr><td>${n}</td><td class="text-end"><button class="btn btn-sm btn-outline-danger" onclick="delSiswa('${n}','${k}')">x</button></td></tr>`);
      document.getElementById('tbl-siswa').innerHTML = h || '<tr><td colspan="2" class="text-center">Data Kosong</td></tr>';
   }).getSiswaByKelas(k);
}
function addSiswa(){
   const n = document.getElementById('s-nama-add').value; const k = document.getElementById('s-kls-add').value;
   if(n && k) google.script.run.withSuccessHandler(()=>{ Swal.fire('Ok','Disimpan','success'); document.getElementById('s-nama-add').value=''; loadClassDropdowns(); }).tambahSiswaBaru(n,k);
}
function delSiswa(n,k){ if(confirm('Hapus?')) google.script.run.withSuccessHandler(()=>loadSiswa()).hapusSiswaPermanen(n,k); }

// ABSEN
function loadAbsenSiswa() {
   const k = document.getElementById('a-kls').value; if(!k) return Swal.fire('','Pilih Kelas','info');
   google.script.run.withSuccessHandler(d => {
      let h = '';
      d.forEach((n,i) => h += `<tr><td class="text-start ps-2 fw-bold">${n}<input type="hidden" class="ab-nm" value="${n}"></td>
          <td><input type="radio" name="r${i}" value="Hadir" checked></td><td><input type="radio" name="r${i}" value="Sakit"></td>
          <td><input type="radio" name="r${i}" value="Izin"></td><td><input type="radio" name="r${i}" value="Alpa"></td></tr>`);
      document.getElementById('tbl-absen').innerHTML = h;
   }).getSiswaByKelas(k);
}
function saveAbsen() {
   const k = document.getElementById('a-kls').value; if(!k) return;
   let d = []; document.querySelectorAll('#tbl-absen tr').forEach(tr => { let n = tr.querySelector('.ab-nm'); if(n) d.push({nama: n.value, status: tr.querySelector('input:checked').value}); });
   google.script.run.withSuccessHandler(()=>Swal.fire('Ok','Disimpan','success')).simpanAbsensiServer(k,d);
}
function loadRekap() {
   const k = document.getElementById('r-kls').value; const b = document.getElementById('r-bln').value; const t = new Date().getFullYear();
   if(!k) return Swal.fire('','Pilih Kelas','info');
   google.script.run.withSuccessHandler(d => {
      let h = ''; d.forEach(r => h += `<tr><td>${r[0]}</td><td><b>${r[1]}</b></td><td>${r[2]}</td><td>${r[3]}</td></tr>`);
      document.querySelector('#tbl-rekap-view tbody').innerHTML = h || '<tr><td colspan="4" class="text-center">Nihil</td></tr>';
   }).getRekapAbsensi(b,t,k);
}

// NILAI
function loadNilaiSiswa() {
   const k = document.getElementById('n-kls').value; if(!k) return Swal.fire('','Pilih Kelas','info');
   google.script.run.withSuccessHandler(d => {
      let h = ''; d.forEach(n => h += `<tr><td>${n}<input type="hidden" class="nl-nm" value="${n}"></td><td><input type="number" class="form-control form-control-sm nl-val text-center"></td></tr>`);
      document.getElementById('tbl-nilai').innerHTML = h;
   }).getSiswaByKelas(k);
}
function saveNilai() {
   const k = document.getElementById('n-kls').value; const j = document.getElementById('n-jns').value; const ket = document.getElementById('n-ket').value;
   let d = []; document.querySelectorAll('#tbl-nilai tr').forEach(tr => { let n = tr.querySelector('.nl-nm'); let v = tr.querySelector('.nl-val').value; if(n && v) d.push({nama: n.value, nilai: v}); });
   google.script.run.withSuccessHandler(()=>Swal.fire('Ok','Disimpan','success')).simpanNilaiServer(j,k,ket,d);
}
function loadRiwayatNilai(){
    const k = document.getElementById('nv-kls').value;
    google.script.run.withSuccessHandler(d => {
        let h = ''; d.forEach(r => h += `<tr><td>${r[0]}</td><td><b>${r[1]}</b></td><td>${r[2]}</td><td>${r[3]}</td><td>${r[4]}</td><td>${r[5]}</td></tr>`);
        document.querySelector('#tbl-nilai-hist tbody').innerHTML = h;
    }).getAllNilaiData(k);
}

// AGENDA
function saveAgenda() {
   const d = ['ag-tgl','ag-kls','ag-jam','ag-mat','ag-sts'];
   const vals = d.map(id => document.getElementById(id).value);
   const full = [vals[0], vals[2], vals[1], vals[3], '-', vals[4], '-', '-'];
   google.script.run.withSuccessHandler(()=>{ loadAgenda(); Swal.fire('Ok','','success'); }).tambahAgenda(full);
}
function loadAgenda(){
    google.script.run.withSuccessHandler(d=>{
        let h = ''; d.forEach(r => h += `<tr><td>${r[0]}</td><td><b>${r[2]}</b><br>${r[1]}</td><td>${r[3]}</td><td><span class="badge bg-secondary">${r[5]}</span></td></tr>`);
        document.querySelector('#tbl-agenda-view tbody').innerHTML = h;
    }).getAgenda();
}

// WALI
function showWaliTab(t){
    document.getElementById('tab-binaan').classList.toggle('hidden', t!=='binaan');
    document.getElementById('tab-bk').classList.toggle('hidden', t!=='bk');
}
function loadWali(){
    google.script.run.withSuccessHandler(d=>{
        let h = '', op = '<option value="" disabled selected>Pilih Siswa...</option>';
        d.forEach((r,i) => { h += `<tr><td>${r[1]}</td><td>${r[2]}</td><td><button onclick="delWali('SiswaBinaan',${i})" class="btn-sm btn-danger">x</button></td></tr>`; op += `<option value="${r[1]}">${r[1]}</option>`; });
        document.querySelector('#tbl-binaan tbody').innerHTML = h; 
        document.getElementById('wk-nama').innerHTML = op;
    }).getSiswaBinaan();
    
    // TABEL BIMBINGAN
    google.script.run.withSuccessHandler(d=>{
        let h = ''; 
        d.forEach((r,i) => {
            let tgl = new Date(r[0]).toLocaleDateString('id-ID');
            h += `<tr>
                <td>${tgl}</td>
                <td>${r[1]}</td>
                <td>${r[2]}</td>
                <td>${r[3]}</td>
                <td>${r[4]}</td>
                <td><button onclick="delWali('Bimbingan',${i})" class="btn-sm btn-danger">x</button></td>
            </tr>`;
        });
        document.querySelector('#tbl-bk-view tbody').innerHTML = h;
    }).getBimbingan();
}
function addBinaan(){ const n=document.getElementById('wb-nama').value; const k=document.getElementById('wb-kls').value; if(n) google.script.run.withSuccessHandler(()=>loadWali()).simpanSiswaBinaan(n,k); }
function saveBimbingan(){ 
    const n=document.getElementById('wk-nama').value; 
    const m=document.getElementById('wk-masalah').value; 
    const s=document.getElementById('wk-solusi').value; 
    if(n) {
        google.script.run.withSuccessHandler(()=>{ 
            loadWali(); 
            document.getElementById('wk-masalah').value='';
            document.getElementById('wk-solusi').value='';
            Swal.fire('Ok','Tersimpan','success');
        }).simpanBimbinganWaliFix(n, m, s); 
    } else {
        Swal.fire('','Pilih Siswa Dulu','warning');
    }
}
function delWali(s,i){ google.script.run.withSuccessHandler(()=>loadWali()).hapusDataWali(s,i); }

// PDF & CSV
function downloadCSV(content, filename){
    let blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
    let link = document.createElement("a");
    if (link.download !== undefined) {
        let url = URL.createObjectURL(blob);
        link.setAttribute("href", url); link.setAttribute("download", filename); link.click();
    }
}
function exportTableToCSV(tableId, filename) {
    let csv = []; let rows = document.querySelectorAll('#' + tableId + ' tr');
    for (let i = 0; i < rows.length; i++) {
        let row = [], cols = rows[i].querySelectorAll("td, th");
        let maxCol = cols.length - 1; 
        for (let j = 0; j < maxCol; j++) row.push('"' + cols[j].innerText.replace(/\n/g, " ") + '"');
        csv.push(row.join(","));
    }
    downloadCSV(csv.join("\n"), filename + ".csv");
}
function exportTableToPDF(tableId, filename) {
    const doc = new jsPDF();
    doc.text(filename.replace(/_/g," "), 14, 15);
    doc.autoTable({ 
        html: '#' + tableId, 
        startY: 20, 
        theme: 'grid',
        columns: [0, 1, 2, 3, 4] 
    });
    doc.save(filename + ".pdf");
}
function parseCSV(input, callback) {
    let file = input.files[0]; let reader = new FileReader();
    reader.onload = function(e) {
        let rows = e.target.result.split("\n");
        let data = rows.map(r => r.split(",").map(c => c.replace(/"/g,"").trim()));
        callback(data);
    };
    reader.readAsText(file); input.value = '';
}
</script>
</body>
</html>