APPS GURU

Agustus 25, 2026

Siap Tenar · Guru Wali

()

"image": { "@type": "ImageObject", "url": "", "height": 630, "width": 1200 "url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/", "height": 348, "width": 1200 }, "publisher": { "@type": "Organization", "name": "Blogger", "logo": { "@type": "ImageObject", "url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/", "width": 206, "height": 60 } },

Dashboard

Selamat Datang

Memuat sistem...

Data Pelanggaran

</div>
      <div class='form-group'><label>Tindak Lanjut</label><input id='p_tindak' type='text'/></div>
      <div class='form-group'><label>Kesepakatan</label><input id='p_kesepakatan' type='text'/></div>
      <div class='form-group'><label>Status</label><select id='p_status'><option value='Proses'>Proses</option><option value='Selesai'>Selesai</option></select></div>
      <div style='display:flex; gap:10px; margin-top:10px'>
        <button class='btn-save' id='btnSimpanPelanggaran' style='background:#ef4444' type='submit'>Simpan Data</button>
        <button onclick='closeModal()' style='background:#e2e8f0; border:none; padding:12px; border-radius:10px; cursor:pointer; font-weight:600; width:100%' type='button'>Batal</button>
      </div>
    </form>
  </div>
</div>

<div class='modal-backdrop' id='modalPembinaan'>
  <div class='modal-content'>
    <h3 id='modalTitlePembinaan' style='margin-top:0;color:var(--primary)'>Data Pembinaan</h3>
    <form id='formPembinaan' onsubmit='handleSubmitPembinaan(event)'>
      <input id='m_pembinaan_mode' type='hidden' value='tambah'/>
      <div style='display:grid; grid-template-columns: 1fr 1fr; gap:10px'>
        <div class='form-group'><label>Tanggal</label><input id='pem_tgl' required='required' type='date'/></div>
        <div class='form-group'><label>Kelas</label><input id='pem_kelas' required='required' type='text'/></div>
      </div>
      <div class='form-group'>
        <label>Nama Siswa</label>
        <input autocomplete='off' id='pem_nama' list='daftarNamaPembinaan' placeholder='Ketik nama siswa...' required='required' type='text'/>
        <datalist id='daftarNamaPembinaan'/>
      </div>
      <div style='display:grid; grid-template-columns: 1fr 1fr; gap:10px'>
        <div class='form-group'>
          <label>NIPD (Otomatis)</label>
          <input id='pem_nisn' readonly='readonly' style='background:#f1f5f9;' type='text'/>
        </div>
        <div class='form-group'>
          <label>Kelas (Otomatis)</label>
          <input id='pem_kelas_otomatis' readonly='readonly' style='background:#f1f5f9;' type='text'/>
        </div>
      </div>
      <div class='form-group'><label>Masalah</label><input id='pem_masalah' required='required' type='text'/></div>
      <div class='form-group'><label>Hasil Konseling</label><textarea id='pem_hasil' rows='2'/></div>
      <div class='form-group'><label>Tindak Lanjut</label><input id='pem_rtl' type='text'/></div>
      <div class='form-group'><label>Status</label><select id='pem_status'><option value='Proses'>Proses</option><option value='Selesai'>Selesai</option></select></div>
      <div class='form-group'>
        <label>Foto Dokumentasi</label>
        <input accept='image/*' id='pem_file' onchange='previewFoto(this)' type='file'/>
        <input id='pem_foto_url' type='hidden'/>
        <div id='box-foto'><img id='img-render' src=''/></div>
      </div>
      <div style='display:flex; gap:10px; margin-top:10px'>
        <button class='btn-save' id='btnSimpanPembinaan' type='submit'>Simpan</button>
        <button onclick='closeModal()' style='background:#e2e8f0; border:none; padding:12px; border-radius:10px; cursor:pointer; font-weight:600; width:100%' type='button'>Batal</button>
      </div>
    </form>
  </div>
</div>

