<template>
    <div class="disp-center popup-vue-lg" style="width: 45%; height: 286px"><!--NEED CLASSES FOR MODAL -->
        <!--NEED H4 FOR CLOSE BUTTON -->
        <h4 class="btnx"
            style="font-family: arial !important;"
            @click="_closePopup()">
            X
        </h4>
        <div>
            <h2 id="title" class="text-center">{{$popup_params[1].mode === 0 ? "ADD" : "EDIT"}} LOCATOR CREDENTIALS</h2>
            <hr style="margin: 10px 0"> 
            <div class="popup-vue-body-xlg sc5 disp-style-col">
                <div class="disp-style-row">
                    <div class="disp-style-col" style="width: calc(50% - 6px); margin-right: 12px">
                        <label for="txt_name" style="height: 12px; font-weight: bold">Name</label>
                        <input id="txt_name" v-model="txt_name" type="text" style="width: 100%">
                    </div>
                    <div class="disp-style-col" style="width: calc(50% - 6px); margin-left: 12px">
                        <label for="txt_username" style="height: 12px; font-weight: bold">Username</label>
                        <input id="txt_username" v-model="txt_username" type="text" style="width: 100%">
                    </div>
                </div>
                <div class="disp-style-row">
                    <div class="disp-style-col" style="width: calc(50% - 6px); margin-right: 12px">
                        <label for="txt_pass" style="height: 12px; font-weight: bold">Password</label>
                        <input id="txt_pass" v-model="txt_pass" type="password" style="width: 100%">
                    </div>
                    <div class="disp-style-col" style="width: calc(50% - 6px); margin-left: 12px">
                        <label for="txt_conf" style="height: 12px; font-weight: bold">Confirm Password</label>
                        <input id="txt_conf" v-model="txt_conf" type="password" style="width: 100%">
                    </div>
                </div>
                <div class="disp-style-row">
                    <div class="disp-style-col" style="width: calc(50% - 6px); margin-right: 12px">
                        <label for="txt_email" style="height: 12px; font-weight: bold">Email</label>
                        <input id="txt_email" v-model="txt_email" type="text" style="width: 100%">
                    </div>
                    <div class="disp-style-col" style="width: calc(50% - 6px); margin-left: 12px">
                        <label for="txt_ent" style="height: 12px; font-weight: bold">JHSEZ Enterprise</label>
                        <input id="txt_ent" v-model="txt_ent" type="text" style="width: 100%" disabled>
                    </div>
                </div>
                &nbsp;
                <span @click="($popup_params[1].mode === 0 ? addCred() : updateCred())" style="font-size: 16px; text-align: center; width: 60px; align-self: center; padding-top: 0px" :class="$popup_params[1].mode === 0 ? 'git-btn-fa git-btn-success' : 'git-btn-fa git-btn-warn'"><i :class="'fa fa-save'"></i></span>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                added: false,
                txt_name: "",
                txt_username: "",
                txt_pass: "",
                txt_conf: "",
                txt_email: "",
                txt_ent: this.$popup_params[0].ent,
                //DATA HERE
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {       
                this.$loading(true);
                $("body").css({ 'cursor': 'wait' });
                this.txt_ent = this.$popup_params[0].ent;

                if (this.$popup_params[1].mode === 0) {
                    this.$loading(false);
                    $("body").css({ 'cursor': 'default' });
                }
                else {
                    this._vueGETfromParam(
                        'lcp_locator',
                        'fetch_loc_cred',
                        { 
                            crdid: this.$popup_params[1].crdid
                        },
                        response => {
                            this.txt_name = response[0].ucrd_realname;
                            this.txt_username = response[0].ucrd_username;
                            this.txt_email = response[0].ucrd_email;

                            this.$loading(false);
                            $("body").css({ 'cursor': 'default' });
                        }
                    );
                }
            },
            updateCred() {
                if (this.txt_name === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_name"]').text() + '` cannot be blank!'
                    });
                    $('#txt_name').select();
                    return;
                }
                
                if (this.txt_username === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_username"]').text() + '` cannot be blank!'
                    });
                    $('#txt_username').select();
                    return;
                }
                
                if (this.txt_email === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_email"]').text() + '` cannot be blank!'
                    });
                    $('#txt_email').select();
                    return;
                }
                
                if (this.txt_pass !== this.txt_conf && this.txt_pass === '') {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Password\'s don\'t match!'
                    });
                    return;
                }
                
                if (this.txt_pass.length < 4 && this.txt_pass.length > 0) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Password must be at least 4 character\'s long!'
                    });
                    return;
                }
                
                this._vuePATCH('lcp_locator',
                    this.$popup_params[1].crdid,
                    {
                        type: 'update_loc_cred',
                        data: {
                            password: this.txt_pass,
                            realname: this.txt_name,
                            username: this.txt_username,
                            email: this.txt_email,

                        }
                    }, 
                    response => {
                        if (response === 'success') {
                            this.showSuccessMsg({
                                title: 'Success!',
                                message: 'Locator updated!'
                            });
                            this._runCallback(1, 
                            {
                                ucrd_realname: this.txt_name,
                                ucrd_username: this.txt_username,
                                ucrd_email: this.txt_email,
                                name: this.txt_ent
                            });
                            this._closePopup();
                        }
                        else
                            this.$alert("Error! " + JSON.stringify(response));
                    }
                );
            },
            addCred() {
                if (this.txt_name === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_name"]').text() + '` cannot be blank!'
                    });
                    $('#txt_name').select();
                    return;
                }
                
                if (this.txt_username === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_username"]').text() + '` cannot be blank!'
                    });
                    $('#cmb_category').select();
                    return;
                }
                
                if (this.txt_email === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_email"]').text() + '` cannot be blank!'
                    });
                    $('#cmb_type').select();
                    return;
                }
                
                if (this.txt_ent === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_ent"]').text() + '` cannot be blank!'
                    });
                    $('#txt_sname').select();
                    return;
                }
                
                if (this.txt_pass !== this.txt_conf) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Passwords don\'t match!'
                    });
                    return;
                }

                this._vuePOST(
                    'lcp_locator', 
                    {
                        type: "save_locator_cred",
                        data: {
                            locator_id: this.$popup_params[0].id,
                            ucrd_realname: this.txt_name.trim(),
                            ucrd_username: this.txt_username.trim(),
                            password: this.txt_pass,
                            ucrd_email: this.txt_email.trim(),
                        }
                    },
                    response => {
                        if (response !== null)
                            this.$fire({
                                title: "Success!",
                                text: "Locator successfully added!",
                                type: "success",
                                timer: 3000
                            }).then(r => {
                                alert(JSON.stringify(response));
                                this._runCallback(1, 
                                {
                                    ucrd_realname: this.txt_name,
                                    ucrd_username: this.txt_username,
                                    ucrd_email: this.txt_email,
                                    name: this.txt_ent,
                                    date_inactive: null
                                });
                                this.$loading(false);
                                this.clearInput();
                                this.added = true;
                            });
                        else
                            console.log(JSON.stringify(response));
                    }
                );
            },
            clearInput() {
                this.txt_name = "";
                this.txt_username = "";
                this.txt_email = "";
                this.txt_pass = "";
                this.txt_conf = "";
                $('#txt_name').select();
            },
            addMobile(nbr = "", manual = false) {
                var ID = 0;
                this.cpnos.forEach(x => {
                    x.id = ID;
                    ID++;
                });
                if (manual === false || (nbr !== "" && manual === true))
                    this.cpnos.push({ id: ID, number: nbr });
            },
            listToArr(data) {
                var output = [];

                try {
                    data.forEach(x => {
                        output.push(x.number);
                    });
                }
                catch { }

                if (output.length === 0)
                    return '[""]';
                else
                    return JSON.stringify(output);
            },
            removeMobile(id) {
                let i = this.cpnos.map(data => data.id).indexOf(id);
                this.cpnos.splice(i, 1);
                var ID = 0;
                this.cpnos.forEach(x => {
                    x.id = ID;
                    ID++;
                });
            },
            addLandline(nbr = "", manual = false) {
                var ID = 0;
                this.telnos.forEach(x => {
                    x.id = ID;
                    ID++;
                });
                if (manual === false || (nbr !== "" && manual === true))
                    this.telnos.push({ id: ID, number: nbr });
            },
            removeLandline(id) {
                let i = this.telnos.map(data => data.id).indexOf(id);
                this.telnos.splice(i, 1);
                var ID = 0;
                this.telnos.forEach(x => {
                    x.id = ID;
                    ID++;
                });
            },
        },
        created() {
        },
    }
</script>
<style lang="css" scoped>
</style>    