<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="justify-content-center align-items-center m-t-50 m-b-50" v-show="step === 0">

                        <div class="row">
                            <div class="col-3">
                                <div class="row text-center">
                                    <div class="col b-a b-grey padding-20 m-r-15 pointer bg-complete text-white" @click="getReportFilter()">Mapped Report</div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="row text-center">
                                    <div class="col b-a b-grey padding-20 m-r-15 pointer bg-complete text-white" @click="getHistoryImportedInvReport()">History Imported Invoices Report</div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="row text-center">
                                    <div class="col b-a b-grey padding-20 m-r-15 pointer bg-complete text-white" @click="getHistoryImportedRecReport()">History Imported Receipts Report</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row" v-if="step > 0 && report == 'mappedRecords'">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="justify-content-center align-items-center m-t-50 m-b-50">
                                <div class="row mb-3">
                                    <div class="col-4">
                                        <validation-wrapper-component :validator="$v.parameters.owner_reference">
                                        <label class="text-primary">Reference</label>
                                            <input type="text" class="form-control" v-model="parameters.owner_reference">
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-4">
                                        <validation-wrapper-component :validator="$v.parameters.invoice_reference">
                                        <label class="text-primary">Invoice Reference</label>
                                            <input type="text" class="form-control" v-model="parameters.invoice_reference">
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-4">
                                        <validation-wrapper-component :validator="$v.parameters.receipt_reference">
                                        <label class="text-primary">Receipt Reference</label>
                                            <input type="text" class="form-control" v-model="parameters.receipt_reference">
                                        </validation-wrapper-component>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <validation-wrapper-component :validator="$v.parameters.startDate">
                                            <label class="all-caps">Start Date</label>
                                            <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-3">
                                        <validation-wrapper-component :validator="$v.parameters.endDate">
                                            <label class="all-caps">End Date</label>
                                            <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-3">
                                        <div class="row text-center">
                                            <div class="col b-a b-grey padding-20 m-r-15 pointer bg-complete text-white" @click="getReportFilter()">Mapped Report</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-t-10 m-b-10">
                                <div class="col">
                                    <div class="row p-t-10 p-b-10 b-b b-grey text-master-light">
                                        <div class="col-2">Date</div>
                                        <div class="col-2">Description</div>
                                        <div class="col-7">
                                            <div class="row">
                                                <div class="col">System</div>
                                                <div class="col">Type</div>
                                                <div class="col">Reference</div>
                                                <div class="col">Invoice Reference</div>
                                                <div class="col">Receipt Reference</div>
                                            </div>
                                        </div>
                                        <div class="col-1">Amount</div>
                                    </div>
                                </div>
                            </div>

                            <list-component :key="step" ref="TransactionsMappedList" section="TransactionsMappedSection" :endpoint="route('api.accounting.bank.transaction')" :options="filter">
                                <template slot="list" slot-scope="{data}">
                                    <statement-transaction-mapped-component :data="data" :section="section"></statement-transaction-mapped-component>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>

            <!-- report for imported Invoices -->
            <div class="row" v-if="step > 0 && report == 'importedInv'">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="justify-content-center align-items-center m-t-50 m-b-50">
                                <div class="row">
                                    <div class="col-3">
                                        <validation-wrapper-component :validator="$v.parameters.startDate">
                                            <label class="all-caps">Start Date</label>
                                            <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-3">
                                        <validation-wrapper-component :validator="$v.parameters.endDate">
                                            <label class="all-caps">End Date</label>
                                            <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-3">
                                        <div class="row text-center">
                                            <div class="col b-a b-grey padding-20 m-r-15 pointer bg-complete text-white" @click="getHistoryImportedInvReport()">History Imported Invoices Report</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-t-10 m-b-10">
                                <div class="col">
                                    <div class="row p-t-10 p-b-10 b-b b-grey text-master-light">
                                        <div class="col-2">Date</div>
                                    </div>
                                </div>
                            </div>

                            <list-component :key="step" ref="HistoryImportedInvList" section="HistoryImportedInvSection" :endpoint="route('api.accounting.history.imported')" :options="filter">
                                <template slot="list" slot-scope="{data}">
                                    <history-imported-invoices :data="data" :section="section"></history-imported-invoices>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>

            <!-- report for imported Receipts -->
            <div class="row" v-if="step > 0 && report == 'importedRec'">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="justify-content-center align-items-center m-t-50 m-b-50">
                                <div class="row">
                                    <div class="col-3">
                                        <validation-wrapper-component :validator="$v.parameters.startDate">
                                            <label class="all-caps">Start Date</label>
                                            <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-3">
                                        <validation-wrapper-component :validator="$v.parameters.endDate">
                                            <label class="all-caps">End Date</label>
                                            <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
                                        </validation-wrapper-component>
                                    </div>
                                    <div class="col-3">
                                        <div class="row text-center">
                                            <div class="col b-a b-grey padding-20 m-r-15 pointer bg-complete text-white" @click="getHistoryImportedRecReport()">History Imported Receipts Report</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-t-10 m-b-10">
                                <div class="col">
                                    <div class="row p-t-10 p-b-10 b-b b-grey text-master-light">
                                        <div class="col-2">Date</div>
                                    </div>
                                </div>
                            </div>

                            <list-component :key="step" ref="HistoryImportedRecList" section="HistoryImportedRecSection" :endpoint="route('api.accounting.history.imported')" :options="filter">
                                <template slot="list" slot-scope="{data}">
                                    <history-imported-receipts :data="data" :section="section"></history-imported-receipts>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { required } from "vuelidate/lib/validators";
    export default {
        data() {
            return {
                parameters: {
                    startDate: '',
                    endDate: '',
                    owner_reference: '',
                    invoice_reference: '',
                    receipt_reference: ''
                },
                step: 0,
                filter: {},
                report: ''
            }
        },
        validations: {
            parameters: {
                startDate: {
                    required
                },
                endDate: {
                    required
                },
                owner_reference: {},
                invoice_reference: {},
                receipt_reference: {}
            },
        },
        created(){
            this.parameters.startDate = this.startDate();
            this.parameters.endDate = this.endDate();
        },
        methods: {
            startDate() {
                var date = new Date();
                return '01-'+(date.getMonth() + 1)+'-'+date.getFullYear();
            },
            endDate() {
                var date = new Date();
                var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
                return lastDay.getDate()+'-'+(lastDay.getMonth() + 1)+'-'+lastDay.getFullYear();
            },
            getReportFilter() {
                this.filter = {min_amount: 0, is_mapped: true, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [3], per_page: 100, order_by: {column: 'posting_date', DESC: true}};

                this.filter = {...this.filter, ...{statement_transaction_posting_start: this.parameters.startDate}};
                this.filter = {...this.filter, ...{statement_transaction_posting_end:this.parameters.endDate}}

                if (typeof this.parameters.owner_reference != 'undefined' && this.parameters.owner_reference != '') this.filter = {...this.filter, ...{statement_transaction_owner_reference: this.parameters.owner_reference}};

                if (typeof this.parameters.invoice_reference != 'undefined' && this.parameters.invoice_reference != '') this.filter = {...this.filter, ...{statement_transaction_invoice_reference: this.parameters.invoice_reference}};

                if (typeof this.parameters.receipt_reference != 'undefined' && this.parameters.receipt_reference != '') this.filter = {...this.filter, ...{statement_transaction_receipt_reference: this.parameters.receipt_reference}};

                this.step = this.step + 1;
                this.report = 'mappedRecords';
            },
            getHistoryImportedRecReport() {
                this.filter = {
                    imported_date_from: this.parameters.startDate,
                    imported_date_to:this.parameters.endDate,
                    group_by_imported_date:true,
                    type:'receipts'
                };
                this.step = this.step + 1;
                this.report = 'importedRec';
            },
            getHistoryImportedInvReport() {
                this.filter = {
                    imported_date_from: this.parameters.startDate,
                    imported_date_to:this.parameters.endDate,
                    group_by_imported_date:true,
                    type:'invoices'
                };
                this.step = this.step + 1;
                this.report = 'importedInv';
            }
        },
    }

</script>