@php

    if (!$FragmentOnly) {
        $echo['SetLoadedFlagFalse'];

        $checkboxActive = '<center><img class="icon-box" style="width:40px;height:40px" src="/assets/checkmark.png"></center>';
        $checkboxInactive = '<center><img class="icon-box" style="width:40px;height:40px" src="/assets/uncheck.png"></center>';
        $active_checkbox = '';

        if (isset($current_target)) {


            $User = $userModifyAdmin::getDetailsbyHashkey($current_target);
            if (!$User) {
                echo '<script>ModalQuickDismiss("Error", "User Not Found")</script>';
            } else {
                $user_phonenumber = $User['mobile_number'];
                $user_nickname = $User['nickname'];
                $user_fullname = $User['fullname'];
                $active = $User['active'];
                $created_time = $User['created'];
                $acct_type = $User['acct_type']->value;
                $total_balance = $User['total_balance'];
                $parent = $User['parent'];
                $additional_roles = $User['additional_roles'] ?? [];

                $current_roles = $userModifyAdmin::ShowUserRoles($current_target);
                $all_roles = $userModifyAdmin::ShowAllRoles();

                $echo['SetLoadedFlagTrue'];
            }

            $children = $userModifyAdmin::getchildrenofTargetUser($current_target);
        }



        if ($active ?? false) {
            $active_checkbox = $checkboxActive;
        } else {
            $active_checkbox = $checkboxActive;
        }

    }

@endphp

<div class="card" id="secondary-card">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title" style="" id="User_phonenumber">{{ $user_phonenumber ?? '' }}</h3>
        <div class="card-tools">
            <h3 class="card-title" style="" id="User_nick">{{ $user_nickname ?? '' }}</h3>
        </div>
    </div>
    <div class="card-body ">
        <h3 style="text-align:center; padding-bottom:10px;" id="User_fullname">{{ $user_fullname ?? '' }}</h3>
        <div class="card-section" id="main-card-section">

            <div class="tf-container">
                <div class="tf-balance-box" style="border: solid 3px #000d88;">
                    <div id="balance_wrapper">
                        <div class="balance">
                            <div class="row">
                                <div class="col br-right">
                                    <div class="inner-left">
                                        <p>Created</p>
                                        <h3 id="creation_date">{{ $created_time ?? '' }}</h3>

                                    </div>
                                </div>
                                <div class="col br-right">
                                    <div class="inner-left">
                                        <p>Active</p>
                                        <h3 id="active_checkbox">
                                            {!! $active_checkbox ?? '' !!}
                                        </h3>

                                    </div>
                                </div>
                                <div class="col br-right">
                                    <div class="inner-right">
                                        <p>Parent</p>
                                        <h3 id="user_parent">{{ $parent ?? '' }}</h3>

                                    </div>
                                </div>
                                <div class="col br-right">
                                    <div class="inner-right">
                                        <p>User Type</p>
                                        <h3 id="user_type_column">
                                            {{ $acct_type ?? '' }}
                                        </h3>

                                    </div>
                                </div>
                                <div class="col br-right">
                                    <div class="inner-right">
                                        <p>Balance</p>
                                        <h3 id="user_balance">{{ $total_balance ?? '' }}</h3>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wallet-footer">
                        <ul class="d-flex justify-content-between align-items-center">
                            <li class="wallet-card-item">
                                <a class="fw_6 text-center" id="btn-popup-down" href="javascript:void(0);"
                                    onclick="ButtonGo('NewLeads','');return false;">
                                    <ul>
                                        <li class="path1"></li>
                                        <li class="path2"></li>
                                        <li class="path3"></li>
                                        <li class="path4"></li>
                                    </ul>
                                    <img src="/assets/NewLeads.png" style="width: 30; height: 30;" class="icon-user">
                                    New Lead
                                </a>
                            </li>
                            <li class="wallet-card-item">
                                <a class="fw_6 text-center" id="btn-popup-down" href="javascript:void(0);"
                                    onclick="ButtonGo('ListLeads','0');return false;">
                                    <ul>
                                        <li class="path1"></li>
                                        <li class="path2"></li>
                                        <li class="path3"></li>
                                        <li class="path4"></li>
                                    </ul>
                                    <img src="/assets/ListLeads.png" style="width: 30; height: 30;" class="icon-user">
                                    List Leads
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <br><br>

        <div class="mt-5">
            <div class="tf-container">
                <div class="tf-title d-flex justify-content-between">
                    <h3 class="fw_6"></h3>
                    <a href="" onclick="" class="primary_color fw_6"></a>
                </div>
                <ul class="box-service mt-3" id="user_controls">

                </ul>
            </div>

        </div>




    </div>
