<template>
    <div class="row m-b-15 m-l-5 m-r-10 parentContainer">
        <div class="col bg-white rounded">
            <div class="row">
                <div class="col padding-20">
                    <div class="row align-items-center">
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Marking</p>
                            <div class="no-margin">
                                <div v-if="item.order">
                                    <a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a>/<a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a>
                                </div>
                                <div v-else class="text-danger">Unclaimed Packing List</div>
                            </div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Invoice Date</p>
                            <div v-if="!item.suspended_invoice">n/a</div>
                            <div v-if="item.suspended_invoice"> {{ item.suspended_invoice.updated_at }}</div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Status</p>
                            <div class="all-caps">{{ invoice_status }}</div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Amount</p>
                            <div v-if="!item.suspended_invoice">n/a</div>
                            <div v-if="item.suspended_invoice">MYR  {{ item.suspended_invoice.amount.toFixed(2) }}</div>
                        </div>
                        <div class="col" v-if="invoice_status == 'Suspended Invoice'">
                            <p class="no-margin fs-10 all-caps">Billing Question</p>
                            <div>{{ latestComment ? latestComment.content : '' }} </div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0" v-if="['Suspended Invoice'].includes(invoice_status)">
                            <div class="btn bg-grey no-border muted requestModal" data-type="deleteDispute">
                                <i class="fa fa-close"></i>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteDispute">
                                <delete-dispute-form-component :data="item" :section="section"></delete-dispute-form-component>
                            </modal-component>
                        </div>
                        <div class="col-auto p-l-0 p-r-0" v-if="['Suspended Invoice'].includes(invoice_status)">
                            <div class="btn bg-grey no-border muted requestModal" data-type="regenerateInvoice">
                                <i class="fa fa-refresh"></i>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateInvoice">
                                <regenerate-dispute-invoice-form-component :data="item" :section="section"></regenerate-dispute-invoice-form-component>
                            </modal-component>
                        </div>
                        <div class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice', 'Suspended Invoice'].includes(invoice_status)">
                            <div v-for="file in item.suspended_invoice.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 bg-grey no-border muted">
                                            <i class="fa fa-file-pdf-o"></i>
                                        </div>
                                    </template>
                                </document-file-viewer-component>
                            </div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice', 'Suspended Invoice'].includes(invoice_status)">
                            <div class="btn bg-grey no-border" @click="expanded = !expanded">
                                <i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded">
                <div class="col padding-20">
                    <div class="row bg-master-lightest h-100 padding-20">
                        <div class="col">
                            <h6 class="all-caps m-b-5 no-margin text-underline bold">Billing question</h6>
                            <remark-component :section="section" :data="item.suspended_invoice" module_type="Transaction"></remark-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            invoice_status: {
                type: String,
                required: true
            },
            section:{
                type: String,
                required: true
            }
        },
        data(){
            return {
                parameters: {
                    packing_list_id: null,
                    transaction_details: [],
                },
                expanded: false,
            }
        },
        computed: {
            cbm () {
                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? 0 : obj.cbm) + total, 0)) * 1000) / 1000).toFixed(3)
            },
            overweight(){
                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? obj.cbm : 0) + total, 0)) * 1000) / 1000).toFixed(3)
            },
            latestComment() {
                let questions = this.item.suspended_invoice.remarks;
                return questions.slice().reverse()[0];
            }
        },
        created(){
            this.parameters.packing_list_id = this.data.id;
        },
        methods: {
            generateInvoice() {
                this.submit(this.route('api.transaction.invoice.create'), 'post', this.section, true, true);
            },
            successHandler(response){
                this.item = response.payload.data;
                // this.$forceUpdate();
            }
        },
        mixins: [componentHandler]
    }
</script>
