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

<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-0 fw-bold">Administrasi Asesmen Madrasah</h4>
            <small class="text-muted">Kelola ruang, alokasi peserta silang, dan dokumen kelengkapan ujian</small>
        </div>
        <a href="/exam-event/create" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i> Buat Event Ujian
        </a>
    </div>

    <?php if (session()->getFlashdata('success')): ?>
        <div class="alert alert-success alert-dismissible fade show">
            <?= session()->getFlashdata('success') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger alert-dismissible fade show">
            <?= session()->getFlashdata('error') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3" width="5%">#</th>
                            <th width="30%">Nama Event</th>
                            <th width="15%">Periode</th>
                            <th width="15%">Tingkat Ujian</th>
                            <th width="15%">Tanggal Pelaksanaan</th>
                            <th width="10%">Status</th>
                            <th class="text-center" width="10%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($events)): ?>
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">
                                    <i class="bi bi-folder-x fs-2 d-block mb-2"></i>
                                    Belum ada event administrasi ujian
                                </td>
                            </tr>
                        <?php else: ?>
                            <?php $no = 1; foreach ($events as $e): ?>
                            <tr>
                                <td class="ps-3"><?= $no++ ?></td>
                                <td>
                                    <div class="fw-semibold text-primary"><?= esc($e['name']) ?></div>
                                    <small class="text-muted">Dibuat oleh: <?= esc($e['creator_name']) ?></small>
                                </td>
                                <td>
                                    <div>TP <?= esc($e['academic_year']) ?></div>
                                    <small class="text-muted">Semester <?= esc($e['semester']) ?></small>
                                </td>
                                <td>
                                    <?php 
                                    $levels = explode(',', $e['grade_levels']);
                                    foreach ($levels as $l):
                                    ?>
                                        <span class="badge bg-secondary-subtle text-secondary me-1">Kelas <?= esc(trim($l)) ?></span>
                                    <?php endforeach; ?>
                                </td>
                                <td>
                                    <small>
                                        <i class="bi bi-calendar3 me-1 text-muted"></i>
                                        <?= date('d M Y', strtotime($e['start_date'])) ?>
                                        <span class="text-muted">s/d</span>
                                        <?= date('d M Y', strtotime($e['end_date'])) ?>
                                    </small>
                                </td>
                                <td>
                                    <?php if ($e['is_locked']): ?>
                                        <span class="badge bg-success text-white">
                                            <i class="bi bi-lock-fill me-1"></i>Terkunci (Final)
                                        </span>
                                    <?php else: ?>
                                        <span class="badge bg-warning text-dark">
                                            <i class="bi bi-pencil-square me-1"></i>Draft (Edit)
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <div class="d-flex gap-1 justify-content-center">
                                        <?php if (!$e['is_locked']): ?>
                                            <!-- Edit -->
                                            <a href="/exam-event/edit/<?= $e['id'] ?>" class="btn btn-sm btn-outline-warning" title="Edit Event">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <!-- Detail Ruang -->
                                            <a href="/exam-event/<?= $e['id'] ?>/rooms" class="btn btn-sm btn-outline-primary" title="Atur Ruang">
                                                <i class="bi bi-door-open"></i>
                                            </a>
                                            <!-- Jadwal Ujian -->
                                            <a href="/exam-event/<?= $e['id'] ?>/schedule" class="btn btn-sm btn-outline-info" title="Atur Jadwal Mapel">
                                                <i class="bi bi-calendar-event"></i>
                                            </a>
                                            <!-- Pengawas -->
                                            <a href="/exam-event/<?= $e['id'] ?>/proctor" class="btn btn-sm btn-outline-secondary" title="Atur Pengawas">
                                                <i class="bi bi-person-badge"></i>
                                            </a>
                                            <!-- Penempatan & Validasi -->
                                            <a href="/exam-event/<?= $e['id'] ?>/allocation" class="btn btn-sm btn-outline-success" title="Atur Peserta & Kunci">
                                                <i class="bi bi-diagram-3"></i>
                                            </a>
                                            <!-- Hapus -->
                                            <a href="/exam-event/delete/<?= $e['id'] ?>" class="btn btn-sm btn-outline-danger" title="Hapus Event" onclick="return confirm('Yakin hapus event ini? Semua konfigurasi ruang dan peserta akan hilang!')">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                        <?php else: ?>
                                            <!-- Toggle View Print Hub -->
                                            <button type="button" class="btn btn-sm btn-outline-primary toggle-print-hub" data-event-id="<?= $e['id'] ?>" title="Tampilkan/Sembunyikan Menu Cetak">
                                                <i class="bi bi-eye-fill"></i>
                                            </button>
                                            
                                            <!-- Detail Alokasi -->
                                            <a href="/exam-event/<?= $e['id'] ?>/allocation" class="btn btn-sm btn-outline-success" title="Lihat Detail Alokasi">
                                                <i class="bi bi-diagram-3"></i>
                                            </a>
                                            
                                            <!-- Direct Buka Kunci (Unlock) -->
                                            <form action="/exam-event/<?= $e['id'] ?>/unfinalize" method="post" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin membuka kunci event ini? Data nomor peserta yang digenerate akan dihapus.')">
                                                <?= csrf_field() ?>
                                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Buka Kunci Event">
                                                    <i class="bi bi-unlock-fill"></i>
                                                </button>
                                            </form>
                                        <?php endif; ?>
                                    </div>
                                </td>
                            </tr>
                            <?php if ($e['is_locked']): ?>
                                <tr id="print-hub-<?= $e['id'] ?>" class="print-hub-row table-light border-bottom">
                                    <td colspan="7" class="p-3 bg-light">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body p-3">
                                                <div class="row">
                                                    <!-- Column 1: Pusat Cetak Dokumen Ujian -->
                                                    <div class="col-md-6 border-end">
                                                        <h6 class="fw-bold text-primary mb-3 d-flex align-items-center gap-2">
                                                            <i class="bi bi-file-earmark-pdf-fill"></i> Pusat Cetak Dokumen Ujian
                                                        </h6>
                                                        <div class="row g-2">
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/cards" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-credit-card me-2 text-primary"></i> Kartu Peserta</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/desk-labels" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-tag me-2 text-primary"></i> Kartu Meja</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                 <a href="/exam-event/<?= $e['id'] ?>/print/proctor-schedule" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                     <span><i class="bi bi-person-badge me-2 text-primary"></i> Jadwal Pengawas</span>
                                                                     <i class="bi bi-printer text-muted small"></i>
                                                                 </a>
                                                             </div>
                                                             <div class="col-6">
                                                                 <a href="/exam-event/<?= $e['id'] ?>/print/exam-schedule" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                     <span><i class="bi bi-calendar-check me-2 text-primary"></i> Jadwal Asesmen</span>
                                                                     <i class="bi bi-printer text-muted small"></i>
                                                                 </a>
                                                             </div>
                                                             <div class="col-6">
                                                                 <a href="/exam-event/<?= $e['id'] ?>/print/attendance" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                     <span><i class="bi bi-journal-check me-2 text-primary"></i> Daftar Hadir</span>
                                                                     <i class="bi bi-printer text-muted small"></i>
                                                                 </a>
                                                             </div>
                                                             <div class="col-6">
                                                                 <a href="/exam-event/<?= $e['id'] ?>/print/proctor-attendance" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                     <span><i class="bi bi-journal-text me-2 text-primary"></i> Hadir Pengawas</span>
                                                                     <i class="bi bi-printer text-muted small"></i>
                                                                 </a>
                                                             </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/seating-chart" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-grid-3x3-gap me-2 text-primary"></i> Denah Duduk</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/official-report" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-file-earmark-ruled me-2 text-primary"></i> Berita Acara</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/room-summary" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-table me-2 text-primary"></i> Rekap Ruang</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/absent-students" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-person-x me-2 text-primary"></i> Daftar Tidak Hadir</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/blank-cards" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-file-earmark-plus me-2 text-primary"></i> Kartu Kosong</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Column 2: Kelengkapan Tempel Pintu -->
                                                    <div class="col-md-6">
                                                        <h6 class="fw-bold text-success mb-3 d-flex align-items-center gap-2">
                                                            <i class="bi bi-door-closed-fill"></i> Kelengkapan Tempel Pintu & Informasi Ruang
                                                        </h6>
                                                        <div class="row g-2">
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/room-participants" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-card-list me-2 text-success"></i> Peserta Ruang</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/door-label" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-door-closed me-2 text-success"></i> Label Pintu</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/bell-schedule" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-bell me-2 text-success"></i> Tanda Bel</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/proctor-rules" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-person-workspace me-2 text-success"></i> Tertib Pengawas</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                            <div class="col-6">
                                                                <a href="/exam-event/<?= $e['id'] ?>/print/student-rules" target="_blank" class="btn btn-sm btn-light w-100 text-start border d-flex justify-content-between align-items-center py-2">
                                                                    <span><i class="bi bi-people me-2 text-success"></i> Tertib Peserta</span>
                                                                    <i class="bi bi-printer text-muted small"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            <?php endif; ?>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.toggle-print-hub').forEach(function(button) {
        button.addEventListener('click', function() {
            var eventId = this.getAttribute('data-event-id');
            var row = document.getElementById('print-hub-' + eventId);
            if (row) {
                row.classList.toggle('d-none');
                
                // Toggle the eye icon between bi-eye-fill and bi-eye-slash-fill
                var icon = this.querySelector('i');
                if (icon.classList.contains('bi-eye-fill')) {
                    icon.classList.remove('bi-eye-fill');
                    icon.classList.add('bi-eye-slash-fill');
                } else {
                    icon.classList.remove('bi-eye-slash-fill');
                    icon.classList.add('bi-eye-fill');
                }
            }
        });
    });
});
</script>

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