$(document).ready(function () {
    $('#searchForm').on('submit', function (e) {
        e.preventDefault();

        const btnSearch = $('#btnSearch');
        const originalBtnHtml = btnSearch.html();
        btnSearch.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> تلاش جاری ہے...');

        const stdName = $('#stdName').val().trim();
        const stdRegNo = $('#registrationNumber').val().trim();

        if (!stdName && !stdRegNo) {
            Swal.fire({
                icon: 'warning',
                title: 'توجہ فرمائیں',
                text: 'طالب العلم کا نام یا رجسٹریشن نمبر میں سے کم از کم ایک مہیا کریں'
            });
            btnSearch.prop('disabled', false).html(originalBtnHtml);
            return;
        }

        $.ajax({
            url: 'APIs/search.php',
            type: 'POST',
            data: {
                action: 'search',
                stdName: stdName,
                stdRegNo: stdRegNo
            },
            dataType: 'json',
            success: function (response) {
                if (response.success && response.data.length > 0) {
                    renderSearchResults(response.data);
                } else {
                    $('#searchBody').html('');
                    Swal.fire({
                        icon: 'info',
                        title: 'نتیجہ',
                        text: response.message || 'اس نام یا نمبر سے کوئی طالب علم نہیں ملا'
                    });
                }
            },
            error: function () {
                Swal.fire({
                    icon: 'error',
                    title: 'System Error',
                    text: 'Unable to connect to the server.'
                });
            },
            complete: function () {
                btnSearch.prop('disabled', false).html(originalBtnHtml);
            }
        });
    });
});

function renderSearchResults(students) {
    let html = '';

    students.forEach(student => {
        let photoHtml = student.stdPhoto
            ? `<a href="#" onclick="showPhoto('uploaded/${student.stdPhoto}', '${student.stdName}'); return false;">
                 <img src="uploaded/${student.stdPhoto}" class="img-thumbnail" width="120" alt="Student Photo">
               </a>`
            : '<span class="text-muted">تصویر موجود نہیں</span>';

        // Main info table aligned right (RTL style)
        html += `
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-end urdu-regular" dir="rtl">
                        <tbody>
                            <tr><th width="30%">نام</th><td>${student.stdName || ''}</td></tr>
                            <tr><th>ولدیت</th><td>${student.fatherName || ''}</td></tr>
                            <tr><th>تاریخ پیدائش</th><td>${student.dob || ''}</td></tr>
                            <tr><th>مستقل پتہ</th><td>${student.permanentAddress || ''}</td></tr>
                            <tr><th>عارضی پتہ</th><td>${student.presentAddress || ''}</td></tr>
                            <tr><th>موبائل نمبر</th><td>${student.cellNo || ''}</td></tr>
                            <tr><th>رجسٹریشن نمبر</th><td>${student.registrationNo || ''}</td></tr>
                            <tr><th>درجہ حالیہ</th><td>${student.darjaName || ''}</td></tr>
                            <tr><th>تاریخ داخلہ</th><td>${student.promotionDate || ''}</td></tr>
                            <tr><th>موجودہ حالت</th><td>${student.isCurrent == 1 ? 'داخل شدہ طالب العلم' : 'طالب العلم کا درجہ درست نہ ہے'}</td></tr>
                            <tr><th>تصویر</th><td>${photoHtml}</td></tr>
                        </tbody>
                    </table>
                </div>`;

        // History Detail table
        if (student.history && student.history.length > 0) {
            html += `
                <h5 class="mt-4 mb-3 text-end urdu-regular text-primary border-bottom pb-2">مزید تفصیل (تاریخ وار درجات)</h5>
                <div class="table-responsive">
                    <table class="table table-bordered text-center urdu-regular" dir="rtl">
                        <thead class="table-dark">
                            <tr>
                                <th>درجہ</th>
                                <th>درجہ میں تاریخ داخلہ</th>
                                <th>حالت / ایکشن</th>
                            </tr>
                        </thead>
                        <tbody>`;

            student.history.forEach(hist => {
                let actionHtml = hist.isCurrent == 1
                    ? '<span class="badge bg-success">حالیہ درجہ</span>'
                    : `<button class="btn btn-sm btn-danger" onclick="deleteHistory(${hist.sno})"><i class="fa fa-trash"></i> مٹاؤ</button>`;

                html += `
                            <tr>
                                <td>${hist.darjaName || 'نامعلوم'}</td>
                                <td dir="ltr">${hist.promotionDate || ''}</td>
                                <td>${actionHtml}</td>
                            </tr>`;
            });

            html += `
                        </tbody>
                    </table>
                </div>`;
        }

        html += `
            </div>
        </div>`;
    });

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

function deleteHistory(sno) {
    Swal.fire({
        title: 'کیا آپ واقعی اس ریکارڈ کو مٹانا چاہتے ہیں؟',
        text: 'یہ عمل واپس نہیں ہو سکتا!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'ہاں، مٹا دیں',
        cancelButtonText: 'منسوخ'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: 'APIs/search.php',
                type: 'POST',
                data: {
                    action: 'delete_history',
                    sno: sno
                },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        Swal.fire('کامیابی', response.message, 'success');
                        $('#searchForm').submit(); // Refresh results
                    } else {
                        Swal.fire('غلطی', response.message, 'error');
                    }
                },
                error: function () {
                    Swal.fire('System Error', 'Unable to delete the record', 'error');
                }
            });
        }
    });
}

function showPhoto(url, name) {
    Swal.fire({
        title: name,
        imageUrl: url,
        imageAlt: 'Student Photo',
        imageWidth: 400,
        showConfirmButton: false,
        showCloseButton: true,
        customClass: {
            title: 'urdu-regular'
        }
    });
}