<div class='modal-backdrop' id='modalPrestasi'>
  <div class='modal-content'>
    <h3 id='modalTitlePrestasi' style='margin-top:0;color:#f59e0b'>Data Prestasi</h3>
    <form id='formPrestasi' onsubmit='handleSubmitPrestasi(event)'>
      <input id='m_prestasi_mode' type='hidden' value='tambah'/>
      <div style='display:grid; grid-template-columns: 1fr 1fr; gap:10px'>
        <div class='form-group'><label>Nama Siswa</label><input id='pre_nama' required='required' type='text'/></div>
        <div class='form-group'><label>Kelas</label><input id='pre_kelas' required='required' type='text'/></div>
      </div>
      <div class='form-group'><label>Jenis Prestasi</label><input id='pre_jenis' placeholder='Juara 1 Lomba...' required='required' type='text'/></div>
      <div class='form-group'><label>Tingkat</label>
        <select id='pre_tingkat' required='required'>
          <option value=''>Pilih Tingkat</option>
          <option value='Sekolah'>Sekolah</option>
          <option value='Kecamatan'>Kecamatan</option>
          <option value='Kabupaten'>Kabupaten</option>
          <option value='Provinsi'>Provinsi</option>
          <option value='Nasional'>Nasional</option>
          <option value='Internasional'>Internasional</option>
        </select>
      </div>
      <div class='form-group'><label>Keterangan</label><textarea id='pre_ket' placeholder='Catatan tambahan...' rows='2'/></div>
      <div style='display:flex; gap:10px; margin-top:10px'>
        <button class='btn-save' id='btnSimpanPrestasi' style='background:#f59e0b' type='submit'>Simpan</button>
        <button onclick='closeModal()' style='background:#e2e8f0; border:none; padding:12px; border-radius:10px; cursor:pointer; font-weight:600; width:100%' type='button'>Batal</button>
      </div>
    </form>
  </div>
</div>

<div class='modal-backdrop' id='modalJurnal'>
  <div class='modal-content'>
    <div style='display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;'>
      <h3 style='margin:0; color:#059669; font-size:18px;'>📓 Isi Jurnal Mengajar</h3>
      <button id='btnAmbilAbsensi' onclick='ambilAbsensiOtomatis()' type='button'>
        🔄 Ambil Data Absensi
      </button>
    </div>
    <div id='jurnalStatus'/>
    <form id='formJurnal' onsubmit='handleSubmitJurnal(event)'>
      <div class='form-group'>
        <label>📅 Tanggal</label>
        <input id='j_tgl' onchange='resetStatusJurnal()' required='required' type='date'/>
      </div>
      <div style='display:grid; grid-template-columns: 1fr 1fr; gap:10px'>
        <div class='form-group'>
          <label>🏫 Kelas</label>
          <input id='j_kelas' onchange='resetStatusJurnal()' placeholder='Contoh: IX' required='required' type='text'/>
        </div>
        <div class='form-group'>
          <label>🕐 Jam Ke</label>
          <input id='j_jam' placeholder='1-2' required='required' type='text'/>
        </div>
      </div>
      <div class='form-group'>
        <label>📖 Materi Pelajaran</label>
        <input id='j_materi' placeholder='Judul materi...' required='required' type='text'/>
      </div>
      <div class='form-group' style='background:#f8fafc; border-radius:10px; padding:12px; border:1px solid #e2e8f0;'>
        <label style='display:flex; justify-content:space-between; align-items:center;'>
          <span>📊 Data Absensi Hari Ini</span>
          <span id='jmlSiswa' style='font-size:11px; color:#64748b; font-weight:400;'/>
        </label>
        <div id='hasilAbsensiJurnal' style='font-size:14px; padding:6px 0; min-height:24px; color:#334155;'>
          <span style='color:#94a3b8; font-style:italic;'>Klik "Ambil Data Absensi" untuk melihat</span>
        </div>
        <input id='j_absensi_hidden' type='hidden'/>
      </div>
      <div class='form-group'>
        <label>📝 Keterangan</label>
        <textarea id='j_ket' placeholder='Catatan tambahan...' rows='2'/>
      </div>
      <div style='display:flex; gap:10px; margin-top:10px'>
        <button class='btn-save' id='btnSimpanJurnal' style='background:#059669' type='submit'>
          💾 Simpan Jurnal
        </button>
        <button onclick='closeModal()' style='background:#e2e8f0; border:none; padding:12px; border-radius:10px; cursor:pointer; width:100%; font-weight:600;' type='button'>
          Batal
        </button>
      </div>
    </form>
  </div>
</div>

<div class='modal-backdrop' id='modalLoginUnduh'>
  <div class='modal-content' style='max-width:340px; text-align:center;'>
    <h3 style='color:var(--primary)'>🔐 Verifikasi Unduh</h3>
    <form id='formLoginUnduh' onsubmit='event.preventDefault(); prosesLoginUnduh();'>
      <div class='form-group' style='text-align:left'>
        <label>Username</label>
        <input id='login_user' required='required' type='text'/>
      </div>
      <div class='form-group' style='text-align:left'>
        <label>Password</label>
        <input id='login_pass' required='required' type='password'/>
      </div>
      <div style='display:flex; gap:10px; margin-top:20px'>
        <button class='btn-save' id='btn_login_unduh' type='submit'>Login & Unduh</button>
        <button onclick='tutupModalUnduh()' style='background:#e2e8f0; border:none; padding:12px; border-radius:10px; cursor:pointer; width:100%; font-weight:600' type='button'>Batal</button>
      </div>
    </form>
  </div>
