{# Widget « Carte de lieux » — plusieurs lieux classés par catégorie sur fond OpenStreetMap.

   Même mécanique que route-map : Leaflet auto-hébergé, chargé paresseusement via
   le partial _leaflet-loader ; données normalisées côté serveur (buildPlacesMap).
   La liste HTML sert à la fois de panneau cliquable à côté de la carte et de
   repli sans JavaScript (contenu indexable). Les filtres par catégorie agissent
   sur la liste et sur les marqueurs, et fonctionnent même si Leaflet échoue. #}

<div class="izi-places izi-places--list-{{ listPosition }}{{ mappable is empty ? ' izi-places--no-map' : '' }}"
     id="{{ widgetId }}" data-izi-places
     style="--izi-pm-accent: {{ accentColor }}; --izi-pm-height: {{ height }};">
    {% if title %}<h3 class="izi-places__title">{{ title }}</h3>{% endif %}
    {% if subtitle %}<p class="izi-places__subtitle">{{ subtitle }}</p>{% endif %}

    {% if places is empty %}
        <div class="izi-places__empty">
            <i class="fa-solid fa-map-location-dot" aria-hidden="true"></i>
            <p>{{ emptyText }}</p>
        </div>
    {% else %}
        {% set listHtml %}
            <ul class="izi-places__list" data-izi-places-list>
                {% for place in places %}
                    {% set onMap = place.lat is not null and place.lng is not null %}
                    <li class="izi-places__item{{ onMap ? ' izi-places__item--mappable' : '' }}"
                        data-izi-places-index="{{ place.index }}"
                        data-izi-places-category="{{ place.category }}"
                        style="--izi-pm-color: {{ place.color }};"
                        {% if onMap %}tabindex="0" role="button" aria-label="Voir {{ place.name }} sur la carte"{% endif %}>
                        {% if place.photo %}
                            <img class="izi-places__thumb" src="{{ place.photo }}" alt="{{ place.name }}" loading="lazy">
                        {% endif %}
                        <div class="izi-places__body">
                            <strong class="izi-places__name">
                                <span class="izi-places__dot" aria-hidden="true"></span>{{ place.name }}
                            </strong>
                            {% if place.categoryLabel %}
                                <span class="izi-places__badge">{{ place.categoryLabel }}</span>
                            {% endif %}
                            {% if place.address %}
                                <span class="izi-places__address">{{ place.address }}</span>
                            {% endif %}
                            {% if place.description %}
                                <p>{{ place.description }}</p>
                            {% endif %}
                            {% if place.link %}
                                <a class="izi-places__link" href="{{ place.link }}" target="_blank" rel="noopener">En savoir plus</a>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        {% endset %}

        {% if showFilters %}
            <div class="izi-places__filters" role="group" aria-label="Filtrer par catégorie">
                <button type="button" class="izi-places__chip is-active" data-izi-places-filter="" aria-pressed="true">Tous</button>
                {% for category in usedCategories %}
                    <button type="button" class="izi-places__chip" data-izi-places-filter="{{ category.id }}"
                            aria-pressed="false" style="--izi-pm-color: {{ category.color }};">
                        <span class="izi-places__dot" aria-hidden="true"></span>{{ category.label }}
                    </button>
                {% endfor %}
            </div>
        {% endif %}

        <div class="izi-places__layout">
            {% if mappable is not empty %}
                <div class="izi-places__map" data-izi-places-map style="height: {{ height }};"
                     aria-label="Carte des lieux{{ title ? ' : ' ~ title : '' }}"></div>
                <script type="application/json" data-izi-places-data>
                    {{ { 'places': mappable }|json_encode|raw }}
                </script>
            {% endif %}
            {% if showList %}{{ listHtml }}{% endif %}
        </div>

        {# Liste masquée par réglage : reste disponible repliée (repli sans JS, indexable). #}
        {% if not showList %}
            <details class="izi-places__fallback">
                <summary>Voir la liste des lieux</summary>
                {{ listHtml }}
            </details>
        {% endif %}
    {% endif %}
</div>

<style>
    .izi-places {
        max-width: 1080px;
        margin: 0 auto;
        padding: 20px;
    }

    .izi-places__title {
        margin: 0 0 18px 0;
        font-size: 26px;
        font-weight: 700;
        text-align: center;
        color: var(--color-text, #1e293b);
    }

    .izi-places__subtitle {
        margin: -12px 0 18px 0;
        font-size: 16px;
        text-align: center;
        color: var(--color-text-light, #64748b);
    }

    .izi-places__empty {
        padding: 60px 20px;
        text-align: center;
        color: var(--color-text-light, #64748b);
        background: var(--color-surface, #f8fafc);
        border: 1px dashed var(--color-border, #cbd5e1);
        border-radius: var(--radius-lg, 14px);
    }

    .izi-places__empty i {
        font-size: 36px;
        color: var(--izi-pm-accent);
        margin-bottom: 12px;
        display: block;
    }

    .izi-places__empty p { margin: 0; font-size: 16px; }

    /* Filtres par catégorie */
    .izi-places__filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-bottom: 14px;
    }

    .izi-places__chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 14px;
        border-radius: 999px;
        border: 1px solid var(--color-border, #e2e8f0);
        background: var(--color-surface, #f8fafc);
        color: var(--color-text, #1e293b);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.3;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease;
    }

    .izi-places__chip:hover,
    .izi-places__chip:focus-visible {
        border-color: var(--izi-pm-color, var(--izi-pm-accent));
        outline: none;
    }

    .izi-places__chip.is-active {
        border-color: var(--izi-pm-color, var(--izi-pm-accent));
        background: color-mix(in srgb, var(--izi-pm-color, var(--izi-pm-accent)) 15%, transparent);
    }

    /* Pastille de couleur : la couleur de catégorie n'est jamais utilisée pour du texte. */
    .izi-places__dot {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--izi-pm-color, var(--izi-pm-accent));
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    /* Carte + liste */
    .izi-places__layout {
        display: grid;
        gap: 16px;
        align-items: start;
    }

    .izi-places--list-right .izi-places__layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .izi-places--list-left .izi-places__layout { grid-template-columns: 320px minmax(0, 1fr); }
    .izi-places--list-left .izi-places__list { order: -1; }
    .izi-places--list-bottom .izi-places__layout,
    .izi-places--no-map .izi-places__layout { grid-template-columns: 1fr; }

    .izi-places__map {
        border-radius: var(--radius-lg, 14px);
        overflow: hidden;
        border: 1px solid var(--color-border, #e2e8f0);
        /* Un fond neutre le temps du chargement de Leaflet ; z-index 0 garde
           les calques Leaflet sous l'en-tête du site. */
        background: #e8edf2;
        z-index: 0;
    }

    .izi-places__list {
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: var(--radius-lg, 14px);
        background: var(--color-surface, #f8fafc);
        overflow-y: auto;
    }

    .izi-places--list-right .izi-places__list,
    .izi-places--list-left .izi-places__list { max-height: var(--izi-pm-height); }

    .izi-places--list-bottom .izi-places__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
        border: none;
        background: none;
        overflow: visible;
    }

    .izi-places__item {
        display: flex;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--color-border, #e2e8f0);
        border-left: 3px solid transparent;
        color: var(--color-text, #1e293b);
        font-size: 14px;
        line-height: 1.45;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .izi-places__item:last-child { border-bottom: none; }

    .izi-places--list-bottom .izi-places__item {
        border: 1px solid var(--color-border, #e2e8f0);
        border-left-width: 3px;
        border-radius: var(--radius-lg, 14px);
        background: var(--color-surface, #f8fafc);
    }

    .izi-places__item--mappable { cursor: pointer; }

    .izi-places__item--mappable:hover,
    .izi-places__item--mappable:focus-visible {
        background: color-mix(in srgb, var(--izi-pm-color, var(--izi-pm-accent)) 6%, transparent);
        outline: none;
    }

    .izi-places__item.is-active {
        border-left-color: var(--izi-pm-color, var(--izi-pm-accent));
        background: color-mix(in srgb, var(--izi-pm-color, var(--izi-pm-accent)) 10%, transparent);
    }

    .izi-places__item.is-hidden { display: none !important; }

    .izi-places__thumb {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 8px;
    }

    .izi-places__body { min-width: 0; }

    .izi-places__name {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 15px;
    }

    .izi-places__badge {
        display: inline-block;
        margin-top: 3px;
        padding: 1px 8px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--color-text-light, #64748b);
        background: color-mix(in srgb, var(--izi-pm-color, var(--izi-pm-accent)) 12%, transparent);
    }

    .izi-places__address {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        color: var(--color-text-light, #64748b);
    }

    .izi-places__item p { margin: 4px 0 0 0; font-size: 13.5px; }

    .izi-places__link {
        display: inline-block;
        margin-top: 4px;
        font-size: 13px;
        font-weight: 600;
    }

    .izi-places__fallback {
        margin-top: 16px;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: var(--radius-lg, 14px);
        padding: 12px 18px;
        background: var(--color-surface, #f8fafc);
    }

    .izi-places__fallback summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--color-text, #1e293b);
    }

    .izi-places__fallback .izi-places__list {
        margin-top: 12px;
        border: none;
        background: none;
        max-height: none;
    }

    /* Marqueurs (divIcon Leaflet) et popups */
    .izi-pm-marker {
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        background: var(--izi-pm-color, #667eea);
        box-sizing: border-box;
        transition: transform 0.15s ease;
    }

    .izi-pm-marker.is-active { transform: scale(1.25); }

    .izi-pm-popup { font-size: 14px; line-height: 1.5; min-width: 180px; }

    .izi-pm-popup img {
        display: block;
        width: 100%;
        max-height: 120px;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 6px;
    }

    .izi-pm-popup strong { font-size: 15px; }
    .izi-pm-popup__category,
    .izi-pm-popup__address { color: #64748b; font-size: 12.5px; }
    .izi-pm-popup a { font-weight: 600; }

    .container-on-dark .izi-places__title,
    .container-on-dark .izi-places__subtitle { color: #ffffff; }

    @media (max-width: 768px) {
        .izi-places--list-right .izi-places__layout,
        .izi-places--list-left .izi-places__layout { grid-template-columns: 1fr; }
        .izi-places--list-left .izi-places__list { order: 0; }
        .izi-places--list-right .izi-places__list,
        .izi-places--list-left .izi-places__list { max-height: none; }
    }
</style>

{% include 'sections/_leaflet-loader.html.twig' %}

<script>
    (function () {
        var roots = document.querySelectorAll('[data-izi-places]:not([data-izi-places-bound])');
        if (!roots.length) return;

        roots.forEach(function (root) {
            root.setAttribute('data-izi-places-bound', '1');

            var items = Array.prototype.slice.call(root.querySelectorAll('[data-izi-places-list] > li'));
            var chips = Array.prototype.slice.call(root.querySelectorAll('[data-izi-places-filter]'));
            var mapEl = root.querySelector('[data-izi-places-map]');
            var dataNode = root.querySelector('[data-izi-places-data]');

            var map = null;
            var markers = {}; // index -> { marker, category, latlng, icon }
            var activeFilter = '';

            function isVisible(entry) {
                return !activeFilter || entry.category === activeFilter;
            }

            function refit() {
                if (!map) return;
                var latlngs = [];
                Object.keys(markers).forEach(function (key) {
                    if (isVisible(markers[key])) latlngs.push(markers[key].latlng);
                });
                if (!latlngs.length) return;
                if (latlngs.length === 1) { map.setView(latlngs[0], 14); return; }
                map.fitBounds(L.latLngBounds(latlngs), { padding: [30, 30], maxZoom: 15 });
            }

            function setActive(index) {
                var key = index === null ? null : String(index);
                items.forEach(function (li) {
                    li.classList.toggle('is-active', key !== null && li.getAttribute('data-izi-places-index') === key);
                });
                Object.keys(markers).forEach(function (k) {
                    markers[k].icon.classList.toggle('is-active', k === key);
                });
            }

            // Les filtres agissent d'abord sur la liste : ils restent utiles
            // même si Leaflet ne se charge pas.
            function applyFilter(id) {
                activeFilter = id || '';
                chips.forEach(function (chip) {
                    var on = (chip.getAttribute('data-izi-places-filter') || '') === activeFilter;
                    chip.classList.toggle('is-active', on);
                    chip.setAttribute('aria-pressed', on ? 'true' : 'false');
                });
                items.forEach(function (li) {
                    var category = li.getAttribute('data-izi-places-category') || '';
                    li.classList.toggle('is-hidden', !!activeFilter && category !== activeFilter);
                });
                if (map) {
                    map.closePopup();
                    Object.keys(markers).forEach(function (key) {
                        var entry = markers[key];
                        if (isVisible(entry)) { entry.marker.addTo(map); } else { map.removeLayer(entry.marker); }
                    });
                    refit();
                }
            }

            chips.forEach(function (chip) {
                chip.addEventListener('click', function () {
                    applyFilter(chip.getAttribute('data-izi-places-filter'));
                });
            });

            function focusPlace(index) {
                var entry = markers[index];
                if (!map || !entry) return;
                map.setView(entry.latlng, Math.max(map.getZoom(), 14));
                entry.marker.openPopup();
                // Sur mobile la liste est sous la carte : on ramène la carte à l'écran.
                mapEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }

            items.forEach(function (li) {
                if (!li.hasAttribute('tabindex')) return;
                var index = li.getAttribute('data-izi-places-index');
                li.addEventListener('click', function (e) {
                    // Le lien « En savoir plus » garde son comportement propre.
                    if (e.target.closest('a')) return;
                    focusPlace(index);
                });
                li.addEventListener('keydown', function (e) {
                    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); focusPlace(index); }
                });
            });

            if (!mapEl || !dataNode || !window.iziWithLeaflet) return;

            var data;
            try { data = JSON.parse(dataNode.textContent); } catch (e) { return; }
            if (!data.places || !data.places.length) return;

            window.iziWithLeaflet(function () {
                map = L.map(mapEl, { scrollWheelZoom: false });

                L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 18,
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                }).addTo(map);

                data.places.forEach(function (place) {
                    var latlng = [place.lat, place.lng];

                    // Marqueur et popup construits en DOM (jamais par concaténation
                    // HTML) : noms, adresses et URL viennent de la saisie utilisateur.
                    var icon = document.createElement('span');
                    icon.className = 'izi-pm-marker';
                    icon.style.setProperty('--izi-pm-color', place.color);

                    var marker = L.marker(latlng, {
                        icon: L.divIcon({ className: '', html: icon, iconSize: [24, 24], iconAnchor: [12, 12], popupAnchor: [0, -12] }),
                        title: place.name
                    }).addTo(map);

                    var popup = document.createElement('div');
                    popup.className = 'izi-pm-popup';
                    if (place.photo) {
                        var img = document.createElement('img');
                        img.src = place.photo;
                        img.alt = place.name;
                        img.loading = 'lazy';
                        popup.appendChild(img);
                    }
                    var strong = document.createElement('strong');
                    strong.textContent = place.name;
                    popup.appendChild(strong);
                    if (place.categoryLabel) {
                        var category = document.createElement('div');
                        category.className = 'izi-pm-popup__category';
                        category.textContent = place.categoryLabel;
                        popup.appendChild(category);
                    }
                    if (place.address) {
                        var address = document.createElement('div');
                        address.className = 'izi-pm-popup__address';
                        address.textContent = place.address;
                        popup.appendChild(address);
                    }
                    if (place.description) {
                        var description = document.createElement('div');
                        description.textContent = place.description;
                        popup.appendChild(description);
                    }
                    if (place.link) {
                        var link = document.createElement('a');
                        link.href = place.link;
                        link.target = '_blank';
                        link.rel = 'noopener';
                        link.textContent = 'En savoir plus';
                        popup.appendChild(link);
                    }
                    marker.bindPopup(popup);
                    marker.on('popupopen', function () { setActive(place.index); });

                    markers[place.index] = { marker: marker, category: place.category || '', latlng: latlng, icon: icon };
                });

                map.on('popupclose', function () { setActive(null); });

                refit();

                // La carte vit dans une grille dont la largeur dépend du CSS du
                // widget : on recalcule sa taille dès que le conteneur change.
                if ('ResizeObserver' in window) {
                    new ResizeObserver(function () { map.invalidateSize(); }).observe(mapEl);
                }
            });
        });
    })();
</script>