{% extends 'Front/Render/Modal/layout.html.twig' %}

{% set modalClass = 'availability' %}
{% set headerClass = 'bg-tangerine' %}
{% set bodyClass = '' %}
{% set footerClass = 'no-padding' %}

{% form_theme form with ['Front/Form/fields.html.twig'] %}

{% block header %}
    <h2>Sélectionnez trois dates d'intervention à proposer</h2>
{% endblock %}

{% block body %}
    <style>
        .form-group{
            margin-bottom: 0;
        }
    </style>
    {{ form_start(form) }}
        <div class="form-group row">
            <label class="col-form-label col-md-4 required text-bold" id="appbundle_merITDLC_firstDate">{{ 'form.link.firstDate.label'|trans({}, 'form') }}</label>
            <div class="col-md-8">
                {{ form_widget(form.firstDate) }}
            </div>
        </div>
        <div class="form-group row" style="margin-bottom: 3rem">
            {{ form_label(form.firstDateStartTime) }}
            <div class="col-md-2">
                {{ form_widget(form.firstDateStartTime) }}
            </div>
            {{ form_label(form.firstDateEndTime) }}
            <div class="col-md-2">
                {{ form_widget(form.firstDateEndTime) }}
            </div>
        </div>
    
        <div class="form-group row">
            <label class="col-form-label col-md-4 required text-bold" id="appbundle_merITDLC_secondDate">{{ 'form.link.secondDate.label'|trans({}, 'form') }}</label>
            <div class="col-md-8">
                {{ form_widget(form.secondDate) }}
            </div>
        </div>
        <div class="form-group row" style="margin-bottom: 3rem">
            {{ form_label(form.secondDateStartTime) }}
            <div class="col-md-2">
                {{ form_widget(form.secondDateStartTime) }}
            </div>
            {{ form_label(form.secondDateEndTime) }}
            <div class="col-md-2">
                {{ form_widget(form.secondDateEndTime) }}
            </div>
        </div>

        <div class="form-group row">
            <label class="col-form-label col-md-4 required text-bold" id="appbundle_merITDLC_thirdDate">{{ 'form.link.thirdDate.label'|trans({}, 'form') }}</label>
            <div class="col-md-8">
                {{ form_widget(form.thirdDate) }}
            </div>
        </div>
        <div class="form-group row" style="margin-bottom: 3rem">
            {{ form_label(form.thirdDateStartTime) }}
            <div class="col-md-2">
                {{ form_widget(form.thirdDateStartTime) }}
            </div>
            {{ form_label(form.thirdDateEndTime) }}
            <div class="col-md-2">
                {{ form_widget(form.thirdDateEndTime) }}
            </div>
        </div>
    {{ form_end(form) }}

    <script src="/front/scripts/lib/moment.min.js"></script>
    <script>
        $(function() {

//            $(document).click(function(e) {
//                var ele = $(e.toElement);
//                if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length){
//                    $(".hasDatepicker").datepicker("hide");
//                }
//            });

            $('.mer-date').on('keyup', function() {
                var date = $(this).val();
                var isError = false;
//                console.log( $(this).val());

                $(this).removeAttr('style');

                if (date !== "" && date.length != 10) {
                    isError = true
                } else if (date != "") {
                    var dateParsed = moment($(this).val(), "YYYY-MM-DD");
//
//                    console.log(dateParsed.add(30, 'd'));
//                    console.log(moment().add(30, 'd'));
//
//                    console.log($(this).val());
//                    console.log(dateParsed);

                    if (dateParsed.isValid() === false || dateParsed.isBefore(moment().add(30, 'd'), 'day')) {
//                        console.log(dateParsed);
                        isError = true
                    }
                }

                if (isError) {
                    $(this).css('border', "2px solid #ec7979");
                }

            });

            var $firstDate = $('#appbundle_merITDLC_firstDate');
//           $('input.date').datepicker({
//                dateFormat: 'dd/mm/yy',
//                minDate: 30,
//                beforeShow: function (e, input) {
//                    if(input.id != $firstDate.attr('id')) {
//                        $firstDate.prop('disabled', true);
//                    }
//                },
//                onSelect: function () {
//                    $(this).focus();
//                    $firstDate.prop('disabled', false);
//                },
//                onClose: function () {
//                    $firstDate.prop('disabled', false);
//                }
//            });

            $('form[name=appbundle_merITDLC]').on('submit', function(event) {
                event.preventDefault();
                var $form = $(this);
                $('.form-error-message').remove();

                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method'),
                    data: $form.serialize(),
                    success: function(reponse) {
                        if (typeof reponse.message != "undefined" && reponse.message == "Invalid form") {
                            $.each(reponse.data, function(input, messages) {
                                $.each(messages, function(i, message) {
                                    $('#appbundle_merITDLC_'+input).parent().append("<span class=\"form-error-message\">"+message+"</span>");
                                });
                            });
                        } else if (typeof reponse.redirection != "undefined") {
                            window.location = reponse.redirection;
                        }
                    },
                    error: function(reponse) {
                        $('#appbundle_merITDLC_submit').parent().parent().append("<span class=\"form-error-message\">Suite à une erreur technique nous n'avons pas enregistré votre sélection</span>");
                    }
                });
            });
        });
    </script>
{% endblock %}