<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="(window as any).route('api.accounting.bank.transaction')" :options="filter">
                                <template #list="{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="(window as any).route('api.accounting.history.imported')" :options="filter">
                                <template #list="{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="(window as any).route('api.accounting.history.imported')" :options="filter">
                                <template #list="{data}">
                                    <history-imported-receipts :data="data" :section="section"></history-imported-receipts>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue';
    import { useVuelidate } from '@vuelidate/core';
    import { required } from '@vuelidate/validators';

    const props = defineProps<{
        section: string;
    }>();

    const parameters = reactive({
        startDate: '',
        endDate: '',
        owner_reference: '',
        invoice_reference: '',
        receipt_reference: ''
    });

    const step = ref(0);
    const filter = ref<Record<string, any>>({});
    const report = ref('');

    const rules = {
        parameters: {
            startDate: { required },
            endDate: { required },
            owner_reference: {},
            invoice_reference: {},
            receipt_reference: {}
        }
    };

    const v$ = useVuelidate(rules, { parameters });

    const getStartDate = () => {
        const date = new Date();
        return '01-' + (date.getMonth() + 1) + '-' + date.getFullYear();
    };

    const getEndDate = () => {
        const date = new Date();
        const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
        return lastDay.getDate() + '-' + (lastDay.getMonth() + 1) + '-' + lastDay.getFullYear();
    };

    onMounted(() => {
        parameters.startDate = getStartDate();
        parameters.endDate = getEndDate();
    });

    const getReportFilter = () => {
        filter.value = {
            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 }
        };

        filter.value.statement_transaction_posting_start = parameters.startDate;
        filter.value.statement_transaction_posting_end = parameters.endDate;

        if (parameters.owner_reference !== '') {
            filter.value.statement_transaction_owner_reference = parameters.owner_reference;
        }
        if (parameters.invoice_reference !== '') {
            filter.value.statement_transaction_invoice_reference = parameters.invoice_reference;
        }
        if (parameters.receipt_reference !== '') {
            filter.value.statement_transaction_receipt_reference = parameters.receipt_reference;
        }

        step.value++;
        report.value = 'mappedRecords';
    };

    const getHistoryImportedRecReport = () => {
        filter.value = {
            imported_date_from: parameters.startDate,
            imported_date_to: parameters.endDate,
            group_by_imported_date: true,
            type: 'receipts'
        };
        step.value++;
        report.value = 'importedRec';
    };

    const getHistoryImportedInvReport = () => {
        filter.value = {
            imported_date_from: parameters.startDate,
            imported_date_to: parameters.endDate,
            group_by_imported_date: true,
            type: 'invoices'
        };
        step.value++;
        report.value = 'importedInv';
    };

    const window = (globalThis as any);
</script>