<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row justify-content-center align-items-center m-t-50 m-b-50" v-show="step === 0">
                        <div class="col-5">
                            <div class="row text-center">
                                <div class="col b-a b-grey padding-50 m-r-15 pointer" :class="[{'bg-complete': type === 1}, {'text-white': type === 1}]" @click="type=1">Receivable Mapping</div>
                                <div class="col b-a b-grey padding-50 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Payable Mapping</div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center align-items-center m-t-50 m-b-50" v-if="type">
                        <div class="col-8">
                            <div class="row text-center m-b-50" v-if="step">
                                <div class="col">
                                    <h4 class="all-caps">{{ type === 1 ? 'Receivable Mapping' : 'Payable Mapping'}}</h4>
                                </div>
                            </div>
                            <div class="row text-center align-items-center">
                                <div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 1}, {'text-white': stage === 1}]" @click="startMapping(1)">Mapping Approval</div>
                                <div class="col-auto"><i class="fa fa-angle-double-right fs-20"></i></div>
                                <div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 2}, {'text-white': stage === 2}]" @click="startMapping(2)">Mapping Review</div>
                                <div class="col-auto"><i class="fa fa-angle-double-right fs-20"></i></div>
                                <div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 3}, {'text-white': stage === 3}]" @click="startMapping(3)">Unknown</div>
                                <div class="col-auto"><i class="fa fa-angle-double-right fs-20"></i></div>
                                <div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 4}, {'text-white': stage === 4}]" @click="startMapping(4)">Pending Export</div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center align-items-center m-t-50 m-b-50 hide" v-if="type">
                        <div class="col-5">
                            <div class="row text-center">
                                <div class="col b-a b-grey padding-30 m-r-15 pointer" :class="[{'bg-complete': type === 1}, {'text-white': type === 1}]" @click="type=1">All</div>
                                <div class="col b-a b-grey padding-30 m-r-15 pointer" :class="[{'bg-complete': type === 1}, {'text-white': type === 1}]" @click="type=1">Sales</div>
                                <div class="col b-a b-grey padding-30 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Wallet Top Up</div>
                                <div class="col b-a b-grey padding-30 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Internal Bank Transfer In</div>
                                <div class="col b-a b-grey padding-30 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Unknown</div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center m-b-50" v-show="step === 0">
                        <div class="col-4">
                            <div class="row">
                                <div class="col">
                                    <button type="button" class="btn btn-lg btn-block btn-primary b-rad-none" @click="startMapping(1)" v-if="type">Start Mapping</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row p-b-15 p-t-15 bg-master-lighter" v-show="step !== 0">
                <div class="col"></div>
                <div class="col-auto pointer bold text-danger" @click="step=0">X</div>
            </div>
            <div class="row parentContainer" v-if="step > 0">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div v-if="stage === 1">
                                <div class="btn btn-primary btn-sm m-t-10 requestModal" data-type="approveMappingTransaction">Approve all the Mapping Below</div>
                                <modal-component class="animate__animated animate__fast animate__fadeIn" type="approveMappingTransaction">
                                    <general-confirmation-form-component
                                        contentText="Are you sure you want to approve all these Transaction?"
                                        modalType="confirm"
                                        class="text-center"
                                        :apiRoute="route('api.accounting.statement_transaction.owner.groupApprove')"
                                        apiMethod="post"
                                        :params="filter"
                                        :section="section"
                                    >
                                    </general-confirmation-form-component>
                                </modal-component>
                            </div>

                            <!-- filter for Pending Export tab -->
                            <div v-if="stage === 4">
                                <div class="row pt-3 pb-3">
                                    <div class="col-5 col-md-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-5 col-md-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-2 col-md-auto">
                                        <div class="btn btn-lg btn-primary fs-11 w-100 h-100 d-flex justify-content-center align-items-center" @click="startMapping(4)">
                                            <span>
                                                Search
                                            </span>
                                        </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-5">
                                            <div class="row">
                                                <div class="col">System</div>
                                                <div class="col">Type</div>
                                                <div class="col">Reference</div>
                                            </div>
                                        </div>
                                        <div class="col-1">Amount</div>
                                        <div class="col-1" v-if="stage === 4"></div>                                        
                                        <div class="col-1" v-if="stage === 4">Select <input type="checkbox"  v-model="selectAll">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <list-component :key="stage" ref="bankTransactionsList" section="bankTransactionSection" :endpoint="route('api.accounting.bank.transaction')" :options="this.filter">
                                <template slot="list" slot-scope="{data}">
                                    <statement-transaction-component :data="data" :section="section" :stage="stage" :selectAll="selectAll"></statement-transaction-component>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row parentContainer" v-if="stage === 4">
                <div class="col">
                    <div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-show="exportStage === 0">
                        <div class="col">
                            <div class="btn btn-lg btn-primary" @click="exportInvoiceToAutoCount">Export Invoices To AutoCount</div>
                            <!-- todo-new: delete later --><br><div class="btn btn-lg btn-primary m-t-20" @click="exportStage++">Nest Step</div>
                            <br>
                            <div class="row">
                                <div class="col">
                                    <a href="https://docs.google.com/presentation/d/1N9QQOEMajYVVHQ4lMN7_Cu0BYNe4NYdV-TnxAhJUgRE/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-if="exportStage === 1">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <file-input-component :validator="$v.files" v-model="files">
                                        <template slot="label">
                                        </template>
                                    </file-input-component>
                                </div>
                            </div>
                            <div class="btn btn-lg btn-primary m-t-20 requestModal" data-type="ModalImportInvoice" @click="importInvoice">Import Invoices</div>
                            <!-- todo-new: delete later --><br><div class="btn btn-lg btn-primary m-t-20" @click="exportStage++">Nest Step</div>
                            <br>
                            <div class="row">
                                <div class="col">
                                    <a href="https://docs.google.com/presentation/d/1XwKcdBCpHQSCQmsgnUHsypcqk5kdc8uZMqkjW9JXiw4/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="ModalImportInvoice">
                                        <imported-invoice-mapped-component section="importInvoiceMapping" v-if="invMappedTrue" :files="files"></imported-invoice-mapped-component>
                                    </modal-component>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-show="exportStage === 2">
                        <div class="col">
                            <div class="btn btn-lg btn-primary" @click="exportReceiptToAutoCount">Export Receipts To AutoCount</div>
                            <!-- todo-new: delete later --><br><div class="btn btn-lg btn-primary m-t-20" @click="exportStage++">Nest Step</div>
                            <br>
                            <div class="row">
                                <div class="col">
                                    <a href="https://docs.google.com/presentation/d/1xMiWjU1hqPaihMhbgflFSDsu1sC_0Lk7OFmwDaXVt-w/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-if="exportStage === 3">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <file-input-component :validator="$v.files" v-model="files">
                                        <template slot="label">
                                        </template>
                                    </file-input-component>
                                </div>
                            </div>
                            <div class="btn btn-lg btn-primary m-t-20 requestModal" data-type="ModalImportReceipt" @click="importReceipts">Import Receipts</div>
                            <!-- todo-new: delete later --><br><div class="btn btn-lg btn-primary m-t-20" @click="exportStage++">Nest Step</div>
                            <br>
                            <div class="row">
                                <div class="col">
                                    <a href="https://docs.google.com/presentation/d/1xMiWjU1hqPaihMhbgflFSDsu1sC_0Lk7OFmwDaXVt-w/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="ModalImportReceipt">
                                        <imported-receipt-mapped-component section="importReceiptMapping" v-if="recMappedTrue" :files="files"></imported-receipt-mapped-component>
                                    </modal-component>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-show="exportStage === 4">
                        <div class="col">
                            All Done, Good Job <span class="fs-50">&#128079;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { required } from "vuelidate/lib/validators";

