<template>
    <v-dialog v-model="dialogCreate" persistent max-width="85%">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                FORM FAKTUR PO
            </v-card-title>
            <v-card-text class="pt-0 pb-0 mt-4">
                <v-form ref="formCreate" v-model="validationForm" lazy-validation>
                    <v-layout row wrap>
                        <v-flex pr-2 xs2>
                            <v-menu
                                v-model="menuDateForm" 
                                transition="scale-transition"
                                :close-on-content-click="false"
                                :nudge-right="40" lazy
                                full-width offset-y
                                max-width="290px" min-width="290px"
                            >
                                <template v-slot:activator="{on}">
                                    <v-text-field
                                        label="Tanggal Faktur" readonly
                                        :value="DateFormatted" v-on="on"
                                        outline hide-details
                                    ></v-text-field>
                                </template>
                                <v-date-picker 
                                    no-title v-model="form_date" 
                                    @input="menuDateForm = false"
                                ></v-date-picker>
                            </v-menu>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-menu
                                v-model="menuDueDateForm"
                                transition="scale-transition"
                                :close-on-content-click="false"
                                :nudge-right="40" lazy
                                full-width offset-y
                                max-width="290px" min-width="290px"
                            >
                                <template v-slot:activator="{on}">
                                    <v-text-field
                                        label="Tanggal Jatuh Tempo" readonly
                                        :value="DueDateFormatted" v-on="on"
                                        hide-details outline
                                    ></v-text-field>
                                </template>
                                <v-date-picker 
                                    no-title v-model="form_duedate" 
                                    @input="menuDueDateForm = false"
                                ></v-date-picker>
                            </v-menu>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-autocomplete readonly
                                v-model="form_supplier"
                                label="Supplier" menu-icon="mdi-chevron-down"
                                item-text="SupplierName"
                                :items="list_supplier.records"
                                :rules="rules_text" outline
                                return-object required
                            ></v-autocomplete>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field readonly
                                v-model="form_refnumber"
                                label="Nomor Referensi"
                                :rules="rules_text"
                                outline required
                            ></v-text-field>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field
                                v-model="form_tax_invoicenum"
                                label="Nomor Faktur Pajak"
                                :rules="rules_text"
                                required outline
                            ></v-text-field>
                        </v-flex>
                        <v-flex xs2>
                            <v-menu
                                v-model="menuTaxInvoiceDateForm"
                                transition="scale-transition"
                                :close-on-content-click="false"
                                :nudge-right="40" lazy
                                full-width offset-y
                                max-width="290px" min-width="290px"
                            >
                                <template v-slot:activator="{on}">
                                    <v-text-field
                                        label="Tanggal Faktur Pajak" readonly
                                        :value="TaxInvDateFormatted" v-on="on"
                                        outline hide-details
                                    ></v-text-field>
                                </template>
                                <v-date-picker 
                                    no-title v-model="form_tax_invoicedate" 
                                    @input="menuTaxInvoiceDateForm = false"
                                ></v-date-picker>
                            </v-menu>
                        </v-flex>
                    </v-layout>
                    <v-layout row wrap>
                        <v-flex pr-2 xs2>
                            <v-autocomplete
                                v-model="form_disc_type"
                                label="Tipe Diskon" menu-icon="mdi-chevron-down"
                                item-text="SupplierName"
                                :items="['Percentage', 'Absolute']"
                                outline required :rules="rules_text"
                            ></v-autocomplete>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field
                                v-if="this.form_disc_type == 'Percentage'"
                                v-model="form_disc_percent" 
                                label="Diskon (%)" suffix="%"
                                :rules="rules_number" 
                                outline type="number"
                            ></v-text-field>
                            <v-text-field
                                v-else
                                v-model="form_disc_amount"
                                label="Nilai diskon"
                                :rules="rules_number"
                                outline type="number"
                            ></v-text-field>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field
                                v-model="form_tax_percent_pph"
                                label="Pajak Penghasilan (%)" suffix="%"
                                :rules="rules_number"
                                outline type="number"
                            ></v-text-field>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field
                                v-model="form_tax_percent_ppn"
                                label="Pajak Pendapatan (%)" suffix="%"
                                :rules="rules_number"
                                outline type="number"
                            ></v-text-field>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field
                                v-model="form_shipping_cost"
                                label="Biaya Pengiriman"
                                :rules="rules_number"
                                outline type="number"
                            ></v-text-field>
                        </v-flex>
                        <v-flex xs2>
                            <v-text-field
                                v-model="form_adjust_amount"
                                label="Jumlah Penyesuaian"
                                :rules="rules_number"
                                outline type="number"
                            ></v-text-field>
                        </v-flex>
                        <v-flex xs12>
                            <v-textarea
                                label="Catatan Penyesuaian"
                                v-model="form_adjust_note"
                                outline rows="2"
                            ></v-textarea>
                        </v-flex>
                    </v-layout>
                    <v-layout row wrap>
                        <v-flex pr-2 xs3>
                            <v-autocomplete
                                v-model="form_po"
                                label="Purchase Order" menu-icon="mdi-chevron-down"
                                item-text="PurchaseOrderNumber"
                                :items="list_po.records" return-object
                                outline required :rules="rules_text"
                            ></v-autocomplete>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field
                                v-model="form_grandtotal"
                                label="Jumlah total"
                                :rules="rules_number"
                                type="number" required outline
                            ></v-text-field>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-text-field
                                v-model="form_paidamount"
                                label="Jumlah dibayar"
                                :rules="rules_number"
                                type="number" required outline
                            ></v-text-field>
                        </v-flex>
                        <v-flex pr-2 xs2>
                            <v-menu
                                v-model="menuReceivedDateForm" 
                                transition="scale-transition"
                                :close-on-content-click="false"
                                :nudge-right="40" lazy
                                full-width offset-y
                                max-width="290px" min-width="290px"
                            >
                                <template v-slot:activator="{on}">
                                    <v-text-field
                                        label="Tanggal Diterima" readonly outline
                                        :value="ReceivedDateFormatted" v-on="on"
                                    ></v-text-field>
                                </template>
                                <v-date-picker 
                                    no-title v-model="form_receiveddate" 
                                    @input="menuReceivedDateForm = false"
                                ></v-date-picker>
                            </v-menu>
                        </v-flex>
                        <v-flex xs3>
                            <v-autocomplete
                                v-model="form_receivedby"
                                label="Diterima Oleh" menu-icon="mdi-chevron-down"
                                item-text="M_StaffName"
                                :items="list_staff.records"
                                :rules="rules_text" outline
                                return-object required
                            ></v-autocomplete>
                        </v-flex>
                        <v-flex xs12>
                            <v-textarea
                                label="Catatan Faktur"
                                v-model="form_note"
                                outline rows="2"
                            ></v-textarea>
                        </v-flex>
                    </v-layout>
                </v-form>
                <v-flex xs2>
                    <v-btn
                        block color="info"
                        :disabled="isObjectEmpty(this.form_supplier)"
                        @click="dialogAddItem()"
                    >
                        TAMBAHKAN ITEM
                    </v-btn>
                </v-flex>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" flat @click="closeDialog()">
                    Tutup
                </v-btn>
                <v-btn color="primary" dark @click="">
                    Simpan
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    module.exports =  {
        components: {},
        mounted() {
            
        },
        data() {
            return {
                validationForm: false,
                menuDateForm: false,
                menuDueDateForm: false,
                menuTaxInvoiceDateForm: false,
                menuReceivedDateForm: false,
                rules_text: [(v) => !!v || "Tidak boleh kosong"],
                rules_number: [(v) => !isNaN(v) || "Tidak boleh kosong"],
            }
        },
        computed: {
            dialogCreate: {
                get() {
                    return this.$store.state.form.opendialog;
                },
                set(val) {
                    this.$store.commit("form/update_opendialog", val);
                }
            },
            form_date: {
                get() {
                    return this.$store.state.form.form_date;
                },
                set(val) {
                    this.$store.commit("form/update_form_date", val);
                }
            },
            DateFormatted() {
                return this.formatDate(this.form_date);
            },
            form_duedate: {
                get() {
                    return this.$store.state.form.form_duedate
                },
                set(val) {
                    this.$store.commit("form/update_form_duedate", val)
                }
            },
            DueDateFormatted() {
                return this.formatDate(this.form_duedate)
            },
            form_supplier: {
                get() {
                    return this.$store.state.form.form_supplier;
                },
                set(val) {
                    this.$store.commit("form/update_form_supplier", val);
                }
            },
            form_refnumber: {
                get() {
                    return this.$store.state.form.form_refnumber;
                },
                set(val) {
                    this.$store.commit("form/update_form_refnumber", val);
                }
            },
            form_tax_invoicenum: {
                get() {
                    return this.$store.state.form.form_tax_invoicenum;
                },
                set(val) {
                    this.$store.commit("form/update_form_tax_invoicenum", val);
                }
            },
            form_tax_invoicedate: {
                get() {
                    return this.$store.state.form.form_tax_invoicedate;
                },
                set(val) {
                    this.$store.commit("form/update_form_tax_invoicedate", val);
                }
            },
            TaxInvDateFormatted() {
                return this.formatDate(this.form_tax_invoicedate);
            },
            form_disc_type: {
                get() {
                    return this.$store.state.form.form_disc_type;
                },
                set(val) {
                    this.$store.commit("form/update_form_disc_type", val);
                }
            },
            form_disc_percent: {
                get() {
                    return this.$store.state.form.form_disc_percent;
                },
                set(val) {
                    this.$store.commit("form/update_form_disc_percent", val);
                }
            },
            form_disc_amount: {
                get() {
                    return this.$store.state.form.form_disc_amount;
                },
                set(val) {
                    this.$store.commit("form/update_form_disc_amount", val);
                }
            },
            form_tax_percent_pph: {
                get() {
                    return this.$store.state.form.form_tax_percent_pph;
                },
                set(val) {
                    this.$store.commit("form/update_form_tax_percent_pph", val);
                }
            },
            form_tax_percent_ppn: {
                get() {
                    return this.$store.state.form.form_tax_percent_ppn;
                },
                set(val) {
                    this.$store.commit("form/update_form_tax_percent_ppn", val);
                }
            },
            form_shipping_cost: {
                get() {
                    return this.$store.state.form.form_shipping_cost;
                },
                set(val) {
                    this.$store.commit("form/update_form_shipping_cost", val);
                }
            },
            form_adjust_amount: {
                get() {
                    return this.$store.state.form.form_adjust_amount;
                },
                set(val) {
                    this.$store.commit("form/update_form_adjust_amount", val);
                }
            },
            form_adjust_note: {
                get() {
                    return this.$store.state.form.form_adjust_note;
                },
                set(val) {
                    this.$store.commit("form/update_form_adjust_note", val);
                }
            },
            form_po: {
                get() {
                    return this.$store.state.form.form_po;
                },
                set(val) {
                    this.$store.commit("form/update_form_po", val)
                }
            },
            form_grandtotal: {
                get() {
                    return this.$store.state.form.form_grandtotal;
                },
                set(val) {
                    this.$store.commit("form/update_form_grandtotal", val);
                }
            },
            form_paidamount: {
                get() {
                    return this.$store.state.form.form_paidamount;
                },
                set(val) {
                    this.$store.commit("form/update_form_paidamount", val);
                }
            },
            form_note: {
                get() {
                    return this.$store.state.form.form_note;
                },
                set(val) {
                    this.$store.commit("form/update_form_note", val);
                }
            },
            form_receiveddate: {
                get() {
                    return this.$store.state.form.form_receiveddate;
                },
                set(val) {
                    this.$store.commit("form/update_form_receiveddate", val);
                }
            },
            ReceivedDateFormatted() {
                return this.formatDate(this.form_receiveddate);
            },
            form_receivedby: {
                get() {
                    return this.$store.state.form.form_receivedby;
                },
                set(val) {
                    this.$store.commit("form/update_form_receivedby", val);
                }
            },
            list_supplier() {
                return this.$store.state.data.list_supplier;
            },
            list_staff() {
                return this.$store.state.data.list_staff;
            },
            list_po() {
                return this.$store.state.data.list_po;
            }
        },
        methods: {
            closeDialog() {
                this.dialogCreate = false
            },
            formatDate(date) {
                if (!date) return null;

                const [year, month, day] = date.split("-");
                return `${day}-${month}-${year}`;
            },
            dialogAddItem() {

            },
            isObjectEmpty(obj) {
                return Object.keys(obj).length === 0 && obj.constructor === Object;
            }
        },
        watch: {

        }
    }
</script>