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

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

{% block init_javascripts %}
    <!-- Google Maps JavaScript API v3 key -->
    <script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_id }}"></script>
    <script>
        var geocoder = new google.maps.Geocoder();
        {#% if constant('AppBundle\\Enum\\UserType::TEACHER') == app.user.type %#}
        var fieldPrefix = '#prof_demande_pee_step{{ step }}_';
        {#% else %}
        var fieldPrefix = '#inge_demande_pee_step{{ step }}_';
        {% endif %#}
    </script>
{% endblock %}

{% block javascripts %}
    <script src="/front/scripts/lib/moment.min.js"></script>

    <script>
        //<![CDATA[
        var dateMinCniMandatory = "";
        $(function() {

            if ($('[name=prof_demande_pee_step3]').html() != undefined) {
                dateMinCniMandatory = {% if dateMinCniMandatory is defined and dateMinCniMandatory is not empty %} "{{ dateMinCniMandatory|date('d/m/Y') }}" {% else %} "" {% endif %};

                {#{% if dateMinCniMandatory is defined and dateMinCniMandatory is not empty and dateInvalide == true %}#}
                    {#$('#prof_demande_pee_step3_identityCardValidity').parent().append("<p id='error-minCNI'>Pour les téléchargements carte nationale d'identité, si vous êtes éligible à l'allongement de 5 ans de sa validité, merci d'indiquer la date prenant en compte cette prolongation</p>");#}
                     {#$('#prof_demande_pee_step3_identityCardValidity').css('border', "2px solid #ec7979");#}
                {#{% endif %}#}

                if (dateMinCniMandatory != "") {
                    $("#popup-cni-obligatoire").fancybox({
                        'hideOnContentClick': true
                    });

                    $('[name=prof_demande_pee_step3]').on('submit', function() {
                        verifDate("#prof_demande_pee_step3_identityCardValidity", true);
                        console.log(isError);

                        if (
                            ($('#display-prof_demande_pee_step3_file').prop('checked') === true && $('#prof_demande_pee_step3_file').val() === "") ||
                            ($('#display-prof_demande_pee_step3_fileDocument').prop('checked') === true && $('#prof_demande_pee_step3_fileDocument').val() === "") ||
                            ($('#display-prof_demande_pee_step3_file').html() === undefined && $('#prof_demande_pee_step3_file').val() === "") ||
                            ($('#display-prof_demande_pee_step3_fileDocument').html() === undefined && $('#prof_demande_pee_step3_fileDocument').val() === "") ||
                            (isError === true)
                        ) {

                            $("#popup-cni-obligatoire").trigger('click');

                            return false;
                        }
                    });
                }
            }

            $('#prof_demande_pee_step3_identityCardValidity').on('change focus keypress keyup blur', function() {
                verifDate("#prof_demande_pee_step3_identityCardValidity", false);
            });

            var alertMessageOperationsPEENonSauvegardees,
                alertOuverte = false, // Indique si une fenêtre de type alert() ou confirm() est ouverte. Doit être renseigné à chaque appel de ces méthodes !
                animationDuration = 400,
                elementsToggleIds = [];

            $('.toggle').each(function (index) {
                elementsToggleIds.push($(this).attr('id'));
            });

            /**
             * Automatically check the operation subscription checkbox when the CERPEP checkbox option is checked
             */
            $('.ope-cerpep').on('change', function() {
                var checkboxOpe,
                    checked = $(this).prop('checked'),
                    opeId = $(this).val();

                checkboxOpe = $('#ope-' + opeId);

                if (checked && 1 === checkboxOpe.length) {
                    checkboxOpe.prop('checked', checked);
                }
            });

            /**
             * Automatically uncheck the CERPEP checkbox option when the operation subscription checkbox is unchecked
             */
            $('.ope').on('change', function() {
                var checkboxCerpep,
                    checked = $(this).prop('checked'),
                    opeId = $(this).val();

                checkboxCerpep = $('#ope-cerpep-' + opeId);

                if (!checked && 1 === checkboxCerpep.length) {
                    checkboxCerpep.prop('checked', checked);
                }
            });

            /**
             *
             */
            $('.contenerInputFile-extras').remove();

            /**
             * Pour chaque pièce d'identité existante, on masque le champ permettant d'uploader un fichier
             * et on ajoute un bouton permettant de la supprimer.
             */
            $('.widget-upload-actions').each(function () {
                // Si le bouton "Voir" existe
                if ($(this).children('.widget-upload-view').length == 1) {
                    // Ajout du bouton supprimer
                    $(this).append('<li class="widget-upload-delete"><a href="#">Supprimer</a></li>');
                    // Masquage du widget d'upload
                    $(this).children('.widget-upload-add').hide();
                }
            });

            /**
             *
             */
            $('.academychoice').on('change', function () {
                var academyselected = $(this).val();

                $.ajax({
                    type: "POST",
                    url: $(this).attr('data-url'),
                    data: 'academy_name=' + academyselected,
                    cache: false,
                    success: function (data) {
                        $('#listpee').html(data);
                    }
                });
            });

            /**
             *
             */
            $('.widget-upload-delete').on('click', function(e) {
                e.preventDefault();

                var confirmReponse,
                    jBtnDelete = $(this),
                    identityCardNum,
                    label = jBtnDelete.parents('.widget-upload').children('.title').html();

                alertOuverte = true;
                confirmReponse = window.confirm("Le " + label.toLowerCase() + " de la pièce d'identité va être supprimé.");
                alertOuverte = false;

                if (confirmReponse) {
                    identityCardNum = jBtnDelete.parent().find('.widget-upload-add  input[type="file"]').attr('data-card-number');

                    $.ajax({
                        type: 'POST',
                        url: "{{ path('espace_perso_delete_identity')}}",
                        data: 'card_number=' + identityCardNum,
                        cache: false,
                        success: function (data) {
                            // Suppression des boutons de suppression après sa disparition
                            jBtnDelete.prevAll('.widget-upload-view').fadeOut(animationDuration, function () {
                                $(this).remove();
                            });

                            // Suppression du bouton de visualition après sa disparition, et apparition du widget d'upload
                            jBtnDelete.fadeOut(animationDuration, function () {
                                jBtnDelete.prevAll('.widget-upload-add').fadeIn(animationDuration);
                                jBtnDelete.remove();
                            });
                        }
                    });
                }
            });

            /********************************************************************************************************************************
             * Popup informant l'utilisateur que des opérations PEE sont cochées mais que sa demande n'a pas été enregistrée.
             * Cette solution vise à miniser les oublis d'enregistrement de la demande après avoir que l'utilisateur a coché des opérations.
             * La popup s'affiche lorsque l'utilisateur cherche à quitter la page :
             * - en cherchant à ouvrir un nouvel onglet par exemple, ou en basculant vers une nouvelle fenêtre de son OS ;
             * - en cliquant sur un lien de la page
             *******************************************************************************************************************************/

            // Initialisation du message de la popup
            alertMessageOperationsPEENonSauvegardees = "Il semble que vous avez oublié d'enregistrer votre inscription à certaines opérations Professeurs en Entreprise."
                 + "\nSi vous quittez cette page, votre inscription ne sera pas enregistrée.";

            /**
             * Affichage de la popup.
             * @param jQuery.Event e
             */
            function afficheAlertOperationsPEENonSauvegardees(e)
            {
                var confirmReponse,
                    operationsPEECochees;

                // Permet de s'assurer de ne pas ouvrir l'alert() sur l'événement blur,
                // alors que l'événement click sur un lien est encore actif
                if (!alertOuverte) {
                    operationsPEECochees = $('#listpee input[type=checkbox]:checked');

                    if (operationsPEECochees.length > 0) {
                        alertOuverte = true;
                        confirmReponse = window.confirm(alertMessageOperationsPEENonSauvegardees);
                        alertOuverte = false;

                        if (confirmReponse) {
                            // On décoche toutes les opérations PEE cochées, car l'utilisateur ne souhaite pas enregistrer sa demande
                            // Cela évite ainsi :
                            // - que l'utilisateur ai à chercher les opérations à décocher
                            // - que la popup ne soit à nouveau ouverte si l'utilisateur oublie de décocher toutes (ou une partie) des opérations
                            // Déclencher l'événement "change" permet à la case à cocher customisée de se cocher (voir le fichier we/cgenialfront/scripts/lib/custom-form-elements/custom-form-elements.js).
                            operationsPEECochees
                                .prop('checked', false)
                                .trigger('change');
                        } else {
                            e.preventDefault();
                        }
                    }
                }
            }

            // Perte du focus du document
            $(window).on('blur', function(e) {
                afficheAlertOperationsPEENonSauvegardees(e);
            });

            // Clic sur un lien de la page.
            // L'attribut href doit être absent, différent de "#" et ne pas débuter par "mailto:".
            $('a[href!="#"]').on('click', function(e) {
                if (-1 === $(this).attr('href').indexOf('mailto:')) {
                    afficheAlertOperationsPEENonSauvegardees(e);
                }
            });
        });

        var isError = false;

        function verifDate(champId, affiche) {
            var date = $(champId).val();
//                console.log( $(this).val());

            $(champId).removeAttr('style').removeClass('error');

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

                if (dateMinCniMandatory.length>0) {
                    var dateCompared = moment(dateMinCniMandatory, "DD/MM/YYYY")
                } else {
                    var dateCompared = moment();
                }

                if (dateParsed.isValid() === false || dateParsed.isSameOrBefore(dateCompared)) {
                    if ($('#error-minCNI').html() == undefined && affiche == true) {
//                        $('#prof_demande_pee_step3_identityCardValidity').parent().append("<p id='error-minCNI'>Pour les téléchargements carte nationale d'identité, si vous êtes éligible à l'allongement de 5 ans de sa validité, merci d'indiquer la date prenant en compte cette prolongation</p>");
                    }
                    isError = true
                } else {
                    $('#error-minCNI').remove();
                    isError = false;
                }
            }

            if (isError && affiche) {
                $(champId).css('border', "2px solid #ec7979").addClass('error');
            }

            //console.log(isError);

        }
        //]]>
    </script>
{% endblock %}

{% block body %}

    <a id="popup-cni-obligatoire" href="#cni-obligatoire" style="display:none"></a>

    <div style="display:none">
        <div id="cni-obligatoire">
            Il semblerait que vous n'ayez pas fourni de pièce d'identité valide. Merci d'en télécharger une qui soit en cours de validité (seuls les CNI et passeports sont acceptés).
        </div>
    </div>

    <div>
        {#% if operations %#}

            <nav class="nav nav-pills nav-justified nav-counter no-margin-bottom">
                <span class="nav-item nav-link {% if step == 1 %}active{% endif %}">{{ 'form.front.pee.fieldset.teacher.personalinfos.legend'|trans({}, 'form') }}</span>
                <span class="nav-item nav-link {% if step == 2 %}active{% endif %}">{{ 'form.front.pee.fieldset.teacher.establishment.legend'|trans({}, 'form') }}</span>
                <span class="nav-item nav-link {% if step == 3 %}active{% endif %}">{{ 'form.front.pee.fieldset.teacher.operation.legend'|trans({}, 'form') }}</span>
            </nav>
            
            <div class="module module-inview-demande-pee-form bg-alabaster pa">
            {{ form_start(form, {attr: {class: 'form-demande-pee'}}) }}
                {{ form_rest(form) }}

                {# 
                <div class="pee-infos">
                    <h3 class="title">Informations complémentaires</h3>

                    <div class="form-row form-row-half">
                        <div class="form-row-field">
                            <fieldset id="expectations">
                                <legend>{{ form_label(form.expectations) }}</legend>
                                <div class="form-field">
                                    {{ form_widget(form.expectations) }}
                                    {{ form_errors(form.expectations) }}
                                </div>
                            </fieldset>
                            <fieldset id="image-rights">
                                <legend>Droit à lʼimage</legend>
                                <p>Autorisez-vous les prises de vue de votre personne par lʼentreprise et lʼutilisation de ces photos par la fondation CGénial pour ses supports de communication (site internet et plaquettes) ?</p>
                                <div class="form-field">
                                    {{ form_row(form.photograph) }}
                                </div>
                            </fieldset>
                        </div>
                    </div>

                    <div class="form-row form-row-half">
                        <fieldset id="shoe-size">
                            <legend>{{ form_label(form.shoeSize) }}</legend>
                            <div class="form-field">
                                {{ form_widget(form.shoeSize) }}
                                {{ form_errors(form.shoeSize) }}
                            </div>
                        </fieldset>

                        <fieldset id="identity-document">
                            <legend>{{ form_label(form.sendCard) }}</legend>
                            <p>La pièce dʼidentité peut être soit votre <abbr title="Carte nationale d'identité">CNI</abbr>, soit votre passeport. Vous pouvez nous lʼenvoyer (recto et verso) par voie électronique ou par voie postale.</p>
                            <div class="form-field">
                                {{ form_widget(form.sendCard) }}
                                {{ form_errors(form.sendCard) }}
                            </div>

                            <div class="form-field toggle" id="toggle-digitale"{% if app.user.sendCard is null or app.user.sendCard == 'postale' %} style="display:none;"{% endif %}>
                                <p>Merci de nous fournir votre pièce dʼidentité au format PDF, JPG, PNG ou GIF, dans la limite de 5Mo par fichier.</p>
                                <div class="form-field widget-upload">
                                    <h4 class="title">Recto</h4>
                                    <ul class="widget-upload-actions">
                                        {% if app.user.identityCard1 is not null %}
                                            <li class="widget-upload-view">
                                                <a class="file" href="{{ url('secure_user_file', {filename:app.user.identityCard1}) }}" target="_blank" title="Ouvre un nouvel onglet">Voir</a>
                                            </li>
                                        {% endif %}
                                        <li class="widget-upload-add">
                                            {{ form_widget(form.file) }}
                                        </li>
                                    </ul>
                                    {{ form_errors(form.file) }}
                                </div>
                                <div class="form-field widget-upload">
                                    <h4 class="title">Verso</h4>
                                    <ul class="widget-upload-actions">
                                        {% if app.user.identityCard2 is not null %}
                                            <li class="widget-upload-view">
                                                <a class="file" href="{{ url('secure_user_file', {filename:app.user.identityCard2}) }}" target="_blank" title="Ouvre un nouvel onglet">Voir</a>
                                            </li>
                                        {% endif %}
                                        <li class="widget-upload-add">
                                            {{ form_widget(form.fileDocument) }}
                                        </li>
                                    </ul>
                                    {{ form_errors(form.fileDocument) }}
                                </div>
                                <p>Vous pouvez à tout moment supprimer ces fichiers.</p>
                            </div>
                            <div class="form-field toggle" id="toggle-postale"{% if app.user.sendCard is null or app.user.sendCard == 'digitale' %} style="display:none;"{% endif %}>
                                <p>Merci dʼadresser le courrier à&nbsp;:</p>
                                <address class="vcard">
                                    <span class="org">{{ cgenial_address_name_pee }}</span>
                                    <span class="adr">
                                        <span class="street-address">{{ cgenial_address_street }}</span>
                                        <span class="postal-code">{{ cgenial_address_zipcode }}</span> <span class="locality">{{ cgenial_address_city }}</span>
                                    </span>
                                </address>
                            </div>
                        </fieldset>
                    </div>
                    <div class="form-row form-row-submit">
                        <button type="submit">{{ 'action.save'|trans({}, 'action') }}</button>
                    </div>
                </div>
                #}

                {#
                <div class="pee-visites">
                    <h3 class="title">Choix des visites</h3>
                    <div class="info">
                        <p>Remarques&nbsp;:</p>
                        <ul>
                            <li>Le nombre dʼinscriptions par personne est limité à {{ max_pee_applications_per_user }}. Il vous en reste {{ max_pee_applications_per_user - registeredQty }}.</li>
                            <li>Vous ne pouvez pas vous inscrire à plusieurs visites ayant lieu le même jour.</li>
                        </ul>
                    </div>
                    <p class="filters">
                        <label for="academychoice">Académie concernée</label>
                        <select class="academychoice" data-url="{{ path('espace_perso_pee_list') }}" id="academychoice" name="academychoice">
                            <option value="">Toutes</option>
                            {% for academy in academies %}
                                <option value="{{ academy }}">{{ academy }}</option>
                            {% endfor %}
                        </select>
                    </p>
                    <div id="listpee">
                        {{
                            include('Front/Demande/Legacy/_component/listPee.html.twig', {
                                academyName:null,
                                operations:operations,
                                registeredQty:registeredQty
                            })
                        }}
                    </div>
                </div> 
                #}

                <div class="form-group clearfix">
                    {% if step > 1 %}
                        {% set backStep = step - 1 %}
                        
                        {% set attr = {} %}
                        {% if backStep > 1 %}
                            {% set attr = attr|merge({'step':backStep}) %}
                        {% endif %}
                        {% if mode == 'edit' %}
                            {% set attr = attr|merge({'ope':ope.id}) %}
                        {% endif %}
    
                        <a href="{{ path('espace_perso_pee_' ~ mode, attr) }}" class="btn btn-theme float-left">
                        {{ 'word.back'|trans({}, 'word') }}
                        </a>
                    {% endif %}
                    <button type="submit" class="btn btn-theme float-right">{% if step >= 3 %}{{ 'form.pee.submit'|trans({}, 'form') }}{% else %}{{ 'form.pee.next'|trans({}, 'form') }}{% endif %}</button>
                </div>
            {{ form_end(form) }}
        </div>
        {#% else %}
            <p>{{ ('sentence.pee.form.operations_not_available')|trans({}, 'sentence')|raw }}</p>
        {% endif %#}
    </div>
{% endblock %}

{% block before_body %} 
    <header class="page-header bg-tundora">
        <div class="container">
            <div class="item-content">
                {# <h1>{{ ('sentence.pee.' ~ app.user.type ~ '.header.' ~ mode ~ '.title')|trans({}, 'sentence')}}</h1>
                <p>{{ ('sentence.pee.' ~ app.user.type ~ '.header.' ~ mode ~ '.introduction')|trans({ '%email%' : cgenial_mail_pee_registration}, 'sentence')|raw }}</p> #}
                <h1 class="color-theme">{{ ('sentence.pee.teacher.header.' ~ mode ~ '.title')|trans({}, 'sentence')}}</h1>
                <p>{{ ('sentence.pee.teacher.header.' ~ mode ~ '.introduction')|trans({ '%email%' : cgenial_mail_pee_registration}, 'sentence')|raw }}</p>
            </div>
        </div>
    </header>
    {{ render(controller('AppBundle:Render:module', { position:'before_body' })) }}
{% endblock %}

{% block after_body %} 
    {#{ render(controller('AppBundle:Render:module', { position:'after_body' })) }#}
{% endblock %}