<template>
    <div class="git-div-container disp-style-col sc5">
        <!--PLACE DESIGN HTML HERE-->
        <h3>Building Permit</h3>
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                <div class="disp-style-row" style="margin-top: 10px">
                    <p style="margin-top: 2px !important"><b>Year&nbsp;</b></p>
                    <datepicker :format="customDTP" minimum-view="year" v-model="txt_year" style="text-align: center !important"></datepicker>
                    &nbsp;
                    <button class="git-btn" @click="loadData()">Show</button>
                </div>
                <div class="disp-style-row" style="margin-top: 10px">
                    <p>
                        Show 
                        <select id="cmb_entries" @change="changeLimit()">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        Entries
                    </p>
                    <label style="margin-left: auto">Search:&nbsp;<input v-model="txt_search" type="search" @change="changeLimit()"></label>
                </div>
            </div>
            <table class="table table-frozen-th table-hover table-fa-icon">
                <thead>
                <tr>
                    <th style="width: 60px"></th>
                    <th style="width: fill-content" @click="reorderGroup(0)">Name</th>
                    <th style="width: 320px" @click="reorderGroup(1)">Status</th>
                    <th style="width: 320px">Permit No.</th>
                </tr>
                </thead>
                <tbody>
                    <tr :class="styleStatus(data.bldg_status_id)" @click="clickExpand(data.id)" :id="'tr_expand_' + data.id" v-for="data in orderedApplicants" :key="data.id" style="cursor: pointer">
                        <td style="text-align: center">
                            <i :id="'btn_expand_' + data.id" class="git-btn-table git-btn-info fa-solid fa-circle-plus" style="font-size: 23px" aria-hidden="true"></i>
                        </td>
                        <td><div style="margin-top: 3px">{{ data.name }}</div>
                            <div style="display: none" class="disp-style-col" v-show="data.showdetails === 1">
                                <p><b>Location of Construction: </b>{{ data.location_constr }}<br>
                                <b>Location of Construction: </b>{{ data.created_at | formatDate }}</p>
                                <div @click="_addPopup('modal_bldg_permit_details', { id: data.id })" class="git-btn git-btn-success disp-style-row div-act-btn">View&nbsp;<i class="fa-solid fa-eye" aria-hidden="true"></i></div> 
                                <div @click="cancelApplication(data.id)" class="git-btn git-btn-danger disp-style-row div-act-btn" v-show="data.bldg_status_id !== '9'">Cancel Application&nbsp;<i class="fa-solid fa-times-circle" aria-hidden="true"></i></div> 
                            </div></td>
                        <td><h5 style="margin: 4px 0 0 0 !important"><b>{{ data.status_description }}</b></h5></td>
                        <td>{{ data.ugrp_description }}</td>
                    </tr>
                </tbody>
            </table>
            <div class="disp-style-row" style="margin-top: 10px">
                <label>Showing {{ (this.totalitems > 0 ? this.floor + 1 : 0) }} to {{ this.totaldisp }} out of {{ this.totalitems }} entries</label>
                <div style="disp-style-row; margin-left: auto" class="div-pages">
                    <button class="git-btn" @click="movePage(false, true)">Prev</button>
                    <select @change="movePage(false, false, $event.target.value)">
                        <option v-for="index in this.page" :key="index" :id="'btn_page' + index" :selected="index === currpage">{{index}}</option>
                    </select>
                    <button class="git-btn" @click="movePage(true)">Next</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                //DATA HERE
                order_applicants_asc: true,
                txt_search: '',
                txt_year: '',
                bldg_applicants: [],
                floor: 0, //FOR PAGE ALGORITHM
                ceil: 10, //FOR PAGE ALGORITHM
                limit: 10, //FOR PAGE ALGORITHM
                totalitems: 0, //FOR PAGE ALGORITHM
                totaldisp: 10, //FOR PAGE ALGORITHM
                currpage: 1, //FOR PAGE ALGORITHM
                page: 0, //FOR PAGE ALGORITHM
                sortCol: 0 //FOR SORTING ALGORITHM
            }
        },
        mounted() {
            this.txt_year = moment().year() + "-01-01";
            this.$loading(true);
            $("body").css({ 'cursor': 'wait' });
            
            this._vueGETfromParam(
                'obo_building',
                'fetch_bldg_permits',
                { year: this.txt_year },
                response => {
                    this.bldg_applicants = response;
                    this.totalitems = this.bldg_applicants.length;
                    this.page = Math.ceil(this.totalitems / this.limit);
                    this.$loading(false);
                    $("body").css({ 'cursor': 'default' });
                }
            );
        },
        computed: {
            orderedApplicants: function () { //FOR SORTING
                this.bldg_applicants.forEach(data => {
                    data.showdetails = 0;
                });
                var tmpAppl = this.bldg_applicants.filter((d) => {
                    if (this.txt_search !== '') {
                        var match = false;
                        if (d.location_constr !== null && d.location_constr !== '' && d.location_constr !== undefined) {
                            if (match = d.location_constr.toString().toLowerCase().includes(this.txt_search.toLowerCase().trim()))
                                return match;
                        }
                        if (match = d.name.toLowerCase().includes(this.txt_search.toLowerCase()))
                            return match;
                    }
                    else return true;
                });

                this.limit = (typeof $('#cmb_entries').val() === 'undefined' ? 10 : parseInt($('#cmb_entries').val()));
                this.totalitems = tmpAppl.length;
                this.totaldisp = (this.ceil > this.totalitems ? this.totalitems : this.ceil);

                tmpAppl = this.ceil ? tmpAppl.slice(this.floor, this.ceil) : tmpAppl;
                var sorting = 'name';

                if (this.sortCol === 0)
                    sorting = 'name';
                else if (this.sortCol === 1)
                    sorting = 'status_description';

                return _.orderBy(tmpAppl, sorting, (this.order_applicants_asc ? 'asc' : 'desc'));
            }
        },
        methods: {
            customDTP(date) {
                return moment(date).format('YYYY');
            },
            reorderGroup(sortCol = 0) {
                if (this.sortCol != sortCol)
                    this.order_applicants_asc = true;
                else
                    this.order_applicants_asc = !this.order_applicants_asc;
                this.sortCol = sortCol;
            },
            changeLimit() { //ENTRIES ALGORITHM
                this.limit = parseInt($('#cmb_entries').val());
                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;
            },
            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;
                }
            },
            clickExpand(id) {
                var det = this.bldg_applicants.find(i => i.id === id).showdetails;
                $('#btn_expand_' + id)
                    .addClass((det === 0 ? 'fa-circle-minus' : 'fa-circle-plus')).removeClass((det === 1 ? 'fa-circle-minus' : 'fa-circle-plus'))
                    .addClass((det === 1 ? 'git-btn-info' : 'git-btn-danger')).removeClass((det === 0 ? 'git-btn-info' : 'git-btn-danger'));
                this.bldg_applicants.find(i => i.id === id).showdetails = (det === 1 ? 0 : 1);
            },
            deleteItem(id) {
                this.$confirm("Are you sure you want to delete `" + this.bldg_applicants.find(data => data.id === id).ucrd_realname + "`?",
                    "Confirm",
                    "warning").then(r => {
                        this._vueDelete(
                            'user_credentials',
                            id,
                            response => {
                                if (response === 'success') {
                                    this.bldg_applicants = this._softDelete(this.bldg_applicants, id);
                                    this.showSuccessMsg({
                                        title: 'Success!',
                                        message: 'Item deleted!'
                                    });
                                }
                            }
                        );
                    }
                );
            },
            loadData() {
                this.$loading(true);
                $("body").css({ 'cursor': 'wait' });
                this.bldg_applicants = [];

                this._vueGETfromParam(
                    'obo_building',
                    'fetch_bldg_permits',
                    { year: this.txt_year },
                    response => {
                        this.bldg_applicants = response;
                        this.totalitems = this.bldg_applicants.length;
                        this.page = Math.ceil(this.totalitems / this.limit);
                        this.ceil = this.limit;
                        this.floor = 0;
                        this.currpage = 1;
                        this.$loading(false);
                        $("body").css({ 'cursor': 'default' });
                    }
                );
            },
            styleStatus(rowid) {
                var id = parseInt(rowid);
                var output = '';
                if (id === 9)
                    output = 'tr-completed';
                else if (id === 1)
                    output = 'tr-pending';
                else if (id === 11 || id === 3)
                    output = 'tr-pending-jhmc';
                return output;
            },
            cancelApplication(id) {
                var name = this.bldg_applicants.find(d => d.id === id).name;
                this.$loading(true);
                $("body").css({ 'cursor': 'wait' });
                this._vueGETfromParam(
                    'obo_building',
                    'cancel_bldg_application',
                    { id: id },
                    response => {
                        if (response === 'success') {
                            this.bldg_applicants = this._softDelete(this.bldg_applicants, id);
                            this.totalitems = this.bldg_applicants.length;
                            this.page = Math.ceil(this.totalitems / this.limit);
                            this.showSuccessMsg({
                                title: 'Success!',
                                message: 'Canceled ' + name + '\'s application!'
                            });
                            this.$loading(false);
                            $("body").css({ 'cursor': 'default' });
                        }
                    }
                );
            } 
        }
    }
</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;
    }
    .tr-completed h5 {
        color: #43A047;
    }
    .tr-pending {
        background: radial-gradient(circle, rgba(129,199,132,1) 0%, rgba(156,204,101,1) 100%);
        background-size: 500% 500%;
        animation: gradient 10s ease infinite;
    }
    .tr-pending h5 {
        color: #1565C0;
    }
    .tr-pending-jhmc h5 {
        color: #1565C0;
    }
</style>    