<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">Building Permit</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>Building Permit 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-' + (bldg_permit.bldg_status_id === '9' ? 'success' : 'info')">{{ bldg_permit.status_description }}</a></td>
                                    </tr>
                                    <tr>
                                        <td><i>Date Created</i></td>
                                        <td>{{ bldg_permit.created_at | formatMMMMddyyyhhmmtt }}</td>
                                    </tr>
                                    <tr>
                                        <td><i>Bldg Permit No.</i></td>
                                        <td>{{ bldg_permit.bldg_no }}</td>
                                    </tr>
                                    <tr>
                                        <td><i>Date Approved</i></td>
                                        <td>{{ bldg_permit.approved_at | formatMMMMddyyyhhmmtt }}</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-building nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Building Details</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(2)">
                                        <i class=" fa-solid fa-wrench nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Engineer/Architect Details</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(3)">
                                        <i class=" fa-solid fa-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(4)">
                                        <i class=" fa-solid fa-money-bill 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="bldg_permit.bldg_status_id === '9'">
                            <i class="fa-solid fa-check" style="font-size: 46px" aria-hidden="true"></i>
                            <h2>COMPLETED ({{ bldg_permit.bldg_no }})</h2>
                        </div>
                        <div class="div-tbl-docs sc5">
                            <table class="table table-sm table-striped tbl-req">
                                <thead>
                                    <tr>
                                        <th>REQUIREMENT</th>
                                        <th>FILE UPLOADED</th>
                                        <th>STATUS</th>
                                        <th>REMARKS HISTORY</th>
                                        <th>PERMIT NO</th>
                                        <th>APPLICATION NO</th>
                                        <th>DATE CHECKED</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="data in bldg_app_req" :key="data.id" :class="(data.isValid === '1' ? 'tbl-tr-valid' : 'tbl-tr-na')">
                                        <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="fa-solid fa-file-pdf" aria-hidden="true"></i></span></td>
                                        <td><div class="disp-style-row"><i :class="'fa-solid fa-' + (data.isValid === '1' ? 'check' : 'ban')" aria-hidden="true" style="font-size: 20px"></i><b>{{ data.isValid === '1' ? 'VALID' : 'NOT APPLICABLE' }}</b></div></td>
                                        <td><p>{{ req_remarks(data.updated_at, data.remarks) }}<b>{{ req_remarks(data.updated_at, data.remarks, 1) }}</b></p></td>
                                        <td></td>
                                        <td></td>
                                        <td>{{ data.updated_at | formatMMMMddyyyhhmmtt }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                //DATA HERE
                bldg_permit: [],
                bldg_app_hist: [],
                bldg_app_cost: [],
                bldg_issue_pay: [],
                bldg_invoice: [],
                bldg_app_req: []
            }
        },
        mounted() {
            this.$loading(true);
            
            this._vueGETfromParam(
                'obo_building',
                'fetch_bldg_permit_detail',
                { id: this.$popup_params[0].id },
                response => {
                    this.bldg_permit = response;
                    this._vueGETfromParam(
                        'obo_building',
                        'fetch_bldg_approval_detail',
                        { id: this.$popup_params[0].id },
                        response => {
                            this.bldg_app_hist = response;
                            this._vueGETfromParam(
                                'obo_building',
                                'fetch_bldg_issuance_pay',
                                { id: this.$popup_params[0].id },
                                response => {
                                    this.bldg_issue_pay = response;
                                    this._vueGETfromParam(
                                        'obo_building',
                                        'fetch_invoice_details',
                                        { id: this.$popup_params[0].id },
                                        response => {
                                            this.bldg_invoice = response;
                                            this._vueGETfromParam(
                                                'obo_building',
                                                'fetch_bldg_app_req',
                                                { id: this.$popup_params[0].id },
                                                response => {
                                                    this.bldg_app_req = response;
                                                    this.$loading(false);
                                                    this.clickDetail(0);
                                                }
                                            );
                                        }
                                    );
                                }
                            );
                        }
                    );
                }
            );
        },
        methods: {
            expandDetails() {
                if ($('.div-details-collapse').height() < 160) {
                    $('#btn_appl_detail')
                        .removeClass('fa-angle-down').addClass('fa-angle-up');
                    $(".div-details-collapse").animate({
                        height: '+=160px'
                    }, 400);
                }
                else {
                    $('#btn_appl_detail')
                        .removeClass('fa-angle-down').addClass('fa-angle-down');
                    $(".div-details-collapse").animate({
                        height: '-=160px'
                    }, 400);
                }
            },
            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.bldg_permit.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.bldg_permit.name + `</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + this.bldg_permit.address + `</td>
                        </tr>
                        <tr>
                            <td>Contact Number</td>
                            <td>` + mobileNos + `</td>
                        </tr>
                    `);
                }
                else if (index === 1) {
                    var bldg = JSON.parse(this.bldg_permit.bldg_det);
                    var floorarea = '';
                    var storeys = '';
                    var units = '';

                    if (bldg !== null) {
                        floorarea = this._strIFStrExists(bldg[0]);
                        storeys = this._strIFStrExists(bldg[1]);
                        units = this._strIFStrExists(bldg[2]);
                    }

                    $('#h4_detail_title').html('Building Permit Details');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Form of Ownership</td>
                            <td>` + this._strIFStrExists(this.bldg_permit.ownership_form) + `</td>
                        </tr>
                        <tr>
                            <td>Main Economic Activity/Kind Of Business	</td>
                            <td>` + this._strIFStrExists(this.bldg_permit.business_type) + `</td>
                        </tr>
                        <tr>
                            <td>Description</td>
                            <td>` + this._strIFStrExists(this.bldg_permit.bldg_desc) + `</td>
                        </tr>
                        <tr>
                            <td>Location of Construction</td>
                            <td>` + this._strIFStrExists(this.bldg_permit.location_constr) + `</td>
                        </tr>
                        <tr>
                            <td>Total Floor Area</td>
                            <td>` + floorarea + `</td>
                        </tr>
                        <tr>
                            <td><p>Estimate Project Cost<br>(PHP)&nbsp;<button class="git-btn git-btn-info">Edit</button></p></td>
                            <td>` + Number(this._strIFStrExists(this.bldg_permit.est_cost)).toLocaleString(undefined, { minimumFractionDigits: 2 }) + `</td>
                        </tr>
                        <tr>
                            <td>Date of Start of Construction</td>
                            <td>January 1, 1970</td>
                        </tr>
                        <tr>
                            <td>Date of Completion</td>
                            <td>January 1, 1970</td>
                        </tr>
                        <tr>
                            <td>No. of Storeys</td>
                            <td>` + storeys + `</td>
                        </tr>
                        <tr>
                            <td>No. of Units</td>
                            <td>` + units + `</td>
                        </tr>
                    `);
                }
                else if (index === 2) {
                    var headengr = JSON.parse(this.bldg_permit.headengr_det);

                    var archneng = '';
                    var numbr = '';
                    var prcno = '';
                    var addr = '';
                    var ptrno = '';
                    var prof = '';

                    if (headengr !== null) {
                        archneng = this._strIFStrExists(headengr[0]);
                        numbr = this._strIFStrExists(headengr[1]);
                        prcno = this._strIFStrExists(headengr[2]);
                        addr = this._strIFStrExists(headengr[3]);
                        ptrno = this._strIFStrExists(headengr[4]);
                        prof = this._strIFStrExists(headengr[5]);
                    }

                    $('#h4_detail_title').html('Architect / Civil Engineer Signed And Sealed Plans & Specifications');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Name of Architect/Engineer</td>
                            <td>` + archneng + `</td>
                        </tr>
                        <tr>
                            <td>Phone Number</td>
                            <td>` + numbr + `</td>
                        </tr>
                        <tr>
                            <td>PRC Reg No.</td>
                            <td>` + prcno + `</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + addr + `</td>
                        </tr>
                        <tr>
                            <td>PTR No.</td>
                            <td>` + ptrno + `</td>
                        </tr>
                        <tr>
                            <td>Profession</td>
                            <td>` + prof + `</td>
                        </tr>
                    `);
                }
                else if (index === 3) {
                    $('#h4_detail_title').html('Approval History');
                    if (this.bldg_app_hist.length !== 0) {
                        var arch_dapproved = this._strIFKeyExists(this.bldg_app_hist[0], 'date_approve');
                        var bo_dapproved = this._strIFKeyExists(this.bldg_app_hist[1], 'date_approve');
                        var cse_dapproved = this._strIFKeyExists(this.bldg_app_hist[2], 'date_approve');
                        var pce_dapproved = this._strIFKeyExists(this.bldg_app_hist[3], 'date_approve');

                        var arch_approved = this._strIFKeyExists(this.bldg_app_hist[0], 'isApproved');
                        var bo_approved = this._strIFKeyExists(this.bldg_app_hist[1], 'isApproved');
                        var cse_approved = this._strIFKeyExists(this.bldg_app_hist[2], 'isApproved');
                        var pce_approved = this._strIFKeyExists(this.bldg_app_hist[3], 'isApproved');

                        $('#thead_details').html(`
                            <tr>
                                <th>Approval</th>
                                <th>Status</th>
                                <th style="width: 120px">Date Start</th>
                                <th style="width: 120px">Date Approved</th>
                            </tr>
                        `);
                        $('#tbody_details').html(
                            `
                            <tr>
                                <td>OBO Secretary</td>
                                <td>Added Approval</td>
                                <td>` + moment(this._strIFStrExists(this.bldg_permit.cse_dstart)).format('MMMM DD, YYYY h:mm A') + `</td>
                                <td></td>
                            </tr>
                            ` +
                            this.addAppHist('Architect', arch_dapproved != '' && arch_approved !== null, this.bldg_permit.cse_dstart, arch_dapproved, arch_approved) + 
                            this.addAppHist('Civil/Structural Engineer', cse_dapproved != '' && cse_approved !== null, this.bldg_permit.cse_dstart, cse_dapproved, cse_approved) + 
                            this.addAppHist('President and CEO', pce_dapproved != '' && pce_approved !== null, this.bldg_permit.cse_dstart, pce_dapproved, pce_approved) + 
                            this.addAppHist('Building Official', bo_dapproved != '' && bo_approved !== null, this.bldg_permit.cse_dstart, bo_dapproved, bo_approved) + 
                            `
                            <tr>
                                <td>Application from Issuance to Payment</td>
                                <td></td>
                                <td>` + moment(this._strIFStrExists(this.bldg_issue_pay.date_payment)).format('MMMM DD, YYYY h:mm A') + `</td>
                                <td></td>
                            </tr>
                        `);
                    }
                    else {
                        $('#thead_details').html('');
                        $('#tbody_details').html(`<tr><td><h3>No Approval Available.</h3></td></tr>`);
                    }
                }
                else if (index === 4) {
                    var bdownAssesment = '';
                    var total = 0;

                    for (var i = 0; i < this.bldg_invoice.length; i++) {
                        bdownAssesment += 
                        `
                            <tr>
                                <td>` + this.bldg_invoice[i].fee_type + `</td>
                                <td>` + Number(this._strIFStrExists(this.bldg_invoice[i].amount)).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                            </tr>
                        `;
                        total += parseFloat(this.bldg_invoice[i].amount);
                    }

                    $('#h4_detail_title').html('Invoice Details');
                    $('#thead_details').html('');
                    if (this.bldg_invoice.length !== 0) {
                        $('#tbody_details').html(`
                            <tr>
                                <td>Official Receipt No.</td>
                                <td>` + this._strIFKeyExists(this.bldg_invoice[0], 'or_no') + `</td>
                            </tr>
                            <tr>
                                <td>Date Paid</td>
                                <td>` + moment(this._strIFKeyExists(this.bldg_invoice[0], 'date_payment')).format('MMMM DD, YYYY') + `</td>
                            </tr>
                            <tr>
                                <td>Date of Assessment</td>
                                <td>` + moment(String(this.bldg_invoice[0].jlt_created)).format('MMMM DD, YYYY') + `</td>
                            </tr>
                            <tr>
                                <td colspan="1"><h5>Assessment Details</h5></td>
                                <td></td>
                            </tr>`
                            + bdownAssesment +
                            `<tr>
                                <td colspan="1"><h5>Total</h5></td>
                                <td>` + Number(this._strIFStrExists(total)).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                            </tr>
                        `);
                    }
                    else 
                        $('#tbody_details').html('');
                }
            },
            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;
            }
        },
        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: 160px;
        max-height: 160px;
        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-tr-valid td:nth-child(1), .tbl-tr-valid td:nth-child(3) {
        color: #33691E;
    }
    .tbl-tr-na td:nth-child(1), .tbl-tr-na td:nth-child(3) {
        color: #616161;
    }
</style>    