{% 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' %}

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

    <script src="{% static 'js/Sortable.min.js' %}"></script>
    <script src="{% static 'js/vuedraggable.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 id="app">
        <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="name"
                            track-by="id"
                            id="id_keywords"
                            :multiple="true"
                            :loading="keywords_loading"
                            @search-change="searchKeywords">
                    </multiselect>
                </div>
            </div>

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

                <div class="row">
                    <div class="col-md-12">
                        <h3>{% trans 'Step' %} [[step_index+1]]</h3>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <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>


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

                                <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: 8px; margin-right: 8px">
                                        <div class="col-lg-2 col-md-6 small-padding">
                                            <input class="form-control" v-model="ingredient.amount" type="number">
                                        </div>

                                        <div class="col-lg-2 col-md-6 small-padding">
                                            <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 '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">
                                            <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 '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="col-lg-4 col-md-6 small-padding">
                                            <input class="form-control" v-model="ingredient.note"
                                                   placeholder="{% trans 'Note' %}">
                                        </div>
                                    </div>

                                    <div class="flex-grow-0 small-padding">
                                        <button type="button" class="btn btn-outline-warning btn-lg"
                                                @click="removeIngredient(step, ingredient)"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        </draggable>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12" style="text-align: center; margin-top: 8px; margin-bottom: 8px">
                        <button class="btn btn-success" @click="addIngredient(step)"><i class="fa fa-plus"></i></button>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <textarea class="form-control" rows="8" v-model="step.instruction"
                                  :id="'id_instruction_' + step.id"></textarea>
                    </div>
                </div>
                <br/>
            </div>

            <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>
            <br/>
            <br/>
        </div>
    </div>

{% endblock %}

{% block content_xl_right %}
    <div class="sticky-top" style="top: 2vh">
        <div class="row">
            <div class="col-md-8">
                <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 %}" @click="addStep()"
                   class="btn btn-secondary btn-block shadow-none">{% trans 'View Recipe' %}</a> <br/>
            </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)

        let app = new Vue({
            components: {
                Multiselect: window.VueMultiselect.default
            },
            delimiters: ['[[', ']]'],
            el: '#id_base_container',
            data: {
                recipe: undefined,
                keywords: [],
                keywords_loading: false,
                foods: [],
                foods_loading: false,
                units: [],
                units_loading: false,
            },
            directives: {
                tabindex: {
                    inserted(el) {
                        el.setAttribute('tabindex', 0);
                    }
                }
            },
            mounted: function () {
                this.loadRecipe()
                this.searchUnits('')
                this.searchFoods('')
                this.searchKeywords('')
            },
            methods: {
                loadRecipe: function () {
                    this.$http.get("{% url 'api:recipe-detail' recipe.pk %}").then((response) => {
                        this.recipe = response.data;
                        this.loading = false
                    }).catch((err) => {
                        this.error = err.data
                        this.loading = false
                        console.log(err)
                    })
                },
                updateRecipe: function (view_after) {
                    this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe,
                        {}).then((response) => {
                        console.log(view_after)
                        console.log(response)
                        if (view_after) {
                            location.href = "{% url 'view_recipe' 12345 %}".replace(/12345/, this.recipe.id);
                        }
                    }).catch((err) => {
                        console.log(err)
                    })
                },
                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)

                        }).catch((err) => {
                            console.log(err)
                        })


                        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: []}
                    )
                },
                sortStep: 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': undefined,
                        'unit': undefined,
                        'amount': 0,
                        'note': '',
                        'order': 0,
                    })
                    this.sortStep(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)
                    }
                },
                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)
                    })
                },
                searchUnits: function (query) {
                    this.units_loading = true
                    this.$http.get("{% url 'api:unit-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.units = response.data;
                        for (let s of this.recipe.steps){
                            for (let i of s.ingredients) {
                                if (i.unit.id === undefined) {
                                    this.units.push(i.unit)
                                }
                            }
                        }
                        this.units_loading = false
                    }).catch((err) => {
                        console.log(err)
                    })
                },
                searchFoods: function (query) {
                    this.foods_loading = true
                    this.$http.get("{% url 'api:food-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.foods = response.data

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

                        this.foods_loading = false
                    }).catch((err) => {
                        console.log(err)
                    })
                },
            }
        });
    </script>
{% endblock %}