</div>





<br><br>
<div class="card" id="third-card" style='display:none;'>
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title" style="">Members</h3>
        <div class="card-tools">

        </div>
    </div>
    <div class="card-body " id='user_details_children'>

        <table id="User_details_children_table">
            <thead>
                <tr>
                    <th>Number /<br>Nickname</th>
                    <th>Total Balance</th>
                    <th>Type</th>
                    <th>
                        <center>Active</center>
                    </th>
                    <th>Parent</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>


    </div>
</div>





<script>



    LoadDataPageFunc = {};
    LoadDataPageFunc.data = {};
    LoadDataPageFunc.data.children = null;
    LoadDataPageFunc.data.CurrentRoles = null;
    LoadDataPageFunc.data.AllRoles = null;

    @if (isset($current_roles) && $current_roles)
        LoadDataPageFunc.data.CurrentRoles = {!! json_encode($current_roles) !!}
    @endif
    @if(isset($all_roles) && $all_roles)
        LoadDataPageFunc.data.AllRoles = {!! json_encode($all_roles) !!}
    @endif
    @if(isset($children) && $children)
        LoadDataPageFunc.data.children = {!! json_encode($children) !!}
    @endif


    LoadDataPageFunc.buttonLImaker = function (text, onclick, icon) {
        return `<li><a href="javascript:void(0);" onclick="${onclick}"><div class="icon-box "><img src="/assets/${icon}"></div>${text}</a></li>`;
    };
    LoadDataPageFunc.ActiveCheckbox = '<center><img class="icon-box" style="width:40px;height:40px" src="/assets/checkmark.png"></center>';
    LoadDataPageFunc.ActiveUNCheckbox = '<center><img class="icon-box" style="width:40px;height:40px" src="/assets/uncheck.png"></center>';

    LoadDataPageFunc.UserControls = {};
    LoadDataPageFunc.UserControls.Load = function () {
        let controlsArr = []; let allcontrolsSTR = '';
        let DisableButton = LoadDataPageFunc.buttonLImaker('Disable', 'LoadDataPageFunc.DisableUser();', 'disableuser.png');
        DisableButton = $(DisableButton);
        DisableButton.attr('id', 'AdminUserDisableButton');
        DisableButton = DisableButton.prop('outerHTML');
        controlsArr.push(DisableButton);
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Set Notes', 'LoadDataPageFunc.SetUserNotesModal();', 'notes.png'));
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Set Exec', 'LoadDataPageFunc.SetUserExecModal();', 'exec.png'));
        // controlsArr.push(LoadDataPageFunc.buttonLImaker('Request Credit For User', 'LoadDataPageFunc.OpenRequestCredit();', 'request-credit.png'));
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Update Details', 'LoadDataPageFunc.UpdateUserDetailsDialog();', 'edituser.png'));
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Reset Password', 'LoadDataPageFunc.ResetUserPassword();', 'resetpassword.png'));
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Transfer My Credit', 'LoadDataPageFunc.TransferMyCredit();', 'transfercredit.png'));
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Logout', 'LoadDataPageFunc.OpenLogoutUser();', 'logout.png'));
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Roles', 'LoadDataPageFunc.Roles.ShowFetchedUserRoles();', 'briefcase.png'));
        controlsArr.push(LoadDataPageFunc.buttonLImaker('Change Parent', 'LoadDataPageFunc.ChangeParentModal();', 'atlas/ecology/leaf-tag.svg'));




        allcontrolsSTR = controlsArr.join('');
        $('#user_controls').html(allcontrolsSTR);

    };

    function loaduserdetails() {
        function populateuserdetails(response) {
            //console.log(response);
            if (response.created) {
                response.created = formatDateTimetoReadable(response.created);
            }
            $('#User_phonenumber').html(response.mobile_number);
            $('#User_nick').html(response.nickname);
            $('#creation_date').html(response.created);


            if (response.active === '1' || response.active === 1 || response.active === true) {
                LoadDataPageFunc.ChangeToEnableUserButton();
            }
            else {
                LoadDataPageFunc.ChangeToDisableUserButton();
            }
            $('#user_parent').html(response.parent);


            $('#user_type_column').html(response.acct_type);

            if (response.total_balance || response.total_balance === 0) {
                $('#user_balance_column').show();
                $('#user_balance').html(response.total_balance);
            }
            if (response.nickname) {
                $('#user_type_column').show();
            }
        }

        LoadDataPageFunc.UserControls.Load();

        AjaxDo('/admin/user/details', { target_user: currenttarget }, populateuserdetails, null, reqtype = 'POST');
    }
    loaduserdetails();



    //loadmywinningnumbersall(target_div='user_details_winning_numbers',target_user=currenttarget);

