<template>

    <div class="modal fade" id="showDisbursement" aria-hidden="true" role="dialog" data-backdrop="static">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-span="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="print-disbursement">
                        <div v-for="index in 2" :key="index" :class="customClass(index)">
                            <div class="custom-reciept"  v-if="data">
                                <div class="header-receipt mb-0">
                                    <div class="row">
                                        <div class="col-6">
                                            <table class="m-0">
                                                <tr>
                                                    <td rowspan="3" colspan="2"class="pe-3 py-2"> <img src="images/logo.png" alt="" width="180px"></td>
                                                    <!-- <td class="align-bottom"><h6 class="text_moul title-km text-nowrap mb-1" style="color: #17525A">{{ company.name_kh }}</h6></td> -->
                                                </tr>
                                                <tr>
                                                    <!-- <td class="align-top"><p class="text-nowrap"style="color: #17525A">{{ company.name_en }}</p></td> -->
                                                </tr>
                                                <tr>
                                                    <!-- <td class="align-top"><div class="me-1" style="border: 2px solid #163597"></div></td> -->
                                                </tr>
                                                <!-- <tr>
                                                    <th class="pb-1">ឈ្មោះសាខា៖</th>
                                                    <td class="pb-1">សៀមរាប</td>
                                                </tr>
                                                <tr>
                                                    <th class="pb-1">តំបន់៖</th>
                                                    <td class="pb-1">
                                                        <span v-if="data.district_name!=''">
                                                            {{ data.district_name }}
                                                        </span>
                                                    </td>
                                                </tr> -->
                                            </table>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="pb-1 text-nowrap" style="padding-top: 30px"><span class="text_moul">ប័ណ្ណបញ្ចេញឥណទាន</span>/CASH DISBURSEMENT VOUCHER</p>
                                            <p class="pb-1"><strong>លេខ៖</strong> {{ data.loan_code }}</p>
                                            <p class="pb-1"><strong>កាលបរិច្ឆេទ៖</strong> {{funDate(data.installment_date)}}</p>
                                            <p class="pb-1"><strong>រូបិយប័ណ្ណ៖</strong>
                                                <span>
                                                    <input type="checkbox" class="ms-4" v-if="data.currency_id==1" checked>
                                                    <input type="checkbox" class="ms-4" v-else> រៀល
                                                </span>
                                                <span>
                                                    <input type="checkbox" class="ms-4" v-if="data.currency_id==2" checked>
                                                    <input type="checkbox" class="ms-4" v-else> ដុល្លារ
                                                </span>
                                                <span><input type="checkbox" class="ms-4"> ផ្សេងៗ</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <table class="table table-sm table-custom mb-1">
                                    <tbody>
                                        <tr>
                                            <td class="border-0">ឈ្មោះអតិថិជន</td>
                                            <td class="w-50 ps-2">{{data.client_name}}</td>
                                        </tr>
                                        <tr>
                                            <td class="border-0">ប្រាក់កម្ចី</td>
                                            <td class="w-50 ps-2">{{data.loan_out | numberFomartValue}}</td>
                                            <td class="text-center" rowspan="6" style="min-width: 110px">ស្នាមមេដៃអ្នកខ្ចី</td>
                                            <td class="text-center" rowspan="6" style="min-width: 110px">ស្នាមមេដៃអ្នកខ្ចី</td>
                                        </tr>
                                        <tr>
                                            <td class="border-0">សេវារដ្ឋបាល</td>
                                            <td class="w-50 ps-2">{{data.total_service | numberFomartValue}}</td>
                                        </tr>
                                        <!-- <tr>
                                            <td class="border-0">សេវាធានារ៉ាប់រង</td>
                                            <td class="w-50 ps-2">{{data.total_insurance | numberFomartValue}}</td>
                                        </tr> -->
                                        <tr>
                                            <td class="border-0">ប្រាក់បង់ទុកមុន</td>
                                            <td class="w-50 ps-2">{{data.payment_per_month | numberFomartValue}}</td>
                                        </tr>
                                        <tr>
                                            <td class="border-0">ប្រាក់ពិន័យ</td>
                                            <td class="w-50 ps-2"></td>
                                        </tr>
                                        <tr>
                                            <td class="border-0">សរុបប្រាក់ទទួលបាន</td>
                                            <td class="w-50 ps-2">{{(data.loan_out-data.total_service-data.payment_per_month) | numberFomartValue}}</td>
                                        </tr>

                                    </tbody>
                                </table>
                                <p class="my-1">ទឹកប្រាក់ជាអក្សរ៖ <strong>{{totalToword((data.loan_out-data.total_service-data.payment_per_month),data.currency_id)}}</strong></p>
                                <table class="table table-sm text-center table-bordered border-secondary">
                                    <tbody>
                                        <tr>
                                            <td style="height: 130px">អនុម័តដោយ</td>
                                            <td style="height: 130px">អ្នកប្រគល់ដោយ</td>
                                            <td style="height: 130px">អ្នកទទួលដោយ</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ $t("Close") }}</button>
                    <button type="button" class="btn btn-primary" @click="printP">
                        {{$t('Print')}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var moment = require("moment");
    import {currencyToWord } from "number_to_khmer_word";
    export default {
        props:['data'],
        data(){
            return{
                company: '',
                moment : moment,
                currencyToWord : currencyToWord,
            }
        },
        created() {
            this.funGetCompany();
        },
        methods: {
            customClass(index) {
                if (index === 1) return 'custom-reciept-top';
                if (index === 2) return 'custom-reciept-bottom';
                return '';
            },
            funGetCompany(){
                axios.get('admin-api/company')
                .then((res) => {
                    this.company = res.data;
                });
            },
            funDate(date) {
                if(date){
                    return moment(date).format("DD") + "/" + this.funMonth(moment(date).format("MMM")) + "/" + moment(date).format("YYYY");
                } else {
                    return 'ថ្ងៃទី................ ខែ................ ឆ្នាំ................'
                }
            },
            funMonth(mon) {
                if (mon == "Jan") {
                    return "មករា";
                } else if (mon == "Feb") {
                    return "កុម្ភៈ";
                } else if (mon == "Mar") {
                    return "មីនា";
                } else if (mon == "Apr") {
                    return "មេសា";
                } else if (mon == "May") {
                    return "ឧសភា";
                } else if (mon == "Jun") {
                    return "មិថុនា";
                } else if (mon == "Jul") {
                    return "កក្កដា";
                } else if (mon == "Aug") {
                    return "សីហា";
                } else if (mon == "Sep") {
                    return "កញ្ញា";
                } else if (mon == "Oct") {
                    return "តុលា";
                } else if (mon == "Nov") {
                    return "វិច្ឆិកា";
                } else if (mon == "Dec") {
                    return "ធ្នូ";
                }
            },
            totalToword(total_amount_receive,currency_id) {
                if (currency_id == 1) {
                    if (total_amount_receive) {
                        return currencyToWord(total_amount_receive, "KHR")
                            .slice(1)
                            .replace(/-/g, "")
                            .replace(/ រៀល គត់/, "រៀលគត់");
                    } else {
                        return currencyToWord(0, "KHR").slice(1);
                    }
                } else {
                    if (total_amount_receive) {
                        return currencyToWord(total_amount_receive, "USD")
                            .slice(1)
                            .replace(/-/g, " ")
                            .replace(/ ដុល្លារ គត់/, " ដុល្លារសហរដ្ឋអាមេរិចគត់");
                    } else {
                        return currencyToWord(0, "USD").slice(1);
                    }
                }
            },
            printP() {
                this.$htmlToPaper("print-disbursement", {
                    styles: ["/css/app.css", "/css/print/print-reciept.css"],
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
    .custom-reciept{
        width:210mm;
        min-height: 148mm;
        margin: auto;
        padding: 30px;
        border: 1px solid #dee2e6;
    }
    table.table-custom tr td{
        border: 1px solid #000;
        padding: 2px 0px;
    }
</style>
