$(document).ready(function () {

    let lastReportData = null;

    // ── Form Submit ──────────────────────────────────────────────────────────
    $('#admissionRegisterForm').on('submit', function (e) {
        e.preventDefault();

        const darja = $('#admissionRegisterForm #arl_darja').val();
        const year  = $('#admissionRegisterForm #rpt_date_start').val() || $('#admissionRegisterForm input[name="arl_year"]').val();
        const type  = $('input[name="arl_type"]:checked').val();

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

        fetchReport(darja, year, type);
    });

    // ── Print Button ────────────────────────────────────────────────────────
    $(document).on('click', '#btnARLPrint', function () {
        if (lastReportData) printReport(lastReportData);
    });

    // ── Fetch Data from API ─────────────────────────────────────────────────
    function fetchReport(darja, year, type) {
        const btn = $('#btnShowARL');
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> لوڈ ہو رہا ہے...');

        $('#arlReportContainer').html(
            '<div class="text-center p-5">' +
            '<div class="spinner-border text-primary" role="status"></div>' +
            '<p class="mt-3 urdu-regular fs-5">رپورٹ تیار ہو رہی ہے...</p>' +
            '</div>'
        );
        lastReportData = null;

        $.ajax({
            url: 'APIs/admission_register_list.php',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ darja_sno: darja, year: year, type: parseInt(type) }),
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    lastReportData = res;
                    renderReport(res);
                } else {
                    $('#arlReportContainer').html(
                        '<div class="alert alert-warning urdu-regular text-end fs-5 mt-3">' +
                        '<i class="bi bi-exclamation-triangle ms-2"></i>' + res.message + '</div>'
                    );
                }
            },
            error: function () {
                $('#arlReportContainer').html(
                    '<div class="alert alert-danger urdu-regular text-end fs-5 mt-3">' +
                    '<i class="bi bi-x-circle ms-2"></i>سرور سے رابطہ کرنے میں ناکامی</div>'
                );
            },
            complete: function () {
                btn.prop('disabled', false).html('رپورٹ دکھائیں');
            }
        });
    }

    // ── Render On-Screen Table ──────────────────────────────────────────────
    function renderReport(res) {
        const typeLabel = res.type === 1 ? 'داخل' : 'خارج';

        let rows = '';
        res.students.forEach(function (s, i) {
            rows += `
            <tr>
                <td class="text-center">${i + 1}</td>
                <td class="fw-bold">${s.stdName}</td>
                <td>${s.fatherName}</td>
                <td class="text-center">${s.dob}</td>
                <td class="text-center">${s.nicType}</td>
                <td class="text-center" dir="ltr">${s.nicValue}</td>
                <td>${s.guirdianNameAuth || '-'}</td>
                <td class="small">${s.permanentAddress || '-'}</td>
                <td class="small">${s.presentAddress || '-'}</td>
                <td class="text-center" dir="ltr">${s.phone || '-'}</td>
                <td class="text-center">${s.registrationNo || '-'}</td>
            </tr>`;
        });

        const html = `
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden mt-3">
            <div class="card-header bg-white border-bottom py-3 px-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="text-end">
                    <h5 class="fw-bold text-primary mb-1 urdu-regular fs-4">${res.madrasaName}</h5>
                    <p class="text-muted mb-0 urdu-regular small">${res.madrasaAddr} ${res.madrasaAdr2}</p>
                </div>
                <div class="text-center">
                    <h4 class="fw-bold mb-1 urdu-regular">رجسٹر داخل / خارج</h4>
                    <p class="mb-0 urdu-regular fs-5">درجہ: <strong>${res.darjaName}</strong> &nbsp;|&nbsp; نوعیت: <strong>${typeLabel}</strong> &nbsp;|&nbsp; سال: <strong>${res.year}</strong></p>
                </div>
                <div>
                    <button id="btnARLPrint" class="btn btn-outline-secondary urdu-regular">
                        <i class="bi bi-printer ms-1"></i> پرنٹ کریں
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle mb-0 text-end urdu-regular" style="font-size:0.88rem;">
                        <thead class="table-light">
                            <tr class="text-center">
                                <th style="width:45px">الرقم</th>
                                <th>اسم الطالب</th>
                                <th>اسم الوالد</th>
                                <th>تاریخ المیلاد</th>
                                <th>نوع</th>
                                <th>شناختی کارڈ / فارم ب</th>
                                <th>اسم الضامن</th>
                                <th>العنوان الدائم</th>
                                <th>العنوان</th>
                                <th>الرقم الھاتف</th>
                                <th>رجسٹریشن نمبر</th>
                            </tr>
                        </thead>
                        <tbody class="fs-6">${rows}</tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer text-muted text-end small">
                مجموعی: <strong>${res.students.length}</strong> طلباء
            </div>
        </div>`;

        $('#arlReportContainer').html(html);
    }

    // ── Print Window ────────────────────────────────────────────────────────
    function printReport(res) {
        const typeLabel  = res.type === 1 ? 'داخل' : 'خارج';
        const tdS  = 'border:1px solid #aaa;padding:6px 8px;text-align:right;font-size:15px;';
        const tdCS = 'border:1px solid #aaa;padding:6px 8px;text-align:center;font-size:15px;';
        const thS  = 'border:1px solid #888;padding:8px;text-align:center;background:#f0f0f0;font-size:15px;font-weight:bold;';

        let rows = '';
        res.students.forEach(function (s, i) {
            rows += `
            <tr>
                <td style="${tdCS}">${i + 1}</td>
                <td style="${tdS}font-weight:bold;">${s.stdName}</td>
                <td style="${tdS}">${s.fatherName}</td>
                <td style="${tdCS}">${s.dob}</td>
                <td style="${tdCS}">${s.nicType}</td>
                <td style="${tdCS}" dir="ltr">${s.nicValue}</td>
                <td style="${tdS}">${s.guirdianNameAuth || '-'}</td>
                <td style="${tdS}font-size:12px;">${s.permanentAddress || '-'}</td>
                <td style="${tdS}font-size:12px;">${s.presentAddress || '-'}</td>
                <td style="${tdCS}" dir="ltr">${s.phone || '-'}</td>
                <td style="${tdCS}">${s.registrationNo || '-'}</td>
            </tr>`;
        });

        const pw = window.open('', '_blank', 'width=1200,height=900');
        pw.document.open();
        pw.document.write(`<!DOCTYPE html>
<html dir="rtl" lang="ur">
<head>
<meta charset="UTF-8">
<title>رجسٹر ${typeLabel} — ${res.darjaName}</title>
<style>
    @page { margin:10mm; size:A4 landscape; }
    body { font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',Tahoma,Arial; direction:rtl; margin:0; }
    table { width:100%; border-collapse:collapse; }
    .header-tbl { border:0 !important; margin-bottom:14px; }
    .header-tbl td, .header-tbl th { border:0 !important; padding:2px 6px; }
    .footer { margin-top:20px; font-size:11px; color:#555; text-align:center; border-top:1px solid #ccc; padding-top:8px; }
</style>
</head>
<body onload="window.print();window.close();">
    <table class="header-tbl">
        <tr>
            <td style="text-align:right">
                <h1 style="margin:0;font-size:24px;">${res.madrasaName}</h1>
                <p style="margin:4px 0 0;font-size:13px;">${res.madrasaAddr} ${res.madrasaAdr2}</p>
            </td>
            <td style="text-align:center">
                <h2 style="margin:0;font-size:20px;">رجسٹر داخل / خارج</h2>
                <p style="margin:6px 0 0;font-size:16px;">درجہ: <strong>${res.darjaName}</strong></p>
                <p style="margin:4px 0 0;font-size:14px;">نوعیت: <strong>${typeLabel}</strong> &nbsp;|&nbsp; سال: <strong>${res.year}</strong></p>
            </td>
            <td style="text-align:left;font-size:12px;vertical-align:top;">
                ${res.elhaq ? 'الحاق نمبر: ' + res.elhaq + '<br>' : ''}
                ${res.regNumber ? 'رجسٹریشن نمبر: ' + res.regNumber : ''}
            </td>
        </tr>
    </table>
    <table>
        <thead>
            <tr>
                <th style="${thS}width:35px">الرقم</th>
                <th style="${thS}">اسم الطالب</th>
                <th style="${thS}">اسم الوالد</th>
                <th style="${thS}">تاریخ المیلاد</th>
                <th style="${thS}">نوع</th>
                <th style="${thS}">شناختی کارڈ / فارم ب</th>
                <th style="${thS}">اسم الضامن</th>
                <th style="${thS}">العنوان الدائم</th>
                <th style="${thS}">العنوان</th>
                <th style="${thS}">الرقم الھاتف</th>
                <th style="${thS}">رجسٹریشن نمبر</th>
            </tr>
        </thead>
        <tbody>${rows}</tbody>
    </table>
    <div class="footer">ناظم تعلیمات — ${res.madrasaName} | مجموعی: ${res.students.length}</div>
</body>
</html>`);
        pw.document.close();
    }

});
