<template>
    <div class="row m-b-15 m-l-5 m-r-10 parentContainer">
        <div class="col bg-white rounded">
            <div class="row" :class="[{'b-danger': item.status == 5 ||item.status == 6, 'b-a': item.status == 5||item.status == 6}]">
                <div class="col padding-20">
                    <div class="row align-items-center">
                        <div class="col-2">
                            <p class="no-margin fs-10 all-caps">Invoice Date</p>
                            <div> {{ item.updated_at }}</div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Status</p>
                            <div class="all-caps" v-if="item.status == 3">Payment Completed</div>
                            <div class="all-caps text-danger" v-else-if="item.status == 5">Dispute in progress</div>
                            <div class="all-caps" v-else-if="item.status == 6">Cancelled Invoice</div>
                            <div class="all-caps" v-else>Pending Payment</div>
                        </div>
                        <div class="col-2">
                            <p class="no-margin fs-10 all-caps">Amount</p>
                            <div>MYR {{ item.amount.toFixed(2) }}</div>
                        </div>
                        <div class="col-3" v-if="item.remarks.length">
                            <p class="no-margin fs-10 all-caps">Billing Question</p>
                            <div>
                                {{ latestComment.content }}
                                <span class="btn requestModal no-border" v-if="item.remarks.length" size="large" data-type="chatmodal">
                                    <i class="fa fa-comment-o"></i>
                                </span>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="chatmodal">
                                <remark-component :section="section" :data="item" module_type="Transaction"></remark-component>
                            </modal-component>
                        </div>
                        <div class="col-3" v-else>
                            <p class="no-margin fs-10 all-caps invisible">Billing Question</p>
                            <div>
                                <span class="btn requestModal no-border invisible">
                                    <i class="fa fa-edit"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0 d-flex justify-content-center align-items-center">
                            <div :class="[{'invisible': [5, 6, 3].includes(item.status)}]">
                                <span class="d-inline-block m-r-15 text-primary bold text-underline pointer requestModal" data-type="billingRemark">Billing Question?</span>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="billingRemark">
                                <customer-invoice-remark-form-component module_type="Transaction" :data="item" :section="section"></customer-invoice-remark-form-component>
                            </modal-component>
                            <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 bg-grey no-border muted">
                                                <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 class="col-auto hide">
                            <div class="btn btn-sm all-caps b-rad-none btn-block" :class="{'btn-success': !expanded, 'btn-default': expanded}" @click="expanded = !expanded">
                                {{ expanded ? 'Cancel' : 'Make Payment' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded" v-if="![5, 6].includes(item.status)">
                <div class="col-12 col-md-7 padding-20">
                    <div class="row bg-master-lightest h-100">
                        <div class="col">
                            <div class="row bg-master-lightest" v-if="item.payment_attempts.length">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div class="font-head fs-10 all-caps">Payment Attempt</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <shipping-transaction-component v-for="item in item.payment_attempts" v-bind:key="item.id" :data="item" :section="section"></shipping-transaction-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row bg-master-lightest" v-if="item.payment_history.length">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div class="font-head fs-10 all-caps">Payment History</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <payment-history-component v-for="item in item.payment_history" v-bind:key="item.id" :data="item" ></payment-history-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-5 padding-20 parentContainer">
                    <div class="row bg-master-lightest h-100">
                        <div class="col">
                            <div class="row padding-10">
                                <div class="col">
                                    <div class="row align-items-end m-b-10 text-complete">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Total Amount:</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12">MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-10 text-success">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Paid Total:</div>
                                        </div>
                                        <div class="col-auto text-right">
                                             <div class="font-heading fs-12">MYR {{(Math.round((item.amount - item.outstanding + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-10">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Floating Amount:</div>
                                        </div>
                                        <div class="col-auto text-right">
                                             <div class="font-heading fs-12">MYR {{(Math.round((item.floating + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end bold text-danger">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">OutStanding Total:</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12">MYR {{(Math.round((item.outstanding + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row m-t-20" v-if="item.outstanding - item.floating > 0.009">
                                        <div class="col">
                                            <div class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="makePayment">Make Payment</div>
                                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="makePayment">
                                                <payment-form-component :data="item" :section="section"></payment-form-component>
                                            </modal-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded" v-if="[5, 6].includes(item.status)">
                <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" 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: true,
            }
        },
        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.remarks;
                return questions.slice().reverse()[0];
            }
        },
        created(){
            this.parameters.packing_list_id = this.data.id;
        },
        methods: {
            successHandler(response){
                this.item = response.payload.data;
                // this.$forceUpdate();
            }
        },
        mixins: [componentHandler]
    }
</script>
