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

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <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 Tingkat</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="/grade/store" method="post">
                    <?= csrf_field() ?>
                    <div class="mb-3">
                        <label class="form-label">Nama Tingkat <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control"
                            placeholder="Contoh: VII, VIII, IX"
                            value="<?= old('name') ?>" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Urutan <span class="text-danger">*</span></label>
                        <input type="number" name="order" class="form-control"
                            placeholder="Contoh: 1, 2, 3"
                            value="<?= old('order') ?>" required>
                        <div class="form-text">Digunakan untuk mengurutkan tampilan</div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-save me-2"></i>Simpan
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <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 Tingkat</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="5%">#</th>
                                <th>Nama Tingkat</th>
                                <th width="15%">Urutan</th>
                                <th width="20%">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($grades)): ?>
                            <tr>
                                <td colspan="4" 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 ($grades as $i => $grade): ?>
                            <tr>
                                <td><?= $i + 1 ?></td>
                                <td class="fw-semibold"><?= esc($grade['name']) ?></td>
                                <td><?= $grade['order'] ?></td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-sm btn-outline-primary"
                                            onclick="editGrade(<?= $grade['id'] ?>, '<?= esc($grade['name']) ?>', <?= $grade['order'] ?>)">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <a href="/grade/delete/<?= $grade['id'] ?>"
                                            class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('Hapus tingkat ini?')">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </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 Tingkat
                </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 Tingkat</label>
                        <input type="text" name="name" id="editName" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Urutan</label>
                        <input type="number" name="order" id="editOrder" 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 editGrade(id, name, order) {
    document.getElementById('editName').value  = name;
    document.getElementById('editOrder').value = order;
    document.getElementById('editForm').action = '/grade/update/' + id;
    new bootstrap.Modal(document.getElementById('editModal')).show();
}
</script>
<?= $this->endSection() ?>