$(document).ready(() => {
    $('input[name=phone]').bind('keyup change', function(e) {
        var phoneno = /^(05|06|07|(\+212?[- ]?(6|5|7)))[- ]?[0-9]{2}?[- ]?[0-9]{2}?[- ]?[0-9]{2}?[- ]?[0-9]{2}$/;
        if ($(this).val().match(phoneno)) {
            $(this).parent().find('span.invalid').text('')
            $(this).parent().find('span.invalid').hide()
            $('#button__register').attr('disabled', false);
            return true;
        } else {
            $(this).parent().find('span.invalid').text('')
            $('#button__register').attr('disabled', true);
            $(this).parent().find('span.invalid').text('The phone number is invalid')
            $(this).parent().find('span.invalid').show()
            return false;
        }
    })

    function toggleButton(id, text = '', status) {
        $(id).attr('disabled', status)
        if (status) {
            $(id).html('<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>')
            return
        }

        $(id).html(text)
    }

    $('#register_form').submit((e) => {
        let $form = $(e.target)

        e.preventDefault();

        var phoneno = /^(05|06|07|(\+212?[- ]?(6|5|7)))[- ]?[0-9]{2}?[- ]?[0-9]{2}?[- ]?[0-9]{2}?[- ]?[0-9]{2}$/;
        if (!$('input[name=phone]').val().match(phoneno)) {
            $('#button__register').attr('disabled', true);

            toastr.clear();
            NioApp.Toast('رقم هاتفك غير صالح', 'error');

            return;
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })

        var formData = {
            name: $form.find('input[name="name"]').val(),
            email: $form.find('input[name="email"]').val(),
            phone: $form.find('input[name="phone"]').val(),
            password: $form.find('input[name="password"]').val(),
            password_confirmation: $form.find('input[name="password_confirmation"]').val(),
            payment_method: $form.find(':checked').val(),
            pack: $form.find('input[name="pack"]').val()
        };

        toggleButton('#button__register', '', true);

        $.ajax({
            url: $(e.target).attr('action'),
            method: 'post',
            data: formData,
            beforeSubmit: () => {
                var phoneno = /^(05|06|07|(\+212?[- ]?(6|5|7)))[- ]?[0-9]{2}?[- ]?[0-9]{2}?[- ]?[0-9]{2}?[- ]?[0-9]{2}$/;
                if ($(this).val().match(phoneno)) {
                    $(this).parent().find('span.invalid').hide()
                    $('#button__register').attr('disabled', false);
                } else {
                    toastr.clear();
                    NioApp.Toast('رقم هاتفك غير صالح', 'error');
                    return false
                }

                return true
            },
            success: (response) => {
                if (response.redirect_to) {
                    window.location.replace(response.redirect_to)
                    return
                } else {
                    window.location.replace(response.redirect_url)
                }
            },
            complete: () => {
                toggleButton('#button__register', "انشاء حساب", false);
            },
            error: (error) => {
                let errors = error.responseJSON.errors

                let inputError = true

                toastr.clear();
                if (errors.name) {
                    $form.find('input[name="name"]').parent().remove('invalid')
                    $form.find('input[name="name"]').parent().append(`
                            <span class="invalid" role="alert">
                                <strong>${errors.name}</strong>
                            </span>
                        `)
                    inputError = false

                }
                if (errors.phone) {
                    $form.find('input[name="phone"]').parent().remove('invalid')
                    $form.find('input[name="phone"]').parent().append(`
                            <span class="invalid" role="alert">
                                <strong>${errors.phone}</strong>
                            </span>
                        `)
                    inputError = false

                }
                if (errors.email) {
                    $form.find('input[name="name"]').parent().remove('invalid')
                    $form.find('input[name="email"]').parent().append(`
                            <span class="invalid" role="alert">
                                <strong>${errors.email}</strong>
                            </span>
                        `)
                    inputError = false

                }
                if (errors.password) {
                    $form.find('input[name="password"]').parent().remove('invalid')
                    $form.find('input[name="password"]').parent().append(`
                            <span class="invalid" role="alert">
                                <strong>${errors.password}</strong>
                            </span>
                        `)
                    inputError = false
                }
                if (errors.payment_method) {
                    $form.find('div#payment_method').remove('invalid')
                    $form.find('div#payment_method').append(`
                            <span class="invalid" role="alert">
                                <strong>${errors.payment_method}</strong>
                            </span>
                        `)
                    inputError = false
                }

                NioApp.Toast("حدث خطأ ما! المرجو تحديث الصفحة", 'error');

                if (inputError) {
                    setTimeout(() => {
                        window.location.reload
                    }, 500);
                }

                return inputError
            },
        })
    })
})