</div>

// =====================================================
// [ CONFIGURATION ]
// =====================================================
var WEB_APP_URL = "https://script.google.com/macros/s/AKfycbyjH9d6qaEiEYtzW_6_HFbnM3HXdpDBrDQ6pWPQURIgZ2SgEQfp5TrOPhs4orHQJ174EQ/exec";
var secretKey = "SIAPTENAR2026";

// =====================================================
// [ TOAST NOTIFICATION ]
// =====================================================

// =====================================================
// [ SIDEBAR FUNCTIONS ]
// =====================================================

function toggleSidebar() {
  var sb = document.getElementById('sidebar');
  var mn = document.getElementById('main');
  var ov = document.getElementById('sidebar-overlay');

if (window.innerWidth <= 768) {
    sb.classList.toggle('mobile-open');
    ov.classList.toggle('active');
  } else {
    sb.classList.toggle('collapsed');
    mn.classList.toggle('expanded');
  }
}

function closeSidebarMobile() {
  if (window.innerWidth <= 768) {
    var sb = document.getElementById('sidebar');
    var ov = document.getElementById('sidebar-overlay');
    sb.classList.remove('mobile-open');
    ov.classList.remove('active');
  }
}

// =====================================================
// [ SCROLL TO TOP ]
// =====================================================

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
  if (navigator.vibrate) navigator.vibrate(20);
}

document.addEventListener('DOMContentLoaded', function() {
  toggleScrollButton();
  window.addEventListener('scroll', toggleScrollButton, { passive: true });
  loadDashboard();
});

// =====================================================
// [ CLOSE MODAL ]
// =====================================================

function closeModal() {
  document.querySelectorAll('.modal-backdrop').forEach(function(m) { m.classList.remove('active'); });
}

// =====================================================
// [ PREVIEW FOTO ]
// =====================================================

// =====================================================
// [ JURNAL FUNCTIONS ]
// =====================================================

async function ambilAbsensiOtomatis() {
  var tanggal = document.getElementById('j_tgl').value;
  var kelas = document.getElementById('j_kelas').value;
  var statusDiv = document.getElementById('jurnalStatus');
  var hasilDiv = document.getElementById('hasilAbsensiJurnal');
  var jmlSpan = document.getElementById('jmlSiswa');
  var hiddenInput = document.getElementById('j_absensi_hidden');
  var tombol = document.getElementById('btnAmbilAbsensi');
  
  if (!tanggal || !kelas) {
    statusDiv.style.display = 'block';
    statusDiv.className = 'error';
    statusDiv.innerHTML = '⚠️ Isi <b>Tanggal</b> dan <b>Kelas</b> terlebih dahulu!';
    showToast('Isi tanggal dan kelas terlebih dahulu!', 'warning');
    return;
  }
  
  statusDiv.style.display = 'block';
  statusDiv.className = 'loading';
  statusDiv.innerHTML = '⏳ Mengambil data absensi untuk kelas ' + kelas.toUpperCase() + '...';
  
  tombol.disabled = true;
  tombol.innerHTML = '⏳ Memuat...';
  
  hasilDiv.innerHTML = '<span style="color:#94a3b8;">⏳ Mengambil data...</span>';
  
  try {
    var res = await fetch(WEB_APP_URL + '?action=getAbsensiPreview&tanggal=' + tanggal + '&kelas=' + kelas + '&k=' + secretKey);
    var data = await res.json();
    
    if (data.ok && data.absensi) {
      var hasil = data.absensi;
      hiddenInput.value = hasil;
      
      statusDiv.className = 'success';
      statusDiv.innerHTML = '✅ Data absensi berhasil diambil!';
      
      var displayHtml = '';
      
      if (hasil.indexOf('Semua Hadir') !== -1) {
        displayHtml = '✅ <span style="color:#22c55e; font-weight:600;">Semua Siswa Hadir</span>';
        var match = hasil.match(/$(\d+)\/(\d+)$/);
        if (match) {
          jmlSpan.textContent = match[1] + '/' + match[2] + ' hadir';
        }
      } else if (hasil.indexOf('SIA:') !== -1) {
        var parts = hasil.split(' | ');
        var siaPart = parts[0] || '';
        var hadirPart = parts[1] || '';
        
        var siaHtml = siaPart.replace(/$S$/g, '<span style="color:#eab308; font-weight:500;">(S)</span>')
                             .replace(/$I$/g, '<span style="color:#3b82f6; font-weight:500;">(I)</span>')
                             .replace(/$A$/g, '<span style="color:#ef4444; font-weight:500;">(A)</span>');
        
        displayHtml = '📊 ' + siaHtml;
        
        if (hadirPart) {
          displayHtml += ' | ' + hadirPart.replace(/Hadir:/g, '✅ Hadir:');
        }
        
        var match = hadirPart.match(/(\d+)\/(\d+)/);
        if (match) {
          jmlSpan.textContent = match[1] + '/' + match[2] + ' hadir';
        }
      } else {
        displayHtml = hasil;
      }
      
      hasilDiv.innerHTML = displayHtml;
      showToast('Data absensi berhasil diambil!', 'success');
      
      setTimeout(function() {
        statusDiv.style.display = 'none';
      }, 4000);
      
    } else {
      statusDiv.className = 'error';
      statusDiv.innerHTML = '❌ Gagal: ' + (data.message || 'Data absensi tidak ditemukan');
      hasilDiv.innerHTML = '<span style="color:#94a3b8;">⚠️ Data tidak tersedia</span>';
      hiddenInput.value = '';
      showToast('Gagal mengambil data absensi', 'error');
    }
    
  } catch (e) {
    console.error('Error ambil absensi:', e);
    statusDiv.className = 'error';
    statusDiv.innerHTML = '❌ Error: Gagal terhubung ke server';
    hasilDiv.innerHTML = '<span style="color:#ef4444;">⚠️ Gagal mengambil data</span>';
    hiddenInput.value = '';
    showToast('Gagal terhubung ke server', 'error');
  } finally {
    tombol.disabled = false;
    tombol.innerHTML = '🔄 Ambil Data Absensi';
  }
}

