{namespace ttaddr=FriendsOfTYPO3\TtAddress\ViewHelpers}
{namespace vendeemap=Wseils\Vendeemap\ViewHelpers}

<f:section name="leaflet">

    <f:render section="rendering" arguments="{_all}"/>

    <script type="text/javascript">
            var defaultIconUrl = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin.svg')}";
            var covoitIcon1Url = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-covoit-1.svg')}";
            var covoitIcon2Url = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-covoit-2.svg')}";
            var covoitIcon3Url = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-covoit-3.svg')}";
            var travauxIcon1Url = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-travaux-1.svg')}";
            var travauxIcon2Url = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-travaux-2.svg')}";
            var travauxIcon3Url = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-travaux-3.svg')}";
            var travauxIcon4Url = "{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-travaux-4.svg')}";
    </script>

    <link rel="stylesheet" href="{f:uri.resource(path:'Contrib/leaflet-core-1.4.0.css')}" />
    <script type="text/javascript" src="{f:uri.resource(path:'JavaScript/leaflet-core-1.4.0.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Js/libs/Leaflet.markercluster/dist/leaflet.markercluster.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Js/libs/Leaflet.js')}"></script>
</f:section>

<f:section name="googleMaps">
    <f:if condition="{settings.map.googleMaps.key}">
        <f:then>
            <f:render section="rendering" arguments="{_all}"/>

            <script src="https://maps.googleapis.com/maps/api/js?key={settings.map.googleMaps.key}"
                    type="text/javascript"></script>
            <script type="text/javascript" src="{f:uri.resource(path:'JavaScript/Frontend/GoogleMaps.js')}"></script>
        </f:then>
        <f:else>
            <div class="alert alert-danger">{f:translate(key:'no_google_maps_key')}</div>
        </f:else>
    </f:if>
</f:section>

<f:section name="staticGoogleMaps">
    <f:if condition="{settings.map.staticGoogleMaps.parameters.key}">
        <f:then>
            <img src="{ttaddr:staticGoogleMaps(parameters:settings.map.staticGoogleMaps.parameters,addresses:addresses)}" />
        </f:then>
        <f:else>
            <div class="alert alert-danger">{f:translate(key:'no_google_maps_key')}</div>
        </f:else>
    </f:if>
</f:section>

