<template>
    <div class="disp-center popup-vue-xlg" style="width: 65%; height: 520px"><!--NEED CLASSES FOR MODAL -->
        <!--NEED H4 FOR CLOSE BUTTON -->
        <h4 class="btnx"
            style="font-family: arial !important;"
            @click="modalClose()">
            X
        </h4>
        <div>
            <h2 id="title" class="text-center">{{$popup_params[0].mode === 0 ? "ADD" : "EDIT"}} LOCATOR</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: 65%; height: 170px">
                        <label for="txt_name">Locator</label>
                        <input id="txt_name" v-model="txt_name" type="text" style="width: 100%">
                        <div class="disp-style-row" style="margin-top: 12px">
                            <div class="disp-style-col" style="width: 50%">
                                <label for="cmb_category">Category</label>
                                <div class="disp-style-row">
                                    <model-select id="cmb_category" :options="categories" v-model="cmb_category" placeholder="Select Category" style="padding: 8px 0px 0px 8px; height: 32px">
                                    </model-select>&nbsp;
                                </div>
                            </div>
                            &emsp;
                            <div class="disp-style-col" style="width: 50%">
                                <label for="cmb_type">Type</label>
                                <select id="cmb_type" v-model="cmb_type">
                                    <option value="walk-in" selected>Walk-in</option>
                                    <option value="permanent">Permanent</option>
                                    <option value="residential">Residential</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    &emsp;
                    <div class="disp-style-col" style="width: 35%; height: 170px">
                        <label for="txt_sname">Short Name</label>
                        <input id="txt_sname" v-model="txt_sname" type="text">
                        &emsp;
                        <label><input v-model="chk_tpto" type="checkbox">&nbsp;Allow TPTO for Exhibitors</label>
                        <label><input v-model="chk_emp" type="checkbox">&nbsp;Allow Employment Reports</label>
                        <label><input v-model="chk_old" type="checkbox">&nbsp;Set as Old Locator</label>
                    </div>
                </div>
                &nbsp;
                <div class="disp-style-col" style="width: 100%%; height: 210px">
                    <label for="txt_addr">Office Address within JHSEZ</label>
                    <input id="txt_addr" v-model="txt_addr" type="text" style="width: 100%">
                    <div class="disp-style-row" style="margin-top: 12px">
                        <div class="disp-style-col" style="width: 252px">
                            <div class="disp-style-row">
                                <label>Mobile No.</label>&emsp;<span @click="addMobile()" style="font-size: 12px"><i class="git-btn-fa git-btn-success fa fa-plus"></i></span>
                            </div>
                            <div class="disp-style-col" style="height: 94px; overflow-y: scroll;">
                                <div v-for="data in cpnos" :key="data.id" class="disp-style-row" style="margin-bottom: 4px">
                                    <a style="align-self: center; width: 8px">{{ (data.id + 1) }}.</a>&emsp;<input type="text" v-model="data.number" @keydown="_keyDownMobile(cpnos, $event, data.id)" placeholder="09##-####-###">
                                    &emsp;<span @click="removeMobile(data.id)" style="font-size: 12px"><i class="git-btn-fa git-btn-danger fa fa-minus"></i></span>
                                </div>
                            </div>
                        </div>
                        &emsp;
                        &emsp;
                        &emsp;
                        <div class="disp-style-col" style="width: 252px">
                            <div class="disp-style-row">
                                <label>Landline</label>&emsp;<span @click="addLandline()" style="font-size: 12px"><i class="git-btn-fa git-btn-success fa fa-plus"></i></span>
                            </div>
                            <div class="disp-style-col" style="height: 94px; overflow-y: scroll;">
                                <div v-for="data in telnos" :key="data.id" class="disp-style-row" style="margin-bottom: 4px">
                                    <a style="align-self: center; width: 8px">{{ (data.id + 1) }}.</a>&emsp;<input type="text" v-model="data.number" @keydown="_keyDownLandline(telnos, $event, data.id)" placeholder="###-###-####">
                                    &emsp;<span @click="removeLandline(data.id)" style="font-size: 12px"><i class="git-btn-fa git-btn-danger fa fa-minus"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <span @click="$popup_params[0].mode === 0 ? addLocator() : updateLocator()" style="font-size: 16px; align-self: center"><i :class="$popup_params[0].mode === 0 ? 'git-btn-fa git-btn-success fa fa-save' : 'git-btn-fa git-btn-warn fa fa-save'"></i></span>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                added: false,
                telnos: [],
                cpnos: [],
                categories: [],
                txt_name: "",
                txt_sname: "",
                cmb_category: "",
                cmb_type: "walk-in",
                txt_addr: "",
                chk_tpto: false,
                chk_emp: false,
                chk_old: false
                //DATA HERE
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {       
                this.$loading(true);
                $("body").css({ 'cursor': 'wait' });
                
                this._vueGETfromParam(
                    'lcp_locator',
                    'fetch_loc_categories',
                    { },
                    response1 => {
                        this.categories = response1;
                        if (this.$popup_params[0].mode === 0) {
                            this.$loading(false);
                            $("body").css({ 'cursor': 'default' });
                        }
                        else {
                            this._vueGETfromParam(
                                'lcp_locator',
                                'fetch_locators',
                                { id: this.$popup_params[0].id },
                                response2 => {
                                    this.txt_name = response2[0].name;
                                    this.txt_sname = response2[0].short_name;
                                    this.cmb_category = response2[0].locators_category_id;
                                    this.cmb_type = response2[0].type;
                                    this.txt_addr = response2[0].address;
                                    this.chk_tpto = response2[0].allowTptoExhb === '1';
                                    this.chk_emp = response2[0].allowEmpReport === '1';
                                    this.chk_old = response2[0].old_loc === '1';
                                    try {
                                        JSON.parse(response2[0].landline_no).forEach(x => {
                                            this.addLandline(x, true);
                                        });
                                        JSON.parse(response2[0].mobile_no).forEach(x => {
                                            this.addMobile(x, true);
                                        });
                                    } 
                                    catch { }

                                    this.$loading(false);
                                    $("body").css({ 'cursor': 'default' });
                                }
                            );
                        }
                    }
                );
            },
            modalClose(){
                this._closePopup(); 
                if (this.added) {
                    this.$loading(true);
                    this.$router.go(0);
                }
            },
            updateLocator() {
                if (this.txt_name === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_name"]').text() + '` cannot be blank!'
                    });
                    $('#txt_name').select();
                    return;
                }
                
                if (this.cmb_category === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="cmb_category"]').text() + '` cannot be blank!'
                    });
                    $('#cmb_category').select();
                    return;
                }
                
                if (this.cmb_type === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="cmb_type"]').text() + '` cannot be blank!'
                    });
                    $('#cmb_type').select();
                    return;
                }
                
                if (this.txt_sname === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_sname"]').text() + '` cannot be blank!'
                    });
                    $('#txt_sname').select();
                    return;
                }
                
                if (this.txt_addr === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_addr"]').text() + '` cannot be blank!'
                    });
                    $('#txt_addr').select();
                    return;
                }
                
                var tmpmobile = [];
                this.cpnos.forEach(x => {
                    tmpmobile.push(x.number);
                });
                var tmplandline = [];
                this.telnos.forEach(x => {
                    tmplandline.push(x.number);
                });

                            this._runCallback(0, {
                                name: this.txt_name,
                                address: this.txt_addr,
                                category_id: this.cmb_category,
                                mobile: tmpmobile,
                                land: tmplandline
                            });
                            this._closePopup();
                            return;
                this._vuePATCH('lcp_locator',
                    this.$popup_params[0].id,
                    {
                        type: 'update_locator',
                        data: {
                            date_inactive: this.d_inactive
                        }
                    }, 
                    response => {
                        if (response === 'success') {
                            this.showSuccessMsg({
                                title: 'Success!',
                                message: 'Locator updated!'
                            });
                            this._runCallback(0, {
                                name: this.txt_name,
                                address: this.txt_addr,
                                category_id: this.cmb_category,
                                mobile: this.cpnos,
                                land: this.telnos
                            });
                            this._closePopup();
                        }
                        else
                            this.$alert("Error! " + JSON.stringify(response));
                    }
                );
            },
            addLocator() {
                if (this.txt_name === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_name"]').text() + '` cannot be blank!'
                    });
                    $('#txt_name').select();
                    return;
                }
                
                if (this.cmb_category === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="cmb_category"]').text() + '` cannot be blank!'
                    });
                    $('#cmb_category').select();
                    return;
                }
                
                if (this.cmb_type === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="cmb_type"]').text() + '` cannot be blank!'
                    });
                    $('#cmb_type').select();
                    return;
                }
                
                if (this.txt_sname === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_sname"]').text() + '` cannot be blank!'
                    });
                    $('#txt_sname').select();
                    return;
                }
                
                if (this.txt_addr === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_addr"]').text() + '` cannot be blank!'
                    });
                    $('#txt_addr').select();
                    return;
                }

                this._vuePOST(
                    'lcp_locator', 
                    {
                        type: "save_locator", //3
                        data: {
                            name:  this.txt_sname.trim(),
                            short_name: this.txt_sname.trim(),
                            locators_category_id: this.cmb_category,
                            type: this.cmb_type,
                            address: this.txt_addr.trim(),
                            mobile_no: this.listToArr(this.cpnos),
                            landline_no: this.listToArr(this.telnos),
                            allowTptoExhb: (this.chk_tpto ? 1 : 0),
                            allowEmpReport: (this.chk_emp ? 1 : 0),
                            old_loc: (this.chk_old ? 1 : 0),
                        }
                    }, 
                    response => {
                        if (response === 'success')
                            this.$fire({
                                title: "Success!",
                                text: "Locator successfully added!",
                                type: "success",
                                timer: 3000
                            }).then(r => {
                                this.$loading(false);
                                this.clearInput();
                                this.added = true;
                            });
                        else
                            console.log(JSON.stringify(response));
                    }
                );
            },
            clearInput() {
                this.txt_name = "";
                this.txt_sname = "";
                this.cmb_category = "";
                this.cmb_type = "walk-in";
                this.txt_addr = "";
                this.chk_tpto = false;
                this.chk_emp = false;
                this.chk_old = false;
                $('#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>    