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

{#           #}
{# Opengraph #}
{#           #}
{% block opengraph %}
{{ block.super }}
<meta property="og:title" content="{% trans 'Schedule' %}">
<meta property="og:description" content="{{ schedule }} / {{owner_user.username}}">
{% endblock %}

{% block title %}{{schedule.name}}{% endblock %}

{% block header %}
<script type="text/javascript">
    function init_sortable()
    {
        $("#schedule-table").find("tbody").off();
        var elements = document.getElementsByTagName('tbody');
        $.each(elements, function(index, element) {
            Sortable.create(element, {
                handle: '.dragndrop-handle',
                animation: 150,
                onUpdate: function (event) {
                    var schedule_id = $(event.target).parents('table').data('schedule');
                    $.each(($(event.from).children('tr')), function(index, tr_element) {
                        var tr_element = $(tr_element);
                        console.log(tr_element.data('id'));

                        // The last table element has no ID attribute (has only the
                        // 'add exercise' link
                        if( tr_element.data('id') ) {
                            var step_pk = tr_element.data('id');
                            $.ajax({
                                url: '/api/v2/schedulestep/' + step_pk + '/',
                                type: 'PATCH',
                                data: {'order': index + 1}
                            }).done(function (data) {
                                // console.log(data);
                            });
                        }
                    });


                    // TODO: again, why do we need to do this twice. Otherwise, sometimes
                    //       it doesn't get current data
                    var current_url = $("#current-url").data('currentUrl');
                    $.get(current_url);
                    $.get(current_url, function(data) {
                        $('#schedule-table').html($(data).find('#schedule-table').html());
                        init_sortable();
                        wgerFormModalDialog();
                    });
                }
            });
        })
    }

    $(function() {
        init_sortable();
    });
</script>
{% endblock %}

{% block content %}
<table class="table">
    <tr>
        <th style="width: 30%;">{% trans "Start date" %}</th>
        <td>{{schedule.start_date}}</td>
    </tr>
    <tr>
        <th>{% trans "Schedule active" %}</th>
        <td>
            {% if schedule.is_active %}
                <span class="{% fa_class 'check' %}"></span>
            {% else %}
                <span class="{% fa_class 'times' %}"></span>
            {% endif %}
        </td>
    </tr>
    <tr>
        <th>{% trans "Is a loop" %}</th>
        <td>
            {% if schedule.is_loop %}
                <span class="{% fa_class 'check' %}"></span>
                <small>{% trans "This schedule is a loop and will go through the workouts above till you deactivate it" %}</small>
            {% else %}
                <span class="{% fa_class 'times' %}"></span>
            {% endif %}
        </td>
    </tr>
</table>


<div id="schedule-table-container">
    <table id="schedule-table" class="table" data-schedule="{{schedule.id}}">
        <thead>
        <tr>
            <th>{% trans "Nr." %}</th>
            {% if is_owner %}
            <th>{% trans "Actions" %}</th>
            {% endif %}
            <th>{% trans "Workout" %}</th>
            <th>{% trans "Weeks" %}</th>
        </tr>
        </thead>
        <tbody>
        {% for step in schedule.schedulestep_set.select_related %}
        <tr data-id="{{step.id}}">
            <td>
                {{ forloop.counter }}
            </td>
            {% if is_owner %}
            <td style="min-width: 6em;">
            <span class="editoptions">
                <span title="{% trans 'Move me' %}" class="dragndrop-handle {% fa_class 'bars' %}"></span>

                 <a href="{% url 'manager:step:edit' step.id %}"
                    title="{% trans 'Edit' %}"
                    class="wger-modal-dialog">
                    <span class="{% fa_class 'pencil-square-o' %}"></span></a>
                <a href="{% url 'manager:step:delete' step.id %}"
                   title="{% trans 'Delete' %}"
                   class="wger-modal-dialog">
                    <span class="{% fa_class 'trash' %}"></span></a>
            </span>
            </td>
            {% endif %}
            <td>
                <a href="{{ step.workout.get_absolute_url }}">{{ step.workout }}</a>
                {% if active_workout == step %}
                &nbsp;<span class="label label-info">{% trans "active" %}</span>
                {% endif  %}
            </td>
            <td>
                {{ step.duration }}
            </td>
        </tr>
        {% empty %}
        {% if is_owner %}
        <tr>
            <td colspan="4">
                <a href="{% url 'manager:step:add' schedule.id %}" class="wger-modal-dialog btn btn-block btn-default">
                    {% trans "No workouts found." %} {% trans "Add one now." %}
                </a>
            </td>
        </tr>
        {% endif %}
        {% endfor %}
        {% if is_owner %}
        <tr>
            <td colspan="4">
                {% if not schedule.is_active %}
                <a href="{% url 'manager:schedule:start' schedule.pk %}" class="btn btn-success btn-sm">
                    <span class="{% fa_class 'play' %}"></span>
                    {% trans "Start schedule" %}
                </a>
                {% endif %}

                <a href="{% url 'manager:step:add' schedule.id %}" class="wger-modal-dialog btn btn-default btn-sm">
                    <span class="{% fa_class 'plus' %}"></span>
                    {% trans "Add workout" %}
                </a>
            </td>
            <td colspan="2">
            </td>
        </tr>
        {% endif %}
        </tbody>
    </table>
</div>


{% for step in schedule.schedulestep_set.select_related %}
{% with step_dates=step.get_dates %}
<div class="row">
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {% blocktrans count weeks=step.duration %}{{ weeks }} Week
                    {% plural %}{{ weeks }} Weeks
                    {% endblocktrans %}
                </h4>

                {% if active_workout == step %}
                    <span class="label label-info">{% trans "active" %}</span>
                {% endif  %}
            </div>
            <div class="panel-body">
                <span>{{step_dates.0}} <br> {{step_dates.1}}</span>
            </div>
            <div class="panel-footer">
                <a href="{{ step.workout.get_absolute_url }}"
                   class="btn btn-default btn-block btn-sm"
                   style="white-space: normal;">
                    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                    {{ step.workout }}
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        {% for day in step.workout.canonical_representation.day_list %}
        <div id="div-day-{{ day.obj.id }}">
            {% render_day day.obj False %}
        </div>
        {% endfor %}
    </div>
</div>
{% endwith %}
{% endfor %}
{% endblock %}


{% block sidebar %}
{% if is_owner %}
<h4>{% trans "Adding workouts" %}</h4>

<p>{% blocktrans %}Add as many workouts to the schedule as you want. You can
edit the order by dragging and dropping them. It's also possible to add one workout more
than once.{% endblocktrans %}</p>
{% endif %}

<div class="modal fade" id="export-ical-popup">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans "Export calendar file" %}</h4>
            </div>
            <div class="modal-body">
                <p>{% trans "Export this schedule as a calendar file." %}</p>
                <p>{% blocktrans %}You can then import the file it into your calendar
application for example google calendar, outlook or iCal. This will create
an appointment for each training day with the appropriate exercises.{% endblocktrans %}</p>
                <p>
                    <a href="{% url 'manager:schedule:ical' schedule.id uid token %}" class="btn btn-block btn-default">
                        {% trans "Export calendar file" %}
                    </a>
                </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="download-pdf-popup">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans "Download as PDF" %}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div id="pdf-download-info" data-schedule-id="{{ schedule.id }}" data-uid="{{ uid }}" data-token="{{ token }}"></div>
                    <div class="form-group">
                        <div>
                            <label for="id_images" class="col-md-3 control-label">
                                {% trans "Type" %}
                            </label>
                        </div>
                        <div class="col-md-9" style="padding-left: 35px;">
                            <div class="radio">
                                <input type="radio" name="pdf_type" id="id_type_log" value="log" checked>
                                {% trans "Log" %}
                            </div>
                            <div class="radio">
                                <input type="radio" name="pdf_type" id="id_type_table" value="table">
                                {% trans "Table" %}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <label for="id_images" class="col-md-3 control-label">
                                {% trans "with images" %}
                            </label>
                        </div>
                        <div class="col-md-9">
                            <input type="checkbox" class="checkbox" name="images" id="id_images" checked>
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <label for="id_comments" class="col-md-3 control-label">
                                {% trans "with comments" %}
                            </label>
                        </div>
                        <div class="col-md-9">
                            <input type="checkbox" class="checkbox" name="comments" id="id_comments" checked>
                        </div>
                    </div>
                </form>

                <p>
                    <a href="" class="btn btn-block btn-default" id="download-pdf-button-schedule">
                        {% trans "Download" %}
                    </a>
                </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{#         #}
{# Options #}
{#         #}
{% block options %}
    <div class="btn-group">
    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="{% fa_class 'cog' %}"></span>
        {% trans "Options" %}
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#" data-toggle="modal" data-target="#export-ical-popup">
                <span class="{% fa_class 'calendar' %}"></span>
                {% trans "Export calendar file" %}
            </a>
        </li>
        <li>
            <a data-toggle="modal" data-target="#download-pdf-popup">
                <span class="{% fa_class 'download' %}"></span>
                {% trans "Download as PDF" %}
            </a>
        </li>
        {% if is_owner %}
        <li>
            <a href="{% url 'manager:schedule:edit' schedule.id %}" class="wger-modal-dialog">
                <span class="{% fa_class 'pencil-square-o' %}"></span>
                {% trans "Edit schedule" %}
            </a>
        </li>
        <li role="separator" class="divider"></li>
        <li>
            <a href="{% url 'manager:schedule:delete' schedule.id %}" class="wger-modal-dialog">
                <span class="{% fa_class 'trash' %}"></span>
                {% trans "Delete schedule" %}
            </a>
        </li>
        {% endif %}
    </ul>
    </div>
{% endblock %}
