<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            <router-link :to="{ name: 'Loan' }"> {{ $t("Loan List") }} </router-link>
            <label class="px-1">/</label>
            <label> {{ $t("Schedule Repayment") }}</label>
        </span>
        <template slot="more-button">
            <button type="button" @click="printP" class="btn btn-primary">
                <i class="fa fa-print"></i> {{ $t("Print") }}
            </button>
        </template>
        <div slot="body">
            <div id="show-print" style="overflow-x: auto">
                <table class="w-100">
                    <tbody>
                        <tr>
                            <td>
                                <div class="table-schedule">
                                    <div class="table-responsive table_scroll report_print">
                                        <div class="report_header p-0 position-relative">
                                            <div class="d-flex align-items-center justify-content-center">
                                                <div>
                                                    <div class="title text-center">
                                                        <p class="title_km h5 text_moul pt-3">តារាងកាលវិភាគសងប្រាក់</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mx-0 mb-1">
                                            <div class="col-7 px-0">
                                                <table>
                                                    <tr>
                                                        <td class="pe-3">ឈ្មោះអតិថិជន</td>
                                                        <td>
                                                            <p>{{ clientSchedule.name }}</p>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">លេខកូដអតិថិជន</td>
                                                        <td>{{ clientSchedule.code }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">លេខទូរស័ព្ទ</td>
                                                        <td>{{ clientSchedule.phone }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">អាសយដ្ឋាន</td>
                                                        <td
                                                            class="d-flex"
                                                            v-if="
                                                            clientSchedule.village_id !=
                                                            null
                                                        "
                                                        >
                                                            <p>{{ clientSchedule.village_kh }}</p>
                                                            <p class="ps-3">{{ clientSchedule.commune_kh }}</p>
                                                            <p class="ps-3">{{ clientSchedule.district_kh }}</p>
                                                            <p class="ps-3">{{ clientSchedule.province_kh }}</p>
                                                        </td>
                                                        <td class="d-flex" v-else></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">មន្ត្រីឥណទាន</td>
                                                        <td>{{ coSchedule.name }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="col-5 px-0">
                                                <table class="text-nowrap">
                                                    <tr>
                                                        <td class="pe-3">លេខទូរស័ព្ទមន្ត្រីឥណទាន</td>
                                                        <td>{{ coSchedule.contact_number }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">ចំនួនឥណទាន</td>
                                                        <td>
                                                            {{ loanSchedule.loan_out | numberFomartValue }} {{ Curr.id== 1 ? "រៀល" : "ដុល្លារ" }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">រយៈពេល</td>
                                                        <td>
                                                            {{ loanSchedule.period }} {{ funTerm(loanSchedule.term_type)
                                                            }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">វគ្គទី</td>
                                                        <td>{{ loanSchedule.level_loan }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="pe-3">កាលបរិច្ឆេទខ្ចីប្រាក់</td>
                                                        <td>{{ loanSchedule.installment_date | onlyDate }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                        <div v-if="loanSchedule.term_type!==1">
                                            <table class="table table-bordered mb-1 border-dark">
                                                <thead class="text-nowrap text-center fixed_table">
                                                    <tr>
                                                        <th>ល.រ</th>
                                                        <th colspan="2">កាលបរិច្ឆេទបង់ប្រាក់</th>
                                                        <th>ប្រាក់ដើម</th>
                                                        <th>ការប្រាក់</th>
                                                        <th>សេវាប្រតិបត្តិការ</th>
                                                        <th>សរុបត្រូវបង់</th>
                                                        <th>សមតុល្យប្រាក់ដើម</th>
                                                        <th>ពិន័យបង់ផ្តាច់</th>
                                                        <th>ផ្សេងៗ</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="text-nowrap">
                                                    <tr v-for="(acc, index) in dataPayment.data" :key="index" :class="index==percent_50 ? 'table-active' : ''
                                                        ">
                                                        <td>{{ index + 1 }}</td>
                                                        <td>{{funDay(moment(acc.payment_date).format("dd"))}}</td>
                                                        <td>{{ acc.payment_date | onlyDate }}</td>
                                                        <td>{{ acc.principal | numberFomartValue }}</td>
                                                        <td>{{acc.interest_per_month | numberFomartValue}}</td>
                                                        <td>{{acc.operating_service | numberFomartValue}}</td>
                                                        <td class="text-bold">
                                                            {{ acc.payment_per_month | numberFomartValue}}
                                                        </td>
                                                        <td>{{acc.loan_balance | numberFomartValue}}
                                                        </td>
                                                        <td>
                                                            <span v-if="index>=percent_50"></span>
                                                            <span v-else>{{ acc.penalty_pay_off | numberFomartValue }}</span>
                                                        </td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div v-else>
                                            <div class="row g-2 mb-1">
                                                <div v-for="(chunk, tableIndex) in displayedTables" :key="tableIndex" :class="shouldShowSingleTable ? 'col-12' : 'col-6 font-12'">
                                                    <table class="table table-bordered mb-1 border-dark">
                                                        <thead class="text-center text-nowrap fixed_table">
                                                            <tr>
                                                                <th>ល.រ</th>
                                                                <th colspan="2">កាលបរិច្ឆេទបង់ប្រាក់</th>
                                                                <th>ប្រាក់ត្រូវបង់</th>
                                                                <th>ប្រាក់បានបង់</th>
                                                            </tr>

                                                        </thead>
                                                        <tbody class="text-nowrap">
                                                            <tr v-for="(acc, rowIndex) in chunk" :key="rowIndex">
                                                                <td>
                                                                    {{ (displayedTables[0].length * tableIndex) + rowIndex+1 }}
                                                                </td>
                                                                <td>
                                                                    {{ funDay( moment(acc.payment_date).format( "dd" ) ) }}
                                                                </td>
                                                                <td>{{ acc.payment_date | onlyDate }}</td>
                                                                <td class="text-bold">
                                                                    {{ acc.payment_per_month | numberFomartValue }}
                                                                </td>
                                                            <td><span v-if="acc.received>0">{{ acc.received | numberFomartValue }}</span></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row text-center">
                                            <div class="col-3">
                                                <p class="mb-2"><strong>ហត្ថលេខាភាគី(ក)</strong></p>
                                                <div class="mx-auto border-box-lg"></div>
                                            </div>
                                            <div class="col-6">
                                                <p class="mb-2"><strong>ស្នាមមេដៃអ្នកធានា</strong></p>
                                                <div class="d-flex justify-content-center gap-2">
                                                    <div class="border-box"></div>
                                                    <div class="border-box"></div>
                                                </div>
                                            </div>
                                            <div class="col-3">
                                                <p class="mb-2"><strong>ស្នាមមេដៃភាគី(ខ)</strong></p>
                                                <div class="d-flex justify-content-center gap-2">
                                                    <div class="border-box"></div>
                                                    <div class="border-box"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </theme-table>
</template>

<script>
    import HeaderReport from "../../components/report/header.vue";
    import HeaderTable from "../../components/report/HeaderTable.vue";
    import ThemeTable from "../../components/ThemeTable.vue";
    import moment from "moment";
    export default {
        props: ["id"],
        components: {
            HeaderReport,
            HeaderTable,
            ThemeTable,
        },
        data() {
            return {
                moment: moment,
                format: "YYYY-MM-DD",

                dataPayment: { data: [] },
                percent_50 : "",
                loanSchedule: "",
                clientSchedule: "",
                garuantor1: "",
                coSchedule: "",
                countPay: "",
                Curr: "",
                company: "",
                branch: "",
                type_logo: 1,
                type: 1,
                collateral_name: "",
            };
        },
        created() {
            this.funGetData();
            this.funGetCompany();
        },
        methods: {
            funGetCompany() {
                axios.get("admin-api/company").then((res) => {
                    this.company = res.data;
                });
            },
            calculateDaysBetweenPaymentDates(index) {
                if (index === 0) {
                    const currentDate = moment(this.dataPayment.data[index].payment_date);
                    const previousDate = moment(this.loanSchedule.installment_date);
                    return currentDate.diff(previousDate, "days");
                } else {
                    const currentDate = moment(this.dataPayment.data[index].payment_date);
                    const previousDate = moment(this.dataPayment.data[index - 1].payment_date);
                    return currentDate.diff(previousDate, "days");
                }
            },
            funGetData() {
                axios.get("admin-api/loans/show-payment/" + this.id).then((res) => {
                    this.dataPayment = res.data;
                    this.loanSchedule = res.data.loan;
                    this.clientSchedule = res.data.client;
                    this.garuantor1 = res.data.garuantor1;
                    this.coSchedule = res.data.co;
                    this.countPay = res.data.countPay;
                    this.Curr = res.data.currency;
                    this.collateral_name = res.data.collateral_name;
                    this.percent_50 = res.data.percent_50;
                }).catch((error) => {
                    console.log(error);
                });
            },
            funTerm(status) {
                if (status == 1) {
                    return "ថ្ងៃ";
                } else if (status == 2) {
                    return "សប្ដាហ៍";
                } else if (status == 3) {
                    return "កន្លះខែ";
                } else if (status == 4) {
                    return "ខែ";
                }
            },
            funDay(day) {
                if (day == "Mo") {
                    return "ចន្ទ";
                } else if (day == "Tu") {
                    return "អង្គារ";
                } else if (day == "We") {
                    return "ពុធ";
                } else if (day == "Th") {
                    return "ព្រហ";
                } else if (day == "Fr") {
                    return "សុក្រ";
                } else if (day == "Sa") {
                    return "សៅរ៍";
                } else {
                    return "អាទិត្យ";
                }
            },
            printP() {
                this.$htmlToPaper("show-print", {
                    styles: ["/css/app.css", "/css/print/print-tableschedule.css"],
                });
            },
        },
        computed: {
            shouldShowSingleTable() {
                const data = this.dataPayment?.data;
                if (!data) return true;

                const dataLength = data.length;
                return dataLength <= 20 || dataLength > 40;
            },
            displayedTables() {
                const data = this.dataPayment?.data;
                if (!data) return [];

                if (this.shouldShowSingleTable) {
                    return [data];
                } else {
                    const chunkSize = Math.ceil(data.length / 2);
                    return [data.slice(0, chunkSize), data.slice(chunkSize)];
                }
            },
            totalPrincipal: function () {
                var sum = 0;
                this.dataPayment.data.forEach(function (row) {
                    sum += parseFloat(row.principal);
                });
                return sum;
            },
            totalInterest: function () {
                var sum = 0;
                this.dataPayment.data.forEach(function (row) {
                    sum += parseFloat(row.interest_per_month);
                });
                return sum;
            },
            totalOperatService: function () {
                var sum = 0;
                this.dataPayment.data.forEach(function (row) {
                    sum += parseFloat(row.operating_service);
                });
                return sum;
            },
            totalPayment: function () {
                var sum = 0;
                this.dataPayment.data.forEach(function (row) {
                    sum += parseFloat(row.payment_per_month);
                });
                return sum;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .table-schedule {
        min-width: 210mm;
    }
    .border-box {
        border: 1px solid #000;
        width: 80px;
        height: 100px;
    }
    .border-box-lg{
        border: 1px solid #000;
        width: 160px;
        height: 100px;
    }
</style>
