{% extends "newbase.html" %}
{% load static %}
{% 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 main %}
<h1>Manage Plan Execution for {{ rower.user.first_name }} {{ rower.user.last_name }}</h1>

<ul class="main-content">
  <li class="grid_2">
    <p>
      <form enctype="multipart/form-data" method="get">
        <table>
          {{ dateform.as_table }}
        </table>
        <input type="Submit" value="Set Date Range">
      </form>
    </p>
  </li>
  <li class="grid_2">
    <p><a href="/rowers/sessions/?startdate={{ timeperiod|previousperiodstart }}&enddate={{ timeperiod|previousperiodend}}">Back by
        {{ timeperiod|timedeltadays }} days</a>
    </p>
    <p><a href="/rowers/sessions/?startdate={{ timeperiod|nextperiodstart }}&enddate={{ timeperiod|nextperiodend}}">Forward by
        {{ timeperiod|timedeltadays }} days</a>
    </p>
  </li>
</ul>  

<form id="session_form" action="/rowers/sessions/manage/user/{{ rower.user.id }}/?when={{ timeperiod }}"
      method="post">
  <ul class="main-content">
    <li class="grid_4">
  <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>
    Workouts marked with a red check mark (<span style="color:red"><b>&#10004;</b></span>)
    are currently linked to one of your sessions. A workout can only be assigned to
    one session at a time.
  </p>
</li>
  <li class="grid_2".
    <h2>Planned Sessions</h2>
    <table width="100%">
      <tr>
        {% for field in ps_form.hidden_fields %}
        {{ field }}
        {% endfor %}
        {% for field in ps_form.visible_fields %}
        <td> {{ field }}</td>
        {% endfor %}
      </tr>
    </table>
  </li>
  <li class="grid_2">
    <h2>Workouts</h2>
    <table width="100%">
      <tr>
        {% for field in w_form.hidden_fields %}
        {{ field }}
        {% endfor %}
        {% for field in w_form.visible_fields %}
        <td>
          {{ field }}
        </td>
        {% endfor %}
      </tr>
    </table>
  </li>
  <li class="grid_2">
    {% csrf_token %}
    <input type="submit" value="Submit">
  </li>

</ul>
</form>
{% endblock %}

{% block sidebar %}
{% include 'menu_plan.html' %}
{% endblock %}


{% block scripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $(document).ready(function(){

      function addLink( el ){
      var linked = el.next("span.linked");
      if (linked.length == 0) {
      el.after("<span class='linked' style='color:red'><b>&#10004;</b></span>");
      }
      }

      function getURL() {
      var url = window.location.pathname;
      var selectedsession = $("input:radio[name='plannedsession']:checked").val();
      if (url.indexOf("/session/") >= 0) {
      url = url.replace(/\/session\/\d+/g, "/session/"+selectedsession);
      } else {
      url = url.replace("manage","manage/session/"+selectedsession);
      };
      url += '?when={{ timeperiod }}'
      
      return url};

      function loadJSON( 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];
                    var lcheck = workouts[i][3];
                    if (wcheck) {
                    $(":checkbox").filter(function() {
                    return this.value == wid;
                    }).prop("checked",true);
                    } else {
                    $(":checkbox").filter(function() {
                    return this.value == wid;
                    }).prop("checked",false);
                    }
                    if (lcheck) {
                    addLink( $(":checkbox").filter(function() {
                    return this.value == wid;
                    }) );
                    };
                    };
                    });

      }

      loadJSON( getURL() );

      $('#id_plannedsession').on('click', function(evt) {
      loadJSON( getURL() );
      });
      
      })

      

    </script>
{% endblock %}