<template>
        <v-layout column pb-2>
            <v-card >
                <v-layout row pa-2 align-center wrap >
                    <v-flex xs6>
                        <div class="label-tagihan text-xs-left">Total Tagihan</div>
                        <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1 class="mt-3"></v-layout>
                        
                        <v-layout row wrap v-show="order_company.is_bill == 'N'">
                            <v-flex xs6>
                                <h3 class="subheading orange--text">Minimum DP ({{ order_company.min_dp }}%)</h3>
                            </v-flex>
                            <v-flex xs6>
                                <h3 class="subheading text-xs-right orange--text">{{ one_money(order_company.min_dp_rp) }}</h3>
                            </v-flex>
                        </v-layout>

                        <v-layout row wrap v-show="order_company.is_bill == 'Y' && order_company.on_hold == 'Y'">
                            <v-flex xs12>
                                <h3 class="subheading red--text">{{ order_company.on_hold_text }}</h3>
                            </v-flex>
                        </v-layout>
                        
                    </v-flex>
                    <v-flex xs6>
                       <div class="text-tagihan text-xs-right"><kbd>{{ one_money(bill_total) }}</kbd></div>
                    </v-flex>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                
                <v-layout column>
                    <v-flex xs12 v-for="(p, pi) in payments" v-bind:key="p.payment_type_id">

                        <v-layout row pt-2 pb-1 pl-2 align-center wrap class="border-top-dashed">
                            <v-flex xs12>
                                <v-switch
                                    true-value="Y"
                                    false-value="N"
                                    v-model="payments[pi].payment_enable"
                                    :label="p.payment_type_name"
                                    @change="(v) => payment_enable(pi, v)"
                                    :disabled="paid"
                                ></v-switch>
                            </v-flex>
                        </v-layout>
                        <v-layout row pa-2 align-center wrap >
                            <v-flex xs2>
                                <div class="sub-title pl-2">Jumlah</div>
                            </v-flex>
                            <v-flex xs4>
                                <div  class="pa-2">
                                    <v-text-field
                                        v-bind:class="[p.payment_type_code == 'CASH' ? 'input-cash' : 'input-plain', 'text-xs-right font-weight-bold']"
                                        v-model="payments[pi].payment_actual"
                                        :disabled="paid || (payments[pi].payment_enable == 'Y' ? false : true)"
                                        @input="(v) => update_payments(pi, 'payment_actual', v)"
                                        reverse
                                        
                                    >
                                    </v-text-field>
                                    
                                </div>
                            </v-flex>
                            <v-flex xs2>
                                <div class="sub-title pl-2">{{ p.payment_note_label }}</div>
                            </v-flex>
                            <v-flex xs4>
                                <div class="pa-2">
                                    <v-text-field
                                        v-show="p.payment_type_code != 'CASH'"
                                        class="input-plain"
                                        v-model="payments[pi].payment_note"
                                        :disabled="paid || (payments[pi].payment_enable == 'Y' ? false : true)"
                                        @input="(v) => update_payments(pi, 'payment_amount', v)"
                                        reverse
                                        
                                    >
                                    </v-text-field>

                                    <v-text-field
                                        v-show="p.payment_type_code == 'CASH'"
                                        class="input-cash"
                                        v-model="payments[pi].payment_change_mask"
                                        disabled
                                        reverse
                                        
                                    >
                                    </v-text-field>
                                </div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>

                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                <!-- <v-layout row pa-2 align-center wrap >
                   <div>
                        <v-btn color="error" dark large @click="save" :disabled="!btn_save_enable">BAYAR</v-btn>
                    </div>
                </v-layout> -->
                <v-layout row pa-2 wrap >
                    
                    <v-flex xs9>
                        <div>
                            <v-btn color="error" :dark="btn_save_enable && !paid" @click="save" :disabled="!btn_save_enable || paid" class="mr-0">SIMPAN & BAYAR</v-btn>
                            
                            <!-- <v-btn color="primary" large @click="print_invoice" class="ml-0 mr-0">C INVOICE</v-btn>
                            <v-btn color="primary" large @click="print_control" class="ml-0">C KARTU KONTROL</v-btn> -->
                            <template>
                                
                                <v-menu offset-y top>
                                    <template v-slot:activator="{ on }">
                                        <v-btn
                                        color="orange"
                                        dark
                                        v-on="on"
                                        >
                                        <v-icon class="mr-1">print</v-icon>
                                        Cetak
                                        </v-btn>
                                    </template>
                                    <v-list>
                                        <v-list-tile
                                        v-for="(item, index) in menu_print"
                                        :key="index"
                                        @click="print_me(item.code)"
                                        >
                                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                                        </v-list-tile>
                                    </v-list>
                                </v-menu>
                                
                            </template>

                            <v-btn color="primary" @click="reset" class="ml-0 mr-0">
                                <v-icon class="mr-1">description</v-icon> BARU</v-btn>
                        </div>
                    </v-flex>
                    <v-flex xs3>
                        <div class="text-tagihan text-xs-right"><kbd>{{ one_money(payment_total) }}</kbd></div>
                    </v-flex>
                   
                </v-layout>
            </v-card>
            <one-fo-registration-payment-finish></one-fo-registration-payment-finish>
            <one-dialog-print></one-dialog-print>
        </v-layout>
        
