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

{% block title %}Advanced Features {% endblock %}

{% block scripts %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>
  function submit_form() {
    console.log("form changed");
    var frm = $("#instrokeform");
    var data = new FormData(frm[0]);

    $.ajax({
      url:"/rowers/workout/{{ workout.id|encode }}/instroke/interactive/",
      type: "POST",
      contentType: false,
      processData: false,
      data: data,
      dataType: 'json',

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

  $(document).ready(function() {
    var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
    function csrfSafeMethod(method) {
      return(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
      beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
      }
    });
    $("#instrokeform").on('change', function(evt) {
      submit_form();
    });
  });
</script>
<script>
$( function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 60,
    step: 0.1,
    values: [ {{ spm_min }}, {{ spm_max }} ],
    slide: function( event, ui ) {
      $( "#amountspm" ).val(ui.values[ 0 ] + "  - " + ui.values[ 1 ] );
      $( "#id_spm_min" ).val( ui.values[ 0 ]);
      $( "#id_spm_max" ).val(ui.values[ 1 ] );


    }

  });
  $( "#amountspm" ).val($( "#slider-range" ).slider( "values", 0 ) +
    " - " + $( "#slider-range" ).slider( "values", 1 ));

} );
</script>
<script>
  $("#instrokeform").mouseup(function() {
    submit_form();
  });
</script>
<script>
  function secondsToHMS(s) {
    var h = Math.floor(s/3600); // Hours
    s -= h*3600;
    var m = Math.floor(s/60); // Minutes
    s -= m*60;
    return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s); //zero padding on minutes and seconds
}
$( function() {
  console.log({{ activeminutesmin }}, {{ activeminutesmax}}, 'active range');
  $( "#slider-timerange" ).slider({
    range: true,
    min: 0,
    max: {{ maxminutes|times60 }},
    step: 1,
    values: [ {{ activeminutesmin|times60 }}, {{ activeminutesmax|times60 }} ],
    slide: function( event, ui ) {
      $( "#amount" ).val(secondsToHMS(ui.values[ 0 ]) + " - " + secondsToHMS(ui.values[ 1 ]) );
      $("#id_activeminutesmin").val(ui.values[0]/60);
      $("#id_activeminutesmax").val(ui.values[1]/60);
    }
  });
  $( "#amount" ).val(secondsToHMS($( "#slider-timerange" ).slider( "values", 0 )) +
    " min - " + secondsToHMS($( "#slider-timerange" ).slider( "values", 1 )));
} );
</script>
{% endblock %}

{% block main %}

<script src="https://cdn.pydata.org/bokeh/release/bokeh-2.2.3.min.js"></script>

<script async="true" type="text/javascript">
  Bokeh.set_log_level("info");
</script>

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

<h1>In Stroke Metrics</h1>
<ul class="main-content">
  <li class="grid_4" >
    {% if user.rower|is_basic %}

    <p>
      This is a preview of the page with advanced functionality for Pro users.
      See <a href="/rowers/about/">the About page</a> for more information
      and to sign up for Pro Membership
    </p>
    {% endif %}
    <form id="instrokeform" enctype="multipart/form-data" action="" method="post">
    {% csrf_token %}
    <table>
      {{ form.as_table }}
    </table>
    <div id="slider-range"></div>
    <p>
      <label for="amountspm">Active Range:</label>
      <input type="text" id="amountspm" readonly style="border:0; color:#1c75bc; font-weight:bold;">
    </p>
    <div id="slider-timerange"></div>
    <p>
      <label for="amount">Active Range:</label>
      <input type="text" id="amount" readonly style="border:0; color:#1c75bc; font-weight:bold;">
    </p>
    <div class="buttoncontainer">
      <input name='_form' class="button" type="submit" value="Submit">
      <input name='_save' class="button" type="submit" value="Save">
      <input name='_save_as_new' class="button" type="submit" value="Save as New">
      <p>
        With the Save buttons, you can save your analysis for future use and to compare
        multiple analyses to each other. You can find the saved analyses under the Analysis
        tab (<a href="/rowers/analysis/instrokeanalysis/">in-stroke analysis</a>).
      </p>
    </div>
    </form>
    <p>
      <a href="/rowers/workout/{{ workout.id|encode }}/instroke/interactive/{{ metric }}/{{ spm_min }}/{{ spm_max }}/{{ activeminutesmin }}/{{ activeminutesmax }}/">Download data</a>
    </p>
  </li>
  <li class="grid_4">
    <div id="id_chart" class="flexplot">
      {{ the_div|safe }}
    </div>
  </li>
  <li class="grid_4">
    <div id="dd" class="flexplot">
      {{ dd|safe }}
    </div>
  </li>
</ul>


{% endblock %}

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