@extends('layouts.guru')

@section('title', 'Dashboard')
@section('subtitle', 'Selamat datang kembali, ' . (auth()->user()->name ?? 'Guru'))

@section('content')

{{-- Stat cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div>
                <div class="label">Total Siswa Kelas</div>
                <div class="value">{{ $totalSiswaKelas }}</div>
                <div class="delta text-muted">
                    {{ $kelasBinaan ? 'Kelas ' . $kelasBinaan->name : 'Belum ada kelas binaan' }}
                </div>
            </div>
            <div class="stat-icon" style="background:#e2f1ee;color:#1d7a6e;">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div>
                <div class="label">Hadir Hari Ini</div>
                <div class="value">{{ $hadirHariIni }}</div>
                <div class="delta text-success">
                    <i class="fa-solid fa-circle-check"></i>
                    @if($sudahIsiAbsen) Absen sudah diisi @else Belum ada data absen @endif
                </div>
            </div>
            <div class="stat-icon" style="background:#d4edda;color:#155724;">
                <i class="fa-solid fa-user-check"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div>
                <div class="label">Tidak Hadir</div>
                <div class="value">{{ $tidakHadir }}</div>
                <div class="delta {{ $tidakHadir > 0 ? 'text-warning' : 'text-muted' }}">
                    @if($tidakHadir > 0)
                        <i class="fa-solid fa-triangle-exclamation"></i> Butuh perhatian
                    @else
                        Semua hadir
                    @endif
                </div>
            </div>
            <div class="stat-icon" style="background:#fdf1de;color:#c9821a;">
                <i class="fa-solid fa-user-xmark"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div>
                <div class="label">Jadwal Hari Ini</div>
                <div class="value">{{ $jadwalHariIni->count() }}</div>
                <div class="delta text-muted">Mata pelajaran</div>
            </div>
            <div class="stat-icon" style="background:#e7f0fb;color:#2d6cd6;">
                <i class="fa-solid fa-calendar-day"></i>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    {{-- Jadwal hari ini --}}
    <div class="col-12 col-xl-7">
        <div class="panel">
            <div class="panel-head">
                <h3>Jadwal Mengajar Hari Ini</h3>
                <span class="text-muted" style="font-size:.78rem;">{{ now()->isoFormat('dddd, D MMMM Y') }}</span>
            </div>
            @if($jadwalHariIni->isEmpty())
                <div class="p-4 text-center text-muted">
                    <i class="fa-solid fa-calendar-xmark fa-2x mb-2 d-block opacity-25"></i>
                    Tidak ada jadwal mengajar hari ini.
                </div>
            @else
                <div class="table-responsive">
                    <table class="table-modern">
                        <thead>
                            <tr>
                                <th>Waktu</th>
                                <th>Mata Pelajaran / Kegiatan</th>
                                <th>Kelas</th>
                                <th>Ruang</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($jadwalHariIni as $jadwal)
                                <tr>
                                    <td class="fw-semibold">
                                        {{ $jadwal->timeslot->start_time ?? '-' }} – {{ $jadwal->timeslot->end_time ?? '' }}
                                    </td>
                                    <td>{{ $jadwal->subject }}</td>
                                    <td><span class="badge text-bg-light border">{{ $jadwal->class }}</span></td>
                                    <td class="text-muted">{{ $jadwal->classroom->name ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Aksi cepat --}}
    <div class="col-12 col-xl-5">
        <div class="panel">
            <div class="panel-head"><h3>Aksi Cepat</h3></div>
            <div class="p-3">
                <div class="row g-2">
                    <div class="col-6">
                        <a href="{{ route('guru.absen.siswa') }}" class="quick-card {{ !$sudahIsiAbsen && $kelasBinaan ? 'border-warning' : '' }}">
                            <i class="fa-solid fa-clipboard-check" style="color:{{ !$sudahIsiAbsen && $kelasBinaan ? '#c9821a' : 'var(--brand)' }};"></i>
                            <div>
                                <div class="qtitle">Presensi Kelas</div>
                                <div class="qsub">
                                    {{ !$sudahIsiAbsen && $kelasBinaan ? '⚠ Belum diisi hari ini' : 'Isi absensi' }}
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="#" class="quick-card">
                            <i class="fa-solid fa-book-open"></i>
                            <div>
                                <div class="qtitle">Jurnal Mengajar</div>
                                <div class="qsub">Segera hadir</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="#" class="quick-card">
                            <i class="fa-solid fa-star-half-stroke"></i>
                            <div>
                                <div class="qtitle">Input Nilai</div>
                                <div class="qsub">Segera hadir</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="#" class="quick-card">
                            <i class="fa-solid fa-file-pdf"></i>
                            <div>
                                <div class="qtitle">Cetak e-Rapor</div>
                                <div class="qsub">Segera hadir</div>
                            </div>
                        </a>
                    </div>
                </div>

                @if($kelasBinaan)
                    <div class="mt-3 p-3" style="background:var(--surface-2);border-radius:10px;border:1px solid var(--border);">
                        <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px;">Kelas Binaan</div>
                        <div class="fw-semibold">Kelas {{ $kelasBinaan->name }}</div>
                        <div style="font-size:.78rem;color:var(--text-muted);">{{ $totalSiswaKelas }} siswa</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection
