<template>
    <div ref="main" class="git-div-container disp-style-col" style="overflow: hidden">
        <!--PLACE DESIGN HTML HERE-->
        <div>
            <h3>Locators</h3>
            <span @click="_addPopup('modal_loc_mgmt_loc', { mode: 0 })" style="margin-left: auto; font-size: 32px; float: right"><i class="git-btn-fa git-btn-success fa fa-user-plus"></i></span>
        </div>
        <Paginator :dataValue="locators" 
            :dispCols="displayedCols" 
            :srchFields="['name']"
            :rowItemProp="customRow"
            :tableStyle="'table table-frozen-th table-hover table-fa-icon'"
            :colHeaders="[
                { header: 'Name', style: 'min-width: 260px' },
                { header: 'Category', style: 'width: 220px' },
                { header: 'Address', style: 'width: 300px' },
                { header: 'Landline No.', style: 'width: 110px' },
                { header: 'Mobile No.', style: 'width: 110px' },
                { header: 'Status', style: 'width: 140px' }
            ]" 
            :actions="actions">
        </Paginator>
    </div>
</template>
<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                //DATA HERE
                txt_search: '',
                txt_year: '',
                locators: [],
                loc_cat: [],
                actions:  {
                    data: [
                        {
                            class: "git-btn-fa git-btn-success disp-style-row div-act-btn",
                            FAicon: "fa-solid fa-eye",
                            click: (row) => { this._addPopup('modal_loc_cred', { id: row.id, ent: row.name }) },
                        },
                        {
                            class: "git-btn-fa git-btn-info disp-style-row div-act-btn",
                            FAicon: "fa-solid fa-pen-to-square",
                            click: (row) => { this._addPopup('modal_loc_mgmt_loc', { mode: 1, id: row.id }, result => { runCallback(result, row.id); } ) }
                        },
                        {
                            class: "git-btn-fa git-btn-warn disp-style-row div-act-btn",
                            FAicon: "fa-solid fa-ban",
                            click: (row) => { this.setInactive(row.id); }
                        },
                        {
                            class: "git-btn-fa git-btn-danger disp-style-row div-act-btn",
                            FAicon: "fa-solid fa-trash-can",
                            click: (row) => { this.deleteItem(row.id); }  
                        }
                    ]
                },
                customRow: [
                    {
                        colname: 'mobile_no',
                        type: 'REG', //TYPES. REG: NORMAL COLUMN, PIC: WITH CLICKABLE PHOTO THUMBNAIL, DOC: WITH DOCUMENT VIEWING
                        style: 'margin-top: 3px; text-align: center; white-space: pre-line',
                        custVal: (data, colname) => {
                            return this._jsonToStrList(data.mobile_no).trim();
                        }
                    },
                    {
                        colname: 'landline_no',
                        type: 'REG', //TYPES. REG: NORMAL COLUMN, PIC: WITH CLICKABLE PHOTO THUMBNAIL, DOC: WITH DOCUMENT VIEWING
                        style: 'margin-top: 3px; text-align: center; white-space: pre-line',
                        custVal: (data, colname) => {
                            return this._jsonToStrList(data.landline_no).trim();
                        }
                    },
                    {
                        colname: 'date_inactive',
                        type: 'REG', //TYPES. REG: NORMAL COLUMN, PIC: WITH CLICKABLE PHOTO THUMBNAIL, DOC: WITH DOCUMENT VIEWING
                        style: (data, colname) => {
                            return "white-space: pre-line; text-align: center; font-weight: bold; " + (data.date_inactive !== null ? "color: #F9A825" : "color: #2E7D32");
                        },
                        custVal: (data, colname) => {
                            return (data.date_inactive !== null ? "INACTIVE\nSINCE: " + data.date_inactive : "ACTIVE");
                        }
                    }
                ],
                displayedCols: ["name", "category_desc", "address", "landline_no", "mobile_no", "date_inactive"]
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            customDTP(date) {
                return moment(date).format('YYYY');
            },
            reorderGroup(sortCol = 0) {
                if (this.sortCol != sortCol)
                    this.order_locators_asc = true;
                else
                    this.order_locators_asc = !this.order_locators_asc;
                this.sortCol = sortCol;
            },
            changeLimit() { //ENTRIES ALGORITHM
                this.limit = parseInt($('#cmb_entries').val());
                this.selectedIndex = this.limit;
                this.totaldisp = (this.ceil > this.totalitems ? this.totalitems : this.ceil);
                this.page = Math.ceil(this.totalitems / this.limit);
                this.ceil = this.limit;
                this.floor = 0;
                this.currpage = 1;
            },
            setInactive(id) {
                this._addPopup('modal_loc_set_inactive', { id: id }, 
                    result => { this.runCallback(result, id); } 
                );
            },
            runCallback(result, id) {
                if (result.d_inactive !== null && result.d_inactive !== "" && typeof result.d_inactive !== 'undefined') 
                    this.locators.find(x => x.id === id).date_inactive = result.d_inactive;
                else 
                    this.locators.find(x => x.id === id).date_inactive = null;
                if (result.name !== null && result.name !== "" && typeof result.name !== 'undefined')
                    this.locators.find(x => x.id === id).name = result.name;
                if (result.address !== null && result.address !== "" && typeof result.address !== 'undefined')
                    this.locators.find(x => x.id === id).address = result.address;
                if (result.category_id !== null && result.category_id !== "" && typeof result.category_id !== 'undefined')
                    this.locators.find(x => x.id === id).category_desc = this.loc_cat.find(x => x.value === result.category_id).text;
                if (result.land !== null && result.land !== "" && typeof result.land !== 'undefined')
                    this.locators.find(x => x.id === id).landline_no = result.land;
                if (result.mobile !== null && result.mobile !== "" && typeof result.mobile !== 'undefined')
                    this.locators.find(x => x.id === id).mobile_no = result.mobile;
            },
            movePage(next = false, prev = false, to = -1) { //MOVE PAGE ALGORITHM
                if (next && this.ceil < this.totalitems) {
                    this.floor += this.limit;
                    this.ceil += this.limit;
                    this.currpage++;
                }
                else if (prev && this.floor > 0) {
                    this.floor -= this.limit;
                    this.ceil -= this.limit;
                    this.currpage--;
                }
                else if (to > 0) {
                    this.floor = (to * this.limit) - this.limit;
                    this.ceil = (to * this.limit);
                    this.currpage = to;
                }
            },
            loadData() {
                this.$loading(true);
                $("body").css({ 'cursor': 'wait' });
                
                this._vueGETfromParam(
                    'lcp_locator',
                    'fetch_locators',
                    { },
                    response1 => {
                        this.locators = response1;
                        this.totalitems = this.locators.length;
                        this.page = Math.ceil(this.totalitems / this.limit);
                        this.ceil = this.limit;
                        this.floor = 0;
                        this.currpage = 1;
                        
                        this._vueGETfromParam(
                            'lcp_locator',
                            'fetch_loc_categories',
                            { },
                            response2 => {
                                this.loc_cat = response2;
                                this.$loading(false);
                                $("body").css({ 'cursor': 'default' });
                            }
                        );
                    }
                );
            },
            deleteItem(id) {
                this.$confirm("Are you sure you want to delete `" + this.locators.find(data => data.id === id).name + "`?",
                    "Confirm",
                    "warning").then(r => {
                        this._vueObjDelete(
                            'lcp_locator',
                            {
                                func: 'locator', 
                                id: id 
                            },
                            response => {
                                if (response === 'success') {
                                    this.locators = this._softDelete(this.locators, id);
                                    this.showSuccessMsg({
                                        title: 'Success!',
                                        message: 'Locator deleted!'
                                    });
                                }
                            }
                        );
                    }
                );
            }
        }
    }
</script>
<style lang="css" scoped>
    .div-act-btn {
        max-width: 190px; 
        width: fit-content;
        margin-bottom: 4px;
    }
    .div-act-btn i {
        height: 20px;
        padding: 4px 0 0 4px;
    }
    .td-completed td:nth-child(7) {
        color: #43A047;
    }
    .td-pending {
        background: radial-gradient(circle, rgba(129,199,132,1) 0%, rgba(156,204,101,1) 100%) !important;
        background-size: 500% 500% !important;
        animation: gradient 10s ease infinite !important;
    }
    .td-pending td:nth-child(7) {
        color: #1565C0;
    }
    .td-pending-jhmc td:nth-child(7) {
        color: #1565C0;
    }
</style>    