export default {
    components: {},


    data(){
        return {
            parameters: {
                startDate: '',
                endDate: '',
            },
            type: null,
            stage: null,
            exportStage: 0,
            step: 0,
            filter: {},
            files: [],
            parameters: {},
            section: 'bankTransactionSection',
            invMappedTrue: false,
            recMappedTrue: false,
            selectAll: false,
        }
    },
    validations: {
        parameters: {
            startDate: {
                required
            },
            endDate: {
                required
            },
        },
        files: {
            // required // todo-new: set required if is pdf section
        }
    },
    methods: {
        importInvoice(){
            this.invMappedTrue = true;
        },
        importReceipts(){
            this.recMappedTrue = true;
        },
        exportInvoiceToAutoCount(){
            const checkedStatementTransactions = this.getCheckedStatementOwners();

            let route = this.route('invoiceTransactions.export')+'?filter='+JSON.stringify(this.filter);
            if (checkedStatementTransactions) {
                route += '&bankStatementTransactionId='+checkedStatementTransactions;
            }

            window.open(route, '_blank');
        },
        exportReceiptToAutoCount(){
            const checkedStatementTransactions = this.getCheckedStatementOwners();

            this.filter['where_has_owners_and_null'] = 'statement_transaction_owners.receipt_reference';
            this.filter['where_has_owners_and_not_null'] = 'statement_transaction_owners.invoice_reference';
            let route = this.route('receiptTransactions.export')+'?filter='+JSON.stringify(this.filter);
            if (checkedStatementTransactions) {
                route += '&bankStatementTransactionId='+checkedStatementTransactions;
            }

            window.open(route, '_blank');
        },
        getCheckedStatementOwners() {
            let bankStatementTransactionId = [];
            $('.request_export_item:checked').each(function() {
                bankStatementTransactionId.push($(this).val());
            });
            return (bankStatementTransactionId.length > 0 ? JSON.stringify(bankStatementTransactionId) : null);
        },
        successHandler(){
            this.step += 1;

            // reset parameters
            this.files = [];
            this.parameters = {};
        },
        startMapping(stage){

            this.stage = stage;
            this.exportStage = 0;
            if(this.type === 1){
                switch(this.stage){
                    case 1:
                        this.filter = {min_amount: 0, is_mapped: true, is_mapped_with_multiple: false, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
                        break;
                    case 2:
                        this.filter = {min_amount: 0, is_mapped: true, is_mapped_with_multiple: true, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
                        break;
                    case 3:
                        this.filter = {min_amount: 0, is_mapped_false_or_mapped_but_status_in: [4], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
                        break;
                    case 4:
                        this.filter = {min_amount: 0, is_mapped: true, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [2], per_page: 100, order_by: {column: 'posting_date', DESC: true}}

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

                        if (typeof this.parameters.endDate != 'undefined' && this.parameters.endDate != '') this.filter = {...this.filter, ...{statement_transaction_posting_end:this.parameters.endDate}};
                        break;
                }
            }

            if(this.type === 2){
                switch(this.stage){
                    case 1:
                        this.filter = {max_amount: 0, is_mapped: true, is_mapped_with_multiple: false, statement_transaction_owner_type_in: [3, 5],statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
                        break;
                    case 2:
                        this.filter = {max_amount: 0, is_mapped: true, is_mapped_with_multiple: true, statement_transaction_owner_type_in: [3, 5], statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
                        break;
                    case 3:
                        this.filter = {max_amount: 0, is_mapped: false, per_page: 100, order_by: {column: 'posting_date', DESC: true}}
                        break;
                    case 4:
                        this.filter = {max_amount: 0, is_mapped: true, statement_transaction_owner_type_in: [3, 5], statement_transaction_owner_status_in: [2], per_page: 100, order_by: {column: 'posting_date', DESC: true}}

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

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

                        break;
                }
            }

            this.step = 1;

            if(this.$refs.bankTransactionsList){
                this.$refs.bankTransactionsList.updateFilters(this.filter);
            }


        }
    }

}
</script>
