{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-6">
        <div class="card">
            <div class="card-header">
                <h4>Add chrono details :  {{ chrono.score }} - {{ chrono.routine.short_label }} on the {{ chrono.date | date:"d N Y" }}</h4>
            </div>
            <div class="card-body">
                <ol>
                    {% for jump in jump_list %}
                    <li>
                        <div class="form-group row pb-0 mb-0">
                            <label class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-form-label text-right mb-0 pb-0">&nbsp;</label>
                            <div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 pt-2 text-danger pb-0">
                                {{ jump.value }}
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                    <li id="li_add_score">
                        <div class="form-group row mb-0">
                            <label class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-form-label text-right">&nbsp;</label>
                            <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                <input type="number" min="1" max="{% if score_type %}2500{% else %}250{% endif %}" step="1" name="jump_score" placeholder="{% if score_type %}xxxx{% else %}xxx{% endif %}" class="form-control" id="jump_score">
                            </div>
                            <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"><button type="button" class="btn btn-warning btn-sm" id="plus_button">+</button></div>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="card-footer pt-0">
                <a href="{% url 'jump_chrono_details' chrono.id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fal fa-chart-line"></i>
                    </button>
                </a>
                &nbsp;&nbsp;&nbsp;
                <a href="{% url 'chrono_list_for_gymnast' chrono.gymnast.id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning mr-2">
                        <i class="fal fa-stopwatch"></i>
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript" >
    $(document).ready(function() {
        var number_of_jump = {{ number_of_jump }};
        var score_type = {{ score_type }};
        $('#jump_score').focus();

        function send_score_to_database(score)
        {
            var jump_value = score / 100;
            if(score_type && score.length >= 4)   // tof
                var jump_value = jump_value / 10;

            $.ajax({
                url: "{% url 'add_jump_chrono_value' %}",
                method: "POST",
                data: {
                    chrono_id: {{ chrono.id }},
                    order: number_of_jump + 1,
                    value: jump_value,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            }).done(function() {
                insert_entered_value(jump_value);
                number_of_jump = number_of_jump + 1;
            });
        }

        function check_number_of_jump()
        {
            if(number_of_jump >= 10)
                $('#li_add_score').hide();
            else
                $('#li_add_score').show();
        }

        function insert_entered_value(jump_score)
        {
            $('#minusButton').remove();
            $('ol li:last-child').before('<li><div class="form-group row mb-0"><label class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-form-label text-right mb-0">&nbsp;</label><div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 pt-2">' + jump_score + '</div><div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"><button type="button" class="btn btn-warning btn-sm" id="minus_button">-</button></div></div></li>');
            $('#jump_score').val('').focus();
            check_number_of_jump();
        }

        $('#jump_score').keyup(function(){
            var score = $('#jump_score').val();
            if((score_type && score.length >= 4) || (!score_type && score.length >= 3))
                send_score_to_database(score);
        });

        $('body').on('click', '#minus_button', function(event){
            $.ajax({
                url: "{% url 'remove_jump_chrono_value' %}",
                method: "POST",
                data: {
                    chrono_id: {{ chrono.id }},
                    order: number_of_jump,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            }).done(function() {
                $('ol li:last-child').prev().remove();
                number_of_jump = number_of_jump - 1;
            });
        });

        $('#plus_button').click(function(){
            send_score_to_database($('#jump_score').val());
        });

        check_number_of_jump();
    });
</script>
{% endblock %}