{% extends "base.html" %}
{% load i18n %}
{% load custom_tags %}
{% load theming_tags %}
{% load static %}

{% block title %}{% trans 'Edit Recipe' %}{% endblock %}

{% block extra_head %}

    {% include 'include/vue_base.html' %}

    <link rel="stylesheet" href="{% static 'css/bootstrap-vue.min.css' %}">
    <script src="{% static 'js/bootstrap-vue.min.js' %}"></script>

    <link rel="stylesheet" href="{% static 'css/vue-multiselect-bs4.min.css' %}">
    <script src="{% static 'js/vue-multiselect.min.js' %}"></script>

    <script src="{% static 'js/Sortable.min.js' %}"></script>
    <script src="{% static 'js/vuedraggable.umd.min.js' %}"></script>

    <script src="{% static 'js/vue-scrollto.js' %}"></script>
    <script src="{% static 'js/portal-vue.umd.min.js' %}"></script>

    <style>
        .small-padding {
            padding-left: 2px;
            padding-right: 2px;
            margin-top: 2px;
        }

    </style>

{% endblock %}

{% block content %}
    <h3>{% trans 'Edit Recipe' %}</h3>

    <div v-if="!recipe" class="text-center">
        <br/>
        <i class="fas fa-spinner fa-spin fa-8x"></i>
    </div>

    <div v-if="recipe">

        <div class="row">
            <div class="col-md-12">
                <label for="id_name"> {% trans 'Name' %}</label>
                <input class="form-control" id="id_name" v-model="recipe.name">
            </div>
        </div>
        <br/>

        <div class="row">
            <div class="col-md-6">
                <img src="{% if recipe.image %}{{ recipe.image.url }}{% endif %}" id="id_image"
                     class="img img-fluid img-responsive"
                     style="max-height: 20vh">
                <input type="file" @change="imageChanged">
            </div>
            <div class="col-md-6">
                <label for="id_name"> {% trans 'Preperation Time' %}</label>
                <input class="form-control" id="id_prep_time" v-model="recipe.working_time">
                <br/>
                <label for="id_name"> {% trans 'Waiting Time' %}</label>
                <input class="form-control" id="id_wait_time" v-model="recipe.waiting_time">
                <br/>
                <label for="id_name"> {% trans 'Keywords' %}</label>
                <multiselect
                        v-model="recipe.keywords"
                        :options="keywords"
                        :close-on-select="false"
                        :clear-on-select="true"
                        :hide-selected="true"
                        :preserve-search="true"
                        placeholder="{% trans 'Select Keywords' %}"
                        label="label"
                        track-by="id"
                        id="id_keywords"
                        :multiple="true"
                        :loading="keywords_loading"
                        @search-change="searchKeywords">
                </multiselect>
            </div>
        </div>


        <draggable :list="recipe.steps" group="steps"
                   :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">

            <div v-for="step, step_index in recipe.steps" style="margin-top: 1vh" class="card">

                <div class="card-body">
                    <div class="row">
                        <div class="col-11">
                            <h4 class="handle" :id="'id_step_' + step_index">
                                <i class="fas fa-paragraph" v-if="step.type == 'TEXT'"></i>
                                <i class="fas fa-clock" v-if="step.type == 'TIME'"></i>
                                <template v-if="step.name !== ''">[[step.name]]</template>
                                <template v-else>{% trans 'Step' %} [[step_index+1]]</template>

                            </h4>
                        </div>
                        <div class="col-1" style="text-align: right">
                            <a class="btn shadow-none btn-lg" href="#" role="button"
                               id="dropdownMenuLink"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                <i class="fas fa-ellipsis-v text-muted"></i>
                            </a>


                            <div class="dropdown-menu dropdown-menu-right"
                                 aria-labelledby="dropdownMenuLink">
                                <button class="dropdown-item" @click="removeStep(step)"><i
                                        class="fa fa-trash fa-fw"></i> {% trans 'Delete Step' %}</button>

                                <button type="button" class="dropdown-item"
                                        v-if="!step.show_as_header"
                                        @click="step.show_as_header = true"><i
                                        class="fas fa-eye fa-fw"></i> {% trans 'Show as header' %}
                                </button>

                                <button type="button" class="dropdown-item"
                                        v-if="step.show_as_header"
                                        @click="step.show_as_header = false"><i
                                        class="fas fa-eye-slash fa-fw"></i> {% trans 'Hide as header' %}
                                </button>

                                <button class="dropdown-item" @click="moveStep(step, (step_index - 1))"
                                        v-if="step_index > 0">
                                    <i class="fa fa-arrow-up fa-fw"></i> {% trans 'Move Up' %}
                                </button>
                                <button class="dropdown-item"
                                        @click="moveStep(step, (step_index + 1))"
                                        v-if="step_index != (recipe.steps.length - 1)">
                                    <i class="fa fa-arrow-down fa-fw"></i> {% trans 'Move Down' %}
                                </button>
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8">
                            <label :for="'id_step_' + step.id + 'name'">{% trans 'Step Name' %}</label>
                            <input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'">
                        </div>
                        <div class="col-md-4">
                            <label for="id_type"> {% trans 'Step Type' %}</label>
                            <select class="form-control" id="id_type" v-model="step.type">
                                <option value="TEXT">{% trans 'Text' %}</option>
                                <option value="TIME">{% trans 'Time' %}</option>
                            </select>
                        </div>
                    </div>


                    <div class="row" style="margin-top: 12px">
                        <div class="col-md-12">
                            <label :for="'id_step_' + step.id + '_time'">{% trans 'Step time in Minutes' %}</label>
                            <input class="form-control" v-model="step.time"
                                   :id="'id_step_' + step.id + '_time'">
                        </div>
                    </div>

                    <template v-if="step.type == 'TEXT'">
                        <div class="row" style="margin-top: 12px">
                            <div class="col-md-12">
                                <div class="jumbotron" style="padding: 16px">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h4>{% trans 'Ingredients' %}</h4>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-12" style="margin-top: 8px">
                                            <draggable :list="step.ingredients" group="ingredients"
                                                       :empty-insert-threshold="10" handle=".handle"
                                                       @sort="sortIngredients(step)">
                                                <div v-for="ingredient, index in step.ingredients"
                                                     :key="ingredient.id">

                                                    <hr class="d-md-none"/>
                                                    <div class="d-flex">
                                                        <div class="flex-grow-0 handle align-self-start">
                                                            <button type="button" class="btn btn-lg shadow-none"><i
                                                                    class="fas fa-arrows-alt-v "></i></button>
                                                        </div>

                                                        <div class="flex-fill row"
                                                             style="margin-left: 4px; margin-right: 4px">
                                                            <div class="col-lg-2 col-md-6 small-padding"
                                                                 v-if="!ingredient.is_header">
                                                                <input class="form-control"
                                                                       v-model="ingredient.amount"
                                                                       type="number"
                                                                       v-if="!ingredient.no_amount">
                                                            </div>

                                                            <div class="col-lg-2 col-md-6 small-padding"
                                                                 v-if="!ingredient.is_header">
                                                                <multiselect
                                                                        v-tabindex
                                                                        ref="unit"
                                                                        v-model="ingredient.unit"
                                                                        :options="units"
                                                                        :close-on-select="true"
                                                                        :clear-on-select="true"
                                                                        :allow-empty="true"
                                                                        :preserve-search="true"
                                                                        placeholder="{% trans 'Select Unit' %}"
                                                                        tag-placeholder="{% trans 'Create' %}"
                                                                        select-label="{% trans 'Select' %}"
                                                                        :taggable="true"
                                                                        @tag="addUnitType"
                                                                        :id="`unit_${step_index}_${index}`"
                                                                        label="name"
                                                                        track-by="name"
                                                                        :multiple="false"
                                                                        :loading="units_loading"
                                                                        @search-change="searchUnits">
                                                                </multiselect>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 small-padding"
                                                                 v-if="!ingredient.is_header">
                                                                <multiselect
                                                                        v-tabindex
                                                                        ref="food"
                                                                        v-model="ingredient.food"
                                                                        :options="foods"
                                                                        :close-on-select="true"
                                                                        :clear-on-select="true"
                                                                        :allow-empty="true"
                                                                        :preserve-search="true"
                                                                        placeholder="{% trans 'Select Food' %}"
                                                                        tag-placeholder="{% trans 'Create' %}"
                                                                        select-label="{% trans 'Select' %}"
                                                                        :taggable="true"
                                                                        @tag="addFoodType"
                                                                        :id="`ingredient_${step_index}_${index}`"
                                                                        label="name"
                                                                        track-by="name"
                                                                        :multiple="false"
                                                                        :loading="foods_loading"
                                                                        @search-change="searchFoods">
                                                                </multiselect>
                                                            </div>
                                                            <div class="small-padding"
                                                                 v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
                                                                <input class="form-control"
                                                                       v-model="ingredient.note"
                                                                       placeholder="{% trans 'Note' %}">
                                                            </div>
                                                        </div>

                                                        <div class="flex-grow-0 small-padding">
                                                            <a class="btn shadow-none btn-lg" href="#" role="button"
                                                               id="dropdownMenuLink"
                                                               data-toggle="dropdown" aria-haspopup="true"
                                                               aria-expanded="false">
                                                                <i class="fas fa-ellipsis-v text-muted"></i>
                                                            </a>

                                                            <div class="dropdown-menu dropdown-menu-right"
                                                                 aria-labelledby="dropdownMenuLink">
                                                                <button type="button" class="dropdown-item"
                                                                        @click="removeIngredient(step, ingredient)">
                                                                    <i
                                                                            class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
                                                                </button>

                                                                <button type="button" class="dropdown-item"
                                                                        v-if="!ingredient.is_header "
                                                                        @click="ingredient.is_header = true"><i
                                                                        class="fas fa-heading fa-fw"></i> {% trans 'Make Header' %}
                                                                </button>

                                                                <button type="button" class="dropdown-item"
                                                                        v-if="ingredient.is_header "
                                                                        @click="ingredient.is_header = false"><i
                                                                        class="fas fa-leaf fa-fw"></i> {% trans 'Make Ingredient' %}
                                                                </button>

                                                                <button type="button" class="dropdown-item"
                                                                        v-if="!ingredient.no_amount "
                                                                        @click="ingredient.no_amount = true"><i
                                                                        class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Disable Amount' %}
                                                                </button>

                                                                <button type="button" class="dropdown-item"
                                                                        v-if="ingredient.no_amount "
                                                                        @click="ingredient.no_amount = false"><i
                                                                        class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Enable Amount' %}
                                                                </button>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>

                                            </draggable>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2 offset-md-5"
                                             style="text-align: center; margin-top: 8px;">
                                            <button class="btn btn-dark btn-block" @click="addIngredient(step)"><i
                                                    class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <div class="row">
                        <div class="col-md-12">
                            <label :for="'id_instruction_' + step.id">{% trans 'Instructions' %}</label>
                            <textarea class="form-control" rows="8" v-model="step.instruction"
                                      :id="'id_instruction_' + step.id"></textarea>
                            <small class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/">docs here</a>' %}</small>
                        </div>
                    </div>
                </div>
            </div>
        </draggable>

        <div class="row" style="margin-top: 1vh; margin-bottom: 2vh">
            <div class="col-12">
                <button type="button" @click="updateRecipe(true)"
                        class="btn btn-success shadow-none">{% trans 'Save & View' %}</button>
                <button type="button" @click="updateRecipe(false)"
                        class="btn btn-info shadow-none">{% trans 'Save' %}</button>
                <button type="button" @click="addStep()"
                        class="btn btn-primary shadow-none">{% trans 'Add Step' %}</button>
                <a href="{% url 'view_recipe' recipe.pk %}" @click="addStep()"
                   class="btn btn-secondary shadow-none">{% trans 'View Recipe' %}</a>
                <a href="{% url 'delete_recipe' recipe.pk %}"
                   class="btn btn-danger shadow-none">{% trans 'Delete Recipe' %}</a>
            </div>

        </div>

    </div>


