<br><br><br>

<div class="mt-1">
    <div class="tf-container">
        <div class="box-user">
            <div class="inner d-flex flex-column align-items-center justify-content-center">
                <div class="box-avatar">
                    <img src="/assets/sync.png" id="account_settings_profile_picture" alt="image">
                    <span class="icon-camera-to-take-photos"></span>
                </div>
                <div class="info">
                    <h2 class="fw_8 mt-3 text-center" id="account_settings_fullname_profile">

                    </h2>
                    <p id="">
                    <h6 id="account_settings_credit_card_profile_pic"></h6> <i class="icon-copy1"></i></p>
                </div>
            </div>


        </div>
        <ul class="mt-7">
            <li class="list-user-info"><span class="icon-user"></span>
                    <h5 id="account_settings_fullname_main"></h5>
                </li>
            <li class="list-user-info"><span class="icon-credit-card2"></span>
                <h4 id="account_settings_credit_card_main"></h4>
            </li>
            <li class="list-user-info"><span class="icon-phone"></span>
                <h4 id="account_settings_mobile_number"></h4>
            </li>
            <li class="list-user-info"><span class="icon-email"></span>
                <h4 id="account_settings_email"></h4>
            </li>
        </ul>
    </div>

</div>
<div class="card-section" id="main-card-section">



</div>

<br><br>


