<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>
<!-- Tambahkan Library DataTables di Header -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap5.min.css">

<style>
    .admin-card { border: none; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    .table thead th { background-color: #f8f9fa; border-top: none; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; color: #6c757d; padding: 15px; }
    .table tbody td { vertical-align: middle; padding: 15px; }
    .status-active { color: #28a745; font-weight: bold; }
    .status-inactive { color: #dc3545; font-weight: bold; }
    .btn-action { margin: 2px;}
    .dataTables_length select {
    border-radius: 10px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    margin: 0 5px;
}
    /* Style tambahan untuk checkbox */
    .form-check-input { cursor: pointer; width: 18px; height: 18px; }
    .dataTables_wrapper .dataTables_filter { text-align: right; }
    .dataTables_wrapper .dataTables_filter input { border-radius: 50px;
    padding: 8px 20px;
    border: 1px solid #ddd;
    width: 250px !important;
    margin-left: 10px; }
    .dataTables_paginate {
    float: right; }
</style>

<div class="container pt-100 pb-100">
    <div class="row mb-4">
        <div class="col-md-6">
            <h3 class="fw-bold text-dark mb-1">Manajemen Kelulusan</h3>
            <p class="text-muted">Kelola data pengumuman siswa kelas XII SMKN 1 Sukalarang</p>
        </div>
        <div class="col-md-6 text-md-end d-flex align-items-center justify-content-md-end">
            <!-- Tombol Hapus Masal Baru -->
            <button type="button" class="btn btn-outline-danger rounded-pill px-4 fw-bold shadow-sm me-2 d-none" id="btnHapusMasal">
                <i class="fa fa-trash-alt me-2"></i> HAPUS TERPILIH
            </button>
            
            <a href="<?= base_url('admin/kelulusan/toggle') ?>" class="btn <?= $pengaturan['is_active'] ? 'btn-danger' : 'btn-success' ?> rounded-pill px-4 fw-bold shadow-sm me-2">
                <i class="fa <?= $pengaturan['is_active'] ? 'fa-toggle-on' : 'fa-toggle-off' ?> me-2"></i>
                <?= $pengaturan['is_active'] ? 'TUTUP PENGUMUMAN' : 'BUKA PENGUMUMAN' ?>
            </a>
            <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalImport">
                <i class="fa fa-file-csv me-2"></i> IMPORT DATA
            </button>
        </div>
    </div>

    <?php if (session()->getFlashdata('success')) : ?>
        <div class="alert alert-success border-0 shadow-sm rounded-pill mb-4 text-center"><?= session()->getFlashdata('success') ?></div>
    <?php endif; ?>

    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card admin-card p-3 border-start border-primary border-4">
                <small class="text-muted fw-bold">TOTAL SISWA</small>
                <h2 class="fw-bold mb-0"><?= count($siswa) ?></h2>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="card admin-card p-3 border-start border-info border-4">
                <small class="text-muted fw-bold">STATUS SISTEM</small>
                <div class="<?= $pengaturan['is_active'] ? 'status-active' : 'status-inactive' ?> h4 mb-0">
                    <?= $pengaturan['is_active'] ? 'ONLINE / TERBUKA' : 'OFFLINE / TERTUTUP' ?>
                </div>
            </div>
        </div>
    </div>

    <div class="card admin-card overflow-hidden">
        <div class="card-body p-4"> <!-- Padding ditambah agar filter DataTables rapi -->
            <form action="<?= base_url('admin/kelulusan/hapus_masal') ?>" method="post" id="formHapusMasal">
                <?= csrf_field() ?>
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="tabelKelulusan">
                        <thead>
                            <tr>
                                <th class="ps-4"><input type="checkbox" class="form-check-input" id="checkAll"></th>
                                <th>No</th>
                                <th>NIS / NISN</th>
                                <th>Nama Siswa</th>
                                <th>Tempat, Tgl Lahir</th>
                                <th>Nama Orang Tua</th>
                                <th>Rata-Rata</th>
                                <th>Jurusan</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if($siswa) : $no = 1; foreach ($siswa as $s) : ?>
                            <tr>
                                <td class="ps-4">
                                    <input type="checkbox" name="ids[]" value="<?= $s['id_lulus'] ?>" class="form-check-input checkItem">
                                </td>
                                <td class="text-muted"><?= $no++ ?></td>
                                <td>
                                    <div class="fw-bold text-primary"><?= $s['nis'] ?></div>
                                    <small class="text-muted"><?= $s['nisn'] ?></small>
                                </td>
                                <td class="fw-bold"><?= esc($s['nama_siswa']) ?></td>
                                <td>
                                    <div><?= esc($s['tempat_lahir']) ?></div>
                                    <small class="text-muted"><?= date('d-m-Y', strtotime($s['tanggal_lahir'])) ?></small>
                                </td>
                                <td><?= esc($s['nama_ibu']) ?></td>
                                <td class="fw-bold text-info"><?= $s['rata_rata_nilai'] ?></td>
                                <td><span class="text-muted small"><?= esc($s['jurusan']) ?></span></td>
                                <td class="text-center">
                                    <span class="badge rounded-pill <?= $s['status'] == 'LULUS' ? 'bg-success' : 'bg-danger' ?> px-3">
                                        <?= $s['status'] ?>
                                    </span>
                                </td>
                                <td class="text-center">
                                    <a href="<?= base_url('admin/kelulusan/edit/'.$s['id_lulus']) ?>" class="btn-action btn btn-soft-primary text-primary" title="Edit Data">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    <a href="<?= base_url('admin/kelulusan/hapus/'.$s['id_lulus']) ?>" class="btn-action btn btn-soft-danger text-danger" onclick="return confirm('Hapus data <?= esc($s['nama_siswa']) ?>?')" title="Hapus Data">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; else: ?>
                            <tr><td colspan="10" class="text-center py-5 text-muted">Data masih kosong. Silakan import file CSV.</td></tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- MODAL IMPORT TETAP SAMA -->
<div class="modal fade" id="modalImport" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
            <div class="modal-header border-0 pb-0 p-4">
                <h5 class="fw-bold mb-0"><i class="fa fa-file-csv text-success me-2"></i> Import Data Kelulusan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="<?= base_url('admin/kelulusan/import') ?>" method="post" enctype="multipart/form-data">
                <?= csrf_field() ?>
                <div class="modal-body p-4">
                    <div class="alert alert-info border-0 small mb-4" style="border-radius: 12px;">
                        <strong>Urutan Kolom CSV (Pemisah Titik Koma):</strong><br>
                        No; NISN; Nama; Tempat Lahir; Tanggal Lahir (YYYY-MM-DD); Nama Orang Tua; NIS; Rata-rata Nilai; Jurusan; Status; Keterangan[cite: 7]
                    </div>
                    <div class="p-3 bg-light rounded-3 mb-3 border border-dashed text-center">
                        <p class="small text-muted mb-2">Pilih file format .csv</p>
                        <input type="file" name="file_excel" class="form-control" accept=".csv" required>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success rounded-pill px-4 fw-bold shadow">PROSES IMPORT</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 1. Panggil jQuery dulu (Wajib paling atas) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 2. Panggil DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap5.min.js"></script>

<script>
    // Gunakan jQuery secara spesifik agar tidak bentrok dengan layout
    (function($) {
        $(document).ready(function() {
            // Cek sekali lagi apakah tabelnya ada
            if($('#tabelKelulusan').length > 0) {
                var table = $('#tabelKelulusan').DataTable({
    "dom": '<"row mb-3"<"col-md-6"l><"col-md-6"f>>rt<"row mt-3"<"col-md-6"i><"col-md-6"p>>',
    "language": {
        "search": "",
        "searchPlaceholder": "Cari Nama atau NISN...",
        "lengthMenu": "Tampilkan data _MENU_",
        "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ siswa",
        "paginate": { 
            "next": '<i class="fa fa-angle-right"></i>', 
            "previous": '<i class="fa fa-angle-left"></i>' 
        }
    },
    "columnDefs": [ 
        { "orderable": false, "targets": [0, 9] }, // Checkbox & Aksi tidak bisa diurutkan
        { "className": "text-center", "targets": [0, 1, 8, 9] } // Rapi di tengah
    ]
});

                // FUNGSI CHECK ALL
                $('#checkAll').on('click', function() {
                    var rows = table.rows({ 'search': 'applied' }).nodes();
                    $('input.checkItem', rows).prop('checked', this.checked);
                    updateHapusBtn();
                });

                // Update tombol saat checkbox individu diklik
                $('#tabelKelulusan tbody').on('change', 'input.checkItem', function() {
                    if (!this.checked) { $('#checkAll').prop('checked', false); }
                    updateHapusBtn();
                });

                function updateHapusBtn() {
                    var count = table.$('input.checkItem:checked').length;
                    if (count > 0) {
                        $('#btnHapusMasal').removeClass('d-none').html('<i class="fa fa-trash-alt me-2"></i> HAPUS ' + count + ' DATA');
                    } else {
                        $('#btnHapusMasal').addClass('d-none');
                        $('#checkAll').prop('checked', false);
                    }
                }

                // Eksekusi Hapus Masal
                $('#btnHapusMasal').on('click', function() {
                    if (confirm('Bapak Azis yakin ingin menghapus ' + table.$('input.checkItem:checked').length + ' data sekaligus?')) {
                        var form = $('#formHapusMasal');
                        table.$('input.checkItem:checked').each(function() {
                            if(!$.contains(document, this)){
                                form.append($('<input>').attr('type', 'hidden').attr('name', 'ids[]').val($(this).val()));
                            }
                        });
                        form.submit();
                    }
                });
            }
        });
    })(jQuery);
</script>
<?= $this->endSection() ?>