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

{% block title %}Rowsandall Gold Medal Score {% endblock %}

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

  function submit_form() {
  console.log("form changed");
  var frm = $("#performanceform");

  var data = new FormData(frm[0]);

  $.ajax({
    url:"/rowers/goldmedalscores/user/{{ rower.user.id }}/",
    type: "POST",
    contentType: false,
    processData: false,
    data: data,
    dataType: 'json',

    success: function(data) {
      console.log(data);
      // var parsedJSON = $.parseJSON(data); //
      $("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
      $("#id_chart").replaceWith('<div id="id_chart">'+data.div+'</d'+'iv>');
        console.log('done');
    }
  });
};


  $(document).ready(function() {
  var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
  console.log("CSRF token",csrftoken);

  function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
  beforeSend: function(xhr, settings) {
  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
  xhr.setRequestHeader("X-CSRFToken", csrftoken);
  }
  }
  });
  $("#performanceform").on('change', function(evt) {
  submit_form();
  });
});
  </script>
{% endblock %}

{% block main %}


{% if rower.user %}
<h1>Gold Medal Scores for {{ rower.user.first_name }} </h1>
{% else %}
<h1>Gold Medal Scores for {{ user.first_name }} </h1>
{% endif %}


<ul class="main-content">
  <canvas hidden id="canvas"></canvas>
  <li class="grid_4">
    <p>Hover over the workout to see details, click on the workout to open in a
      separate page.</p>
    <div id="id_chart">
    {{ the_div|safe }}
    </div>
  </li>
  <li class="grid_1">
    <form id="dateform" enctype="multipart/form-data" method="post">
      <table>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <input name='form' class="button" type="submit" value="Submit">
    </form>
  </li>
  <li class="grid_2">
    <p>
      Explanation
    </p>
  </li>
  {% if bestworkouts %}
  <li class="grid_4">
    <h2>Marker Workouts</h2>
    <table width="100%" class="listtable">
      <thead>
        <tr>
          <th>Date</th>
          <th>Workout</th>
          <th>Gold Medal Score</th>
          <th>Duration</th>
        </tr>
      </thead>
      <tbody>
        {% for w in bestworkouts %}
        <tr>
          <td>{{ w.date }}</td>
          <td>
            <a href="/rowers/workout/{{ w.id|encode }}/">{{ w.name }}
          </td>
          <td>
            {{ w.goldmedalstandard|floatformat:"0" }} %
          </td>
          <td>
            {{ w.goldmedalseconds|secondstotimestring }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </li>
  {% endif %}
  <li class="grid_4">
    <a href="/rowers/createmarkerworkouts/user/{{ rower.user.id }}/">Automatically generate marker workouts</a>
  </li>
</ul>

<script src="https://d3js.org/d3.v7.min.js"></script>

<div id="id_script">
  {{ chartscript |safe }}
</div>


{% endblock %}



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