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

<div class="row g-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-header bg-white border-0 pt-4 px-4 pb-0 flex-shrink-0">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="d-flex align-items-center gap-2">
                        <div class="bg-primary bg-opacity-10 p-2 rounded text-primary">
                            <i class="bi bi-shield-exclamation fs-4"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1 text-dark">Master Pengaturan Pelanggaran</h5>
                            <small class="text-muted">Kelola kategori, aturan poin sanksi, dan ambang batas Surat Peringatan (SP) sekolah.</small>
                        </div>
                    </div>
                </div>
                
                <!-- Tab Menu -->
                <ul class="nav nav-tabs nav-tabs-bordered mt-4" id="violationSettingsTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="rules-tab" data-bs-toggle="tab" data-bs-target="#rules" type="button" role="tab">
                            <i class="bi bi-journal-text me-1"></i>Butir Aturan & Poin
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="categories-tab" data-bs-toggle="tab" data-bs-target="#categories" type="button" role="tab">
                            <i class="bi bi-tags me-1"></i>Kategori Aspek
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="sanctions-tab" data-bs-toggle="tab" data-bs-target="#sanctions" type="button" role="tab">
                            <i class="bi bi-envelope-exclamation me-1"></i>Ambang Batas Sanksi (SP)
                        </button>
                    </li>
                </ul>
            </div>
            
            <div class="card-body p-4">
                <div class="tab-content" id="violationSettingsTabContent">
                    
                    <!-- ── TAB 1: RULES & POINTS ────────────────────────────────── -->
                    <div class="tab-pane fade show active" id="rules" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-dark mb-0"><i class="bi bi-list-check me-2"></i>Daftar Aturan Poin Pelanggaran</h6>
                            <button class="btn btn-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#addRuleModal">
                                <i class="bi bi-plus-circle me-1"></i>Tambah Aturan
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-middle table-sm border-light">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 50px" class="text-center">No</th>
                                        <th style="width: 100px">Kode</th>
                                        <th style="width: 200px">Kategori Aspek</th>
                                        <th>Butir Pelanggaran</th>
                                        <th style="width: 120px" class="text-center">Keparahan</th>
                                        <th style="width: 90px" class="text-center">Poin</th>
                                        <th style="width: 110px" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (empty($rules)): ?>
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-muted">Belum ada data aturan pelanggaran.</td>
                                    </tr>
                                    <?php else: ?>
                                        <?php $no = 1; foreach ($rules as $r): ?>
                                        <tr>
                                            <td class="text-center text-muted small"><?= $no++ ?></td>
                                            <td class="fw-bold text-secondary"><?= esc($r['code']) ?></td>
                                            <td class="small text-dark"><?= esc($r['category_name']) ?></td>
                                            <td class="fw-semibold text-dark"><?= esc($r['description']) ?></td>
                                            <td class="text-center">
                                                <?php
                                                $sev = $r['severity'];
                                                $badgeClass = 'bg-success bg-opacity-10 text-success';
                                                if ($sev === 'Khusus') $badgeClass = 'bg-dark text-white';
                                                elseif ($sev === 'Berat') $badgeClass = 'bg-danger bg-opacity-10 text-danger';
                                                elseif ($sev === 'Sedang') $badgeClass = 'bg-warning bg-opacity-10 text-warning';
                                                ?>
                                                <span class="badge <?= $badgeClass ?> px-2.5 py-1.5 rounded-pill small"><?= esc($sev) ?></span>
                                            </td>
                                            <td class="text-center fw-bold text-danger"><?= esc($r['points']) ?> Pts</td>
                                            <td class="text-center">
                                                <button class="btn btn-outline-primary btn-xs" onclick='editRule(<?= json_encode($r) ?>)'>
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                <a href="/violation-settings/rule/delete/<?= $r['id'] ?>" class="btn btn-outline-danger btn-xs" onclick="return confirm('Apakah Anda yakin ingin menghapus aturan ini?')">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- ── TAB 2: CATEGORIES ────────────────────────────────────── -->
                    <div class="tab-pane fade" id="categories" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-dark mb-0"><i class="bi bi-tags-fill me-2"></i>Daftar Kategori Aspek</h6>
                            <button class="btn btn-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                                <i class="bi bi-plus-circle me-1"></i>Tambah Kategori
                            </button>
                        </div>
                        <div class="table-responsive" style="max-width: 700px;">
                            <table class="table table-hover align-middle border-light">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 70px" class="text-center">No</th>
                                        <th>Nama Kategori Aspek</th>
                                        <th style="width: 150px" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (empty($categories)): ?>
                                    <tr>
                                        <td colspan="3" class="text-center py-4 text-muted">Belum ada data kategori.</td>
                                    </tr>
                                    <?php else: ?>
                                        <?php $no = 1; foreach ($categories as $cat): ?>
                                        <tr>
                                            <td class="text-center text-muted"><?= $no++ ?></td>
                                            <td class="fw-semibold text-dark"><?= esc($cat['name']) ?></td>
                                            <td class="text-center">
                                                <button class="btn btn-outline-primary btn-xs" onclick="editCategory(<?= $cat['id'] ?>, '<?= esc($cat['name'], 'js') ?>')">
                                                    <i class="bi bi-pencil"></i> Edit
                                                </button>
                                                <a href="/violation-settings/category/delete/<?= $cat['id'] ?>" class="btn btn-outline-danger btn-xs" onclick="return confirm('Apakah Anda yakin ingin menghapus kategori ini?')">
                                                    <i class="bi bi-trash"></i> Hapus
                                                </a>
                                            </td>
                                        </tr>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- ── TAB 3: SANCTIONS ──────────────────────────────────────── -->
                    <div class="tab-pane fade" id="sanctions" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-dark mb-0"><i class="bi bi-exclamation-triangle-fill me-2"></i>Ambang Batas Surat Peringatan (SP)</h6>
                            <button class="btn btn-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#addSanctionModal">
                                <i class="bi bi-plus-circle me-1"></i>Tambah Batas Sanksi
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-middle border-light">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 70px" class="text-center">No</th>
                                        <th style="width: 150px" class="text-center">Ambang Poin (Min)</th>
                                        <th style="width: 250px">Nama Tindakan Sanksi</th>
                                        <th>Deskripsi / Penjelasan Tindakan</th>
                                        <th style="width: 120px" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (empty($sanctions)): ?>
                                    <tr>
                                        <td colspan="5" class="text-center py-4 text-muted">Belum ada data sanksi.</td>
                                    </tr>
                                    <?php else: ?>
                                        <?php $no = 1; foreach ($sanctions as $sanc): ?>
                                        <tr>
                                            <td class="text-center text-muted"><?= $no++ ?></td>
                                            <td class="text-center"><span class="badge bg-danger fs-6 px-3 py-1.5"><?= esc($sanc['min_points']) ?> Poin</span></td>
                                            <td class="fw-bold text-dark"><?= esc($sanc['action_title']) ?></td>
                                            <td class="small text-secondary"><?= esc($sanc['description']) ?></td>
                                            <td class="text-center">
                                                <button class="btn btn-outline-primary btn-xs" onclick='editSanction(<?= json_encode($sanc) ?>)'>
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                <a href="/violation-settings/sanction/delete/<?= $sanc['id'] ?>" class="btn btn-outline-danger btn-xs" onclick="return confirm('Apakah Anda yakin ingin menghapus sanksi ini?')">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ────────────────────────────────────────────────────────────────
     MODALS FOR CRUD OPERATIONS
     ──────────────────────────────────────────────────────────────── -->

