{% extends 'base.html.twig' %}

{% block title %}{{ 'Edit plan actions levels time'|trans  }}{% endblock %}

{% block body %}
<style>

    .md-form .form-control.is-invalid, .was-validated .md-form .form-control:invalid {
        padding-right: 0;
    }

    .md-form .form-control.is-invalid, .md-form .form-control.is-valid {
        background-position: center right!important;
    }

    .md-form .form-control.is-invalid {
        border-color: #f44336;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
        background-repeat: no-repeat;
        color:#f44336;
    }

</style>
{% include 'plan/edit_tab_list.html.twig'  with {'plan': plan_rowid, 'section': 'actions_levels_time'} %}
<div class="tab-content card pt-5">
    <div class="tab-pane fade show active">

    {% for flashMessage in app.session.flashbag.get('alert-danger') %}
        <div class="alert alert-danger" role="alert">{{ flashMessage|trans }}</div>
    {% endfor %}
    {{ form_start(form, {method: 'POST', action: path( "edit_actions_levels_time", {"plan_rowid" : plan_rowid}), 'attr': {'class': 'md-form'}}) }}

    {% for level in levels %}
          <div>
            <h5>{{ level.getName() }}</h5>
            <div class="md-form">
                {{ form_widget(form[level.getcode()~"_timing_from"], {'attr': {'class': 'form-control datepicker timinginput timingfrom'}}) }}
                {{ form_label(form[level.getcode()~"_timing_from"]) }}
                <div class="invalid-feedback" id="{{level.getcode()}}-invalid-feedback-from">
                    {{ form_errors(form[level.getcode()~"_timing_from"]) }}
                </div>
            </div>
            <div class="md-form">
                {{ form_widget(form[level.getcode()~"_timing_to"], {'attr': {'class': 'form-control datepicker timinginput timingto'}}) }}
                {{ form_label(form[level.getcode()~"_timing_to"]) }}
                <div class="invalid-feedback" id="{{level.getcode()}}-invalid-feedback-to">
                    {{ form_errors(form[level.getcode()~"_timing_to"]) }}
                </div>
            </div>
        </div>
    {% endfor %}

    <div class="row">
        <div class="md-form col-sm">
            {{ form_widget(form.cancel, {'attr': {'class': 'btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect cancel'}}) }}
        </div>

        <div class="md-form col-sm">
            {{ form_widget(form.save, {'attr': {'class': 'btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect', type:"submit"}}) }}
        </div>
    </div>

    {{ form_end(form) }}

        </div>
</div>




{% endblock %}

{% block javascripts %}
    {{ parent() }}
