<template>
    <div>
        <v-layout row wrap>
            <v-flex xs3 pa-1>
                <v-text-field v-model="form_kontrak.nama_kontrak" hide-details outline label="Nama Kontrak"
                    placeholder="masukan nama kontrak" :readonly="viewonlymode"></v-text-field>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-menu v-model="menuKontrakDate" offset-y lazy min-width="290px" transition="scale-transition"
                    max-width="290px" full-width :nudge-right="40" :close-on-content-click="false">
                    <template v-slot:activator="{ on }">
                        <v-text-field v-model="formattedDateKontrak" v-on="on" hide-details readonly outline
                            label="Tanggal Kontrak"></v-text-field>
                    </template>
                    <v-date-picker v-model="form_kontrak.tanggal_kontrak" no-title
                        @input="menuKontrakDate = false" :readonly="viewonlymode"></v-date-picker>
                </v-menu>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-menu v-model="menuKontrakStartdate" offset-y lazy min-width="290px" transition="scale-transition"
                    max-width="290px" full-width :nudge-right="40" :close-on-content-click="false">
                    <template v-slot:activator="{ on }">
                        <v-text-field v-model="formattedStartdateKontrak" outline v-on="on" hide-details
                            label="Tanggal Mulai Kontrak" readonly></v-text-field>
                    </template>
                    <v-date-picker v-model="form_kontrak.tanggalAwal_kontrak" no-title
                        @input="menuKontrakStartdate = false" :readonly="viewonlymode"></v-date-picker>
                </v-menu>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-menu v-model="menuKontrakEnddate" offset-y lazy min-width="290px" transition="scale-transition"
                    max-width="290px" full-width :nudge-right="40" :close-on-content-click="false">
                    <template v-slot:activator="{ on }">
                        <v-text-field v-model="formattedEnddateKontrak" outline v-on="on" hide-details
                            label="Tanggal Akhir Kontrak" readonly></v-text-field>
                    </template>
                    <v-date-picker v-model="form_kontrak.tanggalAkhir_kontrak" no-title
                        @input="menuKontrakEnddate = false" :readonly="viewonlymode"></v-date-picker>
                </v-menu>
            </v-flex>
        </v-layout>

        <v-layout row wrap>
            <v-flex xs2 pa-1>
                <v-text-field v-model="form_kontrak.durasi_cicilan" hide-details outline placeholder="1"
                    label="Durasi Kontrak (Bulan)" readonly></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field v-model="form_kontrak.jumlah_cicilan" hide-details placeholder="1" outline
                    label="Jumlah Cicilan" :readonly="viewonlymode"></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field v-model="form_kontrak.tanggalBayar_cicilan" hide-details placeholder="1" outline
                    label="Tanggal Bayar Cicilan" :readonly="viewonlymode"></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field v-model="form_kontrak.besarNilai_cicilan"
                    placeholder="0" prefix="Rp." outline hide-details :readonly="viewonlymode"
                    @blur="handleBlur(form_kontrak, 'cicil')" label="Besar Bayar Cicilan"
                    @focus="handleFocus(form_kontrak, 'cicil')"></v-text-field>
            </v-flex>
            <v-flex xs1 pa-1>
                <v-autocomplete :items="['nominal', 'percent']" label="Tipe Nilai" :readonly="viewonlymode"
                    v-model="form_kontrak.type_downpayment" hide-details @input="changeTypeAmount('DP')"
                    @change="$store.dispatch('orderAsset/recalculateOrderSummary')" outline></v-autocomplete>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-text-field v-if="form_kontrak.type_downpayment == 'percent'" label="Jumlah Uang Muka" hide-details
                    v-model="form_kontrak.besarNilai_downpayment" placeholder="0" suffix="%" outline :readonly="viewonlymode"
                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"></v-text-field>
                <v-text-field v-else label="Jumlah Uang Muka" hide-details placeholder="0"
                    v-model="form_kontrak.besarNilai_downpayment" prefix="Rp." outline
                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
                    @blur="handleBlur(form_kontrak, 'dp')" :readonly="viewonlymode"
                    @focus="handleFocus(form_kontrak, 'dp')"></v-text-field>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            menuKontrakDate: false,
            menuKontrakStartdate: false,
            menuKontrakEnddate: false,
        };
    },
    computed: {
        form_kontrak: {
            get() {
                return this.$store.state.kontrakAsset.form_kontrak
            },
            set(val) {
                this.$store.commit("kontrakAsset/update_form_kontrak", val);
            }
        },
        formattedDateKontrak() {
            return this.formatDate(this.form_kontrak.tanggal_kontrak);
        },
        formattedStartdateKontrak() {
            return this.formatDate(this.form_kontrak.tanggalAwal_kontrak);
        },
        formattedEnddateKontrak() {
            return this.formatDate(this.form_kontrak.tanggalAkhir_kontrak);
        },
        viewonlymode() {
            return this.$store.state.common.viewonlymode;
        }
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split('-');
            return `${day}-${month}-${year}`;
        },
        countMonths(startdate, enddate) {
            const start = new Date(startdate);
            const end = new Date(enddate);

            let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
            if (end.getDate() > start.getDate()) {
                months += 1;
            }

            return Math.max(months, 1);
        },
        updateDurasiCicilan() {
            const form = this.form_kontrak;
            if (!form.tanggalAwal_kontrak || !form.tanggalAkhir_kontrak) return;

            form.durasi_cicilan = this.countMonths(
                form.tanggalAwal_kontrak,
                form.tanggalAkhir_kontrak
            );

            this.form_kontrak = form;
        },
        changeTypeAmount(name) {
            let form = this.form_kontrak;
            if (name == 'DP') {
                form.besarNilai_downpayment = 0;
            }

            this.$store.dispatch('orderAsset/recalculateOrderSummary');
        },
        formatCurrency(value) {
            const num = parseFloat(value);
            if (isNaN(num)) return 0;
            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        },
        parseCurrency(value) {
            let cleanValue = String(value).replace(/\./g, '');
            cleanValue = cleanValue.replace(',', '.');
            return parseFloat(cleanValue) || 0;
        },
        handleFocus(item, field) {
            if (field == 'dp') {
                const currprice = item.besarNilai_downpayment;
                const parsedprice = this.parseCurrency(currprice);
                item.besarNilai_downpayment = parsedprice;
            }

            if (field == 'cicil') {
                const currdisc = item.besarNilai_cicilan;
                const parseddisc = this.parseCurrency(currdisc);
                item.besarNilai_cicilan = parseddisc;
            }
        },
        handleBlur(item, field) {
            if (field == 'dp') {
                const currprice = item.besarNilai_downpayment;
                const parsedprice = this.parseCurrency(currprice);
                item.besarNilai_downpayment = this.formatCurrency(parsedprice);
            }

            if (field == 'cicil') {
                const currdisc = item.besarNilai_cicilan;
                const parseddisc = this.parseCurrency(currdisc);
                item.besarNilai_cicilan = this.formatCurrency(parseddisc);
            }
        },
    },
    watch: {
        "form_kontrak.tanggalAwal_kontrak"() {
            this.updateDurasiCicilan();
        },
        "form_kontrak.tanggalAkhir_kontrak"() {
            this.updateDurasiCicilan();
        }
    }
}
</script>
