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

{% block title %}Workouts{% endblock %}

{% block content %}

<script>
  function toggle(source) {
  checkboxes = document.querySelectorAll("input[name='plannedsessions']");
  for(var i=0, n=checkboxes.length;i<n;i++) {
       checkboxes[i].checked = source.checked;
  }
 }
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
  $(function() {
  
  // Get the form fields and hidden div
  var modality = $("#id_modality");
  var hidden = $("#id_waterboattype");

  
  // Hide the fields.
  // Use JS to do this in case the user doesn't have JS 
  // enabled.

  hidden.hide();


  
  // Setup an event listener for when the state of the 
  // checkbox changes.
  modality.change(function() {
    // Check to see if the checkbox is checked.
    // If it is, show the fields and populate the input.
  // If not, hide the fields.
    var Value = modality.val();
    if (Value=='water') {
  // Show the hidden fields.
  hidden.show();
  } else {
  // Make sure that the hidden fields are indeed
  // hidden.
  hidden.hide();
      
      // You may also want to clear the value of the 
      // hidden fields here. Just in case somebody 
      // shows the fields, enters data to them and then 
      // unticks the checkbox.
      //
      // This would do the job:
      //
      // $("#hidden_field").val("");
    }
  });


  });



</script>


<div class="grid_12 alpha">
  {% include "planningbuttons.html" %}
</div>
<div class="grid_6 alpha">
  <h1>Clone Multiple Sessions</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/multiclone/today">
      Today
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/multiclone/thisweek">
      This Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/multiclone/thismonth">
      This Month
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/multiclone/lastweek">
      Last Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/multiclone/lastmonth">
      Last Month
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/multiclone/nextweek">
      Next Week
    </a>
    <a class="button gray small alpha"
       href="/rowers/sessions/multiclone/nextmonth">
      Next 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">
    Select Rower 
  </button>
  <div class="dropdown-content">
    {% for member in user|team_rowers %}
    <a class="button green small" href="/rowers/sessions/multiclone/{{ timeperiod }}/rower/{{ member.id }}">{{ member.user.first_name }} {{ member.user.last_name }}</a>
    {% endfor %}
  </div>
</div>
<div class="grid_12 alpha">
  <div class="grid_6 alpha">
    <form enctype="multipart/form-data" method="post">
      {% endif %}
      <div class="grid_4 alpha">
        <table>
          {{ dateform.as_table }}
        </table>
        {% csrf_token %}
      </div>
      <div class="grid_2 omega">
        <input name='daterange' class="button green" type="submit" value="Submit">	
      </div>
    </form>
  </div>
  <div class="grid_5 prefix_1 omega">
    <form id="searchform" method="get" accept-charset="utf-8">
      <div class="grid_3 prefix_1 alpha">
        <input class="searchfield" id="searchbox" name="q" type="text" placeholder="Search">
      </div>
      <div class="grid_1 omega">
        <button class="button blue small" type="submit">
          Search
        </button>
      </div>
    </form>
  </div>

</div>


<form enctype="multipart/form-data" method="post">
  <div id="workouts_table" class="grid_8 alpha">


  {% if plannedsessions %}
  
  <input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

  <table width="100%" class="listtable">
    {{ form.as_table }}
  </table>

{% else %}
<p> No sessions found </p>
{% endif %}
</div>
  <div id="form_settings" class="grid_4 alpha">
    <p>Select one or more planned sessions on the left,
      select the date when the new cycle starts below
      and press submit</p>
  {% csrf_token %}
  <table>
    {{ dateshiftform.as_table }}
  </table>
  <div class="grid_1 prefix_2 suffix_1">
    <p>
      <input name='workoutselectform' class="button green" type="submit" value="Submit">
      </p>
  </div>
  <div class="grid_4">
    <p>You can use the date and search forms above to search through all
      sessions.</p>
  </div>
</div>
</form>


{% endblock %}
