<template>
    <div class="row m-b-15 m-l-5 m-r-10 parentContainer">
        <div class="col bg-white rounded">
            <div v-for="singleInvoice in invoices" 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>
                                    <p>{{item.loading_days_ago}}</p>
                                </div>
                                <div v-else class="text-danger">Unclaimed Packing List</div>
                            </div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Container</p>
                            <div v-if="item.packages[0].container"> {{item.packages[0].container.container_reference}}</div>
                            <div v-else-if="item.container"> {{item.container.container_reference}}</div>
                        </div>
                        <div class="col">
                            <p class="no-margin fs-10 all-caps">Invoice Date</p>
                            <div v-if="singleInvoice">({{ singleInvoice.bill_no }})</div>
                            <div v-if="!singleInvoice">n/a</div>
                            <div v-if="singleInvoice"> {{ singleInvoice.updated_at }}</div>
                        </div>
                        <div class="col">
                            <div v-if="item.order">
                                <p class="no-margin fs-10 all-caps">Address</p>
                                <div>{{ item.order.address.post_code_area}}</div>
                                <div>{{ item.order.address.district.name +' '+item.order.address.postcode+' '+item.order.address.state.name  }}</div>
                            </div>
                            <div v-else class="text-danger">Unclaimed</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="!singleInvoice">n/a</div>
                            <div v-if="singleInvoice">MYR  {{ singleInvoice.amount.toFixed(2) }}</div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice', 'Suspended Invoice'].includes(invoice_status)">
                            <div v-if="singleInvoice">
                                <div v-if="singleInvoice.documents.length">
                                    <div v-for="file in singleInvoice.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>
                        <div class="col-auto">
                            <div class="row text-center parentContainer m-b-10" v-if="['Pending Invoice'].includes(invoice_status) && !item.receive_packing_list" >
                                <div class="col">
                                    <div class="requestModal pointer btn btn-primary btn-xs" data-type="addWarehouseTransport">
                                        Add Warehouse Transport
                                    </div>
                                    <modal-component class="animate_animated animatefast animate_fadeIn" styleType="fill-in" type="addWarehouseTransport">
                                        <create-warehouse-transport-form-component :packinglistId="item.id" :section="section"></create-warehouse-transport-form-component>
                                    </modal-component>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="btn bg-grey no-border" @click="expanded = !expanded" v-if="['Pending Approval', 'Pending Payment'].includes(invoice_status)">
                                        <i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
                                    </div>
                                    <div class="btn bg-grey no-border muted requestModal" v-if="singleInvoice && invoice_status == 'Pending Approval'" data-type="confirmInvoice">
                                        <i class="fa fa-check fs-12"></i>
                                    </div>
                                    <div class="btn bg-grey no-border muted requestModal" v-if="singleInvoice && invoice_status == 'Pending Approval'" data-type="deleteInoive">
                                        <i class="fa fa-close fs-12"></i>
                                    </div>
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="confirmInvoice">
                                        <approve-shipping-invoice-form-component :section="section" :data="data"></approve-shipping-invoice-form-component>
                                    </modal-component>
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteInoive">
                                        <delete-shipping-invoice-form-component :section="section" :data="data"></delete-shipping-invoice-form-component>
                                    </modal-component>
                                </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="invoice_status == 'Pending Payment'">
                <div class="col-12 col-md-7 padding-20">
                    <div class="row bg-master-lightest h-100">
                        <div class="col">
                            <div v-for="(groupItem, index) in invoices" class="row bg-master-lightest" v-if="groupItem.groups_payment_attempts.length && groupItem.type == 1 && groupTransactionsExist(invoices, groupItem.groups_payment_attempts)">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div v-if="index === 0" class="font-head fs-10 all-caps">Payment Attempt</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <single-group-payment-transaction-details-component v-for="group in groupItem.groups_payment_attempts" v-bind:key="group.id" :data="group" :section="section"></single-group-payment-transaction-details-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-for="(groupItem, index) in invoices" class="row bg-master-lightest" v-if="groupItem.groups_payment_expired.length && groupItem.type == 1 && groupTransactionsExist(invoices, groupItem.groups_payment_expired)">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div v-if="index === 0" class="font-head fs-10 all-caps">Payment Expired</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <payment-expired-component v-for="group in groupItem.groups_payment_expired" v-bind:key="group.id" :data="group" :section="section"></payment-expired-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-for="(groupItem, index) in invoices" class="row bg-master-lightest" v-if="groupItem.groups_payment_history.length && groupItem.type == 1 && groupTransactionsExist(invoices, groupItem.groups_payment_history)">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div v-if="index === 0" class="font-head fs-10 all-caps">Payment History</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <single-group-payment-history-transaction-details-component v-for="group in groupItem.groups_payment_history" v-bind:key="group.id" :data="group" :section="section"></single-group-payment-history-transaction-details-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-for="(paymentAttemptItem, index) in invoices" class="row bg-master-lightest" v-if="invoices.some(x => x.payment_attempts && x.payment_attempts.length > 0)">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div v-if="index === 0" class="font-head fs-10 all-caps">Payment Attempt</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <shipping-transaction-component v-for="i in paymentAttemptItem.payment_attempts" v-bind:key="i.id" :data="i" :section="section"></shipping-transaction-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-for="(paymentExpiredItem, index) in invoices" class="row bg-master-lightest" v-if="invoices.some(x => x.payments_expired && x.payments_expired.length > 0)">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div v-if="index === 0" class="font-head fs-10 all-caps">Payment Expired</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <payment-expired-component v-for="i in paymentExpiredItem.payments_expired" v-bind:key="i.id" :data="i" ></payment-expired-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-for="(paymentHistoryItem, index) in invoices" class="row bg-master-lightest" v-if="invoices.some(x => x.payment_history && x.payment_history.length > 0)">
                                <div class="col">
                                    <div class="row m-t-10 m-b-10">
                                        <div class="col">
                                            <div v-if="index === 0" class="font-head fs-10 all-caps">Payment History</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <payment-history-component v-for="i in paymentHistoryItem.payment_history" v-bind:key="i.id" :data="i" ></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((totalAmount + 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((totalOutstanding + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row m-t-20" v-if="totalOutstanding - totalFloating > 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>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="makePayment">
                                <group-payment-form-component :section="section" :selectedIds="selectedIds" :sumAmount="totalOutstanding.toFixed(2)" :showManualPayment="true"></group-payment-form-component>
                            </modal-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            invoices: {
                type: Array,
            },
            invoice_status: {
                type: String,
                required: true
            },
            section:{
                type: String,
                required: true
            },
            storage:{
                type: Object
            },
        },
        data(){
            return {
                parameters: {
                    packing_list_id: null,
                    transaction_details: [],
                },
                expanded: false,
            }
        },
        computed: {
            totalAmount() {
                return this.invoices.reduce((sum, item) => sum + item.amount, 0);
            },
            totalOutstanding() {
                return this.invoices.reduce((sum, item) => sum + item.outstanding, 0);
            },
            totalFloating() {
                return this.invoices.reduce((sum, item) => sum + item.floating, 0);
            },
            selectedIds() {
                const ids = [];
                this.invoices.forEach(item => {
                    ids.push(item.id);
                });
                return ids;
            },
        },
        created(){
            this.parameters.packing_list_id = this.data.id;
        },
        methods: {
            successHandler(response){
                this.item = response.payload.data;
                this.updateList();
            },
            groupTransactionsExist(items, groups) {
                return groups.some(group =>
                    group.transactions_ids.length === items.length &&
                    group.transactions_ids.every(transaction =>
                        items.some(item => item.id === transaction.transaction_id)
                    )
                );
            }
        },
        mixins: [componentHandler]
    }
</script>
