<template>
    <div class="row">
        <div class="col">
            <div class="row no-margin">
                <div class="col p-b-15 p-l-0 p-r-0">
                    <div class="row">
                        <div class="col">
                            <div class="row" v-for="(detail, index) in details">
                                <div class="col p-b-10 p-t-10 " :class="[{'b-grey' : index !== Object.keys(details).length - 1}, {'b-b' : index !== Object.keys(details).length - 1}]">
                                    <invoice-item-form-component :data="detail" :index="index" currency="MYR" :editable="!submitted" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></invoice-item-form-component>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="addCharges">
                        <div class="col">
                            <invoice-item-form-component currency="MYR" :editable="!submitted" :section="section" @change="addCharges = !addCharges" @add="addProduct($event)" v-on:remove="removeProduct(index)"></invoice-item-form-component>
                        </div>
                    </div>

                    <div class="row d-flex justify-content-center allign-items-between align-items-center m-b-15">
                        <div class="col-auto">
                            <div class="btn btn-outline-primary btn-md" @click="addCharges = !addCharges">{{ addCharges? 'Cancel' : 'Add Charges' }}</div>
                            <div class="btn btn-outline-primary btn-md" @click="submitForm()">Save Change</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import formHandler from '../../../general/mixins/formHandler';
    export default {
        data(){
            return {
                interval:false,
                addCharges:false,
                canSubmitChanges:false,
                submitted: false,
                details: this.data.details,
                canSaveChange: false,
                parameters: {
                    transaction_details: []
                },
            }
        },
        methods: {
            updateProduct(product, index) {
                this.details[index] = {
                    name: product.name,
                    quantity: product.quantity,
                    reference: product.reference,
                    price: parseFloat((product.price).toString().replace(',', '')),
                    amount: parseFloat((product.amount).toString().replace(',', '')),
                };
            },
            removeProduct(index) {
                this.canSubmitChanges = !this.canSubmitChanges;
                this.data.details.splice(index, 1);
            },
            addProduct(newProduct) {
                this.canSubmitChanges = !this.canSubmitChanges;
                this.addCharges = !this.addCharges;
                this.details.push(newProduct);
            },
            submitForm() {
                this.canSubmitChanges = !this.canSubmitChanges;
                this.parameters.transaction_details = this.details;

                console.log(this.parameters.transaction_details);

                this.submit(this.route('api.transaction.invoice.update', this.data.id), 'put', this.section, true, true);
            }
        },
        mixins: [formHandler]
    }
</script>