async function handleSubmitJurnal(e) {
  e.preventDefault();
  
  var pinKetik = prompt("🔐 Masukkan PIN GURU:");
  if (!pinKetik) return;

var btn = document.getElementById('btnSimpanJurnal');
  var hiddenInput = document.getElementById('j_absensi_hidden');
  
  btn.innerText = "⏳ Menyimpan...";
  btn.disabled = true;

var payload = {
    action: "tambahJurnal",
    k: secretKey,
    pinInput: pinKetik,
    tanggal: document.getElementById('j_tgl').value,
    kelas: document.getElementById('j_kelas').value,
    jamKe: document.getElementById('j_jam').value,
    materi: document.getElementById('j_materi').value,
    absensi: absensiData,
    keterangan: document.getElementById('j_ket').value
  };

try {
    var response = await fetch(WEB_APP_URL, {
      method: "POST",
      body: JSON.stringify(payload)
    });
    var result = await response.json();

if (result.status === "success") {
      var pesan = "✅ Jurnal Berhasil Disimpan!";
      if (result.absensi) {
        pesan += "\n📊 " + result.absensi;
      }
      showToast('Jurnal berhasil disimpan!', 'success');
      alert(pesan);
      
      document.getElementById('formJurnal').reset();
      resetStatusJurnal();
      
      closeModal();
      loadDashboard();
    } else {
      showToast('Gagal: ' + (result.message || 'Terjadi kesalahan'), 'error');
      alert("❌ Gagal: " + (result.message || "Terjadi kesalahan"));
    }
  } catch(err) {
    console.error(err);
    showToast('Gagal terhubung ke server', 'error');
    alert("⚠️ Gagal terhubung ke server. Periksa koneksi internet.");
  } finally {
    btn.innerText = "💾 Simpan Jurnal";
    btn.disabled = false;
  }
}

// =====================================================
// [ ABSENSI FUNCTIONS ]
// =====================================================

async function loadAbsensiData(tanggal, kelas) {
  try {
    if (!tanggal || !kelas) return null;
    
    var parts = tanggal.split("-");
    var y = parts[0], m = parts[1], d = parts[2];
    var daftarBulan = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
    var bulan = daftarBulan[parseInt(m)-1];
    
    var res = await fetch(WEB_APP_URL + '?sheet=' + bulan + '&k=' + secretKey);
    var data = await res.json();
    
    if (!data.ok || !Array.isArray(data.rows)) return null;
    
    var baris1 = data.rows[0];
    var keys = Object.keys(baris1);
    var kKelas = keys.find(function(k) { return k.toLowerCase() === 'kelas'; }) || 'Kelas';
    var kNIPD = keys.find(function(k) { return k.toLowerCase() === 'nipd' || k.toLowerCase() === 'nisn'; }) || 'NIPD';
    
    var results = {};
    data.rows.forEach(function(row) {
      var kelasSiswa = String(row[kKelas] || "").toUpperCase().trim();
      if (kelasSiswa === String(kelas).toUpperCase().trim()) {
        var nipd = String(row[kNIPD] || "").trim();
        var status = String(row[parseInt(d)] || "").trim();
        results[nipd] = status || "H";
      }
    });
    
    return results;
  } catch (e) {
    console.error("Gagal load data absensi tersimpan:", e);
    return null;
  }
}

