<template>
    <div class="disp-center popup-vue-xlg" style="width: 95%; height: 670px"><!--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">Occupancy Permit Details</h2>
            <hr style="margin: 10px 0"> 
            <div class="popup-vue-body-xlg sc5">
                <div class="disp-style-row" style="width: 100%">
                    <div class="disp-style-col" style="max-width: 520px; width: 520px; min-width: 520px">
                        <div class="disp-style-col git-div-border" style="width: 100%; max-height: 560px">
                            <div class="disp-style-row">
                                <h4>Occupancy Application Details</h4>
                                <span @click="expandDetails()"  style="margin-left: auto; font-size: 38px; cursor: pointer">
                                    <i id="btn_appl_detail" class="fa-solid fa-angle-up" aria-hidden="true"></i>
                                </span>
                            </div>
                            <div class="div-details-collapse">
                                <table class="tbl-bldg-details">
                                    <tr>
                                        <td><i>Status</i></td>
                                        <td><a :class="'git-lbl git-lbl-' + (occ_app_detail.status_id === '9' ? 'success' : 'info')">{{ occ_app_detail.status }}</a></td>
                                    </tr>
                                    <tr>
                                        <td><i>Building Permit</i></td>
                                        <td><a @click="_addPopup('modal_bldg_permit', { })">View Building Permit Application Details</a></td>
                                    </tr>
                                    <tr>
                                        <td><i>Ocuupancy Permit No.</i></td>
                                        <td>{{ occ_app_detail.occupancy_no }}</td>
                                    </tr>
                                    <tr v-show="occ_app_detail.approved_at">
                                        <td><i>Date Approved</i></td>
                                        <td>{{ occ_app_detail.approved_at | formatMMMMddyyyhhmmtt }}</td>
                                    </tr>
                                    <tr v-show="occ_app_detail.created_at">
                                        <td><i>Date Created</i></td>
                                        <td>{{ occ_app_detail.created_at | formatMMMMddyyyhhmmtt }}</td>
                                    </tr>
                                    <tr v-show="occ_app_detail.actual_cost">
                                        <td><i>Actual Cost</i></td>
                                        <td>{{ _formatToPeso(occ_app_detail.actual_cost) }}</td>
                                    </tr>
                                    <tr>
                                        <td><i>Type</i></td>
                                        <td>{{ occ_app_detail.occup_type }}</td>
                                    </tr>
                                    <tr v-show="occ_app_detail.inspection_path">
                                        <td><i>Final Inspection Report</i></td>
                                        <td><a @click.prevent="_openInNewTab(occ_app_detail.inspection_path)">{{ fileName(occ_app_detail.inspection_path) }}</a></td>
                                    </tr>
                                    <tr v-show="occ_app_detail.fsic_path">
                                        <td><i>Fire and Safety Inspection Certificate</i></td>
                                        <td><a @click.prevent="_openInNewTab(occ_app_detail.fsic_path)">{{ fileName(occ_app_detail.fsic_path) }}</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="disp-style-row git-div-border" style="margin-top: 8px; width: 100%">
                            <div class="disp-style-col div-nav-oth">
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(0)">
                                        <i class=" fa-solid fa-user nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Locator/Applicants Details</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(1)">
                                        <i class=" fa-solid fa-circle-check nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Approval History</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(2)">
                                        <i class=" fa-solid fa-money-bill-1-wave nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Invoice Details</span>
                                </div>
                            </div>
                            <div class="div-detail-contents">
                                <div class="disp-style-col" style="width: 100%; oveflow: hidden">
                                    <div class="disp-style-row">
                                        <h4 id="h4_detail_title">Locator Details</h4>
                                    </div>
                                    <div class="sc5" style="max-height: 450px; overflow: auto">
                                        <table class="table table-sm table-striped">
                                            <thead id="thead_details">
                                            </thead>
                                            <tbody id="tbody_details">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="disp-style-col; git-div-border" style="margin-left: 8px">
                        <div style="text-align: center; min-height: 50px; text-align: center; justify-content: center" class="disp-style-row git-lbl git-lbl-success git-bg-grad-anim-green" v-show="false">
                            <i class="fa-solid fa-check" style="font-size: 46px" aria-hidden="true"></i>
                            <h2>COMPLETED ({{ "" }})</h2>
                        </div>
                        <div class="div-tbl-docs sc5">
                            <div style="width: 100%" class="disp-style-col">
                                <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 tbl-req">
                                <thead>
                                <tr>
                                    <th style="width: fill-content">Requirement</th>
                                    <th style="width: 100px">File Uploaded</th>
                                    <th style="width: 160px" @click="reorderGroup(1)">Status</th>
                                    <th style="width: 240px">Remarks History</th>
                                    <th style="width: 180px">Date Checked</th>
                                    <th style="width: 60px" v-show="hasInvalid"></th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr :class="styleStatus(data.status_id)" v-for="data in orderedRequirements" :key="data.id" style="cursor: pointer">
                                        <td><b>{{ data.requirement }}</b></td>
                                        <td><span v-show="data.isValid === '1'" style="font-size: 28px" @click.prevent="_openInNewTab(data.file_uploaded)"><i :class="faFile(data.file_uploaded)" aria-hidden="true"></i></span></td>
                                        <td>
                                            <div class="disp-style-col">
                                                <div class="disp-style-row">
                                                    <div :id="'icon_' + data.id" style="display: contents"><i :class="classValidation(data.status_id)" aria-hidden="true" style="font-size: 18px"></i></div>
                                                    <b>{{ data.status }}</b>
                                                </div>
                                                <b style="font-size: 12px !important">{{ (data.status_remarks !== null && data.status_id === '2' ? 'Remarks: ' + data.status_remarks : '') }}</b>
                                            </div>
                                        </td>
                                        <td>{{ (data.date_remarks !== null ? 'Remarks (' + data.date_remarks + '): ' : '') }}<b>{{ data.remarks }}</b></td>
                                        <td>{{ data.date_checked }}</td>
                                        <td v-show="hasInvalid">
                                            <div class="disp-style-col">
                                                <span @click="clickValid(data.id)" v-show="data.status_id !== '1'">
                                                    <i class="git-btn-table git-btn-success fa fa-check" aria-hidden="true"></i>
                                                </span> 
                                                <span @click="clickInvalid(data.id)" v-show="data.status_id !== '2'">
                                                    <i class="git-btn-table git-btn-warn fa fa-x" aria-hidden="true"></i>
                                                </span> 
                                                <span @click="clickNA(data.id)" v-show="data.status_id !== '3'">
                                                    <i class="git-btn-table git-btn-info fa fa-ban" aria-hidden="true"></i>
                                                </span> 
                                            </div>
                                        </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>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                //DATA HERE
                occ_app_detail: [],
                occ_app_locator: [],
                occ_app_hist: [],
                occ_app_invoice: [],
                occ_req_detail: [],
                txt_search: "",
                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
                div_coll_height: 0,
                hasInvalid: false
            }
        },
        mounted() {
            this.id = this.$popup_params[0].id;
            this.$loading(true);
            
            this._vueGETfromParam(
                'obo_occupancy',
                'fetch_occ_details',
                { id: this.$popup_params[0].id },
                response => {
                    this.occ_app_detail = response;
                    this._vueGETfromParam(
                        'obo_occupancy',
                        'fetch_occ_locator',
                        { id: this.$popup_params[0].id },
                        response => {
                            this.occ_app_locator = response;
                            this._vueGETfromParam(
                                'obo_occupancy',
                                'fetch_occ_approval',
                                { id: this.$popup_params[0].id },
                                response => {
                                    this.occ_app_hist = response;
                                    this._vueGETfromParam(
                                        'obo_occupancy',
                                        'fetch_occ_invoice',
                                        { id: this.$popup_params[0].id },
                                        response => {
                                            this.occ_app_invoice = response;
                                            this._vueGETfromParam(
                                                'obo_occupancy',
                                                'fetch_occ_requirements',
                                                { id: this.$popup_params[0].id },
                                                response => {
                                                    this.occ_req_detail = response;
                                                    this.totalitems = this.occ_req_detail.length;
                                                    try{ this.hasInvalid = this.occ_req_detail.find(d => { if (d.status_id === '2') return true }).id  !== '' } catch {}
                                                    this.page = Math.ceil(this.totalitems / this.limit);
                                                    this.ceil = this.limit;
                                                    this.floor = 0;
                                                    this.currpage = 1;
                                                    this.$loading(false);
                                                    this.clickDetail(0);
                                                }
                                            );
                                        }
                                    );
                                }
                            );
                        }
                    );
                }
            );

        },
        computed: {
            orderedRequirements: function () { //FOR SORTING
                var searchFields = ['requirement', 'status_remarks', 'status', 'remarks', 'file_uploaded'];

                var tmpAppl = this.occ_req_detail.filter((d) => {
                    if (this.txt_search !== '') {
                        var match = false;
                        for (var x = 0; x < searchFields.length; x++) {
                            if (d[searchFields[x]] !== null && d[searchFields[x]] !== '' && d[searchFields[x]] !== undefined) {
                                if (match = d[searchFields[x]].toString().toLowerCase().includes(this.txt_search.toLowerCase().trim()))
                                    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 = 'orderid';
                if (this.sortCol === 1)
                    sorting = 'status_id';

                return _.orderBy(tmpAppl, sorting, (this.order_occu_req ? 'asc' : 'desc'));
            }
        },
        methods: {
            reorderGroup(sortCol = 0) {
                if (this.sortCol != sortCol)
                    this.order_occu_req = true;
                else
                    this.order_occu_req = !this.order_occu_req;
                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;
                }
            },
            expandDetails() {
                if ($('.div-details-collapse').height() < 160) {
                    $('#btn_appl_detail')
                        .removeClass('fa-angle-down').addClass('fa-angle-up');
                    $(".div-details-collapse").animate({
                        height: '+=' + parseInt(380 + (this.div_coll_height * 0.2)) + 'px'
                    }, 600);
                }
                else {
                    if (this.div_coll_height === 0) {
                        this.div_coll_height = $('.div-details-collapse').height();
                        $('.div-details-collapse').css('max-height', this.div_coll_height + 'px');
                    }

                    $('#btn_appl_detail')
                        .removeClass('fa-angle-down').addClass('fa-angle-down');
                    $(".div-details-collapse").animate({
                        height: '-=' + parseInt(380 + (this.div_coll_height * 0.2)) + 'px'
                    }, 600);
                }
            },
            addAppHist(title, condition, dstart, dapprove, approved) {
                var output = '';
                if (condition)
                    output = 
                    `<tr>
                        <td>` + title + `</td>
                        <td>` + (approved === 1 ? 'Approved' : (approved !== null ? 'Pending' : '')) + `</td>
                        <td>` + moment(this._strIFStrExists(dstart)).format('MMMM DD, YYYY h:mm A') + `</td>
                        <td>` + (approved === 1 ? moment(this._strIFStrExists(dapprove)).format('MMMM DD, YYYY h:mm A') : '') + `</td>
                    </tr>`;
                return output;
            },
            clickDetail (index) {
                $('.div-nav-oth svg').removeClass('div-nav-oth-active');
                $('.div-nav-oth div:nth-child(' + (index + 1) + ') svg').addClass('div-nav-oth-active');

                if (index === 0) {
                    var mobileNos = '';
                    var tmp = JSON.parse(this.occ_app_locator.mobile_no);

                    for (var i = 0; i < tmp.length; i++)
                            mobileNos += tmp[i] + ", ";

                    mobileNos = mobileNos.substring(0, mobileNos.length - 2);

                    $('#h4_detail_title').html('Locator Details');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Locator Name</td>
                            <td>` + this.occ_app_locator.name + `</td>
                        </tr>
                        <tr>
                            <td>Name of Applicant</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + this.occ_app_locator.address + `</td>
                        </tr>
                        <tr>
                            <td>Contact Number</td>
                            <td>` + mobileNos + `</td>
                        </tr>
                    `);
                }
                else if (index === 1) {
                    var outputTD = '';

                    for (var i = 0; i < this.occ_app_hist.length; i++) {
                        if (this._strIFStrExists(this.occ_app_hist[i].approval) !== '') {
                            outputTD += 
                            `<tr>
                                <td><i>` + this._strIFStrExists(this.occ_app_hist[i].approval) + `</i></td>
                                <td>` + this._strIFStrExists(this.occ_app_hist[i].status) + `</td>
                                <td>` + moment(this._strIFKeyExists(this.occ_app_hist[i], 'date_approved')).format('MMMM DD, YYYY h:mm A') + `</td>
                            </tr>`;
                        }
                    }

                    $('#h4_detail_title').html('Approval History');
                    $('#thead_details').html(`
                        <tr>
                            <th>Approval</th>
                            <th>Status</th>
                            <th>Date Approved</th>
                        </tr>
                    `);
                    $('#tbody_details').html(outputTD);
                }
                else if (index === 2) {
                    var outputTD = '';
                    if (this.occ_app_invoice.length > 0) {
                        var total = 0;
                        for (var i = 0; i < this.occ_app_invoice.length; i++) {
                            try { total += parseFloat(this._strIFKeyExists(this.occ_app_invoice[i], 'amount')); } catch {}
                            outputTD += 
                            `<tr>
                                <td><i>` + this._strIFKeyExists(this.occ_app_invoice[i], 'fee_type') + `</i></td>
                                <td style="text-align: right">` + this._formatToPeso(this._strIFKeyExists(this.occ_app_invoice[i], 'amount')) + `</td>
                            </tr>`;
                        }

                        $('#h4_detail_title').html('Invoice Details');
                        $('#thead_details').html('');
                        $('#tbody_details').html(`
                            <tr>
                                <td><i>Official Receipt No.</i></td>
                                <td>` + this._strIFKeyExists(this.occ_app_invoice[0], 'or_no') + `</td>
                            </tr>
                            <tr>
                                <td><i>Date of Assesment</i></td>
                                <td>` + moment(this._strIFKeyExists(this.occ_app_invoice[0], 'created_at')).format('MMMM DD, YYYY') + `</td>
                            </tr>
                            <tr>
                                <td><i>Date Paid</i></td>
                                <td>` + moment(this._strIFKeyExists(this.occ_app_invoice[0], 'updated_at')).format('MMMM DD, YYYY') + `</td>
                            </tr>
                            <tr><td colspan="2"><h4>Assesment Details</h4></td></tr>
                            ` + 
                            outputTD + 
                            `
                            <tr>
                                <td><h4>Total</h4></td>
                                <td style="vertical-align: middle; text-align: right"><b>` + this._formatToPeso(total) + `</b></td>
                            </tr>
                            `);
                    }
                    else {
                    $('#h4_detail_title').html('Approval History');
                    $('#thead_details').html(``);
                    $('#tbody_details').html(outputTD);
                    }
                }
            },
            req_remarks(updated_at, remarks, mode = 0) {
                var output = '';
                if (remarks !== null && remarks !== '')
                    output = mode === 0 ? 'Remarks (' + moment(this._strIFStrExists(updated_at)).format('MMMM DD, YYYY h:mm A') + '): ' : remarks;

                return output;
            },
            fileName(path) {
                if (path !== null && path !== '' && path !== undefined) {
                    var tmp = path.split('/');
                    return tmp[tmp.length - 1];
                }
                else 
                    return "";
            },
            styleStatus(reqid) {
                var id = parseInt(reqid);
                var output = '';
                if (id === 1)
                    output = 'td-completed';
                else if (id === 3)
                    output = 'td-na';
                else if (id === 2)
                    output = 'td-invalid';
                else
                    output = 'td-pending-jhmc';
                return output;
            },
            faFile(fileNmae) {
                var output = "";
                try {
                    var tmp = fileNmae.split('.');
                    if (tmp[tmp.length - 1] !== "pdf")
                        output = 'fa-solid fa-file-image';
                    else
                        output = 'fa-solid fa-file-pdf';
                } catch { }

                return output;
            },
            clickValid(id) {
                this.$confirm(
                    "Confirm this as VALID?",
                    "Confirm",
                    "warning").then(r => {
                        this._vuePATCH('obo_occupancy',
                            id,
                            {
                                remarks: ''
                            }, response => {
                                if (response === 'success') {
                                    this.$fire({
                                        title: "Done!",
                                        text: "Requirement is now Valid",
                                        type: "success",
                                        timer: 3000
                                    }).then(r => {
                                        this.changeStat(id, 1);
                                        this.$loading(false);
                                    });
                                }
                                else
                                    this.$alert("Error! " + JSON.stringify(response));
                            }
                        , 'changestat_1');
                    }
                );
            },
            clickInvalid(id) {
                this.$prompt(
                    "Enter remarks for INVALID file uploaded",
                    "",
                    "Confirm",
                    "warning").then((text) => {
                        this.$loading(true);
                        this._vuePATCH('obo_occupancy',
                            id,
                            {
                                remarks: text
                            }, response => {
                                if (response === 'success') {
                                    this.$fire({
                                        title: "Done!",
                                        text: "Requirement is now Invalid",
                                        type: "success",
                                        timer: 3000
                                    }).then(r => {
                                        this.changeStat(id, 2, text);
                                        this.$loading(false);
                                    });
                                }
                                else
                                    this.$alert("Error! " + JSON.stringify(response));
                            }
                        , 'changestat_2');
                });
            },
            clickNA(id) {
                this.$confirm(
                    "Confirm this as NOT APPLICABLE?",
                    "Confirm",
                    "warning").then(r => {
                        this._vuePATCH('obo_occupancy',
                            id,
                            {
                                remarks: ''
                            }, response => {
                                if (response === 'success') {
                                    this.$fire({
                                        title: "Done!",
                                        text: "Requirement is now not Applicable",
                                        type: "success",
                                        timer: 3000
                                    }).then(r => {
                                        this.changeStat(id, 3);
                                        this.$loading(false);
                                    });
                                }
                                else
                                    this.$alert("Error! " + JSON.stringify(response));
                            }
                        , 'changestat_3');
                    }
                );
            },
            changeStat(id, statid, remarks = "") {
                this.occ_req_detail.find(x => x.id === id).status_id = statid.toString();
                this.occ_req_detail.find(x => x.id === id).status = (statid === 1 ? 'VALID' : (statid === 2 ? 'INVALID' : (statid === 3 ? 'NOT APPLICABLE' : 'PENDING')));
                if (statid === 2)
                    this.occ_req_detail.find(x => x.id === id).status_remarks = remarks;
                this.occ_req_detail.find(x => x.id === id).date_checked = moment(new Date($.now())).format('MMMM DD, YYYY h:mm A');
                if (statid === 1)
                    $("#icon_" + id ).html(`<svg aria-hidden="true" class="svg-inline--fa fa-check" style="font-size: 18px;" focusable="false" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path></svg>`);
                else if (statid === 2)
                    $("#icon_" + id ).html(`<svg aria-hidden="true" class="svg-inline--fa fa-x" style="font-size: 18px;" focusable="false" data-prefix="fas" data-icon="x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M376.6 427.5c11.31 13.58 9.484 33.75-4.094 45.06c-5.984 4.984-13.25 7.422-20.47 7.422c-9.172 0-18.27-3.922-24.59-11.52L192 305.1l-135.4 162.5c-6.328 7.594-15.42 11.52-24.59 11.52c-7.219 0-14.48-2.438-20.47-7.422c-13.58-11.31-15.41-31.48-4.094-45.06l142.9-171.5L7.422 84.5C-3.891 70.92-2.063 50.75 11.52 39.44c13.56-11.34 33.73-9.516 45.06 4.094L192 206l135.4-162.5c11.3-13.58 31.48-15.42 45.06-4.094c13.58 11.31 15.41 31.48 4.094 45.06l-142.9 171.5L376.6 427.5z"></path></svg>`);
                else if (statid === 3)
                    $("#icon_" + id ).html(`<svg aria-hidden="true" class="svg-inline--fa fa-ban" style="font-size: 18px;" focusable="false" data-prefix="fas" data-icon="ban" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM99.5 144.8C77.15 176.1 64 214.5 64 256C64 362 149.1 448 256 448C297.5 448 335.9 434.9 367.2 412.5L99.5 144.8zM448 256C448 149.1 362 64 256 64C214.5 64 176.1 77.15 144.8 99.5L412.5 367.2C434.9 335.9 448 297.5 448 256V256z"></path></svg>`);
                else
                    $("#icon_" + id ).html(``);
            },
            classValidation(id) {
                var statid = id.toString();
                return (statid === '1' ? 'fa-solid fa-check' : (statid === '2' ? 'fa-solid fa-x' : (statid === '3' ? 'fa-solid fa-ban' : '')));
            }
        },
        created() {
        },
    }
</script>
<style lang="css" scoped>
    #btn_appl_detail {
        float: right;
    }
    .nav-circle {
        border-radius: 20px;
        background-color: #263238;
    }
    .tbl-bldg-details {
        font-size: 16px !important;
        border-collapse: collapse;
        width: 100%;
    }
    .tbl-bldg-details tr { 
        border-top: 1px solid #BDBDBD;
        height: 40px;
    }
    .tbl-bldg-details td:nth-child(2) {
        text-align: center !important;
    }
    .div-details-collapse {
        height: fit-content;
        overflow: hidden;
    }
    .div-nav-oth {
        width: 60px;
        background-color: #78909C;
    }
    .div-nav-oth svg {
        width: 50px;
        padding: 8px 0;
        margin: 18px 5px;
        text-align: center;
        color: #FAFAFA;
        border-radius: 100px;
        height: 34px;
        cursor: pointer;
    }
    .div-nav-oth-active {
        background-color: #1976D2 !important;
    }
    .div-detail-contents {
        width: 100%;
        height: 100%;
        background-color: #EEEEEE;
        padding: 4px;
    }
    .div-tbl-docs {
        margin: 0 8px;
        max-height: 560px;
        overflow: auto;
    }
    .tbl-req td {
        vertical-align: middle;
        border: 1px solid #607D8B;
    }
    .tbl-req td:nth-child(2) svg {
        cursor: pointer;
        place-content: center;
    }
    .tbl-req td:nth-child(3) svg {
        place-self: start;
    }
    .tbl-req td:nth-child(2) {
        text-align: center !important;
    }
    .tbl-req td:nth-child(3) div {
        place-content: center;
    }
    .tbl-req td:nth-child(2) svg {
        color: #C62828;
    }
    .tbl-req th {
        text-align: center;
    }
    .tbl-bldg-details a:hover {
        cursor: pointer;
        color: #1976D2;
    }
    .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(3), .td-pending td:nth-child(1) {
        color: #1565C0;
    }
    .td-pending-jhmc td:nth-child(3), .td-pending-jhmc td:nth-child(1) {
        color: #1565C0;
    }
    .td-completed td:nth-child(3), .td-completed td:nth-child(1) {
        color: #2E7D32;
    }
    .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(3), .td-pending td:nth-child(1) {
        color: #1565C0;
    }
    .td-pending-jhmc td:nth-child(3), .td-pending-jhmc td:nth-child(1) {
        color: #1565C0;
    }
    .td-invalid td:nth-child(1), .td-invalid td:nth-child(3) {
        color: #B71C1C;
    }
    .td-na td:nth-child(1) {
        color: #B71C1C;
    }
    .td-na td:nth-child(3) {
        color: #616161;
    }
    .git-btn-table {
        margin: 2px 0;
        min-height: 36px;
    }
</style>    