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

<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <i class="bi bi-book text-primary"></i>
            <span class="fw-semibold">Mata Pelajaran</span>
            <span class="badge bg-secondary"><?= count($subjects) ?></span>
        </div>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalAdd">
            <i class="bi bi-plus-circle me-1"></i>Tambah Mapel
        </button>
    </div>
    <div class="card-body">
        <?php if (session()->getFlashdata('success')): ?>
        <div class="alert alert-success alert-dismissible fade show py-2 small" role="alert">
            <i class="bi bi-check-circle me-1"></i><?= 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 py-2 small" role="alert">
            <i class="bi bi-exclamation-circle me-1"></i><?= session()->getFlashdata('error') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>

        <div class="table-responsive">
            <table class="table table-hover table-sm" id="dataTable">
                <thead class="table-light">
                    <tr>
                        <th width="50">#</th>
                        <th>Kode</th>
                        <th>Nama Mata Pelajaran</th>
                        <th width="100">Jenjang</th>
                        <th>Keterangan</th>
                        <th width="100">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($subjects)): ?>
                    <tr>
                        <td colspan="6" class="text-center text-muted py-5">
                            <i class="bi bi-inbox fs-2 d-block mb-2 opacity-25"></i>
                            <small>Belum ada data mata pelajaran</small>
                        </td>
                    </tr>
                    <?php else: ?>
                        <?php foreach ($subjects as $i => $s): ?>
                        <tr>
                            <td class="text-center"><?= $i + 1 ?></td>
                            <td><?= esc($s['code'] ?? '—') ?></td>
                            <td><?= esc($s['name']) ?></td>
                            <td>
                                <?php if ($s['level'] == 'ALL'): ?>
                                    <span class="badge bg-secondary">Semua Jenjang</span>
                                <?php elseif ($s['level'] == 'MI'): ?>
                                    <span class="badge bg-primary">MI</span>
                                <?php elseif ($s['level'] == 'MTs'): ?>
                                    <span class="badge bg-success">MTs</span>
                                <?php elseif ($s['level'] == 'MA'): ?>
                                    <span class="badge bg-warning text-dark">MA</span>
                                <?php else: ?>
                                    <span class="badge bg-secondary"><?= esc($s['level']) ?></span>
                                <?php endif; ?>
                            </td>
                            <td><?= esc($s['description'] ?? '—') ?></td>
                            <td>
                                <div class="d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-primary edit-btn" 
                                        data-id="<?= $s['id'] ?>"
                                        data-code="<?= esc($s['code'] ?? '') ?>"
                                        data-name="<?= esc($s['name']) ?>"
                                        data-level="<?= esc($s['level']) ?>"
                                        data-description="<?= esc($s['description'] ?? '') ?>"
                                        data-bs-toggle="modal" data-bs-target="#modalEdit">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <a href="/subject/delete/<?= $s['id'] ?>" 
                                        class="btn btn-sm btn-outline-danger"
                                        onclick="return confirm('Hapus mata pelajaran <?= esc($s['name']) ?>?')">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Add -->
<div class="modal fade" id="modalAdd" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/subject/store" method="post">
                <?= csrf_field() ?>
                <div class="modal-header">
                    <h6 class="modal-title fw-semibold">
                        <i class="bi bi-plus-circle me-2 text-primary"></i>Tambah Mata Pelajaran
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Kode</label>
                        <input type="text" name="code" class="form-control" placeholder="Contoh: MTK">
                        <div class="form-text">Opsional, untuk singkatan</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Mata Pelajaran <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Jenjang <span class="text-danger">*</span></label>
                        <select name="level" class="form-select" required>
                            <option value="ALL">Semua Jenjang (MI/MTs/MA)</option>
                            <option value="TK">TK (Taman Kanak-Kanak)</option>
                            <option value="SD">SD (Sekolah Dasar)</option>
                            <option value="SMP">SMP (Sekolah Menengah Pertama)</option>
                            <option value="SMA">SMA (Sekolah Menengah Atas)</option>
                            <option value="SMK">SMK (Sekolah Menengah Kejuruan)</option>
                            <option value="MI">MI (Madrasah Ibtidaiyah)</option>
                            <option value="MTs">MTs (Madrasah Tsanawiyah)</option>
                            <option value="MA">MA (Madrasah Aliyah)</option>
                        </select>
                        <div class="form-text">Pilih jenjang spesifik, atau "Semua" jika mapel berlaku untuk semua jenjang</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea name="description" class="form-control" rows="2" placeholder="Opsional"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="modalEdit" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post" id="editForm">
                <?= csrf_field() ?>
                <!--<input type="hidden" name="_method" value="PUT">-->
                <div class="modal-header">
                    <h6 class="modal-title fw-semibold">
                        <i class="bi bi-pencil-square me-2 text-warning"></i>Edit Mata Pelajaran
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Kode</label>
                        <input type="text" name="code" id="editCode" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Mata Pelajaran <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="editName" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Jenjang <span class="text-danger">*</span></label>
                        <select name="level" id="editLevel" class="form-select" required>
                            <option value="ALL">Semua Jenjang (MI/MTs/MA)</option>
                            <option value="TK">TK (Taman Kanak-Kanak)</option>
                            <option value="SD">SD (Sekolah Dasar)</option>
                            <option value="SMP">SMP (Sekolah Menengah Pertama)</option>
                            <option value="SMA">SMA (Sekolah Menengah Atas)</option>
                            <option value="SMK">SMK (Sekolah Menengah Kejuruan)</option>
                            <option value="MI">MI (Madrasah Ibtidaiyah)</option>
                            <option value="MTs">MTs (Madrasah Tsanawiyah)</option>
                            <option value="MA">MA (Madrasah Aliyah)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea name="description" id="editDescription" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning btn-sm">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
    $(document).ready(function() {
        $('#dataTable').DataTable({
        language: {
            processing: "Sedang memproses...",
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(disaring dari _MAX_ data keseluruhan)",
            loadingRecords: "Sedang memuat...",
            zeroRecords: "Tidak ada data yang ditemukan",
            emptyTable: "Tidak ada data",
            paginate: {
                first: "Pertama",
                previous: "Sebelumnya",
                next: "Selanjutnya",
                last: "Terakhir"
            }
        },
        pageLength: 25,
        order: [[2, 'asc']]
    });
    
    $('.edit-btn').click(function() {
        const id = $(this).data('id');
        const code = $(this).data('code');
        const name = $(this).data('name');
        const level = $(this).data('level');
        const description = $(this).data('description');
        
        $('#editForm').attr('action', '/subject/update/' + id);
        $('#editCode').val(code);
        $('#editName').val(name);
        $('#editLevel').val(level);
        $('#editDescription').val(description);
    });
});
</script>
<?= $this->endSection() ?>
