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

<div class="row g-3">
    <!-- Modal Pengumuman -->
    <?php if (!empty($setting['student_portal_announcement'])): ?>
    <div class="modal fade" id="announcementModal" tabindex="-1" aria-labelledby="announcementModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow" style="border-radius: 16px; overflow: hidden;">
                <div class="modal-header bg-primary bg-gradient text-white border-0 py-3">
                    <h5 class="modal-title fw-bold" id="announcementModalLabel">
                        <i class="bi bi-megaphone-fill me-2"></i>Pengumuman Madrasah
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4 text-center">
                    <div class="bg-primary bg-opacity-10 p-3 rounded-circle text-primary d-inline-flex mb-3" style="font-size: 2rem; line-height: 1;">
                        <i class="bi bi-bell-fill"></i>
                    </div>
                    <p class="text-dark mb-0 small text-start" style="white-space: pre-line; line-height: 1.6; font-size: 0.95rem;">
                        <?= esc($setting['student_portal_announcement']) ?>
                    </p>
                </div>
                <div class="modal-footer bg-light border-0 py-3 d-flex justify-content-center">
                    <button type="button" class="btn btn-primary px-4 rounded-pill btn-sm fw-semibold" data-bs-dismiss="modal">
                        Saya Mengerti, Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- Welcome Card -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px; overflow: hidden;">
            <div class="card-body p-4">
                <div class="d-flex flex-column flex-md-row align-items-center gap-4">
                    <div class="flex-shrink-0">
                        <?php if (!empty($student['photo'])): ?>
                            <img src="<?= \App\Services\StorageService::getUrl($student['photo'], 'students') ?>" 
                                class="rounded-circle shadow-sm" style="width:100px; height:100px; object-fit:cover; border:3px solid var(--primary)">
                        <?php else: ?>
                            <div class="rounded-circle bg-light d-flex align-items-center justify-content-center shadow-sm text-primary" 
                                style="width:100px; height:100px; font-size:3.5rem; border:3px solid var(--primary)">
                                <i class="bi bi-person-circle"></i>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div class="text-center text-md-start">
                        <span class="badge bg-success bg-opacity-10 text-success fw-semibold px-3 py-2 mb-2">Selamat Datang Kembali</span>
                        <h4 class="fw-bold text-dark mb-1"><?= esc($student['full_name']) ?></h4>
                        <div class="text-muted small mb-3">NISN: <?= esc($student['nisn'] ?? '-') ?> | NIS: <?= esc($student['nis']) ?></div>
                        <p class="text-secondary small mb-0">
                            Silakan lakukan pengecekan data profil Anda secara berkala. Pastikan data yang tercatat sudah sesuai dengan dokumen asli (KK, Akta Kelahiran, dan Ijazah).
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-light border-0 px-4 py-3 d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div class="small">
                    <span class="text-muted">Kelas Aktif:</span>
                    <strong class="text-primary"><?= esc($classroom['grade_name'] ?? '') ?> - <?= esc($classroom['classroom_name'] ?? 'Belum Assign Kelas') ?></strong>
                </div>
                <a href="/siswa/profile" class="btn btn-sm btn-primary px-3 rounded-pill">
                    <i class="bi bi-shield-check me-1"></i>Verifikasi Data Saya
                </a>
            </div>
        </div>

        <!-- Today's Schedule -->
        <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 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold text-dark mb-0">Jadwal Pelajaran Hari Ini</h5>
                <a href="/siswa/schedule" class="text-decoration-none small fw-semibold">Lihat Semua</a>
            </div>
            <div class="card-body p-4">
                <?php if (empty($todaySchedule)): ?>
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-calendar-event fs-1 mb-2"></i>
                        <p class="mb-0 small">Tidak ada jadwal KBM untuk hari ini.</p>
                    </div>
                <?php else: ?>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th width="15%">Jam Ke</th>
                                    <th>Mata Pelajaran</th>
                                    <th>Guru Pengampu</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($todaySchedule as $sch): ?>
                                <tr>
                                    <td><span class="badge bg-secondary"><?= esc($sch['period_number']) ?></span></td>
                                    <td class="fw-semibold text-dark"><?= esc($sch['subject_name']) ?></td>
                                    <td class="text-secondary small"><?= esc($sch['teacher_name']) ?></td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Sidebar Cards -->
    <div class="col-lg-4">
        <!-- Attendance Stats -->
        <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                <h5 class="fw-bold text-dark mb-0">Rekap Kehadiran</h5>
                <div class="text-muted small">Periode Aktif: <?= esc($activePeriod['year_name'] ?? '') ?> (<?= esc($activePeriod['semester'] ?? '') ?>)</div>
            </div>
            <div class="card-body p-4 text-center">
                <div class="position-relative d-inline-block mb-3">
                    <!-- Simple Circular Progress Simulation using SVG -->
                    <svg class="progress-ring" width="120" height="120">
                        <circle class="progress-ring__circle_bg" stroke="#f1f3f7" stroke-width="8" fill="transparent" r="50" cx="60" cy="60"/>
                        <circle class="progress-ring__circle" stroke="var(--primary)" stroke-width="8" fill="transparent" r="50" cx="60" cy="60"
                            style="stroke-dasharray: 314.16; stroke-dashoffset: <?= 314.16 - (314.16 * $attendanceStats['persentase'] / 100) ?>; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.5s;"/>
                    </svg>
                    <div class="position-absolute top-50 start-50 translate-middle">
                        <h3 class="fw-bold mb-0 text-dark"><?= $attendanceStats['persentase'] ?>%</h3>
                        <span class="text-muted" style="font-size: .7rem;">Kehadiran</span>
                    </div>
                </div>

                <div class="row g-2 mt-2">
                    <div class="col-6 col-md-3 col-lg-6">
                        <div class="p-2 bg-light rounded text-center">
                            <span class="d-block text-muted" style="font-size: .75rem">Hadir</span>
                            <strong class="text-success fs-5"><?= $attendanceStats['hadir'] ?></strong> <span class="text-muted small">Hari</span>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 col-lg-6">
                        <div class="p-2 bg-light rounded text-center">
                            <span class="d-block text-muted" style="font-size: .75rem">Sakit</span>
                            <strong class="text-primary fs-5"><?= $attendanceStats['sakit'] ?></strong> <span class="text-muted small">Hari</span>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 col-lg-6">
                        <div class="p-2 bg-light rounded text-center">
                            <span class="d-block text-muted" style="font-size: .75rem">Izin</span>
                            <strong class="text-warning fs-5"><?= $attendanceStats['izin'] ?></strong> <span class="text-muted small">Hari</span>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 col-lg-6">
                        <div class="p-2 bg-light rounded text-center">
                            <span class="d-block text-muted" style="font-size: .75rem">Alpa</span>
                            <strong class="text-danger fs-5"><?= $attendanceStats['alpha'] ?></strong> <span class="text-muted small">Hari</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Violation Points Card -->
        <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                <h5 class="fw-bold text-dark mb-0">Poin Pelanggaran</h5>
                <div class="text-muted small">Akumulasi Poin Semester Ini</div>
            </div>
            <div class="card-body p-4 text-center">
                <div class="bg-danger bg-opacity-10 text-danger p-3 rounded-circle d-inline-flex mb-3 fw-bold" style="font-size: 2.2rem; line-height: 1; width: 75px; height: 75px; align-items: center; justify-content: center;">
                    <?= $violationPoints ?>
                </div>
                <div class="mb-3">
                    <strong class="text-dark d-block">Status: 
                        <?php
                        $stC = 'text-success';
                        if ($violationPoints >= 100) $stC = 'text-dark';
                        elseif ($violationPoints >= 75) $stC = 'text-danger';
                        elseif ($violationPoints >= 25) $stC = 'text-warning';
                        ?>
                        <span class="<?= $stC ?>"><?= esc($activeSanction) ?></span>
                    </strong>
                    <span class="text-muted small" style="font-size: 0.72rem;">Batas sanksi terdekat dimulai dari 25 Poin.</span>
                </div>
                <a href="/siswa/violations" class="btn btn-sm btn-outline-danger w-100 rounded-pill">
                    <i class="bi bi-search me-1"></i>Detail Pelanggaran
                </a>
            </div>
        </div>

        <!-- Portal Info Card -->
        <div class="card border-0 bg-light shadow-sm" style="border-radius: 12px;">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-3"><i class="bi bi-shield-lock-fill text-warning me-2"></i>Keamanan Akun</h6>
                <p class="text-secondary small mb-3">
                    Demi keamanan data pribadi Anda, pastikan untuk mengganti password secara berkala dan tidak memberitahukan kredensial login Anda kepada orang lain.
                </p>
                <a href="/siswa/change-password" class="btn btn-sm btn-outline-secondary w-100 rounded-pill">
                    <i class="bi bi-key me-1"></i>Ubah Password Saya
                </a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    <?php if (!empty($setting['student_portal_announcement'])): ?>
        const modalEl = document.getElementById('announcementModal');
        if (modalEl) {
            const myModal = new bootstrap.Modal(modalEl);
            myModal.show();
        }
    <?php endif; ?>
});
</script>

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