{% endblock %}

{% block content_xl_right %}
    <div class="sticky-top" style="top: 2vh">
        <div class="row">
            <div class="col-md-11">
                <button type="button" @click="updateRecipe(true)"
                        class="btn btn-success btn-block shadow-none">{% trans 'Save & View' %}</button>

                <button type="button" @click="updateRecipe(false)"
                        class="btn btn-info btn-block shadow-none">{% trans 'Save' %}</button>

                <button type="button" @click="addStep()"
                        class="btn btn-primary btn-block shadow-none">{% trans 'Add Step' %}</button>

                <a href="{% url 'view_recipe' recipe.pk %}"
                   class="btn btn-secondary btn-block shadow-none">{% trans 'View Recipe' %}</a>
                <a href="{% url 'delete_recipe' recipe.pk %}"
                   class="btn btn-danger btn-block shadow-none">{% trans 'Delete Recipe' %}</a>
            </div>
        </div>
        <br/>
        <div class="row" v-if="recipe !== undefined">
            <div class="col-md-11">
                <h5><i class="fas fa-sort-amount-down-alt"></i> {% trans 'Steps' %}</h5>
                <draggable :list="recipe.steps" group="steps_sorter"
                           :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()" class="list-group"
                           style="margin-top: 1vh">
                    <div v-for="step, step_index in recipe.steps" class="list-group-item">
                        <div class="d-flex justify-content-center align-items-center">
                            <div class="flex-grow-0 text-muted">
                                <i class="fas fa-paragraph fa-fw" v-if="step.type == 'TEXT'"></i>
                                <i class="fas fa-clock fa-fw" v-if="step.type == 'TIME'"></i>
                            </div>
                            <div class="flex-fill" style="padding-left: 4px">
                                <a href="#" v-scroll-to="'#id_step_' + step_index">[[step.name]]</a>
                            </div>
                            <div class="handle flex-grow-0  align-content-end">
                                <i class="fas fa-sort "></i>
                            </div>
                        </div>
                    </div>
                </draggable>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script type="application/javascript">
        let csrftoken = Cookies.get('csrftoken');
        Vue.http.headers.common['X-CSRFToken'] = csrftoken;

        Vue.component('vue-multiselect', window.VueMultiselect.default)

        VueScrollTo.setDefaults({
            offset: -40,
        })

        let app = new Vue({
            components: {
                Multiselect: window.VueMultiselect.default
            },
            delimiters: ['[[', ']]'],
            el: '#id_base_container',
            data: {
                recipe: undefined,
                recipe_changed: undefined,
                keywords: [],
                keywords_loading: false,
                foods: [],
                foods_loading: false,
                units: [],
                units_loading: false,
                message: '',
            },
            directives: {
                tabindex: {
                    inserted(el) {
                        el.setAttribute('tabindex', 0);
                    }
                }
            },
            watch: {
                recipe: {
                    deep: true,
                    handler() {
                        this.recipe_changed = this.recipe_changed !== undefined;
                    }
                }
            },
            created() {
                window.addEventListener('beforeunload', this.warnPageLeave)
            },
            mounted: function () {
                this.loadRecipe()
                this.searchUnits('')
                this.searchFoods('')
                this.searchKeywords('')
            },
            methods: {
                makeToast: function(title, message, variant=null) {
                    this.$bvToast.toast(message, {
                        title: title,
                        variant: variant,
                        toaster: 'b-toaster-top-center',
                        solid: true
                    })
                },
                warnPageLeave: function (event) {
                    if (this.recipe_changed) {
                        event.returnValue = ''
                        return ''
                    }
                },
                loadRecipe: function () {
                    this.$http.get("{% url 'api:recipe-detail' recipe.pk %}").then((response) => {
                        this.recipe = response.data;
                        this.loading = false
                    }).catch((err) => {
                        this.loading = false
                        console.log(err)
                        this.makeToast('{% trans 'Error' %}','{% trans 'There was an error loading the recipe!' %}' + err.bodyText, 'danger')
                    })
                },
                updateRecipe: function (view_after) {
                    this.sortSteps()
                    for (let s of this.recipe.steps) {
                        this.sortIngredients(s)
                    }
                    this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe,
                        {}).then((response) => {
                        console.log(response)
                        this.makeToast('{% trans 'Updated' %}','{% trans 'Changes saved successfully!' %}', 'success')
                        this.recipe_changed = false
                        if (view_after) {
                            location.href = "{% url 'view_recipe' 12345 %}".replace(/12345/, this.recipe.id);
                        }
                    }).catch((err) => {
                        console.log(err)
                        this.makeToast('{% trans 'Error' %}','{% trans 'There was an error updating the recipe!' %}' + err.bodyText, 'danger')
                    })
                },
                imageChanged: function (event) {
                    if (event.target.files && event.target.files[0]) {
                        let fd = new FormData()
                        fd.append('image', event.target.files[0])
                        this.$http.put("{% url 'api:recipe-detail' recipe.pk %}" + 'image/', fd,
                            {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                            console.log(response)
                            this.makeToast('{% trans 'Updated' %}','{% trans 'Changes saved successfully!' %}', 'success')

                        }).catch((err) => {
                            console.log(err)
                            this.makeToast('{% trans 'Error' %}','{% trans 'There was an error updating the recipe!' %}' + err.body.image, 'danger')
                        })

                        let reader = new FileReader();
                        reader.onload = function (e) {
                            $('#id_image').attr('src', e.target.result);
                        }
                        reader.readAsDataURL(event.target.files[0]);
                    }


                },
                addStep: function () { //TODO see if default can be generated from options request
                    this.recipe.steps.push(
                        {'instruction': '', ingredients: [], type: 'TEXT', show_as_header: true}
                    )
                },
                sortSteps: function () {
                    this.recipe.steps.forEach(function (element, index) {
                        element.order = index
                    });
                },
                sortIngredients: function (step) {
                    step.ingredients.forEach(function (element, index) {
                        element.order = index
                    });
                },
                addIngredient: function (step) { //TODO see if default can be generated from options request
                    step.ingredients.push({
                        'food': null,
                        'unit': {
                            'name': '{{request.user.userpreference.default_unit}}'
                        },
                        'amount': 0,
                        'note': '',
                        'order': 0,
                        'is_header': false,
                        'no_amount': false
                    })
                    this.sortIngredients(step)
                },
                removeIngredient: function (step, ingredient) {
                    if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}')) {
                        step.ingredients = step.ingredients.filter(item => item !== ingredient)
                    }
                },
                removeStep: function (step) {
                    if (confirm('{% trans 'Are you sure that you want to delete this step?' %}')) {
                        this.recipe.steps = this.recipe.steps.filter(item => item !== step)
                    }
                },
                moveStep: function (step, new_index) {
                    this.recipe.steps.splice(this.recipe.steps.indexOf(step), 1);
                    this.recipe.steps.splice((new_index < 0 ? 0 : new_index), 0, step);
                    this.sortSteps()
                },
                addFoodType: function (tag, index) {
                    let [tmp, step, id] = index.split('_')

                    let new_food = this.recipe.steps[step].ingredients[id]
                    new_food.food = {'name': tag}
                    this.foods.push(new_food.food)
                    this.recipe.steps[step].ingredients[id] = new_food
                },
                addUnitType: function (tag, index) {
                    let [tmp, step, id] = index.split('_')

                    let new_unit = this.recipe.steps[step].ingredients[id]
                    new_unit.unit = {'name': tag}
                    this.foods.push(new_unit.unit)
                    this.recipe.steps[step].ingredients[id] = new_unit
                },
                searchKeywords: function (query) {
                    this.keywords_loading = true
                    this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.keywords = response.data;
                        this.keywords_loading = false
                    }).catch((err) => {
                        console.log(err)
                        this.makeToast('{% trans 'Error' %}','{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                searchUnits: function (query) {
                    this.units_loading = true
                    this.$http.get("{% url 'api:unit-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.units = response.data;

                        if (this.recipe !== undefined) {
                            for (let s of this.recipe.steps) {
                                for (let i of s.ingredients) {
                                    if (i.unit !== null && i.unit.id === undefined) {
                                        this.units.push(i.unit)
                                    }
                                }
                            }
                        }
                        this.units_loading = false
                    }).catch((err) => {
                        this.makeToast('{% trans 'Error' %}','{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                searchFoods: function (query) {
                    this.foods_loading = true
                    this.$http.get("{% url 'api:food-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.foods = response.data

                        if (this.recipe !== undefined) {
                            for (let s of this.recipe.steps) {
                                for (let i of s.ingredients) {
                                    if (i.food !== null && i.food.id === undefined) {
                                        this.foods.push(i.food)
                                    }
                                }
                            }
                        }

                        this.foods_loading = false
                    }).catch((err) => {
                        this.makeToast('{% trans 'Error' %}','{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                scrollToStep: function (step_index) {
                    document.getElementById('id_step_' + step_index).scrollIntoView({behavior: 'smooth'});
                },
            }
        });
    </script>
{% endblock %}