@extends('layouts.siswa')
@section('title', 'Hasil — ' . $tugas->indikator->deskripsi)
@section('kelas-label', $tugas->kelas->nama)
@php
    $totalPoinSiswa = \App\Models\JawabanSession::where('siswa_id', auth()->id())->where('selesai', true)->sum('skor');
@endphp
@section('total-poin', $totalPoinSiswa)

@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 }}</div>
</div>
@endsection

@section('content')

@php
    $s     = $session->skor;
    $benar = $jawaban->filter(fn($j) => $j->pilihan->adalah_benar)->count();
    $salah = $jawaban->count() - $benar;
    $warnaS = $s >= 70 ? '#16a34a' : ($s >= 50 ? '#d97706' : '#dc2626');
    $emoji  = $s >= 90 ? '🎉' : ($s >= 70 ? '😊' : ($s >= 50 ? '💪' : '🌱'));
    $judul  = $s >= 90 ? 'Wah, sempurna!' : ($s >= 70 ? 'Wah, hebat!' : ($s >= 50 ? 'Bagus, terus semangat!' : 'Yuk, coba lagi!'));
    $bintang = $s >= 90 ? 5 : ($s >= 70 ? 4 : ($s >= 50 ? 3 : ($s >= 30 ? 2 : 1)));
@endphp

<div style="max-width:680px; margin:0 auto">

    {{-- Skor header --}}
    <div class="si-hasil-header">
        <div class="si-hasil-emoji">{{ $emoji }}</div>
        <div class="si-hasil-judul">{{ $judul }}</div>
        <div class="si-hasil-sub">Kamu sudah menyelesaikan tugas ini.</div>
        <div class="si-skor-besar" style="color:{{ $warnaS }}">{{ $s }}%</div>
        <div style="font-size:18px; color:#fbbf24; letter-spacing:2px; margin-bottom:4px">
            {{ str_repeat('★', $bintang) }}{{ str_repeat('☆', 5 - $bintang) }}
        </div>
        <div class="si-skor-stat-row">
            <div class="si-skor-stat">
                <div class="si-skor-stat-num" style="color:#16a34a">✅ {{ $benar }}</div>
                <div class="si-skor-stat-lbl">Benar</div>
            </div>
            <div class="si-skor-stat">
                <div class="si-skor-stat-num" style="color:#dc2626">❌ {{ $salah }}</div>
                <div class="si-skor-stat-lbl">Salah</div>
            </div>
            <div class="si-skor-stat">
                <div class="si-skor-stat-num" style="color:#7c3aed">📝 {{ $jawaban->count() }}</div>
                <div class="si-skor-stat-lbl">Total Soal</div>
            </div>
        </div>
    </div>

    {{-- Narasi AI --}}
    <div class="si-narasi-card">
        <div class="si-narasi-title">💬 Feedback untukmu</div>
        <div class="si-narasi-text">{{ $narasi }}</div>
    </div>

    {{-- Miskonsepsi (jika ada) --}}
    @if($miskonsepsi->isNotEmpty())
    <div style="background:#fffbeb; border:1px solid #fde68a; border-radius:14px; padding:16px 18px; margin-bottom:14px">
        <div style="font-size:13px; font-weight:700; color:#92400e; margin-bottom:10px">🔍 Yang perlu diperhatikan:</div>
        @foreach($miskonsepsi as $m)
        <div style="border-left:3px solid #f59e0b; padding:8px 12px; margin-bottom:8px; background:#fff; border-radius:0 8px 8px 0">
            <div style="font-size:13px; font-weight:700; color:#78350f">{{ $m->label }}</div>
            <div style="font-size:12.5px; color:#92400e; margin-top:3px">{{ $m->narasi_siswa }}</div>
        </div>
        @endforeach
    </div>
    @endif

    {{-- Pembahasan --}}
    <div style="background:#fff; border-radius:14px; padding:18px 20px; margin-bottom:14px">
        <div style="font-size:15px; font-weight:800; color:#111827; margin-bottom:14px">
            📖 Pembahasan ({{ $jawaban->count() }} Soal)
            <span style="font-size:12px; color:#9ca3af; font-weight:400; margin-left:8px">Klik soal untuk lihat detail</span>
        </div>
        <div class="si-pembahasan-list">
            @foreach($jawaban as $idx => $j)
            @php
                $benarJ  = $j->pilihan->adalah_benar;
                $jawabanBenar = $j->soal->pilihan->firstWhere('adalah_benar', true);
            @endphp
            <div class="si-pb-item" id="pb-{{ $idx }}">
                <div class="si-pb-head" onclick="togglePb({{ $idx }})">
                    <div class="si-pb-num {{ $benarJ ? 'benar' : 'salah' }}">{{ $idx + 1 }}</div>
                    <div class="si-pb-pertanyaan">{{ \Str::limit($j->soal->pertanyaan, 70) }}</div>
                    <span style="font-size:16px">{{ $benarJ ? '✅' : '❌' }}</span>
                    <span class="si-pb-icon">▼</span>
                </div>
                <div class="si-pb-body">
                    <div style="font-size:13px; color:#374151; margin-bottom:10px; font-weight:600">
                        {!! nl2br(e($j->soal->pertanyaan)) !!}
                    </div>
                    @if($j->soal->gambar)
                    <div style="margin-bottom:10px">
                        <img src="{{ asset('storage/' . $j->soal->gambar) }}" alt="gambar" style="max-height:140px; border-radius:8px">
                    </div>
                    @endif
                    <div class="si-pb-jawaban-row">
                        <div>
                            <div class="si-pb-label">Jawabanmu</div>
                            <div class="si-pb-jawaban {{ $benarJ ? 'benar' : 'salah' }}">
                                {{ $benarJ ? '✅' : '❌' }} {{ $j->pilihan->teks }}
                            </div>
                        </div>
                        @if(!$benarJ && $jawabanBenar)
                        <div>
                            <div class="si-pb-label">Jawaban Benar</div>
                            <div class="si-pb-jawaban benar">✅ {{ $jawabanBenar->teks }}</div>
                        </div>
                        @endif
                    </div>
                    @if(!$benarJ && $j->pilihan->miskonsepsi)
                    <div class="si-miskon-pill">
                        🤔 {{ $j->pilihan->miskonsepsi->narasi_siswa }}
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Aksi --}}
    <div style="display:flex; gap:10px; justify-content:center; padding-bottom:20px">
        <a href="{{ route('siswa.dashboard') }}" class="btn btn-outline" style="font-weight:700; padding:11px 22px">
            🏠 Kembali ke Beranda
        </a>
        <a href="{{ route('siswa.hasil.index') }}" class="btn btn-purple" style="font-weight:700; padding:11px 22px">
            📊 Semua Hasil Saya
        </a>
    </div>

</div>

@endsection

@section('scripts')
<script>
function togglePb(idx) {
    const el = document.getElementById('pb-' + idx);
    el.classList.toggle('open');
}
// Buka soal pertama yang salah otomatis
document.addEventListener('DOMContentLoaded', () => {
    const firstSalah = document.querySelector('.si-pb-num.salah');
    if (firstSalah) {
        const item = firstSalah.closest('.si-pb-item');
        item.classList.add('open');
    }
});
</script>
@endsection