<template>
    <v-layout column pb-2 v-if="this.xisauto === 'N'">
        <v-card class="mb-2" color="white">
            <v-layout row wrap>
                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
                    <table>
                        <tr>
                            <th class="text-md-center pt-2 pb-2">NO. PEMBAYARAN</th>
                            <th class="text-md-center pt-2 pb-2"> TIPE PEMBAYARAN </th>
                            <th class="text-md-center pt-2 pb-2">JUMLAH</th>
                            <th class="text-md-center pt-2 pb-2">USER</th>
                            <th class="text-md-center pt-2 pb-2">AKSI</th>
                        </tr>
                        <tr class="mini-input" v-if="notes.length > 0" v-for="(note,index) in notes">
                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" style="text-align:center;vertical-align:center;"
                                align="center">{{note.note_number}}</td>
                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pl-3 pr-3">{{note.paymenttypes_name}}</td>
                            <td width="15%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(note.note_amount)}}</td>
                            <td width="20%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pr-2">{{note.note_user}}</td>
                            <td class="text-md-center">
                                <span @click="printNote(note,index)" class="icon-medium-fill-base xs1 white--text grey darken-1 icon-print"></span>
                                <span v-if="note.SupplierPaymentIsConfirm == 'N'" @click="confirmNote(note,index)" class="icon-medium-fill-base xs1 white--text green darken-1"><v-icon dark>done_all</v-icon></span>
                                <!--<v-btn small  @click="printNote(note,index)" color="primary" dark>
                                    Print
                                </v-btn>

                                <v-btn small  @click="deleteNote(note,index)" v-if="note.note_active === 'Y'" color="error" dark>
                                    Hapus
                                </v-btn>-->

                            </td>
                        </tr>
                        <tr class="mini-input" v-if="notes.length ===  0">
                            <td colspan="5" class="text-md-center pr-2">
                                Tidak ada data
                            </td>
                        </tr>
                    </table>
            </v-layout>
            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
            <v-layout row mt-1 mb-1 pl-2 pr-2>
            </v-layout>
            </v-flex>
        </v-card>
        <v-card>
            <v-layout row pa-2 align-center wrap>
                <v-flex xs6>
                    <v-layout row>
                        <v-flex xs12>
                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-flex xs6>
                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(restbill)}}</kbd></div>
                </v-flex>
            </v-layout>
            <v-layout row pa-2 align-center wrap>
                <v-flex xs6>
                    <v-layout row>
                        <v-flex xs12>
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-flex xs6 text-md-right>
                    <v-btn color="warning" v-if="this.totpay > 0" :disabled="in_saving" dark class="white--text ma-1" @click="pay()">
                        Simpan
                        <v-icon right dark></v-icon>
                    </v-btn>
                </v-flex>
            </v-layout>
            <v-layout row pa-2 align-left wrap>
                <v-flex xs12>
                   <!-- <v-layout row>
                        <v-flex xs4 pa-1>
                            <v-text-field :readonly="this.totpay !== 0" class="amount-right" label="Jumlah Bayar" v-model="xbayar" @change="changeBayar()" outline></v-text-field>
                        </v-flex>
                        <v-flex xs4 pa-1>
                        </v-flex>
                        <v-flex xs4 pa-1>
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-layout row pa-2 align-left wrap>
                    <v-flex xs12>
                        <v-layout row>
                            <v-flex xs4 pa-1>
                                <v-select item-text="M_PaymentTypeName" return-object :items="xpaymenttypes" v-model="xpaymenttype" label="" outline></v-select>
                            </v-flex>
                            <v-flex xs8 pa-1>
                                <v-text-field placeholder="Keterangan" v-model="xketerangan" outline></v-text-field>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                -->
                <v-layout row>
                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                        <table>
                            <tr class="mini-input">
                                <th class="text-md-center pt-2 pb-2">NO. PO</th>
                                <th class="text-md-center pt-2 pb-2">JATUH TEMPO</th>
                                <th class="text-md-center pt-2 pb-2">JUMLAH TAGIHAN</th>
                                <th class="text-md-center pt-2 pb-2">SISA TAGIHAN</th>
                            </tr>
                            <tr class="mini-input" v-if="tagihans.length > 0" v-for="(tagihan,index) in tagihans">
                                <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" style="text-align:center;vertical-align:center;"
                                    align="center">{{tagihan.tagihan_number}}
                                    <p style="color:#800000">{{ tagihan.pasien}}</p></td>
                                <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pl-3 pr-3">{{tagihan.tagihan_duedate}}</td>
                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(tagihan.tagihan_total)}}</td>
                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pr-2">{{convertMoney(tagihan.tagihan_tagihan)}}</td>
                            </tr>
                            <tr class="mini-input" v-if="tagihans.length ===  0">
                                <td colspan="6" class="text-md-center pr-2">
                                    Tidak ada data
                                </td>
                            </tr>
                        </table>
                    </v-flex>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                <div>
                    <v-layout pl-2 row align-center wrap>
                        <v-flex xs4 class="pa-1">
                        </v-flex>
                        <v-flex xs4 class="pa-1">
                        </v-flex>
                    </v-layout>
                    <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                </div>
                <v-layout row pa-2 align-center wrap>
                    <v-flex xs6>
                        <div class="label-tagihan text-xs-left">
                        </div>
                    </v-flex>
                    <v-flex xs6>
                    </v-flex>
                </v-layout>
        </v-card>



        <template>
            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
                <v-card>
                    <v-card-title class="headline success pt-2 pb-2" primary-title>
                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
                    </v-card-title>
                    <v-card-text class="pt-2 pb-2">
                        <v-layout row>
                            <v-flex xs12 d-flex>
                                <v-layout row>
                                    <v-flex pb-1 xs12>
                                        <v-layout row>
                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>

                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn flat @click="doPrint()">
                            Print
                        </v-btn>
                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
                            Tutup
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>

        <template>

            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
                <v-card>
                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
                        primary-title>
                        <h4 style="color:#FFEBEE">
                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
                        </h4>
                    </v-card-title>
                    <v-card-text class="pt-2 pb-2">
                        <v-layout row>
                            <v-flex xs12 d-flex>
                                <v-layout row>
                                    <v-flex pb-1 xs12>
                                        <v-layout row>
                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>

                                            </v-flex>
                                        </v-layout>
                                        <v-layout v-if="!_.isEmpty(xnotadelete)" row>
                                            <v-flex pt-2 pr-2 xs12>
                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" placeholder="Catatan (*Wajib diisi)" v-model="xnotedelete"
                                                    class="input-plain" />
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete) && xnotedelete " flat @click="doDeleteNote()">
                            Yakin dong !
                        </v-btn>

                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
                            Tutup
                        </v-btn>
                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
                            Tutup
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

        </template>
        <template>

            <v-dialog v-model="xdialogconfirm" persistent max-width="30%">
                <v-card>
                    <v-card-title :class="{ 'green':!_.isEmpty(xnotaconfirm), 'success':_.isEmpty(xnotaconfirm) }" class="headline darken-1 pt-2 pb-2"
                        primary-title>
                        <h4 style="color:#FFEBEE">
                            <span v-if="!_.isEmpty(xnotaconfirm)">Konfirmasi !</span>
                            <span v-if="_.isEmpty(xnotaconfirm)">Berhasil !</span>
                        </h4>
                    </v-card-title>
                    <v-card-text class="pt-2 pb-2">
                        <v-layout row>
                            <v-flex xs12 d-flex>
                                <v-layout row>
                                    <v-flex pb-1 xs12>
                                        <v-layout row>
                                            <v-flex pt-2 pr-2 v-html="xmsgconfirm" xs12>

                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" v-if="!_.isEmpty(xnotaconfirm)" flat @click="doConfirmNote()">
                            Yakin dong !
                        </v-btn>

                        <v-btn v-if="!_.isEmpty(xnotaconfirm)" color="primary" flat @click="xdialogconfirm = false">
                            Tutup
                        </v-btn>
                        <v-btn v-if="_.isEmpty(xnotaconfirm)" color="primary" flat @click="closeDialogConfirm()">
                            Tutup
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

        </template>
        <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
            @close-dialog-print="openprintnote = false"></one-dialog-print>
            <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="opendialoginfo = false"></one-dialog-info>
        </v-layout>
