<template>
    <div class="git-div-container disp-style-col">

        <h3>Add Building Permit Details</h3>
        <!--First Form-->
        <div style="width: 100%; margin-top: 10px;" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                <div class="disp-style-col">

                    <div class="disp-style-col">
                        <h5>Application Details</h5>
                        
                            <div class="col-xs-12 col-md-12" >
                                <label for="txt_locator1">Locator Name</label>
                                <div class="disp-style-row">
                                    <model-select :options="locators" v-model="txt_locator1" id="txt_locator1" placeholder="Select Locator" style="width: 720px">
                                    </model-select>&nbsp;
                                </div>
                            </div>
                        
                    </div>

                    <div class="disp-style-col">
                        <h5>Building Details</h5>
                        <div class="col-xs-12 col-md-12">
                            <label for="txt_loc_const">Location of Construction</label><br>
                            <input v-model="txt_loc_const" id="txt_loc_const" type="text" class="git-input input-lg" placeholder="Location of Construction">
                        </div>
                    </div>
                    
                    <div class="disp-style-row">
                        <div class="col-xs-6 col-md-6">
                            <label for="txt_app_no">Application No.</label><br>
                            <input v-model="txt_app_no" id="txt_app_no" type="text" class="git-input input-lg" placeholder="Application No.">
                        </div>
                        <div class="col-xs-6 col-md-6">
                            <label for="txt_d_created">Date Created</label><br>
                            <datepicker :format="customDTP" v-model="txt_d_created" id="txt_d_created" style="text-align: center !important"></datepicker>
                        </div>
                    </div>

                    <div class="disp-style-row">
                        <div class="col-xs-6 col-md-6">
                            <label for="txt_proj_desc">Project Description</label><br>
                            <input v-model="txt_proj_desc" id="txt_proj_desc" type="text" class="git-input input-lg" placeholder="Project Description">
                        </div>
                        <div class="col-xs-6 col-md-6">
                            <label for="txt_proj_cost">Project Cost</label><br>
                            <input v-model="txt_proj_cost" @keypress="_keypressDecimal($event)" id="txt_proj_cost" type="text" class="git-input input-lg" placeholder="Project Cost">
                        </div>
                    </div>

                    <div class="disp-style-row">
                        <div class="col-xs-12 col-md-12">
                            <label for="txt_bldg_per">Building Permit Number</label><br>
                            <input v-model="txt_bldg_per" id="txt_bldg_per" type="text" class="git-input input-lg" placeholder="Building Permit Number">
                        </div>
                    </div>

                    <div class="disp-style-col">
                        <div class="col-xs-12 col-md-12">
                            <label for="txt_d_req">Date of Requirements Completion</label><br>
                            <datepicker :format="customDTP" v-model="txt_d_req" id="txt_d_req" style="text-align: center !important"></datepicker>
                        </div>
                    </div>

                    <div class="disp-style-col">
                        <div class="col-xs-12 col-md-12">
                            <label for="txt_d_endorse">Date of PCEO Endorsement</label><br>
                            <datepicker :format="customDTP" v-model="txt_d_endorse" id="txt_d_endorse" style="text-align: center !important"></datepicker>
                        </div>
                    </div>

                    <div class="disp-style-col">
                        <div class="col-xs-12 col-md-12">
                            <label for="txt_joa">Date of JHEZ-OBO Approval</label><br>
                            <datepicker :format="customDTP" v-model="txt_joa" id="txt_joa" style="text-align: center !important"></datepicker>
                        </div>
                    </div>

                    <div class="disp-style-col">
                        <div class="col-xs-12 col-md-12">
                            <label for="txt_remarks">Remarks:</label><br>
                            <textarea v-model="txt_remarks" id="txt_remarks" type="text" class="git-input" placeholder="Remarks" required ></textarea>
                        </div>
                    </div>

                    <h5>OR Details</h5>
                    <div class="disp-style-row" style="padding-top:10px">
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_trans_fee1">Transaction Fee/Amount Paid</label><br>
                            <input v-model="txt_trans_fee1" @keypress="_keypressDecimal($event)" id="txt_trans_fee1" type="text" class="git-input input-lg" placeholder="Transaction Fee/Amount Paid">
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_orno">Official Receipt No.</label><br>
                            <input v-model="txt_orno" id="txt_orno" type="text" class="git-input input-lg" placeholder="Official Receipt No.">
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_d_paid">Date Paid</label><br>
                            <datepicker :format="customDTP" v-model="txt_d_paid" id="txt_d_paid" style="text-align: center !important"></datepicker>
                        </div>
                    </div>
                    <div class="disp-style-row">
                        <div class="col-xs-6 col-md-6">
                            <label for="txt_fpage">Front Page<br>
                                <input type="file" id="txt_fpage" accept="image/*" @change="handleFileUpload($event, 0)">
                            </label>
                        </div>
                        <div class="col-xs-6 col-md-6">
                            <label for="txt_bpage">Back pages<br>
                                <input type="file" id="txt_bpage" accept="image/*" @change="handleFileUpload($event, 1)">
                            </label>
                        </div>
                    </div>
                    <div class="disp-style-col" style="padding-top:20px; text-align:center">
                        <div class="col-xs-12 col-md-12">
                            <button @click.prevent="clickBldgPermit()" class="git-btn git-btn-success">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END FIRST FORM -->

        <!--SECOND FORM-->
        <h3 style="margin-top: 24px !important">Add Occupancy Permit Details</h3>
        <div style="width: 100%; margin-top: 10px" class="git-div-border">
            <div style="width: 100%" class="disp-style-col">
                <div class="pull-left">
                </div>
                <div class="disp-style-col">

                    <div class="disp-style-col">
                        <h5>Application Details</h5>
                        <div class="col-xs-12 col-md-12">
                            <label for="txt_locator2">Locator Name</label><br>
                            <div class="disp-style-row">
                                <model-select :options="locators" v-model="txt_locator2" id="txt_locator2" placeholder="Select Locator" style="width: 720px">
                                </model-select>&nbsp;
                            </div>
                        </div>
                    </div>

                    <h5>Occupancy Details</h5>
                    <div class="disp-style-row">
                        <div class="col-xs-4 col-md-4">
                            <label for="cmb_occup">Occupancy Type</label><br>
                            <select id="cmb_occup" style="width:100%" v-model="cmd_occup">
                                <option value="Full">Full</option>
                                <option value="Partial">Partial</option>
                            </select>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_d_asn">Date Assigned</label><br>
                            <datepicker :format="customDTP" v-model="txt_d_asn" id="txt_d_asn" style="text-align: center !important"></datepicker>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_occu_no1">Occupancy Number</label><br>
                            <input id="txt_occu_no1" type="text" v-model="txt_occu_no1" class="git-input input-lg" placeholder="Occupancy Number">
                        </div>
                    </div>

                    <h5>OR Details</h5>
                    <div class="disp-style-row">
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_trans_fee2">Transaction Fee/Amount Paid</label><br>
                            <input id="txt_trans_fee2" v-model="txt_trans_fee2" type="text" @keypress="_keypressDecimal($event)" class="git-input input-lg" placeholder="Transaction Fee/Amount Paid">
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_occu_orno">Official Receipt No.</label><br>
                            <input id="txt_occu_orno" type="text" v-model="txt_occu_orno" class="git-input input-lg" placeholder="Occupancy Number">
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_d_paid2">Data Approved</label><br>
                            <datepicker :format="customDTP" v-model="txt_d_paid2" id="txt_d_paid2" style="text-align: center !important"></datepicker>
                        </div>
                    </div>

                    <h5>Upload Certificate</h5>
                    <div class="disp-style-row">
                        <div class="col-xs-6 col-md-6">
                            <label for="txt_cert">Certificate</label><br>
                            <input id="txt_cert" type="file" @change="handleFileUpload($event)">
                        </div>
                    </div>

                    <div class="disp-style-col" style="padding-top:20px; text-align:center">
                        <div class="col-xs-12 col-md-12">
                            <button @click="clickOccuPermit()" class="git-btn git-btn-success">Submit</button>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- END SECOND FORM -->




    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                disabledDates: {
                    to: new Date(Date.now() - 8640000)
                },
                txt_loc_const: "",
                txt_app_no: "",
                txt_proj_desc: "",
                txt_proj_cost: "",
                txt_bldg_per: "",
                txt_joa: "",
                txt_remarks: "",
                txt_trans_fee1: "",
                txt_orno: "",
                txt_d_created: "",
                txt_d_req: "",
                txt_d_endorse: "",
                txt_d_paid: "",
                txt_fpage: "",
                txt_bpage: "",
                cmd_occup: "",
                txt_d_asn: "",
                txt_occu_no1: "",
                txt_trans_fee2: "",
                txt_d_paid2: "",
                txt_occu_orno: "",
                txt_cert: "",
                locators: [],
                txt_locator1: {
                    value: '',
                    text: ''
                },
                txt_locator2: {
                    value: '',
                    text: ''
                },
                file_cert: {},
                file_permitpages: [ {}, {} ],
                file_permitname: [ '', '' ]
            }
        },
        mounted() {                
            this.$loading(true);
            
            this._vueGETfromParam(
                'obo_excemption',
                'fetch_locators',
                { },
                response => {
                    this.locators = response;
                    this.$loading(false);
                }
            );

            $('.vdp-datepicker input').addClass('git-input input-lg');
        },
        computed: {
            
        },
        methods: {
            handleFileUpload(event, id = -1) {
                var filename = this._getFileName(event.target.id);
                if (id >= 0) { 
                    if (this.file_permitname.indexOf(filename) === -1) {
                        this.file_permitpages[id] = event.target.files[0];
                        this.file_permitname[id] = filename;
                    }
                    else {
                        $('#' + (id === 0 ? 'txt_fpage' : 'txt_bpage')).val('');
                        this.showErrorMsg({
                            title: 'Ooops!',
                            message: "You can't add the same file!"
                        });
                    }
                }
                else
                    this.file_cert = event.target.files[0];
            },
            customDTP(date) {
                return moment(date).format('YYYY-MM-DD');
            },
            clickBldgPermit() {
                this.txt_d_created = this.customDTP(this.txt_d_created);
                this.txt_d_paid = this.customDTP(this.txt_d_paid);
                this.txt_d_req = this.customDTP(this.txt_d_req);
                this.txt_d_endorse = this.customDTP(this.txt_d_endorse);

                var fileDIR = `modules\\obo\\bldg\\` + this.txt_locator1.value + `\\`;

                //ERROR TRAP FIRST!
                if (this.file_permitname.indexOf('') !== -1) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Please upload both front and back page!'
                    });
                    return;
                }

                if (this.txt_locator1.value === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_locator1"]').text() + '` cannot be blank!'
                    });
                    $('#txt_locator1').select();
                    return;
                }
                if (this.txt_loc_const === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_loc_const"]').text() + '` cannot be blank!'
                    });
                    $('#txt_loc_const').select();
                    return;
                }
                if (this.txt_app_no === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_app_no"]').text() + '` cannot be blank!'
                    });
                    $('#txt_app_no').select();
                    return;
                }
                if (this.txt_proj_desc === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_proj_desc"]').text() + '` cannot be blank!'
                    });
                    $('#txt_proj_desc').select();
                    return;
                }
                if (this.txt_proj_cost === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_proj_cost"]').text() + '` cannot be blank!'
                    });
                    $('#txt_proj_cost').select();
                    return;
                }
                if (this.txt_bldg_per === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_bldg_per"]').text() + '` cannot be blank!'
                    });
                    $('#txt_bldg_per').select();
                    return;
                }
                if (this.txt_joa === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_joa"]').text() + '` cannot be blank!'
                    });
                    $('#txt_joa').select();
                    return;
                }
                if (this.txt_remarks === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_remarks"]').text() + '` cannot be blank!'
                    });
                    $('#txt_remarks').select();
                    return;
                }
                if (this.txt_trans_fee1 === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_trans_fee1"]').text() + '` cannot be blank!'
                    });
                    $('#txt_trans_fee1').select();
                    return;
                }
                if (this.txt_orno === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_trans_fee1"]').text() + '` cannot be blank!'
                    });
                    $('#txt_orno').select();
                    return;
                }
                if (this.txt_d_created === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_d_created"]').text() + '` cannot be blank!'
                    });
                    $('#txt_d_created').select();
                    return;
                }
                if (this.txt_d_req === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_d_req"]').text() + '` cannot be blank!'
                    });
                    $('#txt_d_req').select();
                    return;
                }
                if (this.txt_d_endorse === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_d_endorse"]').text() + '` cannot be blank!'
                    });
                    $('#txt_d_endorse').select();
                    return;
                }
                if (this.txt_d_paid === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_d_paid"]').text() + '` cannot be blank!'
                    });
                    $('#txt_d_paid').select();
                    return;
                }
                if (this.txt_d_paid === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_d_paid"]').text() + '` cannot be blank!'
                    });
                    $('#txt_d_paid').select();
                    return;
                }
                if ($('#txt_fpage').get(0).files.length === 0) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Please choose front page!'
                    });
                    $('#txt_fpage').focus();
                    return;
                }
                if ($('#txt_bpage').get(0).files.length === 0) {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Please choose back page!'
                    });
                    $('#txt_bpage').focus();
                    return;
                }

                this.$loading(true);
                if (this.$cookies.get('uid').toString().length < 1)
                    this.$router.go(0);

                var dir = `modules\/obo\/bldg\/` + this.txt_locator1.value + `\/`;
                var path = `["` + dir + this._getFileName('txt_fpage') + `","` + dir + this._getFileName('txt_bpage') + `"]`;

                this._uploadFile(this.file_permitpages,
                    fileDIR,
                    res => {
                        this._vuePOST(
                            'obo_permits', 
                            {
                                type: "bldg_app", //3
                                data: {
                                    locator_id: this.txt_locator1.value,
                                    application_no: this.txt_app_no,
                                    bldg_status_id: 9,
                                    location_constr: this.txt_loc_const,
                                    remarks: this.txt_remarks,
                                    remarks_status: 1,
                                    bcda_status: 0,
                                    bldg_type: 'existing',
                                    bldg_desc: this.txt_proj_desc,
                                    bldgpermit_path: res,
                                    created_at: this.txt_d_created,
                                    updated_at: this.txt_d_created
                                }
                            }, 
                            response1 => {
                                this._vuePOST(
                                    'obo_permits', 
                                    {
                                        type: "bldg_trans", //6
                                        data: {
                                            transaction_id: this.txt_locator1.value,
                                            bldg_id: response1
                                        }
                                    }, 
                                    response2 => {
                                        
                                    }
                                );
                                this._vuePOST(
                                    'obo_permits', 
                                    {
                                        type: "proj_cost", //4
                                        data: {
                                            bldg_id: response1,
                                            est_cost: this.txt_proj_cost
                                        }
                                    }, 
                                    response2 => {
                                    }
                                );
                                this._vuePOST(
                                    'obo_permits', 
                                    {
                                        type: "bldg_valid", //5
                                        data: {
                                            bldg_id: response1,
                                            valid_from: this.txt_d_req,
                                            bldg_no: this.txt_bldg_per
                                        }
                                    }, 
                                    response2 => {
                                        
                                    }
                                );
                                this._vuePOST(
                                    'obo_permits', 
                                    {
                                        type: "loc_cash_pay", //2
                                        data: {
                                            locator_id: this.txt_locator1.value,
                                            transactions: '[""]',
                                            total_ammount: this.txt_trans_fee1,
                                            date_payment: this.txt_d_paid
                                        }
                                    }, 
                                    response2 => {
                                        this._vuePOST(
                                            'obo_permits', 
                                            {
                                                type: "loc_trans", //1
                                                data: {
                                                    locator_id: this.txt_locator1.value,
                                                    locator_userid: this.$cookies.get('uid'),
                                                    transaction_type: 'Building Permit',
                                                    transaction_fee: 0,
                                                    status: 'done',
                                                    payment_method: 'bank deposit',
                                                    control_no: this.txt_bldg_per,
                                                    transaction_fee: this.txt_trans_fee1,
                                                    cash_payment_id: response2,
                                                    or_no: this.txt_orno,
                                                    remarks: this.txt_remarks
                                                }
                                            }, 
                                            response3 => {
                                            }
                                        );
                                    }
                                );
                                this._vuePOST(
                                    'obo_permits', 
                                    {
                                        type: "bldg_req", //7
                                        data: {
                                            application_id: response1,
                                            created_at: this.txt_d_req,
                                            updated_at: this.txt_d_req,
                                            app_requirement_id: 1,
                                            file_uploaded: '',
                                            isValid: 1,
                                        }
                                    }, 
                                    response4 => {
                                        
                                    }
                                );
                                this._vuePOST(
                                    'obo_permits', 
                                    {
                                        type: "bldg_appr", //8
                                        data: {
                                            bldg_id: response1,
                                            approval_id: 16,
                                            isApproved: 0,
                                        }
                                    }, 
                                    response4 => {
                                        setTimeout(() => {
                                            this.$fire({
                                                title: "Success!",
                                                text: "Permit uccessfully added!",
                                                type: "success",
                                                timer: 3000
                                            }).then(r => {
                                                this.$loading(false);
                                                this.clearInput(0);
                                            });
                                        }, 1000);
                                    }
                                );
                            }
                        );
                    }
                );
            },
            clickOccuPermit() {
                //ERROR TRAP FIRST!
                if ($('#txt_cert').val() === '') {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Please upload certificate!'
                    });
                    return;
                }
                
                if (this.txt_locator2.value === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_locator2"]').text() + '` cannot be blank!'
                    });
                    $('#txt_locator2').select();
                    return;
                }

                if (this.cmb_occup === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="cmb_occup"]').text() + '` cannot be blank!'
                    });
                    $('#cmb_occup').select();
                    return;
                }

                if (this.txt_trans_fee2 === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_trans_fee2"]').text() + '` cannot be blank!'
                    });
                    $('#txt_trans_fee2').select();
                    return;
                }

                if (this.txt_d_asn === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_d_asn"]').text() + '` cannot be blank!'
                    });
                    $('#txt_d_asn').select();
                    return;
                }

                if (this.txt_occu_no1 === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_occu_no1"]').text() + '` cannot be blank!'
                    });
                    $('#txt_occu_no1').select();
                    return;
                }

                if (this.txt_occu_orno === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_occu_orno"]').text() + '` cannot be blank!'
                    });
                    $('#txt_occu_orno').select();
                    return;
                }

                var fileDIR = `modules/obo/occupancy/` + this.txt_locator2.value + `/`;
                this._uploadFile(this.file_cert,
                    fileDIR,
                    res => {
                        this._vuePOST(
                            'obo_permits', 
                            {
                                type: "occu_permit", //3
                                data: {
                                    locator_id: this.txt_locator2.value,
                                    occup_type: this.cmd_occup,
                                    transaction_fee: this.txt_trans_fee2,
                                    inspection_path: this._getFileName('txt_cert'),
                                    date_approve: this.txt_d_asn,
                                    control_no: this.txt_occu_no1,
                                    or_no: this.txt_occu_orno,
                                    remarks_status: 0
                                }
                            }, 
                            response => {
                                if (response === 'success')
                                    this.$fire({
                                        title: "Success!",
                                        text: "Permit successfully added!",
                                        type: "success",
                                        timer: 3000
                                    }).then(r => {
                                        this.$loading(false);
                                        this.clearInput(1);
                                    });
                            }
                        );
                    }
                );
            },
            clearInput(id) {
                if (id === 1) {
                    this.txt_locator2.value = "";
                    this.cmd_occup = "";
                    this.txt_trans_fee2 = "";
                    this.txt_d_asn = "";
                    this.txt_d_paid2 = "";
                    this.txt_occu_no1 = "";
                    this.txt_occu_orno = "";
                    this.file_cert = {},
                    this.file_permitpages = [ {}, {} ];
                    this.file_permitname = [ '', '' ];
                }
                else {
                    $('#txt_fpage').val = "";
                    $('#txt_bpage').val = "";
                    this.txt_locator1.value = "";
                    this.txt_loc_const = "";
                    this.txt_app_no = "";
                    this.txt_d_created = "";
                    this.txt_proj_desc = "";
                    this.txt_proj_cost = "";
                    this.txt_bldg_per = "";
                    this.txt_d_req = "";
                    this.txt_d_endorse = "";
                    this.txt_joa = "";
                    this.txt_remarks = "";
                    this.txt_trans_fee1 = "";
                    this.txt_orno = "";
                    this.txt_d_paid = "";
                }
            }
        }
    }
</script>
<style lang="css" scoped>
    .div-pages select {
            width: 50px;
            text-align: center;
    }
    .git-div-border label{
        margin: 2px 0 0 0;
    }
    .git-div-border h5 {
        margin: 8px 0 0 0 !important;
    }
</style>    