<template>
    <v-dialog v-model="dialog_form_inspeksi" persistent width="40vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                FORM INSPEKSI ITEM {{ selected_item_received.M_ItemDesc }}
            </v-card-title>

            <v-card-text>
                <v-layout row>
                    <v-flex xs6 pr-1>
                        <v-text-field label="Jumlah Pesan" type="number" min="0" hide-details
                            v-model="form_inspeksi.qty_po" outline step="1"></v-text-field>
                    </v-flex>
                    <v-flex xs6 pl-1>
                        <v-text-field label="Jumlah Actual" type="number" min="0" hide-details
                            v-model="form_inspeksi.qty_ro" outline step="1"></v-text-field>
                    </v-flex>
                </v-layout>

                <v-layout row mt-2>
                    <v-flex xs6 pr-1>
                        <v-text-field label="Harga Pesan" hide-details outline prefix="Rp."
                            v-model="form_inspeksi.price_po" @focus="handleFocus(form_inspeksi, 'order')"
                            @blur="handleBlur(form_inspeksi, 'order')"></v-text-field>
                    </v-flex>
                    <v-flex xs6 pl-1>
                        <v-text-field label="Harga Actual" hide-details outline prefix="Rp."
                            v-model="form_inspeksi.price_ro" @focus="handleFocus(form_inspeksi, 'arrive')"
                            @blur="handleBlur(form_inspeksi, 'arrive')"></v-text-field>
                    </v-flex>
                </v-layout>

                <v-layout row mt-2>
                    <v-flex xs6 pr-1>
                        <v-menu v-model="menuDatePo" lazy offset-y max-width="290px" full-width
                            transition="scale-transition" min-width="290px" :nudge-right="40"
                            :close-on-content-click="false">
                            <template v-slot:activator="{ on }">
                                <v-text-field :value="form_inspeksi.date_po" v-on="on" readonly
                                    label="Tanggal Terima Pesan" outline hide-details></v-text-field>
                            </template>
                            <v-date-picker v-model="form_inspeksi.date_po" no-title
                                @input="menuDatePo = false"></v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-flex xs6 pl-1>
                        <v-menu v-model="menuDateRo" lazy offset-y max-width="290px" full-width
                            transition="scale-transition" min-width="290px" :nudge-right="40"
                            :close-on-content-click="false">
                            <template v-slot:activator="{ on }">
                                <v-text-field :value="form_inspeksi.date_ro" v-on="on" readonly
                                    label="Tanggal Terima Actual" outline hide-details></v-text-field>
                            </template>
                            <v-date-picker v-model="form_inspeksi.date_ro" no-title
                                @input="menuDateRo = false"></v-date-picker>
                        </v-menu>
                    </v-flex>
                </v-layout>

                <v-layout row mt-2 wrap>
                    <v-flex xs12>
                        <v-radio-group v-model="form_inspeksi.condt_kemasan" label="Kondisi Kemasan" row hide-details>
                            <v-radio label="Baik" value="1"></v-radio>
                            <v-radio label="Tidak Baik" value="2"></v-radio>
                        </v-radio-group>
                        <v-text-field v-if="form_inspeksi.condt_kemasan == '2'" class="mt-2" label="Catatan Kemasan"
                            outline hide-details v-model="form_inspeksi.catatan_kemasan"></v-text-field>
                    </v-flex>
                    <v-flex xs12 mt-2>
                        <v-radio-group v-model="form_inspeksi.condt_pengiriman" label="Kondisi Pengiriman" row
                            hide-details>
                            <v-radio label="Sesuai" value="1"></v-radio>
                            <v-radio label="Tidak Sesuai" value="2"></v-radio>
                        </v-radio-group>
                        <v-text-field v-if="form_inspeksi.condt_pengiriman == '2'" class="mt-2" outline
                            label="Catatan Pengiriman" hide-details
                            v-model="form_inspeksi.catatan_kirim"></v-text-field>
                    </v-flex>
                    <v-flex xs12 mt-2>
                        <v-radio-group v-model="form_inspeksi.summary" row label="Kesimpulan" hide-details>
                            <v-radio label="Diterima" value="accept"></v-radio>
                            <v-radio label="Ditolak" value="reject"></v-radio>
                            <v-radio label="Diterima dengan Catatan" value="acceptnote"></v-radio>
                        </v-radio-group>
                    </v-flex>
                    <v-flex xs12 mt-2>
                        <v-textarea v-if="
                            form_inspeksi.summary == 'reject' ||
                            form_inspeksi.summary == 'acceptnote'
                        " v-model="form_inspeksi.catatan" outline auto-grow rows="1" label="Catatan"
                            hide-details></v-textarea>
                    </v-flex>
                </v-layout>

                <v-layout row mt-2>
                    <v-flex xs6 pr-1>
                        <v-autocomplete label="Staff Penerima" outline hide-details v-model="form_inspeksi.pemeriksa"
                            :items="list_staff" item-text="M_UserUsername" item-value="M_UserID"></v-autocomplete>
                    </v-flex>
                    <v-flex xs6 pl-1>
                        <v-text-field label="Petugas Pengirim" outline hide-details
                            v-model="form_inspeksi.pengirim"></v-text-field>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="red" flat outline @click="closeInspeksi()">Tutup</v-btn>
                <v-btn color="green" flat outline @click="simpanInspeksi()">Simpan</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            menuDatePo: false,
            menuDateRo: false,
            menuExpired: false
        };
    },
    computed: {
        dialog_form_inspeksi: {
            get() {
                return this.$store.state.form.dialog_form_inspeksi;
            },
            set(val) {
                this.$store.commit("form/update_dialog_form_inspeksi", val);
            }
        },
        form_inspeksi: {
            get() {
                return this.$store.state.form.form_inspeksi;
            },
            set(val) {
                this.$store.commit("form/update_form_inspeksi", val);
            }
        },
        selected_item_received: {
            get() {
                return this.$store.state.form.selected_item_received;
            },
            set(val) {
                this.$store.commit("form/update_selected_item_received", val);
            }
        },
        form_receive_item: {
            get() {
                return this.$store.state.form.form_receive_item;
            },
            set(val) {
                this.$store.commit("form/update_form_receive_item", val);
            }
        },
        list_staff() {
            return this.$store.state.ro.list_staff;
        }
    },
    methods: {
        formatCurrency(value) {
            const num = parseFloat(value);
            if (isNaN(num)) return 0;
            return num
                .toFixed(2)
                .replace(".", ",")
                .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        },
        parseCurrency(value) {
            let cleanValue = 0;
            if (!isNaN(value)) {
                cleanValue = value
            } else {
                cleanValue = String(value).replace(/\./g, '');
                cleanValue = cleanValue.replace(',', '.');
            }
            return parseFloat(cleanValue) || 0;
        },
        handleFocus(item, name) {
            if (name == 'order') {
                const current = item.price_po;
                const parsed = this.parseCurrency(current);
                item.price_po = parsed
            }

            if (name == 'arrive') {
                const current = item.price_ro;
                const parsed = this.parseCurrency(current);
                item.price_ro = parsed;
            }
        },
        handleBlur(item, name) {
            if (name == 'order') {
                const current = item.price_po;
                const parsed = this.parseCurrency(current);
                item.price_po = this.formatCurrency(parsed);
            }

            if (name == 'arrive') {
                const current = item.price_ro;
                const parsed = this.parseCurrency(current);
                item.price_ro = this.formatCurrency(parsed);
            }
        },
        async closeInspeksi() {
            let a = {
                qty_po: 0,
                qty_ro: 0,
                price_po: 0.0,
                price_ro: 0.0,
                date_po: moment(new Date()).format("YYYY-MM-DD"),
                date_ro: moment(new Date()).format("YYYY-MM-DD"),
                condt_kemasan: "",
                catatan_kemasan: "",
                condt_pengiriman: "",
                catatan_kirim: "",
                summary: "",
                catatan: "",
                pemeriksa: "",
                pengirim: ""
            };

            this.form_inspeksi = a;
            this.selected_item_received = {};
            this.dialog_form_inspeksi = false;
        },
        async simpanInspeksi() {
            let data_inspeksi = JSON.parse(JSON.stringify(this.form_inspeksi));
            let data_received = JSON.parse(JSON.stringify(this.selected_item_received));
            let list_item_received = JSON.parse(JSON.stringify(this.form_receive_item));

            data_inspeksi.price_po = this.parseCurrency(data_inspeksi.price_po);
            data_inspeksi.price_ro = this.parseCurrency(data_inspeksi.price_ro);

            data_received.inspeksi_item = data_inspeksi;
            const idxToUpdate = list_item_received.findIndex(
                (obj) => obj.keyID == data_received.keyID
            );
            if (idxToUpdate != -1) {
                list_item_received[idxToUpdate].inspeksi_item = data_inspeksi;
            }

            this.form_receive_item = list_item_received;
            this.closeInspeksi();
        }
    }
};
</script>
