@extends('layouts.siswa')
@section('title', 'Kerjakan — ' . $tugas->indikator->deskripsi)
@section('kelas-label', $tugas->kelas->nama)
@section('total-poin', '—')

@section('topbar')
<div class="si-topbar-left">
    <a href="{{ route('siswa.dashboard') }}" style="font-size:13px; color:#9ca3af; text-decoration:none">← Beranda</a>
    <div class="si-page-title" style="font-size:18px">{{ $tugas->indikator->deskripsi }}</div>
    <div class="si-page-sub">{{ $tugas->kelas->nama }} · Jawab semua soal dengan teliti ya! 😊</div>
</div>
<div class="si-topbar-right">
    <div class="si-timer" id="timerDisplay">⏱ 00:00</div>
</div>
@endsection

@section('content')

@php $daftarSoal = $tugas->soal; $total = $daftarSoal->count(); @endphp

<div class="si-kerjakan-wrap">

    {{-- Progress header --}}
    <div class="si-soal-header">
        <div>
            <div class="si-soal-title">{{ $tugas->indikator->deskripsi }}</div>
            <div class="si-soal-num" id="soalNum">Soal 1 dari {{ $total }}</div>
        </div>
        <div class="si-prog-bar">
            <div class="si-prog-fill" id="progFill" style="width:{{ $total > 0 ? round(1/$total*100) : 0 }}%"></div>
        </div>
    </div>

    {{-- Form: semua soal disimpan, ditampilkan satu per satu via JS --}}
    <form method="POST" action="{{ route('siswa.tugas.submit', $tugas) }}" id="formKerjakan">
        @csrf

        @foreach($daftarSoal as $idx => $soal)
        <div class="si-soal-card" id="soal-{{ $idx }}" style="{{ $idx > 0 ? 'display:none' : '' }}">

            {{-- Pertanyaan --}}
            <div class="si-soal-pertanyaan">{!! nl2br(e($soal->pertanyaan)) !!}</div>

            {{-- Gambar (jika ada) --}}
            @if($soal->gambar)
            <div class="si-soal-gambar">
                <img src="{{ asset('storage/' . $soal->gambar) }}" alt="Gambar soal">
            </div>
            @endif

            {{-- Pilihan A/B/C --}}
            <div class="si-pilihan-list" id="pilihan-{{ $idx }}">
                @foreach($soal->pilihan as $j => $p)
                <label class="si-pilihan" id="lbl-{{ $idx }}-{{ $j }}" onclick="pilih({{ $idx }}, {{ $j }}, this)">
                    <input type="radio" name="jawaban[{{ $soal->id }}]" value="{{ $p->id }}" required>
                    <div class="si-pilihan-huruf">{{ chr(65 + $j) }}</div>
                    <span>{{ $p->teks }}</span>
                </label>
                @endforeach
            </div>

        </div>
        @endforeach

        {{-- Navigasi --}}
        <div class="si-soal-nav">
            <button type="button" class="btn btn-outline" id="btnPrev" onclick="navigasi(-1)" style="display:none">
                ← Sebelumnya
            </button>
            <div style="flex:1"></div>
            <button type="button" class="btn btn-purple" id="btnNext" onclick="navigasi(1)" style="font-weight:700; padding:10px 22px">
                Selanjutnya →
            </button>
            <button type="submit" class="btn btn-purple" id="btnKumpulkan" style="display:none; font-weight:700; padding:10px 22px"
                onclick="return konfirmasiKumpul()">
                ✓ Kumpulkan Jawaban
            </button>
        </div>

        <div class="si-tip-kecil">💡 Tip: Hitung pelan-pelan ya, kamu pasti bisa! 😄</div>

    </form>

</div>

@endsection

@section('scripts')
<script>
const totalSoal = {{ $total }};
let current = 0;
const jawaban = new Array(totalSoal).fill(null); // index → pilihan label index

// Timer
let detik = 0;
const timerEl = document.getElementById('timerDisplay');
setInterval(() => {
    detik++;
    const m = String(Math.floor(detik / 60)).padStart(2, '0');
    const s = String(detik % 60).padStart(2, '0');
    timerEl.textContent = '⏱ ' + m + ':' + s;
}, 1000);

function pilih(idxSoal, idxPilihan, el) {
    jawaban[idxSoal] = idxPilihan;
    // Reset semua pilihan di soal ini
    const lbls = document.querySelectorAll('#pilihan-' + idxSoal + ' .si-pilihan');
    lbls.forEach(l => l.classList.remove('dipilih'));
    el.classList.add('dipilih');
}

function tampilSoal(idx) {
    // Sembunyikan semua
    for (let i = 0; i < totalSoal; i++) {
        document.getElementById('soal-' + i).style.display = 'none';
    }
    document.getElementById('soal-' + idx).style.display = 'block';

    // Update progress
    document.getElementById('soalNum').textContent = 'Soal ' + (idx + 1) + ' dari ' + totalSoal;
    document.getElementById('progFill').style.width = Math.round((idx + 1) / totalSoal * 100) + '%';

    // Tombol navigasi
    document.getElementById('btnPrev').style.display = idx > 0 ? 'inline-flex' : 'none';
    const isLast = idx === totalSoal - 1;
    document.getElementById('btnNext').style.display = isLast ? 'none' : 'inline-flex';
    document.getElementById('btnKumpulkan').style.display = isLast ? 'inline-flex' : 'none';

    current = idx;
}

function navigasi(arah) {
    if (arah > 0 && jawaban[current] === null) {
        // Belum pilih jawaban
        const lbls = document.querySelectorAll('#pilihan-' + current + ' .si-pilihan');
        lbls.forEach(l => { l.style.borderColor = '#ef4444'; });
        setTimeout(() => lbls.forEach(l => { l.style.borderColor = ''; }), 800);
        return;
    }
    const next = current + arah;
    if (next >= 0 && next < totalSoal) tampilSoal(next);
}

function konfirmasiKumpul() {
    // Cek semua soal sudah dijawab
    const belum = jawaban.filter(j => j === null).length;
    if (belum > 0) {
        alert('Masih ada ' + belum + ' soal yang belum dijawab. Yuk periksa lagi! 😊');
        // Pergi ke soal pertama yang belum dijawab
        const idx = jawaban.findIndex(j => j === null);
        tampilSoal(idx);
        return false;
    }
    return confirm('Yakin sudah selesai? Jawaban tidak bisa diubah lagi setelah dikumpulkan. 😊');
}

// Pulihkan state jika user klik pilihan sebelum submit
document.querySelectorAll('input[type=radio]').forEach(input => {
    input.addEventListener('change', () => {
        // sudah ditangani oleh onclick label
    });
});
</script>
@endsection