<script>
    var timing_error = {};
    {% set levels_array = [] %}
    {% for level in levels %}
        {% set level_code = level.getcode() %}
        
        timing_error.{{level_code}} = 0;
        $("#plan_actions_levels_time_{{level_code}}_timing_from").change(function () {
            var {{level_code}}_timing_from_input = $("#plan_actions_levels_time_{{level_code}}_timing_from");
            var {{level_code}}_timing_to_input = $("#plan_actions_levels_time_{{level_code}}_timing_to");
            var {{level_code}}_timing_to_val = $("#plan_actions_levels_time_{{level_code}}_timing_to").val();
            var min_date_{{level_code}} = new Date({{level_code}}_timing_from_input.val());
            min_date_{{level_code}}.setDate(min_date_{{level_code}}.getDate() + 1);
            {{level_code}}_timing_to_input.pickadate('picker').set('min', min_date_{{level_code}});
            var {{level_code}}_timing_to_value = new Date({{level_code}}_timing_to_input.val());
            var {{level_code}}_timing_from_value = new Date({{level_code}}_timing_from_input.val());
            {{level_code}}_timing_to_input.removeClass('is-invalid');
            $("#{{level.getcode()}}-invalid-feedback-to").html('');
            if ({{level_code}}_timing_to_value <= {{level_code}}_timing_from_value) {
                {{level_code}}_timing_to_input.addClass('is-invalid');
                $("#{{level.getcode()}}-invalid-feedback-to").html('Invalid date range selected');
                timing_error.{{level_code}} = 1;
            } 
        });

        $("#plan_actions_levels_time_{{level_code}}_timing_to").change(function () {
            var {{level_code}}_timing_to_input = $("#plan_actions_levels_time_{{level_code}}_timing_to");
            {{level_code}}_timing_to_input.removeClass('is-invalid');
            $("#{{level.getcode()}}-invalid-feedback-to").html('');
            timing_error.{{level_code}} = 0;
        });

        {% if loop.last %}
        $(".timinginput").change(function () {
            var dates_array = [];
            var timing_prev_value_to = '';
            var timing_prev_value_from = '';
            {% for level_label in levels_array %}
            timing_prev_value_to = $("#plan_actions_levels_time_{{level_label}}_timing_to").val();
            timing_prev_value_from = $("#plan_actions_levels_time_{{level_label}}_timing_from").val();
            if (timing_prev_value_to != undefined && timing_prev_value_to != ''){
                dates_array.push(new Date(timing_prev_value_to));
            }
            if (timing_prev_value_from != undefined && timing_prev_value_from != ''){
                dates_array.push(new Date(timing_prev_value_from));
            }
            {% endfor %}
            var max_date = new Date(Math.max.apply(null, dates_array));
            max_date.setDate(max_date.getDate() + 1);

            var timing_to_input = $("#plan_actions_levels_time_{{level_code}}_timing_to");
            var timing_from_input = $("#plan_actions_levels_time_{{level_code}}_timing_from");
            var timing_to_date = new Date(timing_to_input.val());
            var timing_from_date = new Date(timing_from_input.val());

            timing_to_input.pickadate('picker').set('min', max_date);
            timing_from_input.pickadate('picker').set('min', max_date);
            timing_to_input.removeClass('is-invalid');
            timing_from_input.removeClass('is-invalid');

            $("#{{level_code}}-invalid-feedback-from, #{{level_code}}-invalid-feedback-to").html('');
            timing_error.{{level_code}} = 0;

            if (timing_from_date >= max_date) {
                var new_tt = new Date(timing_from_input.val());
                timing_to_input.pickadate('picker').set('min', new Date(new_tt.setDate(new_tt.getDate() + 1)));           
            }

            if (timing_from_date < max_date) {
                timing_from_input.addClass('is-invalid');
                $("#{{level_code}}-invalid-feedback-from").html('Invalid date range selected');
                timing_error.{{level_code}} = 1;
            }

            if (timing_to_date < max_date || timing_to_date <= timing_from_date) {
                timing_to_input.addClass('is-invalid');
                $("#{{level_code}}-invalid-feedback-to").html('Invalid date range selected');
                timing_error.{{level_code}} = 1;
            }
        });
        {% endif %}
        {% set levels_array = levels_array|merge([level.getcode()]) %}
    {% endfor %}
    $(document).on('click', 'form button[type=submit]', function(e) {
        var isValid = 1;
        var error_msg = '';

        for (var key in timing_error) {
            if (timing_error.hasOwnProperty(key)) {
                if (timing_error[key] == 1) {
                    isValid = 0;
                     error_msg += 'Invalid date range selected on '+key+'<br>';
                }
            }
        }

        $("form :input").each(function(){
            var input = $(this);
            if (input.hasClass('datepicker') && (input.val() == undefined || input.val() == '')) {
                isValid = 0;
                error_msg = 'error_msg_empty_date_input<br>';
            }
        });
        
        if (isValid == 0) {
            e.preventDefault();
            $("#modal-error-title").html('{{'error_data'|trans}}');
            $("#modal-error-content").html(error_msg);
            $("#alert_form_notification").modal();
        }
    });
</script>
    
{% endblock %}