</script>




<script>

    LoadDataPageFunc.Roles = {};



    LoadDataPageFunc.Roles.ShowUserRoles = function () {
        let finalhtml = '';
        const formclass = 'UserRoles';
        let roleshtml = '';
        if (typeof LoadDataPageFunc.data.CurrentRoles === 'object') {
            LoadDataPageFunc.data.CurrentRoles.forEach(role => {
                roleshtml += UIInputGroupCheckBox('ROLE' + role.value, role.name, true, additional_input_class = 'RolesAllowed')
            });

            LoadDataPageFunc.data.AllRoles.forEach(role => {
                const exists = LoadDataPageFunc.data.CurrentRoles.some(cr => cr.value === role.value);
                if (!exists) {
                    roleshtml += UIInputGroupCheckBox(
                        'ROLE' + role.value,
                        role.name,
                        false,
                        additional_input_class = 'RolesAllowed'
                    );
                }
            });

        }
        // const submitbutton = UIInputGroupButton('Submit', formclass, buttonid = '', onclick = 'LoadDataPageFunc.UpdateUserRoles();', buttonstyle = '');
        finalhtml = roleshtml;
        finalhtml = CreateCardSimple(false, finalhtml);

        let modalbody = finalhtml;

        let modalfooter = UIInputGroupButton('Update', formclass, buttonid = '', onclick = 'LoadDataPageFunc.Roles.UpdateUserRoles();', buttonstyle = '');
        CreateAndShowModal('ChangeUserRolesModal', 'User Roles', modalbody, modalfooter, modalfooterclose = true, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
    };


    LoadDataPageFunc.Roles.ShowFetchedUserRoles = function () {
        if (LoadDataPageFunc.data.CurrentRoles && LoadDataPageFunc.data.AllRoles) {
            LoadDataPageFunc.Roles.ShowUserRoles();
            return;

        }

        LoadDataPageFunc.Roles.FetchRoles(function () {
            LoadDataPageFunc.Roles.ShowUserRoles();
        });
    };

    LoadDataPageFunc.Roles.FetchRoles = function (success = null, error = null) {
        LoadDataPageFunc.Req.url(`/admin/user/roles/get`).type('POST').fromVarCache(false).data({ target_user: currenttarget })
            .success((response) => {
                LoadDataPageFunc.data.CurrentRoles = response;
                LoadDataPageFunc.Req.url(`/admin/user/roles/all`).type('POST').fromVarCache(false).data({ target_user: currenttarget })
                    .success((response) => {
                        LoadDataPageFunc.data.AllRoles = response || [];
                        if (success && typeof success === 'function') {
                            success(response);
                        }
                    }).error((response) => {
                        if (error && typeof succerroress === 'function') {
                            error(response);
                        }

                    }).go();

            }).error((response) => {
                if (error && typeof succerroress === 'function') {
                    error(response);
                }
            }).go();
    };

    LoadDataPageFunc.Roles.GetSelectedRoles = function () {
        const selectedRoles = [];

        document.querySelectorAll('.RolesAllowed').forEach(checkbox => {
            if (checkbox.checked) {
                const label = document.querySelector(`label[for="${checkbox.id}"]`);
                if (label) {
                    selectedRoles.push(label.textContent.trim());
                }
            }
        });
        return selectedRoles;
    }



    LoadDataPageFunc.Roles.UpdateUserRoles = function () {


        LoadDataPageFunc.Req.url(`/admin/user/roles/change`).type('POST').fromVarCache(false).data({ target_user: currenttarget, roles: LoadDataPageFunc.Roles.GetSelectedRoles() })
            .success((response) => {
                LoadDataPageFunc.data.AllRoles = response || [];
                LoadDataPageFunc.Roles.FetchRoles(function () {
                    ModalQuickDismiss('Success', 'Roles Updated');
                });
            }).error((response) => {
                ModalQuickDismiss('Error', response);
            }).go();

    };


    LoadDataPageFunc.Req = new RequestData(false);

    LoadDataPageFunc.SetUserNotesModal = function () {

        let modalbody = `<textarea id="SetUserNotesContentTextArea" class="form-control" rows="4" cols="50"></textarea>`;

        let modalfooter = `<button class="btn btn-primary" onclick="LoadDataPageFunc.UpdateUserNotesTarget()">Update</button><button class="btn  btn-danger" onclick="LoadDataPageFunc.EraseUserNotesTarget();">Clear</button>`;
        CreateAndShowModal('SetUserNotesModal', 'Set Notes For User', modalbody, modalfooter, modalfooterclose = true, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
        $('#SetUserNotesContentTextArea').load('/admin/user/note/content', { target_user: currenttarget });

    };

    LoadDataPageFunc.EraseUserNotesTarget = function () {
        let Req = LoadDataPageFunc.Req;
        function ShowConfirmationEraseUserNotesTarget(response) {
            if (response) {
                ModalQuickDismiss('Success', 'Note Deleted');
                hidemodal('SetUserNotesModal');
            } else {
                ModalQuickDismiss('Failed', 'Unable to Delete Note.');
            }
        }

        Req.url('/admin/user/note/delete').type('POST').fromVarCache(false).data({ target_user: currenttarget })
            .success((response) => {
                ShowConfirmationEraseUserNotesTarget(response);
            }).go();

    };

    LoadDataPageFunc.UpdateUserNotesTarget = function () {
        let Req = LoadDataPageFunc.Req;
        let newnotevalue = $('#SetUserNotesContentTextArea').val();
        if (!newnotevalue) { ModalQuickDismiss('Failed', 'No Content. Note was not updated.'); return false; }

        function NoteUpdateConfirmationTarget(response) {
            if (!response) {
                ModalQuickDismiss('Failed', 'Unable to Update Notes'); return false;
            } else {
                ModalQuickDismiss('Updated', 'Notes Updated.');
                hidemodal('SetUserNotesModal'); return true;
            }
        }
        Req.url('/admin/user/note/update').type('POST').fromVarCache(false).data({ target_user: currenttarget, newnotecontent: newnotevalue })
            .success((response) => {
                NoteUpdateConfirmationTarget(response);
            }).go();
        console.log('df');
    };


    LoadDataPageFunc.SetUserExecModal = function () {
        let modalbody = `<textarea id="SetUserExecContentTextArea" class="form-control" rows="4" cols="50">
                        </textarea>`;


        let modalfooter = `<button class="btn btn-primary" onclick="LoadDataPageFunc.UpdateUserExecTarget()">Update</button><button class="btn  btn-danger" onclick="LoadDataPageFunc.EraseUserExecTarget();">Clear</button>`;
        CreateAndShowModal('SetUserExecModal', 'Set Exec For User', modalbody, modalfooter, modalfooterclose = true, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
        $('#SetUserExecContentTextArea').load('/admin/user/exec/content', { target_user: currenttarget });

    };

    LoadDataPageFunc.EraseUserExecTarget = function () {
        let Req = LoadDataPageFunc.Req;
        function ShowConfirmationEraseUserExecTarget(response) {
            if (response) {
                ModalQuickDismiss('Success', 'Exec Deleted');
                hidemodal('SetUserExecModal');
            } else {
                ModalQuickDismiss('Failed', 'Unable to Delete Exec.');
            }
        }
        Req.url('/admin/user/exec/delete').type('POST').fromVarCache(false).data({ target_user: currenttarget })
            .success((response) => {
                ShowConfirmationEraseUserExecTarget(response);
            }).go();
    };

    LoadDataPageFunc.UpdateUserExecTarget = function () {
        let Req = LoadDataPageFunc.Req;
        let newexecvalue = $('#SetUserExecContentTextArea').val();
        if (!newexecvalue) { ModalQuickDismiss('Failed', 'No Content. Exec was not updated.'); return false; }

        function ExecUpdateConfirmationTarget(response) {
            if (!response) {
                ModalQuickDismiss('Failed', 'Unable to Update Exec'); return false;
            } else {
                ModalQuickDismiss('Updated', 'Exec Updated.');
                hidemodal('SetUserExecModal'); return true;
            }
        }
        Req.url('/admin/user/exec/update').type('POST').fromVarCache(false).data({ target_user: currenttarget, newexeccontent: newexecvalue })
            .success((response) => {
                ExecUpdateConfirmationTarget(response);
            }).go();
    };


    LoadDataPageFunc.DisableUserButtonHtml = function () {
        let button = LoadDataPageFunc.buttonLImaker('Disable', 'LoadDataPageFunc.DisableUser();', 'disableuser.png');
        button = $(button);
        button = button.html();
        return button;
    };
    LoadDataPageFunc.EnableUserButtonHtml = function () {
        let button = LoadDataPageFunc.buttonLImaker('Enable', 'LoadDataPageFunc.EnableUser();', 'enable-user.png');
        button = $(button);
        button = button.html();
        return button;
    };

    LoadDataPageFunc.ChangeToEnableUserButton = function () {
        $('#active_checkbox').html(LoadDataPageFunc.ActiveCheckbox);
        $('#AdminUserDisableButton').html(LoadDataPageFunc.DisableUserButtonHtml);
    };
    LoadDataPageFunc.ChangeToDisableUserButton = function () {
        $('#active_checkbox').html(LoadDataPageFunc.ActiveUNCheckbox);

        $('#AdminUserDisableButton').html(LoadDataPageFunc.EnableUserButtonHtml);
    };


    LoadDataPageFunc.ModalDisableSuccess = function () {
        let modalid = "DisableUserSuccessModal";
        let modaltitle = 'Sucess';
        let modalbody = 'User is now Disabled';

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

    LoadDataPageFunc.ModalDisableFailed = function (response) {
        let modalid = "DisableUserFailedModal";
        let modaltitle = 'Failed';
        let modalbody = 'Unable to Disable User'.response;

        let modalfooter = ``;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = true, topclosebutton = true, modalbodyclass = 'modal-body bg-warning', modalheaderclass = 'modal-header');
    };


    LoadDataPageFunc.ModalEnableSuccess = function () {
        let modalid = "EnableUserSuccessModal";
        let modaltitle = 'Sucess';
        let modalbody = 'User is now Enabled';

        let modalfooter = ``;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = true, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
    };
    LoadDataPageFunc.ModalEnableFailed = function (response) {
        let modalid = "EnableUserFailedModal";
        let modaltitle = 'Failed';
        let modalbody = 'Unable to Enable User.<br>'.response;

        let modalfooter = ``;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = true, topclosebutton = true, modalbodyclass = 'modal-body bg-warning', modalheaderclass = 'modal-header');
    };

    LoadDataPageFunc.EnableUserNow = function () {
        let Reqq = new RequestData(false);
        function TryToEnable(response) {
            $("#EnableUserConfirmationDialog").modal('hide');
            if (response === true) {
                LoadDataPageFunc.ModalEnableSuccess();
                LoadDataPageFunc.ChangeToEnableUserButton();
            } else {
                LoadDataPageFunc.ModalEnableFailed(response);
            }
            LoadDataPageFunc.CheckIfUserActive();
            loaduserdetails();
        };
        Reqq.url('/admin/user/enable').type('POST').fromVarCache(false).data({ target_user: currenttarget })
            .success((response) => {
                TryToEnable(response);
            }).go();

    };


    LoadDataPageFunc.ChangeParentModal = function () {
        ModalQuickDismiss('Error','Function Not Implemented');
    };


    LoadDataPageFunc.DisableUserNow = function () {
        let Reqq = new RequestData(false);
        function TryToDisable(response) {
            $("#DisableUserConfirmationDialog").modal('hide');
            if (response === true) {
                LoadDataPageFunc.ModalDisableSuccess();
                LoadDataPageFunc.ChangeToDisableUserButton();
            } else {
                ModalDisableFailed(response);
            }
            LoadDataPageFunc.CheckIfUserActive();
            loaduserdetails();
        }
        Reqq.url('/admin/user/disable').type('POST').fromVarCache(false).data({ target_user: currenttarget })
            .success((response) => {
                TryToDisable(response);
            }).go();
    }

    LoadDataPageFunc.DisableUser = function () {
        let modalid = "DisableUserConfirmationDialog";
        let modaltitle = 'Disable User?';
        let modalbody = 'Are you sure you want to disable user?<br> The user would not be able to access his/her account?';

        let modalfooter = `<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-danger" onclick="LoadDataPageFunc.DisableUserNow()" id="request-credit-now">Continue</button>`;

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

    LoadDataPageFunc.EnableUser = function () {
        let modalid = "EnableUserConfirmationDialog";
        let modaltitle = 'Enable User?';
        let modalbody = 'Are you sure you want to Enable user?<br> The user would have access his/her account?';

        let modalfooter = `<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" onclick="LoadDataPageFunc.EnableUserNow()" id="request-credit-now">Continue</button>`;

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

    LoadDataPageFunc.CheckIfUserActive = function () {
        let Reqq = new RequestData(false);
        function ChangeDisableButtonState(response) {
            console.log(response);
            if (response === true) {
                LoadDataPageFunc.ChangeToDisableUserButton();
            }
            else if (response === false) {
                LoadDataPageFunc.ChangeToEnableUserButton();
            }


        }
        Reqq.url('/admin/user/isactive').type('POST').fromVarCache(false).data({ target_user: currenttarget })
            .success((response) => {
                ChangeDisableButtonState(response);
            }).go();
    };



    LoadDataPageFunc.TransferMyCredit = function () {
        gotoPage('transfer_my_credit', currenttarget);
    };



    LoadDataPageFunc.OpenUpdateUserDetailsButtonHtml = function () {
        return HomeMenuButtons('assets/edituser.png', 'Update Details', '', '', '45%', '45%', '', buttononclick = 'LoadDataPageFunc.UpdateUserDetailsDialog();', divclass = 'col-4', 'openupdateuserdetailsuserbuttondiv');
    };

    LoadDataPageFunc.UpdateUserNow = function () {
        const usernumber = getElementvalue('update-m-number');
        const usernick = getElementvalue('update-nick');

        function TrytoUpdateUserDetails(response) {
            const modalsuccess = ModalQuickDismiss('Success', modalbody = 'User Details Updated.', modalid = 'UpdateUserDetailsSuccess', modaltohide = 'UpdateUserDetailsDialog', ReloadPage, response);
            const modalfailed = ModalQuickDismiss('Failed', modalbody = 'Unable to Update User Details.<br><br>' + response, modalid = 'UpdateUserDetailsFailed', modaltohide = '', functiontodo = '', response !== true);
        }


        AjaxDo('/admin/user/details/update', { target_user: currenttarget, details: { mobile_number: usernumber, nickname: usernick } }, TrytoUpdateUserDetails, null, reqtype = 'POST');
    };

    LoadDataPageFunc.UpdateUserDetailsDialog = function () {
        const usernumber = getElementhtml('User_phonenumber');
        const usernick = getElementhtml('User_nick');
        let modalbody = dualcolrow('Mobile Number', textformcontrol('update-m-number', '', '', placeholder = '09xxxxxxxxx', usernumber)) + '<br>' +
            dualcolrow('Nickname', textformcontrol('update-nick', '', '', '', usernick));

        let modalfooter = `<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                           <button type="button" class="btn btn-danger" onclick="LoadDataPageFunc.UpdateUserNow()" id="">Continue</button>`;

        ModalContinueCancel("UpdateUserDetailsDialog", 'Update User', modalbody, 'LoadDataPageFunc.UpdateUserNow();');

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

    };

    LoadDataPageFunc.ResetUserPassword = function () {
        let modalbody = dualcolrow('New Password', '<input type="password" class="form-control" id="reset-password-new">');
        ModalContinueCancel('reset-user-password-dialog', 'Reset Password', modalbody, 'LoadDataPageFunc.ResetUserPasswordNow();', cancelbuttontext = 'Cancel', continuebuttontext = 'Reset', continuebuttoncss = 'btn btn-danger', cancelbuttoncss = 'btn btn-warning');
    };

    LoadDataPageFunc.OpenResetUserPasswordButtonHtml = function () { return HomeMenuButtons('assets/resetpassword.png', 'Reset Password', '', '', '45%', '45%', '', buttononclick = 'ResetUserPassword();', divclass = 'col-4', 'openresetuserpasswordsuserbuttondiv'); };

    LoadDataPageFunc.ResetUserPasswordNow = function () {
        if (!$('#reset-password-new').val() || $('#reset-password-new').val().trim().length < 6) {
            ModalQuickDismiss('Incorrect Password Input', 'Password must be 6 characters or more.', modalid = 'modal-reset-user-password-success');
        }
        function ResetUserPasswordResult(response) {
            if (response === true) {
                ModalQuickDismiss('Password Changed', 'Password Reset Successful. Please inform user', modalid = 'modal-reset-user-password-success', modaltohide = 'reset-user-password-dialog', functiontodo = '', conditiontrue = true);
                modalhide('reset-user-password-dialog');
            } else {
                ModalQuickDismiss('Failed', 'Password was not reset.<br><br>' + response, modalid = 'modal-reset-user-password-success', modaltohide = '', functiontodo = '', conditiontrue = true);
            }

        }

        AjaxDo('/admin/user/password/reset', { target_user: currenttarget, user_new_password: $('#reset-password-new').val() }, ResetUserPasswordResult, null, reqtype = 'POST');
    };

    LoadDataPageFunc.ResetUserPassword = function () {
        let modalbody = dualcolrow('New Password', '<input type="password" class="form-control" id="reset-password-new">');
        ModalContinueCancel('reset-user-password-dialog', 'Reset Password', modalbody, 'LoadDataPageFunc.ResetUserPasswordNow();', cancelbuttontext = 'Cancel', continuebuttontext = 'Reset', continuebuttoncss = 'btn btn-danger', cancelbuttoncss = 'btn btn-warning');
    };



    LoadDataPageFunc.OpenLogoutButtonHtml = function () {
        return HomeMenuButtons('assets/logout.png', 'Logout', '', '', '45%', '45%', '', buttononclick = 'OpenLogoutUser()', divclass = 'col-4', 'openlogoutuserbuttondiv', '', textclass = '');
    };

    LoadDataPageFunc.OpenLogoutUser = function () {
        function OpenTryForceLogout(response) {
            if (response) {
                ModalQuickDismiss('Success', 'Session Ended.');
            }
            else {
                ModalQuickDismiss('Failed', 'Unable to End User Session.');
            }
        }
        let request = new RequestData(false);
        request.url('/admin/logout/force/user').type('POST').fromVarCache(false).data({ target_user: currenttarget })
            .success((response) => {
                OpenTryForceLogout(response);
            }).error((response) => {
                ModalQuickDismiss('Failed', 'Unable to End User Session.');
            }).go();


        // AjaxDo('/admin/logout/force/user', { target_user: currenttarget }, OpenTryForceLogout, null, reqtype = 'POST');
    };


    LoadDataPageFunc.ChildTable = {};

    LoadDataPageFunc.ChildTable.GenerateChildRow = function (Number, Total_Balance, Type, Active, parent, Hashkey) {
        // console.log(Number,Total_Balance,Type,Active,Parent,Hashkey);
        let activecheckbox = '';

        if (Active === '1' || Active === 1 || Active === true) {
            Active = LoadDataPageFunc.ActiveCheckbox;
        } else { Active = LoadDataPageFunc.ActiveUNCheckbox; }

        activecheckbox = Active;
        let numandnick = Number;
        numandnick = numandnick.replace(' ', '<br>');
        numandnick = `<a href="#" onclick="gotoPage('UserModify','${Hashkey}',0,1);return false;">${numandnick}</a>`;

        parent = parent.replace(/---/g, '<br>');
        numandnick = numandnick.replace(/---/g, '<br>');
        return `<tr>
      <td>${numandnick}</td>
      <td>${Total_Balance}</td>
      <td>${Type}</td>
      <td>${activecheckbox}</td>
      <td>${parent}</td>
        </tr>`;

    }




    LoadDataPageFunc.ChildTable.GenerateChildRows = async function (responsearray) {
        //console.log(responsearray);
        let newhtmltable = '';

        for (let i = 0; i < responsearray.length; i++) {

            newhtmltable += LoadDataPageFunc.ChildTable.GenerateChildRow(
                responsearray[i]['mobile_number'],
                responsearray[i]['total_balance'],
                responsearray[i]['acct_type'],
                responsearray[i]['active'],
                responsearray[i]['parent'],
                responsearray[i]['hashkey']
            );
        }

        //$("#User_list_table").find("tbody").replaceWith(newhtmltable);
        // new DataTable('#User_list_table');


        $("#User_details_children_table").find("tbody").html(newhtmltable);

        $('#third-card').fadeIn(200);


        let userlist = $("#User_details_children_table").DataTable({
            "destroy": true,
            order: [[0, 'desc']],
            pageLength: 5,
            lengthMenu: [[5], [5]]
        });
        /*
        userlist.on('click', 'tbody tr', function () {
    let data = userlist.row(this).data();
    let targettranshash = data[0];
    console.log(targettranshash);
    $(targettranshash).find('a').trigger('click');
        });
*/

    }


    LoadDataPageFunc.ChildTable.GenerateChildUsersTable = function () {
        if (!LoadDataPageFunc.data.children) {
            AjaxDo('/user/details/children', { target_user: currenttarget }, LoadDataPageFunc.ChildTable.GenerateChildRows, null, reqtype = 'POST');
        } else {
            LoadDataPageFunc.ChildTable.GenerateChildRows(LoadDataPageFunc.data.children);
        }
    }






    $(document).ready(function () {
        if (!LoadDataPageFunc.data.CurrentRoles || !LoadDataPageFunc.data.AllRoles) { LoadDataPageFunc.Roles.FetchRoles(); }
        LoadDataPageFunc.ChildTable.GenerateChildUsersTable();
    });

</script>

<head>
    <style>



    </style>

</head>
<br><br><br>