$(document).ready(function () {
    const $form = $('#examMarksEmptyForm');
    const $resultsContainer = $('#report-results');
    const $btnShow = $('#btnShowReport');

    $form.on('submit', function (e) {
        e.preventDefault();

        const data = {
            darja_sno: $('#rpt_darja').val(),
            year: $('#rpt_year').val(),
            exam_type: $('#rpt_exam_type').val()
        };

        if (!data.darja_sno || !data.year) {
            Swal.fire({
                icon: 'warning',
                title: 'ادھوری معلومات',
                text: 'براہ کرم درجہ اور سال منتخب کریں',
                confirmButtonText: 'ٹھیک ہے'
            });
            return;
        }

        $btnShow.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span> لوڈ ہو رہا ہے...');

        fetch('APIs/exam_marks_empty_report.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(result => {
                $btnShow.prop('disabled', false).html('<i class="bi bi-search ms-2"></i> رپورٹ دکھائیں');
                
                if (result.success) {
                    renderReport(result);
                } else {
                    $resultsContainer.html(`<div class="alert alert-info urdu-regular fs-5 text-center py-4 border-0 shadow-sm">${result.message}</div>`);
                }
            })
            .catch(error => {
                $btnShow.prop('disabled', false).html('<i class="bi bi-search ms-2"></i> رپورٹ دکھائیں');
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'غلطی',
                    text: 'ڈیٹا لوڈ کرنے میں مسئلہ پیش آیا۔ براہ کرم دوبارہ کوشش کریں',
                    confirmButtonText: 'ٹھیک ہے'
                });
            });
    });

    function renderReport(data) {
        let html = `
            <div class="card border-0 shadow-sm mb-4 no-print">
                <div class="card-body d-flex justify-content-between align-items-center py-3">
                    <div class="urdu-regular fs-5 text-muted">
                        <i class="bi bi-info-circle ms-2"></i> کل طلباء: <strong>${data.students.length}</strong>
                    </div>
                    <button type="button" class="btn btn-outline-dark urdu-regular px-4" onclick="window.print()">
                        <i class="bi bi-printer ms-2"></i> پرنٹ کریں
                    </button>
                </div>
            </div>
            
            <div id="printArea" class="print-content">
        `;

        const rowsPerPage = 21;
        const totalStudents = data.students.length;
        const totalPages = Math.ceil(totalStudents / rowsPerPage);

        for (let p = 0; p < totalPages; p++) {
            const start = p * rowsPerPage;
            const end = Math.min(start + rowsPerPage, totalStudents);
            const pageStudents = data.students.slice(start, end);

            html += `
                <div class="report-page ${p > 0 ? 'page-break' : ''}">
                    <!-- Page Header -->
                    <div class="text-center mb-4">
                        <h2 class="urdu-bold mb-1">${data.madrasaName}</h2>
                        <h4 class="urdu-regular text-muted mb-3">${data.examName} - ${data.year}</h4>
                        <div class="d-flex justify-content-between border-bottom pb-2 mb-3">
                            <span class="urdu-regular">درجہ: <strong>${data.darjaName}</strong></span>
                            <span class="urdu-regular">تاریخ: <strong>${new Date().toLocaleDateString('ur-PK')}</strong></span>
                        </div>
                    </div>

                    <!-- Table -->
                    <table class="table table-bordered align-middle text-center urdu-regular report-table">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 50px;">الرقم</th>
                                <th style="text-align: right;">اسم الطالب</th>
                                <th style="text-align: right;">اسم الاب</th>
                                <th style="width: 120px;">کشف الحضور</th>
                                <th style="width: 100px;">الدرجات</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            pageStudents.forEach((student, index) => {
                html += `
                    <tr>
                        <td>${start + index + 1}</td>
                        <td style="text-align: right;">${student.stdName}</td>
                        <td style="text-align: right;">${student.fatherName}</td>
                        <td class="empty-cell"></td>
                        <td class="empty-cell"></td>
                    </tr>
                `;
            });

            // Add empty rows if it's the last page and we want uniform height?
            // For now, just close the table.

            html += `
                        </tbody>
                    </table>
                    
                    <div class="d-flex justify-content-between mt-5 pt-3 border-top-0 no-print-visible">
                        <div class="urdu-regular text-muted">دستخط نگران صف</div>
                        <div class="urdu-regular text-muted">دستخط ناظم امتحات</div>
                    </div>
                </div>
            `;
        }

        html += `</div>`;
        $resultsContainer.html(html);
    }
});