</template>

<style scoped>
.label-tagihan{
    text-align:left;
    font-size: 25px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.sub-header{
    text-align:left;
    font-size: 18px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.sub-title{
    text-align:left;
    font-size: 14px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.text-tagihan{
    text-align:left;
    font-size: 42px;
    font-family: open sans, tahoma, sans-serif;
}

.input-cash{
    width: 100%;
    padding: 8px 14px;
    box-sizing: border-box;
    border: 2px solid grey;
    border-radius: 4px;
    font-size: 22px;
    font-weight:700;
    text-align:right;
}
.input-plain{
    width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    border: 2px solid grey;
    border-radius: 4px;
    font-size: 14px;
}
.v-input, .v-input__slot, .v-messages{
    margin:0px;
    padding:0px;
    min-height: 0px; 
}
.v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
    margin-bottom: 0px;
}

.border-top-dashed {
    border-top: 1px dashed rgb(221,221,221)
}
</style>
<script>
module.exports = {
    components : {
        'one-field-verification' : httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
        'one-fo-registration-payment-finish' : httpVueLoader('./oneFoRegistrationPaymentFinish.vue'),
        'one-dialog-print' : httpVueLoader('./oneDialogPrint.vue')
    },

     data () {
      return {
        checkbox: true,
        radioGroup: 1,
        switchCash: true,
        switchDebit: false,
        switchKredit: false,

        switch_payment_enable: [],

        payment_amount: [],
        menu_print: [
            { title:"Cetak Invoice", code:"P.INV" },
            { title:"Cetak Kartu Kontrol", code:"P.CC" }
        ]
      }
    },

    methods : {
        one_money(p) {
            return window.one_money(p)
        },

        payment_enable (idx, v) {
            let payments = this.payments
            payments[idx]['payment_enable'] = v

            this.$store.commit('payment/update_payments', payments)
        },

        save() {
            this.$store.dispatch("payment/save");
            return
        },

        update_payments (idx, type, v) {
            let payments = this.payments
            payments[idx][type] = v
            this.$store.commit('payment/update_payments', payments)
        },

        reset () {
            location.reload()
        },

        print_invoice () {
            this.$store.dispatch('payment/print_invoice', this.$store.state.payment.order_id)
            return
        },

        print_control () {
            this.$store.dispatch('payment/print_control', this.$store.state.payment.order_id)
            return
        },

        print_me (c) {
            if (c == "P.INV")
                return this.print_invoice()
            else if (c == "P.CC")
                return this.print_control()
        }
    },

    computed : {
        bill_total() {
            return this.$store.state.payment.order_total
        },

        payment_total () {
            return this.$store.state.payment.payment_total
        },

        payment_cash_amount : {
            get () {
                return this.$store.state.payment.order_total
            },
            set (v) {
                // this.$store.commit('payment/update_payment', {type:'cash',amount:v})
                return
            }
        },

        payment_debit_amount : {
            get () {
                return 0
            },
            set (v) {
                return
            }
        },

        payment_credit_amount : {
            get () {
                return 0
            },
            set (v) {
                return
            }
        },

        payments : {
            get () {
                let p = this.$store.state.payment.payments
                for (let i in p)
                    p[i].payment_change_mask = window.one_money(p[i].payment_change)

                return p
                // [{"payment_type_id":"1","payment_type_name":"Cash","payment_type_code":"CASH","payment_amount":"0","payment_note":"","payment_note_label":"Kembali","payment_enable":"N"},{"payment_type_id":"2","payment_type_name":"Debit","payment_type_code":"DEBIT","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Kartu","payment_enable":"N"},{"payment_type_id":"3","payment_type_name":"Credit","payment_type_code":"CREDIT","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Kartu","payment_enable":"N"},{"payment_type_id":"4","payment_type_name":"Voucher","payment_type_code":"VOUCHER","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Voucher","payment_enable":"N"}]
            },
            set (v) {
                this.$store.commit('payment/update_payments', v)
                return
            }
        },

        order_id : {
            get () {
                return this.$store.state.payment.order_id
            },

            set (v) {
                return
            }
        },

        btn_save_enable () {
            if (this.payments.length < 1)
                return false

            let en = false
            let sm = 0
            for (let i in this.payments) {
                if (this.payments[i].payment_enable == "Y") {
                    en = true
                    sm = sm + Math.round(this.payments[i].payment_amount)
                }
            }

            if (!en) return false

            if (this.$store.state.payment.order_id == 0 ||
                this.$store.state.payment.order_id == "0")
                return false;

            if (sm == 0)
                return false

            return true
        },

        paid : {
            get () { return this.$store.state.payment.paid },
            set (v) { this.$store.commit('payment/update_paid', v) }
        },

        order_company () {
            return this.$store.state.payment.order_company
        }
        
    },

    mounted () {
        this.$store.dispatch('payment/search')
    },

    watch : {
        switch_payment_enable (n, o) {
            if (n != o) {
                if (n.length < o.length) {
                    for (let i in o)
                        if (n.indexOf(o[i]) < 0)
                            return
                }
            }
        },

        order_id (n, o) {
            if (n == 0 || n == "0")
                this.$store.commit("order/update_tab_enable", [2, false])
            else
                this.$store.commit("order/update_tab_enable", [2, true])
        }
    }
}
</script>
