<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">
            <!-- <div class="me-2">
                <select style="min-width: 80px;" v-model="type_logo" class="form-select">
                    <option value="null" disabled="true">{{ $t('Please select') }}</option>
                    <option value="1">{{ $t('Show Logo') }}</option>
                    <option value="2">{{ $t("Don't Show Logo") }}</option>
                </select>
            </div> -->
            <!-- <div class="me-2">
                <select
                    style="min-width: 80px"
                    v-model="type"
                    class="form-select"
                >
                    <option value="null" disabled="true">
                        {{ $t("Please select") }}
                    </option>
                    <option value="1">{{ $t("Show") }}</option>
                    <option value="2">{{ $t("Don't Show") }}</option>
                </select>
            </div> -->
            <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">
                <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" style="height: 115px">
                                <div>
                                    <div class="title text-center">
                                        <p class="title_km h5 text_moul">
                                            តារាងកាលវិភាគសងប្រាក់
                                        </p>
                                        <p class="title_en h5">Loan Schedule</p>
                                    </div>
                                    <!-- <div
                                        v-show="type_logo == 1"
                                        class="logo"
                                        style="
                                            position: absolute;
                                            right: 0;
                                            top: 0;
                                        "
                                    >
                                        <img
                                            :src="loanSchedule.image1"
                                            alt=""
                                            width="110px"
                                        />
                                    </div>
                                    <div
                                        v-show="type_logo == 1"
                                        class="logo"
                                        style="
                                            position: absolute;
                                            right: 0;
                                            top: 0;
                                        "
                                    >
                                        <img
                                            :src="loanSchedule.image"
                                            alt=""
                                            width="110px"
                                        />
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <!-- <div class="row mx-0 mb-1">
                            <div class="col-12">
                                <p class="text_moul text-center">
                                    តារាងកាលវិភាគសងប្រាក់
                                </p>
                            </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>
                        <table class="table table-bordered mb-1 border-dark">
                            <thead class="text-nowrap fixed_table">
                                <tr>
                                    <th>ល.រ</th>
                                    <th colspan="2">កាលបរិច្ឆេទបង់ប្រាក់</th>
                                    <th>ចំនួនថ្ងៃបង់</th>
                                    <th>ប្រាក់ដើម</th>
                                    <th>ការប្រាក់</th>
                                    <!-- <th v-show="type == 1">
                                        សេវាប្រតិបត្តិការ
                                    </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 == countPay - 1 ? 'bg-ccc' : ''
                                    "
                                >
                                    <td>{{ index + 1 }}</td>
                                    <td>
                                        {{
                                            funDay(
                                                moment(acc.payment_date).format(
                                                    "dd"
                                                )
                                            )
                                        }}
                                    </td>
                                    <td>{{ acc.payment_date | onlyDate }}</td>
                                    <td>
                                        {{
                                            calculateDaysBetweenPaymentDates(
                                                index
                                            )
                                        }}
                                    </td>
                                    <td>
                                        {{ acc.principal | numberFomartValue }}
                                    </td>
                                    <td>
                                        {{
                                            acc.interest_per_month
                                                | numberFomartValue
                                        }}
                                    </td>
                                    <!-- <td v-show="type == 1">
                                        {{
                                            acc.operating_service
                                                | numberFomartValue
                                        }}
                                    </td> -->
                                    <td class="text-bold">
                                        {{
                                            acc.payment_per_month
                                                | numberFomartValue
                                        }}
                                    </td>
                                    <td>
                                        {{
                                            acc.loan_balance | numberFomartValue
                                        }}
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th class="text-center" colspan="4">
                                        {{ $t("Total") }}
                                    </th>
                                    <th>
                                        {{ totalPrincipal | numberFomartValue }}
                                    </th>
                                    <th>
                                        {{ totalInterest | numberFomartValue }}
                                    </th>
                                    <!-- <th v-show="type == 1">
                                        {{
                                            totalOperatService
                                                | numberFomartValue
                                        }}
                                    </th> -->
                                    <th>
                                        {{ totalPayment | numberFomartValue }}
                                    </th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tbody>
                        </table>
                        <div class="row text-center wrap-page">
                            <div class="col-4">
                                <p>
                                    <strong
                                        >ហត្ថលេខាម្ចាស់បំណុល ភាគី("ក")</strong
                                    >
                                </p>
                                <br />
                                <br />
                                <br />
                                <br />
                                <p>{{ loanSchedule.co_name }}</p>
                                <hr class="my-0" />
                                <p>
                                    ថ្ងៃខែឆ្នាំ
                                    {{
                                        loanSchedule.installment_date | onlyDate
                                    }}
                                </p>
                            </div>
                            <div class="col-4"></div>
                            <div class="col-4">
                                <p>
                                    <strong>ហត្ថលេខាកូនបំណុល ភាគី("ខ")</strong>
                                </p>
                                <br />
                                <br />
                                <br />
                                <br />
                                <p>
                                    {{ clientSchedule.name }}
                                    <span v-if="garuantor1?.name != null"
                                        >| {{ garuantor1?.name }}</span
                                    >
                                </p>
                                <hr class="my-0" />
                                <p>
                                    ថ្ងៃខែឆ្នាំ
                                    {{
                                        loanSchedule.installment_date | onlyDate
                                    }}
                                </p>
                            </div> 
                        </div>
                    </div>
                </div>
            </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: [] },
            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;
                })
                .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: {
        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;
}
</style>
