{% extends 'base.html.twig' %}

{% block title %}YFIMO{% endblock %}

{% set cityName = arrondissement.libelle|default('') %}
{% set cityCp = arrondissement.cp|default('') %}
{% set cityDescription = arrondissement.description|default(null) %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
    <link href="{{ asset('styles/pages/marche.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
    {% include 'layout/_header.html.twig' %}
    <main>
        <section class="section-entete pt-5 pb-4">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h1>Les prix des locations de {{ typeLabel|default('bureaux') }} <span>à {{ cityName }}</span></h1>
                        <p>Retrouvez les loyers de {{ typeLabel|default('bureaux') }} à {{ cityName }}{% if cityCp %} ({{ cityCp }}){% endif %}, calculés à partir des offres disponibles dans notre base.</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section-data">
            <div class="container bg-grey03 p-4">
                <div class="row">
                    <div class="col-12 mb-4">
                        <h2>Tableau des loyers de {{ typeLabel|default('bureaux') }} à {{ cityName }}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 d-flex mb-4 gap-3">
                        <div class="data dmoyen">
                            <div class="valeur">{{ currentStat.lmoyen|default(0)|number_format(0, ',', ' ') }} €</div>
                            <div class="libelle">Loyer moyen</div>
                        </div>
                        <div class="data dbas">
                            <div class="valeur">{{ currentStat.lmin|default(0)|number_format(0, ',', ' ') }} €</div>
                            <div class="libelle">Loyer bas</div>
                        </div>
                        <div class="data dmedian">
                            <div class="valeur">{{ currentStat.lmedian|default(0)|number_format(0, ',', ' ') }} €</div>
                            <div class="libelle">Loyer median</div>
                        </div>
                        <div class="data dhaut">
                            <div class="valeur">{{ currentStat.lmax|default(0)|number_format(0, ',', ' ') }} €</div>
                            <div class="libelle">Loyer haut</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <p class="small">Les loyers sont calculés par YFIMO sur la base des offres présentes dans notre base de données. Réactualisés régulièrement pour coller à la réalité du marché, les loyers sont exprimés hors taxes, hors charges, par m² et par an.</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section-carte p-4">
            <div class="container bg-grey03 p-4">
                <div class="row">
                    <div class="col-12 mb-4">
                        <h2>Cartographie des loyers de {{ typeLabel|default('bureaux') }} à {{ cityName }}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-between gap-2 aspect-ratio-2 rent-map-shell">
                            <div class="bigMap" data-rent-map data-google-maps-key="{{ googleMapsApiKey }}" data-google-maps-developer-mode="{{ googleMapsDeveloperMode ? 'true' : 'false' }}" data-stats="{{ cityMapStats|json_encode|e('html_attr') }}">
                                <div class="bigMap__fallback" data-rent-map-fallback>
                                    Carte en cours de chargement
                                </div>
                            </div>
                            <div class="legende">
                                <p>Max</p>
                                <div class="jauge">
                                    <div class="niv niv1"></div>
                                    <div class="niv niv2"></div>
                                    <div class="niv niv3"></div>
                                    <div class="niv niv4"></div>
                                    <div class="niv niv5"></div>
                                </div>
                                <p>Min</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {% if cityDescription %}
            <section class="section-content py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-lg-10 offset-lg-1">
                            <div class="content-texte">
                                {{ cityDescription|raw }}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        {% endif %}
        <section class="autres-offres bg-grey03 py-5">
            <div class="container-fluid ps-lg-4">
                <div class="row">
                    <div class="col-12 py-5 px-0 ps-4">
                        <div class="row">
                            <div class="col-12 text-center pb-4">
                                <h2>Ces {{ offerTitleLabel|default('bureaux') }} à louer sont disponibles à {{ cityName }}</h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 p-0 ps-lg-4 pb-5">
                                <div class="splide splideOffres" id="splideOffres">
                                    <div class="splide__track">
                                        <ul class="splide__list">
                                            {% for offre in offres %}
                                                <li class="splide__slide">
                                                    {% include 'layout/_cardOffre.html.twig' with { offre: offre } %}
                                                </li>
                                            {% else %}
                                                <li class="splide__slide">
                                                    <p class="mb-0">Aucune offre disponible pour le moment.</p>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    {% include 'layout/_footer.html.twig' %}
{% endblock %}
{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    {{ parent() }}
    <script>
    (function() {
        function parseStats(mapElement) {
            try {
                const stats = JSON.parse(mapElement.dataset.stats || '[]');
                return Array.isArray(stats) ? stats : [];
            } catch (error) {
                return [];
            }
        }

        function showRentMapFallback(mapElement, message) {
            const fallback = mapElement.querySelector('[data-rent-map-fallback]');
            if (fallback) {
                fallback.textContent = message;
            }
        }

        function escapeHtml(value) {
            return String(value || '').replace(/[&<>"']/g, function(character) {
                return {
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#039;',
                }[character];
            });
        }

        function fetchCommuneGeoJson(stat) {
            const params = new URLSearchParams({
                fields: 'nom,code,codesPostaux,centre,contour',
                format: 'geojson',
                geometry: 'contour',
            });
            const url = stat.inseeCode
                ? 'https://geo.api.gouv.fr/communes/' + encodeURIComponent(stat.inseeCode) + '?' + params.toString()
                : 'https://geo.api.gouv.fr/communes?' + new URLSearchParams({
                    codePostal: stat.postalCode,
                    nom: stat.city,
                    fields: 'nom,code,codesPostaux,centre,contour',
                    format: 'geojson',
                    geometry: 'contour',
                }).toString();

            return fetch(url)
                .then(function(response) {
                    if (!response.ok) {
                        throw new Error('Geo API indisponible');
                    }

                    return response.json();
                })
                .then(function(geoJson) {
                    const feature = geoJson.type === 'Feature'
                        ? geoJson
                        : (geoJson.features && geoJson.features[0] ? geoJson.features[0] : null);

                    if (!feature) {
                        return null;
                    }

                    feature.properties = feature.properties || {};
                    feature.properties.city = stat.city;
                    feature.properties.postalCode = stat.postalCode;
                    feature.properties.average = stat.average;

                    return feature;
                });
        }

        function renderRentMap(mapElement, stats) {
            const map = new google.maps.Map(mapElement, {
                center: {lat: 48.95, lng: 1.95},
                zoom: 11,
                mapTypeControl: false,
                streetViewControl: false,
                fullscreenControl: true,
            });
            const bounds = new google.maps.LatLngBounds();
            const infoWindow = new google.maps.InfoWindow();

            Promise.all(stats.map(fetchCommuneGeoJson)).then(function(features) {
                const validFeatures = features.filter(Boolean);

                if (validFeatures.length === 0) {
                    showRentMapFallback(mapElement, 'Aucun contour disponible');
                    return;
                }

                mapElement.querySelector('[data-rent-map-fallback]')?.remove();

                validFeatures.forEach(function(feature) {
                    map.data.addGeoJson({
                        type: 'FeatureCollection',
                        features: [feature],
                    });
                });

                map.data.forEach(function(feature) {
                    feature.getGeometry().forEachLatLng(function(latLng) {
                        bounds.extend(latLng);
                    });
                });

                map.data.setStyle({
                    fillColor: '#ff5011',
                    fillOpacity: 0.38,
                    strokeColor: '#ffffff',
                    strokeOpacity: 1,
                    strokeWeight: 2,
                });

                map.data.addListener('click', function(event) {
                    const average = event.feature.getProperty('average');
                    const city = event.feature.getProperty('city');
                    const postalCode = event.feature.getProperty('postalCode');

                    infoWindow.setContent(
                        '<div class="rent-map-popin">' +
                        '<strong>' + escapeHtml(city) + '</strong>' +
                        '<span>' + escapeHtml(postalCode) + '</span>' +
                        '<p>Loyer moyen : ' + (average ? escapeHtml(average) + ' €/m²/an' : 'non disponible') + '</p>' +
                        '</div>'
                    );
                    infoWindow.setPosition(event.latLng);
                    infoWindow.open(map);
                });

                map.fitBounds(bounds);
            }).catch(function() {
                showRentMapFallback(mapElement, 'Carte indisponible');
            });
        }

        function initRentMap() {
            const mapElement = document.querySelector('[data-rent-map]');
            if (!mapElement || mapElement.dataset.rentMapInitialized === 'true') {
                return;
            }

            const stats = parseStats(mapElement);
            if (stats.length === 0) {
                showRentMapFallback(mapElement, 'Aucune donnée disponible');
                return;
            }

            const apiKey = mapElement.dataset.googleMapsKey || '';
            const developerMode = mapElement.dataset.googleMapsDeveloperMode === 'true';
            if (!apiKey && !developerMode) {
                showRentMapFallback(mapElement, 'Clé Google Maps manquante');
                return;
            }

            mapElement.dataset.rentMapInitialized = 'true';

            if (window.google && window.google.maps) {
                renderRentMap(mapElement, stats);
                return;
            }

            window.initYfimoRentDetailMap = function() {
                renderRentMap(mapElement, stats);
            };

            if (!document.querySelector('script[data-google-maps-loader]')) {
                const script = document.createElement('script');
                script.src = 'https://maps.googleapis.com/maps/api/js?' + (apiKey ? 'key=' + encodeURIComponent(apiKey) + '&' : '') + 'callback=initYfimoRentDetailMap';
                script.async = true;
                script.defer = true;
                script.dataset.googleMapsLoader = 'true';
                document.head.appendChild(script);
            }
        }

        function initMarketCityPage() {
            const splideElement = document.querySelector('#splideOffres');
            if (splideElement && !splideElement.classList.contains('is-initialized')) {
                const splideOffres = new Splide("#splideOffres", {
                    type: 'loop',
                    perPage : 3,
                    height : '100%',
                    pagination : false,
                    gap : '24px',
                    arrows : false,
                    autoplay : false,
                    drag : true,
                    padding: { left: '0', right: '150px' },
                    breakpoints: {
                        728: {
                            perPage: 2,
                            type: "loop",
                        },
                        480: {
                            arrows: false,
                            perPage: 1,
                            gap: '10px',
                            padding: { left: '0', right: '30px' },
                        }
                    },
                });
                splideOffres.mount();
            }

            initRentMap();
        }

        document.addEventListener('DOMContentLoaded', initMarketCityPage);
        document.addEventListener('turbo:load', initMarketCityPage);
    })();
    </script>
{% endblock %}