@extends('layouts.app')

@section('title', 'Dashboard Kepala Sekolah')

@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-university mr-1"></i> Selamat datang, Kepala Sekolah <strong>{{ Auth::user()->name }}</strong>. 
            Menampilkan data untuk jenjang <strong>{{ $jenjang ?? 'Semua' }}</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-6 col-md-3">
        <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 ({{ $jenjang ?? 'Semua' }})</span>
                <span class="info-box-number">{{ number_format($totalSiswa, 0, ',', '.') }} <small>Siswa</small></span>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
        <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">{{ number_format($siswaLunasBulanIni, 0, ',', '.') }} <small>Siswa</small></span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <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">{{ number_format($siswaBelumLunasBulanIni, 0, ',', '.') }} <small>Siswa</small></span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box shadow-sm mb-3">
            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-money-bill-wave"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total Tunggakan SPP Bulan Berjalan</span>
                <span class="info-box-number"><small>Rp</small> {{ number_format($nominalTunggakanBulanIni, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>
</div>
@endsection