<template>
    <div class="disp-center popup-vue-fit-xlg" style="overflow: hidden; width: 620px; height: fit-content"><!--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 Details</h2>
            <hr style="margin: 10px 0"> 
            <div class="disp-style-col">
                <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="occ_detail.bldg_status_id === '9'">
                    <i class="fa-solid fa-check" style="font-size: 46px" aria-hidden="true"></i>
                    <h2>COMPLETED ({{ occ_detail.bldg_no }})</h2>
                </div>
                <div class="div-tbl-docs sc5" style="overflow: auto; max-height: 560px">
                    <table style="font-size: 18px !important; width: 100%">
                        <tr>
                            <td colspan="2"><b>Locator Details</b></td>
                        </tr>
                        <tr>
                            <td style="width: 240px"><i>Locator Name</i></td>
                            <td style="width: fill-">{{ occ_detail.name }}</td>
                        </tr>
                        <tr>
                            <td><i>Address</i></td>
                            <td>{{ occ_detail.address }}</td>
                        </tr>
                        <tr>
                            <td><i>Contact Number</i></td>
                            <td>{{ occ_detail.mobile_no }}</td>
                        </tr>
                        <tr>
                            <td colspan="2" style="vertical-align: bottom; height: 40px"><b>Building Permit Application Details</b></td>
                        </tr>
                        <tr>
                            <td><i>Status</i></td>
                            <td style="text-align: center"><a :class="'git-lbl git-lbl-' + (occ_detail.bldg_status_id === '9' ? 'success' : 'info')">{{ occ_detail.status_description }}</a></td>
                        </tr>
                        <tr>
                            <td><i>Project Description</i></td>
                            <td style="text-align: center">{{ occ_detail.bldg_desc }}</td>
                        </tr>
                        <tr>
                            <td><i>Project Cost</i></td>
                            <td style="text-align: center">{{ _formatToPeso(occ_detail.est_cost) }}</td>
                        </tr>
                        <tr>
                            <td><i>Date Created</i></td>
                            <td style="text-align: center">{{ occ_detail.created_at }}</td>
                        </tr>
                        <tr>
                            <td><i>Building Permit</i></td>
                            <td style="text-align: center">
                                <button class="git-btn" v-show="bldgPermits[0]" @click="_showImage(0)" style="font-size: 16px">Front Page</button>
                                <button class="git-btn" v-show="bldgPermits[1]" @click="_showImage(1)" style="font-size: 16px">Back Page</button>
                            </td>
                        </tr>
                        <tr>
                            <td><i>Bldg Permit No.</i></td>
                            <td style="text-align: center">{{ occ_detail.created_at }}</td>
                        </tr>
                        <tr>
                            <td><i>Date Approved</i></td>
                            <td style="text-align: center">{{ occ_detail.date_approved }}</td>
                        </tr>
                        <tr>
                            <td><i>Remarks</i></td>
                            <td style="text-align: center"></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="vertical-align: bottom; height: 40px"><b>Invoice Details</b></td>
                        </tr>
                        <tr>
                            <td><i>Official Receipt No.</i></td>
                            <td style="text-align: center">{{ occ_detail.or_no }}</td>
                        </tr>
                        <tr>
                            <td><i>Date Paid</i></td>
                            <td style="text-align: center">{{ occ_detail.date_payment }}</td>
                        </tr>
                        <tr style="border-top: 1px solid black">
                            <td><b>Total Amount Paid</b></td>
                            <td style="text-align: center">{{ _formatToPeso(occ_detail.transaction_fee) }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //DATA HERE
                occ_detail: [],
                bldgPermits: []
            }
        },
        mounted() {
            this.$loading(true);
            this._vueGETfromParam(
                'obo_occupancy',
                'fetch_occ_bldg_permit',
                { id: this.$popup_params[0].id },
                response => {
                    this.occ_detail = response;
                    this.bldgPermits = JSON.parse(response.bldgpermit_path);
                    for (var i = 0; i < this.bldgPermits.length; i++) {
                        this._addImage(this.bldgPermits[i]);
                    }
                    this.$loading(false);
                }
            );
        },
        methods: {
        }
    }
</script>
<style lang="css" scoped>

</style>    