$(document).ready(function () {
    const sno = $('#studentSno').val();
    if (sno && sno.length > 5) {
        fetchFormData(sno);
    } else {
        $('#formLoader').html('<div class="alert alert-warning urdu-regular fs-4">طالب علم کا ریکارڈ دستیاب نہیں ہے</div>');
    }

    // === Print Event ===
    $('#btnPrintForm').on('click', function () {
        printAdmissionForm();
    });

    let currentStudentData = null;

    function fetchFormData(sno) {
        $.ajax({
            url: 'APIs/report_admission_form.php',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ sno: sno }),
            dataType: 'json',
            success: function (res) {
                $('#formLoader').addClass('d-none');
                if (res.success) {
                    currentStudentData = res;
                    renderForm(res);
                    $('#btnPrintForm').removeClass('d-none');
                } else {
                    $('#formContainer').html(`<div class="alert alert-danger urdu-regular fs-4">${res.message}</div>`);
                }
            },
            error: function () {
                $('#formLoader').addClass('d-none');
                $('#formContainer').html('<div class="alert alert-danger urdu-regular fs-4">سرور سے رابطہ کرنے میں ناکامی</div>');
            }
        });
    }

    function renderForm(data) {
        const s = data.student;
        const m = data.madrasa;

        const html = `
            <div id="admissionFormCard" class="card border-0 shadow rounded-4 overflow-hidden mb-5 text-end urdu-regular animate__animated animate__fadeIn">
                <div class="card-header bg-white border-bottom p-4">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h2 class="fw-bold mb-1 text-primary" style="font-size: 1.8rem;">${m.name}</h2>
                            <p class="mb-0 text-muted fs-5">${m.address} ${m.addressL}</p>
                            <div class="mt-2 text-muted" style="font-size: 0.9rem;">
                                الحاق نمبر: ${m.elhaq} | رجسٹریشن نمبر: ${m.regNumber}
                            </div>
                        </div>
                        <div class="col-4 text-start">
                            <img src="images/card_logo.png" alt="Logo" style="height: 100px;">
                        </div>
                    </div>
                </div>

                <div class="card-body p-4">
                    <div class="row mb-4">
                        <!-- Details on the Right in RTL -->
                        <div class="col-9">
                            <h3 class="border-bottom pb-2 mb-4 text-dark fw-bold border-primary border-3 d-inline-block">فارم داخلہ (${s.shobaName})</h3>
                            
                            <table class="table table-sm table-borderless fs-5 mt-2">
                                <tr>
                                    <td width="20%"><strong class="text-primary">نام طالب علم:</strong></td>
                                    <td width="30%">${s.stdName}</td>
                                    <td width="15%"><strong class="text-primary">ولدیت:</strong></td>
                                    <td width="35%">${s.fatherName}</td>
                                </tr>
                                <tr>
                                    <td><strong class="text-primary">تاریخِ پیدائش:</strong></td>
                                    <td>${s.dob}</td>
                                    <td><strong class="text-primary">شہریت:</strong></td>
                                    <td>${s.nationality}</td>
                                </tr>
                                <tr>
                                    <td><strong class="text-primary">علوم عصریہ:</strong></td>
                                    <td>${s.qualification}</td>
                                    <td><strong class="text-primary">رہائش:</strong></td>
                                    <td>${s.isLocal == 0 ? 'غیر رہائشی' : 'رہائشی'}</td>
                                </tr>
                                <tr>
                                    <td><strong class="text-primary">موجودہ درجہ:</strong></td>
                                    <td class="fw-bold text-danger">${s.darjaName}</td>
                                    <td><strong class="text-primary">داخلہ نمبر:</strong></td>
                                    <td>${s.RollNumber}</td>
                                </tr>
                                <tr>
                                    <td><strong class="text-primary">رجسٹریشن نمبر:</strong></td>
                                    <td>${s.registrationNo}</td>
                                    <td><strong class="text-primary">رابطہ نمبر:</strong></td>
                                    <td dir="ltr">${s.cellNo}</td>
                                </tr>
                            </table>
                        </div>
                        <!-- Photo on the Left in RTL -->
                        <div class="col-3 text-center">
                            <div class="photo-placeholder border border-2 border-primary rounded-4 p-1 shadow-sm mx-auto" style="width: 150px; height: 180px;">
                                <img src="uploaded/${s.photo}" class="img-fluid rounded-4 h-100 w-100 object-fit-cover" alt="Student">
                            </div>
                        </div>
                    </div>

                    <div class="row g-4 mb-4 fs-5">
                         <div class="col-6">
                            <div class="bg-light p-3 rounded-4 h-100">
                                <strong class="text-primary mb-2 d-block">مستقل پتہ:</strong>
                                <p class="mb-0" style="font-size: 0.95em;">${s.permanentAddress}</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bg-light p-3 rounded-4 h-100">
                                <strong class="text-primary mb-2 d-block">موجودہ پتہ:</strong>
                                <p class="mb-0" style="font-size: 0.95em;">${s.presentAddress}</p>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-primary border-0 rounded-4 p-4 mb-4">
                        <h4 class="fw-bold mb-3 border-bottom border-primary border-opacity-25 pb-2">حلف نامہ</h4>
                         <p class="mb-0 fs-5 lh-lg" style="text-align: justify;font-size:23px !important;">
                            میں مسمی <strong>${s.guirdianNameAuth}</strong> یہ بات اچھی طرح جانتے ہوئے کہ جان بوجھ کر جھوٹا حلف اٹھانے والا دنیا و آخرت میں سخت عذاب کا مستحق ہوتا ہے اس بات کی حلفیہ تصدیق کرتا ہوں کہ مسمی <strong>${s.stdName}</strong> بن <strong>${s.fatherName}</strong> کے داخلہ فارم میں اس کی تاریخ پیدائش اور عمر سمیت جو دیگر کوائف درج کئے گئے ہیں وہ میرے علم کے مطابق بالکل درست ہیں اور اس میں کوئی غلط بیانی نہیں کی گئی۔
                         </p>
                    </div>

                    <div class="row mt-4 text-center fs-5">
                        <div class="col-4">
                            <div class="border-top border-dark pt-2 mx-4"></div>
                            <p class="mb-4">دستخط سرپرست</p>
                        </div>
                        <div class="col-4">
                        <div class="border-top border-dark pt-2 mx-4"></div>
                        <p class="mb-4">دستخط طالب علم</p>
                        </div>
                        <div class="col-4 position-relative">
                            <div class="mb-4">
                                ${s.signNazim ? `<div class="small text-muted">${s.signNazim}</div>` : ''}
                                <div class="border-top border-dark pt-1 mx-4"></div>
                            </div>
                            <p class="mb-0">دستخط ناظم</p>
                            <img src="images/Signature.png" height="50" class="d-block mx-auto mb-1" style="position: relative;top: -90px;left: -64px;">
                        </div>
                    </div>
                </div>
            </div>`;

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

    function printAdmissionForm() {
        if (!currentStudentData) return;
        const s = currentStudentData.student;
        const content = $('#admissionFormCard').html();

        const printWin = window.open('', '_blank', 'width=1100,height=800');
        printWin.document.open();
        printWin.document.write(`
<!DOCTYPE html>
<html dir="rtl" lang="ur">
<head>
    <meta charset="UTF-8">
    <title>داخلہ فارم - ${s.stdName}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/main.css">
    <style>
        @page { margin: 7mm; size: legal portrait; }
        body { background-color: white !important; padding: 4px !important; margin: 4px !important; }
        .card { border: 0 !important; box-shadow: none !important; }
        .card-header { padding: 2px !important; border-bottom: 2px solid #0d6efd !important; margin-bottom: 2rem !important; }
        .card-body { padding: 10px !important; }
        .text-primary { color: #0d6efd !important; }
        .bg-light { background-color: #f8f9fa !important; }
        .alert-primary { background-color: #cfe2ff !important; border-color: #b6d4fe !important; padding: 4rem !important; }
        .urdu-regular { font-size: 1.3em !important; line-height: 1.5 !important; }
        .mb-4 { margin-bottom: 0.75rem !important; }
        .mt-4 { margin-top: 8rem !important; }
        .p-4 { padding: 4px !important; }
        .g-4 { --bs-gutter-y: 0.5rem; }
        .fs-5 { font-size: 1.1rem !important; }
        .table td { padding: 4px !important; }
        .photo-placeholder { margin-top: 0 !important; }
        @media print {
            .no-print { display: none !important; }
            body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    </style>
</head>
<body onload="window.print();">
    <div class="container-fluid py-2">
        <div class="card text-end urdu-regular">
            ${content}
        </div>
    </div>
</body>
</html>`);
        printWin.document.close();
    }
});
