<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="`Add Product`" lable="Save" />
                    <div class="flex flex-wrap px-4 lg:px-10 py-10 pt-0">
                        <w-title title="Product Info" />

                        <w-input
                            label="Name"
                            :autofocus="true"
                            type="text"
                            :error="errors.name"
                            id="name"
                            class="lg:w-6/12"
                            :required="true"
                            v-model:value="form.name"
                            @change="slug_generate($event)"
                        />

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

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

                        <w-select
                            label="shop"
                            size="lg:w-6/12"
                            :error="errors.shop"
                            id="shop"
                            :required="true"
                            v-model:value="form.shop_id"
                            :options="dropdown_shops"
                        />

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

                        <w-input
                            label="Special price"
                            :autofocus="true"
                            type="text"
                            :error="errors.special_price"
                            id="special_price"
                            :required="true"
                            v-model:value="form.special_price"
                        />

                        <w-d-input
                            label="Special From"
                            :autofocus="true"
                            type="text"
                            :error="errors.special_from"
                            id="special_from"
                            :required="true"
                            v-model:value="form.special_from"
                        />

                        <w-d-input
                            label="Special To"
                            :autofocus="true"
                            :error="errors.special_to"
                            id="special_to"
                            :required="true"
                            v-model:value="form.special_to"
                        />

                        <w-input
                            label="Meta Title"
                            :autofocus="true"
                            type="text"
                            :error="errors.meta_title"
                            id="meta_title"
                            :required="false"
                            v-model:value="form.meta_title"
                        />

                        <w-input
                            label="Meta Keywords"
                            :autofocus="true"
                            type="text"
                            :error="errors.meta_keywords"
                            id="meta_keywords"
                            :required="false"
                            v-model:value="form.meta_keywords"
                        />

                        <w-textarea
                            label="Meta Description"
                            :autofocus="true"
                            :error="errors.meta_description"
                            id="meta_description"
                            :required="false"
                            v-model:value="form.meta_description"
                        />

                        <w-textarea
                            label="Description"
                            :autofocus="true"
                            :error="errors.description"
                            id="description"
                            :required="true"
                            v-model:value="form.description"
                        />

                        <w-file
                            label="Image (jpg, png, jpeg)"
                            :multiple="false"
                            :error="errors.image"
                            id="image"
                            :required="false"
                            v-model:file="form.image"
                        />

                        <w-select
                            label="Food Type"
                            size="lg:w-6/12"
                            :error="errors.is_veg"
                            id="is_veg"
                            :required="true"
                            v-model:value="form.is_veg"
                            :options="is_veg"
                        />

                        <w-select
                            label="Status"
                            size="lg:w-6/12"
                            :error="errors.status"
                            id="status"
                            :required="true"
                            v-model:value="form.status"
                            :options="status"
                        />
                    </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 WTextarea from "@/components/Form/Textarea.vue";
import WSelect from "@/components/Form/Select.vue";
import WFile from "@/components/Form/File.vue";
//input validation js file
import mValidation from "@/mixin/MixinValidation.js";
import WDInput from "@/components/Form/InputDate.vue";

export default {
    props: ["errors", "dropdown_shops"],
    mixins: [mValidation],
    components: {
        AppLayout,
        FormTitle,
        WTitle,
        WInput,
        WDInput,
        WSelect,
        WTextarea,
        WFile,
    },
    data() {
        return {
            form: this.$inertia.form({
                name: null,
                slug: null,
                code: null,
                shop_id: null,
                price: null,
                special_price: null,
                special_from: null,
                special_to: null,
                meta_title: null,
                meta_keywords: null,
                meta_description: null,
                image: null,
                description: null,
                is_veg: null,
                status: 1,
            }),
            status: [
                { value: 1, label: "Active" },
                { value: 0, label: "Inactive" },
            ],

            is_veg: [
                { value: 1, label: "Veg" },
                { value: 0, label: "Non veg" },
            ],
        };
    },
    methods: {
        slug_generate(event) {
            this.form.slug = event.target.value
                .toLowerCase()
                .replace(/ /g, "-")
                .replace(/[^\w-]+/g, "");
        },

        submit() {
            this.form.post(route("admin.catalog.product.store"));
        },
    },

    mounted() {},
};
</script>
