<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t("Depreciation Payment Report") }}
        </span>

        <!-- Filter Button + Offcanvas -->
        <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("ASSETS") }}</label>
                        <Multiselect
                            mode="tags"
                            :close-on-select="false"
                            v-model="params.asset_id"
                            trackBy="asset_name"
                            value="id"
                            label="asset_name"
                            :searchable="true"
                            :options="group_assets"
                        />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Invoice Number') }}</label>
                        <input type="text" class="form-control border-1" v-model="params.invoice_number" :placeholder="$t('Invoice Number')" />
                    </div>
                    <label class="form-label">{{ $t('Paid Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker :placeholder="$t('Paid 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 w-100"
                            @click="funSearchData"
                        >
                            <i class="fa fa-search"></i> {{ $t("Search") }}
                        </button>
                    </div>

                    <div class="list-group mb-3">
                        <button
                            type="button"
                            class="btn btn-primary w-100"
                            @click="printP"
                        >
                            <i class="fa fa-print"></i> {{ $t("Print") }}
                        </button>
                    </div>

                    <div class="list-group mb-3">
                        <button
                            type="button"
                            class="btn btn-danger w-100"
                            @click="exportExcell"
                        >
                            <i class="fa fa-file-export"></i> {{ $t("Export") }}
                        </button>
                    </div>
                </div>
            </div>
        </template>

        <!-- Report Table -->
        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report
                        :title="$t('Depreciation Payment Report')"
                        :date="params.date"
                        :date_title="'កាលបរិច្ឆេទព្រីន'"
                        style="display: none"
                    ></header-report>

                    <table class="table table-bordered" id="excel-table">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th>ល.រ</th>
                                <th>{{ $t("Asset Name") }}</th>


                                <th>{{ $t("Brand") }}</th>
                                <th>{{ $t("Currency") }}</th>
                                <th>{{ $t("Invoice Number") }}</th>
                                <th>{{ $t("Depreciation Date") }}</th>

                                <th class="text-end">{{ $t("Paid Date") }}</th>
                                <th class="text-end">
                                    {{ $t("Total Amount") }}
                                </th>
                                <th class="text-end">{{ $t("Paid") }}</th>
                                
                                <th class="text-end">
                                    {{ $t("Remain Balance") }}
                                </th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr
                                v-for="(value, index) in dataDePayments.data"
                                :key="index"
                            >
                                <td>{{ index + 1 }}</td>
                                <td>{{ value.asset_name }}</td>
                                <td>{{ value.branch_name }}</td>
                                <td>{{ value.currency_name }}</td>
                                <td>{{ value.invoice_number }}</td>
                                <td>{{ value.depreciation_date | onlyDate }}</td>
                                <td class="text-end">
                                    {{ value.paid_date | onlyDate }}
                                </td>
                                
                                <td class="text-end">
                                    {{ value.total_amount | numberFomartValue }}
                                </td>
                                <td class="text-end">
                                    {{ value.paid | numberFomartValue }}
                                </td>
                               
                                <td class="text-end">
                                    {{
                                        value.loan_balance | numberFomartValue
                                    }}
                                </td>
                            </tr>
                            <tr class="table-active">
                                <td colspan="7" class="text-end">
                                    {{ $t("Total") }}
                                </td>
                                <th class="text-end">
                                    {{ sumTotalAmount | numberFomartValue }}
                                </th>
                                <th class="text-end">
                                    {{ sumTotalPaid | numberFomartValue }}
                                </th>
                               
                                <th class="text-end">
                                    {{ sumTotalBalance | numberFomartValue }}
                                </th>
                            </tr>
                        </tbody>
                    </table>

                    <footer-report style="display: none"></footer-report>
                </div>
            </div>

            <!-- Pagination -->
            <cumstom-pagination
                :pageShow="true"
                @PageChange="PageChange($event)"
                :data="dataDePayments"
                @onChangePage="funGetData($event)"
            ></cumstom-pagination>
        </div>

        <!-- Custom Modal -->
        <div slot="modal-custom">
            <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
        </div>
    </theme-table>
</template>

<script>
import moment from "moment";
import ThemeTable from "../../../components/ThemeTable.vue";
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 { exportTableToExcel } from "../../../exportExcel.js";

export default {
    components: {
        ThemeTable,
        CumstomPagination,
        CustomDateFilter,
        HeaderReport,
        FooterReport,
    },
    data() {
        return {
            moment: moment,
            format: "YYYY-MM-DD",
            dataDePayments: { data: [] },
            group_assets: [],
            params: {
                page: 1,
                per_page: 25,
                pagin: false,
                asset_id: [],
                date: "",
                invoice_number: "",
            },
        };
    },
    created() {
        this.funGetData();
        this.getGroupAsset();
    },
    methods: {
        // Fetch asset group for filter
        getGroupAsset() {
            axios
                .get("accounting/get-asset")
                .then((res) => {
                    this.group_assets = res.data;
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        // Get depreciation report data
        funGetData(page = 1) { 
            this.params.page = page;
            axios
                .get("accounting/get-depreciation-report", {
                    params: this.params,
                })
                .then((res) => {
                    this.dataDePayments = res.data;
                })
                .catch((error) => {
                    if (
                        error.message === "Request failed with status code 403"
                    ) {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
        },

        funSearchData() {
            this.params.pagin = true;
            this.funGetData();
        },

        // Handle per-page change
        PageChange(e) {
            this.params.per_page = e.target.value;
            this.funGetData();
        },

        // Choose date filter
        chooseDate(value) {
            this.params.date = value.data;
            this.funGetData();
        },

        // Print function
        printP() {
            this.$htmlToPaper("show-print");
        },

        // Export Excel
        async exportExcell() {
            this.$isLoading(true);
            try {
                await exportTableToExcel({
                    tableId: "excel-table",
                    filename: "DepreciationReportList",
                    reportTitle: "របាយការណ៍ទូទាត់រំលោះ",
                    subDate: this.params.date,
                });
            } catch (e) {
                this.$toast.warning(e.message);
            } finally {
                this.$isLoading(false);
            }
        },
    },
    computed: {
        sumTotalAmount() {
            return this.dataDePayments.data.reduce(
                (sum, item) => sum + parseFloat(item.total_amount || 0),
                0
            );
        },
        sumTotalPaid() {
            return this.dataDePayments.data.reduce(
                (sum, item) => sum + parseFloat(item.paid || 0),
                0
            );
        },
        sumTotalBalance() {
            return this.dataDePayments.data.reduce(
                (sum, item) => sum + parseFloat(item.loan_balance || 0),
                0
            );
        },
    },
};
</script>
