<?= $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-credit-card text-primary"></i>
            <span class="fw-semibold">Kartu Pelajar</span>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#modalUploadZip">
                <i class="bi bi-file-zip me-1"></i>Upload Foto ZIP
            </button>
            <a href="/student-card/settings" class="btn btn-secondary btn-sm">
                <i class="bi bi-gear me-1"></i>Setting Kartu
            </a>
        </div>
    </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="row">
            <div class="col-md-4">
                <div class="mb-3">
                    <label class="form-label">Tingkat</label>
                    <select id="grade_id" class="form-select">
                        <option value="">-- Pilih Tingkat --</option>
                        <?php foreach ($grades as $g): ?>
                        <option value="<?= $g['id'] ?>"><?= esc($g['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label class="form-label">Kelas</label>
                    <select id="classroom_id" class="form-select" disabled>
                        <option value="">-- Pilih Tingkat Dulu --</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label class="form-label">&nbsp;</label>
                    <button class="btn btn-primary w-100" id="btnLoadStudents">
                        <i class="bi bi-search me-1"></i>Load Siswa
                    </button>
                </div>
            </div>
        </div>

        <hr>

        <div id="studentPanel" style="display:none">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">
                    <i class="bi bi-people me-2 text-primary"></i>
                    Daftar Siswa - <span id="className"></span>
                </h6>
                <button type="button" id="btnPrint" class="btn btn-success btn-sm" disabled>
                    <i class="bi bi-printer me-1"></i>Cetak Kartu Terpilih
                </button>
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover table-sm" id="studentTable">
                    <thead class="table-light">
                        <tr>
                            <th width="30">
                                <input type="checkbox" id="checkAll">
                            </th>
                            <th width="50">#</th>
                            <th>NIS</th>
                            <th>Nama Siswa</th>
                            <th>Foto</th>
                            <th width="120">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="studentBody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- ====== CETAK MULTI KELAS ====== -->
<div class="card mt-4">
    <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-layers text-primary"></i>
            <span class="fw-semibold">Cetak Multi Kelas</span>
        </div>
    </div>
    <div class="card-body">
        <div class="row g-2 mb-3">
            <div class="col-md-4">
                <label class="form-label small text-muted mb-1">Tingkat</label>
                <select id="mc_grade_id" class="form-select form-select-sm">
                    <option value="">-- Pilih Tingkat --</option>
                    <?php foreach ($grades as $g): ?>
                    <option value="<?= $g['id'] ?>"><?= esc($g['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small text-muted mb-1">Kelas</label>
                <select id="mc_classroom_id" class="form-select form-select-sm" disabled>
                    <option value="">-- Pilih Tingkat Dulu --</option>
                </select>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="button" class="btn btn-primary btn-sm w-100" id="btnMcLoadStudents">
                    <i class="bi bi-search me-1"></i>Load Siswa Kelas
                </button>
            </div>
        </div>

        <div id="mcLoadedPanel" style="display:none">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="mb-0">Siswa Kelas <span id="mcLoadedClassName"></span></h6>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="mcCheckAllLoaded">
                    <label class="form-check-label small" for="mcCheckAllLoaded">Pilih Semua</label>
                </div>
            </div>
            <div class="table-responsive mb-3">
                <table class="table table-hover table-sm" id="mcLoadedTable">
                    <thead class="table-light">
                        <tr>
                            <th width="30">Pilih</th>
                            <th width="50">#</th>
                            <th>NIS</th>
                            <th>Nama Siswa</th>
                            <th>Foto</th>
                        </tr>
                    </thead>
                    <tbody id="mcLoadedBody"></tbody>
                </table>
            </div>
            <button type="button" class="btn btn-success btn-sm" id="btnMcAddSelected">
                <i class="bi bi-plus me-1"></i>Tambahkan yang Dipilih ke Daftar Cetak
            </button>
            <hr>
        </div>

        <h6 class="fw-semibold mb-3">
            <i class="bi bi-people me-2 text-primary"></i>
            Daftar Siswa yang Akan Dicetak (<span id="mcPrintCount">0</span>)
        </h6>
        <div class="table-responsive">
            <table class="table table-hover table-sm" id="mcPrintTable">
                <thead class="table-light">
                    <tr>
                        <th width="30"><input type="checkbox" id="mcCheckAllPrint"></th>
                        <th width="50">#</th>
                        <th>Kelas</th>
                        <th>NIS</th>
                        <th>Nama Siswa</th>
                        <th width="100">Aksi</th>
                    </tr>
                </thead>
                <tbody id="mcPrintBody">
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">Belum ada siswa dipilih</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="d-flex gap-2 mt-3">
            <button type="button" id="btnMcRemoveSelected" class="btn btn-danger btn-sm" disabled>
                <i class="bi bi-trash me-1"></i>Hapus Terpilih
            </button>
            <button type="button" id="btnMcPrint" class="btn btn-success btn-sm" disabled>
                <i class="bi bi-printer me-1"></i>Cetak Multi Kelas
            </button>
        </div>
    </div>
</div>

<!-- Modal Upload ZIP -->
<div class="modal fade" id="modalUploadZip" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/student-card/upload-mass-photo" method="post" enctype="multipart/form-data">
                <?= csrf_field() ?>
                <div class="modal-header">
                    <h6 class="modal-title fw-semibold">
                        <i class="bi bi-file-zip me-2 text-warning"></i>Upload Foto Massal (ZIP)
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info py-2 small">
                        <i class="bi bi-info-circle me-1"></i>
                        <strong>Petunjuk:</strong><br>
                        1. Siapkan file foto dengan format JPG/PNG<br>
                        2. Nama file harus sesuai <strong>NISN</strong> siswa<br>
                        3. Contoh: 1234567890.jpg<br>
                        4. Kompress semua file menjadi 1 file ZIP
                    </div>
                    <div class="mb-3">
                        <label class="form-label">File ZIP <span class="text-danger">*</span></label>
                        <input type="file" name="zip_file" class="form-control" accept=".zip" required>
                    </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">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Upload Foto Per Siswa -->
<div class="modal fade" id="modalUploadPhoto" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">
                    <i class="bi bi-camera me-2 text-primary"></i>Upload Foto
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="uploadPreview" class="text-center mb-3">
                    <img id="previewImg" src="" style="max-width: 150px; max-height: 150px; display: none;">
                </div>
                <div class="mb-3">
                    <label class="form-label">Pilih Foto</label>
                    <input type="file" id="photoFile" class="form-control" accept="image/jpeg,image/png,image/jpg">
                    <div class="form-text">Max 1MB, format JPG/PNG</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" id="btnSavePhoto">Upload</button>
            </div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
var currentStudentId = null;
var selectedStudents = [];

$(document).ready(function() {
    $('#grade_id').change(function() {
        const gradeId = $(this).val();
        const classroomSelect = $('#classroom_id');
        
        if (!gradeId) {
            classroomSelect.prop('disabled', true).html('<option value="">-- Pilih Tingkat Dulu --</option>');
            $('#studentPanel').hide();
            return;
        }
        
        $.ajax({
            url: '/attendance/get-classrooms',
            method: 'GET',
            data: { grade_id: gradeId, period_id: '<?= $activePeriod['id'] ?? "" ?>' },
            dataType: 'json',
            success: function(data) {
                classroomSelect.prop('disabled', false);
                let options = '<option value="">-- Pilih Kelas --</option>';
                $.each(data, function(i, cls) {
                    options += `<option value="${cls.id}">${cls.name} (${cls.grade_name})</option>`;
                });
                classroomSelect.html(options);
                classroomSelect.val('');
                $('#studentPanel').hide();
            }
        });
    });
    
    $('#btnLoadStudents').click(function() {
        const classroomId = $('#classroom_id').val();
        const periodId = '<?= $activePeriod['id'] ?? "" ?>';
        const className = $('#classroom_id option:selected').text();
        
        if (!classroomId) {
            alert('Pilih kelas terlebih dahulu!');
            return;
        }
        
        $('#className').text(className);
        $('#studentPanel').show();
        $('#studentBody').html('<tr><td colspan="6" class="text-center py-3"><div class="spinner-border spinner-border-sm"></div> Memuat...<\/td><\/tr>');
        
        $.ajax({
            url: '/student-card/get-students',
            method: 'GET',
            data: { classroom_id: classroomId, period_id: periodId },
            dataType: 'json',
            success: function(data) {
                renderStudentTable(data);
            },
            error: function() {
                $('#studentBody').html('<tr><td colspan="6" class="text-center text-danger">Gagal memuat data<\/td><\/tr>');
            }
        });
    });
    
    function renderStudentTable(students) {
        if (students.length === 0) {
            $('#studentBody').html('<tr><td colspan="6" class="text-center text-muted py-5">Tidak ada siswa di kelas ini<\/td><\/tr>');
            return;
        }
        
        let html = '';
        $.each(students, function(i, s) {
            const photoUrl = s.photo ? s.photo_url : 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2EwYWVjMCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjZWRmMmY3Ii8+PHBhdGggZD0iTTEyIDEyYzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00LTQgMS43OS00IDQgMS43OSA0IDQgNHptMCAyYy0yLjY3IDAtOCAxLjM0LTggNHYyaDE2di0yYzAtMi42Ni01LjMzLTQtOC00eiIvPjwvc3ZnPg==';
            html += `
                <tr>
                    <td><input type="checkbox" class="student-check" value="${s.id}"><\/td>
                    <td class="text-center">${i + 1}<\/td>
                    <td>${escapeHtml(s.nis)}<\/td>
                    <td>${escapeHtml(s.full_name)}<\/td>
                    <td><img src="${photoUrl}" style="width: 40px; height: 40px; object-fit: cover; border-radius: 5px;"><\/td>
                    <td>
                        <div class="d-flex gap-1">
                            <button class="btn btn-sm btn-outline-primary upload-photo" data-id="${s.id}" data-name="${escapeHtml(s.full_name)}" data-photo="${s.photo || ''}">
                                <i class="bi bi-camera"></i>
                            </button>
                            ${s.photo ? `<button class="btn btn-sm btn-outline-danger delete-photo" data-id="${s.id}" data-name="${escapeHtml(s.full_name)}">
                                <i class="bi bi-trash"></i>
                            </button>` : ''}
                        </div>
                    <\/td>
                <\/tr>
            `;
        });
        $('#studentBody').html(html);
        
        $('#checkAll').off('click').on('click', function() {
            $('.student-check').prop('checked', $(this).is(':checked'));
            updatePrintButton();
        });
        
        $('.student-check').off('change').on('change', function() {
            updatePrintButton();
        });
    }
    
    function updatePrintButton() {
        const checked = $('.student-check:checked');
        const count = checked.length;
        $('#btnPrint').prop('disabled', count === 0);
        selectedStudents = checked.map(function() { return $(this).val(); }).get();
    }
    
    $('#btnPrint').click(function() {
        if (selectedStudents.length === 0) return;
        window.open(`/student-card/print?student_ids=${selectedStudents.join(',')}`, '_blank');
    });
    
    $(document).on('click', '.upload-photo', function() {
        currentStudentId = $(this).data('id');
        const studentName = $(this).data('name');
        const currentPhoto = $(this).data('photo');
        
        $('#modalUploadPhoto .modal-title').text('Upload Foto - ' + studentName);
        $('#previewImg').hide();
        $('#photoFile').val('');
        $('#modalUploadPhoto').modal('show');
        
        if (currentPhoto) {
            $('#previewImg').attr('src', '<?= base_url("uploads/students/") ?>' + currentPhoto).show();
        }
    });
    
    $('#photoFile').change(function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewImg').attr('src', e.target.result).show();
            };
            reader.readAsDataURL(file);
        }
    });
    
    $('#btnSavePhoto').click(function() {
        const fileInput = $('#photoFile')[0];
        if (!fileInput.files || !fileInput.files[0]) {
            alert('Pilih file foto terlebih dahulu!');
            return;
        }
        
        const formData = new FormData();
        formData.append('student_id', currentStudentId);
        formData.append('photo', fileInput.files[0]);
        formData.append('<?= csrf_token() ?>', '<?= csrf_hash() ?>');
        
        $.ajax({
            url: '/student-card/upload-photo',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $('#modalUploadPhoto').modal('hide');
                    $('#btnLoadStudents').click();
                    showToast(data.message, 'success');
                } else {
                    showToast(data.message, 'danger');
                }
            },
            error: function() {
                showToast('Terjadi kesalahan', 'danger');
            }
        });
    });

    // ========== HAPUS FOTO ==========
    $(document).on('click', '.delete-photo', function() {
        const studentId = $(this).data('id');
        const studentName = $(this).data('name');
        
        if (!confirm(`Hapus foto ${studentName}?`)) return;
        
        $.ajax({
            url: `/student-card/delete-photo/${studentId}`,
            method: 'POST',
            data: {
                '<?= csrf_token() ?>': '<?= csrf_hash() ?>'
            },
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    showToast(data.message, 'success');
                    $('#btnLoadStudents').click();
                } else {
                    showToast(data.message, 'danger');
                }
            },
            error: function() {
                showToast('Terjadi kesalahan', 'danger');
            }
        });
    });
});