<!-- Modal Kategori (Add) -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="/violation-settings/category/store" method="POST">
            <?= csrf_field() ?>
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary bg-gradient text-white py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-tag me-2"></i>Tambah Kategori Aspek</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">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nama Kategori Aspek</label>
                        <input type="text" name="name" class="form-control border-primary" required placeholder="Cth: Kedisiplinan & Ketertiban">
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Kategori (Edit) -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="editCategoryForm" method="POST">
            <?= csrf_field() ?>
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary bg-gradient text-white py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i>Edit Kategori Aspek</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">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nama Kategori Aspek</label>
                        <input type="text" name="name" id="editCatName" class="form-control border-primary" required>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Perbarui</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Aturan (Add) -->
<div class="modal fade" id="addRuleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="/violation-settings/rule/store" method="POST">
            <?= csrf_field() ?>
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary bg-gradient text-white py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-journal-text me-2"></i>Tambah Aturan Pelanggaran</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">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Kategori Aspek</label>
                        <select name="category_id" class="form-select border-primary" required>
                            <option value="">-- Pilih Kategori --</option>
                            <?php foreach ($categories as $cat): ?>
                            <option value="<?= $cat['id'] ?>"><?= esc($cat['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Kode</label>
                            <input type="text" name="code" class="form-control border-primary" required placeholder="Cth: DIS-01">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Bobot Poin</label>
                            <input type="number" name="points" class="form-control border-primary" required min="1" placeholder="Cth: 5">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Tingkat Keparahan</label>
                        <select name="severity" class="form-select border-primary" required>
                            <option value="Ringan">Ringan</option>
                            <option value="Sedang">Sedang</option>
                            <option value="Berat">Berat</option>
                            <option value="Khusus">Khusus</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Butir Pelanggaran</label>
                        <input type="text" name="description" class="form-control border-primary" required placeholder="Cth: Datang terlambat ke sekolah">
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Aturan (Edit) -->
<div class="modal fade" id="editRuleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="editRuleForm" method="POST">
            <?= csrf_field() ?>
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary bg-gradient text-white py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i>Edit Aturan Pelanggaran</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">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Kategori Aspek</label>
                        <select name="category_id" id="editRuleCat" class="form-select border-primary" required>
                            <?php foreach ($categories as $cat): ?>
                            <option value="<?= $cat['id'] ?>"><?= esc($cat['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Kode</label>
                            <input type="text" name="code" id="editRuleCode" class="form-control border-primary" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Bobot Poin</label>
                            <input type="number" name="points" id="editRulePoints" class="form-control border-primary" required min="1">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Tingkat Keparahan</label>
                        <select name="severity" id="editRuleSeverity" class="form-select border-primary" required>
                            <option value="Ringan">Ringan</option>
                            <option value="Sedang">Sedang</option>
                            <option value="Berat">Berat</option>
                            <option value="Khusus">Khusus</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Butir Pelanggaran</label>
                        <input type="text" name="description" id="editRuleDesc" class="form-control border-primary" required>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Perbarui</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Sanksi (Add) -->
<div class="modal fade" id="addSanctionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="/violation-settings/sanction/store" method="POST">
            <?= csrf_field() ?>
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary bg-gradient text-white py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-envelope-exclamation me-2"></i>Tambah Batas Sanksi</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">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Minimal Akumulasi Poin</label>
                        <input type="number" name="min_points" class="form-control border-primary" required min="1" placeholder="Cth: 25">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nama Tindakan Sanksi</label>
                        <input type="text" name="action_title" class="form-control border-primary" required placeholder="Cth: Panggilan Orang Tua ke Sekolah">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Deskripsi / Penjelasan Tindakan</label>
                        <textarea name="description" class="form-control border-primary" rows="4" required placeholder="Cth: Wali kelas bersama BK memanggil orang tua dan siswa untuk menandatangani surat peringatan..."></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Sanksi (Edit) -->
<div class="modal fade" id="editSanctionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="editSanctionForm" method="POST">
            <?= csrf_field() ?>
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary bg-gradient text-white py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i>Edit Batas Sanksi</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">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Minimal Akumulasi Poin</label>
                        <input type="number" name="min_points" id="editSancPoints" class="form-control border-primary" required min="1">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nama Tindakan Sanksi</label>
                        <input type="text" name="action_title" id="editSancTitle" class="form-control border-primary" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Deskripsi / Penjelasan Tindakan</label>
                        <textarea name="description" id="editSancDesc" class="form-control border-primary" rows="4" required></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4">Perbarui</button>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
    /* Polyfill btn-xs for Bootstrap 5 */
    .btn-xs {
        padding: 0.18rem 0.5rem;
        font-size: 0.75rem;
        border-radius: 0.25rem;
        line-height: 1.4;
    }
    .nav-tabs-bordered .nav-link {
        border-bottom: 3px solid transparent;
        color: #6c757d;
        font-weight: 500;
        padding: 0.6rem 1rem;
    }
    .nav-tabs-bordered .nav-link.active {
        border-bottom-color: #0d6efd;
        color: #0d6efd;
        font-weight: 600;
        background: transparent;
    }
</style>
<script>
    // Kategori functions
    function editCategory(id, name) {
        document.getElementById('editCategoryForm').action = '/violation-settings/category/update/' + id;
        document.getElementById('editCatName').value = name;
        new bootstrap.Modal(document.getElementById('editCategoryModal')).show();
    }

    // Aturan functions
    function editRule(data) {
        document.getElementById('editRuleForm').action = '/violation-settings/rule/update/' + data.id;
        document.getElementById('editRuleCat').value = data.category_id;
        document.getElementById('editRuleCode').value = data.code;
        document.getElementById('editRulePoints').value = data.points;
        document.getElementById('editRuleSeverity').value = data.severity;
        document.getElementById('editRuleDesc').value = data.description;
        new bootstrap.Modal(document.getElementById('editRuleModal')).show();
    }

    // Sanksi functions
    function editSanction(data) {
        document.getElementById('editSanctionForm').action = '/violation-settings/sanction/update/' + data.id;
        document.getElementById('editSancPoints').value = data.min_points;
        document.getElementById('editSancTitle').value = data.action_title;
        document.getElementById('editSancDesc').value = data.description;
        new bootstrap.Modal(document.getElementById('editSanctionModal')).show();
    }
</script>

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