@extends('layouts.siswa')
@section('title', 'Beranda')
@section('kelas-label', $daftarKelas->isNotEmpty() ? $daftarKelas->first()->nama : 'Siswa')
@section('total-poin', $totalPoin)

@section('topbar')
<div class="si-topbar-left">
    <div class="si-page-title">Halo, {{ explode(' ', auth()->user()->name)[0] }}! 😊</div>
    <div class="si-page-sub">Semangat! Kerjakan tugas dan raih bintangmu! ⭐</div>
</div>
<div class="si-topbar-right">
    <div class="si-poin-chip">⭐ {{ $totalPoin }} Poin</div>
    @if($daftarKelas->count() > 1)
    <form method="GET" action="{{ route('siswa.dashboard') }}" id="formKelas">
        <select name="kelas_id" class="si-kelas-select" onchange="document.getElementById('formKelas').submit()">
            <option value="">Semua Kelas</option>
            @foreach($daftarKelas as $k)
                <option value="{{ $k->id }}" {{ $kelasId == $k->id ? 'selected' : '' }}>{{ $k->nama }}</option>
            @endforeach
        </select>
    </form>
    @elseif($daftarKelas->isNotEmpty())
        <div class="si-kelas-select" style="pointer-events:none">{{ $daftarKelas->first()->nama }}</div>
    @endif
</div>
@endsection

@section('content')

{{-- 4 Stat Cards --}}
<div class="si-stat-grid">
    <div class="si-stat" style="background: linear-gradient(135deg,#fffbeb,#fef3c7); border-color:#fde68a">
        <div class="si-stat-emoji">⭐</div>
        <div>
            <div class="si-stat-num" style="color:#92400e">{{ $totalPoin }}</div>
            <div class="si-stat-lbl">Poin Saya</div>
            <div class="si-stat-sub">Terus kumpulkan poin!</div>
        </div>
    </div>
    <div class="si-stat" style="background: linear-gradient(135deg,#ecfdf5,#d1fae5); border-color:#a7f3d0">
        <div class="si-stat-emoji">✅</div>
        <div>
            <div class="si-stat-num" style="color:#166534">{{ $tugasSelesai }}</div>
            <div class="si-stat-lbl">Tugas Selesai</div>
            <div class="si-stat-sub">Keren! 👍</div>
        </div>
    </div>
    <div class="si-stat" style="background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color:#bfdbfe">
        <div class="si-stat-emoji">🎯</div>
        <div>
            <div class="si-stat-num" style="color:#1d4ed8">{{ $avgSkor !== null ? $avgSkor . '%' : '—' }}</div>
            <div class="si-stat-lbl">Rata-rata Nilai</div>
            <div class="si-stat-sub">{{ $avgSkor !== null && $avgSkor >= 70 ? 'Bagus! 💪' : ($avgSkor !== null ? 'Terus berlatih!' : 'Mulai kerjakan!') }}</div>
        </div>
    </div>
    <div class="si-stat" style="background: linear-gradient(135deg,#faf5ff,#ede9fe); border-color:#ddd6fe">
        <div class="si-stat-emoji">🏅</div>
        <div>
            <div class="si-stat-num" style="color:#6d28d9">—</div>
            <div class="si-stat-lbl">Lencana</div>
            <div class="si-stat-sub">Segera hadir!</div>
        </div>
    </div>
</div>

