<template>
        <div class="row h-100 parentContainer">
            <div class="col-12" style="min-height: 20px;">
                <loading-component style="height: 20px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            </div>

            <div class="col-12">
                <div id="accordion">
                    <div class="card">
                        <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Filters
                            </button>
                        </h5>
                        </div>
                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                            <div class="card-group" style="margin-bottom: 0px;">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">Pay For</h3>
                                        <div class="card-tools">
                                            <div class="form-check" v-for="(match, index) in matches">
                                                <input class="form-check-input" type="checkbox" :value="match" :id="'match'+index" v-model="selected.matches">
                                                <label class="form-check-label" :for="'match' + index">
                                                    {{ match }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card" style="margin-top: 0px">
                                    <div class="card-header">
                                        <h3 class="card-title">Date</h3>
                                        <div class="form-check" v-for="(day, index) in days" :key="day">
                                            <input class="form-check-input" type="checkbox" :id="'day'+index" :value="day" v-model="selected.days">
                                            <label class="form-check-label" :for="'day'+index">
                                                {{ day }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end mb-2">
                                <button type="button" class="btn btn-sm btn-primary" @click="fetchList(true)">
                                    <i class="fa fa-plus-square"></i>
                                    Filter
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 v-if="$store.getters.getListData(section)[0] !== undefined" class="card-title">{{ $store.getters.getListData(section)[0].account_name }} - {{ $store.getters.getListData(section)[0].account_number }},{{ $store.getters.getListData(section)[0].account_type }} </h3><br/>
                        <h3 v-if="$store.getters.getListData(section)[0] !== undefined" class="card-title">{{ new Date($store.getters.getListData(section)[0].account_statement_date_from).toDateString() }} -> {{ new Date($store.getters.getListData(section)[0].account_statement_date_to).toDateString() }}</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Posting Date</th>
                                <th>Description 1</th>
                                <th>Description 2</th>
                                <th>Description 3</th>
                                <th>Description 4</th>
                                <th>Description 5</th>
                                <th>Amount</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody v-show="!isLoading">
                            <tr v-for="item in $store.getters.getListData(section)" :key="item.id">
                                <td>{{item.id}}</td>
                                <td>{{item.posting_date}}</td>
                                <td>{{item.transaction_description_1}}</td>
                                <td>{{item.transaction_description_2}}</td>
                                <td>{{item.transaction_description_3}}</td>
                                <td>{{item.transaction_description_4}}</td>
                                <td>{{item.transaction_description_5}}</td>
                                <td>{{item.amount}}</td>
                                <td>
                                    <a href="#">
                                        <i class="fa fa-edit blue requestModal" data-type="editSingleItem" @click="editModal({item})"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">

                    </div>
                </div>
                <!-- /.card -->
            </div>

            <div class="col-12">
                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editSingleItem">
                    <edit-single-item-in-list-component v-if="data != null" :data="data" :section="'editSingleItem'" class="text-left"></edit-single-item-in-list-component>
                </modal-component>
            </div>

            <div class="col-12">
                <pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
            </div>
        </div>

</template>
<script>
import EditSingleItemInListComponent from "../../accounting/elements/EditSingleItemInListComponent";
export default {
    components: {EditSingleItemInListComponent},
    props: {
        statement: {
            type: Number,
            required: true
        }
    },
    data(){
        return {
            data: null,

            section: 'statementTransactionsDetails',
            isLoading: false,

            matches: ['exchange', 'shipping', 'none'],
            selected: {
                matches: [],
                days: []
            },

            filters: {'per_page': 10, order_by: {column: 'id', DESC: true}},
            page: 1,

            days: [],
        }
    },
    computed: {
        pendingQueue () {
            return this.$store.getters.isInCompleteQueue(this.section);
        },
    },
    watch: {
        pendingQueue(inComplete, oldValue){
            if(inComplete){
                this.fetchList();
            }
        },
        selected: {
            handler: function () {
                //this.filters = {'per_page': 10, order_by: {column: 'id', DESC: true}};

                //pay_for
                if(this.selected.matches.toString() != ""){
                    const newArr = this.selected.matches.slice();
                    const index = newArr.indexOf('none');
                    if(index > -1){
                        newArr.splice(index, 1, '');
                    }
                    const newObject = {pay_for_in: newArr};
                    this.filters = {...this.filters, ...newObject};
                }
                else{
                    delete this.filters.pay_for_in;
                }

                //date
                if(this.selected.days.toString() != ""){
                    const newArr = this.selected.days.slice();
                    const newObject = {date_in: newArr};
                    this.filters = {...this.filters, ...newObject};
                }
                else{
                    delete this.filters.date_in;
                }
            },
            deep: true
        }
    },
    created(){
        this.setDecoratorDefault();
        this.filters = { 'per_page': 10, order_by: {column: 'id', DESC: true} };
        this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
    },
    methods: {
        fetchList(isUpdate = false){
            this.isLoading = true;
            if(!isUpdate){
                let listDecorators = this.$store.getters.getListDetails(this.section);
                this.page = listDecorators.page;
            }
            this.submit(route('api.accounting.statement.details', this.statement) + '?page=' + this.page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false);
        },
        successHandler(response){
            this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
            this.$refs.pagination.makePagination(response.payload.meta, response.payload.links + '&filters=' + JSON.stringify(this.filters));
            this.generateDays();
            this.isLoading = false;
        },
        editModal(param){
            this.data = param.item;
        },
        generateDays(){
            if(this.$store.getters.getListData(this.section)[0] !== undefined)
            {
                const startDate = new Date(this.$store.getters.getListData(this.section)[0].account_statement_date_from);
                const endDate = new Date(this.$store.getters.getListData(this.section)[0].account_statement_date_to);
                const days = [];
                for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
                    const formattedDate = this.formatDate(d);
                    days.push(formattedDate);
                }
                this.days = days;
            }
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);
            return `${year}-${month}-${day}`;
        },
    },
}
</script>