<f:section name="rendering">
    <f:variable name="filterCity"><f:cObject typoscriptObjectPath='lib.content.searchMapCity'/></f:variable>
    <f:variable name="filterMapCount"><f:format.number decimals="0">{f:cObject(typoscriptObjectPath:"lib.filterMapCount", data:"{demand.categories}")}</f:format.number></f:variable>
    <f:variable name="countFilter">0</f:variable>
    <f:if condition="{filterCity}">
        {f:variable(name: 'countFilter', value: '{countFilter + 1}')}
    </f:if>
    <f:if condition="{demand.categories}">
        {f:variable(name: 'countFilter', value: '{countFilter + filterMapCount}')}
    </f:if>
    <div class="btnMap">
        <div class="btnFilter">
            <button id="map-filter-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal-mapFilter" aria-label="Filtrer les points d'intérêtes" class="btn btn-white">
                <svg id="filtres" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18">
                    <path id="ico-filtre" d="M6.462,10.22a.966.966,0,0,1,.978-.852l7.163,0a.994.994,0,0,1,1.09.856.967.967,0,0,1-.978.852l-7.164,0A.994.994,0,0,1,6.462,10.22ZM2.769,5.539a.967.967,0,0,1,.979-.852l14.548,0a.994.994,0,0,1,1.089.857.966.966,0,0,1-.978.852l-14.548,0A1,1,0,0,1,2.769,5.539ZM0,.857A.966.966,0,0,1,.978,0L21.064,0a1,1,0,0,1,1.09.857.966.966,0,0,1-.979.852l-20.086,0A.994.994,0,0,1,0,.857Z" transform="translate(0.923 3.462)" fill="#3e3e3e"></path>
                </svg>
                <f:if condition="{countFilter}">
                    <span>{countFilter}</span>
                </f:if>
                Filtrer les points d'intérêts
            </button>
        </div>
        <div class="toggleView">
            <button id="showMap" type="button" aria-label="Afficher la vue carte" class="btn btn-white" disabled>
                <svg id="map" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <path id="basic_map" data-name="basic / map" d="M4.429,12.462h0L0,11V1.062L4.294,2.479,8.675,0l3.786,1.5v9.967L8.771,10,4.429,12.461ZM1.246,2.773v7.337l2.492.822V3.6ZM7.477,2.1,4.985,3.509v7.216l2.492-1.41Zm1.294-.732h0l-.048.027V8.656l2.492.988V2.335L8.771,1.367Z" transform="translate(2.769 2.769)"/>
                </svg>
                Affichage carte
            </button>
            <button id="showList" type="button" aria-label="Afficher la vue liste" class="btn btn-white">
                <svg id="listing" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <path id="edit_list_ul" data-name="edit / list_ul" d="M11.077,8.307H2.769V6.923h8.308V8.307Zm-9.693,0H0V6.923H1.384V8.307Zm9.693-3.461H2.769V3.462h8.308V4.846Zm-9.693,0H0V3.462H1.384V4.846Zm9.693-3.462H2.785V0h8.292V1.384Zm-9.693,0H0V0H1.384V1.384Z" transform="translate(3.462 4.846)"/>
                </svg>
                Affichage liste
            </button>
        </div>
        <f:if condition="{filterCity} || {demand.categories}">
            <div class="listTag">
                <f:if condition="{filterCity}">
                    <span class="facet-use">{filterCity}</span>
                </f:if>
                <f:if condition="{demand.categories}">
                    <f:cObject typoscriptObjectPath="lib.filterMapTag" data="{demand.categories}"/>
                </f:if>
            </div>
        </f:if>
    </div>
    <div class="modal fade rs_skip" role="dialog" id="modal-mapFilter" aria-labelledby="modal-mapFilter-title" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="tx-solr-search-functions">
                    <div class="header">
                        <button id="close-modal-mapFilter" title="Fermer les filtres" type="button" data-bs-toggle="modal" data-bs-target="#modal-mapFilter" aria-label="Fermer les filtres">
                            <span></span>
                            <span></span>
                        </button>
                        <p id="modal-newsFilter-title">Filtrer les points d'intérêts</p>
                        <f:link.page class="solr-ajaxified">Effacer</f:link.page>
                    </div>
                    <div id="tx-solr-faceting">
                        <div class="checkboxArea">
                            <f:if condition="{settings.thematique}">
                                <div class="accordion">
                                    <div class="accordion-item">
                                        <h4 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#facetthemmap" data-parent="#accordion-themmap-item" data-bs-toggle="collapse" data-bs-target="#facetthemmap" aria-expanded="false" aria-controls="facetthemmap">
                                                Par thématique
                                            </button>
                                        </h4>
                                    </div>
                                    <div id="facetthemmap" class="accordion-collapse collapse" data-parent="#facetthemmap">
                                        <div class="accordion-body">
                                            <div class="accordion-content">
                                                <ul role="list">
                                                    <f:cObject typoscriptObjectPath="lib.filterMapThem" data="{demand.categories}"/>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </f:if>
                            <f:if condition="{settings.cities}">
                                <div class="accordion">
                                    <div class="accordion-item">
                                        <h4 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#facetcitiesmap" data-parent="#accordion-citiesmap-item" data-bs-toggle="collapse" data-bs-target="#facetcitiesmap" aria-expanded="false" aria-controls="facetcitiesmap">
                                                Par commune
                                            </button>
                                        </h4>
                                    </div>
                                    <div id="facetcitiesmap" class="accordion-collapse collapse" data-parent="facetcitiesmap">
                                        <div class="accordion-body">
                                            <div class="accordion-content facetSelectAccordion">
                                                <select name="citiesmap" aria-label="Selectionner une commune" class="selectFacet">
                                                    <option value="">Saisir un nom de commune</option>
                                                    <f:cObject typoscriptObjectPath="lib.filterMapCities" data="{filterCity}"/>
                                                </select>
                                                <span class="selectFacetArrow"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </f:if>
                        </div>
                        <div id="btn-search-map-facet">
                            <button title="Afficher les résultats" type="button" class="btn btn-white btn-big">
                                Afficher les résultats
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="ttaddress__map" data-default-lat="{settings.map.defaultPosition.lat}"
         data-default-lng="{settings.map.defaultPosition.lng}" style="width:100%;min-height:500px;">
        <f:cObject typoscriptObjectPath="lib.legendMap"/>
    </div>
    <ul id="ttaddress__records" style="display: none">
        <f:if condition="{filterCity}">
            <f:then>
                <f:for each="{addresses}" as="address">
                    <f:if condition="{address.city} == {filterCity}">
                        <f:render section="itemMap" arguments="{_all}"/>
                    </f:if>
                </f:for>
            </f:then>
            <f:else>
                <f:for each="{addresses}" as="address">
                    <f:render section="itemMap" arguments="{_all}"/>
                </f:for>
            </f:else>
        </f:if>
    </ul>
</f:section>

