<template>
    <app-layout>
        <form
            class="flex flex-wrap mt-5"
            @submit.prevent="submit"
            enctype="multipart/form-data"
        >
            <div class="w-full px-4">
                <div
                    class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg border-0"
                >
                    <form-title :title="`Bottle Entry`" lable="Save" />
                    <div class="flex flex-wrap px-4 lg:px-10 py-10 pt-0">
                        <w-title title="Bottle Info" />

                        <w-input
                            label="Bottle Barcode"
                            :autofocus="true"
                            type="text"
                            :error="errors.barcode"
                            id="barcode"
                            :required="true"
                            v-model:value="form.barcode"
                        />

                        <w-title title="" />

                        <!-- Bottle Details -->
                        <w-input
                            label="Total Number of bottles | Sachet"
                            size="lg:w-4/12"
                            type="number"
                            @change="totalBottle"
                            :error="errors.bottles_count"
                            id="bottles"
                            :required="true"
                            v-model:value="form.bottles_count"
                        />

                        <w-input
                            label="Net Wight (g)"
                            readonly
                            size="lg:w-4/12"
                            type="number"
                            tabindex="-1"
                            :error="errors.net_wight"
                            id="net_wight"
                            :required="true"
                            v-model:value="form.net_wight"
                        />

                        <w-input
                            label="Net Wight (L)"
                            readonly
                            size="lg:w-4/12"
                            type="number"
                            tabindex="-1"
                            :value="(form.net_wight * 0.00097).toFixed(2)"
                        />

                        <!-- rows -->
                        <div
                            class="border-[1px] w-full rounded-md bg-blue-50 border-blue-200 mt-3 mx-4 py-4"
                            v-if="form.bottles_count > 0"
                        >
                            <div
                                class="flex flex-wrap w-full relative mb-[10px]"
                                v-for="(row, r) in form.bottle_rows"
                                :key="r"
                            >
                                <w-select
                                    label="Bottle Type"
                                    size="lg:w-4/12"
                                    @change="findNetwight(r)"
                                    :error="errors.bottle_wight"
                                    id="type"
                                    :required="true"
                                    v-model:value="row.bottle_wight"
                                    :options="bottles"
                                />

                                <w-input
                                    label="Number of bottles | Sachet"
                                    size="lg:w-4/12"
                                    @change="findNetwight(r)"
                                    :inputClass="
                                        r + 1 == form.bottle_rows.length &&
                                        countError == true
                                            ? 'text-red-700 lg:bg-red-100'
                                            : ''
                                    "
                                    type="number"
                                    :error="errors.gross_wight"
                                    id="gross_wight"
                                    :required="true"
                                    v-model:value="row.bottle_count"
                                    :min="1"
                                />

                                <w-input
                                    label="Gross Wight (g)"
                                    size="lg:w-4/12"
                                    @change="findNetwight(r)"
                                    type="number"
                                    :error="errors.gross_wight"
                                    id="gross_wight"
                                    :required="true"
                                    v-model:value="row.gross_wight"
                                />

                                <a
                                    href="javascript:void(0)"
                                    v-if="r > 0"
                                    @click="removeRows(r)"
                                    class="absolute right-[-8px] top-[35px]"
                                    ><i class="fas fa-trash text-red-500"></i
                                ></a>
                            </div>

                            <div class="w-full px-4">
                                <a
                                    href="javascript:void(0)"
                                    @click="incrementRow()"
                                    class="text-blue-500 hover:text-blue-300"
                                    >Add Row <i class="fal fa-plus ml-2"></i
                                ></a>
                                <span
                                    v-if="countError"
                                    class="text-sm float-right text-red-500"
                                >
                                    Total bottles not matching the entered
                                    bottles count
                                </span>
                            </div>
                        </div>

                        <hr class="mt-6 border-b-1 w-full border-gray-400" />

                        <w-title title="Other info" />

                        <w-month-picker
                            label="Month Expression"
                            type="text"
                            :error="errors.month_expression"
                            id="month_expression1"
                            :required="true"
                            v-model:value="form.month_expression"
                        />

                        <w-input
                            label="Received Date"
                            type="date"
                            :error="errors.received_date"
                            id="received_date"
                            :required="true"
                            v-model:value="form.received_date"
                        />

                        <w-file
                            label="Documents (pdf, jpg, png, jpeg)"
                            :multiple="true"
                            :error="errors.fedex"
                            id="fedex"
                            :required="true"
                            v-model:file="form.fedex"
                        />
                    </div>
                </div>
            </div>
        </form>
    </app-layout>
