{% if search_latitude is defined and search_latitude is not empty %}
    {% set display_marker_you = true %}
    {% set enable_bounds = true %}
    {% set center_lat = search_latitude %}
    {% set center_lng = search_longitude %}
{% elseif app.user.latitude is defined and app.user.latitude is not empty %}
    {% set display_marker_you = true %}
    {% set enable_bounds = true %}
    {% set center_lat = app.user.latitude %}
    {% set center_lng = app.user.longitude %}
{% else %}
    {% set display_marker_you = false %}
    {% set enable_bounds = false %}
    {% set center_lat = google_maps_default_lat %}
    {% set center_lng = google_maps_default_lng %}
{% endif %}

{% if operations is empty %}
    {% set enable_bounds = false %}
{% endif %}

<script>   
    markers = [
        {% if operations is not empty %}
            {% set i = 0 %}
            {% for o in operations %} 
                {% if o.details.latitude is defined and o.details.latitude is not empty %}
                    {% set i = i+1 %}
                    {
                            indexMarker: '{{ i }}',
                            id: '{{ o.details.id }}',
                            position: {lat: {{ o.details.latitude }}, lng: {{ o.details.longitude }} },
                            icon: '{{ path('map_pee_marker', { 'type' : 'green' }) }}?id={{ i }}',  // default icon
                            title: '{{ o.details.company|replace({"'":"\'"}) }}',
                            html: '',
                            target: 'ope_{{ o.details.id }}',
                            latitude: '{{ o.details.latitude }}',
                            longitude: '{{ o.details.longitude }}',
                            distance: {% if o.distance is defined %}'{{ o.distance|number_format(3) }}'{% else %}'-1'{% endif %},
                            company: '{{ o.details.company|replace({"'":"\'"}) }}',
                            address: '{{ o.details.address ~ ", " ~ o.details.zipcode ~ " " ~ o.details.city }}',
                            dateVisite: {% if o.details.dateVisite is not null %}'{{ o.details.dateVisite|date("d/m/Y") }}'{% else %}''{% endif %},
                            startTime: '{{ o.details.startTime|date("H\hi") }}',
                            endTime: '{{ o.details.endTime|date("H\hi") }}',
                    },
                {% endif %}
            {% endfor %}
        {% endif %}
    ];

    {% if display_marker_you is defined and display_marker_you == true %}
    display_marker_you = true;
    {% else %}
    display_marker_you = false;
    {% endif %}
    
    {% if enable_bounds is defined and enable_bounds == true %}
    enable_bounds = true;
    {% else %}
    enable_bounds = false;
    {% endif %}

    {% if center_lat is defined and center_lat is not empty %}
    centerMap = new google.maps.LatLng({{ center_lat }},{{ center_lng }});

    if (typeof google === 'object' && typeof google.maps === 'object' && typeof map === 'object') {
        map.setCenter(centerMap);
    }
    {% endif %}

    if (typeof google === 'object' && typeof google.maps === 'object' && typeof map === 'object') {
        mappee_setMarkers(map, markers);
    }

    mappee_max_pee_limit_remaining = {{ max_pee_applications_per_user - registeredQty }};



    $('.module-mappee .operations-list input[name="operation[]"]').each(function(){
        var ope = $(this).parents('.item');
        var btn = ope.find('button.select-ope');
        var checked = $(this).attr('checked');

        var index = ope.data('index');

        // Change Btn content
        if (checked) {
            btn.html(mappee_txt_checked);
            map_markers[index].setIcon(mappee_marker_link_active+'&id='+parseInt(markers[index].indexMarker));
            map_markers[index].setZIndex(100+parseInt(index));
        }
        else if ( parseInt(ope.data('remaining')) <= 0 ) {
            btn.html(mappee_txt_waiting_list);
            map_markers[index].setIcon(mappee_marker_link+'?id='+parseInt(markers[index].indexMarker));
            map_markers[index].setZIndex(parseInt(index));
        }
        else {
            btn.html(mappee_txt_registration);
            map_markers[index].setIcon(mappee_marker_link+'?id='+parseInt(markers[index].indexMarker));
            map_markers[index].setZIndex(parseInt(index));
        }
    });

    /**
     * CNI obligatoire popup d'informations
     */
    $("#popup-cni-information").fancybox({
        'hideOnContentClick': true
    });

    $('.cni-information').on('click', function() {
        var id = $(this).attr('id').replace('_select', '');
        if ($("#"+id+"_checkbox").prop('checked') === false) {
            $("#popup-cni-information").trigger('click');
        }
    });