</template>
<style scoped>
    .rTable {
        display: table;
        width: 100%;
        border-spacing: 0 .2em;
    }

    .rTableGroup {
        display: table-row-group;
    }

    .rTableRow {
        display: table-row;
        font-size: 14px;
        -webkit-flex-wrap: wrap;
        /* Safari 6.1+ */
        flex-wrap: wrap;

    }

    .rTableHeading {
        display: table-header-group;
        background-color: #fffff;
    }

    .rTableCell {
        display: table-cell;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 2;
        border: 1px solid #2196f3;
        background-color: #fffff;
        border-spacing: 5px;
    }

    .rTableHead {
        display: table-cell;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 0px;
        background-color: #fffff;
    }

    .rTableHeading {
        display: table-header-group;
        text-transform: uppercase;
        font-weight: 500;
    }

    .rTableFoot {
        display: table-footer-group;
        font-weight: bold;
        background-color: #ddd;
    }

    .rTableBody {
        display: table-row-group;
    }

    .rfirstCell {
        border-left: 10px solid #2196f3;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .caption {
        border: 1px solid grey;
        caption-side: bottom;
        display: table-caption;
        text-align: center;
        padding: 5px
    }

    .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;
    }

    .amount-right {
        text-align: right !important;
        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;
    }

    .disabled-background {
        background: #b7b7b7;
    }

    .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;
    }

    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        background: white;
        border: 0px;
    }

    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    table>tr>td {
        padding: 8px;
    }

    table>tr>td:first {
        padding-left: 15px !important;
    }

    .mini-input .v-input {
        margin-top: 0px;
    }

    .mini-input .v-input,
    .mini-input .v-input--selection-controls,
    .mini-input .v-input__slot {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 3px;
    }

    .mini-input .v-messages {
        min-height: 0px;
    }

    .border-bottom-dashed {
        border-bottom: 1px dashed rgba(0, 0, 0, .12);
    }
