<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Cartographie google map v3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    {% block stylesheets %}
        {% include 'AyalineEzCarteInteractiveBundle::page_head_style.html.twig' %}
    {% endblock %}
    {% block javascripts %}
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        {% include 'AyalineEzCarteInteractiveBundle::page_head_script.html.twig' %}

        <script>
            var streetViewMarker=false;
            var cartoMarkers = new Array();
            var searchCartoMarkers = new Array();
            var searchProximiteCartoMarkers = new Array();
            var searchProximiteCartoCircle = null;
            var geoCodeMarkers = new Array();
            var valiseMarkers = new Array();
            var detailMarker = false;
            var valiseRoute = new Array();
            var creerTrajetMarkers = new Array();
            var creerTrajetSelectedMode = '0';
            var directionsDisplay = new google.maps.DirectionsRenderer();
            var directionsService = new google.maps.DirectionsService();
            var directionsDisplayTrajet = new google.maps.DirectionsRenderer();
            var directionsServiceTrajet = new google.maps.DirectionsService();
            var geocoder = new google.maps.Geocoder();
            var svProximite = {{ mapSettings.proximite }}
        </script>
    {% endblock %}

</head>
<body>
<div id="global-carto">
<div id="overlay-loading"><img src="{{ asset('bundles/ayalineezcarteinteractive/images/chargement.gif') }}"/></div>
<div id="google-map"></div>
<div id="directions-details">
    <div class="control">
        <a href="#" title="fermer" class="puce-close"></a>
        <h2 class="directions-details-titre">Détails de l'itinéraire</h2>
        <div class="clear-both"></div>
    </div>
    <div class="directions-details-content"></div>
</div>
<div id="detail-produit">
    <div class="control">
        <a href="#" title="fermer" class="puce-close"></a>
        <h2 class="puce-categorie"></h2>
        <div class="clear-both"></div>
    </div>
    <div class="content">
    </div>
    <div class="centre-valise">
        <a href="#" class="centre-carte"></a>
        <a href="#" class="ajout-valise"></a>
        <a href="#" class="retirer-valise cache"></a>
        <div class="clear-both"></div>
    </div>
