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

{% block title %}Plan entire microcycle{% endblock %}

{% block main %}
{% if team %}
<h1>Create Group Sessions for {{ team.name }}</h1>
{% else %}
<h1>Create Sessions for {{ rower.user.first_name }} {{ rower.user.last_name }}</h1>
{% endif %}

<ul class="main-content">
  <li class="grid_2">
    <p>
      <form enctype="multipart/form-data" method="get">
        <table>
          {{ dateform.as_table }}
        </table>
	<table>
	  {{ teamform.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>
  <li class="grid_4">
    <p>
      On this page, you can create and edit sessions for an entire time
      period. You see a list of the current sessions planned for the
      selected time period. Each row in the table is a session. You can
      remove a session by clicking "remove" at the end of a row.
      You can edit the date in the forms. If you need to add a new session,
      click the "Add More" button to add a new session. Use the "Submit"
      button to commit any changes you made.
    </p>
    <form id="ps-form-table" method="post">
      {% csrf_token %}
      {{ ps_formset.management_form }}
      <table width="100%">
        <thead>
          <tr>
            <th>&nbsp;</th>
            {% for field in ps_formset.0.visible_fields %}
            <td>{{ field.label_tag }}</td>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for form in ps_formset %}
          <tr class="session_form_row">
            <td> {{ forloop.counter }}
              {% if form.instance.pk %}{{ form.DELETE }}{% endif %}
              {{ form.id }}
              {% for field in form.hidden_fields %}
              {{ field }}
              {% endfor %}
              {% for field in form.visible_fields %}
            <td>
              {{ field }}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% if team %}
      <a href="/rowers/sessions/multicreate/user/{{ rower.user.id }}/extra/{{ extrasessions }}/?when={{ timeperiod }}&team={{ team.id }}">
        Add More
      </a>
      {% else %}
      <a href="/rowers/sessions/multicreate/user/{{ rower.user.id }}/extra/{{ extrasessions }}/?when={{ timeperiod }}">
        Add More
      </a>
      {% endif %}
      or
      <a href="/rowers/sessions/multiclone/user/{{ rower.user.id }}/?when={{ timeperiod }}">
        Clone multiple sessions
      </a>
      <button type="submit">Submit</button>
  </form>
  </li>
</ul>

 
<script src="/static/js/jquery-3.1.0.js">
</script>
<script src="/static/js/jquery.formset.js"></script>
<script>

  $('#ps-form-table tbody tr').formset({
  addText: ''
  });

  $(document).ready(function(){


  $("tr.session_form_row").each(function() {
  var myrow = this;
  $( myrow ).find('*[id*=sessionmode]').change(function() {
  if (this.value == 'TRIMP') {
  $( myrow ).find("*[id*=sessionunit]").prop('value','None');
  $('#id_guidance').html("<p>TRIMP has no unit</p>");
  }
  if (this.value == 'distance') {
  $( myrow ).find("*[id*=sessionunit]").prop('value','m');
  $('#id_guidance').html("<p>Distance: Set value to meters</p>");
  }
  if (this.value == 'time') {
  $( myrow ).find("*[id*=sessionunit]").prop('value','min');
  $('#id_guidance').html("<p>Time: Set value to minutes</p>");
  }
  if (this.value == 'rScore') {
  $( myrow ).find("*[id*=sessionunit]").prop('value','None');
  $('#id_guidance').html("<p>rScore has no unit</p>");

  }
  });

  $( myrow ).find('*[id*=sessionunit]').change(function() {
  if (this.value == 'km') {
  $( myrow ).find("*[id*=sessionmode]").prop('value','distance');
  $('#id_guidance').html("<p>Mode was set to distance</p>");
  }
  if (this.value == 'm') {
  $( myrow ).find("*[id*=sessionmode]").prop('value','distance');
  $('#id_guidance').html("<p>Mode was set to distance</p>");
  }
  if (this.value == 'None') {
  $( myrow ).find("*[id*=sessionmode]").prop('value','rScore');
  $('#id_guidance').html("<p>Mode was set to rScore</p>");
  }
  if (this.value == 'min') {
  $( myrow ).find("*[id*=sessionmode]").prop('value','time');
  $('#id_guidance').html("<p>Mode was set to time</p>");
  }
  });

  $( myrow ).find('*[id*=sessiontype]').change(function() {
  if (this.value == 'session') {
  $( myrow ).find("*[id*=criterium]").prop("value","none");
  $('#id_guidance').html("<p>For Training Sessions, the default criterium is 'Approximately'</p>");
  }

  if (this.value == 'challenge') {
  $( myrow ).find("*[id*=criterium]").prop("value","minimum");
  $('#id_guidance').html("<p>For Challenges, the default criterium is 'At Least'</p>");
  }

  if (this.value == 'cycletarget') {
  $( myrow ).find("*[id*=criterium]").prop("value","none");
  $('#id_guidance').html("<p>For Cycle Targets, the default criterium is 'Approximately'</p>");
  }

 if (this.value == 'test') {
  $( myrow ).find("*[id*=criterium]").prop("value","exact");
  $( myrow ).find("*[id*=sessionmode]").prop("value","distance");
  $( myrow ).find("*[id*=sessionunit]").prop("value","m");
  $('#id_guidance').html("<p>Set mode to distance. For Mandatory Tests, only distance or time are allowed.</p><p>For Mandatory Tests, the only criterium is 'Exactly'</p>");
  }

  });
  

  

  });

  });

</script>
{% endblock %}

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