{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}

{% block title %}Planned Sessions{% endblock %}

{% block meta %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script type='text/javascript'
        src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js'>
</script>
<script>
</script>
{% endblock %}


{% block content %}
<div class="grid_12 alpha">
  {% include "planningbuttons.html" %}
</div>
<div class="grid_12 alpha">
<div class="grid_6 alpha">
  <h1>Manage Plan Execution for {{ rower.user.first_name }} {{ rower.user.last_name }}</h1>
</div>

<div id="timeperiod" class="grid_2 dropdown">
  <button class="grid_2 alpha button gray small dropbtn">Select Time Period  ({{ timeperiod|verbosetimeperiod }})</button>
  <div class="dropdown-content">
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/today/rower/{{ rower.id }}">
      Today
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/thisweek/rower/{{ rower.id }}">
      This Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/thismonth/rower/{{ rower.id }}">
      This Month
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/lastweek/rower/{{ rower.id }}">
      Last Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/manage/lastmonth/rower/{{ rower.id }}">
      Last Month
    </a>
  </div>
  </div>
{% if user.is_authenticated and user|is_manager %}
<div class="grid_2 dropdown">
  <button class="grid_2 alpha button green small dropbtn">
    Change Rower
  </button>
  <div class="dropdown-content">
    {% for member in user|team_rowers %}
    <a class="button green small" href="/rowers/sessions/manage/{{ timeperiod }}/rower/{{ member.id }}">{{ member.user.first_name }} {{ member.user.last_name }}</a>
    {% endfor %}
  </div>
</div>
{% endif %}
</div>
<div class="grid_12 alpha">
  <p>Select one session on the left, and one or more workouts on the right
    to match the workouts to the session. For tests and training sessions,
    the selected workouts must be done on the same date. For all sessions,
    the workout dates must be between the start and end date for the
    session.
  </p>
  <p>
    If you select a workout that has already been matched to another session,
    it will change to match this session.
  </p>
  <p>
    We will make this form smarter in the near future.
  </p>
</div>
<form id="session_form" action="/rowers/sessions/manage/{{ timeperiod }}/rower/{{ rower.id }}"
      method="post">
<div class="grid_12 alpha">
  <div class="grid_6 alpha">
    {{ ps_form.as_table}}
  </div>
  <div class="grid_6 omega">
    {{ w_form.as_table}}
  </div>
</div>
<div class="grid_2 prefix_2 suffix_8">
  {% csrf_token %}
  <input class="button green" type="submit" value="Submit">
</div>


</form>
{% endblock %}

{% block scripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $('#id_plannedsession').on('click', function(evt) {
      var selectedsession = $("input:radio[name='plannedsession']:checked").val();
      
      var url = window.location.pathname;
      if (url.indexOf("/session/") >= 0) {
      url = url.replace(/\/session\/\d+/g, "/session/"+selectedsession);
      } else {
      url += "/session/"+selectedsession
      }
      // window.location.replace(url); 
      $.getJSON(url, function(json) {
      var workouts = json['workouts'];
      for (i=0; i < workouts.length; i++) {
                    var wid = workouts[i][0];
                    var wcheck = workouts[i][2];
                    if (wcheck) {
                    $(":checkbox").filter(function() {
                    return this.value == wid;
                    }).prop("checked",true);
                    } else {
                    $(":checkbox").filter(function() {
                    return this.value == wid;
                    }).prop("checked",false);
                    }
                    }
                    });
                    });
                    });
    </script>
{% endblock %}