async function onTanggalBerubah() {
  var tgl = document.getElementById('tgl-absen').value;
  var kelas = document.getElementById('filterKelasAbsen').value;
  
  if (!tgl || !kelas) return;
  
  var savedData = await loadAbsensiData(tgl, kelas);
  updateRadioFromSavedData(savedData);
  hitungTotalDariData(savedData);
}

async function onKelasBerubah() {
  var tgl = document.getElementById('tgl-absen').value;
  var kelas = document.getElementById('filterKelasAbsen').value;
  
  if (!tgl || !kelas) return;
  
  document.querySelectorAll('.row-absen').forEach(function(row) {
    var kelasRow = row.getAttribute('data-kelas');
    if (kelasRow === kelas) {
      row.style.display = "";
    } else {
      row.style.display = "none";
    }
  });
  
  var savedData = await loadAbsensiData(tgl, kelas);
  updateRadioFromSavedData(savedData);
  hitungTotalDariData(savedData);
}

async function loadAbsensi(el) {
  var view = document.getElementById('app-view');
  document.getElementById('title-page').innerText = "Absensi Siswa";

document.querySelectorAll('.nav-link').forEach(function(l) { l.classList.remove('active'); });
  if(el) el.classList.add('active');
  if(window.innerWidth <= 768) closeSidebarMobile();

view.innerHTML = "<p>⏳ Memuat daftar siswa...</p>";

try {
    var res = await fetch(WEB_APP_URL + '?sheet=Data+Siswa&k=' + secretKey);
    var data = await res.json();

if(!data.ok || !Array.isArray(data.rows)) {
      view.innerHTML = '❌ Data tidak valid. <br><small>Pesan: ' + (data.message || 'Cek koneksi/Key') + '</small>';
      return;
    }

var daftarKelas = [];
    data.rows.forEach(function(r) {
      var kls = r[kKelas] || "";
      if (kls && daftarKelas.indexOf(kls) === -1) daftarKelas.push(kls);
    });
    daftarKelas.sort();
    var kelasPertama = daftarKelas[0] || "";

var today = new Date();
    var iso = new Date(today.getTime() - (today.getTimezoneOffset() * 60000)).toISOString().split('T')[0];

var savedData = await loadAbsensiData(iso, kelasPertama);

var h = '<div style="background:#f8fafc;padding:12px 14px;border-radius:12px;margin-bottom:12px;border:1px solid #e2e8f0;">';
    h += '<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">';
    h += '<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1;">';
    h += '<div><label style="font-size:9px;font-weight:bold;color:#64748b;text-transform:uppercase;display:block;">Tanggal</label>';
    h += '<input type="date" id="tgl-absen" value="' + iso + '" onchange="onTanggalBerubah()" style="padding:6px 8px;border-radius:8px;border:1px solid #cbd5e1;width:130px;font-size:12px;"/></div>';
    h += '<div><label style="font-size:9px;font-weight:bold;color:#64748b;text-transform:uppercase;display:block;">Kelas</label>';
    h += '<select id="filterKelasAbsen" onchange="onKelasBerubah()" style="padding:6px 8px;border-radius:8px;border:2px solid #0d9488;font-weight:bold;width:100px;font-size:12px;">';
    daftarKelas.forEach(function(k) {
          h += '<option value="' + k + '" ' + (k === kelasPertama ? 'selected' : '') + '>' + k + '</option>';
    });
    h += '</select></div></div>';
    h += '<button id="btn-set-hadir" onclick="setSemuaHadir()" style="margin-top:4px;">✅ Set Hadir</button>';
    h += '<button id="btn-libur" onclick="kirimAbsensiLibur()" style="margin-top:4px; margin-left:8px; background:#6b7280; color:white; border:none; padding:6px 12px; border-radius:8px; cursor:pointer; font-weight:bold;">📅 Libur Nasional</button>';
    h += '</div>';
    h += '<div class="rekap-box">';
    h += '<div class="rekap-item hadir"><small>✅</small><b id="tot-h">0</b></div>';
    h += '<div class="rekap-item sakit"><small>🤒</small><b id="tot-s">0</b></div>';
    h += '<div class="rekap-item izin"><small>📝</small><b id="tot-i">0</b></div>';
    h += '<div class="rekap-item alpa"><small>❌</small><b id="tot-a">0</b></div>';
    h += '</div></div>';
    h += '<div id="daftar-absen">';

data.rows.forEach(function(row, index) {
      var kls = row[kKelas] || "";
      var displayStyle = (kls === kelasPertama) ? "" : "display:none";
      var nipdVal = String(row[kNIPD] || "").trim();
      
      var savedStatus = null;
      if (savedData && savedData[nipdVal]) {
        savedStatus = savedData[nipdVal];
      }

h += '<div class="row-absen" data-kelas="' + kls + '" style="' + displayStyle + '">';
      h += '<div class="row-absen-nama">' + (row[kNama] || "-") + '</div>';
      h += '<div class="opsi-absen" data-nisn="' + nipdVal + '">';
      h += '<label class="opt-label opt-h ' + (savedStatus === 'H' || savedStatus === '.' || savedStatus === '' ? 'is-checked' : '') + '">H';
      h += '<input type="radio" name="st-' + index + '" value="H" ' + (savedStatus === 'H' || savedStatus === '.' || savedStatus === '' ? 'checked' : '') + ' onchange="changeLabel(this);"/></label>';
      h += '<label class="opt-label opt-s ' + (savedStatus === 'S' ? 'is-checked' : '') + '">S';
      h += '<input type="radio" name="st-' + index + '" value="S" ' + (savedStatus === 'S' ? 'checked' : '') + ' onchange="changeLabel(this);"/></label>';
      h += '<label class="opt-label opt-i ' + (savedStatus === 'I' ? 'is-checked' : '') + '">I';
      h += '<input type="radio" name="st-' + index + '" value="I" ' + (savedStatus === 'I' ? 'checked' : '') + ' onchange="changeLabel(this);"/></label>';
      h += '<label class="opt-label opt-a ' + (savedStatus === 'A' ? 'is-checked' : '') + '">A';
      h += '<input type="radio" name="st-' + index + '" value="A" ' + (savedStatus === 'A' ? 'checked' : '') + ' onchange="changeLabel(this);"/></label>';
      h += '</div></div>';
    });

h += '</div>';
    h += '<button id="btn-kirim-absen" onclick="kirimAbsensi()" class="btn-save" style="margin-top:16px;">🚀 Simpan Absensi</button>';

view.innerHTML = h;
    hitungTotalDariData(savedData);

} catch(e) {
    view.innerHTML = "❌ Gagal terhubung ke server.";
    console.error(e);
    showToast('Gagal memuat data absensi', 'error');
  }
}

