<template>
    <v-dialog v-model="dialog_detail" persistent width="85vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                DETAIL PAYMENT INSTRUCTION {{ selected_payment.SupplierPaymentNumber ?? "" }}
            </v-card-title>

            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs3>
                        <div class="label-value subheading mb-2">
                            <span class="label">Nomor Payment</span>
                        </div>
                    </v-flex>
                    <v-flex xs9>
                        <div class="label-value subheading mb-2">
                            <span class="value">: {{ selected_payment.SupplierPaymentNumber }}</span>
                        </div>
                    </v-flex>

                    <v-flex xs3>
                        <div class="label-value subheading mb-2">
                            <span class="label">Tanggal</span>
                        </div>
                    </v-flex>
                    <v-flex xs9>
                        <div class="label-value subheading mb-2">
                            <span class="value">
                                : {{ selected_payment.SupplierPaymentDate }}
                            </span>
                        </div>
                    </v-flex>

                    <v-flex xs3>
                        <div class="label-value subheading mb-2">
                            <span class="label">Nomor PI</span>
                        </div>
                    </v-flex>
                    <v-flex xs9>
                        <div class="label-value subheading mb-2">
                            <span class="value">: {{ selected_payment.SupplierInvoiceNumber }}</span>
                        </div>
                    </v-flex>

                    <v-flex xs3>
                        <div class="label-value subheading mb-2">
                            <span class="label">Supplier</span>
                        </div>
                    </v-flex>
                    <v-flex xs9>
                        <div class="label-value subheading mb-2">
                            <span class="value">: {{ selected_payment.SupplierName }}</span>
                        </div>
                    </v-flex>

                    <v-flex xs3>
                        <div class="label-value subheading mb-2">
                            <span class="label">Tanggal Rencana Bayar</span>
                        </div>
                    </v-flex>
                    <v-flex xs9>
                        <div class="label-value subheading mb-2">
                            <span class="value">
                                : {{ selected_payment.SupplierInvoiceDraftPaymentDate }}
                            </span>
                        </div>
                    </v-flex>

                    <v-flex xs3>
                        <div class="label-value subheading mb-2">
                            <span class="label">Total Bayar</span>
                        </div>
                    </v-flex>
                    <v-flex xs9>
                        <div class="label-value subheading mb-2">
                            <span class="value">
                                : Rp. {{ formatCurrency(selected_payment.SupplierPaymentAmount) }}
                            </span>
                        </div>
                    </v-flex>
                </v-layout>
                <v-divider class="my-1"></v-divider>
                <div class="mt-2">
                    <v-data-table 
                        :headers="headers" :items="payment_items.detail"
                        hide-actions class="elevation-1"
                    >
                        <template v-slot:items="props">
                            <tr>
                                <td class="text-xs-center">{{ props.item.M_ItemDesc }}</td>
                                <td class="text-xs-center">{{ props.item.SupplierInvoiceDetailQty }}</td>
                                <td class="text-xs-center">
                                    Rp. {{ formatCurrency(props.item.SupplierInvoiceDetailPrice) }}
                                </td>
                                <td class="text-xs-center">
                                    Rp. {{ formatCurrency(props.item.SupplierInvoiceDetailDiscountAmount) }}
                                </td>
                                <td class="text-xs-center">
                                    Rp. {{ formatCurrency(props.item.DiscountedPrice) }}
                                </td>
                                <td class="text-xs-center">
                                    Rp. {{ formatCurrency(props.item.SupplierInvoiceDetailTotal) }}
                                </td>
                            </tr>
                        </template>
                        <template v-slot:footer>
                            <tr>
                                <td :colspan="4">
                                    <strong class="ml-2">SUBTOTAL</strong>
                                </td>
                                <td :colspan="2" class="text-xs-right">
                                    <strong>
                                        Rp. {{ formatCurrency(payment_items.SupplierInvoiceSubTotal) }}
                                    </strong>
                                </td>
                            </tr>
                            <tr v-if="payment_items.SupplierInvoiceShippingCost > 0.00">
                                <td :colspan="4">
                                    <strong class="ml-2">BIAYA PENGIRIMAN</strong>
                                </td>
                                <td :colspan="2" class="text-xs-right">
                                    <strong>
                                        Rp. {{ formatCurrency(payment_items.SupplierInvoiceShippingCost) }}
                                    </strong>
                                </td>
                            </tr>
                            <tr>
                                <td :colspan="4">
                                    <strong class="ml-2">DISKON</strong>
                                </td>
                                <td :colspan="2" class="text-xs-right">
                                    <v-chip 
                                        v-if="payment_items.SupplierInvoiceDiscountPercent > 0.00" label
                                    >{{ payment_items.SupplierInvoiceDiscountPercent }} %</v-chip>
                                    <strong>
                                        Rp. {{ formatCurrency(payment_items.SupplierInvoiceDiscountAmount) }}
                                    </strong>
                                </td>
                            </tr>
                            <tr>
                                <td :colspan="4">
                                    <strong class="ml-2">PAJAK</strong>
                                </td>
                                <td :colspan="2" class="text-xs-right">
                                    <v-chip 
                                        v-if="payment_items.SupplierInvoiceTaxPercentPpn > 0.00" label
                                    >{{ payment_items.SupplierInvoiceTaxPercentPpn }} %</v-chip>
                                    <strong>
                                        Rp. {{ formatCurrency(payment_items.SupplierInvoiceTaxAmountPpn) }}
                                    </strong>
                                </td>
                            </tr>
                            <tr>
                                <td :colspan="4">
                                    <strong class="ml-2">GRAND TOTAL</strong>
                                </td>
                                <td :colspan="2" class="text-xs-right">
                                    <strong>
                                        Rp. {{ formatCurrency(payment_items.SupplierInvoiceGrandTotal) }}
                                    </strong>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>
                </div>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" outline flat @click="dialog_detail = false">TUTUP</v-btn>
                <v-btn 
                    v-show="operation_mode == 'update'"
                    color="success" outline flat 
                    @click="updateStatusPayment()"
                >
                    {{ userinfo.level == '1' 
                        ? "VERIFIKASI"
                        : "APPROVE"
                    }}
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style scoped>
    .label-value subheading mb-2 {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
    }

    .label {
        font-weight: bold;
        margin-bottom: 0.25rem;
    }

    .value {
        font-size: 1rem;
    }