<f:section name="itemMap">
    <f:if condition="{address.categories}">
        <f:for each="{address.categories}" as="categorie">
            <f:switch expression="{categorie.uid}">
                <f:case value="{settings.markers.vendespace}">
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/Vendespace/</f:variable>
                </f:case>
                <f:case value="{settings.markers.bdv}">
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/BDV/</f:variable>
                </f:case>
                <f:case value="{settings.markers.vendetheque}">
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/Vendetheque/</f:variable>
                </f:case>
                <f:case value="{settings.markers.colleges}">
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/Colleges/</f:variable>
                </f:case>
                <f:case value="{settings.markers.mdsf}">
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/MDSF/</f:variable>
                </f:case>
                <f:case value="{settings.markers.ports}">
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/Ports_points/</f:variable>
                </f:case>
                <f:case value="{settings.markers.covoit}">
                    <f:variable name="marker">covoitIcon1</f:variable>
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/Aires_covoiturage/</f:variable>
                </f:case>
                <f:case value="{settings.markers.covoitCharge}">
                    <f:variable name="marker">covoitIcon3</f:variable>
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/Point_Recharge/</f:variable>
                </f:case>
                <f:case value="{settings.markers.covoitStop}">
                    <f:variable name="marker">covoitIcon2</f:variable>
                    <f:variable name="pathImg">https://static.vendee.safetyhost.fr/carte_interactive/Point_Stop/</f:variable>
                </f:case>
                <f:case value="{settings.markers.road}">
                    <f:variable name="marker">travauxIcon4</f:variable>
                </f:case>
                <f:case value="{settings.markers.site}">
                    <f:variable name="marker">travauxIcon3</f:variable>
                </f:case>
                <f:case value="{settings.markers.close}">
                    <f:variable name="marker">travauxIcon2</f:variable>
                </f:case>
                <f:case value="{settings.markers.travaux}">
                    <f:variable name="marker">travauxIcon1</f:variable>
                </f:case>
            </f:switch>
        </f:for>
    </f:if>
    <li id="ttaddress__record-{address.uid}" data-id="{address.uid}" data-lat="{address.latitude}"
        data-lng="{address.longitude}" {f:if(condition: '{address.polygon}', then: ' data-polygon="{address.polygon}"')} data-icon="icon" data-marker="{marker}">

        <f:if condition="{address.urlimg} && {pathImg}">
            <f:then>
                <f:variable name="IfImageExist"><vendeemap:IfImageExist src='{pathImg}{address.urlimg}'/></f:variable>
                <f:if condition="{IfImageExist}">
                    <img src="{pathImg}{address.urlimg}" width="600" class="figure-img img-fluid img-thumbnail rounded" alt="" title="{address.name}"/>
                </f:if>
            </f:then>
            <f:else>
                <f:if condition="{marker} == 'travauxIcon1'">
                    <img src="{f:uri.resource(path:'EXT:vendee_map/Resources/Public/Icons/pin-map-travaux-1.svg')}" class="img-travaux" alt="">
                </f:if>
            </f:else>
        </f:if>
        <div class="infos">
            <h3 class="title">{address.name}</h3>
            <f:if condition="{address.description}">
                <div class="description">
                    <f:format.html>{address.description}</f:format.html>
                </div>
            </f:if>
            <f:if condition="{marker} == 'covoitIcon1' || {marker} == 'covoitIcon2' || {marker} == 'covoitIcon3'">
                <f:then>
                    <f:render partial="Address" section="address" arguments="{_all}"/>
                    <f:if condition="{settings.singlePid}">
                        <f:link.action action="show" arguments="{address : address}" title="{address.fullName}" class="btn"
                                       pageUid="{settings.singlePid}">{f:translate(key:'more')}
                        </f:link.action>
                    </f:if>
                </f:then>
                <f:else>
                    <f:if condition="{marker} == 'travauxIcon1' || {marker} == 'travauxIcon2' || {marker} == 'travauxIcon3' || {marker} == 'travauxIcon4'">
                        <f:then>
                            <f:render partial="AddressTravaux" section="address" arguments="{_all}"/>
                            <f:if condition="{settings.singlePid}">
                                <f:link.action action="show" arguments="{address : address}" title="{address.fullName}" class="btn"
                                               pageUid="{settings.singlePid}">{f:translate(key:'more')}
                                </f:link.action>
                            </f:if>
                        </f:then>
                        <f:else>
                            <div class="frame-type-accordion">
                                <div class="accordion" id="accordion-{address.uid}">
                                    <f:render partial="AddressAccordion" section="address" arguments="{_all}"/>
                                    <f:render partial="AddressAccordion" section="contact" arguments="{_all}"/>
                                    <f:render partial="AddressAccordion" section="hourly" arguments="{_all}" />
                                </div>
                                <f:if condition="{settings.singlePid}">
                                    <f:link.action action="show" arguments="{address : address}" title="{address.fullName}" class="btn"
                                        pageUid="{settings.singlePid}">{f:translate(key:'more')}
                                    </f:link.action>
                                </f:if>
                            </div>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </div>
    </li>
</f:section>