function changeLabel(inputEl) {
  var wrap = inputEl.closest('.opsi-absen');
  if(!wrap) return;
  wrap.querySelectorAll('.opt-label').forEach(function(lb) { lb.classList.remove('is-checked'); });
  var lb = inputEl.closest('label');
  if(lb) lb.classList.add('is-checked');
}

// =====================================================
// [ SET SEMUA HADIR - FIXED ]
// =====================================================

// =====================================================
// [ KIRIM ABSENSI - FIXED ]
// =====================================================

async function kirimAbsensi() {
  var pinKetik = prompt("🔐 Masukkan PIN ABSENSI:");
  if (!pinKetik) return;

var btn = document.getElementById('btn-kirim-absen');
  var tglInput = document.getElementById('tgl-absen').value;
  var kelas = document.getElementById('filterKelasAbsen').value;

if(!tglInput) {
    showToast('Pilih tanggal terlebih dahulu', 'warning');
    return alert("⚠️ Pilih tanggal terlebih dahulu.");
  }

var allRows = document.querySelectorAll('.row-absen');
  var list = [];
  
  allRows.forEach(function(row) {
    var kelasRow = row.getAttribute('data-kelas');
    if (kelasRow === kelas) {
      list.push(row);
    }
  });

if (list.length === 0) {
    showToast('Tidak ada siswa di kelas ' + kelas, 'warning');
    return alert("⚠️ Tidak ada siswa di kelas " + kelas);
  }

var parts = tglInput.split("-");
  var y = parts[0], m = parts[1], d = parts[2];
  
  var daftarBulan = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
  var bulan = daftarBulan[parseInt(m)-1];

if (items.length === 0) {
    showToast('Tidak ada data siswa', 'warning');
    return alert("⚠️ Tidak ada data siswa.");
  }

btn.innerText = "⏳ Mengirim...";
  btn.disabled = true;

var payload = {
    action: "updateAbsensiHorizontal",
    k: secretKey,
    pinInput: pinKetik,
    bulan: bulan,
    tanggal: String(parseInt(d)),
    items: items
  };

try {
    var response = await fetch(WEB_APP_URL, {
      method: "POST",
      body: JSON.stringify(payload)
    });
    var result = await response.json();
    
    if (result.status === "success") {
      showToast('Absensi berhasil disimpan!', 'success');
      alert("✅ Absensi Kelas " + kelas + " Berhasil Disimpan!");
      
      var savedData = await loadAbsensiData(tglInput, kelas);
      
      allRows.forEach(function(row) {
        var kelasRow = row.getAttribute('data-kelas');
        if (kelasRow === kelas) {
          var opsi = row.querySelector('.opsi-absen');
          if (opsi && savedData) {
            var nipd = opsi.getAttribute('data-nisn');
            var status = savedData[nipd] || "H";
            
            var radios = opsi.querySelectorAll('input[type="radio"]');
            radios.forEach(function(radio) {
              var val = radio.value;
              var label = radio.closest('label');
              if (label) {
                if (val === status || (status === '.' && val === 'H')) {
                  radio.checked = true;
                  label.classList.add('is-checked');
                } else {
                  label.classList.remove('is-checked');
                }
              }
            });
          }
        }
      });
      
      hitungTotalDariData(savedData);
      
    } else {
      showToast('Gagal: ' + (result.message || 'Akses Ditolak'), 'error');
      alert("❌ Gagal: " + (result.message || "Akses Ditolak"));
    }
  } catch(e) {
    showToast('Gagal terhubung ke server', 'error');
    alert("⚠️ Gagal terhubung ke server.");
  } finally {
    btn.innerText = "🚀 Simpan Absensi";
    btn.disabled = false;
  }
}

