<template>
    <div class="custom-reciept" v-if="data">
        <div class="header-receipt mb-0">
            <div class="row">
                <div class="col-6">
                    <table class="m-0 w-100">
                        <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="title-km text_moul 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 text-nowrap">ឈ្មោះសាខា៖</th>
                            <td class="pb-1">ការិយាល័យកណ្តាល</td>
                        </tr>
                        <tr>
                            <th class="pb-1"> បង់ប្រាក់</th>
                            <td class="pb-1 text-nowrap">
                                <input type="checkbox"> ការិយាល័យ 
                                <span v-if="data.district_name!=''">
                                    <input type="checkbox" class="ms-4" checked> តំបន់ {{ data.district_name }}
                                </span>
                                <span v-else>
                                    <input type="checkbox" class="ms-4"> តំបន់ .................................
                                </span>
                                
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-6 text-end">
                    <p class="pb-1" style="padding-top: 30px"><span class="text_moul">បង្កាន់ដៃទទួលប្រាក់</span>/CASH RECEIPT VOUCHER</p>
                    <p class="pb-1"><strong>លេខ៖</strong> {{ data.invoice_number }}</p>
                    <p class="pb-1"><strong>កាលបរិច្ឆេទ៖</strong> {{funDate(data.received_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-bordered border-secondary">
            <tbody>
                <tr>
                    <td>ល.រ</td>
                    <td>លេខកិច្ចសន្យា</td>
                    <td>ឈ្មោះអតិថិជន</td>
                    <td>ការបង់មុន</td>
                    <td>ប្រាក់ត្រូវបង់</td>
                    <td>ប្រាក់ពិន័យ</td>
                    <td>កម្រៃសេវា</td>
                    <td>សរុបប្រាក់បង់</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>{{data.loan_code}}</td>
                    <td>{{data.client_name}}</td>
                    <td> 
                        <span>
                            <input type="checkbox" v-if="data.received_date > data.payment_date" checked>
                            <input type="checkbox" v-else> 1
                        </span> 
                        <span class="ms-1">
                            <input type="checkbox" v-if="data.received_date == data.payment_date" checked>
                            <input type="checkbox" v-else> 2
                        </span> 
                        <span class="ms-1">
                            <input type="checkbox" v-if="data.received_date < data.payment_date" checked>
                            <input type="checkbox" v-else> 3
                        </span> 
                        <span class="ms-1"><input type="checkbox"> 4</span> 
                    </td>
                    <td>{{data.payment_per_month | numberFomartValue}}</td>
                    <td>{{data.paid_penalty | numberFomartValue}}</td>
                    <td>{{(data.paid_interest+data.paid_operating_service+data.paid_maintenance) | numberFomartValue}}</td>
                    <td>{{data.received | numberFomartValue}}</td>
                </tr>
                <!-- <tr>
                    <td class="text-end" colspan="4">សរុប</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
                <tr>
                    <td colspan="8">ទឹកប្រាក់ជាអក្សរ៖ {{totalToword(data.received,data.currency_id)}}</td>
                </tr>
                <tr>
                    <td colspan="8"><strong>ការបង់មុន៖</strong> 1.បង់យឺត 2.បង់កាលវិភាគ 3.បង់មុន 4.បង់ផ្តាច់</td>
                </tr>

                <tr class="text-center">
                    <td rowspan="2" colspan="4" style="height: 130px"></td>
                    <td colspan="2">អ្នកទទួល</td>
                    <td colspan="2">អ្នកត្រួតពិនិត្យ</td>
                </tr>
                <tr class="text-center">
                    <td rowspan="2" colspan="2" style="height: 130px"></td>
                    <td rowspan="2" colspan="2" style="height: 130px"></td>
                </tr>
                <tr class="text-center">
                    <td colspan="4">ស្នាមមេដៃ/ហត្ថលេខា និងឈ្មោះអ្នកប្រគល់ប្រាក់</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    var moment = require("moment");
    import {currencyToWord } from "number_to_khmer_word";
    import HeaderReport from '../../components/report/header.vue'
    import FooterReport from '../../components/report/footer.vue'
    export default {
        components: {
            HeaderReport,
            FooterReport,
        },
        props:['data'],
        data(){
            return{
                moment : moment,
                currencyToWord : currencyToWord,
                company : '',
            }
        },
        created() {
            this.funGetCompanyInfo();
        },
        methods:{
            funGetCompanyInfo(){
                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(received,currency_id) {
                if (currency_id == 1) {
                    if (received) {
                        return currencyToWord(received, "KHR")
                            .slice(1)
                            .replace(/-/g, "")
                            .replace(/ រៀល គត់/, "រៀលគត់");
                    } else {
                        return currencyToWord(0, "KHR").slice(1);
                    }
                } else {
                    if (received) {
                        return currencyToWord(received, "USD")
                            .slice(1)
                            .replace(/-/g, " ")
                            .replace(/ ដុល្លារ គត់/, " ដុល្លារសហរដ្ឋអាមេរិចគត់");
                    } else {
                        return currencyToWord(0, "USD").slice(1);
                    }
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .custom-reciept{
        width:210mm;
        min-height: 148mm;
        margin: auto;
        padding: 30px;
        // color: #263AA4;
        border: 1px solid #dee2e6;
    }
    .custom-reciept .first-form{
        width: 135px;
    }
    .custom-reciept .footer-reciept{
        margin-top: 20px;
    }
</style>