'use strict';

$(document).ready(function () {

    // ==================================================
    // USER TYPE CHANGE
    // ==================================================

    $('#user_type').on('change', function () {

        const type = $(this).val();

        // RESET

        $('#reference_id').val('');

        $('#studentSelect').val('');
        $('#teacherSelect').val('');

        // HIDE BOTH

        $('#studentBox').hide();
        $('#teacherBox').hide();

        // SHOW BASED ON TYPE

        if (type === 'Student') {

            $('#studentBox').show();

        } else if (type === 'Teacher') {

            $('#teacherBox').show();
        }
    });

    // ==================================================
    // STUDENT SELECT
    // ==================================================

    $('#studentSelect').on('change', function () {

        $('#reference_id').val(
            $(this).val()
        );
    });

    // ==================================================
    // TEACHER SELECT
    // ==================================================

    $('#teacherSelect').on('change', function () {

        $('#reference_id').val(
            $(this).val()
        );
    });

    // ==================================================
    // FORM SUBMIT
    // ==================================================

    $('#memberForm').on('submit', function (event) {

        event.preventDefault();

        const saveBtn =
            $('#saveBtn');

        saveBtn.prop('disabled', true);

        saveBtn.html(
            '<i class="fas fa-spinner fa-spin"></i> Saving...'
        );

        $.ajax({

            url: 'member_process.php',

            type: 'POST',

            dataType: 'json',

            data: {

                action: 'add',

                user_type:
                    $('#user_type').val(),

                reference_id:
                    $('#reference_id').val(),

                card_no:
                    $('#card_no').val()
            },

            success: function (response) {

                $('#responseMessage')

                    .removeClass()

                    .addClass(
                        'alert alert-success'
                    )

                    .html(response.message)

                    .fadeIn();

                // RESET FORM

                $('#memberForm')[0].reset();

                $('#studentBox').hide();

                $('#teacherBox').hide();

                $('#reference_id').val('');

                // RESTORE BUTTON

                saveBtn.prop('disabled', false);

                saveBtn.html(
                    '<i class="fas fa-save"></i> Save Member'
                );
            },

            error: function (xhr) {

                let response =
                    xhr.responseJSON;

                $('#responseMessage')

                    .removeClass()

                    .addClass(
                        'alert alert-danger'
                    )

                    .html(
                        response?.message ||
                        'Something went wrong.'
                    )

                    .fadeIn();

                saveBtn.prop('disabled', false);

                saveBtn.html(
                    '<i class="fas fa-save"></i> Save Member'
                );
            }
        });
    });
});