<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="row justify-content-center">
    <div class="col-12 col-xl-10">
        
        <!-- Filter Header -->
        <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
            <div class="card-body p-4 d-flex flex-wrap align-items-center justify-content-between gap-3 bg-light bg-gradient" style="border-radius: 12px;">
                <div>
                    <h5 class="fw-bold mb-1 text-dark"><i class="bi bi-calendar-check text-primary me-2"></i>Rekapitulasi Kehadiran Siswa</h5>
                    <small class="text-muted">Pantau rekap kehadiran bulanan serta riwayat ketidakhadiran Anda pada semester aktif.</small>
                </div>
            </div>
        </div>

        <!-- 1. KEY METRICS STATS WIDGETS -->
        <div class="row g-3 mb-4">
            <div class="col-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center p-3" style="border-radius: 10px;">
                    <span class="d-block text-muted small fw-semibold mb-1">Hadir</span>
                    <h3 class="fw-bold text-success mb-0"><?= $attendanceStats['hadir'] ?> <span style="font-size: 0.9rem; font-weight: normal;">Hari</span></h3>
                    <small class="text-muted" style="font-size: 0.72rem;">Efektif: <?= $attendanceStats['efektif'] ?> hari</small>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center p-3" style="border-radius: 10px;">
                    <span class="d-block text-muted small fw-semibold mb-1">Sakit</span>
                    <h3 class="fw-bold text-primary mb-0"><?= $attendanceStats['sakit'] ?> <span style="font-size: 0.9rem; font-weight: normal;">Hari</span></h3>
                    <small class="text-muted" style="font-size: 0.72rem;">Dengan surat keterangan</small>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center p-3" style="border-radius: 10px;">
                    <span class="d-block text-muted small fw-semibold mb-1">Izin</span>
                    <h3 class="fw-bold text-warning mb-0"><?= $attendanceStats['izin'] ?> <span style="font-size: 0.9rem; font-weight: normal;">Hari</span></h3>
                    <small class="text-muted" style="font-size: 0.72rem;">Izin kepentingan keluarga</small>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center p-3" style="border-radius: 10px;">
                    <span class="d-block text-muted small fw-semibold mb-1">Alpha</span>
                    <h3 class="fw-bold text-danger mb-0"><?= $attendanceStats['alpha'] ?> <span style="font-size: 0.9rem; font-weight: normal;">Hari</span></h3>
                    <small class="text-muted" style="font-size: 0.72rem;">Tanpa keterangan</small>
                </div>
            </div>
            
            <!-- Percentage Banner -->
            <div class="col-12">
                <?php
                $pct = $attendanceStats['persentase'];
                $alertClass = 'alert-success';
                $iconClass = 'bi-check-circle-fill';
                $msg = 'Persentase kehadiran Anda aman. Pertahankan kedisiplinan Anda!';
                
                if ($pct < 90) {
                    $alertClass = 'alert-danger';
                    $iconClass = 'bi-exclamation-octagon-fill';
                    $msg = 'Peringatan: Persentase kehadiran di bawah 90%. Harap perhatikan kehadiran Anda!';
                } elseif ($pct < 95) {
                    $alertClass = 'alert-warning';
                    $iconClass = 'bi-exclamation-triangle-fill';
                    $msg = 'Persentase kehadiran cukup. Usahakan untuk tetap hadir di kelas.';
                }
                ?>
                <div class="alert <?= $alertClass ?> border-0 shadow-sm mb-0 d-flex align-items-center gap-3" style="border-radius: 10px;">
                    <i class="bi <?= $iconClass ?> fs-4"></i>
                    <div>
                        <div class="fw-bold" style="font-size: 1.05rem;">Rasio Kehadiran: <?= $pct ?>%</div>
                        <small class="opacity-90"><?= $msg ?></small>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. MONTHLY BREAKDOWN -->
        <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                <h6 class="fw-bold text-dark mb-0"><i class="bi bi-bar-chart-steps text-primary me-2"></i>Rekap Bulanan</h6>
            </div>
            <div class="card-body p-4">
                <?php if (empty($monthlyRecap)): ?>
                    <p class="text-muted text-center small mb-0">Belum ada rekap data absensi presensi.</p>
                <?php else: ?>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 text-center">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-start">Bulan</th>
                                    <th>Hari Efektif</th>
                                    <th>Hadir</th>
                                    <th>Sakit</th>
                                    <th>Izin</th>
                                    <th>Alpha</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($monthlyRecap as $m): ?>
                                <tr>
                                    <td class="text-start fw-semibold text-dark"><?= esc($m['month_name']) ?></td>
                                    <td><span class="badge bg-secondary"><?= $m['efektif'] ?> Hari</span></td>
                                    <td class="text-success fw-bold"><?= $m['hadir'] ?></td>
                                    <td class="text-primary"><?= $m['sakit'] ?></td>
                                    <td class="text-warning"><?= $m['izin'] ?></td>
                                    <td class="text-danger fw-bold"><?= $m['alpha'] ?></td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- 3. DETAILED ABSENT LOGS (Sakit, Izin, Alpha) -->
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                <h6 class="fw-bold text-dark mb-0"><i class="bi bi-clock-history text-primary me-2"></i>Riwayat Ketidakhadiran</h6>
                <small class="text-muted">Menampilkan daftar tanggal saat Anda tercatat tidak hadir. Laporkan ke Wali Kelas jika terdapat ketidaksesuaian data.</small>
            </div>
            <div class="card-body p-4">
                <?php if (empty($detailedLogs)): ?>
                    <div class="text-center py-4 text-muted">
                        <div class="bg-success bg-opacity-10 p-3 rounded-circle text-success d-inline-flex mb-3" style="font-size: 2rem; line-height: 1;">
                            <i class="bi bi-emoji-smile-fill"></i>
                        </div>
                        <h6 class="fw-bold text-dark">Hebat! Rekor Bersih</h6>
                        <p class="mb-0 small">Anda tidak memiliki riwayat ketidakhadiran (Sakit, Izin, maupun Alpha) di semester ini.</p>
                    </div>
                <?php else: ?>
                    
                    <!-- Desktop Table view -->
                    <div class="d-none d-md-block">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th width="8%" class="text-center">No</th>
                                        <th width="32%">Tanggal</th>
                                        <th width="20%" class="text-center">Status</th>
                                        <th width="40%">Dicatat Oleh</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $no = 1; foreach ($detailedLogs as $log): ?>
                                    <tr>
                                        <td class="text-center text-muted small"><?= $no++ ?></td>
                                        <td class="fw-semibold text-dark">
                                            <?= date('d-m-Y', strtotime($log['date'])) ?>
                                        </td>
                                        <td class="text-center">
                                            <?php
                                            $st = $log['status'];
                                            $stClass = 'bg-primary';
                                            if ($st === 'Alpha') $stClass = 'bg-danger';
                                            elseif ($st === 'Izin') $stClass = 'bg-warning text-dark';
                                            ?>
                                            <span class="badge <?= $stClass ?> px-3 py-1.5"><?= esc($st) ?></span>
                                        </td>
                                        <td class="small text-muted"><?= esc($log['recorder_name'] ?: 'Sistem') ?></td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Mobile list view -->
                    <div class="d-md-none">
                        <?php $no = 1; foreach ($detailedLogs as $log): ?>
                        <div class="card mb-2 border-0 bg-light" style="border-radius: 8px;">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <strong class="text-dark small"><?= date('d-m-Y', strtotime($log['date'])) ?></strong>
                                    <?php
                                    $st = $log['status'];
                                    $stClass = 'bg-primary';
                                    if ($st === 'Alpha') $stClass = 'bg-danger';
                                    elseif ($st === 'Izin') $stClass = 'bg-warning text-dark';
                                    ?>
                                    <span class="badge <?= $stClass ?> btn-sm"><?= esc($st) ?></span>
                                </div>
                                <div class="text-muted" style="font-size: 0.7rem;">
                                    <i class="bi bi-pencil-square me-1"></i> Pencatat: <?= esc($log['recorder_name'] ?: 'Sistem') ?>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>

                <?php endif; ?>
            </div>
        </div>

    </div>
</div>

<?= $this->endSection() ?>
