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

<div class="row">
    <div class="col-md-4">
        <!-- Form Tambah -->
        <div class="card mb-3">
            <div class="card-header d-flex align-items-center gap-2">
                <i class="bi bi-plus-circle text-primary"></i>
                <span class="fw-semibold">Tambah Tahun Ajaran</span>
            </div>
            <div class="card-body">

                <?php if (session()->getFlashdata('errors')): ?>
                <div class="alert alert-danger py-2">
                    <ul class="mb-0 ps-3 small">
                        <?php foreach (session()->getFlashdata('errors') as $error): ?>
                        <li><?= esc($error) ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>

                <form action="/academic-year/store" method="post">
                    <?= csrf_field() ?>
                    <div class="mb-3">
                        <label class="form-label">Nama Tahun Ajaran <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control"
                            placeholder="Contoh: 2025/2026"
                            value="<?= old('name') ?>" required>
                        <div class="form-text">Format: YYYY/YYYY</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Mulai <span class="text-danger">*</span></label>
                        <input type="date" name="start_date" class="form-control"
                            value="<?= old('start_date') ?>" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Selesai <span class="text-danger">*</span></label>
                        <input type="date" name="end_date" class="form-control"
                            value="<?= old('end_date') ?>" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-save me-2"></i>Simpan
                    </button>
                </form>
            </div>
        </div>

        <!-- Info Aktif -->
        <div class="card border-success">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-1">
                    <i class="bi bi-calendar-check text-success fs-5"></i>
                    <span class="fw-semibold">Tahun Ajaran Aktif</span>
                </div>
                <?php if ($active): ?>
                <div class="display-6 fw-bold text-success"><?= esc($active['name']) ?></div>
                <small class="text-muted">
                    <?= date('d M Y', strtotime($active['start_date'])) ?> —
                    <?= date('d M Y', strtotime($active['end_date'])) ?>
                </small>
                <?php else: ?>
                <p class="text-muted small mb-0">Belum ada tahun ajaran aktif</p>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <!-- Tabel -->
        <div class="card">
            <div class="card-header d-flex align-items-center gap-2">
                <i class="bi bi-table text-primary"></i>
                <span class="fw-semibold">Daftar Tahun Ajaran</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="tableYear">
                        <thead class="table-light">
                            <tr>
                                <th width="5%">#</th>
                                <th>Nama</th>
                                <th>Periode</th>
                                <th width="10%">Status</th>
                                <th width="20%">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($years)): ?>
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">
                                    <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                    Belum ada data
                                </td>
                            </tr>
                            <?php else: ?>
                            <?php foreach ($years as $i => $year): ?>
                            <tr>
                                <td><?= $i + 1 ?></td>
                                <td class="fw-semibold"><?= esc($year['name']) ?></td>
                                <td class="small text-muted">
                                    <?= date('d M Y', strtotime($year['start_date'])) ?> —
                                    <?= date('d M Y', strtotime($year['end_date'])) ?>
                                </td>
                                <td>
                                    <?php if ($year['is_active']): ?>
                                    <span class="badge bg-success">Aktif</span>
                                    <?php else: ?>
                                    <span class="badge bg-secondary">Nonaktif</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <?php if (!$year['is_active']): ?>
                                        <a href="/academic-year/set-active/<?= $year['id'] ?>"
                                            class="btn btn-sm btn-outline-success"
                                            title="Aktifkan"
                                            onclick="return confirm('Aktifkan tahun ajaran ini?')">
                                            <i class="bi bi-check-circle"></i>
                                        </a>
                                        <?php endif; ?>
                                        <button class="btn btn-sm btn-outline-primary"
                                            title="Edit"
                                            onclick="editYear(<?= $year['id'] ?>, '<?= esc($year['name']) ?>', '<?= $year['start_date'] ?>', '<?= $year['end_date'] ?>')">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <?php if (!$year['is_active']): ?>
                                        <a href="/academic-year/delete/<?= $year['id'] ?>"
                                            class="btn btn-sm btn-outline-danger"
                                            title="Hapus"
                                            onclick="return confirm('Hapus tahun ajaran ini?')">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                        <?php endif; ?>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">
                    <i class="bi bi-pencil me-2"></i>Edit Tahun Ajaran
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editForm" method="post">
                <?= csrf_field() ?>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Tahun Ajaran</label>
                        <input type="text" name="name" id="editName" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Mulai</label>
                        <input type="date" name="start_date" id="editStartDate" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Selesai</label>
                        <input type="date" name="end_date" id="editEndDate" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save me-2"></i>Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
function editYear(id, name, startDate, endDate) {
    document.getElementById('editName').value      = name;
    document.getElementById('editStartDate').value = startDate;
    document.getElementById('editEndDate').value   = endDate;
    document.getElementById('editForm').action     = '/academic-year/update/' + id;
    new bootstrap.Modal(document.getElementById('editModal')).show();
}
</script>
<?= $this->endSection() ?>