<?php // app/Views/assessment/index.php ?>
<?= $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">Manajemen Asesmen</h4>
            <small class="text-muted">Kelola event asesmen bersama (ASTS, ASAS, ASAT)</small>
        </div>
        <a href="/assessment/create" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i> Buat Event Asesmen
        </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; ?>

    <!-- Filter Card -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="get" action="/assessment" class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="academic_period_id" class="col-form-label fw-semibold">
                        <i class="bi bi-calendar3 me-1"></i> Periode Akademik:
                    </label>
                </div>
                <div class="col-md-4 col-12">
                    <select name="academic_period_id" id="academic_period_id" class="form-select">
                        <?php foreach ($periods as $p): ?>
                            <option value="<?= $p['id'] ?>" <?= $p['id'] == $selectedPeriodId ? 'selected' : '' ?>>
                                <?= esc($p['year_name']) ?> - Semester <?= esc($p['semester']) ?> <?= $p['is_active'] ? '(Aktif)' : '' ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary px-3">
                        <i class="bi bi-filter me-1"></i> Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body p-3">
            <div class="table-responsive">
                <table id="assessmentTable" class="table table-striped table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3" style="width: 5%">#</th>
                            <th style="width: 25%">Nama Event</th>
                            <th style="width: 10%">Tipe</th>
                            <th style="width: 15%">Periode</th>
                            <th style="width: 15%">Jenis Soal</th>
                            <th style="width: 15%">Tanggal</th>
                            <th style="width: 10%">Status</th>
                            <th class="text-center" style="width: 10%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $no = 1; foreach ($assessments as $a): ?>
                        <tr>
                            <td class="ps-3"><?= $no++ ?></td>
                            <td>
                                <div class="fw-semibold text-primary"><?= esc($a['name']) ?></div>
                                <?php if ($a['description']): ?>
                                    <small class="text-muted d-block mt-1"><?= esc($a['description']) ?></small>
                                <?php endif; ?>
                            </td>
                            <td>
                                <span class="badge bg-primary-subtle text-primary fw-semibold">
                                    <?= esc($a['assessment_type_code']) ?>
                                </span>
                            </td>
                            <td>
                                <div><?= esc($a['academic_year']) ?></div>
                                <small class="text-muted">Semester <?= esc($a['semester']) ?></small>
                            </td>
                            <td>
                                <div class="d-flex gap-1 flex-wrap">
                                    <?php if ($a['has_pg']): ?>
                                        <span class="badge bg-info-subtle text-info">PG</span>
                                    <?php endif; ?>
                                    <?php if ($a['has_bs']): ?>
                                        <span class="badge bg-warning-subtle text-warning">BS</span>
                                    <?php endif; ?>
                                    <?php if ($a['has_isian']): ?>
                                        <span class="badge bg-success-subtle text-success">Isian</span>
                                    <?php endif; ?>
                                    <?php if ($a['has_essay']): ?>
                                        <span class="badge bg-secondary-subtle text-secondary">Essay</span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td>
                                <small class="fw-medium">
                                    <?= date('d M Y', strtotime($a['start_date'])) ?>
                                    <span class="text-muted font-normal">s/d</span>
                                    <?= date('d M Y', strtotime($a['end_date'])) ?>
                                </small>
                            </td>
                            <td>
                                <div class="d-flex flex-column gap-1">
                                    <?php if ($a['is_open']): ?>
                                        <span class="badge bg-success-subtle text-success py-1">
                                            <i class="bi bi-unlock me-1"></i>Terbuka
                                        </span>
                                    <?php else: ?>
                                        <span class="badge bg-danger-subtle text-danger py-1">
                                            <i class="bi bi-lock me-1"></i>Ditutup
                                        </span>
                                    <?php endif; ?>
                                    <?php if ($a['is_visible']): ?>
                                        <span class="badge bg-info-subtle text-info py-1">
                                            <i class="bi bi-eye me-1"></i>Tampil
                                        </span>
                                    <?php else: ?>
                                        <span class="badge bg-secondary-subtle text-secondary py-1">
                                            <i class="bi bi-eye-slash me-1"></i>Sembunyi
                                        </span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="d-flex gap-1 justify-content-center">
                                    <!-- Edit -->
                                    <a href="/assessment/edit/<?= $a['id'] ?>"
                                       class="btn btn-sm btn-outline-warning"
                                       title="Edit Event">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <!-- Toggle Buka/Tutup -->
                                    <a href="/assessment/toggle-open/<?= $a['id'] ?>"
                                       class="btn btn-sm <?= $a['is_open'] ? 'btn-outline-danger' : 'btn-outline-success' ?>"
                                       title="<?= $a['is_open'] ? 'Tutup Event' : 'Buka Event' ?>"
                                       onclick="return confirm('<?= $a['is_open'] ? 'Tutup event ini?' : 'Buka event ini?' ?>')">
                                        <i class="bi bi-<?= $a['is_open'] ? 'lock' : 'unlock' ?>"></i>
                                    </a>
                                    <!-- Toggle Tampil/Sembunyikan -->
                                    <a href="/assessment/toggle-visible/<?= $a['id'] ?>"
                                       class="btn btn-sm <?= $a['is_visible'] ? 'btn-outline-secondary' : 'btn-outline-primary' ?>"
                                       title="<?= $a['is_visible'] ? 'Sembunyikan dari Guru' : 'Tampilkan ke Guru' ?>"
                                       onclick="return confirm('<?= $a['is_visible'] ? 'Sembunyikan event ini dari guru?' : 'Tampilkan event ini ke guru?' ?>')">
                                        <i class="bi bi-<?= $a['is_visible'] ? 'eye-slash' : 'eye' ?>"></i>
                                    </a>
                                    <!-- Hapus -->
                                    <a href="/assessment/delete/<?= $a['id'] ?>"
                                       class="btn btn-sm btn-outline-danger"
                                       title="Hapus"
                                       onclick="return confirm('Yakin hapus event ini? Semua data koreksi akan ikut terhapus!')">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<?= $this->section('scripts') ?>
<script>
$(document).ready(function() {
    $('#assessmentTable').DataTable({
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.13.8/i18n/id.json"
        },
        "order": [[ 0, "asc" ]],
        "columnDefs": [
            { "orderable": false, "targets": [4, 7] }
        ],
        "pageLength": 10,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Semua"]]
    });
});
</script>
<?= $this->endSection() ?>
<?= $this->endSection() ?>