<template>
    <div>
        <div class="col-md-12 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Добавить</h4>
                </div>
                <div class="card-content">
                    <form class="form form-vertical" @submit.prevent="Store">
                        <div class="card-body">
                            <div class="form-body">
                                <p>Все поля обозначенные * обязательные</p>
                                <div class="row">

                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label for="ru">Названия RU *</label>
                                                    <input type="text" id="ru" class="form-control" v-model="title.ru"placeholder="Названия RU *">
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label for="uz">Названия UZ *</label>
                                                    <input type="text" id="uz" class="form-control" v-model="title.uz" placeholder="Названия UZ *">
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="category">Категория</label>
                                            <select id="category" class="form-control" v-model="category_id">
                                                <option value="0">Все</option>
                                                <option v-for="category in categories" :value="category.id">
                                                    {{ category.name.ru }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Продукты *</label>

                                            <multiselect v-model="compilations"
                                                         placeholder="Искать"
                                                         label="name"
                                                         track-by="name"
                                                         :options="products"
                                                         :option-height="104"
                                                         :custom-label="customLabel"
                                                         :show-labels="false"
                                                         @search-change="SearchProduct"
                                                         :multiple="true"
                                            >

                                                    <template slot="singleLabel" slot-scope="props">
                                                        <img class="option__image" :src="props.option.poster" width="50" alt="No Man’s Sky">
                                                        <span class="option__desc">
                                                            <span class="option__title">{{ props.option.name }}</span>
                                                        </span>
                                                    </template>

                                                    <template slot="option" slot-scope="props">
                                                        <img class="option__image" :src="props.option.poster" width="50" alt="No Man’s Sky">
                                                        <div class="option__desc">
                                                            <span class="option__title">{{ props.option.name }}</span>
                                                        </div>
                                                    </template>
                                            </multiselect>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Выбранные продукты</label>

                                            <div class="table-responsive">
                                                <table class="table">

                                                    <tbody>
                                                        <tr v-for="(product, index) in compilations">
                                                            <td>
                                                                <img :src="product.poster" width="100" >
                                                            </td>
                                                            <td>
                                                                {{ product.name }}
                                                            </td>
                                                            <td>
                                                                <button type="button" @click="Delete(index)" class="btn btn-danger btn-sm btn-icon">
                                                                    <i class="fa fa-trash"></i>
                                                                </button>
                                                            </td>
                                                        </tr>

                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

<!--                                    <div class="col-12">-->
<!--                                        <fieldset>-->
<!--                                            <div class="vs-checkbox-con vs-checkbox-primary">-->
<!--                                                <input type="checkbox" v-model="published">-->
<!--                                                <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>
                            </div>
                        </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="/dashboard/compilations" 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>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['categories'],

        data: () => ({
            title: {
                ru: null,
                uz: null
            },
            products: [],

            published: false,

            category_id: null,

            compilations: [],

        }),

        mounted() {

        },

        methods: {
            customLabel ({ name }) {
                return `${name}`
            },

            async Store() {
                const array = {
                    title: this.title,
                    products: this.compilations,
                    published: this.published,
                    category_id: this.category_id
                };

                const { data } = await axios.post('/dashboard/compilations/store', array);

                if (data.status) {
                    window.location.href = "/dashboard/compilations";
                }
            },

            async SearchProduct(query) {
                let name = query;

                if (name.length > 0) {
                    axios.post('/dashboard/compilations/product/search', { name: name})
                        .then((response) => {
                            if (response.data.status) {
                                this.products = response.data.products;
                            }
                        }).catch((error) => {
                        if (error.response) {
                            this.error = true;
                            this.errors = error.response.data.errors;
                        }
                    });
                }

                console.log(query);
            },

            Delete(index) {
                this.compilations.splice(index, 1);
            }
        }

    }
</script>

<style scoped>

</style>
