{% extends 'timepiece/schedule/base.html' %}

{% load bootstrap_toolkit %}
{% load static %}

{% block title %}Schedule for the Week of {{ week|date:'M j, Y' }}{% endblock title %}

{% block bodyid %}project-hours{% endblock bodyid %}

{% block extracss %}
    <style>
        #modal
        {
            width: 700px;
        }
        #modal h2 { text-align:  center}
        #user-schedule th, #user-schedule td {
            padding: 10px;
            font-size: 1.75em;
        }
    </style>
{% endblock %}

{% block extrajs %}
    <script charset="utf-8" src="{% static "timepiece/js/highlight.js" %}"></script>
    <script>
        $(function() {
            hoverToHighlight('#schedule');
        });

        function isEmpty(el){
              return !$.trim(el.html())
        }

        function displayScheduleModal(schedule){
                $("#modal #user-schedule tbody").find("tr").remove();
                $("#modal h2").html(schedule.user);
                for (var i=0; i < schedule.projects.length; i++) {
                    var obj = schedule.projects[i];
                    var row = '<tr><th>' + obj.pname + '</th><td style="text-align: center">' + obj.hours + '</td></tr>';
                    $("#modal #user-schedule tbody").append(row);
                }
                $("#modal").modal('show');
        }

        $(function() {
            $('#schedule thead th:not(:first)').on( 'click', function () {
                var schedule = new Object();
                schedule.user = $(this).html();
                schedule.projects = [];

                var col = $(this).parent().children().index($(this));
                $(this).closest("table")
                    .find("tr td:nth-child(" + (col+1) + ")")
                    .each(function() {
                          if (!isEmpty($(this))) {
                              var project = {};
                              project['pname'] = $('th:first', $(this).parents('tr')).text();
                              project['hours'] = $.trim($(this).html())
                              schedule.projects.push(project);
                          }
                    });
                displayScheduleModal(schedule);
            });
        });

        $("#schedule tr:last td").text(function(i){
            var t = 0;
            $(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
                t += parseInt( $(this).text(), 10 ) || 0;
            });
            return t;
        });
    </script>
{% endblock extrajs %}

{% block content %}

    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h2>Modal header</h2>
          </div>
          <div class="modal-body">
            <table id="user-schedule" class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>Project</th>
                        <th>Hours</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
          </div>
          <div class="modal-footer">
          </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <h2>Schedule for the Week of {{ week|date:'M j, Y'}}</h2>
            <ul class="nav nav-pills">
                <li><a href="{% url 'view_schedule' %}?week_start={{ prev_week|date:'Y-m-d' }}">&larr; Prev Week</a></li>
                <li><a href="{% url 'view_schedule' %}?week_start={{ next_week|date:'Y-m-d' }}">Next Week &rarr;</a></li>
            </ul>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span10">
            <form class="form-inline" accept-charset="UTF-8" method="get" action="">
                {{ form|as_bootstrap:"inline" }}
                <button type="submit" class="btn" name="submit">Update</button>
            </form>
        </div>
        {% if perms.entries.add_projecthours %}
            <div class="span2">
                <a class="btn right" href="{% url 'edit_schedule' %}?week_start={{ week|date:'Y-m-d' }}">Edit Schedule</a>
            </div>
        {% endif %}
    </div>

    <div class="row-fluid">
        <div class="span12">
            {% if projects %}
                <table class="table table-striped table-bordered table-condensed" id="schedule">
                    <thead>
                        <tr>
                            <th>Project</th>
                            {% for id, first_name, last_name in users %}
                                <th>{{ first_name }} {{ last_name|first }}.</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for id, name, entries in projects %}
                            <tr>
                                <th>{{ name }}</th>
                                {% for entry in entries %}
                                    <td class="hours{% if not entry.published %} unpublished{% endif %}">
                                        {% if entry.hours %}{{ entry.hours|floatformat:0 }}{% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        <tr>
                            <th>Totals</th>
                            {% for x in users %}
                                <td class="hours"></td>
                            {% endfor %}
                        </tr>
                    </tbody>
                </table>
            {% else %}
                <p>There are no entries this week.</p>
            {% endif %}
        </div>
    </div>
{% endblock content %}
