{% extends "base.html.twig" %}
  
{% block localstyle %}
    td {
        padding:5px !important;
    }
{% endblock %}

{% block body %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="update" %}
    Modification TIMER
    {% elseif mode=="submit" %}
    Création TIMER
    {% endif %}
    </h1>

    
    {{ form_widget(form.submit) }} 
    
    <a class="btn btn-secondary" href={{ path('app_timer') }}>Annuler</a>
    
    {% if mode=="update" %}
    
    <a  href="{{ path('app_timer_delete',{'id':timer.id}) }}"
        class="btn btn-danger float-right"
        data-method="delete"
        data-confirm="Êtes-vous sûr de vouloir supprimer cet entregistrement ?">
          Supprimer
    </a>
    {% endif %}

    <br><br>

    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}
    <div class="card">
        <div class="card-header">
            <i class="fa fa-pencil-alt fa-fw"></i> Informations
        </div>

        <div class="card-body">
            {{ form_row(form.task) }}
            {{ form_row(form.description) }}
            {{ form_row(form.activepenalty) }}
            {{ form_row(form.additionalhour) }}
            {{ form_row(form.start) }}
            {{ form_row(form.end) }}
            {{ form_row(form.duration) }}
        </div>
    </div>
{{ form_end(form) }}
   

{% endblock %}

{% block localjavascript %}
$("#timer_task").addClass("select2entity");
/*
 * Pads this string with another string on the left until the resulting string
 * has specified length. If the padding string has more than one character, the
 * resulting string may be longer than desired (the padding string is not
 * truncated and it is only prepended as a whole). Bad API, I know, but it's
 * good enough for me.
 */
String.prototype.pad = function(length, padding) {
  var result = this;
  while (result.length < length) {
    result = padding + result;
  }
  return result;
}
/* Some time constants. */
var MILISECONDS_IN_SECOND = 1000;
var MILISECONDS_IN_MINUTE = 60 * MILISECONDS_IN_SECOND;
var MINUTES_IN_HOUR       = 60;

/* Formats the time in the H:MM format. */
function formatTime(time) {
  var timeInMinutes = time / MILISECONDS_IN_MINUTE;
  var hours = Math.floor(timeInMinutes / MINUTES_IN_HOUR);
  var minutes = Math.floor(timeInMinutes - hours * MINUTES_IN_HOUR);
  return String(hours).pad(2, "0") + ":" + String(minutes).pad(2, "0");
}

$("#timer_start_time,#timer_end_time").on('input',function(){
    console.log($("#timer_start_date").val() +"T"+$("#timer_start_time").val()+":00Z")
     console.log($("#timer_end_date").val()+"T"+$("#timer_end_time").val()+":00Z")
    var start = Date.parse($("#timer_start_date").val() +"T"+$("#timer_start_time").val()+":00Z");
    var end = Date.parse($("#timer_end_date").val()+"T"+$("#timer_end_time").val()+":00Z");
    var diff = end - start;
    $("#timer_duration").val(formatTime(diff))
})

{% endblock %}