<template>
    <v-layout column pb-2 v-if="this.xisauto === 'Y'">
        <!--
        <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}}<p style="color:green"> {{ note.d_approved}}</p>
                                <p style="color:blue"> {{ note.d_confirm}}</p></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.SupplierPaymentIsApproved == 'N'" @click="deleteNote(note,index)" class="icon-medium-fill-base xs1 white--text red darken-1 icon-delete"></span>
                                <span v-if="note.SupplierPaymentIsApproved == 'N'" @click="editNote(note,index)" class="icon-medium-fill-base xs1 white--text green darken-1"><v-icon dark>edit</v-icon></span>


                            </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>{{toRupiah(restbill)}}</kbd></div>
                </v-flex>
            </v-layout>

            <v-layout row pa-2 align-center wrap>
                <v-flex xs6>
                    <v-layout row>
                        <v-flex xs12>
                            <div class="label-tagihan text-xs-left">
                                {{this.$store.state.bill.selected_bill.SupplierInvoiceNumber}}
                            </div>
                        </v-flex>
                    </v-layout>
                </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 && this.xpaymenttype.coaID"
                        :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 xs6 pa-1>
                            <v-autocomplete
                                label="Supplier" :items="xsuppliers" v-model="xsupplier"
                                :search-input.sync="a_supplier_search" hide-details auto-select-first no-filter
                                item-text="SupplierName" outline return-object no-data-text="Cari Supplier"
                            >
                                <template slot="item" slot-scope="{ item }">
                                    <v-list-tile-content>
                                        <v-list-tile-title v-text="item.SupplierName"></v-list-tile-title>
                                        <v-list-tile-sub-title
                                            v-text="item.SupplierCode"></v-list-tile-sub-title>
                                    </v-list-tile-content>
                                </template>
                            </v-autocomplete>
                        </v-flex>
                        <v-flex xs6 pa-1>
                            <v-autocomplete
                                label="Account" :items="xpaymenttypes" v-model="xpaymenttype"
                                :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
                                item-text="coaDescription" outline return-object no-data-text="Cari Account">
                                <template slot="item" slot-scope="{ item }">
                                    <v-list-tile-content>
                                        <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
                                        <v-list-tile-sub-title
                                            v-text="item.coaAccountNo"></v-list-tile-sub-title>
                                    </v-list-tile-content>
                                </template>
                            </v-autocomplete>
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-flex xs12>
                    <v-layout row>
                           <v-text-field placeholder="Keterangan" v-model="xketerangan" outline></v-text-field>
                    </v-layout>
                </v-flex>
                <v-layout row>
                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                        <table>
                            <thead>
                                <tr class="mini-input">
                                    <th class="text-md-center pt-2 pb-2">
                                        <v-checkbox
                                            style="padding-top:0;margin-top:0"
                                            color="blue lighten-3" hide-details
                                            @change="changeCbxAll(bar_chx_all)"
                                            v-model="bar_chx_all"
                                        ></v-checkbox>
                                    </th>
                                    <th class="text-md-center pt-2 pb-2">NO. INSTRUKSI / NO. TAGIHAN</th>
                                    <th class="text-md-center pt-2 pb-2">TGL RENCANA BAYAR</th>
                                    <th class="text-md-center pt-2 pb-2">JUMLAH TAGIHAN</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="mini-input" v-if="tagihans.length > 0" v-for="(tagihan,index) in tagihans">
                                    <td style="width:3%" class="text-xs-center">
                                        <v-checkbox style="padding-top:0;margin-top:0" color="blue lighten-3" hide-details v-model="tagihan.chex" @change="checkTop(tagihan)"></v-checkbox>
                                    </td>
                                    <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>
                                </tr>
                                <tr class="mini-input" v-if="tagihans.length ===  0">
                                    <td colspan="6" class="text-md-center pr-2">
                                        Tidak ada data
                                    </td>
                                </tr>
                            </tbody>
                        </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>
                        <div class="text-tagihan text-xs-right"><kbd>{{toRupiah(totpay)}}</kbd></div>
                    </v-flex>
                </v-layout>
            </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-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)" 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="xdialogedit" persistent max-width="50%">
                <v-card>
                    <v-card-title :class="{ 'blue':!_.isEmpty(xnotaedit), 'success':_.isEmpty(xnotaedit) }" class="headline darken-1 pt-2 pb-2"
                        primary-title>
                        <h4 style="color:#FFEBEE">
                            <span v-if="!_.isEmpty(xnotaedit)">Form Ubah Data</span>
                            <span v-if="_.isEmpty(xnotaedit)">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="xmsgedit" xs12>

                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <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 v-if="!_.isEmpty(xnotaedit)" row>
                                            <v-flex pt-2 pr-2 xs4>
                                                Tipe Pembayaran :
                                            </v-flex>
                                            <v-flex pt-2 pr-2 xs8>
                                                <v-autocomplete label="Account" :items="xpaymenttypes_edit" v-model="xpaymenttype_edit"
                                        :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
                                        item-text="coaDescription" outline return-object no-data-text="Cari Account">
                                        <template slot="item" slot-scope="{ item }">
                                            <v-list-tile-content>
                                                <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
                                                <v-list-tile-sub-title
                                                    v-text="item.coaAccountNo"></v-list-tile-sub-title>
                                            </v-list-tile-content>
                                        </template>
                                    </v-autocomplete>

                                            </v-flex>
                                        </v-layout>
                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
                                        <v-flex pt-2 pr-2 xs4>
                                                Total Bayar (Lama) :
                                            </v-flex>
                                            <v-flex pt-2 pr-2 xs8>
                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" readonly  v-model="xbayar_old"
                                                    class="input-plain" />
                                            </v-flex>
                                        </v-layout>
                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
                                        <v-flex pt-2 pr-2 xs4>
                                                Total Bayar (Baru) :
                                            </v-flex>
                                            <v-flex pt-2 pr-2 xs8>
                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" v-model="xbayar_edit"
                                                    class="input-plain" />
                                            </v-flex>
                                        </v-layout>
                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
                                        <v-flex pt-2 pr-2 xs4>
                                                Keterangan :
                                            </v-flex>
                                            <v-flex pt-2 pr-2 xs8>
                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" v-model="xketerangan_edit"
                                                    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  v-if="!_.isEmpty(xnotaedit)" color="info" flat @click="doEditNote()">
                            Simpan Perubahan
                        </v-btn>
                        <v-btn v-if="!_.isEmpty(xnotaedit)" color="primary" flat @click="xdialogedit = false">
                            Tutup
                        </v-btn>
                        <v-btn v-if="_.isEmpty(xnotaedit)" color="primary" flat @click="closeDialogEdit()">
                            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: #ffffff;
    }

    .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: #ffffff;
        border-spacing: 5px;
    }

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

    .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,
                xid: 0,
                xinv_id: 0,
                xdetail_id: 0,
                xnumber: '',
                xketerangan: '',
                xketerangan_edit: '',
                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", { search: '' })
            // 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)
            }
        },
        xtanggalbayar: {
            get() {
                return this.$store.state.paymentmanual.xtanggalbayar
            },
            set(val) {
                this.$store.commit("paymentmanual/update_xtanggalbayar",val)
            }
        },
        a_coa_search: {
            get() {
                return this.$store.state.paymentmanual.a_coa_search
            },

            set(val) {
                this.$store.commit("paymentmanual/update_a_coa_search", val);
                //this.aSearchAcCoa(val)
            }
        },
        a_supplier_search: {
            get() {
                return this.$store.state.paymentmanual.a_supplier_search
            },

            set(val) {
                this.$store.commit("paymentmanual/update_a_supplier_search", val);
                //this.aSearchAcSupplier(val)
            }
        },
            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)
                }
            },
            xdialogedit: {
                get() {
                    return this.$store.state.paymentmanual.dialog_edit
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_dialog_edit", val)
                }
            },
            xmsgedit() {
                return this.$store.state.paymentmanual.msg_edit
            },
            xnotaedit() {
                return this.$store.state.paymentmanual.nota_edit
            },
            xnoteedit: {
                get() {
                    return this.$store.state.paymentmanual.note_edit
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_note_edit", val)
                }
            },
            a_loading_coa: {
            get() {
                return this.$store.state.paymentmanual.a_loading_coa;
            },
            set(val) {
                this.$store.commit("paymentmanual/update_a_loading_coa", val);
            }
            },
            a_loading_supplier: {
            get() {
                return this.$store.state.paymentmanual.a_loading_supplier;
            },
            set(val) {
                this.$store.commit("paymentmanual/update_a_loading_supplier", val);
            },
        },
            openprintnote: {
                get() {
                    return this.$store.state.paymentmanual.open_print_note
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_open_print_note", false)
                }
            },
            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)
                }

            },
            xsuppliers() {
                return this.$store.state.paymentmanual.suppliers
            },
            xsupplier: {
                get() {
                    return this.$store.state.paymentmanual.supplier
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_supplier", val)
                    this.$store.dispatch("paymentmanual/selecttagihan", { id: val.SupplierID });
                }

            },
            xpaymenttypes_edit() {
                return this.$store.state.paymentmanual.paymenttypes_edit
            },
            xpaymenttype_edit: {
                get() {
                    return this.$store.state.paymentmanual.paymenttype_edit
                },
                set(val) {
                    this.$store.commit("paymentmanual/update_paymenttype_edit", 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()
            },
            async aSearchAcCoa(query) {
            if (!query) return;
            this.a_loading_coa = true;
            await this.$store.dispatch("paymentmanual/selectpaymenttype", { search: query });
            this.a_loading_coa = false;
        },
        async aSearchAcSupplier(query) {
            if (!query) return;
            this.a_loading_supplier = true;
            await this.$store.dispatch("paymentmanual/selectsupplier", { search: query });
            this.a_loading_supplier = false;
        },
            changeBayar() {
                var bayar = 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.SupplierInvoiceDetailID == pat.SupplierInvoiceDetailID
                });
                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)
                console.log('selected ' + 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)
            },
            toRupiah(data) {
                // Input validation
                if (!data) return '0,00'

                // Ensure we're working with a number
                if (typeof data !== 'number') {
                    data = parseFloat(data)
                }

                // Handle invalid numbers
                if (isNaN(data)) return '0,00'

                // Convert to string with exactly 2 decimal places without rounding
                // This preserves the exact value for display
                const parts = data.toString().split('.')
                const wholePart = parts[0]
                let decimalPart = parts.length > 1 ? parts[1] : '00'

                // Ensure we have exactly 2 decimal digits for display
                if (decimalPart.length > 2) {
                    decimalPart = decimalPart.substring(0, 2)
                } else if (decimalPart.length < 2) {
                    decimalPart = decimalPart.padEnd(2, '0')
                }

                // Format the whole number part with dots as thousand separators
                const formatted = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ".")

                // Return the formatted number
                return `${formatted},${decimalPart}`
            },
            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.init_sdate,
                    enddate: this.$store.state.bill.init_edate,
                    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.coaID,
                    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() {
                // alert(this.xbayar)

               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,
                    paymenttype: this.xpaymenttype.coaID,
                    supplier: this.xsupplier.SupplierID,
                    keterangan: this.xketerangan,
                    bills: this.$store.state.paymentmanual.selected_tagihan,
                    totalbill : this.$store.state.bill.selected_bill.totalbill,
                    paid : this.$store.state.bill.selected_bill.paid,
                    tanggalbayar : moment(this.xtanggalbayar, 'DDMMYYYY').format('DD-MM-YYYY')
                }
                //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 = {
                    nota: this.$store.state.paymentmanual.nota_delete
                }
                this.$store.dispatch("paymentmanual/delete_note", prm)
            },
            editNote(note, idx) {
                this.xid = note.note_id
                this.xinv_id = note.note_order_id
                this.xdetail_id = note.detail_id
                this.xnumber = note.note_number
                this.xketerangan_edit = note.keterangan
                this.xbayar_edit = parseInt(note.note_amount)
                this.xbayar_old = parseInt(note.note_amount)
                //this.$store.commit("paymentmanual/update_paymenttypes_edit", [{coaID : note.coaID,coaDescription : note.coaDescription}]);
                this.$store.dispatch("paymentmanual/selectpaymenttype", { search: note.coaDescription })
                this.$store.commit("paymentmanual/update_paymenttype_edit", {coaID : note.coaID,coaDescription : note.coaDescription});
                this.$store.commit("paymentmanual/update_nota_edit", note)
                let xmsg = "Nomor <span style='color:red'>" + note.note_number + "</span> "
                this.$store.commit("paymentmanual/update_msg_edit", xmsg)
                this.$store.commit("paymentmanual/update_dialog_edit", true)
            },
            doEditNote() {
                let prm = {
                    id: this.xid,
                    inv_id: this.xinv_id,
                    detail_id : this.xdetail_id,
                    note_number: this.xnumber,
                    keterangan: this.xketerangan_edit,
                    amount_old: this.xbayar_old,
                    amount_new: this.xbayar_edit,
                    paymenttype: this.xpaymenttype_edit.coaID,
                }
                this.$store.dispatch("paymentmanual/edit_note", prm)
            },
            closeDialogDelete() {
                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_delete", false)
                this.$store.commit("bill/update_selected_bill", {})
                this.$store.dispatch("bill/search", {
                    startdate: this.$store.state.bill.init_sdate,
                    enddate: this.$store.state.bill.init_edate,
                    search: this.$store.state.bill.search,
                    status: this.$store.state.bill.selected_status.value,
                    lastidx: idx,
                    current_page: this.$store.state.bill.current_page
                })
            },
            closeDialogEdit() {
                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_edit", false)
                this.$store.commit("bill/update_selected_bill", {})
                this.$store.dispatch("bill/search", {
                    startdate: this.$store.state.bill.init_sdate,
                    enddate: this.$store.state.bill.init_edate,
                    search: this.$store.state.bill.search,
                    status: this.$store.state.bill.selected_status.value,
                    lastidx: idx,
                    current_page: this.$store.state.bill.current_page
                })
            },
            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)
            }
        },
        watch: {
        a_coa_search(val) {
            this.aSearchAcCoa(val)
        },
        a_supplier_search(val) {
            this.aSearchAcSupplier(val)
        }
    }
    }
</script>
