<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Loan Collection Report') }}
        </span>
        <template slot="more-button">
            <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
                aria-controls="offcanvasRight">{{ $t('Filter') }}</button>
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
                aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasRightLabel">{{ $t('Filter') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Client') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.client_id" trackBy="name"
                            value="id" label="name" :searchable="true" :options="clients" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Co') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.co_id" trackBy="name"
                            value="id" label="name" :searchable="true" :options="coes" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Term Type') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.term_type" trackBy="title"
                            value="id" label="title" :searchable="true" :options="termTypes" />
                    </div>
                    <label class="form-label">{{ $t('Payment Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker :placeholder="$t('Payment Date')" v-model="params.date" valueType="format"
                            format="YYYY-MM-DD"> </date-picker>
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" class="btn btn-success" @click="funSearchData"><i
                                class="fa fa-search"></i> {{ $t('Search') }}</button>
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" @click="printP" class="btn btn-primary"><i class="fa fa-print"></i> {{
                            $t('Print') }}</button>
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" @click="exportExcell" class="btn btn-danger"><i
                                class="fa fa-file-export"></i> {{ $t('Export') }}</button>
                    </div>
                </div>
            </div>
        </template>
        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('Loan Collection Report')" :date="params.date"
                        :date_title="$t('Payment Date')" :type="1" style="display: none;"></header-report>
                    <table class="table table-bordered" id="excel-table">
                        <thead class="text-nowrap fixed_head ">
                            <tr>
                                <th>{{ $t("#") }}</th>
                                <th>{{ $t("Client Code") }}</th>
                                <th>{{ $t("Client Name") }}</th>
                                <th>{{ $t("Phone") }}</th>
                                <th>{{ $t("Loan Code") }}</th>
                                <th>{{ $t("Address") }}</th>
                                <th>{{ $t("Currency") }}</th>
                                <th>{{ $t("Period") }}</th>
                                <th>{{ $t("Type Payment") }}</th>
                                <th>{{ $t("Sessions") }}</th>
                                <th>រយៈពេលខ្ចី</th>
                                <th>ចំនួនដងបានបង់</th>
                                <th>ចំនួនដងនៅសល់</th>
                                <th>{{ $t("Installment Date") }}</th>
                                <th>{{ $t("Payment Date") }}</th>
                                <th>{{ $t("Total Late") }}</th>
                                <th>{{ $t("Loan Out") }}</th>
                                <th>{{ $t("Balance Principal") }}</th>
                                <th>{{ $t("Principal") }}</th>
                                <th>{{ $t("Interest") }}</th>
                                <th>{{ $t("Operating Services") }}</th>
                                <th>{{ $t("Unreceived") }}</th>
                                <th>{{ $t("CO Name") }}</th>
                                <th>{{ $t("Phone") }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(value, index) in data_response.data" :key="index">
                                <td>{{ index + 1 }}</td>
                                <td>{{ value.client_code }}</td>
                                <td>{{ value.client_name }}</td>
                                <td>{{ value.client_phone }}</td>
                                <td>{{ value.loan_code }}</td>
                                <td>{{ value.village }}</td>
                                <td>{{ value.currency_name }}</td>
                                <td>{{ value.period }}</td>
                                <td>{{ funTerm(value.term_type) }}</td>
                                <td>{{ value.level_loan }}</td>
                                <td>{{ value.period }}</td>
                                <td>{{ value.period_paid }}</td>
                                <td>{{ value.period_unpaid }}</td>
                                <td>{{ value.installment_date | onlyDate }}</td>
                                <td>{{ value.payment_date | onlyDate }}</td>
                                <td>{{ value.total_late }} ថ្ងៃ</td>
                                <td>{{ value.loan_out | numberFomartValue }}</td>
                                <td>{{ value.balance_principal | numberFomartValue }}</td>
                                <td>{{ value.principal_late | numberFomartValue }}</td>
                                <td>{{ value.interest_late | numberFomartValue }}</td>
                                <td>{{ value.operat_late | numberFomartValue }}</td>
                                <td>{{ value.unreceived_late | numberFomartValue }}</td>
                                <td>{{ value.co_name }}</td>
                                <td>{{ value.co_phone }}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr class="c_bg_tfoot">
                                <td colspan="16" class="text-end">{{ $t("Total") }}</td>
                                <td>{{ sumLoanOut | numberFomartValue }}</td>
                                <td>{{ sumBalancePrincipal | numberFomartValue }}</td>
                                <td>{{ sumPrincipal | numberFomartValue }}</td>
                                <td>{{ sumInterest | numberFomartValue }}</td>
                                <td>{{ sumOperatService | numberFomartValue }}</td>
                                <td>{{ sumUnreceived | numberFomartValue }}</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                    <!-- <footer-report style="display: none;"></footer-report> -->
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="data_response"
                @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
        <div slot="modal-custom">
            <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
        </div>
    </theme-table>
</template>

<script>
import moment from "moment";
import CumstomPagination from "../../components/CustomPagination.vue";
import CustomDateFilter from "../../components/report/CustomDateFilter.vue";
import HeaderReport from "../../components/report/header.vue";
import FooterReport from "../../components/report/footer.vue";
import ThemeTable from "../../components/ThemeTable.vue";
import { exportTableToExcel } from "../../exportExcel.js";
export default {
    components: {
        CumstomPagination,
        CustomDateFilter,
        HeaderReport,
        FooterReport,
        ThemeTable
    },
    data() {
        return {
            moment: moment,
            format: "YYYY-MM-DD",
            data_response: { data: [] },
            clients: [],
            coes: [],
            termTypes: [],
            form: new Form({

            }),
            params: {
                page: 1,
                per_page: 25,
                search_text: "",
                type_collection: 1,

                client_id: [],
                co_id: [],
                date: null,
                pagin: false,
                term_type: [],
            },
        };
    },
    created() {
        this.getClient();
        this.getCO();
        this.funGetData();
        axios.get("admin-api/com-loan-term-type").then((res) => { this.termTypes = res.data });
    },
    methods: {
        getClient() {
            axios
                .get("admin-api/com-client")
                .then((res) => {
                    this.clients = res.data;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getCO() {
            axios
                .get("admin-api/com-co")
                .then((res) => {
                    this.coes = res.data;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        chooseDate(value) {
            this.params.date = value.data;
            this.funGetData();
        },
        funGetData(page = 1) {
            this.params.page = page;
            axios
                .get("admin-api/collection-report", {
                    params: this.params,
                })
                .then((res) => {
                    this.data_response = res.data;
                })
                .catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
        },
        PageChange: function (e) {
            this.params.per_page = e.target.value;
            this.funGetData();
        },
        funSearchData() {
            this.params.pagin = 'true';
            this.funGetData();
        },
        printP() {
            this.$htmlToPaper("show-print");
        },
        async exportExcell() {
            this.$isLoading(true)
            try {
                await exportTableToExcel({
                    tableId: "excel-table",
                    filename: "LoanCollectionReport",
                    reportTitle: "របាយការណ៍ប្រមូលប្រាក់កម្ចី",
                    subDate: this.params.date,
                })
            } catch (e) {
                this.$toast.warning(e.message);
            } finally {
                this.$isLoading(false)
            }
        },
        funTerm(status) {
            if (status == 1) {
                return 'ថ្ងៃ';
            } else if (status == 2) {
                return 'សប្ដាហ៍';
            } else if (status == 3) {
                return 'កន្លះខែ';
            } else if (status == 4) {
                return 'ខែ';
            }
        },
    },
    computed: {
        sumLoanOut: function () {
            var sum = 0;
            this.data_response.data.forEach(function (item) {
                sum += parseFloat(item.loan_out);
            });
            return sum;
        },
        sumBalancePrincipal: function () {
            var sum = 0;
            this.data_response.data.forEach(function (item) {
                sum += parseFloat(item.balance_principal);
            });
            return sum;
        },
        sumPrincipal: function () {
            var sum = 0;
            this.data_response.data.forEach(function (item) {
                sum += parseFloat(item.principal_late);
            });
            return sum;
        },
        sumInterest: function () {
            var sum = 0;
            this.data_response.data.forEach(function (item) {
                sum += parseFloat(item.interest_late);
            });
            return sum;
        },
        sumOperatService: function () {
            var sum = 0;
            this.data_response.data.forEach(function (item) {
                sum += parseFloat(item.operat_late);
            });
            return sum;
        },
        sumUnreceived: function () {
            var sum = 0;
            this.data_response.data.forEach(function (item) {
                sum += parseFloat(item.unreceived_late);
            });
            return sum;
        },
    },
};
</script>
