if (Token.get()) {
    location.href = '/secure/home.html';
}

$(document).ready(function() {
    // Append desktop forgot popup
    $('body').append(`
        <div id="forgotmodal" class="modal fade share_modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;top: 7px;"><span aria-hidden="true">&times;</span> </button>
                        <div class="card_box">
                            <div class="card_header">
                                <span class="card_title">${tr('Forget Password')}</span>
                            </div>
                            <div class="card_body">
                                <form action="#" novalidate="novalidate" class="getotp">
                                    <div class="fg_warp">
                                        <div class="form_group">
                                            <input type="hidden" name="type" value="30">
                                            <input type="hidden" name="countryCode" value="62">
                                            <label for="number">${tr('<code>*</code> Phone Number')}</label>
                                            <input type="text" class="form-controll required digits" name="number" id="number" placeholder="${tr('Enter your phone number')}" minlength="10" maxlength="14" autocomplete="off">
                                        </div>
                                        <div class="form_group" style="align-items: center;">
                                            <button type="submit" class="btn-orange btm-submit">${tr('Get OTP')}</button>
                                        </div>
                                    </div>
                                </form>
                                <form action="#" novalidate="novalidate" class="resetpassword">
                                    <div class="fg_warp">
                                        <div class="form_group">
                                            <label for="otp">${tr('<code>*</code> OTP Code')}</label>
                                            <input type="text" class="form-controll required" name="otp" id="otp" placeholder="${tr('Enter OTP Code')}" maxlength="120">
                                        </div>
                                        <div class="form_group">
                                            <label for="newPass"><code>*</code>${tr('Set New Password')}</label>
                                            <div class="input_icon w_full">
                                                <div class="show_hide_pas img_wp"><img src="/assets/images/icon/visibility.webp" alt="visibility.webp"></div>
                                                <input type="password" id="newPass" name="newPassword" class="form-control required alnum" maxlength="20" minlength="6" placeholder="${tr('Please type new password')}">
                                            </div>
                                        </div>
                                        <div class="form_group">
                                            <label for="confirmNewPassword"><code>*</code>${tr('Confirm New Password')}</label>
                                            <div class="input_icon w_full">
                                                <div class="show_hide_pas img_wp"><img src="/assets/images/icon/visibility.webp" alt="visibility.webp"></div>
                                                <input type="password" id="confirmNewPassword" name="confirmNewPassword" class="form-control required alnum" maxlength="20" minlength="6" equalto="#newPass" placeholder="${tr('Please type new password')}">
                                            </div>
                                        </div>
                                        <div class="form_group" style="align-items: center;">
                                            <button type="submit" class="btn-orange btm-submit">${tr('Submit')}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `);

    // Check login condition
    let securePage = location.pathname.startsWith('/secure/'),
        globalObj = window.globalObj || {};

    if (globalObj.login && !securePage) {
        location.href = '/secure/home'
    }

    // check register required field
    // $('.reg-email').toggle(globalObj.isRegEmail);
    // $('.reg-email input').toggleClass('required', globalObj.isRegEmail);
    // $('.reg-mobile').toggle(globalObj.isRegMobile);
    // $('.reg-mobile input').toggleClass('required', globalObj.isRegMobile);
    // $('.reg-banking').toggle(globalObj.isRegBank);
    // $('.reg-banking input, .reg-banking select').toggleClass('required', globalObj.isRegBank);
    // $('.reg-aff').toggle(globalObj.isRegisterFormReferral);
    // $('.reg-aff input').toggleClass('required', globalObj.isRegisterFormReferral);

    // get referral
    let affId = localStorage.getItem('affId');

    if (affId) {
        $('.reg-aff input').attr('readonly', 'readonly').attr('style', 'background-color:transparent!important;color:#979797;border:none').val(affId)
    }

    $(document).on('click', '.open-game', function() {
        showToast('warning', tr('Please login first'));
        return false;
    });

    // Check on script load
    checkRememberLogin();

    function checkRememberLogin() {
        $('[name="j_username"]').val(localStorage.getItem('username') || '');
        $('[name="j_password"]').val(localStorage.getItem('password') || '');

        $('[name="remember"]').prop('checked', localStorage.getItem('username'));
    }

    function submitLogin(form) {
        Loader.show();

        if ($('[name="remember"]:visible').is(':checked')) {
            localStorage.setItem('username', $('[name="j_username"]:visible').val());
            localStorage.setItem('password', $('[name="j_password"]:visible').val());
        } else {
            localStorage.removeItem('username');
            localStorage.removeItem('password');
        }

        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: `${api}/j_spring_security_check`,
            data: $(form).serialize(),
            success: function(res) {
                if (res.code === '0') {
                    Token.set(res.loginToken);
                    location.href = '/secure/home.html';
                } else {
                    showToast('warning', tr(res.description));
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                showToast('error', tr("Unknown error, Please contact our customer service"));
            },
            complete: function() {
                Loader.hide();
            }
        });
    }

    function submitRegister(form) {
        Loader.show();

        let bank = $('[name="bank"]');

        let bankInfo = {
            account_no: $('[name="account_no"]').val(),
            account_name: $('[name="account_name"]').val(),
            depositBankId: bank.val(),
            withdrawBankId: bank.find('option:selected').attr('wd_id'),
            extData: {
                firstName: '',
                lastName: '',
            }
        }

        $.ajax({
            type: 'POST',
            url: `${api}/func/player/register`,
            dataType: 'json',
            data: $(form).serialize() + '&bank_info=' + JSON.stringify(bankInfo),
            success: function(res) {
                if (res.code === '0') {
                    Token.set(res.result.loginToken);
                    showToast('success', tr("Register Successful"));
                    setTimeout(() => location.href = '/secure/home.html', 1500);
                } else {
                    showToast('error', tr(res.description));
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                showToast('error', tr("Unknown error, Please contact our customer service"));
            },
            complete: function() {
                Loader.hide();
            }
        });
    }

    function submitForgotOTP(form) {
        Loader.show();

        $.ajax({
            type: 'POST',
            url: `${api}/func/player/getResetPasswordOtp`,
            data: $(form).serialize(),
            success: function(res) {
                showToast(res.code === '0' ? 'success' : 'error', tr(res.description));
                if (res.code === '0') {
                    $('.getotp, .forgot-form-mob-otp').hide();
                    $('.resetpassword, .forgot-form-mob').show();
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                showToast('error', tr("Unknown error, Please contact our customer service"));
            },
            complete: function() {
                Loader.hide();
            }
        });
    }

    function submitForgot(form) {
        Loader.show();

        $.post(`${api}/func/player/submitOtp?otp=${$(form).find('#otp').val()}&req_type=20`, function(res) {
            if(res.code != '0') {
                Loader.hide();
                showToast('error', tr(res.description));
                return;
            }

            $.ajax({
                type: 'POST',
                url: `${api}/func/player/resetPassword`,
                data: $(form).serialize(),
                success: function(res) {
                    showToast(res.code === '0' ? 'success' : 'error', tr(res.description));
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    showToast('error', tr("Unknown error, Please contact our customer service"));
                },
                complete: function() {
                    Loader.hide();
                }
            });
        });
    }

    $(".inline-login").validate({
        errorPlacement: function(error, element) {
        },
        submitHandler: function(form) {
            submitLogin(form);
        }
    });

    $(".reg-form").validate({
        errorPlacement: function(error, element) {
            element.closest('.f-row').append(error);
        },
        submitHandler: function(form) {
            submitRegister(form);
        }
    });

    $("#forgotmodal form.getotp").validate({
        errorPlacement: function(error, element) {
            element.closest('.form_group').append(error.css({color: '#ce1212', 'font-weight': '500'}));
        },
        submitHandler: function(form) {
            submitForgotOTP(form);
        }
    });

    $("#forgotmodal form.resetpassword").validate({
        errorPlacement: function(error, element) {
            element.closest('.form_group').append(error.css({color: '#ce1212', 'font-weight': '500'}));
        },
        submitHandler: function(form) {
            submitForgot(form);
        }
    });

    let logRegMob = (title, body = '') => {
        return `
            <div id="mob_modal">
                <div class="container modal_cnt">
                    <div class="modal_header">
                        <div class="modal_label">
                            <div class="modal_logo">${$('.m-logo').html()}</div>
                            <div class="close_modal"><img src="/assets/images/close.png" alt="close"></div>
                            <span class="title">${tr(title)}</span>
                        </div>
                    </div>
                    ${body}
                </div>
            </div>
        `;
    }

    $(document).on(`click`, `.login`, function () {
        const body = `
            <div class="modal_body">
                <form method="post" action="#" class="log-form-mob" novalidate="novalidate">
                    <div class="form_wp">
                        <div class="input-wrapper">
                            <div class="form_group">
                                <label for="j_username">${tr('<code>*</code> Phone Number')}</label>
                                <input type="text" name="j_username" id="j_username" class="input_custom required" placeholder="${tr('Phone Number')}">
                            </div>
                            <div class="form_group">
                                <label for="j_password">${tr('<code>*</code> Password')}</label>
                                <input type="password" name="j_password" id="j_password" class="input_custom required" placeholder="${tr('Password')}" minlength="6" maxlength="20">
                            </div>
                            <div class="form_group">
                                <div class="input_group" style="gap: 10px;">
                                    <label class="cb remember"><input type="checkbox" id="remember" name="remember" value="1" class="tnc_check" aria-label="remember"><span class="checkmark"></span></label>
                                    <label style="color: #1e4e32;font-size: 14px;font-weight: 600;" for="remember">${tr('Remember Me')}</label>
                                    <a href="#" class="forgot-pwd">${tr('Forgot Password?')}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-wrap"><button type="submit" class="btn-login btn-orange">${tr('Login')}</button></div>
                </form>
            </div>`;
        $(`body`).append(logRegMob(`${tr('LOGIN')}`, body));
        $(`#mob_modal`).fadeIn();

        checkRememberLogin();

        $(".log-form-mob").validate({
            errorPlacement: function(error, element) {
                element.closest('.form_group').append(error);
            },
            submitHandler: function(form) {
                submitLogin(form);
            }
        });

        $(document).on(`click`, `.log-form-mob .forgot-pwd`, function () {
            $(`#mob_modal`).remove();
            const body = `
                <div class="modal_body">
                    <form method="post" action="#" class="forgot-form-mob-otp" novalidate="novalidate">
                        <div class="form_wp">
                            <div class="input-wrapper">
                                <div class="form_group">
                                    <input type="hidden" name="type" value="20">
                                    <input type="hidden" name="countryCode" value="62">
                                    <label for="number">${tr('<code>*</code> Phone Number')}</label>
                                    <input type="text" name="number" id="number" class="input_custom required digits" placeholder="${tr('Enter your phone number')}" minlength="10" maxlength="14" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="btn-wrap"><button type="submit" class="btn-login btn-orange">${tr('Get OTP')}</button></div>
                    </form>
                    <form method="post" action="#" class="forgot-form-mob" novalidate="novalidate" style="display:none">
                        <div class="form_wp">
                            <div class="input-wrapper">
                                <div class="form_group">
                                    <label for="otp">${tr('<code>*</code> OTP Code')}</label>
                                    <input type="text" name="otp" id="otp" class="input_custom required" placeholder="${tr('Enter OTP Code')}" maxlength="120">
                                </div>
                                <div class="form_group">
                                    <label for="newPwd"><code>*</code>${tr('Set New Password')}</label>
                                    <div class="input_icon w_full">
                                        <div class="show_hide_pas img_wp"><img src="/assets/images/icon/visibility.webp" alt="visibility.webp"></div>
                                        <input type="password" id="newPwd" name="newPassword" class="form-control required alnum" maxlength="20" minlength="6" placeholder="${tr('Please type new password')}">
                                    </div>
                                </div>
                                <div class="form_group">
                                    <label for="confirmNewPassword"><code>*</code>${tr('Confirm New Password')}</label>
                                    <div class="input_icon w_full">
                                        <div class="show_hide_pas img_wp"><img src="/assets/images/icon/visibility.webp" alt="visibility.webp"></div>
                                        <input type="password" id="confirmNewPassword" name="confirmNewPassword" class="form-control required alnum" maxlength="20" minlength="6" equalto="#newPwd" placeholder="${tr('Please type new password')}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="btn-wrap"><button type="submit" class="btn-login btn-orange">${tr('Submit')}</button></div>
                    </form>
                </div>`;

            $(`body`).append(logRegMob(`${tr('FORGET PASSWORD')}`, body));
            $(`#mob_modal`).show();

            $(".forgot-form-mob-otp").validate({
                errorPlacement: function(error, element) {
                    element.closest('.form_group').append(error);
                },
                submitHandler: function(form) {
                    submitForgotOTP(form);
                }
            });

            $(".forgot-form-mob").validate({
                errorPlacement: function(error, element) {
                    element.closest('.form_group').append(error);
                },
                submitHandler: function(form) {
                    submitForgot(form);
                }
            });
        });

        return false;
    });

    $(document).on(`click`, `.register`, function () {
        const body = `
            <div class="modal_body">
                <form class="reg-form-mob" novalidate="novalidate">
                    <div class="steps">
                        <button type="button" class="step_1 active">1</button>
                        <img src="/assets/images/icon/arrow_step.webp" width="34" height="24" alt="arrow_step">
                        <button type="button" class="step_2">2</button>
                    </div>
                    <div class="form_wp">
                        <div class="input-wrapper">
                            <div class="form_step first">
                                <div class="form_group">
                                    <label for="username">${tr('<code>*</code> User Name')}</label>
                                    <input type="text" name="username" id="username" class="input_custom required alnum" maxlength="12" minlength="8" placeholder="${tr('Enter your username')}">
                                </div>
                                <div class="form_group">
                                    <label for="regbank-phone">${tr('<code>*</code> Phone Number')}</label>
                                    <input type="text" name="mobile_no" id="regbank-phone" class="input_custom required digits" maxlength="15" minlength="10" placeholder="${tr('Enter your phone number')}">
                                </div>
                                <div class="form_group">
                                    <label for="passwordMob">${tr('<code>*</code> Password')}</label>
                                    <div class="input_icon w_full">
                                        <div class="show_hide_pas img_wp"><img src="/assets/images/icon/visibility.webp" alt="visibility.webp"></div>
                                        <input type="password" name="password" id="passwordMob" class="input_custom required alnum" placeholder="${tr('Enter your password')}" minlength="6" maxlength="20">
                                    </div>
                                </div>
                                <div class="form_group">
                                    <label for="cpassword">${tr('<code>*</code> Confirm Password')}</label>
                                    <div class="input_icon w_full">
                                        <div class="show_hide_pas img_wp">
                                            <img src="/assets/images/icon/visibility.webp" alt="visibility.webp">
                                        </div>
                                        <input type="password" name="confirm_password" id="cpassword" class="input_custom required" placeholder="${tr('Confirm your password')}" equalto="#passwordMob">
                                    </div>
                                </div>
                                <div class="form_group">
                                    <label for="referral_code">${tr('Referral Code')}</label>
                                    <input type="text" class="input_custom" name="referral_code" id="referral_code" placeholder="${tr('Referral code (Optional)')}" minlength="6" maxlength="12">
                                </div>
                            </div>
                            <div class="form_step second" style="display: none;">
                                <div class="form_group">
                                    <label for="bank"><code>*</code>${tr('Bank')}</label>
                                    <div class="input_icon w_full">
                                        <select name="bank" class="form-control -getbank">
                                            <option value="">${tr('Please select your bank account')}</option>
                                        </select>
                                        <div class="img_wp"><img src="/assets/images/icon/arrow_drop_down.webp" alt="arrow_drop_down" class="arrow"></div>
                                    </div>
                                </div>
                                <div class="form_group">
                                    <label for="regbank-accno"><code>*</code>${tr('Bank Account Number')}</label>
                                    <input type="text" class="input_custom" name="account_no" id="regbank-accno" placeholder="${tr('Please enter account number')}" minlength="10" maxlength="16">
                                </div>
                                <div class="form_group">
                                    <label for="regbank-accholder"><code>*</code>${tr('Bank Account Holder')}</label>
                                    <input type="text" class="input_custom" name="account_name" id="regbank-accholder" placeholder="${tr('Please enter account holder')}" minlength="3" maxlength="200">
                                </div>
                                <div class="form_group">
                                    <div class="input_group" style="gap: 10px;">
                                        <label class="cb"><input type="checkbox" id="tnc_check_mob" name="tnc_check_mob" class="tnc_check" aria-label="check"><span class="checkmark"></span></label>
                                        <label style="color: #1e4e32;font-size: 12px;font-weight: 600;" for="tnc_check_mob">${tr('I have to attained 18 years old, and I hereby agree to Terms of Service and Privacy Policy')}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-wrap">
                        <button type="button" class="btn-orange reg-btn register_next">${tr('Next')}</button>
                        <button type="submit" class="btn-orange reg-btn register_finish" disabled style="display: none;">${tr('Register')}</button>
                    </div>
                </form>
            </div>
            `;
        $(`body`).append(logRegMob(`${tr('REGISTER')}`, body));
        $(`#mob_modal`).fadeIn(200);

        $.getJSON(`${api}/func/player/getRegisterBankInfo`, function(res) {
            res.result.bank.forEach(b => {
                $('.-getbank').append($('<option/>', {value: b.transInfo.deposit.id, text: tr(b.bankName), wd_id: b.transInfo.withdraw.id}));
            });
        });

        $(".reg-form-mob").validate({
            errorPlacement: function(error, element) {
                element.closest('.form_group').append(error);
            },
            submitHandler: function(form) {
                submitRegister(form);
            }
        });

        return false;
    });

    $(document).on(`click`, `.tnc_check`, function () {
        $(this).prop('checked') ? $(`.reg-btn`).prop(`disabled`, false) : $(`.reg-btn`).prop(`disabled`, true);
    });
    $(document).on(`click`, `.register_next, .reg-form-mob .steps .step_2`, function () {
        if($(`.reg-form-mob .steps .step_2`).hasClass(`active`)) return false;

        if($(`.reg-form-mob`).valid()) {
            $(`.reg-form-mob .form_step.first, .reg-form-mob .register_next`).hide();
            $(`.reg-form-mob .form_step.second, .reg-form-mob .register_finish`).show();
            $(`.reg-form-mob .form_step.second select, .reg-form-mob .form_step.second input`).addClass(`required`);
            !$(`.reg-form-mob .steps .step_2`).hasClass(`active`) && $(`.reg-form-mob .steps .step_1, .reg-form-mob .steps .step_2`).toggleClass(`active`);
        }
    });
    $(document).on(`click`, `.reg-form-mob .steps .step_1`, function () {
        $(`.reg-form-mob .form_step.first, .reg-form-mob .register_next`).show();
        $(`.reg-form-mob .form_step.second, .reg-form-mob .register_finish`).hide();
        $(`.reg-form-mob .form_step.second select, .reg-form-mob .form_step.second input`).removeClass(`required`).removeClass(`error`);
        !$(`.reg-form-mob .steps .step_1`).hasClass(`active`) && $(`.reg-form-mob .steps .step_1, .reg-form-mob .steps .step_2`).toggleClass(`active`);
    });
    $(document).on(`click`, `.show_hide_pas`, function () {
        const type = $(this).closest(`.form_group`).find(`input`).attr(`type`);
        if(type == `password`) {
            $(this).closest(`.form_group`).find(`img`).attr(`src`, `/assets/images/icon/visibility_off.webp`);
            $(this).closest(`.form_group`).find(`input`).attr(`type`, `text`);
        }
        else {
            $(this).closest(`.form_group`).find(`img`).attr(`src`, `/assets/images/icon/visibility.webp`);
            $(this).closest(`.form_group`).find(`input`).attr(`type`, `password`);
        }
    });

    $(document).on(`click`, `.close_modal`, function () {
        $(`#mob_modal`).fadeOut(200, function () {
            $(`#mob_modal`).remove();
        });
    });

    $(document).on(`click`, `select`, function () {
        $(this).closest(`.input_icon`).find(`.img_wp`).toggleClass(`open`);
    });
    $(document).click(function(event) {
        !$(event.target).closest('.input_icon').length && $(`.img_wp`).removeClass(`open`);
    });

    $('#forgotmodal').on('show.bs.modal', function () {
        $('.getotp').show();
        $('.resetpassword').hide();
    }).on('hidden.bs.modal', function () {
        $('.getotp').show();
        $('.resetpassword').hide();
    });
});