</script>
{% if operations is not empty %}

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

<div style="display:none">
    <div id="cni-information">
        Il sera nécessaire de fournir une copie de pièce d'identité recto/verso et en cours de validité pour vous inscrire à cette visite. Seuls les CNI et passeports sont acceptés.
    </div>
</div>

<form id="operations-form-{{ module.id }}" action="{{ path('espace_perso_pee_add_operations') }}" method="post">
    <div class="operations-list">
        <div class="container">
            {% set nb_per_page = 9 %}
            {% set i = 0 %}
            {% for o in operations %}
                {% if o.details.latitude is defined and o.details.latitude is not empty %}
                    {% if i == 0 %}
                    <div id="page1">
                        <div class="row list-cards">
                    {% elseif i == nb_per_page %}
                    <div id="page2" class="collapse">
                        <div class="row list-cards">
                    {% endif %}
                            <div class="col-lg-6 col-xxl-4">
                                <div id="ope_{{ o.details.id }}" class="item card mappee-item bg-theme{% if o.details.id in registered|keys %} registered{% endif %}{% if o.details.dateVisite is not null and o.details.dateVisite|date("Ymd") in datesTaken %} datetaken{% endif %}" data-peoples="{{ o.details.nbPeople  }}" data-placeTaken="{{ o.placesTaken }}" data-remaining="{{ o.details.nbPeople - o.placesTaken }}"{% if o.details.zipcode is not null %} data-zipcode="{{ o.details.zipcode }}"{% endif %}{% if o.details.dateVisite is not null %} data-datevisite="{{ o.details.dateVisite|date("Ymd") }}"{% endif %}{% if o.details.category is not null %} data-category="{{ o.details.category.id }}"{% endif %}{% if o.details.academy is not null %} data-academy="{{ o.details.academy }}"{% endif %}{% if o.details.state is not null %} data-fenced="{{ o.details.state in [constant('AppBundle\\Enum\\OperationPEEState::FENCED')] ? '1' : '0' }}"{% endif %}{% if o.details.latitude is not null %} data-latitude="{{ o.details.latitude }}"{% endif %}{% if o.details.longitude is not null %} data-longitude="{{ o.details.longitude }}"{% endif %}{% if o.distance is defined %} data-distance="{{ o.distance|number_format(3) }}"{% endif %} data-index="{{ i }}">
                                    <div class="item-content">

                                        <div class="header">
                                            <p class="index"><span>{{ i + 1 }}</span></p>    
                                        
                                            {% if o.details.dateVisite is null %}
                                                <p class="date h3">{{ 'sentence.date.operationPEE.missing'|trans({}, 'sentence') }}</p>
                                            {% else %}
                                                <p class="date h3">{{ o.details.dateVisite|localizeddate('none', 'none', null, null, 'dd MMMM YYYY') }}</p>
                                            {% endif %}
                                        
                                            {% if o.details.category %}
                                                <figure class="category-pee text-center">
                                                    <div class="category-pee--image">
                                                        {% if o.details.category.logoPath is not null %}
                                                            {{ file_get_contents(vich_uploader_asset(o.details.category, 'logoFile')) }}
                                                        {% endif %}
                                                    </div>
                                                    {# <figcaption class="category-pee--caption">{{ o.details.category|truncate(20, false, '') }}</figcaption> #}
                                                </figure>
                                            {% endif %}
                                        </div>

                                        <p class="company h3">{{ o.details.company|striptags|raw }}</p>

                                        <p class="location"><em>{{ o.details.site|striptags|raw }}</em></p>
                                            
                                        {# Address #}
                                        {# <p class="address"> {{ o.details.address }}, {{ o.details.zipcode }} {{ o.details.city }}</p> #}

                                        <p class="academy">Académie de {{ o.details.academy }}</p>
                                            
                                        {% if o.distance is defined and o.distance is not empty %}
                                            {# Distance #}
                                            <p class="distance">Distance : {{ o.distance|number_format(3) }} km </p>
                                        {% endif %}

                                        <p class="learn_more text-small"><a data-fancybox data-type="ajax" href="{{ path('modal_ope_pee', {ope: o.details.id}) }}" class="link link-tangerine" rel="nofollow">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>

                                        <div class="footer text-right">
                                            {% if registeredQty < max_pee_applications_per_user %}
                                                {% if o.details.id in registered|keys and registered[o.details.id] is defined %}
                                                <div class="item-actions">
                                                {% if o.details.urlexternalregistration is empty %}
                                                    {% set cerpepStillAvailable -%}
                                                        {%- if registered[o.details.id].state not in [constant('AppBundle\\Enum\\DemandePEEState::WITHDRAWAL'), constant('AppBundle\\Enum\\DemandePEEState::REGISTERED')] -%}
                                                            {{ true }}
                                                        {%- else -%}
                                                            {{ false }}
                                                        {%- endif -%}
                                                    {%- endset %}

                                                    {# <div class="form-check">
                                                        <input id="ope_{{ o.details.id }}_cerpep" type="checkbox" name="operation_cerpep[]" value="{{ o.details.id }}"{% if o.details.id in selectedOpeCerpep %} checked {% endif %}{% if cerpepStillAvailable == false %} disabled {% endif %}/>
                                                        <label for="ope_{{ o.details.id }}_cerpep" class="form-check-label color-white" title="Cochez cette case si vous êtes un candidat du CERPEP (Centre d’Études et de Formation en Partenariat avec les Entreprises et les Professions). Vous recevrez ainsi une invitation du CEFPEP vous permettant d'obtenir un ordre de mission auprès de votre chef d'établissement ainsi qu'une attestation de formation à l'issue du stage. Cette option n'est possible que si vous n'êtes pas déjà inscrit via le PAF de votre académie.">{{ 'sentence.module.mappee.list.checkbox.cerpep.label'|trans({}, 'sentence') }}</label>
                                                    </div> #}
                                                   
                                                    <button id="ope_{{ o.details.id }}_select" type="button" class="btn btn-white btn-sm disabled {% if o.details.isIdentityMandatory is defined and o.details.isIdentityMandatory == true %} cni-information {% endif %}" disabled>
                                                        {% if constant('AppBundle\\Enum\\DemandePEEState::PREREGISTERED') == registered[o.details.id].state %}
                                                            {{ 'sentence.module.mappee.list.checkbox.operation.already_registered.preregistered'|trans({}, 'sentence')|raw }}
                                                        {% elseif constant('AppBundle\\Enum\\DemandePEEState::WAITING') == registered[o.details.id].state %}
                                                            {{ 'sentence.module.mappee.list.checkbox.operation.already_registered.waiting'|trans({}, 'sentence')|raw }}
                                                        {% elseif constant('AppBundle\\Enum\\DemandePEEState::WITHDRAWAL') == registered[o.details.id].state %}
                                                            {{ 'sentence.module.mappee.list.checkbox.operation.already_registered.withdrawal'|trans({}, 'sentence')|raw }}
                                                        {% else %}
                                                            {{ 'sentence.module.mappee.list.checkbox.operation.already_registered.registered'|trans({}, 'sentence')|raw }}
                                                        {% endif %}
                                                    </button>
                                                    {% else %}
                                                            
                                                            <a href="{{ o.details.urlexternalregistration }}" target="_blank" class="btn btn-white btn-sm select-ope">{{ 'sentence.module.mappee.list.checkbox.operation.label'|trans({}, 'sentence')|raw }}</a>
                                                            
                                                     {% endif %}
                                                </div>
                                                {% elseif o.details.dateVisite is not null and o.details.dateVisite|date("Ymd") in datesTaken %}
                                                    {# <div class="form-check">
                                                        <input id="ope_{{ o.details.id }}_cerpep" type="checkbox" name="operation_cerpep[]" value="{{ o.details.id }}"{% if o.details.id in selectedOpeCerpep %} checked {% endif %}/>
                                                        <label for="ope_{{ o.details.id }}_cerpep" class="form-check-label color-white" title="Cochez cette case si vous êtes un candidat du CEFPEP (Centre d’Études et de Formation en Partenariat avec les Entreprises et les Professions). Vous recevrez ainsi une invitation du CERPEP vous permettant d'obtenir un ordre de mission auprès de votre chef d'établissement ainsi qu'une attestation de formation à l'issue du stage. Cette option n'est possible que si vous n'êtes pas déjà inscrit via le PAF de votre académie.">{{ 'sentence.module.mappee.list.checkbox.cerpep.label'|trans({}, 'sentence') }}</label>
                                                    </div> #}
                                                    
                                                    <div class="item-actions">
                                                        {% if o.details.urlexternalregistration is empty %}
                                                            <button id="ope_{{ o.details.id }}_select" type="button" class="btn btn-white btn-sm disabled {% if o.details.isIdentityMandatory is defined and o.details.isIdentityMandatory == true %} cni-information {% endif %}" disabled>
                                                                {{ 'sentence.module.mappee.list.checkbox.operation.date_identical'|trans({}, 'sentence')|raw }}
                                                            </button>
                                                        {% else %}
                                                            
                                                            <a href="{{ o.details.urlexternalregistration }}" target="_blank" class="btn btn-white btn-sm select-ope">{{ 'sentence.module.mappee.list.checkbox.operation.label'|trans({}, 'sentence')|raw }}</a>
                                                           
                                                        {% endif %}
                                                    </div>
                                                {% elseif o.details.state in [constant('AppBundle\\Enum\\OperationPEEState::FENCED')] %}
                                                    {# <div class="form-check">
                                                        <input id="ope_{{ o.details.id }}_cerpep" type="checkbox" name="operation_cerpep[]" value="{{ o.details.id }}"{% if o.details.id in selectedOpeCerpep %} checked {% endif %}/>
                                                        <label for="ope_{{ o.details.id }}_cerpep" class="form-check-label color-white" title="Cochez cette case si vous êtes un candidat du CERPEP (Centre d’Études et de Formation en Partenariat avec les Entreprises et les Professions). Vous recevrez ainsi une invitation du CERPEP vous permettant d'obtenir un ordre de mission auprès de votre chef d'établissement ainsi qu'une attestation de formation à l'issue du stage. Cette option n'est possible que si vous n'êtes pas déjà inscrit via le PAF de votre académie.">{{ 'sentence.module.mappee.list.checkbox.cerpep.label'|trans({}, 'sentence') }}</label>
                                                    </div> #}
                                                
                                                    <div class="item-actions">
                                                    {% if o.details.urlexternalregistration is empty %}
                                                        <button id="ope_{{ o.details.id }}_select" type="button" class="btn btn-white btn-sm disabled {% if o.details.isIdentityMandatory is defined and o.details.isIdentityMandatory == true %} cni-information {% endif %}" disabled>
                                                            {{ 'sentence.module.mappee.list.checkbox.operation.fenced'|trans({}, 'sentence')|raw }}
                                                        </button>
                                                        {% else %}
                                                            
                                                            <a href="{{ o.details.urlexternalregistration }}" target="_blank" class="btn btn-white btn-sm select-ope">{{ 'sentence.module.mappee.list.checkbox.operation.label'|trans({}, 'sentence')|raw }}</a>
                                                           
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                {% if o.details.urlexternalregistration is  empty %}
                                                    <div class="form-check">
                                                        <input id="ope_{{ o.details.id }}_cerpep" type="checkbox" name="operation_cerpep[]" value="{{ o.details.id }}"{% if o.details.id in selectedOpeCerpep %} checked {% endif %}/>
                                                        <label for="ope_{{ o.details.id }}_cerpep" class="form-check-label color-white" title="Cochez cette case si vous êtes un candidat du CEFPEP (Centre d’Études et de Formation en Partenariat avec les Entreprises et les Professions). Vous recevrez ainsi une invitation du CEFPEP vous permettant d'obtenir un ordre de mission auprès de votre chef d'établissement ainsi qu'une attestation de formation à l'issue du stage. Cette option n'est possible que si vous n'êtes pas déjà inscrit via le PAF de votre académie.">{{ 'sentence.module.mappee.list.checkbox.cerpep.label'|trans({}, 'sentence') }}</label>
                                                    </div>
                                                    {% endif %}
                                                    <div class="item-actions">
                                                        {% if o.details.urlexternalregistration is empty %}
                                                        
                                                         <input id="ope_{{ o.details.id }}_checkbox" type="checkbox" name="operation[]" value="{{ o.details.id }}" style="display: none;"{% if o.details.id in selectedOpe %} checked {% endif %}/>
                                                       
                                                        <button id="ope_{{ o.details.id }}_select" type="button" class="btn btn-white btn-sm select-ope {% if o.details.isIdentityMandatory is defined and o.details.isIdentityMandatory == true %} cni-information {% endif %}">
                                                            {% if o.details.nbPeople - o.placesTaken <= 0 %}
                                                                {{ 'sentence.module.mappee.list.checkbox.operation.waiting_list'|trans({}, 'sentence')|raw }}
                                                            {% else %}
                                                                {{ 'sentence.module.mappee.list.checkbox.operation.label'|trans({}, 'sentence')|raw }}
                                                            {% endif %}
                                                        </button>
                                                        
                                                        {% else %}
                                                           
                                                            <a href="{{ o.details.urlexternalregistration }}" target="_blank" class="btn btn-white btn-sm select-ope">{{ 'sentence.module.mappee.list.checkbox.operation.label'|trans({}, 'sentence')|raw }}</a>
                                                           
                                                        {% endif %}
                                                    </div>
                                                
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        {% if i == (nb_per_page - 1) %}
                            </div>
                            {% if loop.length > nb_per_page %}
                            <p class="text-center operations-list-navigation">
                                <a class="btn btn-theme btn-lg operations-list-next-page" data-toggle="collapse" href="#page2" role="button" aria-expanded="false" aria-controls="page2">{{ 'sentence.module.mappee.action.navigation.next'|trans({}, 'sentence') }}</a>
                            </p>
                            {% endif %}
                        </div>
                        {% elseif i == (loop.length - 1) %}
                            </div>
                        </div>
                        {% endif %}
                    {% set i = i+1 %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="text-center pa">
        <div class="container">
            {% if registeredQty >= max_pee_applications_per_user %}
                {{ 'notice.operationPee.registration.limit.reached'|trans( { '%limit%' : max_pee_applications_per_user }, 'notice')|raw }}  
            {% else %}
                {#% if app.user is not null %#}
                        <p>{{ 'sentence.module.mappee.notice.registration.limit.operations'|trans( { '%limit_max%' : max_pee_applications_per_user }, 'sentence')|raw }}{% if app.user is not null %}{{ 'sentence.module.mappee.notice.registration.limit.operations_remaining'|trans( { '%limit_remaining%' : '<strong>' ~ (max_pee_applications_per_user - registeredQty) ~ '</strong>' }, 'sentence')|raw }}{% endif %}</p>
                        <p>{{ 'sentence.module.mappee.notice.registration.limit.same_day'|trans( {}, 'sentence')|raw }}</p>
                {#% endif %#}

                <p><strong>{{ 'sentence.module.mappee.action.sentence'|trans( { '%text_btn%' : ('sentence.module.mappee.action.submit'|trans({}, 'sentence')) }, 'sentence') }}</strong></p>
                <br/>
                <button class="btn btn-theme btn-lg submit-operations" type="submit">{{ 'sentence.module.mappee.action.submit'|trans({}, 'sentence') }}</button>
            {% endif %}
        </div>
    </div>
</form>
{% else %}
<div class="container">
    <p class="text-center">
        {{ 'sentence.module.mappee.list.empty'|trans({}, 'sentence')|raw }}
    </p>
</div>
{% endif %}