</div>
<div id="menu-top"></div>
<div id="menu-droite">
    <ul class="menu-container">
        <li class="niv-1">
            <a id="afficher-titre" href="#" class="has-sub-menu section-menu">Afficher</a>
            <div class="sous-menu">
                <ul class="menu-container">
                    {% for section in sitSettings %}
                        <li class="niv-2">
                            <a href="#" class="has-sub-menu niv-2" style="{{ section.iconeCss }}">
                                {{ section.titre }}
                            </a>
                            <div class="sous-menu">
                                <img src="{{ asset(section.iconeImg) }}" alt=""/>
                                <div class="titre-sous-menu">
                                    <span class="text">{{ section.titre }}</span>
                                    <div class="clear-both"></div>
                                </div>
                                <ul>
                                    {% for categorie in section.children %}
                                        <li>
                                            <label for="categ_{{ categorie.id }}">
                                                <img src="{{ asset(categorie.puceCategorie) }}" />
                                            <span class="categ-name">
                                                <input class="checkbox-categorie" id="categ_{{ categorie.id }}" type="checkbox" name="categ_{{ categorie.id }}" />
                                                {{ categorie.titreCategorie }}
                                            </span>
                                                <div class="clear-both"></div>
                                            </label>

                                            {% if categorie.criteres|length  >0 %}
                                                <div id="{{ categorie.id }}_liste-criteres" class="accordion liste-criteres cache">
                                                    {% for key,critere in categorie.criteres%}
                                                        {% if  categorie.criteres[key]|length >0%}
                                                            <div id="{{ categorie.id }}_{{ key }}" class="critere accordion-group">
                                                                <div class="accordion-heading">
                                                                    <a class="critere accordion-toggle" data-toggle="collapse" data-parent="#{{ categorie.id }}_liste-criteres" href="#{{ categorie.id }}_{{ key }}liste-moda">{{ critere.nom }}</a>
                                                                </div>
                                                                <div id="{{ categorie.id }}_{{ key }}liste-moda" class="liste-moda accordion-body collapse in">
                                                                    <div class="accordion-inner">
                                                                        {% for modalite in  critere.modalites %}
                                                                            {% for keyM,modaliteItem in  modalite %}

                                                                                <label for="{{ categorie.id }}_{{ keyM }}">
                                                                                    <span class="moda-name">
                                                                                         <input class="checkbox-moda" id="{{ categorie.id }}_{{ keyM }}" type="checkbox" name="{{ categorie.id }}_{{ keyM }}" />
                                                                                        {{ modaliteItem.nom }}
                                                                                    </span>
                                                                                    <div class="clear-both"></div>
                                                                                </label>
                                                                            {% endfor %}
                                                                        {% endfor %}
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </li>
                                    {% endfor %}
                                </ul>
                                {% if section.children|length  !=0 %}
                                    <a href="#" class="effacer-marqueurs-fiches medium-font">Effacer les marqueurs</a>
                                {% endif %}
                            </div>
                        </li>

                    {% endfor %}
                </ul>
                <a href="#" class="reinitialiser-ma-recherche medium-font">Réinitialiser ma recherche</a>
            </div>
        </li>
        <li class="niv-1">
            <a id="outils-titre" href="#" class="has-sub-menu section-menu">Outils</a>
            <div class="sous-menu">
                <ul class="menu-container">
                    <li class="niv-2">
                        <a href="#" class="has-sub-menu" id="outils-geocode">Géolocaliser</a>
                        <div class="sous-menu">
                            <div class="titre-sous-menu">
                                <img src="{{ asset('bundles/ayalineezcarteinteractive/images/menu/icon_recherche_perimetre.png') }}"/>
                                <span class="text">Géolocaliser</span>
                                <div class="clear-both"></div>
                            </div>
                            <form id="geocode-form">
                                <input type="text" id="geocode-address"/>
                                <input class="submit-puce-loupe" type="submit" id="geocode-address-submit" value="" title="rechercher"/>
                            </form>
                            <a href="#" id="delete-markers-geocode" class="medium-font" title="Effacer les marqueurs"></a>
                        </div>
                    </li>
                    <li class="niv-2">
                        <a href="#" class="has-sub-menu" id="outils-creer-trajet">Créer un trajet</a>
                        <div class="sous-menu">
                            <div class="titre-sous-menu">
                                <img src="{{ asset('bundles/ayalineezcarteinteractive/images/menu/icon_trajet_personnalise.png') }}"/>
                                <span class="text">Créer un trajet</span>
                                <div class="clear-both"></div>
                            </div>
                            <form id="creer-trajet-form">
                                <div><label for="creer-trajet-mode-drive"><img src="{{ asset('bundles/ayalineezcarteinteractive/images/menu/icone_envoiture.png') }}" class="puce-20"/><input class="creer-trajet-mode" id="creer-trajet-mode-drive" type="radio" name="travel_mode" value="0" checked="checked" /> En voiture</label></div>
                                <div><label for="creer-trajet-mode-walk"><img src="{{ asset('bundles/ayalineezcarteinteractive/images/menu/icone_apied.png') }}" class="puce-20"/><input class="creer-trajet-mode" id="creer-trajet-mode-walk" type="radio" name="travel_mode" value="1"/> A pied</label></div>
                                <div class="display-table medium-font">
                                    <div class="display-table-cell"><a href="#" id="creer-trajet-reset" title="Effacer le trajet"></a></div>
                                    <div class="display-table-cell"><a href="#" id="creer-trajet-laststep" title="Annuler la dernière étape"></a></div>
                                    <div class="display-table-cell"><a href="#" id="creer-trajet-afficher-details" title="Afficher les détails"></a></div>
                                </div>

                            </form>
                        </div>
                    </li>
                    <li class="niv-2">
                        <a href="#" class="has-sub-menu" id="outils-recherche">Rechercher</a>
                        <div class="sous-menu">
                            <div class="titre-sous-menu">
                                <img src="{{ asset('bundles/ayalineezcarteinteractive/images/menu/icon_recherche_globale.png') }}"/>
                                <span class="text">Rechercher</span>
                                <div class="clear-both"></div>
                            </div>
                            <form id="outils-recherche-form">
                                <input type="text" id="outils-recherche-text" />
                                <input class="submit-puce-loupe" type="submit"  value="" title="rechercher"/>
                            </form>
                            <div class="display-table medium-font">
                                <div class="display-table-cell"><a href="#" id="outils-recherche-reset" title="Réinitialiser la recheche"></a></div>
                                <div class="display-table-cell"><a href="#" id="outils-recherche-lastsearch" title="Dernière recherche"></a></div>
                                <div class="display-table-cell"><a href="#" id="outils-recherche-showAll" title="Réafficher tout"></a></div>
                            </div>
                        </div>
                    </li>
                    <li class="niv-2">
                        <a href="#" class="has-sub-menu" id="outils-recherche-proximite">Rechercher à proximité</a>
                        <div class="sous-menu" id="sous-menu-outils-recherche-proximite">
                            <div class="titre-sous-menu">
                                <img src="{{ asset('bundles/ayalineezcarteinteractive/images/menu/icon_recherche_globale.png') }}"/>
                                <span class="text">Rechercher à proximité</span>
                                <div class="clear-both"></div>
                            </div>
                            <form id="outils-recherche-proximite-form">
                                <div type="text" class="outils-recherche-proximite-rayon-slider">
                                    <div type="text" id="outils-recherche-proximite-rayon-slider"></div>
                                </div>
                                <div class="form-inner-container">
                                    <label id="outils-recherche-proximite-rayon-label" for="outils-recherche-proximite-rayon">Rayon de recherche (Km)</label>
                                    <input type="text" id="outils-recherche-proximite-rayon" />
                                    <input class="submit-puce-loupe" type="submit"  value="" title="rechercher"/>
                                    <div class="clear-both"></div>
                                </div>
                            </form>
                            <div class="display-table medium-font">
                                <div class="display-table-cell"><a href="#" id="outils-recherche-proximite-reset" title="Réinitialiser la recheche"></a></div>
                                <div class="display-table-cell"><a href="#" id="outils-recherche-proximite-showAll" title="Réafficher tout"></a></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>
