<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">Annual Inspection</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>Annual Inspection 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-' + ( status_id === '9' ? 'success' : 'info')">{{ status }}</a></td>
                                    </tr>
                                    <tr>
                                        <td><i>Date Created</i></td>
                                        <td>{{ date_created }}</td>
                                    </tr>
                                    <tr v-for="data in annual_ins" :key="data.grpID">
                                        <td><i>{{ data.type }}</i></td>
                                        <td>{{ data.annualins_no }}</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-bolt nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Electrical Engineer 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-money-bill nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Electrical Fees</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(4)">
                                        <i class="fa-solid fa-money-bills  nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Mechanical Fees</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(5)">
                                        <i class="fa-solid fa-file-invoice-dollar nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Total Fees</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(6)">
                                        <i class="fa-solid fa-check nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Approval History</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 class="div-tbl-docs sc5">
                            <table class="table table-sm table-striped tbl-req">
                                <thead>
                                    <tr>
                                        <th>REQUIREMENT</th>
                                        <th>FILE UPLOADED</th>
                                        <th>DATE UPLOADED</th>
                                        <th>VALIDITY</th>
                                        <th>REMARKS HISTORY</th>
                                        <th>UPDATE STATUS</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="data in ins_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="faFile(data.file_uploaded)" aria-hidden="true"></i></span></td>
                                        <td>{{ data.updated_at | formatMMMMddyyyhhmmtt }}</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>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                //DATA HERE
                date_created: "",
                application_no: "",
                status: "",
                status_id: "",
                annual_ins: [],
                eng_details: [],
                pay_details: [],
                app_hist: [],
                ins_req: []
            }
        },
        mounted() {
            this.$loading(true);
            
            this._vueGETfromParam(
                'obo_annual',
                'fetch_annual_ins_details',
                { id: this.$popup_params[0].id },
                response => {
                    this.annual_ins = response;
                    this.date_created = response[0].created_at;
                    this.date_created = moment(this._strIFKeyExists(response[0], 'created_at')).format('MMMM DD, YYYY h:mm A');
                    this.application_no = response[0].application_no;
                    this.status = response[0].status;
                    this.status_id = response[0].status_id;
                    this._vueGETfromParam(
                        'obo_annual',
                        'fetch_engineer_det',
                        { id: this.$popup_params[0].id },
                        response => {
                            this.eng_details = response;
                            this._vueGETfromParam(
                                'obo_annual',
                                'fetch_ins_total_det',
                                { id: this.$popup_params[0].id },
                                response => {
                                    this.pay_details = response;
                                    this._vueGETfromParam(
                                        'obo_annual',
                                        'fetch_ins_app_hist',
                                        { id: this.$popup_params[0].id },
                                        response => {
                                            this.app_hist = response;
                                            this._vueGETfromParam(
                                                'obo_annual',
                                                'fetch_ins_req',
                                                { id: this.$popup_params[0].id },
                                                response => {
                                                    this.ins_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: '+=250px'
                    }, 400);
                }
                else {
                    $('#btn_appl_detail')
                        .removeClass('fa-angle-down').addClass('fa-angle-down');
                    $(".div-details-collapse").animate({
                        height: '-=250px'
                    }, 400);
                }
            },
            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 = '';
                    try {
                        var tmp = JSON.parse(this.eng_details.landline_no);

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

                        tmp = JSON.parse(this.eng_details.mobile_no);

                        for (var i = 0; i < tmp.length; i++)
                            if (tmp[i].trim() !== '')
                                    mobileNos += tmp[i] + ", ";
                                
                        mobileNos = mobileNos.substring(0, mobileNos.length - 2);
                    } catch { }


                    $('#h4_detail_title').html('Locator Details');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Locator Name</td>
                            <td>` + this.eng_details.name + `</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + this.eng_details.address + `</td>
                        </tr>
                        <tr>
                            <td>Contact Person</td>
                            <td>` + this.eng_details.contact_person + `</td>
                        </tr>
                        <tr>
                            <td>Contact Number</td>
                            <td>` + mobileNos + `</td>
                        </tr>
                    `);
                }
                else if (index === 1) {
                    var engr = JSON.parse(this.eng_details.elec_details);

                    $('#h4_detail_title').html('Electrical Engineer Details');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Name of Engineer</td>
                            <td>` + this._strIFStrExists(engr[0]) + `</td>
                        </tr>
                        <tr>
                            <td>Phone Number</td>
                            <td>` + this._strIFStrExists(engr[1]) + `</td>
                        </tr>
                        <tr>
                            <td>PRC Reg. No.</td>
                            <td>` + this._strIFStrExists(engr[2]) + `</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + this._strIFStrExists(engr[3]) + `</td>
                        </tr>
                        <tr>
                            <td>PTR No</td>
                            <td>` + this._strIFStrExists(engr[4]) + `</td>
                        </tr>
                    `);
                }
                else if (index === 2) {
                    var engr = JSON.parse(this.eng_details.mech_details);

                    $('#h4_detail_title').html('Mechanical Engineer Details');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Name of Engineer</td>
                            <td>` + this._strIFStrExists(engr[0]) + `</td>
                        </tr>
                        <tr>
                            <td>Phone Number</td>
                            <td>` + this._strIFStrExists(engr[1]) + `</td>
                        </tr>
                        <tr>
                            <td>PRC Reg. No.</td>
                            <td>` + this._strIFStrExists(engr[2]) + `</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + this._strIFStrExists(engr[3]) + `</td>
                        </tr>
                        <tr>
                            <td>PTR No</td>
                            <td>` + this._strIFStrExists(engr[4]) + `</td>
                        </tr>
                    `);
                }
                else if (index === 3) {
                    var electfee = JSON.parse(this.eng_details.elecfees_details);

                    var total = 0;
                    var outputTD = '';

                    if (electfee[0].length > 0) {
                        for (var i = 0; i < electfee[0].length; i++) {
                            var tmppay = -1;
                            try { 
                                tmppay = parseFloat(this._strIFStrExists(electfee[1][i]));
                            } catch {}

                            if (tmppay >= 0) {
                                total += tmppay;
                                outputTD += 
                                `<tr>
                                    <td>` + this._strIFStrExists(electfee[0][i]) + `</td>
                                    <td style="text-align: right">₱ ` + Number(tmppay).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                                </tr>`;
                            }
                        }
                    }

                    $('#h4_detail_title').html('Electrical Fees');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td><b>OR NO.</b></td>
                            <td>` + this._strIFStrExists(this.eng_details.or_no) + `</td>
                        </tr>
                        <tr>
                            <td><b>Date of Assesment</b></td>
                            <td>` + moment(this._strIFKeyExists(this.eng_details, 'date_asses')).format('MMMM DD, YYYY h:mm A') + `</td>
                        </tr>
                        <tr>
                            <td><b>Date Paid</b></td>
                            <td>` +  moment(this._strIFKeyExists(this.eng_details, 'date_paid')).format('MMMM DD, YYYY h:mm A') + `</td>
                        </tr>
                        <tr>
                            <td colspan="2"><b>Assessment of Fees</b></td>
                        </tr>`
                        + outputTD +
                        `<tr>
                            <td><b>Total</b></td>
                            <td style="text-align: right">₱ ` + Number(total).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                        </tr>
                    `);
                }
                else if (index === 4) {
                    var electfee = JSON.parse(this.eng_details.mechfees_details);

                    var total = 0;
                    var outputTD = '';

                    if (electfee[0].length > 0) {
                        for (var i = 0; i < electfee[0].length; i++) {
                            var tmppay = -1;
                            try { 
                                tmppay = parseFloat(this._strIFStrExists(electfee[1][i]));
                            } catch {}

                            if (tmppay >= 0) {
                                total += tmppay;
                                outputTD += 
                                `<tr>
                                    <td>` + this._strIFStrExists(electfee[0][i]) + `</td>
                                    <td style="text-align: right">₱ ` + Number(tmppay).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                                </tr>`;
                            }
                        }
                    }

                    $('#h4_detail_title').html('Mechanical Fees');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td><b>OR NO.</b></td>
                            <td>` + this._strIFStrExists(this.eng_details.or_no) + `</td>
                        </tr>
                        <tr>
                            <td><b>Date of Assesment</b></td>
                            <td>` + moment(this._strIFKeyExists(this.eng_details, 'date_asses')).format('MMMM DD, YYYY h:mm A') + `</td>
                        </tr>
                        <tr>
                            <td><b>Date Paid</b></td>
                            <td>` +  moment(this._strIFKeyExists(this.eng_details, 'date_paid')).format('MMMM DD, YYYY h:mm A') + `</td>
                        </tr>
                        <tr>
                            <td colspan="2"><b>Assessment of Fees</b></td>
                        </tr>`
                        + outputTD +
                        `<tr>
                            <td><b>Total</b></td>
                            <td style="text-align: right">₱ ` + Number(total).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                        </tr>
                    `);
                }
                else if (index === 5) {
                    var total = 0;
                    var outputTD = '';

                    if (this.pay_details.length > 0) {
                        for (var i = 0; i < this.pay_details.length; i++) {
                            var tmppay = -1;
                            try { 
                                tmppay = parseFloat(this._strIFStrExists(this.pay_details[i].amount));
                            } catch {}

                            if (tmppay >= 0) {
                                total += tmppay;
                                outputTD += 
                                `<tr>
                                    <td>` + this._strIFStrExists(this.pay_details[i].fee_type) + `</td>
                                    <td style="text-align: right">₱ ` + Number(tmppay).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                                </tr>`;
                            }
                        }
                    }

                    $('#h4_detail_title').html('Total Fees');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td><b>OR NO.</b></td>
                            <td>` + this._strIFStrExists(this.eng_details.or_no) + `</td>
                        </tr>
                        <tr>
                            <td><b>Date of Assesment</b></td>
                            <td>` + moment(this._strIFKeyExists(this.eng_details, 'date_asses')).format('MMMM DD, YYYY h:mm A') + `</td>
                        </tr>
                        <tr>
                            <td><b>Date Paid</b></td>
                            <td>` +  moment(this._strIFKeyExists(this.eng_details, 'date_paid')).format('MMMM DD, YYYY h:mm A') + `</td>
                        </tr>
                        <tr>
                            <td colspan="2"><b>Assessment of Fees</b></td>
                        </tr>`
                        + outputTD +
                        `<tr>
                            <td><b>Total</b></td>
                            <td style="text-align: right">₱ ` + Number(total).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                        </tr>
                    `);
                }
                else if (index === 6) {
                    var outputTD = '';

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

                    $('#h4_detail_title').html('Approval History');
                    $('#thead_details').html(`
                        <tr>
                            <th>Status</th>
                            <th>Approved</th>
                        </tr>
                    `);
                    $('#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;
            },
            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;
            }
        },
        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: 280px;
        max-height: 240px;
        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(4){
        color: #33691E;
    }
    .tbl-tr-valid td:nth-child(2) svg {
        vertical-align: middle;
    }
    .tbl-tr-na td:nth-child(1), .tbl-tr-na td:nth-child(3) {
        color: #616161;
    }
</style>    