<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Simulasi TKA SD Berbasis PHP</title>
<style>
:root{--primary:#2563eb;--primary2:#1d4ed8;--bg:#f3f6fb;--card:#fff;--text:#172033;--muted:#64748b;--border:#dbe2ea}
*{box-sizing:border-box} 
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);text-align:left;}
header{background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:20}
.header-in{max-width:980px;margin:auto;display:flex;align-items:center;justify-content:space-between}
main{max-width:980px;margin:18px auto;padding:0 12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:14px;text-align:left;}

input, select{width:100%;padding:13px;border:1px solid var(--border);border-radius:11px;font-size:16px;background:#fff;margin-bottom:12px}
button{border:0;border-radius:11px;padding:12px 16px;font-weight:700;cursor:pointer;font-size:15px;width:100%}
.primary{background:var(--primary);color:#fff}.primary:hover{background:var(--primary2)}.secondary{background:#eef2ff;color:#1e40af}.danger{background:#fee2e2;color:#991b1b}
.hidden{display:none!important}
.pill{display:inline-block;padding:5px 9px;border-radius:99px;font-size:12px;font-weight:700;background:#eef2ff;color:#3730a3;margin-bottom:8px}
.progress{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden}.progress>div{height:100%;background:var(--primary);width:0}

/* TATA LETAK SOAL YANG BERSIH & KONSISTEN RATA KIRI */
#questionCard { width: 100%; text-align: left; }
.qtext { font-size: 17px; line-height: 1.65; margin: 10px 0 16px; text-align: left; }
.stimulus { background: #f8fafc; border: 1px solid var(--border); padding: 14px; border-radius: 12px; margin: 10px 0 16px; text-align: left; }

/* OPSI PILIHAN GANDA (FLEXBOX AGAR TIDAK BERANTAKAN) */
.option { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    border: 1px solid var(--border); 
    padding: 14px; 
    border-radius: 12px; 
    margin: 10px 0; 
    cursor: pointer; 
    text-align: left; 
    background: #fff; 
    width: 100%;
}
.option:hover { background: #f8fafc; border-color: #93c5fd; }
.option input { 
    margin-top: 3px; 
    accent-color: var(--primary); 
    flex-shrink: 0; 
    width: 18px; 
    height: 18px; 
}
.option span { 
    flex-grow: 1; 
    text-align: left; 
    line-height: 1.5; 
}
.option.selected { border-color: #60a5fa; background: #eff6ff; }

/* TABEL KATEGORI */
.cat-table { width: 100%; border-collapse: collapse; margin-top: 12px; text-align: left; }
.cat-table th, .cat-table td { border: 1px solid var(--border); padding: 10px; text-align: left; }
.cat-table th { background: #f8fafc; }
.cat-table select { padding: 9px; border-radius: 8px; width: 100%; }

.navgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}
.num{padding:8px 0;text-align:center;border-radius:8px;background:#eef2f7;border:1px solid var(--border);font-size:13px}
.num.done{background:#dcfce7;color:#166534}
.num.current{background:#dbeafe;color:#1d4ed8;font-weight:800}

.result-score{font-size:52px;font-weight:900;color:var(--primary);text-align: center;}
.review{border-top:1px solid var(--border);padding:12px 0;text-align: left;}
.correct{color:#15803d;font-weight:bold}
.wrong{color:#b91c1c;font-weight:bold}

@media(max-width:600px){
    .navgrid{grid-template-columns:repeat(6,1fr)}
    .card{padding:14px;border-radius:14px}
}
</style>
</head>
<body>
<header>
 <div class="header-in">
  <div><b>SIMULASI TKA SD</b></div>
  <div id="timer" class="hidden" style="background:#ffffff1c;padding:6px 12px;border-radius:8px;font-weight:bold">90:00</div>
 </div>
</header>

<main>
<!-- SECTION: LOGIN SISWA -->
<section id="start" class="card">
 <div style="text-align:center">
  <div class="pill">LOGIN SISWA</div>
  <h1>Pilih Sesi & Masuk</h1>
 </div>
 <label><b>Pilih Paket Ujian</b></label>
 <select id="examSelect">
     <option value="1" data-duration="90">TKA 1 (TA: 2026/2027)</option>
     <option value="2" data-duration="90">TKA2 (TA: 2026/2027)</option>
   </select>

 <label><b>Pilih Kelas</b></label>
 <select id="classSelect" onchange="filterStudents()">
  <option value="">-- Pilih Kelas --</option>
     <option value="1A">1A</option>
     <option value="1B">1B</option>
   </select>

 <label><b>Pilih Nama Siswa</b></label>
 <select id="studentSelect">
  <option value="">-- Pilih Kelas Terlebih Dahulu --</option>
 </select>

 <label><b>Password Siswa</b></label>
 <input id="studentPassword" type="password" placeholder="Masukkan password siswa..." autocomplete="off">

 <button class="primary" onclick="startTest()">Mulai Simulasi</button>
 <div style="text-align:center;margin-top:14px"><a href="login.php" style="font-size:13px;color:var(--primary);text-decoration:none">Login Guru / Admin</a></div>
</section>

<!-- SECTION: TEST -->
<section id="test" class="hidden">
 <div class="card">
  <div style="display:flex;justify-content:space-between"><b id="subjectTitle">TKA SD</b><span id="counter">Soal 1 dari 30</span></div>
  <div class="progress" style="margin-top:10px"><div id="progress"></div></div>
 </div>
 <div id="questionCard" class="card"></div>
 <div class="card" style="display:flex;justify-content:space-between; gap: 10px;">
  <button class="secondary" onclick="prevQ()">← Sebelumnya</button>
  <button class="primary" onclick="nextQ()">Berikutnya →</button>
 </div>
 <div class="card"><h3>Nomor Soal</h3><div class="navgrid" id="navgrid"></div></div>
 <div class="card"><button class="danger" onclick="submitTest()">Kumpulkan Jawaban</button></div>
</section>

<!-- SECTION: RESULT -->
<section id="result" class="hidden">
 <div class="card" style="text-align:center">
  <div class="pill">HASIL SIMULASI</div>
  <h2 id="resultName"></h2>
  <div class="result-score" id="score">0</div>
  <p id="scoreDetail" class="muted" style="text-align:center"></p>
  <button class="primary" onclick="location.reload()">Selesai / Ulangi</button>
 </div>
 <div class="card"><h3>Ringkasan Jawaban</h3><div id="review"></div></div>
</section>
</main>

<script>
const allStudents = [{"id":1,"nis":"001","nama_siswa":"IBNU HAKIM","kelas":"1A","password":"123"},{"id":2,"nis":"002","nama_siswa":"RAHMA AULIA AZIZ","kelas":"1A","password":"123"},{"id":3,"nis":"003","nama_siswa":"AHMAD NASHIR ALMUHTADI","kelas":"1A","password":"123"},{"id":4,"nis":"004","nama_siswa":"RATIH CHRISTINAWATI","kelas":"1A","password":"123"},{"id":5,"nis":"005","nama_siswa":"AMELIA SUSANTI","kelas":"1A","password":"123"},{"id":6,"nis":"006","nama_siswa":"RIDHO PRIBADI SIDIQ","kelas":"1A","password":"123"},{"id":7,"nis":"007","nama_siswa":"IIN SITI HARTINAH","kelas":"1A","password":"123"},{"id":8,"nis":"008","nama_siswa":"MUHAMMAD FARHAN ZUHDI","kelas":"1A","password":"123"},{"id":9,"nis":"009","nama_siswa":"RIYANTI","kelas":"1A","password":"123"},{"id":10,"nis":"010","nama_siswa":"SUCIPTO","kelas":"1A","password":"123"},{"id":11,"nis":"011","nama_siswa":"MUHAMMAD SABTURI","kelas":"1A","password":"123"},{"id":12,"nis":"012","nama_siswa":"TRESNA SARI","kelas":"1A","password":"123"},{"id":13,"nis":"013","nama_siswa":"ABDUROHMAN","kelas":"1A","password":"123"},{"id":14,"nis":"014","nama_siswa":"EVRILIENA","kelas":"1A","password":"123"},{"id":15,"nis":"015","nama_siswa":"CHANDRA GUMELAR","kelas":"1A","password":"123"},{"id":16,"nis":"016","nama_siswa":"MAYA RESMAYANTY","kelas":"1A","password":"123"},{"id":17,"nis":"017","nama_siswa":"SITI NURHASNA FAUZIAH","kelas":"1A","password":"123"},{"id":18,"nis":"018","nama_siswa":"NANA SURYANA","kelas":"1A","password":"123"},{"id":19,"nis":"019","nama_siswa":"NURUL MAULIDA","kelas":"1A","password":"123"},{"id":20,"nis":"020","nama_siswa":"WIDODO","kelas":"1A","password":"123"},{"id":21,"nis":"021","nama_siswa":"ILMIRA YUNTAPA","kelas":"1A","password":"123"},{"id":22,"nis":"022","nama_siswa":"YUSEP SYAMSUL BAKHRI","kelas":"1A","password":"123"},{"id":23,"nis":"023","nama_siswa":"ZAITUN HASANAH HASIBUAN","kelas":"1A","password":"123"},{"id":24,"nis":"024","nama_siswa":"E. SUTISNA","kelas":"1A","password":"123"},{"id":25,"nis":"025","nama_siswa":"SRI MELLIA MARINDA","kelas":"1A","password":"123"},{"id":26,"nis":"026","nama_siswa":"SITI SOBIAH","kelas":"1A","password":"123"},{"id":27,"nis":"027","nama_siswa":"SURYANA MUHAROM","kelas":"1A","password":"123"},{"id":28,"nis":"028","nama_siswa":"BAMBANG SUMANTRI","kelas":"1A","password":"123"},{"id":29,"nis":"029","nama_siswa":"WURI PURWANDANI","kelas":"1A","password":"123"},{"id":30,"nis":"030","nama_siswa":"HERI YAKUB","kelas":"1A","password":"123"},{"id":31,"nis":"031","nama_siswa":"IDA MARLINA","kelas":"1A","password":"123"},{"id":32,"nis":"032","nama_siswa":"MUHAMAD SUHADI","kelas":"1A","password":"123"},{"id":33,"nis":"033","nama_siswa":"YANIS DESTIANI","kelas":"1A","password":"123"},{"id":34,"nis":"034","nama_siswa":"RIZKA NUR FAJRIYAH","kelas":"1A","password":"123"},{"id":35,"nis":"035","nama_siswa":"SALISTIA PUTRA PERDANA","kelas":"1A","password":"123"},{"id":36,"nis":"036","nama_siswa":"TRIA SUKMA WAHYUNINGSIH","kelas":"1B","password":"123"},{"id":37,"nis":"037","nama_siswa":"YUSUF SUPRIADI","kelas":"1B","password":"123"},{"id":38,"nis":"038","nama_siswa":"ASIYAH","kelas":"1B","password":"123"},{"id":39,"nis":"039","nama_siswa":"SYAHRUL ALAMSYAH","kelas":"1B","password":"123"},{"id":40,"nis":"040","nama_siswa":"MARSAMBAS","kelas":"1B","password":"123"},{"id":41,"nis":"041","nama_siswa":"RESTA DESTY LADINA","kelas":"1B","password":"123"},{"id":42,"nis":"042","nama_siswa":"EVA SUSIANA","kelas":"1B","password":"123"},{"id":43,"nis":"043","nama_siswa":"RIZKY ADITIYA RHAMADAN","kelas":"1B","password":"123"},{"id":44,"nis":"044","nama_siswa":"DEDI SONETA","kelas":"1B","password":"123"},{"id":45,"nis":"045","nama_siswa":"NENG WINA APRILIANA","kelas":"1B","password":"123"},{"id":46,"nis":"046","nama_siswa":"AYUNG SUNANDAR","kelas":"1B","password":"123"},{"id":47,"nis":"047","nama_siswa":"NEVTIKA HERNI","kelas":"1B","password":"123"},{"id":48,"nis":"048","nama_siswa":"ARIEF MOHAMMAD RACHMAN","kelas":"1B","password":"123"},{"id":49,"nis":"049","nama_siswa":"RAHMAYENI","kelas":"1B","password":"123"},{"id":50,"nis":"050","nama_siswa":"SODIK PERMANA","kelas":"1B","password":"123"},{"id":51,"nis":"051","nama_siswa":"YUSTIKA ARIFA RAHMA AMIR","kelas":"1B","password":"123"},{"id":52,"nis":"052","nama_siswa":"ROBBY SALMON","kelas":"1B","password":"123"},{"id":53,"nis":"053","nama_siswa":"SRI RATNA DEWI","kelas":"1B","password":"123"},{"id":54,"nis":"054","nama_siswa":"KURNIA WAHYUDI","kelas":"1B","password":"123"},{"id":55,"nis":"055","nama_siswa":"RADEN ETI SITI MARYAM","kelas":"1B","password":"123"},{"id":56,"nis":"056","nama_siswa":"JOVANSA KARYADI","kelas":"1B","password":"123"},{"id":57,"nis":"057","nama_siswa":"UMI RUSMANAH","kelas":"1B","password":"123"},{"id":58,"nis":"058","nama_siswa":"LANI PUJIASTUTI PRATIWI","kelas":"1B","password":"123"},{"id":59,"nis":"059","nama_siswa":"SUNARDI","kelas":"1B","password":"123"},{"id":60,"nis":"060","nama_siswa":"ABDUL AJIS","kelas":"1B","password":"123"},{"id":61,"nis":"061","nama_siswa":"ARUM BINTARI","kelas":"1B","password":"123"},{"id":62,"nis":"062","nama_siswa":"MUHAMMAD ARIF SLAMET RAHARJO","kelas":"1B","password":"123"},{"id":63,"nis":"063","nama_siswa":"SUSI TRI STYANINGRUM","kelas":"1B","password":"123"},{"id":64,"nis":"064","nama_siswa":"ADE WILLY SURTINIH","kelas":"1B","password":"123"},{"id":65,"nis":"065","nama_siswa":"SETYANTO","kelas":"1B","password":"123"},{"id":66,"nis":"066","nama_siswa":"WIYANTO","kelas":"1B","password":"123"},{"id":67,"nis":"067","nama_siswa":"ZAHRA OKTAVIA RAHMANI","kelas":"1B","password":"123"},{"id":68,"nis":"068","nama_siswa":"FAHMY FATMAWATY","kelas":"1B","password":"123"},{"id":69,"nis":"069","nama_siswa":"RICKY ADITYA","kelas":"1B","password":"123"},{"id":70,"nis":"070","nama_siswa":"BAMBANG HARYANTO","kelas":"1B","password":"123"},{"id":71,"nis":"071","nama_siswa":"LULUK FARIDAH","kelas":"1B","password":"123"}];

function filterStudents() {
    let selectedClass = document.getElementById("classSelect").value;
    let studentSelect = document.getElementById("studentSelect");
    studentSelect.innerHTML = '<option value="">-- Pilih Nama Siswa --</option>';
    
    if (!selectedClass) return;

    let filtered = allStudents.filter(s => String(s.kelas).trim() === String(selectedClass).trim());
    filtered.forEach(s => {
        let opt = document.createElement("option");
        opt.value = s.id;
        opt.textContent = s.nama_siswa;
        studentSelect.appendChild(opt);
    });
}

let questions = [], current = 0, answers = [], remaining = 90*60, timerInterval = null, studentData = null;

async function startTest() {
    let examId = document.getElementById("examSelect").value;
    let studentId = document.getElementById("studentSelect").value;
    let password = document.getElementById("studentPassword").value.trim();
    let selectedOption = document.querySelector("#examSelect option:checked");

    if (!studentId) { alert("Silakan pilih nama siswa."); return; }
    if (!password) { alert("Masukkan password siswa."); return; }

    studentData = allStudents.find(s => s.id == studentId);
    if (!studentData || String(studentData.password).trim() !== String(password).trim()) {
        alert("Password salah! Silakan periksa kembali.");
        return;
    }

    let durationMin = parseInt(selectedOption.getAttribute("data-duration")) || 90;
    remaining = durationMin * 60;

    try {
        let res = await fetch(`get_questions.php?exam_id=${examId}`);
        questions = await res.json();
        if (!questions || questions.length === 0) { alert("Soal belum tersedia untuk ujian ini."); return; }
        answers = Array(questions.length).fill(null);
    } catch(e) {
        alert("Gagal memuat soal dari server."); return;
    }

    document.getElementById("start").classList.add("hidden");
    document.getElementById("test").classList.remove("hidden");
    document.getElementById("timer").classList.remove("hidden");
    
    buildNav(); render();
    timerInterval = setInterval(tick, 1000);
}

function tick() {
    remaining--;
    if (remaining <= 0) { remaining = 0; clearInterval(timerInterval); submitTest(true); }
    let m = Math.floor(remaining/60), s = remaining%60;
    document.getElementById("timer").textContent = `${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
}

function buildNav() {
    document.getElementById("navgrid").innerHTML = questions.map((_, i) => `<button class="num" id="n${i}" onclick="go(${i})">${i+1}</button>`).join("");
}

function go(i) { current = i; render(); }
function prevQ() { if (current > 0) { current--; render(); } }
function nextQ() { if (current < questions.length - 1) { current++; render(); } else { submitTest(); } }

function saveChoice(idx) {
    let q = questions[current];
    if (q.type === "MCMA") {
        if (!Array.isArray(answers[current])) answers[current] = [];
        let a = answers[current];
        if (a.includes(idx)) answers[current] = a.filter(x => x !== idx);
        else a.push(idx);
    } else {
        answers[current] = idx;
    }
    updateNav(); render();
}

function saveCat(i, val) {
    if (!Array.isArray(answers[current])) answers[current] = Array(questions[current].rows.length).fill(null);
    answers[current][i] = Number(val);
    updateNav();
}

function render() {
    let q = questions[current];
    document.getElementById("subjectTitle").textContent = q.subject || "TKA SD";
    document.getElementById("counter").textContent = `Soal ${current+1} dari ${questions.length}`;
    document.getElementById("progress").style.width = ((current+1)/questions.length*100) + "%";
    
    let html = `<div class="pill">${q.type}</div>`;
    if (q.competency) html += `<div class="muted" style="font-size:13px; margin-bottom:8px">${q.competency}</div>`;
    
    if (q.stimulus) html += `<div class="stimulus"><b>Stimulus:</b><br>${q.stimulus}</div>`;
    html += `<div class="qtext"><b>${current+1}.</b> ${q.question || ""}</div>`;
    
    if (q.image) {
        html += `<div style="margin:12px 0"><img src="${q.image}" style="max-width:100%;max-height:240px;border-radius:10px;border:1px solid var(--border)"></div>`;
    }
    
    if (q.type === "PG" || q.type === "MCMA") {
        let opts = q.opts || [];
        html += opts.map((o, i) => {
            let sel = q.type === "MCMA" ? Array.isArray(answers[current]) && answers[current].includes(i) : answers[current] === i;
            return `<label class="option ${sel?"selected":""}"><input type="${q.type==="MCMA"?"checkbox":"radio"}" name="q_${current}" ${sel?"checked":""} onclick="saveChoice(${i})"><span><b>${String.fromCharCode(65+i)}.</b> ${o}</span></label>`;
        }).join("");
    } else if (q.type === "KATEGORI") {
        html += `<table class="cat-table"><thead><tr><th>Pernyataan</th><th>Jawaban</th></tr></thead><tbody>`;
        let rows = q.rows || [];
        rows.forEach((r, i) => {
            let val = Array.isArray(answers[current]) ? answers[current][i] : null;
            html += `<tr><td>${String.fromCharCode(65+i)}. ${r[0]}</td><td><select onchange="saveCat(${i},this.value)"><option value="">Pilih</option><option value="0" ${val===0?"selected":""}>${r[1] || "Benar/Sesuai"}</option><option value="1" ${val===1?"selected":""}>${r[1]==="Benar"?"Salah":"Tidak Sesuai"}</option></select></td></tr>`;
        });
        html += `</tbody></table>`;
    }
    document.getElementById("questionCard").innerHTML = html;
    updateNav();
}

function updateNav() {
    questions.forEach((q, i) => {
        let d = answers[i] !== null && !(Array.isArray(answers[i]) && answers[i].some(x => x === null));
        document.getElementById("n"+i)?.classList.toggle("done", d);
        document.getElementById("n"+i)?.classList.toggle("current", i === current);
    });
}

function normalize(a) { return Array.isArray(a) ? [...a].sort((x, y) => x - y) : a; }
function isCorrect(q, a) {
    let ans = q.answer || [];
    if (q.type === "PG") return a === ans[0];
    if (q.type === "MCMA") return Array.isArray(a) && JSON.stringify(normalize(a)) === JSON.stringify(normalize(ans));
    if (q.type === "KATEGORI") return Array.isArray(a) && a.every((v, i) => v === ans[i]);
    return false;
}

async function submitTest(auto = false) {
    if (!auto && !confirm("Yakin ingin mengumpulkan jawaban?")) return;
    clearInterval(timerInterval);
    
    let score = 0, correctCount = 0;
    let detailedAnswers = [];

    questions.forEach((q, i) => {
        let correct = isCorrect(q, answers[i]);
        if (correct) { score++; correctCount++; }
        detailedAnswers.push({
            nomor: i + 1,
            question: q.question,
            user_answer: answers[i],
            correct_answer: q.answer,
            is_correct: correct
        });
    });
    let nilai = Math.round((score / questions.length) * 100);
    let examId = document.getElementById("examSelect").value;

    await fetch('save_result.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            student_id: studentData.id,
            exam_id: examId,
            score: nilai,
            correct_count: correctCount,
            total_questions: questions.length,
            answers_json: detailedAnswers
        })
    });

    document.getElementById("test").classList.add("hidden");
    document.getElementById("timer").classList.add("hidden");
    document.getElementById("result").classList.remove("hidden");
    document.getElementById("resultName").textContent = studentData.nama_siswa;
    document.getElementById("score").textContent = nilai;
    document.getElementById("scoreDetail").textContent = `Benar ${correctCount} dari ${questions.length} soal`;
    
    document.getElementById("review").innerHTML = detailedAnswers.map(d => `
        <div class="review">
          <b>Soal ${d.nomor}:</b> ${d.question}<br>
          Status: <span class="${d.is_correct ? 'correct' : 'wrong'}">${d.is_correct ? '✓ Benar' : '✗ Salah'}</span>
        </div>
    `).join("");
}
</script>
</body>
</html>