<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="`Edit Category`" lable="Update" />
                    <div class="flex flex-wrap px-4 lg:px-10 py-10 pt-0">
                        <w-title title="Category 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="Position"
                            :autofocus="true"
                            type="text"
                            :error="errors.position"
                            id="position"
                            :required="true"
                            v-model:value="form.position"
                            @keypress="integer_validation($event, 10)"
                        />

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

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

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

                        <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-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";

// MonthPicker.vue
export default {
    props: ["errors", "category", "dropdown_categories"],
    mixins: [mValidation],
    components: {
        AppLayout,
        FormTitle,
        WTitle,
        WInput,
        WSelect,
        WTextarea,
        WFile,
    },
    data() {
        return {
            form: this.$inertia.form({
                name: this.category.name,
                slug: this.category.slug,
                position: this.category.position,
                parent_id: this.category.parent_id,
                image: null,
                icon: null,
                meta_title: this.category.meta_title,
                meta_keywords: this.category.meta_keywords,
                meta_description: this.category.meta_description,
                description: this.category.description,
                status: this.category.status,
            }),
            status: [
                { value: 1, label: "Active" },
                { value: 0, label: "Inactive" },
            ],
        };
    },
    methods: {
        slug_generate(event) {
            this.form.slug = event.target.value
                .toLowerCase()
                .replace(/ /g, "-")
                .replace(/[^\w-]+/g, "");
        },
        submit() {
            this.form.put(
                route("admin.catalog.category.update", this.category)
            );
        },
    },
};
</script>