</style>

<script>
module.exports = {
    data() {
        return {
            headers: [
                {
                    text: "ITEM", align: "center", sortable: false,
                    value: "M_ItemCode", width: "25%", class: "blue lighten-3 white--text",
                },
                {
                    text: "QTY", align: "center", sortable: false,
                    value: "PoQty", width: "10%", class: "blue lighten-3 white--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "price", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "DISKON", align: "center", sortable: false,
                    value: "price", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "HARGA SETELAH DISKON", align: "center", sortable: false,
                    value: "price", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "TOTAL", align: "center", sortable: false,
                    value: "Total", width: "15%", class: "blue lighten-3 white--text",
                }
            ]
        }
    },
    computed: {
        dialog_detail: {
            get() {
                return this.$store.state.suppayment.dialog_detail;
            },
            set(val) {
                this.$store.commit("suppayment/update_dialog_detail", val);
            }
        },
        selected_payment: {
            get() {
                return this.$store.state.suppayment.selected_payment;
            },
            set(val) {
                this.$store.commit("suppayment/update_selected_payment", val);
            }
        },
        payment_items() {
            return this.$store.state.suppayment.payment_items;
        },
        userinfo() {
            return this.$store.state.suppayment.userinfo
        },
        operation_mode() {
            return this.$store.state.suppayment.operation_mode;
        },
        operation_loading() {
            return this.$store.state.suppayment.operation_loading;
        }
    },
    methods: {
        formatCurrency(value) {
            const num = parseFloat(value);
            if (isNaN(num)) return 0;
            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        },
        updateStatusPayment() {
            let loading = this.operation_loading;
            if (loading) {
                const snack = { state: true, color: 'warning', message: 'proses masih berjalan' }
                this.$store.commit("suppayment/update_snackbar", snack)
            } else {
                this.$store.dispatch("suppayment/updateStatus")
            }
        }
    },
}
</script>