{% extends 'base.html' %}
{% load staticfiles %}
{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'js/themes/default/style.min.css' %}"/>
{% endblock stylesheets %}
{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/jstree.min.js' %}"></script>
{% endblock scripts %}
{% block content %}
    <h4>Project report &dash; {{ object }}</h4>

    <form method="get" id="report_form" action="{% url 'project_report_create' %}" target="_blank">
        <table class="table">
            <tbody>

            {% if not has_templates %}
                <p style="color:red;">You do not have any report templates defined!
                    &NonBreakingSpace; <a href="{% url 'template_create' %}" target="_blank">Create one</a>
                </p>
            {% endif %}
            {% for field in form %}
                <tr>
                    <td style="vertical-align: middle;">{{ field.label }}</td>
                    <td style="vertical-align: middle;">{{ field }}</td>
                </tr>
            {% endfor %}

            <!-- simply pass measurement pks -->
            <input type="hidden" id="mkeys_id" name="mkeys">
            <input type="hidden" id="project_id" name="project" value="{{ object.id }}"/>

            </tbody>
        </table>
    </form>

    <table class="table striped">
        <thead>
        <tr>
            <th align="left">
                <button class="button" onclick="$('#tree_div').jstree(true).open_all()">Expand</button>
                <button class="button" onclick="$('#tree_div').jstree(true).close_all()">Collapse</button>
                <button class="button" onclick="selectAllSamples(true);">Select all</button>
                <button class="button" onclick="selectAllSamples(false);">Select none</button>
            </th>
            {% if has_templates %}
                <th align="right">
                    <button class="button primary" onclick="doSubmit()">Generate</button>
                </th>
            {% endif %}
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="2">
                Measurement selection
                <div id="tree_div">
                    <!-- sample list with measurements sub list -->
                    <ul>
                        {% for key, sample in samples.items %}
                            <li>{{ sample.sample }}
                                <ul>
                                    {% for measurement in sample.measurements %}
                                        <li data-pk="{{ measurement.pk }}">
                                            {{ measurement.started_at|date }}
                                            {{ measurement.result|floatformat:1 }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        function selectAllSamples(val) {
            if (val)
                $('#tree_div').jstree(true).select_all(false);
            else
                $('#tree_div').jstree(true).deselect_all(false);
        }

        $(document).ready(function () {
            $('#tree_div').jstree(
                    {
                        "core": {
                            "themes": {
                                "theme": 'default-dark',
                                "variant": "large"
                            }
                        },
                        "plugins": ["wholerow", "checkbox", 'themes']
                    }
            );
        });

        function doSubmit() {
            // collect measurement pks from tree view and pull them into the hidden
            // field
            var mkeys_field = $('#mkeys_id');
            var checked_items = $('#tree_div').jstree(true).get_bottom_checked(true);
            var t = [];
            for (var i = 0; i < checked_items.length; ++i) {
                t.push(checked_items[i].data.pk);
            }
            mkeys_field.val(t.join(","));
            if (t.length > 0) {
                $('#report_form').submit();
            }
        }

    </script>

{% endblock content %}