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

{% block title %}{% trans 'Meal-Plan' %}{% endblock %}

{% block extra_head %}

    {% if DEBUG %}
        <script src="{% static 'js/vue.js' %}"></script>
    {% else %}
        <script src="{% static 'js/vue.min.js' %}"></script>
    {% endif %}

    <script src="{% static 'js/vue-resource.js' %}"></script>
    <script src="{% static 'js/moment-with-locales.min.js' %}"></script>

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

    <script src="{% static 'js/js.cookie.min.js' %}"></script>

{% endblock %}

{% block content %}

    <div id="app">
        <div class="row">
            <div class="col-md-4 offset-md-4">
                <div class="input-group" style="margin-top: 8px; margin-bottom: 8px">
                    <div class="input-group-prepend">
                        <button class="btn btn-outline-secondary shadow-none" @click="changeWeek(-1)">
                            <i class="fas fa-arrow-left"></i>
                        </button>
                    </div>
                    <input name="week" id="id_week" class="form-control" type="week" v-model="week"
                           @change="updatePlan()">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary shadow-none" @click="changeWeek(1)">
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table class="table table-sm table-striped table-responsive-sm">
                    <thead class="thead-dark">
                    <tr>
                        <th v-for="d in days" style="width: 14.2%; text-align: center">[[d]]<br/>[[formatDateDay(d)]].
                            <button class="btn btn-sm btn-outline-secondary shadow-none" @click="addDayToShopping(d)"><i
                                    class="fas fa-cart-plus fa-sm"></i></button>
                        </th>
                    </tr>
                    </thead>
                    <tbody v-for="t in meal_types">
                    <tr v-if="meal_plan[t.name] !== undefined">
                        <td colspan="7" style="text-align: center">
                            [[ meal_plan[t.name].name]]
                            <template
                                    v-if="t.created_by !== {{ request.user.pk }} && user_names[t.created_by] !== undefined">
                                ([[ user_names[t.created_by] ]])
                            </template>
                        </td>
                    </tr>
                    <tr v-if="meal_plan[t.name] !== undefined">
                        <td v-for="d in  meal_plan[t.name].days">
                            <draggable class="list-group" :list="d.items" group="plan" style="min-height: 40px"
                                       @change="dragChanged(d.date, t, $event)"
                                       :empty-insert-threshold="10" handle=".handle">
                                <div class="" v-for="(element, index) in d.items" :key="element.id">
                                    <div class="d-block d-md-none">
                                        <div class="col-">
                                            <i class="fas fa-arrows-alt handle input-group-text"
                                               style="width: 100%"></i>
                                        </div>
                                        <div class="list-group-item">
                                            <a href="#" @click="plan_detail = element" data-toggle="modal"
                                               data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
                                        </div>
                                    </div>
                                    <div class="list-group-item handle d-md-block d-none">
                                        <div class="col-md-12">
                                            <a href="#" @click="plan_detail = element" data-toggle="modal"
                                               data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
                                        </div>
                                    </div>
                                </div>
                            </draggable>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <i class="fas fa-calendar-plus"></i> {% trans 'New Entry' %} <a href="#" data-toggle="modal"
                                                                                data-target="#id_plan_help_modal"><i
                    class="far fa-question-circle"></i></a>
            </div>
            <div class="row">
                <div class="col-md-6">

                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
                                       placeholder="{% trans 'Search Recipe' %}" style="margin-bottom: 8px">
                            </div>
                        </div>
                        <draggable class="list-group" :list="recipes"
                                   :group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneRecipe">
                            <div class="list-group-item" v-for="(element, index) in recipes" :key="element.id">
                                <i class="fas fa-arrows-alt"></i> [[element.name]]
                            </div>
                        </draggable>
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <div class="card-body">
                            <input type="text" class="form-control" v-model="new_note_title"
                                   placeholder="{% trans 'Title' %}" style="margin-bottom: 8px">
                            <textarea class="form-control" v-model="new_note_text"
                                      placeholder="{% trans 'Note (optional)' %}"></textarea>
                            <small><span class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/" target="_blank" rel="noopener noreferrer">docs here</a>' %}</span></small>
                            <br/>
                            <br/>
                            <draggable :list="pseudo_note_list"
                                       :group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneNote">
                                <div class="list-group-item" v-for="(element, index) in pseudo_note_list"
                                     :key="element.id">
                                    <i class="fas fa-arrows-alt"></i> {% trans 'Create only note' %}
                                </div>
                            </draggable>
                        </div>

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

        <br>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-shopping-cart"></i> {% trans 'Shopping List' %}
                    </div>

                    <div class="card-body">
                        <template v-if="shopping_list.length < 1">{% trans 'Shopping List currently empty' %}</template>
                        <template v-else>
                            <a v-bind:href="getShoppingUrl()" class="btn btn-success"
                               target="_blank">{% trans 'Open Shopping List' %}</a>
                            <br/>
                            <br/>
                            {% trans 'Recipes' %}
                            <ul class="list-group" style="margin-top: 8px">
                                <li class="list-group-item" v-for="item in shopping_list"> [[ item.recipe_name ]]</li>
                            </ul>
                        </template>
                    </div>
                </div>
            </div>
            <div class="col-md-6" style="margin-top: 8px">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-shopping-cart"></i> {% trans 'Plan' %}
                    </div>

                    <div class="card-body">
                        <a href="#" data-toggle="modal"
                           data-target="#id_plan_types_modal">{% trans 'Edit plan types' %}</a> <br/>
                        <a href="#" data-toggle="modal"
                           data-target="#id_plan_help_modal">{% trans 'Show help' %}</a><br/>
                        <a v-bind:href="getIcalUrl()">{% trans 'Week iCal export' %}</a>
                    </div>
                </div>
            </div>
        </div>

        <br/>
        <br/>

        <div class="modal fade" id="id_plan_detail_modal" tabindex="-1" role="dialog"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <template v-if="plan_detail.title !==''">[[ plan_detail.title ]]</template>
                            <template v-else>[[ plan_detail.recipe_name ]]</template>
                            <small
                                    class="text-muted"><br/>[[ plan_detail.meal_type_name ]] [[
                                formatLocalDate(plan_detail.date) ]]</small>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <template v-if="plan_detail.recipe_name !== undefined ">
                            <small class="text-muted">{% trans 'Recipe' %}</small><br/>
                            <a v-bind:href="planDetailRecipeUrl()" target="_blank">[[ plan_detail.recipe_name ]]</a>
                            <br/>
                        </template>

                        <template v-if="plan_detail.note !== ''">
                            <small class="text-muted">{% trans 'Note' %}</small><br/>
                            <span v-html="plan_detail.note_markdown"></span>
                            <br/>
                        </template>

                        <br/>
                        <br/>
                        <template v-if="plan_detail.created_by !== undefined ">
                            <small class="text-muted">{% trans 'Created by' %}</small><br/>
                            [[ user_names[plan_detail.created_by] ]]
                            <br/>
                        </template>

                        <template v-if="plan_detail.shared.length > 0">
                            <small class="text-muted">{% trans 'Shared with' %}</small><br/>
                            <span>[[ planDetailUserList() ]]</span>
                            <br/>
                        </template>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger"
                                @click="deleteEntry(plan_detail)">{% trans 'Delete' %}</button>
                        <button type="button" class="btn btn-success"
                                v-if="!shopping_list.includes(plan_detail) && plan_detail.recipe_name !== undefined"
                                @click="shopping_list.push(plan_detail)">{% trans 'Add to Shopping' %}</button>
                        <a class="btn btn-primary" v-bind:href="planDetailEditUrl()">{% trans 'Edit' %}</a>
                        <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">{% trans 'Close' %}</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="id_plan_types_modal" tabindex="-1" role="dialog"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{% trans 'Edit plan types' %}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <draggable :list="meal_types_edit" handle=".handle"
                                   :group="{ name: 'types'}">
                            <div v-for="(element, index) in meal_types_edit"
                                 :key="element.id">
                                <template v-if="!element.delete">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend handle">
                                            <button tabindex="-1" class="btn btn-outline-secondary"><i
                                                    class="fas fa-arrows-alt-v"></i></button>
                                        </div>
                                        <input class="form-control" v-model="element.name">
                                        <div class="input-group-append">
                                            <button tabindex="-1" class="btn btn-outline-danger" type="button"
                                                    @click="markTypeDelete(element)"><i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </draggable>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary"
                                @click="meal_types_edit.push({name:'{% trans 'New meal type' %}'})">{% trans 'New' %}</button>
                        <button type="button" class="btn btn-success"
                                @click="updatePlanTypes()">{% trans 'Save' %}</button>
                        <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">{% trans 'Close' %}</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="id_plan_help_modal" tabindex="-1" role="dialog"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{% trans 'Meal Plan Help' %}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {% blocktrans %}
                            <p>The meal plan module allows planning of meals both with recipes or just notes.</p>
                            <p>Simply select a recipe from the list of recently viewed recipes or search the one you
                                want and drag it to the desired plan position. You can also add a note and a title and
                                then drag the recipe to create a plan entry with a custom title and note. Creating only
                                Notes is possible by dragging the create note box into the plan.</p>
                            <p>Click on a recipe in order to open the detail view. Here you can also add it to the
                                shopping list. You can also add all recipes of a day to the shopping list by
                                clicking the shopping cart at the top of the table.</p>
                            <p>Since a common use case is to plan meals together you can define
                                users you want to share your plan with in the settings.
                            </p>
                            <p>You can also edit the types of meals you want to plan. If you share your plan with
                                someone with
                                different meals, their meal types will appear in your list as well. To prevent
                                duplicates (e.g. Other and Misc.)
                                name your meal types the same as the users you share your meals with and they will be
                                merged.</p>
                        {% endblocktrans %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">{% trans 'Close' %}</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script type="application/javascript">
        moment.locale('{{request.LANGUAGE_CODE}}');

        let csrftoken = Cookies.get('csrftoken');
        Vue.http.headers.common['X-CSRFToken'] = csrftoken;

        let app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data: {
                week: moment().format('YYYY-[W]WW'),
                days: moment.weekdays(true),
                plan_entries: [],
                meal_types: [],
                meal_types_edit: [],
                meal_plan: {},
                plan_detail: {shared: []},
                recipes: [],
                recipe_query: '',
                pseudo_note_list: [
                    {id: 0, title: '', text: ''}
                ],
                new_note_title: '',
                new_note_text: '',
                default_shared_users: [],
                user_id_update: [],
                user_names: {},
                shopping: false,
                shopping_list: [],
            },
            mounted: function () {
                this.default_shared_users = [{% for u in request.user.userpreference.plan_share.all %}
                    {{ u.pk }},
                {% endfor %}]

                this.$set(this.user_names, {{ request.user.pk }}, '{{ request.user.get_user_name }}')
                this.user_id_update = Array.from(this.default_shared_users)

                this.updatePlan();
                this.getRecipes();
            },
            methods: {
                updatePlan: function () {
                    let planEntryPromise = this.getPlanEntries();
                    let planTypePromise = this.getPlanTypes();

                    Promise.allSettled([planEntryPromise, planTypePromise]).then(() => {
                        this.buildGrid()
                    })
                },
                getPlanEntries: function () {
                    return this.$http.get("{% url 'api:mealplan-list' %}?html_week=" + this.week).then((response) => {
                        this.plan_entries = response.data;
                    }).catch((err) => {
                        console.log("getPlanEntries error: ", err);
                    })
                },
                getPlanTypes: function () {
                    return this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
                        this.meal_types = response.data;
                        this.meal_types_edit = jQuery.extend(true, [], response.data);
                        for (let mte of this.meal_types_edit) {
                            this.$set(mte, 'delete', false)
                        }
                    }).catch((err) => {
                        console.log("getPlanTypes error: ", err);
                    })
                },
                buildGrid: function () {
                    this.meal_plan = {}

                    for (let e of this.plan_entries) {
                        let new_type = {id: e.meal_type, name: e.meal_type_name, created_by: e.created_by}
                        if (this.meal_types.filter(el => el.name === new_type.name).length === 0) {
                            this.meal_types.push(new_type)
                        }
                    }

                    for (let t of this.meal_types) {
                        this.$set(this.meal_plan, t.name, {
                            name: t.name,
                            meal_type: t.id,
                            days: {}
                        })
                        for (let d of this.days) {
                            let date = moment(this.week).weekday(this.days.indexOf(d)).format('YYYY-MM-DD')
                            this.$set(this.meal_plan[t.name].days, date, {
                                name: d,
                                date: date,
                                items: []
                            })
                        }
                    }
                    for (let e of this.plan_entries) {
                        this.meal_plan[e.meal_type_name].days[e.date].items.push(e)

                        for (let u of e.shared) {
                            if (!this.user_id_update.includes(parseInt(u))) {
                                this.user_id_update.push(parseInt(u))
                            }
                        }
                    }

                    this.updateUserNames()
                },
                getRecipes: function () {
                    let url = "{% url 'api:recipe-list' %}?limit=5"
                    if (this.recipe_query !== '') {
                        url += '&query=' + this.recipe_query;
                    }

                    this.$http.get(url).then((response) => {
                        this.recipes = response.data;
                    }).catch((err) => {
                        console.log("getRecipes error: ", err);
                    })
                },
                getMdNote: function () {
                    let url = "{% url 'api:recipe-list' %}?limit=5"
                    if (this.recipe_query !== '') {
                        url += '&query=' + this.recipe_query;
                    }

                    this.$http.get(url).then((response) => {
                        this.recipes = response.data;
                    }).catch((err) => {
                        console.log("getRecipes error: ", err);
                    })
                },
                updateUserNames: function () {
                    return this.$http.get("{% url 'api:username-list' %}?filter_list=[" + this.user_id_update + ']').then((response) => {
                        for (let u of response.data) {
                            let name = u.username
                            if (`${u.first_name} ${u.last_name}` !== ' ') {
                                name = `${u.first_name} ${u.last_name}`
                            }
                            this.$set(this.user_names, u.id, name);
                        }

                    }).catch((err) => {
                        console.log("updateUserNames error: ", err);
                    })
                },
                dragChanged: function (date, meal_type, evt) {
                    if (evt.added !== undefined) {
                        let plan_entry = evt.added.element

                        plan_entry.date = date
                        plan_entry.meal_type = meal_type.id
                        plan_entry.meal_type_name = meal_type.name

                        if (plan_entry.is_new) { // its not a meal plan object
                            plan_entry.created_by = {{ request.user.id }};
                            plan_entry.shared = this.default_shared_users

                            this.$http.post(`{% url 'api:mealplan-list' %}`, plan_entry).then((response) => {
                                let entry = response.data
                                this.meal_plan[entry.meal_type_name].days[entry.date].items = this.meal_plan[entry.meal_type_name].days[entry.date].items.filter(item => !item.is_new)
                                this.meal_plan[entry.meal_type_name].days[entry.date].items.push(entry)
                            }).catch((err) => {
                                console.log("dragChanged create error", err);
                            })
                        } else {
                            this.$http.put(`{% url 'api:mealplan-list' %}${plan_entry.id}/`, plan_entry).then((response) => {
                            }).catch((err) => {
                                console.log("dragChanged update error", err);
                            })
                        }
                    }
                },
                deleteEntry: function (entry) {
                    $('#id_plan_detail_modal').modal('hide')
                    this.$http.delete(`{% url 'api:mealplan-list' %}${entry.id}/`, entry).then((response) => {
                        this.meal_plan[entry.meal_type_name].days[entry.date].items = this.meal_plan[entry.meal_type_name].days[entry.date].items.filter(item => item !== entry)
                    }).catch((err) => {
                        console.log("deleteEntry error: ", err);
                    })
                },
                updatePlanTypes: function () {
                    let promise_list = []
                    let i = 0
                    for (let x of this.meal_types_edit) {
                        x.order = i
                        i++
                        if (x.id === undefined && !x.delete) {
                            x.created_by = {{ request.user.id }}
                                promise_list.push(this.$http.post("{% url 'api:mealtype-list' %}", x).then((response) => {
                                }).catch((err) => {
                                    console.log("updatePlanTypes create error: ", err);
                                }))
                        } else if (x.delete) {
                            promise_list.push(this.$http.delete(`{% url 'api:mealtype-list' %}${x.id}/`, x).then((response) => {
                            }).catch((err) => {
                                console.log("updatePlanTypes delete error: ", err);
                            }))
                        } else {
                            promise_list.push(this.$http.put(`{% url 'api:mealtype-list' %}${x.id}/`, x).then((response) => {

                            }).catch((err) => {
                                console.log("updatePlanTypes update error: ", err);
                            }))
                        }
                    }
                    Promise.allSettled(promise_list).then(() => {
                        this.updatePlan()
                        $('#id_plan_types_modal').modal('hide')
                    })
                },
                markTypeDelete: function (element) {
                    if (confirm('{% trans 'When deleting a meal type all entries using that type will be deleted as well. Deletion will apply when configuration is saved. Do you want to proceed?' %}')) {
                        element.delete = true
                    }
                },
                cloneRecipe: function (recipe) {
                    return {
                        id: Math.round(Math.random() * 1000) + 10000,
                        recipe: recipe.id,
                        recipe_name: recipe.name,
                        title: this.new_note_title,
                        note: this.new_note_text,
                        is_new: true
                    }
                },
                cloneNote: function () {
                    let new_entry = {
                        id: Math.round(Math.random() * 1000) + 10000,
                        title: this.new_note_title,
                        note: this.new_note_text,
                        is_new: true,
                    }

                    if (new_entry.title === '') {
                        new_entry.title = '{% trans 'Title' %}'
                    }

                    this.new_note_title = ''
                    this.new_note_text = ''
                    return new_entry
                },
                planElementName: function (element) {
                    if (element.title) {
                        return element.title
                    } else if (element.recipe_name) {
                        return element.recipe_name
                    } else {
                        return element.name
                    }
                },
                planDetailRecipeUrl: function () {
                    return "{% url 'view_recipe' 12345 %}".replace(/12345/, this.plan_detail.recipe);
                },
                planDetailEditUrl: function () {
                    return "{% url 'edit_meal_plan' 12345 %}".replace(/12345/, this.plan_detail.id);
                },
                planDetailUserList: function () {
                    let users = []
                    for (let u of this.plan_detail.shared) {
                        users.push(this.user_names[u])
                    }
                    return users.join(', ')
                },
                formatLocalDate: function (date) {
                    return moment(date).format('LL')
                },
                formatDateDay: function (day) {
                    return moment(this.week).weekday(this.days.indexOf(day)).format('D')
                },
                changeWeek: function (change) {
                    this.week = moment(this.week).add(change, 'w').format('YYYY-[W]WW')
                    this.updatePlan();
                },
                getShoppingUrl: function () {
                    let url = "{% url 'view_shopping' %}"
                    let first = true
                    for (let se of this.shopping_list) {
                        if (first) {
                            url += `?r=${se.recipe}`
                            first = false
                        } else {
                            url += `&r=${se.recipe}`
                        }
                    }
                    return url
                },
                getIcalUrl: function () {
                    return "{% url 'api_get_plan_ical' 12345 %}".replace(/12345/, this.week);
                },
                addDayToShopping: function (day) {
                    let date = moment(this.week).weekday(this.days.indexOf(day)).format('YYYY-MM-DD')

                    for (let t of this.meal_types) {
                        for (let i of this.meal_plan[t.name].days[date].items) {
                            if (!this.shopping_list.includes(i)) {
                                this.shopping_list.push(i)
                            }
                        }
                    }
                }
            }
        });
    </script>
{% endblock %}