<template>
    <div class="row m-b-15 m-l-5 m-r-10" v-if="$store.getters.isAdmin || item.order">
        <div class="col bg-white rounded b-a" :class="{'b-white': !selected, 'b-primary': selected, 'bg-primary-lighter': selected}">
            <div class="row">
                <div class="col padding-20">
                    <div class="row align-items-center">
                        <div class="col-auto pointer align-items-center" @click="activate()" v-if="!['customerPaidGroupInvoiceComponent', 'customerGroupPaymentInProgressInvoiceComponent'].includes(section)">
                            <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Invoice No</p>
                            <div>{{ item.bill_no }}</div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Order</p>
                            <div v-if="item.order"><a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a></div>
                            <div class="text-danger" v-else>Error in retrieving order</div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Invoice Date</p>
                            <div>{{ item.created_at }}</div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Amount</p>
                            <div>MYR  {{ item.amount.toFixed(2) }}</div>
                        </div>
                        <div class="col" v-if="['customerPaidInvoiceComponent', 'customerPaidGroupInvoiceComponent'].includes(section)">
                            <p class="no-margin fs-10 all-caps">Payment Date</p>
                            <div>{{ item.payment_history && item.payment_history.length > 0 ? item.payment_history[item.payment_history.length - 1].created_at : '-' }}</div>
                        </div>
                        <div class="col" v-if="['customerPaidInvoiceComponent', 'customerPaidGroupInvoiceComponent'].includes(section)">
                            <p class="no-margin fs-10 all-caps">Bill Number</p>
                            <div>{{ item.payment_history && item.payment_history.length > 0 ? item.payment_history[item.payment_history.length - 1].payment_reference : '-' }}</div>
                        </div>
                        <div class="col-auto">
                            <div v-if="item.documents.length">
                                <div v-for="file in item.documents[0].files" v-bind:key="file.id" class="col-auto no-padding">
                                    <document-file-viewer-component :file="file">
                                        <template slot="button">
                                            <div class="btn no-border muted" :class="{'btn-info': section === 'customerPaidInvoiceComponent', 'btn-success': section !== 'customerPaidInvoiceComponent'}">
                                                <i class="fa fa-file-pdf-o"></i>
                                            </div>
                                        </template>
                                    </document-file-viewer-component>
                                </div>
                            </div>
                            <div v-else>
                                <div class="btn bg-grey no-border muted invisible">
                                    <i class="fa fa-file-pdf-o"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            selectedInvoice: {
                type: Array,
                required: false,
            }, 
            section:{
                type: String,
                default: null
            },
        },
        data(){
            return {
                expanded: false,
                selectedValue: false,
            }
        },
        methods: {
            activate(){
                this.select = !this.select;
                this.$emit('input', this.data);
            }
        },
        computed: {
            selected() {
                var response = false;
                this.selectedInvoice.forEach((value, index) => {
                    if (value.id == this.item.id) {
                        response = true;
                    }
                });
                return response;
            }
        },
        mixins: [componentHandler]
    }
</script>
