<template>
<v-dialog v-model="dialog_viewpo" persistent width="70vw">
    <v-card>
        <v-card-title class="headline grey lighten-2">VIEW PO JASA</v-card-title>
        <v-card-text style="max-height: 80vh; overflow-y: auto;">
            <v-layout row wrap>
                <v-flex xs4>
                    <v-text-field
                        v-model="formattedPODate" label="Tanggal PO"
                        hide-details readonly outline
                    ></v-text-field>
                </v-flex>
                <v-flex xs4 pl-2>
                    <v-autocomplete
                        :items="list_supplier" hide-details outline readonly
                        v-model="form_pojasa.supplierID" label="Vendor"
                        item-text="SupplierName" item-value="SupplierID"
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs4 pl-2>
                    <v-text-field
                        v-model="form_pojasa.reference" hide-details outline 
                        label="Referensi" placeholder="nomor request" readonly
                    ></v-text-field>
                </v-flex>
            </v-layout>

            <v-layout row wrap class="mt-2">
                <v-flex xs4>
                    <v-autocomplete
                        :items="list_branch" hide-details outline readonly
                        v-model="form_pojasa.branchcode" label="Cabang" 
                        item-text="M_BranchName" item-value="M_BranchCode"
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2>
                    <v-autocomplete
                        :items="['absolute', 'percent']" hide-details outline 
                        v-model="form_pojasa.typepajak" label="Pajak (PPN)" readonly
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2>
                    <v-text-field
                        v-if="form_pojasa.typepajak == 'percent'" label="Pajak" 
                        v-model="form_pojasa.valuepajak" hide-details outline 
                        placeholder="besar pajak dalam persen" suffix="%" readonly
                    ></v-text-field>
                    <v-text-field
                        v-else label="Pajak" outline prefix="Rp." readonly
                        v-model="form_pojasa.valuepajak" hide-details 
                        placeholder="besar pajak dalam rupiah" 
                    ></v-text-field>
                </v-flex>
                <v-flex xs2 pl-2>
                    <v-autocomplete
                        :items="['absolute', 'percent']" hide-details outline 
                        v-model="form_pojasa.typediskon" label="Diskon" readonly
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2>
                    <v-text-field
                        v-if="form_pojasa.typediskon == 'percent'" label="Diskon" 
                        v-model="form_pojasa.valuediskon" hide-details outline 
                        placeholder="besar diskon dalam persen" suffix="%" readonly
                    ></v-text-field>
                    <v-text-field
                        v-else label="Diskon" outline prefix="Rp." readonly
                        v-model="form_pojasa.valuediskon" hide-details 
                        placeholder="besar diskon dalam rupiah" 
                    ></v-text-field>
                </v-flex>
            </v-layout>

            <v-layout row wrap class="mt-2">
                <v-flex xs3>
                    <v-autocomplete
                        :items="type_kontrak" hide-details outline readonly
                        v-model="form_pojasa.typekontrak" label="Jenis Kontrak" 
                        item-value="value" item-text="name" 
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs3 pl-2>
                    <v-text-field
                        v-model="formattedStartKontrak" outline hide-details 
                        label="Tanggal mulai kontrak" readonly
                    ></v-text-field>
                </v-flex>
                <v-flex xs3 pl-2>
                    <v-text-field
                        v-model="formattedEndKontrak" outline hide-details 
                        label="Tanggal akhir kontrak" readonly
                    ></v-text-field>
                </v-flex>
                <v-flex xs3 pl-2>
                    <v-text-field
                        :disabled="form_pojasa.typekontrak === 'once'"
                        label="Jumlah Keluar PI" hide-details readonly
                        v-model="form_pojasa.PIOutQty" outline
                    ></v-text-field>
                </v-flex>

                <!-- new row -->
                <v-flex xs12 mt-2>
                    <v-textarea
                        v-model="form_pojasa.catatan" auto-grow readonly
                        rows="1" outline label="Catatan" hide-details
                    ></v-textarea>
                </v-flex>
            </v-layout>

            <v-layout row wrap class="mt-2">
                <v-flex xs12 v-if="selected_requestjasa.length > 0">
                    <v-data-table
                        :headers="headers" :items="selected_requestjasa" item-key="M_ItemCode"
                        :expand="expand" class="elevation-1" hide-actions
                    >
                        <template v-slot:items="props">
                            <tr @click="props.expanded = !props.expanded">
                                <td class="text-xs-center pa-2">
                                    <v-icon>{{ props.expanded
                                        ? "keyboard_arrow_down"
                                        : "keyboard_arrow_right"
                                    }}</v-icon>
                                </td>
                                <td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.RequestQty }}</td>
                                <td class="text-xs-center pa-2">
                                    Rp. {{ formatCurrency(props.item.SupplierPrice) }}
                                </td>
                                <td class="text-xs-center pa-2">
                                    <div v-if="props.item.DiskonType == 'R'">
                                        Rp. {{ formatCurrency(props.item.DiskonAmount) }}
                                    </div>
                                    <div v-if="props.item.DiskonType == 'P'">
                                        {{ formatCurrency(props.item.DiskonAmount) }} %
                                    </div>
                                </td>
                                <td class="text-xs-center pa-2">
                                    Rp. {{ formatCurrency(props.item.EndPrice) }}
                                </td>
                                <td class="text-xs-center pa-2">
                                    Rp. {{ formatCurrency(props.item.TempTotal) }}
                                </td>
                            </tr>
                        </template>

                        <template v-slot:expand="props">
                        <v-card flat>
                            <v-card-text>
                            <v-data-table
                                :headers="headers_detail" class="elevation-0"
                                :items="props.item.detail" hide-actions
                            >
                                <template v-slot:items="det">
                                <tr>
                                    <td class="text-xs-center pa-2">{{ det.item.M_ItemDesc }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.PurchaseRequestNumber }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.M_BranchName }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.RequestQty }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.ItemUnitName }}</td>
                                    <td class="text-xs-center pa-2">
                                        Rp. {{ formatCurrency(det.item.SupplierPrice) }}
                                    </td>
                                </tr>
                                </template>
                            </v-data-table>
                            </v-card-text>
                        </v-card>
                        </template>

                        <template v-slot:footer>
                            <tr>
                                <td colspan="5" class="text-xs-left pa-2">
                                    <strong>JUMLAH</strong>
                                </td>
                                <td colspan="2" class="text-xs-right pa-2">
                                    <strong>Rp. {{ formatCurrency(summary_pojasa.subtotal) }}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-xs-left pa-2">
                                    <strong>DISKON</strong>
                                </td>
                                <td colspan="2" class="text-xs-right pa-2">
                                    <strong>Rp. {{ formatCurrency(summary_pojasa.diskon) }}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-xs-left pa-2">
                                    <strong>PAJAK</strong>
                                </td>
                                <td colspan="2" class="text-xs-right pa-2">
                                    <strong>Rp. {{ formatCurrency(summary_pojasa.pajak) }}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-xs-left pa-2">
                                    <strong>TOTAL</strong>
                                </td>
                                <td colspan="2" class="text-xs-right pa-2">
                                    <strong>Rp. {{ formatCurrency(summary_pojasa.total) }}</strong>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="closePOJasa()" color="error" class="white--text">Tutup</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            expand: false,
            headers: [
                {
                    text: "", align: "center", sortable: false,
                    value: "item", width: "5%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "ITEM", align: "center", sortable: false,
                    value: "item", width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "JUMLAH", align: "center", sortable: false,
                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "price", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "DISKON", align: "center", sortable: false,
                    value: "disc", width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "HARGA SETELAH DISKON", align: "center", sortable: false,
                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "TOTAL", align: "center", sortable: false,
                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
            ],
            headers_detail: [
                {
                    text: "NAMA PRODUK", align: "center", sortable: false,
                    value: "prod", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "NO REQUEST", align: "center", sortable: false,
                    value: "noreq", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "REQUESTER", align: "center", sortable: false,
                    value: "req", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "JUMLAH", align: "center", sortable: false,
                    value: "qty", width: "10%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "UNIT", align: "center", sortable: false,
                    value: "unit", width: "10%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "price", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
            ],
            type_disc: [{name: 'percent'}, {name: 'absolute'}]
        }
    },
    computed: {
        dialog_viewpo: {
            get() {
                return this.$store.state.poservice.dialog_viewpo
            },
            set(val) {
                this.$store.commit("poservice/update_dialog_viewpo", val)
            }
        },
        form_pojasa: {
            get() {
                return this.$store.state.poservice.form_pojasa
            },
            set(val) {
                this.$store.commit("poservice/update_form_pojasa", val)
            }
        },
        selected_requestjasa: {
            get() {
                return this.$store.state.poservice.selected_requestjasa
            },
            set(val) {
                this.$store.commit("poservice/update_selected_requestjasa", val)
            }
        },
        summary_pojasa: {
            get() {
                return this.$store.state.poservice.summary_pojasa
            },
            set(val) {
                this.$store.commit("poservice/update_summary_pojasa", val)
            }
        },
        formattedPODate() {
            return this.formatDate(this.form_pojasa.podate)
        },
        formattedStartKontrak() {
            return this.formatDate(this.form_pojasa.kontrakstart)
        },
        formattedEndKontrak() {
            return this.formatDate(this.form_pojasa.kontrakend)
        },
        list_supplier() {
            return this.$store.state.poservice.list_supplier
        },
        list_branch() {
            return this.$store.state.poservice.list_branch
        },
        type_kontrak() {
            return this.$store.state.poservice.type_kontrak
        },
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split('-');
            return `${day}-${month}-${year}`;
        },
        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 = String(value).replace(/\./g, '');
            cleanValue = cleanValue.replace(',', '.');
            return parseFloat(cleanValue) || 0;
        },
        closePOJasa() {
            this.dialog_viewpo = false
        }
    },
    watch: {
        dialog_viewpo(val) {
            if (!val) {
                this.$nextTick(() => {
                    this.form_pojasa = {
                        podate: moment(new Date()).format('YYYY-MM-DD'),
                        reference: "",
                        supplierID: "",
                        typepajak: "percent",
                        valuepajak: 0,
                        typediskon: "percent",
                        valuediskon: 0,
                        branchcode: 0,
                        typekontrak: 'once',
                        kontrakstart: moment(new Date()).format('YYYY-MM-DD'),
                        kontrakend: moment(new Date()).format('YYYY-MM-DD'),
                        PIOutQty: 1,
                        catatan: ""
                    }
                    this.selected_requestjasa = []
                    this.summary_pojasa = {
                        subtotal: 0,
                        diskon: 0,
                        pajak: 0,
                        total: 0
                    }
                })
            }
        }
    },
}
</script>