<template>
    <div class="row align-items-center m-b-10 parentContainer">
        <div class="row w-100 m-0 p-0" v-show="!displayAddressForm">
            <div class="col-12 p-0">
                <label :style="minWidth">Reference</label>
                <label>{{this.company_details.reference ? this.company_details.reference : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :style="minWidth">Business Type</label>
                <label>{{this.company_details.business_type ? getBusinessTypeDesc(this.company_details.business_type) : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :style="minWidth">Email</label>
                <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{this.company_details.employee ? this.company_details.employee.email : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :style="minWidth">Contacts</label>
                <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{this.company_details.contact ? this.company_details.contact.email : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :style="minWidth">&nbsp;</label>
                <label><i class="fa fa-phone text-primary fs-10"></i>&nbsp;{{this.company_details.contact ? this.company_details.contact.phone : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.identification && this.company_details.identification.document_type">
                <label class="muted pull-left" :style="minWidth">Identification</label>
                <div class="col-4 pull-left p-l-0 p-b-5">
                    <label>{{ this.company_details.identification.document_type === 'IDENTITY_CARD' ? 'IC' : 'SSM Registration' }}</label>
                    <div class="row no-margin pull-right">
                        <div v-for="file in this.company_details.identification.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
                            <document-file-viewer-component :file="file">
                                <template slot="button">
                                    <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
                                        <i class="fa fa-file-image-o fs-10"></i>
                                    </div>
                                </template>
                            </document-file-viewer-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 p-0">
                <label class="muted m-b-0" :style="minWidth">Address&nbsp;</label>
            </div>
            <div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-0">
                <list-component key="2" section="addresslist" :endpoint="route('api.address.list')" :options="{'company_id':this.company_details.id}" v-if="this.company_details.id">
                    <template slot="list" slot-scope="{data}">
                        <address-component :data="data" section="addressListItem"></address-component>
                    </template>
                </list-component>
            </div>
            <div class="col-12 p-0" style="width: 500px; height:350px">
                <canvas id="booking-chart"></canvas>
            </div>
        </div>

        <div class="col" v-show="this.displayAddressForm">
            <div>Address form</div>
            <address-form-component :id="parseInt(this.company_details.id)" :type="3" :addressData="this.address" v-if="this.company_details.id"></address-form-component>
        </div>

        <modal-component id="deleteAddressModal">
            <address-modal-component section="deleteAddressModal" :address_id="this.address_id"></address-modal-component>
        </modal-component>

    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import Chart from 'chart.js';

    export default {
        props:{
            company_details:{
                type:Object,
                required:true
            },
        },
        mounted(){
            this.$root.$on('deleteAddressConfirm', (id) => {
                this.address_id=id;
                $("#deleteAddressModal").closest('.modal').modal('show');
            });
            this.$root.$on('updateAddressForm', (address, show) => {
                if(show) {
                    this.address = address;
                    this.displayAddressForm = true;
                }else{
                    this.displayAddressForm = false;
                }
            });
        },
        data(){
            return {
                minWidth:{
                    minWidth:'100px',
                },
                minWidth150:{
                    minWidth:'150px',
                },
                address_id:0,
                address:{},
                displayAddressForm:false
            }
        },
        watch: {
            company_details: function(newVal, oldVal) {
                this.company_details=newVal;

                if(newVal !== null) {

                    let approved  = 0, completed  = 0, rejected  = 0, expired  = 0, pending = 0;
                    this.company_details.bookings.forEach(function (booking) {
                        if (booking) {
                            switch (booking.status) {
                                case 1:
                                    pending += 1;
                                    break;
                                case 2:
                                    approved += 1;
                                    break;
                                case 3:
                                    completed += 1;
                                    break;
                                case 4:
                                    rejected += 1;
                                    break;
                                case 6:
                                    expired += 1;
                                    break;
                                default:
                                    break;
                            }
                        }
                    });

                    const ctx = document.getElementById('booking-chart');
                    new Chart(ctx,  {
                        type: "pie",
                            data: {
                            labels: ['Completed','Approved','Rejected','Pending Verification','Expired'],
                                datasets: [
                                {
                                    label: 'Booking Summary',
                                    data: [completed,approved,rejected,pending,expired],
                                    backgroundColor: [
                                        '#4bc0c0',
                                        '#35a2eb',
                                        '#ff6384',
                                        '#ff9f40',
                                        '#ffcd56'
                                    ],
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            legend: {
                                position: 'right',
                            },
                            title: {
                                display: true,
                                text: 'Booking Activity (Total: '+this.company_details.bookings.length+')'
                            }
                        }

                    });
                }
            }
        },
        methods: {
            backToCompanyList() {
                this.$root.$emit('backToCompanyList');
            },
            getBusinessTypeDesc(type){
                return (type==1) ? 'Company Account':'Personal Account';
            },
        },
        mixins: [componentHandler]
    }
</script>