<template>
    <div class="modal fade" id="modalPayOff" aria-hidden="true" role="dialog" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ $t('Pay Of') }}: <strong>{{form.client_name}}</strong></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Prepaid date') }}</label>
                                <input type="text" class="form-control" v-model="form.payment_date" :placeholder="$t('Prepaid date')" disabled />
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <div class="mb-3">
                                    <label class="form-label">{{ $t('Received Date') }}<sup class="text-danger">*</sup></label>
                                    <date-picker v-model="form.received_date" valueType="format" :placeholder="$t('Received Date')" :format="format" :class="{'is-invalid': form.errors.has('received_date') }"></date-picker>
                                    <div class="valid text-danger" v-if="form.errors.has('received_date')" v-html="form.errors.get('received_date')"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Payment Method') }}<sup class="text-danger">*</sup></label>
                                <Multiselect v-model="form.chart_of_acc_id" :placeholder="$t('Payment Method')" label="chart_code_name" :class="{ 'is-invalid': form.errors.has('chart_of_acc_id') }" :searchable="true" :options="payment_methods" />
                                <div class="valid text-danger" v-if="form.errors.has('chart_of_acc_id')" v-html="form.errors.get('chart_of_acc_id')"></div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Principal PayOff') }}</label>
                                <input type="text" class="form-control" @keypress="isNumber($event)" :value="form.sumPrincipal | numberFomartValue" :placeholder="$t('Principal')" disabled />
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Interest PayOff') }}</label>
                                <input type="text" class="form-control" @keypress="isNumber($event)" :value="formattedSumInterest" @input="funInputInterest" :placeholder="$t('Interest')" />
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Operating Services PayOff') }}</label>
                                <input type="text" class="form-control" @keypress="isNumber($event)" :value="formattedSumRisk" @input="funInputRisk" :placeholder="$t('Operating Services PayOff')" />
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Penalty PayOff') }}</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    @keypress="isNumber($event)"
                                    :value="formattedPenaltyPayOff"
                                    @input="funInputPenaltyPayOff"
                                    :placeholder="$t('Penalty PayOff')"
                                    :class="{ 'is-invalid': form.errors.has('penalty_payoff') }"
                                />
                                <div class="valid text-danger" v-if="form.errors.has('penalty_payoff')" v-html="form.errors.get('penalty_payoff')"></div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Amount PayOff') }}<sup class="text-danger">*</sup></label>
                                <input type="text" disabled class="form-control" @keypress="isNumber($event)" :value="formattedAmountToPay" :placeholder="$t('Amount Repay')" :class="{ 'is-invalid': form.errors.has('amountPay') }" />
                                <div class="valid text-danger" v-if="form.errors.has('amountPay')" v-html="form.errors.get('amountPay')"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" :disabled="params.busy || form.isSubmitting" class="btn btn-danger" data-bs-dismiss="modal"><img src="/icons/b_drop.png" alt="" /> {{ $t("Close") }}</button>
                    <button type="button" :disabled="params.busy || form.isSubmitting" class="btn btn-primary" @click="$emit('submitPayOff')">
                        <span v-if="params.busy || form.isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        <span v-else>{{$t('Submit')}}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from "moment";
    export default {
        props: {
            form: {},
            payment_methods : [],
        },
        data(){
            return{

                moment: moment,
                format: "YYYY-MM-DD",
                params: {

                }
            }
        },
        computed:{
            formattedSumInterest(){
                return new Intl.NumberFormat('en-US').format(this.form.sumInterest || 0);
            },
            formattedSumRisk(){
                return new Intl.NumberFormat('en-US').format(this.form.sumRisk || 0);
            },
            formattedPenaltyPayOff(){
                return new Intl.NumberFormat('en-US').format(this.form.penalty_payoff || 0);
            },
            formattedAmountToPay(){
                return new Intl.NumberFormat('en-US').format(this.form.amountPay || 0);
            },
        },
        methods: {
            funInputAmount() {
                this.form.amountPay = parseFloat(this.form.sumPrincipal) + parseFloat(this.form.sumInterest)+ parseFloat(this.form.sumRisk) + parseFloat(this.form.sumMaintenance) + parseFloat(this.form.penalty_payoff);
            },
            funInputInterest(event) {
                let value = event.target.value;
                this.form.sumInterest = parseFloat(value.replace(/[^\d\.]/g, ""));;
                if(this.form.sumInterest > this.form.sumPrincipal ){
                    this.$toast.warning("សូមបំពេញលក្ខខណ្ឌអោយបានត្រឹមត្រូវ!");
                    this.form.sumInterest = 0;
                }else{
                    this.form.amountPay = parseFloat(this.form.sumPrincipal) + parseFloat(this.form.sumInterest) + parseFloat(this.form.sumRisk) + parseFloat(this.form.sumMaintenance) + parseFloat(this.form.penalty_payoff);
                    this.form.amountPay = parseFloat(this.form.amountPay).toFixed(2);
                }
            },
            funInputRisk(event) {
                let value = event.target.value;
                this.form.sumRisk = parseFloat(value.replace(/[^\d\.]/g, ""));;
                if(this.form.sumRisk > this.form.sumPrincipal ){
                    this.$toast.warning("សូមបំពេញលក្ខខណ្ឌអោយបានត្រឹមត្រូវ!");
                    this.form.sumRisk = 0;
                }else{
                    this.form.amountPay = parseFloat(this.form.sumPrincipal) + parseFloat(this.form.sumInterest) + parseFloat(this.form.sumRisk) + parseFloat(this.form.sumMaintenance) + parseFloat(this.form.penalty_payoff);
                    this.form.amountPay = parseFloat(this.form.amountPay).toFixed(2);
                }
            },
            funInputPenaltyPayOff(event) {
                let value = event.target.value;
                this.form.penalty_payoff = parseFloat(value.replace(/[^\d\.]/g, ""));;
                if(this.form.penalty_payoff > this.form.sumPrincipal ){
                    this.$toast.warning("សូមបំពេញលក្ខខណ្ឌអោយបានត្រឹមត្រូវ!");
                    this.form.penalty_payoff = 0;
                }else{
                    this.form.amountPay = parseFloat(this.form.sumPrincipal) + parseFloat(this.form.sumInterest) + parseFloat(this.form.sumRisk) + parseFloat(this.form.sumMaintenance) + parseFloat(this.form.penalty_payoff);
                    this.form.amountPay = parseFloat(this.form.amountPay).toFixed(2);
                }
            },
            isNumber: function (evt) {
                evt = evt ? evt : window.event;
                var charCode = evt.which ? evt.which : evt.keyCode;
                if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 46) {
                    evt.preventDefault();
                } else {
                    return true;
                }
            },
        }
    }
</script>