</template>


<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import FormTitle from "@/components/Form/FormTitle.vue";
import WTitle from "@/components/Form/SectionTitle.vue";
import WInput from "@/components/Form/Input.vue";
import WFile from "@/components/Form/File.vue";
import WSelect from "@/components/Form/Select.vue";
import WMonthPicker from "@/components/Form/MonthPicker.vue";

// MonthPicker.vue
export default {
    name: "Bottle-entry",
    props: ["errors", "bottles"],
    components: {
        AppLayout,
        FormTitle,
        WTitle,
        WInput,
        WSelect,
        WFile,
        WMonthPicker,
    },

    data() {
        return {
            form: this.$inertia.form({
                net_wight: 0,
                barcode: null,
                bottles_count: null,
                month_expression: null,
                received_date: null,
                fedex: null,
                bottle_rows: [
                    {
                        bottle_wight: null,
                        bottle_count: null,
                        gross_wight: null,
                    },
                ],
            }),
            countError: false,
        };
    },

    methods: {
        // add net wieght
        findNetwight(r) {
            var result = this.form.bottle_rows.reduce(function (sum, current) {
                return (
                    sum +
                    (parseFloat(current.gross_wight) -
                        parseFloat(current.bottle_count) *
                            parseFloat(current.bottle_wight))
                );
            }, 0);

            if (!isNaN(result)) {
                this.form.net_wight = result.toFixed(2);
            }

            // Check the count is overloaded
            this.checkBottleCount();
        },

        // check the bottel count
        totalBottle() {
            if (
                this.form.bottle_rows[0].bottle_count == null ||
                this.form.bottle_rows[0].bottle_count == ""
            ) {
                this.form.bottle_rows[0].bottle_count = this.form.bottles_count;
            }
        },

        incrementRow(bottles = 0) {
            let config = {
                bottle_wight: null,
                bottle_count: bottles,
                gross_wight: null,
            };
            this.form.bottle_rows.push(config);
        },

        // remove wieght
        removeNetWight(r) {
            this.form.net_wight -=
                parseFloat(this.form.bottle_rows[r].gross_wight) -
                parseFloat(this.form.bottle_rows[r].bottle_count) *
                    parseFloat(this.form.bottle_rows[r].bottle_wight);

            this.form.net_wight = this.form.net_wight.toFixed(2);
        },

        removeRows(x) {
            this.removeNetWight(x);
            this.form.bottle_rows.splice(x, 1);
            this.checkBottleCount();
        },

        // check bouttle count is morethan
        checkBottleCount() {
            var totalBottleCount = this.form.bottle_rows.reduce(function (
                sum,
                current
            ) {
                return sum + parseFloat(current.bottle_count);
            },
            0);

            this.countError =
                totalBottleCount > this.form.bottles_count ? true : false;

            let diffrents = this.form.bottles_count - totalBottleCount;
            if (diffrents > 0) {
                this.incrementRow(diffrents);
            }
        },

        submit() {
            if (!this.countError) {
                this.form.post(route("admin.bottle-entry.store"));
            }
        },
    },

    mounted() {
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, "0");
        var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
        var yyyy = today.getFullYear();

        this.form.received_date = yyyy + "-" + mm + "-" + dd;
    },
};
</script>
