<template>
    <div class="row">
        <form
            class="form form-vertical w-100"
            @submit.prevent="saveForm"
            action="#"
            enctype="multipart/form-data"
            method="post"
        >
            <div class="col-md-12 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ $t("admin.edit") }}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <p>{{ $t("admin.all_fields_with") }}</p>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label
                                                        for="first-name-vertical"
                                                        >{{
                                                            $t(
                                                                "admin.categories.name"
                                                            )
                                                        }}
                                                        UZ *</label
                                                    >
                                                    <input
                                                        type="text"
                                                        id="first-name-vertical"
                                                        v-model="
                                                            category.name.uz
                                                        "
                                                        required
                                                        class="form-control"
                                                        name="name[uz]"
                                                        :placeholder="
                                                            $t(
                                                                'admin.categories.name'
                                                            ) + ' UZ'
                                                        "
                                                    />
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label for="nameru"
                                                        >{{
                                                            $t(
                                                                "admin.categories.name"
                                                            )
                                                        }}
                                                        RU *</label
                                                    >
                                                    <input
                                                        type="text"
                                                        id="nameru"
                                                        required
                                                        v-model="
                                                            category.name.ru
                                                        "
                                                        class="form-control"
                                                        name="name[ru]"
                                                        :placeholder="
                                                            $t(
                                                                'admin.categories.name'
                                                            ) + ' RU'
                                                        "
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="position"
                                                >{{
                                                    $t(
                                                        "admin.categories.position"
                                                    )
                                                }}
                                                *</label
                                            >
                                            <input
                                                type="text"
                                                id="position"
                                                required
                                                class="form-control"
                                                v-model="category.position"
                                                name="position"
                                                :placeholder="
                                                    $t(
                                                        'admin.categories.position'
                                                    )
                                                "
                                            />
                                        </div>

                                        <div class="form-group">
                                            <div class="custom-file">
                                                <input
                                                    id="uploadImage"
                                                    class="custom-file-input"
                                                    type="file"
                                                    name="image"
                                                    @change="ImageFile($event)"
                                                />
                                                <label
                                                    class="custom-file-label"
                                                    >{{
                                                        $t(
                                                            "admin.categories.image"
                                                        )
                                                    }}</label
                                                >
                                            </div>
                                            <br />
                                            <div class="text-center">
                                                <img
                                                    id="uploadPreview"
                                                    style="
                                                        width: 300px;
                                                        height: auto;
                                                    "
                                                    :src="category.image_url"
                                                />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                >{{
                                                    $t("admin.brands.title")
                                                }}
                                                *</label
                                            >

                                            <multiselect
                                                :options="brandsData"
                                                v-model="category.brands"
                                                :multiple="true"
                                                :taggable="true"
                                                label="name"
                                                track-by="name"
                                            ></multiselect>
                                        </div>

                                        <div class="col-12">
                                            <div class="row">
                                                <h3>Характеристики</h3>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div
                                                class="col-12"
                                                v-for="(
                                                    char, index
                                                ) in category.characteristics"
                                                :key="index"
                                            >
                                                <div class="row">
                                                    <div class="col-4">
                                                        <div class="form-group">
                                                            <label
                                                                :for="
                                                                    'first-name-vertical-uz' +
                                                                    index
                                                                "
                                                                >{{
                                                                    $t(
                                                                        "admin.categories.char.name"
                                                                    )
                                                                }}
                                                                UZ *</label
                                                            >
                                                            <input
                                                                type="text"
                                                                :id="
                                                                    'first-name-vertical-uz' +
                                                                    index
                                                                "
                                                                v-model="
                                                                    char.name.uz
                                                                "
                                                                required
                                                                class="form-control"
                                                                name="name[uz]"
                                                                :placeholder="
                                                                    $t(
                                                                        'admin.categories.name'
                                                                    ) + ' UZ'
                                                                "
                                                            />
                                                        </div>
                                                    </div>

                                                    <div class="col-4">
                                                        <div class="form-group">
                                                            <label
                                                                :for="
                                                                    'first-name-vertical-ru' +
                                                                    index
                                                                "
                                                                >{{
                                                                    $t(
                                                                        "admin.categories.char.name"
                                                                    )
                                                                }}
                                                                RU *</label
                                                            >
                                                            <input
                                                                type="text"
                                                                :id="
                                                                    'first-name-vertical-ru' +
                                                                    index
                                                                "
                                                                v-model="
                                                                    char.name.ru
                                                                "
                                                                required
                                                                class="form-control"
                                                                name="name[uz]"
                                                                :placeholder="
                                                                    $t(
                                                                        'admin.categories.name'
                                                                    ) + ' RU'
                                                                "
                                                            />
                                                        </div>
                                                    </div>

                                                    <div class="col-2">
                                                        <div class="form-group">
                                                            <label
                                                                :for="
                                                                    'type' +
                                                                    index
                                                                "
                                                                >{{
                                                                    $t(
                                                                        "admin.categories.char.type"
                                                                    )
                                                                }}
                                                                *</label
                                                            >
                                                            <select
                                                                class="form-control"
                                                                :id="
                                                                    'type' +
                                                                    index
                                                                "
                                                                v-model="
                                                                    char.type
                                                                "
                                                            >
                                                                <option
                                                                    value="text"
                                                                >
                                                                    Text
                                                                </option>
                                                                <option
                                                                    value="number"
                                                                >
                                                                    Number
                                                                </option>
                                                                <option
                                                                    value="checkbox"
                                                                >
                                                                    checkbox
                                                                </option>
                                                                <option
                                                                    value="select"
                                                                >
                                                                    select
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-1">
                                                        <fieldset>
                                                            <label
                                                                >Фильтр</label
                                                            >
                                                            <div
                                                                class="vs-checkbox-con vs-checkbox-primary"
                                                            >
                                                                <input
                                                                    type="checkbox"
                                                                    v-model="
                                                                        char.filter
                                                                    "
                                                                />
                                                                <span
                                                                    class="vs-checkbox"
                                                                >
                                                                    <span
                                                                        class="vs-checkbox--check"
                                                                    >
                                                                        <i
                                                                            class="vs-icon feather icon-check"
                                                                        ></i>
                                                                    </span>
                                                                </span>
                                                            </div>
                                                        </fieldset>
                                                    </div>

                                                    <div class="col-1">
                                                        <button
                                                            @click="
                                                                removeChar(
                                                                    index,
                                                                    char
                                                                )
                                                            "
                                                            class="btn btn-danger mt-2"
                                                            type="button"
                                                        >
                                                            <i
                                                                class="fa fa-trash"
                                                            ></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <button
                                            type="button"
                                            class="btn btn-warning"
                                            @click="addChar"
                                        >
                                            <i class="fa fa-plus"></i> Добавить
                                            характеристики
                                        </button>

                                        <div class="controls mt-1">
                                            <button
                                                id="add_cat"
                                                type="button"
                                                class="btn btn-outline-primary w-100"
                                            >
                                                {{
                                                    $t(
                                                        "admin.categories.add_cat"
                                                    )
                                                }}
                                            </button>
                                            <button
                                                id="remove_cat"
                                                type="button"
                                                class="btn btn-secondary w-100"
                                                @click="category.parent_id = 0"
                                            >
                                                {{
                                                    $t(
                                                        "admin.categories.remove_cat"
                                                    )
                                                }}
                                            </button>

                                            <br />
                                            <br />
                                            <div id="sub_cat" class="controls">
                                                <label>{{
                                                    $t(
                                                        "admin.categories.sub_category"
                                                    )
                                                }}</label>
                                                <select
                                                    class="form-control"
                                                    v-model="category.parent_id"
                                                >
                                                    <option value="0">
                                                        {{
                                                            $t(
                                                                "admin.categories.choose_cat"
                                                            )
                                                        }}
                                                    </option>

                                                    <option
                                                        v-for="(
                                                            category, index
                                                        ) in categoriesData"
                                                        :key="index"
                                                        :value="category.id"
                                                    >
                                                        {{
                                                            getName(
                                                                category.name
                                                            )
                                                        }}
                                                        <span
                                                            v-if="
                                                                category.parent
                                                            "
                                                        >
                                                            (
                                                            {{
                                                                getName(
                                                                    category
                                                                        .parent
                                                                        .name
                                                                )
                                                            }}
                                                            )
                                                        </span>
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12" v-if="error">
                                        <div class="alert alert-danger mt-2">
                                            <ul>
                                                <li
                                                    v-for="(
                                                        error, index
                                                    ) in errors"
                                                    :key="index"
                                                >
                                                    <span
                                                        v-for="msg in error"
                                                        :key="msg"
                                                    >
                                                        {{ msg }}
                                                    </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">SEO</h4>
                    </div>

                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="nameru"
                                            >Title Seo RU *</label
                                        >
                                        <input
                                            type="text"
                                            v-model="category.title_seo.ru"
                                            id="nameru"
                                            class="form-control"
                                            placeholder="Title Seo RU *"
                                        />
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="name">Title Seo UZ *</label>
                                        <input
                                            type="text"
                                            v-model="category.title_seo.uz"
                                            id="name"
                                            class="form-control"
                                            placeholder="Title Seo UZ *"
                                        />
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-md-6 float-left">
                                            <fieldset class="form-label-group">
                                                <textarea
                                                    class="form-control"
                                                    v-model="
                                                        category.keywords.ru
                                                    "
                                                    id="label-keywords-ru"
                                                    rows="3"
                                                    :placeholder="
                                                        $t(
                                                            'admin.settings.keywords'
                                                        ) + ' RU'
                                                    "
                                                ></textarea>
                                                <label for="label-keywords-ru"
                                                    >{{
                                                        $t(
                                                            "admin.settings.keywords"
                                                        )
                                                    }}
                                                    RU *</label
                                                >
                                            </fieldset>
                                        </div>

                                        <div class="col-md-6 float-left">
                                            <fieldset class="form-label-group">
                                                <textarea
                                                    class="form-control"
                                                    v-model="
                                                        category.keywords.uz
                                                    "
                                                    id="label-keywords"
                                                    rows="3"
                                                    :placeholder="
                                                        $t(
                                                            'admin.settings.keywords'
                                                        ) + ' UZ'
                                                    "
                                                ></textarea>
                                                <label for="label-keywords"
                                                    >{{
                                                        $t(
                                                            "admin.settings.keywords"
                                                        )
                                                    }}
                                                    UZ *</label
                                                >
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-md-6 float-left">
                                            <fieldset class="form-label-group">
                                                <textarea
                                                    class="form-control"
                                                    v-model="
                                                        category.descriptions.ru
                                                    "
                                                    id="label-description-ru"
                                                    rows="3"
                                                    :placeholder="
                                                        $t(
                                                            'admin.settings.description'
                                                        ) + ' RU'
                                                    "
                                                ></textarea>
                                                <label
                                                    for="label-description-ru"
                                                    >{{
                                                        $t(
                                                            "admin.settings.description"
                                                        )
                                                    }}
                                                    RU *</label
                                                >
                                            </fieldset>
                                        </div>

                                        <div class="col-md-6 float-left">
                                            <fieldset class="form-label-group">
                                                <textarea
                                                    class="form-control"
                                                    v-model="
                                                        category.descriptions.uz
                                                    "
                                                    id="label-description"
                                                    rows="3"
                                                    :placeholder="
                                                        $t(
                                                            'admin.settings.description'
                                                        ) + ' UZ'
                                                    "
                                                ></textarea>
                                                <label for="label-description"
                                                    >{{
                                                        $t(
                                                            "admin.settings.description"
                                                        )
                                                    }}
                                                    UZ *</label
                                                >
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-group">
                                <fieldset class="checkbox">
                                    <div
                                        class="vs-checkbox-con vs-checkbox-primary"
                                    >
                                        <input
                                            type="checkbox"
                                            value="1"
                                            name="popular"
                                            v-model="category.published"
                                        />
                                        <span class="vs-checkbox">
                                            <span class="vs-checkbox--check">
                                                <i
                                                    class="vs-icon feather icon-check"
                                                ></i>
                                            </span>
                                        </span>

                                        <span class=""> Опубликовать </span>
                                    </div>
                                </fieldset>

                                <fieldset class="checkbox">
                                    <div
                                        class="vs-checkbox-con vs-checkbox-primary"
                                    >
                                        <input
                                            type="checkbox"
                                            value="1"
                                            name="is_filter_power"
                                            v-model="category.is_filter_power"
                                        />
                                        <span class="vs-checkbox">
                                            <span class="vs-checkbox--check">
                                                <i
                                                    class="vs-icon feather icon-check"
                                                ></i>
                                            </span>
                                        </span>

                                        <span class="">
                                            Сортировать по kW
                                        </span>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer pb-0 pl-0 pt-1">
                        <div class="col-12 mb-0">
                            <div class="row">
                                <div class="col-3">
                                    <button
                                        type="submit"
                                        class="btn btn-primary mr-1 mb-1 waves-effect waves-light btn-icon"
                                    >
                                        <i class="feather icon-save"></i>
                                        {{ $t("admin.save") }}
                                    </button>
                                </div>

                                <div class="col-9">
                                    <a
                                        href="/dashboard/categories"
                                        class="btn btn-danger mr-1 mb-1 waves-effect waves-light btn-icon pull-right"
                                    >
                                        <i class="feather icon-x-circle"></i>
                                        {{ $t("admin.cancel") }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    props: {
        brandsData: {},
        categoriesData: {},
        categoryData: {},
    },

    data() {
        return {
            category: this.categoryData,

            char: [],
            file: null,

            error: false,
            errors: [],

            deleted: {
                char: [],
            },
        };
    },

    methods: {
        getName(name) {
            const lang = document.documentElement.lang.substr(0, 2);
            let value = "";

            if (lang) {
                switch (lang) {
                    case "ru":
                        value = name.ru;
                        break;
                    case "uz":
                        value = name.uz;
                        break;
                }
            } else {
                value = name.ru;
            }

            return value;
        },

        async saveForm() {
            const header = {
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            };

            const formData = new FormData();
            formData.append("name[ru]", this.category.name.ru);
            formData.append("name[uz]", this.category.name.uz);

            formData.append("position", this.category.position);

            //formData.append('brands', this.category.brands);
            formData.append("parent_id", this.category.parent_id);
            formData.append("published", this.category.published);
            formData.append("is_filter_power", this.category.is_filter_power);
            formData.append("image", this.file);
            formData.append("descriptions[ru]", this.category.descriptions.ru);
            formData.append("descriptions[uz]", this.category.descriptions.uz);
            formData.append("keywords[ru]", this.category.keywords.ru);
            formData.append("keywords[uz]", this.category.keywords.uz);

            formData.append("title_seo[ru]", this.category.title_seo.ru);
            formData.append("title_seo[uz]", this.category.title_seo.uz);

            for (var i = 0; i < this.category.brands.length; i++) {
                formData.append(
                    "brands[" + i + "]",
                    this.category.brands[i].id
                );
            }

            for (var i = 0; i < this.category.characteristics.length; i++) {
                formData.append(
                    "char[" + i + "][name][ru]",
                    this.category.characteristics[i].name.ru
                );
                formData.append(
                    "char[" + i + "][name][uz]",
                    this.category.characteristics[i].name.uz
                );
                formData.append(
                    "char[" + i + "][type]",
                    this.category.characteristics[i].type
                );
                formData.append(
                    "char[" + i + "][filter]",
                    this.category.characteristics[i].filter
                );
                formData.append(
                    "char[" + i + "][id]",
                    this.category.characteristics[i].id
                );
            }

            for (let i = 0; i < this.deleted.char.length; i++) {
                formData.append(
                    "deletes[char][" + i + "]",
                    this.deleted.char[i]
                );
            }

            axios
                .post(
                    "/dashboard/categories/update/" + this.category.id,
                    formData,
                    header
                )
                .then((response) => {
                    if (response.data.status) {
                        window.location.href = "/dashboard/categories";
                    }
                })
                .catch((error) => {
                    if (error.response) {
                        this.error = true;
                        this.errors = error.response.data.errors;
                    }
                });
        },

        ImageFile(event) {
            this.file = event.target.files[0];

            if (this.file) {
                this.category.image_url = URL.createObjectURL(this.file);
            }
        },

        addChar() {
            this.category.characteristics.push({
                id: null,
                name: {
                    ru: "",
                    uz: "",
                },
                type: "text",
                filter: false,
            });
        },

        removeChar(index, char) {
            if (char.id != null) this.deleted.char.push(char.id);

            this.category.characteristics.splice(index, 1);
        },
    },
};
</script>
<style scoped></style>