function showToast(msg, type) {
    const toast = $(`
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 9999">
            <div class="toast align-items-center text-white bg-${type} border-0 show" role="alert">
                <div class="d-flex">
                    <div class="toast-body small">${msg}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        </div>
    `);
    $('body').append(toast);
    setTimeout(() => toast.remove(), 3000);
}

function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, function(m) {
        if (m === '&') return '&amp;';
        if (m === '<') return '&lt;';
        if (m === '>') return '&gt;';
        return m;
    });
}

// ====== CETAK MULTI KELAS ======
let mcSelectedStudents = [];
let mcLoadedStudents = [];

$(document).ready(function() {
    // Grade -> Classroom
    $('#mc_grade_id').change(function() {
        const gradeId = $(this).val();
        const classroomSelect = $('#mc_classroom_id');

        if (!gradeId) {
            classroomSelect.prop('disabled', true).html('<option value="">-- Pilih Tingkat Dulu --</option>');
            $('#mcLoadedPanel').hide();
            return;
        }

        $.ajax({
            url: '/attendance/get-classrooms',
            method: 'GET',
            data: { grade_id: gradeId, period_id: '<?= $activePeriod['id'] ?? "" ?>' },
            dataType: 'json',
            success: function(data) {
                classroomSelect.prop('disabled', false);
                let options = '<option value="">-- Pilih Kelas --</option>';
                $.each(data, function(i, cls) {
                    options += `<option value="${cls.id}">${cls.name} (${cls.grade_name})<\/option>`;
                });
                classroomSelect.html(options);
                classroomSelect.val('');
                $('#mcLoadedPanel').hide();
            }
        });
    });

    // Load siswa kelas
    $('#btnMcLoadStudents').click(function() {
        const classroomId = $('#mc_classroom_id').val();
        const periodId = '<?= $activePeriod['id'] ?? "" ?>';
        const className = $('#mc_classroom_id option:selected').text();

        if (!classroomId) {
            alert('Pilih kelas terlebih dahulu!');
            return;
        }

        $('#mcLoadedClassName').text(className);
        $('#mcLoadedPanel').show();
        $('#mcLoadedBody').html('<tr><td colspan="5" class="text-center py-3"><div class="spinner-border spinner-border-sm"><\/div> Memuat...<\/td><\/tr>');

        $.ajax({
            url: '/student-card/get-students',
            method: 'GET',
            data: { classroom_id: classroomId, period_id: periodId },
            dataType: 'json',
            success: function(data) {
                mcLoadedStudents = data;
                renderMcLoadedTable(data);
            },
            error: function() {
                $('#mcLoadedBody').html('<tr><td colspan="5" class="text-center text-danger">Gagal memuat data<\/td><\/tr>');
            }
        });
    });

    function renderMcLoadedTable(students) {
        if (students.length === 0) {
            $('#mcLoadedBody').html('<tr><td colspan="5" class="text-center text-muted py-4">Tidak ada siswa di kelas ini<\/td><\/tr>');
            return;
        }

        let html = '';
        $.each(students, function(i, s) {
            const photoUrl = s.photo ? s.photo_url : 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2EwYWVjMCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjZWRmMmY3Ii8+PHBhdGggZD0iTTEyIDEyYzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00LTQgMS43OS00IDQgMS43OSA0IDQgNHptMCAyYy0yLjY3IDAtOCAxLjM0LTggNHYyaDE2di0yYzAtMi42Ni01LjMzLTQtOC00eiIvPjwvc3ZnPg==';
            html += `
                <tr>
                    <td><input type="checkbox" class="mc-loaded-check" value="${s.id}" data-name="${escapeHtml(s.full_name)}"><\/td>
                    <td class="text-center">${i + 1}<\/td>
                    <td>${escapeHtml(s.nis)}<\/td>
                    <td>${escapeHtml(s.full_name)}<\/td>
                    <td><img src="${photoUrl}" style="width: 40px; height: 40px; object-fit: cover; border-radius: 5px;"><\/td>
                <\/tr>
            `;
        });
        $('#mcLoadedBody').html(html);
        $('#mcCheckAllLoaded').prop('checked', false);
    }

    $('#mcCheckAllLoaded').click(function() {
        $('.mc-loaded-check').prop('checked', $(this).is(':checked'));
    });

    // Tambahkan ke daftar cetak
    $('#btnMcAddSelected').click(function() {
        const checked = $('.mc-loaded-check:checked');
        if (checked.length === 0) {
            alert('Pilih siswa terlebih dahulu!');
            return;
        }

        checked.each(function() {
            const id = $(this).val();
            if (mcSelectedStudents.findIndex(x => x.id === id) === -1) {
                const found = mcLoadedStudents.find(s => String(s.id) === String(id));
                if (found) {
                    mcSelectedStudents.push(found);
                }
            }
        });

        renderMcPrintTable();
    });

    $('#mcCheckAllPrint').click(function() {
        $('.mc-print-check').prop('checked', $(this).is(':checked'));
        updateMcPrintButtons();
    });

    $(document).on('change', '.mc-print-check', function() {
        updateMcPrintButtons();
    });

    $(document).on('click', '.mc-remove-student', function() {
        const id = $(this).data('id');
        mcSelectedStudents = mcSelectedStudents.filter(s => String(s.id) !== String(id));
        renderMcPrintTable();
    });

    $('#btnMcRemoveSelected').click(function() {
        const checked = $('.mc-print-check:checked');
        if (checked.length === 0) return;

        checked.each(function() {
            const id = $(this).val();
            mcSelectedStudents = mcSelectedStudents.filter(s => String(s.id) !== String(id));
        });

        renderMcPrintTable();
    });

    $('#btnMcPrint').click(function() {
        if (mcSelectedStudents.length === 0) return;
        const ids = mcSelectedStudents.map(s => s.id).join(',');
        window.open(`/student-card/print?student_ids=${ids}`, '_blank');
    });

    function renderMcPrintTable() {
        // Urutkan berdasarkan Kelas, lalu Nama
        mcSelectedStudents.sort(function(a, b) {
            const classA = a.classroom_name || '';
            const classB = b.classroom_name || '';
            if (classA !== classB) {
                return classA.localeCompare(classB);
            }
            return a.full_name.localeCompare(b.full_name);
        });

        if (mcSelectedStudents.length === 0) {
            $('#mcPrintBody').html('<tr><td colspan="6" class="text-center text-muted py-4">Belum ada siswa dipilih<\/td><\/tr>');
        } else {
            let html = '';
            $.each(mcSelectedStudents, function(i, s) {
                html += `
                    <tr>
                        <td><input type="checkbox" class="mc-print-check" value="${s.id}"><\/td>
                        <td class="text-center">${i + 1}<\/td>
                        <td>${escapeHtml(s.classroom_name || '-')}<\/td>
                        <td>${escapeHtml(s.nis)}<\/td>
                        <td>${escapeHtml(s.full_name)}<\/td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-danger mc-remove-student" data-id="${s.id}">
                                <i class="bi bi-trash"><\/i>
                            <\/button>
                        <\/td>
                    <\/tr>
                `;
            });
            $('#mcPrintBody').html(html);
        }

        $('#mcPrintCount').text(mcSelectedStudents.length);
        updateMcPrintButtons();
    }

    function updateMcPrintButtons() {
        const count = mcSelectedStudents.length;
        $('#btnMcPrint').prop('disabled', count === 0);
        $('#btnMcRemoveSelected').prop('disabled', $('.mc-print-check:checked').length === 0);
    }
});
</script>
<?= $this->endSection() ?>