{{-- Dashboard 2-col grid --}}
<div class="si-dash-grid">

    {{-- Kiri: Tugas + Tips --}}
    <div>
        {{-- Join kelas form --}}
        @if($daftarKelas->isEmpty())
        <div style="background:#fff; border-radius:14px; padding:20px; margin-bottom:14px; border:2px dashed #ddd6fe; text-align:center">
            <div style="font-size:28px; margin-bottom:8px">🏫</div>
            <div style="font-size:15px; font-weight:700; color:#5b21b6; margin-bottom:12px">Belum masuk kelas</div>
            <form method="POST" action="{{ route('siswa.join-kelas') }}" class="si-join-form" style="justify-content:center">
                @csrf
                <input type="text" name="kode_kelas" class="si-join-input" placeholder="KODE" required maxlength="8">
                <button type="submit" class="btn-purple-sm">Gabung Kelas</button>
            </form>
        </div>
        @endif

        {{-- Tugas list --}}
        <div style="background:#fff; border-radius:14px; padding:18px 20px; margin-bottom:14px">
            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px">
                <div style="font-size:16px; font-weight:800; color:#111827">📋 Tugas Saya</div>
                @if($daftarKelas->isNotEmpty() && $daftarKelas->count() === 1)
                <div style="font-size:12px; color:#9ca3af">{{ $daftarKelas->first()->nama }}</div>
                @endif
            </div>

            @if($tugas->isEmpty())
                <div style="text-align:center; padding:28px 0; color:#9ca3af">
                    <div style="font-size:32px; margin-bottom:8px">📭</div>
                    <div style="font-size:13px">Belum ada tugas. Tunggu gurumu memberikan tugas ya!</div>
                </div>
            @else
                @php
                    $bgColors  = ['#fef9c3','#dcfce7','#dbeafe','#ede9fe','#fce7f3','#ffedd5'];
                    $emojis    = ['📚','➕','➖','✖️','➗','🔢','📐','📏','🔵','🟡'];
                @endphp
                @foreach($tugas as $i => $t)
                @php
                    $sesi   = $sessions->get($t->id);
                    $selesai = $sesi && $sesi->selesai;
                    $bg     = $bgColors[$i % count($bgColors)];
                    $emoji  = $emojis[$i % count($emojis)];
                    $skor   = $selesai ? $sesi->skor : null;
                    $warnaS = $skor !== null ? ($skor >= 70 ? '#16a34a' : ($skor >= 50 ? '#d97706' : '#dc2626')) : '#6b7280';
                @endphp
                <div class="si-tugas-item">
                    <div class="si-tugas-icon" style="background:{{ $bg }}">{{ $emoji }}</div>
                    <div class="si-tugas-info">
                        <div class="si-tugas-nama">{{ $t->indikator->deskripsi }}</div>
                        <div class="si-tugas-kelas">{{ $t->kelas->nama }}</div>
                        @if($selesai)
                        <div style="margin-top:4px">
                            @php
                                $bintang = $skor >= 90 ? 5 : ($skor >= 70 ? 4 : ($skor >= 50 ? 3 : ($skor >= 30 ? 2 : 1)));
                            @endphp
                            <span class="si-bintang">{{ str_repeat('★', $bintang) }}{{ str_repeat('☆', 5 - $bintang) }}</span>
                        </div>
                        @endif
                    </div>
                    <div class="si-tugas-right">
                        @if($selesai)
                            <span style="font-size:15px; font-weight:800; color:{{ $warnaS }}">{{ $skor }}%</span>
                            <span class="si-badge si-badge-selesai">✓ Selesai</span>
                            <a href="{{ route('siswa.tugas.feedback', $t) }}" class="btn btn-outline btn-sm">Lihat Hasil</a>
                        @else
                            <span class="si-badge si-badge-belum">Belum Dikerjakan</span>
                            <a href="{{ route('siswa.tugas.show', $t) }}" class="btn btn-purple" style="font-size:13px; padding:7px 14px; font-weight:700">Kerjakan →</a>
                        @endif
                    </div>
                </div>
                @endforeach

                @if($daftarKelas->isNotEmpty())
                <div style="padding-top:14px; border-top:1px solid #f3f4f6; margin-top:2px">
                    <form method="POST" action="{{ route('siswa.join-kelas') }}" class="si-join-form">
                        @csrf
                        <input type="text" name="kode_kelas" class="si-join-input" placeholder="KODE KELAS" required maxlength="8">
                        <button type="submit" class="btn-purple-sm">+ Gabung Kelas Lain</button>
                    </form>
                </div>
                @endif
            @endif
        </div>

        {{-- Tips Belajar --}}
        <div class="si-tips">
            <div class="si-tips-icon">💡</div>
            <div>
                <div class="si-tips-title">Tips Belajar Hari Ini</div>
                <div class="si-tips-text">{{ $tipHari }}</div>
            </div>
        </div>
    </div>

    {{-- Kanan: Motivasi + Hasil Terbaru --}}
    <div>
        {{-- Motivasi --}}
        <div class="si-motivasi">
            <div class="si-motivasi-star">🌟</div>
            <div class="si-motivasi-title">Kamu hebat hari ini! 🎉</div>
            <div class="si-motivasi-text">
                Terus belajar dan jangan menyerah ya!<br>
                Setiap usaha pasti membuahkan hasil! 💪
            </div>
        </div>

        {{-- Hasil Terbaru --}}
        <div style="background:#fff; border-radius:14px; padding:18px 20px">
            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px">
                <div style="font-size:15px; font-weight:800; color:#111827">Hasil Terbaru</div>
                <a href="{{ route('siswa.hasil.index') }}" style="font-size:12px; color:#7c3aed; font-weight:600">Lihat semua</a>
            </div>

            @if($hasilTerbaru->isEmpty())
                <div style="text-align:center; padding:20px 0; color:#9ca3af; font-size:13px">
                    Belum ada hasil. Kerjakan tugasmu!
                </div>
            @else
                @php
                    $bgColors2 = ['#dbeafe','#dcfce7','#ede9fe'];
                    $emojis2   = ['📚','➕','🔢'];
                @endphp
                @foreach($hasilTerbaru as $ii => $h)
                @php
                    $s  = $h->skor;
                    $wS = $s >= 70 ? '#16a34a' : ($s >= 50 ? '#d97706' : '#dc2626');
                    $b  = $s >= 90 ? 5 : ($s >= 70 ? 4 : ($s >= 50 ? 3 : ($s >= 30 ? 2 : 1)));
                @endphp
                <div class="si-hasil-item">
                    <div class="si-hasil-icon" style="background:{{ $bgColors2[$ii % 3] }}">{{ $emojis2[$ii % 3] }}</div>
                    <div>
                        <div class="si-hasil-nama">{{ \Str::limit($h->tugas->indikator->deskripsi, 30) }}</div>
                        <div class="si-hasil-kelas">{{ $h->tugas->kelas->nama }}</div>
                        <div class="si-bintang">{{ str_repeat('★', $b) }}{{ str_repeat('☆', 5 - $b) }}</div>
                    </div>
                    <div class="si-hasil-skor" style="color:{{ $wS }}">{{ $s }}%</div>
                </div>
                @endforeach
            @endif
        </div>
    </div>

</div>

@endsection