$(document).ready(function () {

    // Clean up modal title if inside a modal
    $('#modal_title').empty();

    // Style Close Button professionally (simple & clean)
    $('#basicModal .modal-header').addClass('border-0 py-2')
        .find('.btn-close').addClass('shadow-none');

    // Make the modal large on load
    $('#basicModal .modal-dialog').addClass('modal-lg modal-fullscreen-sm-down');

    // Handle Darja Selection Change
    $('#darja').on('change', function () {
        const darjaSno = $(this).val();
        if (!darjaSno) {
            $('#subjectsList').empty();
            return;
        }

        fetchSubjects(darjaSno);
    });

    function fetchSubjects(darjaSno) {
        $('#subjectsList').html('<div class="text-center p-5"><div class="spinner-border text-success" role="status"></div><p class="mt-2 urdu-regular">انتظار کیجئے ۔۔۔</p></div>');

        $.ajax({
            url: 'APIs/getSubjectsByDarja.php',
            method: 'GET',
            data: { darja_sno: darjaSno },
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    renderSubjects(response.subjects);
                } else {
                    $('#subjectsList').html('<div class="alert alert-warning urdu-regular text-end">' + response.message + '</div>');
                }
            },
            error: function () {
                $('#subjectsList').html('<div class="alert alert-danger urdu-regular text-end">سرور سے رابطہ کرنے میں ناکامی آئی</div>');
            }
        });
    }

    function renderSubjects(subjects) {
        if (subjects.length === 0) {
            $('#subjectsList').html('<div class="alert alert-info urdu-regular text-end">اس درجہ کے لئے کوئی مضمون نہیں ملا</div>');
            return;
        }

        let html = '<div class="row g-3">';
        subjects.forEach(subject => {
            html += `
                <div class="col-12">
                    <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                        <div class="card-body p-3">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <div class="input-group" dir="ltr">
                                        <span class="input-group-text bg-light border-0 text-success"><i class="bi bi-journal-text"></i></span>
                                        <input type="text" id="subject_${subject.sno}" class="form-control border-0 bg-light urdu-regular text-end fs-5" value="${subject.subjectName}" dir="rtl">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-outline-success w-100 rounded-3 urdu-regular fs-5 btn-update-subject" data-sno="${subject.sno}">
                                        <i class="bi bi-check2-circle me-1"></i> تبدیل کریں
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        $('#subjectsList').html(html);

        // Bind update button event
        $('.btn-update-subject').on('click', function () {
            const sno = $(this).data('sno');
            const subjectName = $.trim($(`#subject_${sno}`).val());

            if (!subjectName) {
                Swal.fire('توجہ', 'مہربانی کر کے مضمون کا نام لکھیں', 'warning');
                $(`#subject_${sno}`).focus();
                return;
            }

            Swal.fire({
                title: 'ترمیم کی تصدیق',
                text: "کیا آپ واقعی اس مضمون کا نام تبدیل کرنا چاہتے ہیں؟",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#d33',
                confirmButtonText: 'جی ہاں، تبدیل کریں',
                cancelButtonText: 'کینسل',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    updateSubject(sno, subjectName, $(this));
                }
            });
        });
    }

    function updateSubject(sno, subjectName, $btn) {
        const originalHtml = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>');

        $.ajax({
            url: 'APIs/updateSubject.php',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ sno: sno, subjectName: subjectName }),
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'کامیابی',
                        text: response.message,
                        timer: 1500,
                        showConfirmButton: false,
                        position: 'top-end',
                        toast: true
                    });
                } else {
                    Swal.fire('غلطی', response.message, 'error');
                }
            },
            error: function () {
                Swal.fire('خرابی', 'سرور سے رابطہ کرنے میں ناکامی آئی', 'error');
            },
            complete: function () {
                $btn.prop('disabled', false).html(originalHtml);
            }
        });
    }

    // Auto-fetch if darja is already selected (e.g. on page reload with query param)
    const initialDarja = $('#darja').val();
    if (initialDarja) {
        fetchSubjects(initialDarja);
    }
});
