<template>
    <theme-table :noneActions="true">
        <div slot="body">
            <div class="row d-flex mb-3">
                <div class="col-sm-6">
                    <h5 class="text-moul">{{ $t('History Payment') }}</h5>
                </div>
                <div class="col-sm-6 d-flex">
                    <Multiselect v-model="loan_id" @input="fSearchPayment" trackBy="name" value="id" label="name" :searchable="true" :options="clients" :placeholder="$t('Client Name')" />
                    <button type="button" @click="printP" class="btn btn-primary text-nowrap ms-2"><i class="fa fa-print"></i> {{ $t('Print') }}</button>
                </div>
            </div>
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('History Payment')" style="display:none"></header-report>
                    <div class="row mx-0 mb-1">
                        <div class="col-7 px-0">
                            <table>
                                <tr>
                                    <td class="pe-3">លេខកូដអតិថិជន</td>
                                    <td>{{ loanSchedule.client_code }}</td>
                                </tr>
                                <tr>
                                    <td class="pe-3">លេខកូដឥណទាន</td>
                                    <td>
                                        <p>{{ loanSchedule.loan_code }}</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-3">ឈ្មោះអតិថិជន</td>
                                    <td>
                                        <p>{{ loanSchedule.client_name }}</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-3">អាសយដ្ឋាន</td>
                                    <td class="d-flex">
                                        {{ loanSchedule.short_address }}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-3">លេខទំនាក់ទំនង</td>
                                    <td>{{ loanSchedule.client_phone }}</td>
                                </tr>
                                <tr>
                                    <td class="pe-3">ជំហាន</td>
                                    <td><span v-if="loanSchedule">ទី</span>{{ loanSchedule.level_loan }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-5 px-0">
                            <table class="text-nowrap">
                                <tr>
                                    <td class="pe-3">ចំនួនកាលវិភាគ</td>
                                    <td>
                                        {{ loanSchedule.period }} {{ funTerm(loanSchedule.term_type)}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-3">ចំនួនឥណទាន</td>
                                    <td v-if="loanSchedule">{{ loanSchedule.loan_out | numberFomartValue }}</td>
                                </tr>
                                <tr>
                                    <td class="pe-3">រូបិយប័ណ្ណ</td>
                                    <td v-if="loanSchedule">{{ loanSchedule.currency_id==1?'KHR':'USD' }}</td>
                                </tr>
                                <tr>
                                    <td class="pe-3">កាលបរិច្ឆេទខ្ចីប្រាក់</td>
                                    <td>{{ loanSchedule.installment_date | onlyDate }}</td>
                                </tr>
                                <tr>
                                    <td class="pe-3">ថ្ងៃបង់ដំបូង</td>
                                    <td>{{ loanSchedule.start_date | onlyDate }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <table class="table table-bordered">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th>{{ $t("#") }}</th>
                                <th>{{ $t("Payment Date") }}</th>
                                <th>{{ $t("Received Date") }}</th>
                                <th>{{ $t("Principal") }}</th>
                                <th>{{ $t("Interest") }}</th>
                                <th>{{ $t("Operating Services") }}</th>
                                <th>{{ $t("Payment") }}</th>
                                <th>{{ $t("Received") }}</th>
                                <th>{{ $t("Unreceive") }}</th>
                                <th>{{ $t("Loan Balance") }}</th>
                                <th>{{ $t("Paid Penalty") }}</th>
                                <th>{{ $t("Penalty Waiv") }}</th>
                                <th>លឿន/យឺត</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(acc, index) in dataPayment.data" :key="index">
                                <td> {{ index + 1 }} </td>
                                <td>{{ acc.payment_date | onlyDate}}</td>
                                <td>{{ acc.received_date | onlyDate}}</td>
                                <td>{{ acc.principal | numberFomartValue }}</td>
                                <td>{{ acc.interest_per_month | numberFomartValue }}</td>
                                <td>{{ acc.operating_service | numberFomartValue }}</td>
                                <td>{{ acc.payment_per_month | numberFomartValue }}</td>
                                <td>{{ acc.received | numberFomartValue }}</td>
                                <td>{{ acc.unreceived | numberFomartValue }}</td>
                                <td>{{ acc.loan_balance | numberFomartValue }}</td>
                                <td>{{ acc.penalty | numberFomartValue }}</td>
                                <td>{{ acc.waiv_penalty | numberFomartValue }}</td>
                                <td>
                                    <span :class="acc.fast_slow>0?'text-danger':''">{{ -acc.fast_slow}}</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display:none"></footer-report>
                </div>
            </div>
        </div>
    </theme-table>
</template>

<script>
    import ThemeTable from "../../components/ThemeTable.vue"
    import HeaderReport from '../../components/report/header.vue'
    import FooterReport from '../../components/report/footer.vue'
    import moment from 'moment';
    export default {
        components: {
            ThemeTable,
            HeaderReport,
            FooterReport,
        },
        data() {
            return {
                moment       : moment,
                format       : 'YYYY-MM-DD',
                clients      : [],
                dataPayment  : [],
                loan_id      : "",
                loanSchedule : "",
            }
        },
        created() {
            this.fGetData();
        },
        methods: {
            fGetData() {
                axios.get("admin-api/com-all-client-loan").then((res) => {
                    this.clients = res.data;
                }).catch((error) => {
                    console.log(error);
                });
            },
            fSearchPayment(){
                this.dataPayment  = [];
                this.loanSchedule = "";
                if(this.loan_id!='' && this.loan_id!=null){
                    axios.get("admin-api/loans/history-payment/" + this.loan_id).then((res) => {
                        this.dataPayment = res.data;
                        this.loanSchedule= res.data.loan;
                    }).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 "ខែ";
                }
            },
            printP() {
                this.$htmlToPaper('show-print');
            },
        }
    }
</script>
