<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-flex>
                    <v-flex xs6>
                       <div class="text-tagihan text-xs-right"><kbd>10,000,000,00</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)"
                                ></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="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="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 xs6>
                        <div>
                            <v-btn color="error" :dark="btn_save_enable" large @click="save" :disabled="!btn_save_enable">SIMPAN & BAYAR</v-btn>
                            <v-btn color="primary" large @click="reset" class="ml-2">ORDER BARU >></v-btn>
                        </div>
                    </v-flex>
                    <v-flex xs6>
                        <div class="text-tagihan text-xs-right"><kbd>{{ one_money(payment_total) }}</kbd></div>
                    </v-flex>
                   
                </v-layout>
            </v-card>
            
        </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 = {
    methods : {
        
    },

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

        switch_payment_enable: [],

        payment_amount: []
      }
    },
    computed : {

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