<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Presensi Kelas 10</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body{font-family:'Segoe UI',sans-serif;background:#0b1120;color:#e6eef8;margin:0;padding:20px;}
h1{text-align:center;color:#b084ff}
input,select,button{padding:8px;border:none;border-radius:6px;margin:5px;width:100%}
button{background:#6a11cb;color:#fff;font-weight:bold;cursor:pointer}
button:hover{background:#7b35e2}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:8px;border-bottom:1px solid rgba(255,255,255,0.1)}
canvas{background:#fff;border-radius:10px;margin-top:20px;max-width:100%}
.success{color:#4CAF50;margin-top:8px}
.error{color:#f44336;margin-top:8px}
</style>
</head>
<body>
<h1>📋 Presensi Kelas 10</h1>
<label>Nama:</label>
<input type="text" id="nama" placeholder="Masukkan nama lengkap">
<label>Kelas:</label>
<input type="text" id="kelas" placeholder="Masukkan nama kelas">
<label>Status Kehadiran:</label>
<select id="status">
<option value="">-- Pilih Status --</option>
<option value="Hadir">Hadir</option>
<option value="Izin">Izin</option>
<option value="Sakit">Sakit</option>
<option value="Alpha">Alpha</option>
<option value="Bolos">Bolos</option>
</select>
<button id="btnKirim">Kirim Presensi</button>
<div id="statusMsg"></div>
<hr>
<h3>Rekap Siswa</h3>
<table id="rekapTable">
<thead>
<tr>
<th>No</th><th>Nama</th><th>Kelas</th><th>Status</th><th>Waktu</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h3>Grafik Presensi</h3>
<canvas id="chart"></canvas>
<script>
const sheetURL = "https://script.google.com/macros/s/AKfycbxg20H-e4C2-gnAQH0D-5DIH5T3Uo0SDqyXopIHb5TFun56ORLROC8LVArX1gybZi4w/exec";
let data = JSON.parse(localStorage.getItem("presensiData")||"[]");
function simpanLocal(d){data.push(d);localStorage.setItem("presensiData",JSON.stringify(data));renderTable();renderChart();}
function renderTable(){
const tbody=document.querySelector("#rekapTable tbody");
tbody.innerHTML="";
data.forEach((d,i)=>{
const tr=document.createElement("tr");
tr.innerHTML=`<td>${i+1}</td><td>${d.nama}</td><td>${d.kelas}</td><td>${d.status}</td><td>${d.waktu}</td>`;
tbody.appendChild(tr);
});
}
function renderChart(){
const ctx=document.getElementById("chart").getContext("2d");
const count={Hadir:0,Izin:0,Sakit:0,Alpha:0,Bolos:0};
data.forEach(d=>{if(count[d.status]!=null)count[d.status]++;});
if(window.myChart)window.myChart.destroy();
window.myChart=new Chart(ctx,{type:"bar",data:{labels:Object.keys(count),datasets:[{data:Object.values(count),backgroundColor:["#4CAF50","#2196F3","#FFC107","#FF9800","#F44336"]}]},options:{plugins:{legend:{display:false}}}});
}
document.getElementById("btnKirim").addEventListener("click",()=>{
const nama=document.getElementById("nama").value.trim();
const kelas=document.getElementById("kelas").value.trim();
const status=document.getElementById("status").value.trim();
const msg=document.getElementById("statusMsg");
if(!nama||!kelas||!status){msg.innerHTML="<div class='error'>⚠️ Lengkapi semua data!</div>";return;}
const waktu=new Date().toLocaleString("id-ID");
const d={nama,kelas,status,waktu};
simpanLocal(d);
msg.innerHTML="<div class='success'>✅ Presensi tersimpan & dikirim!</div>";
fetch(sheetURL,{method:"POST",mode:"no-cors",body:JSON.stringify({nama,kelas,status})});
document.getElementById("nama").value="";document.getElementById("kelas").value="";document.getElementById("status").value="";
});
renderTable();renderChart();
</script>
</body>
</html>