{% block _ProductStatus_productStatusMedia_entry_widget %}

{% set uid = 'psm_' ~ random() %}

    <div id="{{ uid }}">
        {# Aperçu image ou message #}
        {% if form is defined and form.vars.data is not null %}
            {% if form.vars.data.image is not null %}
                <div class="mt-2">
                    <strong>Aperçu de l'image :</strong><br>
                    <img src="{{ asset('uploads/product_status_media/' ~ form.vars.data.image) }}"
                        alt="Image"
                        style="max-width: 300px; height: auto;" />
                </div>
            {% else %}
                <p>Aucune image enregistrée.</p>
            {% endif %}
        {% endif %}

        {# Form widget #}
        {% if form is defined %}
            {{ block('form_widget') }}
        {% endif %}
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const observer = new MutationObserver(function (mutationsList) {
            for (let mutation of mutationsList) {
                for (let node of mutation.addedNodes) {
                    if (node.nodeType === 1 && node.matches('.field-collection-item')) {
                        const fileInput = node.querySelector('input[type="file"]');
                        const localisationInput = node.querySelector('.gps-field');

                        if (!fileInput || !localisationInput) {
                            console.warn("⛔ Champs non trouvés dans l'élément ajouté");
                            return;
                        }

                        let localisationOk = false;
                        const uid = 'map-' + Math.floor(Math.random() * 1000000);

                        // Crée un conteneur pour la carte
                        const mapDiv = document.createElement('div');
                        mapDiv.id = uid;
                        mapDiv.style = 'height: 300px; margin-top: 1em;';
                        localisationInput.closest('.form-group')?.appendChild(mapDiv);

                        // Demande la géolocalisation
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(function (position) {
                                const lat = position.coords.latitude;
                                const lon = position.coords.longitude;
                                const coords = lat + ',' + lon;
                                localisationInput.value = coords;
                                localisationOk = true;

                                console.log("✅ Localisation prête :", coords);

                                // Affiche la carte
                                mapboxgl.accessToken = 'pk.eyJ1IjoiYmxpd2UiLCJhIjoiY21hYXpwYWt4MjEzazJtczhnNTRrN2YyZiJ9.WcgVA5cRgRpxOdEYuBzrHg'; // 🔁 À remplacer avec ta clé publique
                                const map = new mapboxgl.Map({
                                    container: uid,
                                    style: 'mapbox://styles/mapbox/streets-v11',
                                    center: [lon, lat],
                                    zoom: 14
                                });

                                new mapboxgl.Marker().setLngLat([lon, lat]).addTo(map);
                            }, function (error) {
                                alert("❌ Impossible d'accéder à la géolocalisation : " + error.message);
                                localisationOk = false;
                            });
                        } else {
                            alert("⛔ Géolocalisation non supportée par ce navigateur.");
                        }

                        // Interdire sélection fichier si pas GPS
                        fileInput.addEventListener('click', function (e) {
                            if (!localisationOk) {
                                e.preventDefault();
                                alert("📍 Localisation GPS requise avant de pouvoir prendre une photo.");
                                return false;
                            }
                        });
                    }
                }
            }
        });

        const target = document.getElementById('ProductStatus_productStatusMedia');
        if (target) {
            observer.observe(target, { childList: true, subtree: true });
            console.log("👁️ Observation activée sur :", target);
        } else {
            console.warn("⚠️ Conteneur principal non trouvé pour observer les ajouts");
        }
    });
    </script>


{% endblock %}