<template>
    <div class="row col-12">
        <div class="col-12">
            <div class="alert alert-danger" v-if="error.show">{{ error.message }}</div>
            <div class="alert alert-success" v-if="success.show">{{ success.message }}</div>
        </div>
        <div class="col-lg-6 mx-auto">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Автор:</label>
                <div class="col-sm-9">
                    <input type="text" v-model="review.name" class="form-control" placeholder="Иван Петров...">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Позиция:</label>
                <div class="col-sm-9">
                    <input type="text" v-model="review.position" class="form-control" placeholder="Работал аниматором...">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Текст:</label>
                <div class="col-sm-9">
                    <textarea rows="5" class="form-control" v-model="review.description" placeholder="Все очень понравилось..."></textarea>
                </div>
            </div>
            <div class="text-center" v-if="!editMode">
                <button class="btn btn-success px-4">
                    <i class="fas fa-circle-notch fa-spin" v-if="!loaded"></i>
                    <span v-if="loaded" @click.stop="sendData">Создать</span>
                </button>
            </div>
            <div class="text-center" v-if="editMode">
                <button class="btn btn-success px-4">
                    <i class="fas fa-circle-notch fa-spin" v-if="!loaded"></i>
                    <span v-if="loaded" @click.stop="saveData">Сохранить</span>
                </button>
            </div>
        </div>
        <div class="col-lg-6 mx-auto">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Ссылка на видео:</label>
                <div class="col-sm-9">
                    <input type="text" v-model="review.video_url" class="form-control" placeholder="(не обязательно)">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Изображения:</label>
                <div class="input-group col-sm-9">
                    <div class="custom-file">
                        <input type="file" ref="file_input" @change="addFile" class="custom-file-input" id="inputGroupFile" accept="image/*">
                        <label class="custom-file-label" for="inputGroupFile" aria-describedby="inputGroupFileAddon02">Выберите файл...</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="card col-6 mb-3 px-0" v-for="(image, index) in images">
                    <img class="card-img-top" :src="image">
                    <div class="card-body">
                        <a href="#" class="btn btn-danger" @click.stop="removeImage(index)">Удалить</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                loaded: false,
                error: {
                    message: "",
                    show: false,
                },
                success: {
                    message: "",
                    show: false,
                },

                review: {
                    id: null,
                    name: "",
                    position: "",
                    description: "",
                    video_url: "",
                    images: [],
                },

                images: [],

                editMode: false
            }
        },

        props: ['reviewId'],

        mounted() {
            console.log("Page mounted...");

            if(this.reviewId != undefined) {
                this.editMode = true;
                this.review.id = this.reviewId;
                this.loadReview();
            }

            this.loaded = true;
        },

        methods: {
            loadReview() {
                this.loaded = false;

                axios.get('/admin/review/info/' + this.review.id).then(response => {
                    console.log(response);

                    this.review = response.data.data;
                }).catch(error => {
                    console.log(error, error.response);
                });
            },

            addFile() {
                this.review.images.push(this.$refs.file_input.files[0]);

                let input = event.target;

                let reader = new FileReader();

                reader.onload = (e) => {
                    this.images.push(e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            },

            sendData() {

                this.loaded = false;

                console.log(this.review);

                let formData = new FormData();

                formData.append('images', this.review.images);

                let headers = {'Content-Type': 'multipart/form-data'};

                axios.post('/admin/review/create', formData, headers).then(response => {
                    console.log(response, response.data);

                    this.loaded = true;
                }).catch(error => {
                    console.log(error, error.response);

                    if(error.response.data.status == 'error') {
                        this.error = {
                            'message': error.response.data.error,
                            'show': true,
                        };

                        setTimeout(() => {
                            this.error.show = false;
                        }, 5000);
                    }

                    this.loaded = true;
                });
            },

            saveData() {

                this.loaded = false;

                axios.post('/admin/tag/edit/' + this.tag.id, this.review).then(response => {
                    console.log(response);

                    this.success = {
                        'message': "Данные успешно сохранены",
                        'show': true,
                    };

                    setTimeout(() => {
                        this.success.show = false;
                    }, 5000);

                    this.loaded = true;
                }).catch(error => {
                    console.log(error, error.response);

                    if(error.response.data.status == 'error') {
                        this.error = {
                            'message': error.response.data.error,
                            'show': true,
                        };

                        setTimeout(() => {
                            this.error.show = false;
                        }, 5000);
                    }

                    this.loaded = true;
                });
            },

            removeImage(index) {
                this.images.splice(index, 1);
                this.review.images.splice(index, 1);
            }
        },
    }
</script>