@extends('layouts.app')

@section('title', 'Dashboard Wali Kelas')
{{-- Updated DPP status labels: blm bayar / kurang / Lunas --}}

@push('styles')
<style>
    .info-box-number { font-size: 1.5rem; font-weight: bold; }
    .card-title { font-weight: 600; }
    .table-valign-middle td { vertical-align: middle; }
    .badge-soft-success { background-color: #d1e7dd; color: #0f5132; }
    .badge-soft-danger { background-color: #f8d7da; color: #842029; }
    .badge-soft-warning { background-color: #fff3cd; color: #664d03; }
</style>
@endpush

@section('content')
<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info alert-dismissible bg-info text-white border-0 fade show shadow-sm" role="alert">
            <i class="fas fa-chalkboard-teacher mr-1"></i> Selamat datang, Wali Kelas <strong>{{ Auth::user()->name }}</strong>. 
            Anda mengampu kelas <strong>{{ $kelas->nama_kelas }}</strong>
            @if($tahunAktif)
             (Tahun Ajaran: <strong>{{ $tahunAktif->tahun }}</strong>)
            @endif
            <button type="button" class="close text-white" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>

<!-- Summary Cards -->
<div class="row">
    <div class="col-12 col-sm-4 col-md-4">
        <div class="info-box shadow-sm mb-3">
            <span class="info-box-icon bg-primary elevation-1"><i class="fas fa-users"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Jumlah Siswa Kelas</span>
                <span class="info-box-number">{{ $totalSiswa }} <small>Siswa</small></span>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-4 col-md-4">
        <div class="info-box shadow-sm mb-3">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-check-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Lunas Bulan Berjalan</span>
                <span class="info-box-number">{{ $siswaLunasBulanIni }} <small>Siswa</small></span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-4 col-md-4">
        <div class="info-box shadow-sm mb-3">
            <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-exclamation-triangle text-white"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Belum Lunas Bulan Berjalan</span>
                <span class="info-box-number">{{ $siswaBelumLunasBulanIni }} <small>Siswa</small></span>
            </div>
        </div>
    </div>
</div>


@endsection