<script>

    function ChangePasswordInitialModal() {


        const modalid = "modal-change-password-initial-page";
        const modaltitle = "Change Password";
        const modalbody = `


<div class="input-group mb-3">
                <input type="password" class="form-control" placeholder="Current Password" id="olduserpassword"
                    name="olduserpassword">
                <div class="input-group-append">
                    <div class="input-group-text" id="user-password-input-group-text">
                        <span class="fas fa-lock" id="user-password-span"></span>
                    </div>
                </div>
            </div>


<div class="input-group mb-3">
                <input type="password" class="form-control" placeholder="New Password" id="newuserpassword"
                    name="newuserpassword">
                <div class="input-group-append">
                    <div class="input-group-text" id="newuser-password-input-group-text">
                        <span class="fas fa-lock" id="newuser-password-span"></span>
                    </div>
                </div>
            </div>


            <div class="input-group mb-3">
                <input type="password" class="form-control" placeholder="Confirm Password" id="newuserpasswordconfirm"
                    name="newuserpasswordconfirm">
                <div class="input-group-append">
                    <div class="input-group-text" id="newuser-password-confirm-input-group-text">
                        <span class="fas fa-lock" id="newuser-password-confirm-span"></span>
                    </div>
                </div>
            </div>




`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button"  class="btn btn-danger" onclick="ChangePasswordConfirmAccountSettings();" id="change-password-now-confirm-button">Change Password</button>`;


        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');


        $('#newuserpassword').keyup(function () {
            VerifyInitialPassword();
            VerifyAllPasswordInput();
        });
        $('#newuserpasswordconfirm').keyup(function () {
            VerifyConfirmPassword();
            VerifyAllPasswordInput();
        });


    }


    function ChangePasswordAccountSettingsSuccess() {
        const modalid = "modal-change-password-success";
        const modaltitle = "Success";
        const modalbody = `<p>Password has been changed successfully</p>`;
        const modalfooter = `<button type="button"  class="btn btn-primary" onclick="window.location.href = '/logout'; $('.modal').hide(); window.location.href = '';" id="change-password-success-button">OK</button>`;


        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');


    }

    function ChangePasswordAccountSettingsError(response) {
        const modalid = "modal-change-password-failed";
        const modaltitle = "Failed";
        const modalbody = `<p>Unable to change password. Please try again later.</p><p>${response}</p>`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>`;


        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
        $('#modal-change-password-final-confirmation-page').modal('hide');
    }


    function ChangePasswordNowAccountSettings() {

        function ChangePasswordNow(response) {
            if (response === true) {
                $('.modal').hide();
                ChangePasswordAccountSettingsSuccess();
            } else {
                ChangePasswordAccountSettingsError(response);
            }
        }


        AjaxDo('/user/changemypassword', { current_password: $("#olduserpassword").val(), new_password: $("#newuserpassword").val(), new_confirm_password: $("#newuserpasswordconfirm").val() }, ChangePasswordNow, null, reqtype = 'POST');

    }

    function ChangePasswordAccountSettingsFinalConfirmModal() {
        const modalid = "modal-change-password-final-confirmation-page";
        const modaltitle = "Continue?";
        const modalbody = `<p>Confirm Password Change?</p>`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button"  class="btn btn-primary" onclick="ChangePasswordNowAccountSettings();" id="change-password-now-confirm-button">Change Password</button>`;


        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');


    }


    function ChangePasswordConfirmAccountSettings() {
        if (!VerifyAllPasswordInput()) { return false; }
        ChangePasswordAccountSettingsFinalConfirmModal();
    }

    function changeSpantoInvalid(idtext) {
        $("#" + idtext + "-span").attr("class", "fas fa-times-circle");
        $("#" + idtext + "-input-group-text").attr("class", "input-group-text  bg-danger");
    }
    function changeSpantoValid(idtext) {
        $("#" + idtext + "-span").attr("class", "fas fa-check");
        $("#" + idtext + "-input-group-text").attr("class", "input-group-text  bg-primary");
    }

    function ChangeConfirmPasswordButtontoPrimary() {
        $('#change-password-now-confirm-button').attr('class', 'btn btn-primary');
    }
    function ChangeConfirmPasswordButtontoDanger() {
        $('#change-password-now-confirm-button').attr('class', 'btn btn-danger');
    }

    function VerifyInitialPassword() {
        const userPassword = document.getElementById("newuserpassword").value;
        if (userPassword.length < 6) {
            changeSpantoInvalid('newuser-password');
            normalpasswordallowed = false;
            return false;
        }
        changeSpantoValid('newuser-password');
        normalpasswordallowed = true;
        return true;

    }

    function VerifyConfirmPassword() {
        const userPassword = document.getElementById("newuserpassword").value;
        const userPasswordConfirm = document.getElementById("newuserpasswordconfirm").value;

        if (userPassword.length < 6 || userPasswordConfirm.length < 6) {
            changeSpantoInvalid('newuser-password-confirm');
            confirmpasswordallowed = false;
            return false;
        }
        if (userPassword !== userPasswordConfirm) {
            changeSpantoInvalid('newuser-password-confirm');
            confirmpasswordallowed = false;
            return false;
        }
        changeSpantoValid('newuser-password-confirm'); changeSpantoValid('newuser-password');
        confirmpasswordallowed = true; return true;
    }

    function VerifyAllPasswordInput() {
        const OlduserPassword = document.getElementById("olduserpassword").value;


        if (VerifyInitialPassword() && VerifyConfirmPassword() && OlduserPassword.length > 5) {
            ChangeConfirmPasswordButtontoPrimary();
            return true;
        }
    }


    servicesbuttonarray = [['/assets/resetpassword.png', 'Reset Password', 'ChangePasswordInitialModal();', 'javascript:void(0);'],
    ['/assets/betshistory.png', 'Reset Browser and Cache', 'clearCacheAndReload()', 'javascript:void(0);'],
    ['/assets/notes.png', 'Show Notes', 'ShowNotes(true);', 'javascript:void(0);'],
    ['/assets/logout.png', 'Logout', 'clearCacheAndLogout();clearCacheAndLogout();', 'javascript:void(0);']
    ];



    servicesbox = UIServices_FullDIV_ONCLICK_Array('', '', '', '', servicesbuttonarray);


    $('#main-card-section').html(servicesbox);

    changeTopbarTitle('Account Settings');


    function account_details_load_data() {

const url ='/account_settings/details';
const updateaccountdetailshtml = function(name,fullname,mobile,photourl,landline,email){
                $('#account_settings_profile_picture').attr('src',photourl);
                $('#account_settings_fullname_profile').html(name);
                $('#account_settings_fullname_main').html(fullname);
                $('#account_settings_credit_card_main').html(mobile);
                $('#account_settings_mobile_number').html(landline);
                $('#account_settings_email').html(email);
}
const photourl_account_settings_find_one = function(response){
    let photourl = response.photourl;
                if (photourl === undefined || photourl === null || photourl === '') {
                } else if (Array.isArray(photourl)) {
                    photourl = photourl[0];
                } else if (!Array.isArray(photourl)) {

                }

                if (photourl === undefined || photourl === null || photourl === '') {
                    photourl = response.photourl2;
                }
                if (Array.isArray(photourl)) {
                    photourl = photourl[0];
                }
    return photourl;
}

        let request = new RequestData(true);
        const cachedata = reqcacheload(url,datavalue='',object=null);
        if(cachedata){
            let photourlcachedata = updateaccountdetailshtml(cachedata);
            updateaccountdetailshtml(cachedata.name,cachedata.fullname,cachedata.mobile,photourlcachedata,cachedata.landline,cachedata.email);
        }

        request
            .url(url)
            .type('GET')
            .data(null)
            .success((response) => {
               
               
                const photourl  = photourl_account_settings_find_one (response);
                updateaccountdetailshtml(response.name,response.fullname,response.mobile,photourl,response.landline,response.email);
            


            })
            .error((err) => {
                console.error(err);
            })
            .go();
    }


    $(document).ready(function () {
        account_details_load_data();
    });


</script>