@extends('siswa.layouts.app')

@section('title', 'Dashboard Siswa')

@section('content')

<div class="container-fluid px-0">
    <h4 class="fw-bold text-primary mb-4">Dashboard</h4>

    <!-- STATS CARDS -->
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3">
                <div class="d-flex align-items-center gap-3">
                    <div style="background:#e6f0ff; border-radius:12px; padding:12px;">
                        <img src="{{ asset('images/icon/sidebar/mapel.png') }}" width="24" alt="">
                    </div>
                    <div>
                        <div class="text-muted small">Tugas Aktif</div>
                        <div class="fw-bold fs-5">0</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3">
                <div class="d-flex align-items-center gap-3">
                    <div style="background:#e6f0ff; border-radius:12px; padding:12px;">
                        <img src="{{ asset('images/icon/sidebar/challenge.png') }}" width="24" alt="">
                    </div>
                    <div>
                        <div class="text-muted small">Challenge Selesai</div>
                        <div class="fw-bold fs-5">0</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3">
                <div class="d-flex align-items-center gap-3">
                    <div style="background:#e6f0ff; border-radius:12px; padding:12px;">
                        <img src="{{ asset('images/icon/sidebar/lb.png') }}" width="24" alt="">
                    </div>
                    <div>
                        <div class="text-muted small">Total EXP</div>
                        <div class="fw-bold fs-5">0</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- INFO SISWA -->
    <div class="card border-0 shadow-sm rounded-4 p-4">
        <h6 class="fw-bold mb-3">Informasi Akun</h6>
        <table class="table table-borderless mb-0">
            <tr>
                <td class="text-muted" width="150">Nama</td>
                <td>: {{ Auth::guard('siswa')->user()->nama }}</td>
            </tr>
            <tr>
                <td class="text-muted">NISN</td>
                <td>: {{ Auth::guard('siswa')->user()->nisn }}</td>
            </tr>
            <tr>
                <td class="text-muted">Kelas</td>
                <td>: {{ Auth::guard('siswa')->user()->kelas->nama_kelas ?? '-' }}</td>
            </tr>
        </table>
    </div>
</div>

@endsection