// =====================================================
// [ REKAP ABSENSI ]
// =====================================================

async function loadRekapAbsensi(el) {
  var view = document.getElementById('app-view');
  document.getElementById('title-page').innerText = "Rekap Absensi Per Kelas";
  
  document.querySelectorAll('.nav-link').forEach(function(l) { l.classList.remove('active'); });
  if(el) el.classList.add('active');
  if(window.innerWidth <= 768) closeSidebarMobile();
  
  var today = new Date();
  var iso = new Date(today.getTime() - (today.getTimezoneOffset() * 60000)).toISOString().split('T')[0];
  
  view.innerHTML = '<div style="margin-bottom:15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">';
  view.innerHTML += '<label style="font-size:12px;font-weight:bold;color:#64748b;">📅 Pilih Tanggal:</label>';
  view.innerHTML += '<input type="date" id="tglRekap" value="' + iso + '" onchange="fetchRekapAbsensi()" style="padding:8px 12px;border-radius:8px;border:2px solid #0d9488;font-size:13px;"/>';
  view.innerHTML += '<button onclick="fetchRekapAbsensi()" class="btn-save" style="width:auto;padding:8px 16px;">Tampilkan</button>';
  view.innerHTML += '</div><div id="rekapContainer"><p>⏳ Memuat data rekap...</p></div>';
  
  await fetchRekapAbsensi();
}

