<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">
                                <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="number" min="0" disabled class="form-control" @keypress="isNumber($event)" v-model="form.sumInterest " @input="funInputAmount" :placeholder="$t('Interest')" />
                                <!-- <input type="text" class="form-control" @keypress="isNumber($event)" :value="form.sumInterest | numberFomartValue"  :placeholder="$t('Interest')" disabled /> -->
                            </div>
                        </div>
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Operating Services PayOff') }}</label>
                                <input type="number" min="0" disabled class="form-control" @keypress="isNumber($event)" v-model="form.sumOperatService " @input="funInputAmount" :placeholder="$t('Operating Services PayOff')" />
                            </div>
                        </div>
                        <!-- <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Security Services PayOff') }}</label>
                                <input type="number" min="0" class="form-control" @keypress="isNumber($event)" v-model="form.sumMaintenance " @input="funInputAmount" :placeholder="$t('Security Services PayOff')" />
                                <input type="text" class="form-control" @keypress="isNumber($event)" :value="form.sumMaintenance | numberFomartValue" :placeholder="$t('Operating Services PayOff')" disabled />
                            </div>
                        </div> -->
                        <!-- <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Total Late') }}</label>
                                <input type="text" class="form-control" v-model="form.total_late" :placeholder="$t('Total Late')" disabled />
                            </div>
                        </div> -->
                        <div class="col-xl-4 col-6">
                            <div class="mb-3">
                                <label class="form-label">{{ $t('Penalty PayOff') }}</label>
                                <input
                                    type="number"
                                    min="0"
                                    class="form-control"
                                    @keypress="isNumber($event)"
                                    v-model="form.penalty_payoff"
                                    @input="funInputAmount"
                                    :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="number" min="0" disabled class="form-control" @keypress="isNumber($event)" v-model="form.amountPay" :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 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" disabled :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('Note') }}</label>
                                <input
                                    type="text"
                                    v-model="form.note"
                                    class="form-control"
                                    :class="{ 'is-invalid': form.errors.has('note') }"
                                    :placeholder="$t('Note')"
                                />
                                <div class="valid text-danger" v-if="form.errors.has('note')" v-html="form.errors.get('note')"></div>
                            </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" :disabled="params.busy || form.submitting" class="btn btn-primary" @click="$emit('submitPayOff')">
                        <!-- <img :src="params.busy ? ' /icons/loading.gif ' : '/icons/save.png'" alt="" /> -->
                        {{$t('Submit')}}
                    </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: {

                }
            }
        },
        methods: {
            funInputAmount() {
                this.form.amountPay = parseFloat(this.form.sumPrincipal) + parseFloat(this.form.sumInterest)+ parseFloat(this.form.sumOperatService) + parseFloat(this.form.sumMaintenance) + parseFloat(this.form.penalty_payoff);
            },
            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>
