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

{% set constUserTypeProf = constant('AppBundle\\Enum\\UserType::TEACHER') %}

{% block javascripts %}
    <script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_id }}"></script>
    <script>
        //<![CDATA[
        $(function() {
            function changeActif (id, actif) {
                $.ajax({
                    type: "POST",
                    url: "{{ path('preference')}}",
                    data: {
                        id: id,
                        actif: actif
                    },
                    cache: false,
                    success: function(data) {}
                });
            }

            $('.preference input[type="checkbox"]').on('change', function () {
                changeActif(
                    $(this).val(),
                    $(this).is(':checked') ? 'true' : 'false'
                );
            });
        });
        //]]>
    </script>

    {% if app.user.latitude and app.user.longitude %}
        <script>
            //<![CDATA[
                function initialize()
                {
                    var i,
                    infowindow,
                    latLng,
                    latLngBounds = new google.maps.LatLngBounds(),
                    map,
                    marker,
                    markers,
                    myOptions = {
                        center: new google.maps.LatLng({{ app.user.latitude }}, {{ app.user.longitude }}),
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: false
                    };

                    map = new google.maps.Map(document.getElementById("gmap"), myOptions);

                    // Crée les marqueurs (celui de l'utilisateur connecté et ceux des autres)
                    markers = [];
                    markers[0] = {
                        title: '{{ app.user.fullName }}',
                        info: '<h4 class="gmap-infowindow-title">{{ app.user.fullName }}</h4><p class="gmap-infowindow-content">{{ app.user.job }}{{ app.user.jobother }}<br/>{{ app.user.establishmentname }}</p>',
                        latitude: {{ app.user.latitude }},
                        longitude: {{ app.user.longitude }},
                        picture: '{{ asset("front/images/marker-grey.png") }}'
                    };

                    {% for user in others if user|first.latitude is not null and user|first.longitude is not null %}
                        {% set u = user|first %}
                        markers.push({
                            title: '{{ u.firstname }}',
                            info: '<h4 class="gmap-infowindow-title">{{ u.firstname }}</h4><p class="gmap-infowindow-content">{% if u.jobother is not empty %}{{ u.jobother }}{% else %}{% if constUserTypeProf == u.type %}{{ u.job|transconst('AppBundle\\Enum\\UserJobTeacher') }}{% else %}{{ u.job|transconst('AppBundle\\Enum\\UserJobEngineer') }}{% endif %}{% endif %}<br/>{{ u.establishmentname }}</p>',
                            latitude: {{ u.latitude }},
                            longitude: {{ u.longitude }},
                            picture: '{{ asset("front/images/marker-orange.png") }}'
                        });
                    {% endfor %}

                    infowindow = new google.maps.InfoWindow();

                    for (i = 0; i < markers.length; i++) {
                        latLng = new google.maps.LatLng(markers[i].latitude, markers[i].longitude);

                        marker = new google.maps.Marker({
                            position: latLng,
                            map: map,
                            icon: markers[i].picture,
                            title: markers[i].title
                        });

                        latLngBounds.extend(latLng);

                        (function(texte) {
                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.setContent('<div class="gmap-infowindow">'+texte+'</div>');
                                infowindow.open(this.getMap(), this);
                            });
                        })(markers[i].info);
                    }

                    map.fitBounds(latLngBounds);
                }

                $(document).ready(function(){
                    google.maps.event.addDomListener(window, 'load', initialize);
                });
            //]]>
        </script>
    {% endif %}
{% endblock %}

{% block body %}
    <div class="espace-perso">
        {% for flashMessage in app.session.flashbag.get('info') %}
            {{ flashMessage|raw }}
        {% endfor %}
            
        <h2>Mon espace personnel</h2>
        <div class="left-side">
            <div class="block block-op-ask">
                <ul class="onglets">
                    <li><a class="ongletOperation" href="">Mes opérations</a></li>
                    <li><a class="ongletDemande" href="">Mes demandes</a></li>
                </ul>
                <div class="clear"></div>
                <div class="block-operations">
                    {{
                        include('Front/User/Legacy/listeOperation.html.twig', {
                            'dPeeWaitingValidation': dPeeWaitingValidation,
                            'oItdlcPlanned': oItdlcPlanned,
                            'oItdlcDone': oItdlcDone,
                            'oPeePlanned': oPeePlanned,
                            'oPeeDone': oPeeDone,
                        }, with_context = false)
                    }}
                </div>
                <div class="block-demandes">
                    {{
                        include('Front/User/Legacy/listeDemande.html.twig', {
                            'itdlc_applications':itdlcApplications,
                            'pee_applications':peeApplications
                        }, with_context = false)
                    }}
                </div>
            </div>
            <div class="block block-ressources">
                <h3>Déposer une demande de participation</h3>
                <div class="demande-action">
                    {{ include('Front/_component/icon.html.twig', {id: 'user--user-add'}) }}
                    {% if constUserTypeProf == app.user.type %}
                        <a class="link link-theme" href="{{ path('espace_perso_pee_add') }}">Professeurs en entreprise</a>
                        <a class="link link-theme" href="{{ path('espace_perso_prof_itdlc_add') }}">Ingénieurs et techniciens dans les classes</a>
                    {% else %}
                        <a class="link link-theme" href="{{ path('espace_perso_inge_itdlc') }}">Ingénieurs et techniciens dans les classes</a>
                    {% endif %}
                </div>
            </div>
            {{ include('@FOSUser/Profile/show_content.html.twig') }}
        </div>
        
        <div class="right-side">
            <h3>Ingénieurs et techniciens dans les classes</h3>
            {{ include('Front/User/Legacy/_component/gmap.html.twig') }}
            {{ include('Front/User/Legacy/_component/listeOtherType.html.twig', {others:others}) }}
        </div>
    </div>
{% endblock %}