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

        <h3>Add Previous Certificate of Environmental Compliance</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">

                    <h5>Application Details</h5>
                    <div class="disp-style-row">
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_locator">Locator Name</label><br>
                            <div class="disp-style-row">
                                <model-select id="txt_locator" :options="locators" v-model="txt_locator" placeholder="Select Locator" style="width: 720px">
                                </model-select>&nbsp;
                            </div>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="cmb_type">Application Type</label><br>
                            <select id="cmb_type" style="width:100%" v-model="cmb_type">
                                <option value="Full">Full</option>
                                <option value="Partial">Partial</option>
                            </select>
                        </div>
                    </div>

                    <h5>CEC Validity</h5>
                    <div class="disp-style-row">
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_from">Date Start of CEC Validity</label><br>
                            <datepicker v-model="txt_from" :format="customDTP" id="txt_from" style="text-align: center !important"></datepicker>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_to">Date End of CEC Validity</label><br>
                            <datepicker v-model="txt_to" :format="customDTP" id="txt_to" style="text-align: center !important"></datepicker>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <label for="txt_cecno">CEC No.</label><br>
                            <input id="txt_cecno" v-model="txt_cecno" type="text" class="git-input input-lg" placeholder="Occupancy Number">
                        </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="clickCEC()" class="git-btn git-btn-success">Submit</button>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                cmb_type: "",
                txt_from: "",
                txt_to: "",
                locators: [],
                txt_cecno: "",
                txt_locator: {
                    value: '',
                    text: ''
                },
                file_cert: {}
            }
        },
        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');
            },
            clickCEC() {
                if ($('#txt_cert').val() === '') {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: 'Please upload certificate!'
                    });
                    return;
                }
                
                if (this.txt_locator.value === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_locator"]').text() + '` cannot be blank!'
                    });
                    $('#txt_locator').select();
                    return;
                }
                
                if (this.txt_from === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_from"]').text() + '` cannot be blank!'
                    });
                    $('#txt_from').select();
                    return;
                }
                
                if (this.txt_to === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_to"]').text() + '` cannot be blank!'
                    });
                    $('#txt_to').select();
                    return;
                }
                
                if (this.txt_cecno === "") {
                    this.showErrorMsg({
                        title: 'Error!',
                        message: '`' + $('label[for="txt_cecno"]').text() + '` cannot be blank!'
                    });
                    $('#txt_cecno').select();
                    return;
                }

                this._vuePOST(
                    'obo_cec', 
                    {
                        type: "cec_permit", //3
                        data: {
                            locator_id: this.txt_locator.value,
                            control_no: this.txt_cecno,
                            type: this.cmb_type,
                            uploaded: this._getFileName('txt_cert'),
                            valid_from: this.txt_from,
                            valid_to: this.txt_to,
                            uid: this.$cookies.get('uid')
                        }
                    }, 
                    response => {
                        if (response === 'success')
                            this.$fire({
                                title: "Success!",
                                text: "CEC successfully added!",
                                type: "success",
                                timer: 3000
                            }).then(r => {
                                this.$loading(false);
                                this.clearInput();
                            });
                    }
                );
            },
            clearInput() {
                this.cmb_type = "";
                this.txt_from = "";
                this.txt_to = "";
                this.txt_cecno = "";
                $('#txt_cert').val('');
                this.txt_locator.value = "";
            }
        }
    }
</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>    