<template>
    <div>
        <div class="row">
            <div class="col-md-12 col-12">
                <form class="form form-vertical" @submit.prevent="StoreProduct">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Добавить</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <div class="form-body">
                                    <p>Все поля обозначенные * обязательные</p>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <label for="nameru"
                                                            >Названия RU
                                                            *</label
                                                        >
                                                        <input
                                                            type="text"
                                                            v-model="
                                                                product.name.ru
                                                            "
                                                            required
                                                            id="nameru"
                                                            class="form-control"
                                                            placeholder="Названия RU *"
                                                        />
                                                    </div>
                                                </div>

                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <label for="name"
                                                            >Названия UZ
                                                            *</label
                                                        >
                                                        <input
                                                            type="text"
                                                            v-model="
                                                                product.name.uz
                                                            "
                                                            required
                                                            id="name"
                                                            class="form-control"
                                                            placeholder="Названия UZ *"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <label>Категория *</label>

                                                <multiselect
                                                    :options="categories"
                                                    v-model="category.first"
                                                    label="category"
                                                    @change="
                                                        DetectCategory($event)
                                                    "
                                                    track-by="category"
                                                ></multiselect>
                                                <!--                                                    //@change="getCharacteristics($event)"-->
                                            </div>
                                        </div>

                                        <div
                                            class="col-4"
                                            v-if="category.two_view"
                                        >
                                            <div class="form-group">
                                                <label>Суб категория *</label>

                                                <multiselect
                                                    :options="
                                                        category.first.parents
                                                    "
                                                    v-model="category.two"
                                                    label="category"
                                                    @change="DetectCategoryTwo"
                                                    track-by="category"
                                                ></multiselect>
                                            </div>
                                        </div>

                                        <div
                                            class="col-4"
                                            v-if="category.three_view"
                                        >
                                            <div class="form-group">
                                                <label>Под категория *</label>

                                                <multiselect
                                                    :options="
                                                        category.two.parents
                                                    "
                                                    v-model="category.three"
                                                    label="category"
                                                    @change="DetectCategory"
                                                    track-by="category"
                                                ></multiselect>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="brand"
                                                    >Бренд *</label
                                                >
                                                <select
                                                    class="form-control"
                                                    id="brand"
                                                    v-model="product.brand_id"
                                                >
                                                    <option
                                                        v-for="brand in brands"
                                                        :value="brand.id"
                                                    >
                                                        {{ brand.name.ru }}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="brand"
                                                    >Измерение *</label
                                                >
                                                <select
                                                    class="form-control"
                                                    id="measurement"
                                                    v-model="
                                                        product.measurement_id
                                                    "
                                                >
                                                    <option
                                                        v-for="mea in measurement"
                                                        :value="mea.id"
                                                    >
                                                        {{ mea.name.ru }}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        <!-- <div class="col-12">-->
                                        <!--     <div class="form-group">-->
                                        <!--         <label for="euro">Валюта *</label>-->
                                        <!--         <select class="form-control" id="euro" v-model="product.currency">-->
                                        <!--             <option  value="sum">-->
                                        <!--                 So`m UZS-->
                                        <!--             </option>-->

                                        <!--             <option value="dollar">-->
                                        <!--                 Dollar $-->
                                        <!--             </option>-->

                                        <!--             <option  value="euro">-->
                                        <!--                 EURO €-->
                                        <!--             </option>-->
                                        <!--         </select>-->
                                        <!--     </div>-->
                                        <!-- </div>-->

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="price"
                                                    >Цена *</label
                                                >
                                                <input
                                                    type="number"
                                                    min="0.0001"
                                                    v-model="product.price"
                                                    step="0.0001"
                                                    required
                                                    id="price"
                                                    class="form-control"
                                                    placeholder="Цена"
                                                />
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="price_discount"
                                                    >Цена со скидкой</label
                                                >
                                                <input
                                                    type="number"
                                                    v-model="
                                                        product.price_discount
                                                    "
                                                    step="0.0001"
                                                    id="price_discount"
                                                    class="form-control"
                                                    placeholder="Цена со скидкой"
                                                />
                                            </div>
                                        </div>

                                        <!--                                        <div class="col-12">-->
                                        <!--                                            <div class="form-group">-->
                                        <!--                                                <label for="price_credit"-->
                                        <!--                                                    >Цена для рассрочки</label-->
                                        <!--                                                >-->
                                        <!--                                                <input-->
                                        <!--                                                    type="number"-->
                                        <!--                                                    v-model="-->
                                        <!--                                                        product.price_credit-->
                                        <!--                                                    "-->
                                        <!--                                                    step="0.01"-->
                                        <!--                                                    id="price_credit"-->
                                        <!--                                                    class="form-control"-->
                                        <!--                                                    placeholder="Цена для рассрочки"-->
                                        <!--                                                />-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="article_number"
                                                    >Артикул *</label
                                                >
                                                <input
                                                    type="text"
                                                    v-model="
                                                        product.article_number
                                                    "
                                                    id="article_number"
                                                    class="form-control"
                                                    placeholder="Артикул"
                                                />
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="count_product"
                                                    >Количество товаров на
                                                    складе *</label
                                                >
                                                <input
                                                    type="number"
                                                    v-model="product.count"
                                                    id="count_product"
                                                    class="form-control"
                                                    placeholder="Количество товаров на складе"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="power"
                                                    >Power (W)</label
                                                >
                                                <input
                                                    type="number"
                                                    v-model="product.power"
                                                    id="power"
                                                    class="form-control"
                                                    placeholder="405"
                                                />
                                            </div>
                                        </div>

                                        <!--                                        <div class="col-12">-->
                                        <!--                                            <div class="form-group">-->
                                        <!--                                                <label for="slug"-->
                                        <!--                                                    >Ссылка на продукт (не-->
                                        <!--                                                    обязательно)</label-->
                                        <!--                                                >-->
                                        <!--                                                <input-->
                                        <!--                                                    type="text"-->
                                        <!--                                                    v-model="product.slug"-->
                                        <!--                                                    id="slug"-->
                                        <!--                                                    class="form-control"-->
                                        <!--                                                    placeholder="iphone-pro-max"-->
                                        <!--                                                />-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->

                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="data_sheet"
                                                    >Data Sheet</label
                                                >
                                                <input
                                                    class="form-control"
                                                    @change="
                                                        dataSheetFile($event)
                                                    "
                                                    type="file"
                                                    id="data_sheet"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="data_sheet"
                                                    >Расчет</label
                                                >
                                                <input
                                                    class="form-control"
                                                    @change="
                                                        calcFile($event)
                                                    "
                                                    type="file"
                                                    id="calc"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="poster"
                                                    >Изображения *</label
                                                >
                                                <input
                                                    class="form-control"
                                                    @change="posterFile($event)"
                                                    onchange="PreviewImage();"
                                                    required
                                                    type="file"
                                                    id="poster"
                                                />
                                            </div>

                                            <br />
                                            <div class="text-center">
                                                <img
                                                    id="uploadPreview"
                                                    style="
                                                        width: 300px;
                                                        height: auto;
                                                    "
                                                />
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-12">
                                                    <ul
                                                        class="nav nav-tabs"
                                                        id="myTab"
                                                        role="tablist"
                                                    >
                                                        <li
                                                            class="nav-item"
                                                            role="presentation"
                                                        >
                                                            <a
                                                                class="nav-link active"
                                                                id="ru-tab"
                                                                data-toggle="tab"
                                                                href="#ru"
                                                                role="tab"
                                                                aria-controls="ru"
                                                                aria-selected="true"
                                                                >RU</a
                                                            >
                                                        </li>
                                                        <li
                                                            class="nav-item"
                                                            role="presentation"
                                                        >
                                                            <a
                                                                class="nav-link"
                                                                id="uz-tab"
                                                                data-toggle="tab"
                                                                href="#uz"
                                                                role="tab"
                                                                aria-controls="uz"
                                                                aria-selected="false"
                                                                >UZ</a
                                                            >
                                                        </li>
                                                    </ul>
                                                </div>

                                                <div class="col-12">
                                                    <div class="row">
                                                        <div
                                                            class="tab-content w-100"
                                                            id="myTabContent"
                                                        >
                                                            <div
                                                                class="tab-pane fade show active"
                                                                id="ru"
                                                                role="tabpanel"
                                                                aria-labelledby="ru-tab"
                                                            >
                                                                <div
                                                                    class="col-12"
                                                                >
                                                                    <div
                                                                        class="form-group"
                                                                    >
                                                                        <label
                                                                            >Короткий
                                                                            описания
                                                                            RU
                                                                            *</label
                                                                        >
                                                                        <textarea
                                                                            cols="3"
                                                                            @keyup="
                                                                                remaincharRUCount
                                                                            "
                                                                            :class="
                                                                                this
                                                                                    .product
                                                                                    .short_body
                                                                                    .ru
                                                                                    .length >
                                                                                300
                                                                                    ? 'form-control is-invalid'
                                                                                    : 'form-control'
                                                                            "
                                                                            v-model="
                                                                                product
                                                                                    .short_body
                                                                                    .ru
                                                                            "
                                                                        ></textarea>
                                                                        {{
                                                                            this
                                                                                .short_limit
                                                                                .ru
                                                                        }}
                                                                    </div>
                                                                </div>

                                                                <div
                                                                    class="col-12"
                                                                >
                                                                    <div
                                                                        class="form-group"
                                                                    >
                                                                        <label
                                                                            >Описания
                                                                            RU
                                                                            *</label
                                                                        >
                                                                        <ckeditor
                                                                            :editor="
                                                                                editor
                                                                            "
                                                                            v-model="
                                                                                product
                                                                                    .body
                                                                                    .ru
                                                                            "
                                                                            :config="
                                                                                editorConfig
                                                                            "
                                                                        ></ckeditor>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div
                                                                class="tab-pane fade"
                                                                id="uz"
                                                                role="tabpanel"
                                                                aria-labelledby="uz-tab"
                                                            >
                                                                <div
                                                                    class="col-12"
                                                                >
                                                                    <div
                                                                        class="form-group"
                                                                    >
                                                                        <label
                                                                            >Короткий
                                                                            описания
                                                                            UZ
                                                                            *</label
                                                                        >
                                                                        <textarea
                                                                            cols="3"
                                                                            @keyup="
                                                                                remaincharUZCount
                                                                            "
                                                                            :class="
                                                                                this
                                                                                    .product
                                                                                    .short_body
                                                                                    .uz
                                                                                    .length >
                                                                                300
                                                                                    ? 'form-control is-invalid'
                                                                                    : 'form-control'
                                                                            "
                                                                            v-model="
                                                                                product
                                                                                    .short_body
                                                                                    .uz
                                                                            "
                                                                        ></textarea>
                                                                        {{
                                                                            this
                                                                                .short_limit
                                                                                .uz
                                                                        }}
                                                                    </div>
                                                                </div>

                                                                <div
                                                                    class="col-12"
                                                                >
                                                                    <div
                                                                        class="form-group"
                                                                    >
                                                                        <label
                                                                            >Описания
                                                                            UZ
                                                                            *</label
                                                                        >
                                                                        <ckeditor
                                                                            :editor="
                                                                                editor
                                                                            "
                                                                            v-model="
                                                                                product
                                                                                    .body
                                                                                    .uz
                                                                            "
                                                                            :config="
                                                                                editorConfig
                                                                            "
                                                                        ></ckeditor>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card" v-if="characteristics.length > 0">
                        <div class="card-header">
                            <h4 class="card-title">Характеристики *</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <div
                                    class="col-md-12"
                                    v-for="(char, index) in characteristics"
                                    :key="index"
                                >
                                    <div class="row">
                                        <div
                                            class="col-xl-4 col-md-6 col-12 mb-1"
                                        >
                                            <fieldset class="form-group">
                                                <input
                                                    type="text"
                                                    disabled
                                                    v-model="char.name.ru"
                                                    class="form-control"
                                                />
                                            </fieldset>
                                        </div>

                                        <div
                                            class="col-xl-4 col-md-6 col-12 mb-1"
                                        >
                                            <fieldset
                                                class="form-group"
                                                v-if="char.type != 'checkbox'"
                                            >
                                                <input
                                                    :type="char.type"
                                                    min="0"
                                                    v-model="char.value"
                                                    class="form-control"
                                                />
                                            </fieldset>

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

                    <div class="card" v-for="(color, index) in product.colors">
                        <div class="card-header">
                            <h4 class="card-title">Изображения</h4>
                            <!--                            <h4 class="card-title">Добавить Цвет *</h4>-->
                            <!--                            <button type="button" @click="DeleteColor(index)" class="btn btn-danger"><i class="fa fa-trash"></i> Удалить</button>-->
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <div class="form-body">
                                    <div class="row">
                                        <!--                                            <div class="col-12">-->
                                        <!--                                                <div class="form-group">-->
                                        <!--                                                    <label for="color">Цвет</label>-->
                                        <!--                                                    <select class="form-control" id="color" v-model="color.color_id">-->
                                        <!--                                                        <option selected value="null">-->
                                        <!--                                                            Не выбран-->
                                        <!--                                                        </option>-->

                                        <!--                                                        <option v-for="color in colors" :value="color.id">-->
                                        <!--                                                            {{ color.name.ru}}-->
                                        <!--                                                        </option>-->
                                        <!--                                                    </select>-->
                                        <!--                                                </div>-->
                                        <!--                                            </div>-->

                                        <!--                                            <div class="col-12">-->
                                        <!--                                                <div class="form-group">-->
                                        <!--                                                    <label for="colorarticle_number">Артикул</label>-->
                                        <!--                                                    <input type="text" v-model="color.article_number" id="colorarticle_number" class="form-control" placeholder="Артикул">-->
                                        <!--                                                </div>-->
                                        <!--                                            </div>-->

                                        <!--                                            <div class="col-md-12" v-for="(size, indexx) in color.sizes">-->
                                        <!--                                                <div class="row">-->
                                        <!--                                                    <div class="col-xl-4 col-md-6 col-12 mb-1">-->
                                        <!--                                                        <fieldset class="form-group">-->
                                        <!--                                                            <label for="size">Размер *</label>-->
                                        <!--                                                            <input type="text" v-model="size.name" required class="form-control" id="size" placeholder="XS или 39">-->
                                        <!--                                                        </fieldset>-->
                                        <!--                                                    </div>-->

                                        <!--                                                    <div class="col-xl-4 col-md-6 col-12 mb-1">-->
                                        <!--                                                        <fieldset class="form-group">-->
                                        <!--                                                            <label for="count">Количество *</label>-->
                                        <!--                                                            <input type="number" v-model="size.count" required min="0" class="form-control" id="count" placeholder="Количество">-->
                                        <!--                                                        </fieldset>-->
                                        <!--                                                    </div>-->

                                        <!--                                                    <div class="col-xl-2 col-md-2 col-2 mb-1">-->
                                        <!--                                                        <button type="button" @click="DeleteSize(index, indexx)" class="btn btn-icon mt-1 btn-danger">-->
                                        <!--                                                            <i class="fa fa-trash"></i>-->
                                        <!--                                                        </button>-->
                                        <!--                                                    </div>-->
                                        <!--                                                </div>-->
                                        <!--                                            </div>-->

                                        <!--                                            <div class="col-12">-->
                                        <!--                                                <button type="button" @click="AddSize(index)" class="btn btn-icon btn-info mr-1 mb-1 waves-effect waves-light">-->
                                        <!--                                                    <i class="fa fa-plus"></i> Добавить размер *-->
                                        <!--                                                </button>-->
                                        <!--                                            </div>-->

                                        <div class="col-md-12">
                                            <VueFileAgent
                                                ref="vueFileAgent"
                                                :theme="'default'"
                                                :multiple="true"
                                                :deletable="true"
                                                :meta="true"
                                                :accept="'image/*'"
                                                :maxSize="'10MB'"
                                                :maxFiles="14"
                                                :helpText="'Choose images or zip files'"
                                                :errorText="{
                                                    type: 'Invalid file type. Only images or zip Allowed',
                                                    size: 'Files should not exceed 10MB in size',
                                                }"
                                                @select="
                                                    filesSelected($event, index)
                                                "
                                                @beforedelete="
                                                    fileDeleted($event, index)
                                                "
                                                v-model="color.screens"
                                            ></VueFileAgent>
                                        </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="product.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="product.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="
                                                            product.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="
                                                            product.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="
                                                            product.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="
                                                            product.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="col-12">-->
                    <!--                        <div class="row">-->
                    <!--                            <button type="button" @click="AddColor" class="btn  btn-primary mr-1 mb-1 waves-effect waves-light">-->
                    <!--                                <i class="fa fa-plus"></i>  Добавить Цвет *-->
                    <!--                            </button>-->
                    <!--                        </div>-->
                    <!--                    </div>-->

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

                    <div class="card">
                        <div class="card-content">
                            <div class="card-body">
                                <fieldset>
                                    <div
                                        class="vs-checkbox-con vs-checkbox-primary"
                                    >
                                        <input
                                            type="checkbox"
                                            v-model="product.is_ready_solution"
                                        />
                                        <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>
                                    <div
                                        class="vs-checkbox-con vs-checkbox-primary"
                                    >
                                        <input
                                            type="checkbox"
                                            v-model="product.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>
                                    <div
                                        class="vs-checkbox-con vs-checkbox-primary"
                                    >
                                        <input
                                            type="checkbox"
                                            v-model="product.available"
                                        />
                                        <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>
                                    <div
                                        class="vs-checkbox-con vs-checkbox-primary"
                                    >
                                        <input
                                            type="checkbox"
                                            v-model="product.leader_of_sales"
                                        />
                                        <span class="vs-checkbox">
                                            <span class="vs-checkbox--check">
                                                <i
                                                    class="vs-icon feather icon-check"
                                                ></i>
                                            </span>
                                        </span>

                                        <span class=""
                                            >Добавить в "Лидеры продаж"
                                            (XIT)</span
                                        >
                                    </div>
                                </fieldset>

                                <!--                                <fieldset>-->
                                <!--                                    <div class="vs-checkbox-con vs-checkbox-primary">-->
                                <!--                                        <input type="checkbox" v-model="product.popular">-->
                                <!--                                        <span class="vs-checkbox">-->
                                <!--                                            <span class="vs-checkbox&#45;&#45;check">-->
                                <!--                                                <i class="vs-icon feather icon-check"></i>-->
                                <!--                                            </span>-->
                                <!--                                        </span>-->

                                <!--                                        <span class="">Добавить в "Популярные товары"</span>-->
                                <!--                                    </div>-->
                                <!--                                </fieldset>-->
                            </div>
                            <div class="card-footer">
                                <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="backUrl"
                                                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>
        </div>
    </div>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default {
    props: ["brands", "categories", "colors", "backUrl", "measurement"],

    data: () => ({
        editor: ClassicEditor,

        // Toolbar customization (without image, table, and video)
        editorConfig: {
            toolbar: [
                "heading", // Heading options
                "|",
                "bold", // Bold text
                "italic", // Italic text
                "link", // Link button
                "bulletedList", // Bulleted list
                "numberedList", // Numbered list
                "blockQuote", // Blockquote
                "alignment:left", // Align left
                "alignment:center", // Align center
                "alignment:right", // Align right
                "|",
                "undo", // Undo button
                "redo", // Redo button
            ],
        },

        short_limit: {
            ru: "Осталось 300 символов.",
            uz: "Осталось 300 символов.",
        },

        product: {
            name: {
                ru: null,
                uz: null,
            },
            body: {
                ru: "",
                uz: "",
            },

            short_body: {
                ru: "",
                uz: "",
            },

            // slug: null,
            count: 0,

            brand_id: null,
            measurement_id: null,

            currency: "sum",

            price: null,
            price_discount: null,
            // price_credit: null,
            poster: "",
            data_sheet: "",
            is_ready_solution: false,

            category_id: null,
            colors: [
                {
                    color_id: null,
                    sizes: [],
                    article_number: null,
                    screens: [],
                    filesDataForUpload: [],
                },
            ],
            article_number: null,
            published: true,
            popular: false,
            leader_of_sales: false,
            power: null,
            available: true,
            descriptions: {
                ru: "",
                uz: "",
            },
            keywords: {
                ru: "",
                uz: "",
            },
            title_seo: {
                ru: "",
                uz: "",
            },
        },

        category: {
            first: {
                parents: [],
            },
            two: {
                parents: [],
            },
            three: {},
            two_view: false,
            three_view: false,
        },

        characteristic: false,
        characteristics: [],

        error: false,
        errors: [],
    }),

    computed: {
        uploadDisabled() {
            return this.files.length === 0;
        },
    },

    watch: {
        "product.category_id": function (newVal) {
            this.getCharacteristics(newVal);
        },

        "category.first": function (newVal) {
            this.DetectCategory();
        },

        "category.two": function (newVal) {
            if (newVal.parents.length > 0) {
                this.DetectCategoryTwo();
            } else {
                if (newVal.id) {
                    this.product.category_id = newVal.id;
                }
            }
        },

        "category.three": function (newVal) {
            this.DetectCategoryThree();
        },
    },

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

            const formData = new FormData();
            formData.append("poster", this.product.poster);
            // if (this.product.data_sheet)
            formData.append("data_sheet", this.product.data_sheet);
            formData.append("name[ru]", this.product.name.ru);
            formData.append("name[uz]", this.product.name.uz);

            formData.append("body[ru]", this.product.body.ru);
            formData.append("body[uz]", this.product.body.uz);

            formData.append("short_body[ru]", this.product.short_body.ru);
            formData.append("short_body[uz]", this.product.short_body.uz);

            formData.append("brand_id", this.product.brand_id);
            formData.append("measurement_id", this.product.measurement_id);
            formData.append(
                "is_ready_solution",
                this.product.is_ready_solution
            );
            formData.append("power", this.product.power);
            formData.append("published", this.product.published);
            formData.append("popular", this.product.popular);
            formData.append("calc", this.product.calc);
            formData.append("leader_of_sales", this.product.leader_of_sales);
            formData.append("currency", this.product.currency);
            formData.append("article_number", this.product.article_number);
            // formData.append("slug", this.product.slug);
            formData.append("available", this.product.available);
            formData.append("count", this.product.count);

            formData.append("descriptions[ru]", this.product.descriptions.ru);
            formData.append("descriptions[uz]", this.product.descriptions.uz);
            formData.append("keywords[uz]", this.product.keywords.uz);
            formData.append("keywords[ru]", this.product.keywords.ru);

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

            // for (var i = 0; i < this.product.category_id.length; i++) {
            if (this.product.category_id) {
                formData.append("category_id", this.product.category_id);
            }

            // }

            formData.append("price", this.product.price);
            formData.append("price_discount", this.product.price_discount);
            // formData.append("price_credit", this.product.price_credit);

            for (var i = 0; i < this.product.colors.length; i++) {
                if (this.product.colors[i].color_id) {
                    formData.append(
                        "colors[" + i + "][color_id]",
                        this.product.colors[i].color_id
                    );
                } else {
                    formData.append("colors[" + i + "][color_id]", null);
                }

                for (
                    var sizes = 0;
                    sizes < this.product.colors[i].sizes.length;
                    sizes++
                ) {
                    formData.append(
                        "colors[" + i + "][sizes][" + sizes + "][name]",
                        this.product.colors[i].sizes[sizes].name
                    );
                    formData.append(
                        "colors[" + i + "][sizes][" + sizes + "][count]",
                        this.product.colors[i].sizes[sizes].count
                    );
                }

                formData.append(
                    "colors[" + i + "][article_number]",
                    this.product.colors[i].article_number
                );

                for (
                    var screens = 0;
                    screens < this.product.colors[i].screens.length;
                    screens++
                ) {
                    formData.append(
                        "colors[" + i + "][screens][" + screens + "][image]",
                        this.product.colors[i].screens[screens].file
                    );
                }
            }

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

            axios
                .post("/dashboard/products/store", formData, header)
                .then((response) => {
                    if (response.data.status) {
                        window.location.href = this.backUrl;
                    }
                })
                .catch((error) => {
                    if (error.response) {
                        this.error = true;
                        this.errors = error.response.data.errors;
                    }
                });
        },

        remaincharRUCount: function () {
            if (this.product.short_body.ru.length > 300) {
                this.short_limit.ru = "Превышен лимит в 300 символов.";
            } else {
                let remainCharacters = 300 - this.product.short_body.ru.length;
                this.short_limit.ru =
                    "Осталось " + remainCharacters + " символов.";
            }
        },

        remaincharUZCount: function () {
            if (this.product.short_body.uz.length > 300) {
                this.short_limit.uz = "Превышен лимит в 300 символов.";
            } else {
                let remainCharacters = 300 - this.product.short_body.uz.length;
                this.short_limit.uz =
                    "Осталось " + remainCharacters + " символов.";
            }
        },

        AddColor() {
            this.product.colors.push({
                color_id: null,
                sizes: [],
                screens: [],
                article_number: null,
                filesDataForUpload: [],
            });
        },

        posterFile(event) {
            this.product.poster = event.target.files[0];
        },
        calcFile(event) {
            this.product.calc = event.target.files[0];
        },


        dataSheetFile(event) {
            this.product.data_sheet = event.target.files[0];
        },

        AddSize(index) {
            this.product.colors[index].sizes.push({
                name: null,
                count: 0,
            });
        },

        DeleteColor(index) {
            this.product.colors.splice(index, 1);
        },

        DeleteSize(index, indexx) {
            this.product.colors[index].sizes.splice(indexx, 1);
        },

        async getCharacteristics(id) {
            const { data } = await axios.get(
                "/dashboard/products/characteristics/" + id
            );

            if (data.status) this.characteristics = data.characteristics;
        },

        DetectCategory() {
            this.category.two = {
                parents: [],
            };
            this.category.two_view = false;
            this.category.three = {};
            this.category.three_view = false;

            if (this.category.first.parents.length > 0) {
                this.category.two_view = true;
            } else {
                this.product.category_id = this.category.first.id;
            }
        },

        DetectCategoryTwo() {
            this.category.three = {};
            this.category.three_view = false;

            if (this.category.two.parents.length > 0) {
                this.category.three_view = true;
            }
        },

        DetectCategoryThree() {
            this.product.category_id = this.category.three.id;
        },

        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;
        },

        // uploadFiles: function() {
        //     // Using the default uploader. You may use another uploader instead.
        //     this.$refs.vueFileAgent.upload(this.uploadUrl, this.uploadHeaders, this.filesDataForUpload);
        //     this.filesDataForUpload = [];
        // },

        // deleteUploadedFile: function(fileData) {
        //     // Using the default uploader. You may use another uploader instead.
        //     this.$refs.vueFileAgent.deleteUpload(this.uploadUrl, this.uploadHeaders, fileData);
        // },

        filesSelected: function (filesDataNewlySelected, index) {
            var validFilesData = filesDataNewlySelected.filter(
                (fileData) => !fileData.error
            );
            this.product.colors[index].filesDataForUpload =
                this.product.colors[index].filesDataForUpload.concat(
                    validFilesData
                );
        },

        fileDeleted: function (fileData, index) {
            var i =
                this.product.colors[index].filesDataForUpload.indexOf(fileData);
            if (i !== -1) {
                this.product.colors[index].filesDataForUpload.splice(i, 1);
            } else {
                this.deleteUploadedFile(fileData);
            }
        },
    },
};
</script>

<style>
.dropzone-custom-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dropzone-custom-title {
    margin-top: 0;
    color: #00b782;
}

.subtitle {
    color: #314b5f;
}
</style>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