</style>
<script>
    module.exports = {
        components: {
            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
        },
        data() {
            return {
                checkbox: true,
                radioGroup: 1,
                switchCash: true,
                switchDebit: false,
                switchKredit: false,
                dialog: false,
                urlprintnote: '',
                printtitle: '',
                printwidth: '60%',
                search_card: '',
                search_edc: '',
                isLoading: false,
                fajrihidebtnpay: 'Y',
                page: 1,
                xketerangan: '',
                headers: [{
                        text: "NO.BILL",
                        align: "Center",
                        sortable: false,
                        value: "lab",
                        width: "5%",
                        class: "blue lighten-4"
                    },
                    {
                        text: "JATUH TEMPO",
                        align: "Center",
                        sortable: false,
                        value: "name",
                        width: "8%",
                        class: "blue lighten-4"
                    },
                    {
                        text: "TOTAL TAGIHAN",
                        align: "Center",
                        sortable: false,
                        value: "name",
                        width: "10%",
                        class: "blue lighten-4"
                    },
                    {
                        text: "SISA TAGIHAN",
                        align: "Center",
                        sortable: false,
                        value: "name",
                        width: "10%",
                        class: "blue lighten-4"
                    },
                    {
                        text: "BAYAR",
                        align: "Center",
                        sortable: false,
                        value: "name",
                        width: "10%",
                        class: "blue lighten-4"
                    }
                ],
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'trx_id ASC',
                    totalItems: this.$store.state.paymentmanual.total_transactions
                }
            }
        },
        mounted() {
            this.$store.dispatch("paymentmanual/selectpaymenttype")
            this.$store.dispatch("paymentmanual/selectcard")
            this.$store.dispatch("paymentmanual/selectedc")
        },
        computed: {
            opendialoginfo: {
            get() {
                return this.$store.state.paymentmanual.open_dialog_info
            },
            set(val) {
                this.$store.commit("paymentmanual/update_open_dialog_info",false)
            }
        },
        msginfo: {
            get() {
                return this.$store.state.paymentmanual.msg_info
            },
            set(val) {
                this.$store.commit("paymentmanual/update_msg_info",false)
            }
        },
            bar_chx_all: {
                get() {
                    return this.$store.state.paymentmanual.bar_chx_all
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_bar_chx_all", val)
                }
            },
            indeterminatex: {
                get() {
                    return this.$store.state.paymentmanual.indeterminatex
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_indeterminatex", val)
                }
            },
            cards() {
                return this.$store.state.paymentmanual.cards
            },
            banks() {
                return this.$store.state.paymentmanual.banks
            },
            accounts() {
                return this.$store.state.paymentmanual.accounts
            },
            xmindp_percent() {
                if (this.$store.state.bill.selected_bill) {
                    return this.$store.state.bill.selected_bill.mindp_percent
                } else {
                    return 0
                }
            },
            xmindp_amount() {
                if (this.$store.state.bill.selected_bill) {
                    return this.$store.state.bill.selected_bill.mindp_amount
                } else {
                    return 0
                }
            },
            notes() {
                return this.$store.state.paymentmanual.notes

            },
            tagihans() {
                return this.$store.state.paymentmanual.tagihans

            },
            xordertests() {
                return this.$store.state.paymentmanual.ordertests
            },
            xdialogpaysuccess() {
                return this.$store.state.paymentmanual.dialog_pay_success
            },
            xmsgpaysuccess() {
                return this.$store.state.paymentmanual.paynumber
            },
            types() {
                return this.$store.state.paymentmanual.types
            },
            totpay() {
                return this.$store.state.paymentmanual.total_payment
            },
            restbill() {
                if (this.$store.state.bill.bills) {
                    return this.$store.state.bill.selected_bill.unpaid
                } else {
                    return 0
                }

            },
            xdialogdelete: {
                get() {
                    return this.$store.state.paymentmanual.dialog_delete
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_dialog_delete", val)
                }
            },
            xmsgdelete() {
                return this.$store.state.paymentmanual.msg_delete
            },
            xnotadelete() {
                return this.$store.state.paymentmanual.nota_delete
            },
            xnotedelete: {
                get() {
                    return this.$store.state.paymentmanual.note_delete
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_note_delete", val)
                }
            },
            xdialogconfirm: {
                get() {
                    return this.$store.state.paymentmanual.dialog_confirm
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_dialog_confirm", val)
                }
            },
            xmsgconfirm() {
                return this.$store.state.paymentmanual.msg_confirm
            },
            xnotaconfirm() {
                return this.$store.state.paymentmanual.nota_confirm
            },
            openprintnote: {
                get() {
                    return this.$store.state.paymentmanual.open_print_note
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_open_print_note", val)
                }
            },
            selectedbill() {
                return this.$store.state.bill.selected_bill
            },
            xdisable_btn_pay: {
                get() {
                    return this.$store.state.paymentmanual.disable_btn_pay
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_disable_btn_pay", val)
                }
            },
            xisauto: {
                get() {
                    return this.$store.state.paymentmanual.isauto
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_isauto", val)
                }
            },
            xpaymenttypes() {
                return this.$store.state.paymentmanual.paymenttypes
            },
            xpaymenttype: {
                get() {
                    return this.$store.state.paymentmanual.paymenttype
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_paymenttype", val)
                }

            },
            xcards() {
                return this.$store.state.paymentmanual.cards
            },
            xcard: {
                get() {
                    return this.$store.state.paymentmanual.card
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_card", val)
                }

            },
            xedcs() {
                return this.$store.state.paymentmanual.edcs
            },
            xedc: {
                get() {
                    return this.$store.state.paymentmanual.edc
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_edc", val)
                }

            },
            xaccounts() {
                return this.$store.state.paymentmanual.accounts
            },
            xaccount: {
                get() {
                    return this.$store.state.paymentmanual.account
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_account", val)
                }

            },
            in_saving: {
                get() {
                    return this.$store.state.paymentmanual.in_saving
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_in_saving", val)
                }
            },
            xbayar: {
                get() {
                    return this.$store.state.paymentmanual.xbayar
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_xbayar", val)
                }
            }
        },
        methods: {
            changeCard(type, value, idx) {
                var types = this.$store.state.paymentmanual.types
                if (type === 'card')
                    types[idx].selected_card = value

                if (type === 'edc')
                    types[idx].selected_edc = value

                if (type === 'account')
                    types[idx].selected_account = value

                this.updateTotal()
            },
            changeBayar() {               
                var bayar = parseInt(this.xbayar)
                let str = this.restbill
                var tagihan = parseInt(Number(str.replace(/,/g, '')))
              
                if (bayar > tagihan){
                    alert('Jumlah bayar melebihi tagihan , bayar : ' + bayar + ' tagihan: ' + tagihan )
                    this.xbayar = 0
                }else{
                    this.xdisable_btn_pay = 'Y'
                }
                    console.log(this.xdisable_btn_pay)
            },
            colorbginp(value) {
                if (value.chex === false) {
                    return 'grey'
                } else {
                    return 'white'
                }
            },
            showDetail(idx) {
                var arrOrders = this.$store.state.paymentmanual.notes
                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
            },
            hideDetail(idx) {
                var arrOrders = this.$store.state.paymentmanual.notes

                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
            },
            changeCbxAll(value) {
                var arr = this.tagihans
                this.indeterminatex = false

                arr.forEach((el) => {
                    el.chex = value
                    el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
                })
                
                var selected = _.filter(arr, function (o) {
                    return o.chex;
                })
                this.$store.commit("paymentmanual/update_selected_tagihan", selected)

                var xval = this.$store.state.paymentmanual.selected_tagihan
                var valx = 0
                xval.forEach(function (obj) {
                    valx += parseInt(obj.tagihan_bayar)
                })
                let totpaid = valx
                this.$store.commit("paymentmanual/update_total_payment", totpaid)

                if (this.totpay > this.xbayar){
                    alert('Jumlah bayar tagihan yang dipilih melebihi input Jumlah Bayar')
                var arr = this.tagihans
                this.indeterminatex = false

                arr.forEach((el) => {
                    el.chex = false
                    el.tagihan_bayar = 0
                })
                
                var selected = _.filter(arr, function (o) {
                    return o.chex;
                })
                this.$store.commit("paymentmanual/update_selected_tagihan", selected)

                var xval = this.$store.state.paymentmanual.selected_tagihan
                var valx = 0
                xval.forEach(function (obj) {
                    valx += parseInt(obj.tagihan_bayar)
                })
                let totpaid = valx
                this.$store.commit("paymentmanual/update_total_payment", totpaid)
                    
                }
            },
            checkTop(pat) {
                let tagihans = this.$store.state.paymentmanual.tagihans
                let idx = _.findIndex(tagihans, function (p) {
                    return p.SupplierPaymentDetailID == pat.SupplierPaymentDetailID
                });
                tagihans[idx].checx = !tagihans[idx].chex
                tagihans[idx].tagihan_bayar = tagihans[idx].checx == false ? tagihans[idx].tagihan_tagihan : 0
                var selected = _.filter(tagihans, function (o) {
                    return o.chex;
                })
                this.$store.commit("paymentmanual/update_selected_tagihan", selected)


                var xval = this.$store.state.paymentmanual.selected_tagihan
                var valx = 0
                xval.forEach(function (obj) {
                    valx += parseInt(obj.tagihan_bayar)
                })
                let totpaid = valx
                console.log('totpaid ' + totpaid)
                this.$store.commit("paymentmanual/update_total_payment", totpaid)

                if (this.totpay > this.xbayar) {
                    let xchange = valx - this.xbayar
                    tagihans[idx].tagihan_bayar = tagihans[idx].tagihan_bayar - xchange
                    var selectedx = _.filter(tagihans, function (o) {
                        return o.chex;
                    })
                    this.$store.commit("paymentmanual/update_selected_tagihan", selectedx)

                    var xval = this.$store.state.paymentmanual.selected_tagihan
                    var valx = 0
                    xval.forEach(function (obj) {
                        valx += parseInt(obj.tagihan_bayar)
                    })
                    let totpaid = valx
                    this.$store.commit("paymentmanual/update_total_payment", totpaid)
                }

            },
            convertMoney(money) {
                return one_money(money)
            },
            closeDialogPaySuccess() {
                let arrbill = this.$store.state.bill.bills
                var idx = _.findIndex(arrbill, item => item.SupplierPaymentID === this.$store.state.bill.selected_bill
                    .SupplierPaymentID)
                this.$store.commit("paymentmanual/update_dialog_pay_success", false)
                this.$store.commit("bill/update_selected_bill", {})
                console.log(this.$store.state.paymentmanual.types)
                this.$store.dispatch("bill/search", {
                    startdate: this.$store.state.bill.start_date,
                    enddate: this.$store.state.bill.end_date,
                    search: this.$store.state.bill.search,
                    status: this.$store.state.bill.selected_status.value,
                    current_page: this.$store.state.bill.current_page,
                    lastidx: idx
                })
            },
            closeDialogConfirm() {
                let arrbill = this.$store.state.bill.bills
                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
                    .SupplierInvoiceID)
                this.$store.commit("paymentmanual/update_dialog_confirm", false)
                this.$store.commit("bill/update_selected_bill", {})
                console.log(this.$store.state.paymentmanual.types)
                this.$store.dispatch("bill/search", {
                    startdate: this.$store.state.bill.start_date,
                    enddate: this.$store.state.bill.end_date,
                    search: this.$store.state.bill.search,
                    status: this.$store.state.bill.selected_status.value,
                    current_page: this.$store.state.bill.current_page,
                    lastidx: idx
                })
            },
            updateTotal() {
                var xval = this.$store.state.paymentmanual.selected_tagihan
                var valx = 0
                xval.forEach(function (obj) {
                    valx += parseInt(obj.tagihan_bayar)
                })
                // let xchange = this.restbill - valx
                let totpaid = valx
                this.$store.commit("paymentmanual/update_total_payment", totpaid)
                this.xdisable_btn_pay = 'Y'
            },
            async payold() {
                if (this.in_saving) return;
                this.in_saving = true;
                let prm = {
                    orderid: this.$store.state.bill.selected_bill.SupplierPaymentID,
                    amount: this.xbayar > this.totpay ? this.totpay: this.xbayar,
                    paymenttype: this.xpaymenttype.M_PaymentTypeID,
                    card: this.xcard.Nat_BankID,
                    edc: this.xedc.M_BankAccountID,
                    account: this.xaccount.M_BankAccountID,
                    keterangan: this.xketerangan,
                    bills: this.$store.state.paymentmanual.selected_tagihan
                }
                //console.log(prm.amount)
                this.$store.dispatch("paymentmanual/pay", prm)
            },
            async pay() {
                if (this.in_saving) return;
                this.in_saving = true;
            var go_pay = true
            var xmsginfo = ''
            
                        let prm = {
                    orderid: this.$store.state.bill.selected_bill.SupplierInvoiceID,
                    amount: this.xbayar > this.totpay ? this.totpay: this.xbayar,
                    paymenttype: this.xpaymenttype.M_PaymentTypeID,
                    keterangan: this.xketerangan,
                    bills: this.$store.state.paymentmanual.selected_tagihan
                }
                //console.log(prm.amount)
                this.$store.dispatch("paymentmanual/pay", prm)
                    
            
            },
            deleteNote(note, idx) {
                this.$store.commit("paymentmanual/update_note_delete", "")
                this.$store.commit("paymentmanual/update_nota_delete", note)
                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
                this.$store.commit("paymentmanual/update_msg_delete", xmsg)
                this.$store.commit("paymentmanual/update_dialog_delete", true)
            },
            doDeleteNote() {
                let prm = {
                    catatan: this.$store.state.paymentmanual.note_delete,
                    nota: this.$store.state.paymentmanual.nota_delete
                }
                this.$store.dispatch("paymentmanual/delete_note", prm)
            },
            confirmNote(note, idx) {
                this.$store.commit("paymentmanual/update_note_confirm", "")
                this.$store.commit("paymentmanual/update_nota_confirm", note)
                let xmsg = "Yakin , mau konfirmasi nota nomor <span style='color:green'>" + note.note_number + "</span> ?"
                this.$store.commit("paymentmanual/update_msg_confirm", xmsg)
                this.$store.commit("paymentmanual/update_dialog_confirm", true)
            },
            doConfirmNote() {
                let prm = {
                    nota: this.$store.state.paymentmanual.nota_confirm
                }
                this.$store.dispatch("paymentmanual/confirm_note", prm)
            },
            closeDialogDelete() {
                let arrbill = this.$store.state.bill.bills
                var idx = _.findIndex(arrbill, item => item.SupplierPaymentID === this.$store.state.bill.selected_bill
                    .SupplierPaymentID)
                this.$store.commit("paymentmanual/update_dialog_delete", false)
                this.$store.commit("bill/update_selected_bill", {})
                this.$store.dispatch("bill/search", {
                    startdate: this.$store.state.bill.start_date,
                    enddate: this.$store.state.bill.end_date,
                    search: this.$store.state.bill.search,
                    status: this.$store.state.bill.selected_status.value,
                    lastidx: idx
                })
            },
            updateChx(val, idx) {
                this.check_disable_btn_status()
                var selpat = this.$store.state.bill.selected_bill
                var firstamount = selpat.unpaid
                //console.log(selpat)
                let xobj = this.$store.state.paymentmanual.types
                xobj[idx].leftvalue = 0
                xobj[idx].rightvalue = 0
                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
                    val.chex === false) {
                    xobj[idx].selected_card = {
                        id: 0,
                        name: ''
                    }
                    xobj[idx].selected_edc = {
                        id: 0,
                        name: ''
                    }
                    xobj[idx].selected_account = {
                        id: 0,
                        name: ''
                    }
                }
                var selected_payments = _.filter(xobj, function (o) {
                    return o.chex
                })
                if (selected_payments.length === 1) {
                    xobj.forEach(function (obj, index) {
                        if (obj.code === selected_payments[0].code) {
                            xobj[index].leftvalue = firstamount
                        }
                    })
                }
                this.$store.commit("paymentmanual/update_types", {
                    records: xobj,
                    total: xobj.length
                })


                this.updateTotal()
            },
            check_disable_btn_status() {
                this.xdisable_btn_pay = 'N'
                var payments = this.$store.state.paymentmanual.types
                let selected_payments = _.filter(payments, {
                    chex: true
                })
                console.log(this.xdisable_btn_pay)
                selected_payments.forEach(function (obj) {
                    if (obj.leftvalue === 0) {
                        this.xdisable_btn_pay = 'Y'
                    }
                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
                        console.log(obj)
                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
                            .id === 0) {
                            this.xdisable_btn_pay = 'Y'
                            console.log('oye')
                            console.log(this.xdisable_btn_pay)
                        }
                    }
                })
            },
            printNote(val, idx) {
                this.printwidth = 600
                this.printtitle = ""
                let user = one_user()
                var rpt = 'rpt_payment_faktur'
                this.urlprintnote = "/birt/run?__report=report/one/accounting/" + rpt + ".rptdesign&__format=pdf&username=" +
                    user.M_UserUsername + "&PID=" + val.note_id
                this.$store.commit("paymentmanual/update_open_print_note", true)
            },
            doPrint() {
                this.printtitle = ""
                this.closeDialogPaySuccess()
                let user = one_user()
                var rpt = 'rpt_payment_faktur'
                this.urlprintnote = "/birt/run?__report=report/one/accounting/" + rpt + ".rptdesign&__format=pdf&username=" +
                    user.M_UserUsername + "&PID=" + this.$store.state.paymentmanual.idx
                this.$store.commit("paymentmanual/update_open_print_note", true)
            },
            printKw() {
                this.printwidth = 800
                this.printtitle = ""
                let idx = this.$store.state.bill.selected_bill.SupplierPaymentID
                let user = one_user()
                this.urlprintnote = "/birt/run?__report=report/one/accounting/rpt_payment_faktur.rptdesign&__format=pdf&username=" +
                    user.M_UserUsername + "&PID=" + idx
                this.$store.commit("paymentmanual/update_open_print_note", true)
            },
            printInvoice() {
                this.printwidth = 800
                this.printtitle = ""
                let idx = this.$store.state.bill.selected_bill.SupplierPaymentID
                let user = one_user()
                this.urlprintnote = "/birt/run?__report=report/one/accounting/rpt_payment_faktur.rptdesign&__format=pdf&username=" +
                    user.M_UserUsername + "&PID=" + idx
                this.$store.commit("paymentmanual/update_open_print_note", true)
            }
        }
    }
</script>