async function fetchRekapAbsensi() {
  var container = document.getElementById('rekapContainer');
  if (!container) return;
  
  var tgl = document.getElementById('tglRekap').value;
  if (!tgl) {
    container.innerHTML = '<p style="color:#94a3b8;">Pilih tanggal terlebih dahulu</p>';
    return;
  }
  
  container.innerHTML = '<p>⏳ Memuat data...</p>';
  
  try {
    var res = await fetch(WEB_APP_URL + '?action=getRekapAbsensi&tanggal=' + tgl + '&k=' + secretKey);
    var data = await res.json();
    
    if (!data.ok) {
      container.innerHTML = '<p style="color:#ef4444;">❌ ' + (data.message || 'Gagal memuat data') + '</p>';
      return;
    }
    
    var kelasList = Object.keys(data.rekap);
    if (kelasList.length === 0) {
      container.innerHTML = '<p style="color:#94a3b8;">📭 Belum ada data absensi untuk tanggal ' + data.tanggal + '</p>';
      return;
    }
    
    var html = '<div style="background:#f8fafc;padding:10px 14px;border-radius:10px;margin-bottom:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;">';
    html += '<span><strong>📅 ' + data.tanggal + '</strong></span>';
    html += '<span style="color:#64748b;">' + data.bulan + '</span>';
    html += '</div><div class="table-container"><table class="rekap-kelas-table"><thead><tr>';
    html += '<th style="text-align:left;">Kelas</th>';
    html += '<th style="color:#22c55e;">✅ Hadir</th>';
    html += '<th style="color:#eab308;">🤒 Sakit</th>';
    html += '<th style="color:#3b82f6;">📝 Izin</th>';
    html += '<th style="color:#ef4444;">❌ Alpa</th>';
    html += '<th>Total</th>';
    html += '</tr></thead><tbody>';
    
    var grandTotal = { H: 0, S: 0, I: 0, A: 0 };
    
    kelasList.sort().forEach(function(kelas) {
      var d = data.rekap[kelas];
      var total = (d.H || 0) + (d.S || 0) + (d.I || 0) + (d.A || 0);
      
      grandTotal.H += d.H || 0;
      grandTotal.S += d.S || 0;
      grandTotal.I += d.I || 0;
      grandTotal.A += d.A || 0;
      
      html += '<tr><td class="label-kelas">' + kelas + '</td>';
      html += '<td style="color:#22c55e;font-weight:600;">' + (d.H || 0) + '</td>';
      html += '<td style="color:#eab308;font-weight:600;">' + (d.S || 0) + '</td>';
      html += '<td style="color:#3b82f6;font-weight:600;">' + (d.I || 0) + '</td>';
      html += '<td style="color:#ef4444;font-weight:600;">' + (d.A || 0) + '</td>';
      html += '<td>' + total + '</td></tr>';
    });
    
    var grandTotalAll = grandTotal.H + grandTotal.S + grandTotal.I + grandTotal.A;
    
    html += '</tbody><tfoot><tr><td class="label-kelas">TOTAL</td>';
    html += '<td style="color:#22c55e;font-weight:700;">' + grandTotal.H + '</td>';
    html += '<td style="color:#eab308;font-weight:700;">' + grandTotal.S + '</td>';
    html += '<td style="color:#3b82f6;font-weight:700;">' + grandTotal.I + '</td>';
    html += '<td style="color:#ef4444;font-weight:700;">' + grandTotal.A + '</td>';
    html += '<td style="font-weight:700;">' + grandTotalAll + '</td></tr></tfoot></table></div>';
    
    container.innerHTML = html;
    
  } catch (e) {
    console.error(e);
    container.innerHTML = '<p style="color:#ef4444;">❌ Gagal terhubung ke server</p>';
    showToast('Gagal memuat rekap absensi', 'error');
  }
}

// =====================================================
// [ LOAD PENGADUAN ]
// =====================================================

function loadPengaduan(el) {
  var view = document.getElementById('app-view');
  document.getElementById('title-page').innerText = "Layanan Pengaduan Siswa";
  
  document.querySelectorAll('.nav-link').forEach(function(l) { l.classList.remove('active'); });
  if (el) el.classList.add('active');
  if (window.innerWidth <= 768) closeSidebarMobile();

view.innerHTML = `
    <div style="max-width:500px; margin:20px auto; background:#ffffff; padding:24px; border-radius:16px; border:1px solid #e5e7eb;">
      <div style="margin-bottom:20px;">
        <h2 style="margin:0; font-size:20px; font-weight:700; color:#111827;">📢 Kirim Pengaduan</h2>
        <p style="margin-top:4px; font-size:13px; color:#6b7280;">Identitas pelapor bersifat rahasia.</p>
      </div>
      
      <form id="formPengaduan" onsubmit="handleKirimPengaduan(event)">
        <div style="margin-bottom:14px;">
          <label style="font-size:12px; font-weight:600; color:#374151;">Nama (opsional)</label>
          <input id="aduan_nama" type="text" placeholder="Nama pelapor" 
            style="width:100%; padding:10px 12px; margin-top:6px; border-radius:10px; border:1px solid #d1d5db; font-size:13px;"/>
        </div>

<div style="margin-bottom:14px;">
          <label style="font-size:12px; font-weight:600; color:#374151;">Kategori</label>
          <select id="aduan_topik" required
            style="width:100%; padding:10px 12px; margin-top:6px; border-radius:10px; border:1px solid #d1d5db; font-size:13px;">
            <option value="" disabled selected>Pilih kategori</option>
            <option value="Perundungan">Bullying</option>
            <option value="Fasilitas">Fasilitas</option>
            <option value="Keamanan">Keamanan</option>
            <option value="Lainnya">Lainnya</option>
          </select>
        </div>

<div style="margin-bottom:18px;">
          <label style="font-size:12px; font-weight:600; color:#374151;">Isi Pengaduan</label>
          <textarea id="aduan_isi" required rows="4" placeholder="Tuliskan laporan singkat dan jelas"
            style="width:100%; padding:10px 12px; margin-top:6px; border-radius:10px; border:1px solid #d1d5db; font-size:13px; resize:none;">

TOTAL SISWA

KASUS PELANGGARAN

DALAM PROSES