<div id="menu-bottom">
    <div id="ma-valise">
        <a id="valise-titre" href="#" class="section-menu">ma valise</a>
        <div id="valise-container">
            <div id="valise-elements"></div>
            <div id="valise-controls" class="display-table">
                <!--a id="valise-export-gpx" href="#" class="display-table-cell">
                    <span>Exporter au format GPS</span>
                </a-->
                <a id="valise-tracer-itineraire" class="display-table-cell" href="#">
                    <span class="first">Tracer l'itinéraie</span>
                    <span class="second cache">Cacher l'itinéraie</span>
                </a>
                <a id="valise-affiche-pictos" class="display-table-cell" href="#">
                    <span class="first">Afficher sur la carte</span>
                    <span class="second cache">Cacher sur la carte</span>
                </a>
                <div class="clear-both"></div>
            </div>
        </div>

    </div>
</div>
</div>
<script type="text/javascript">
    var myOptions = {
        zoom: {{ mapSettings.zoom }},
        center: new google.maps.LatLng({{ mapSettings.latitude }}, {{ mapSettings.longitude }}),
        mapTypeId:  google.maps.MapTypeId.{{ mapSettings.mapType }}
    }
    var map_container = new google.maps.Map(document.getElementById("google-map"), myOptions);
    var markerCluster = new MarkerClusterer(map_container);
    $('.collapse').collapse({
        toggle: false
    });
</script>
<div id="script-container"></div>
</body>
</html>
