{% extends '@kohinos/installation/layout.html.twig' %}

{% block step_title %}Configuration de la carte{% endblock %}

{% block step_content %}
    <div class="mb-4">
        <p>Configurez les paramètres de la carte qui sera utilisée pour afficher les prestataires.</p>
        <p>Vous pouvez définir le centre de la carte en cliquant directement sur celle-ci.</p>
    </div>

    {{ form_start(form, {'attr': {'class': 'installation-form'}}) }}
        <div class="installation-section">
            <div class="form-group">
                {{ form_label(form.map_center) }}
                {{ form_widget(form.map_center) }}
                {{ form_errors(form.map_center) }}
                {% if form.map_center.vars.help is defined %}
                    <small class="help-text">{{ form.map_center.vars.help|raw }}</small>
                {% endif %}
            </div>
            
            <div class="form-group">
                {{ form_label(form.map_zoom) }}
                {{ form_widget(form.map_zoom) }}
                {{ form_errors(form.map_zoom) }}
                {% if form.map_zoom.vars.help is defined %}
                    <small class="help-text">{{ form.map_zoom.vars.help|raw }}</small>
                {% endif %}
            </div>
            
            <div id="map-container"></div>
        </div>

        <div class="installation-nav">
            <a href="{{ path('installation_step5') }}" class="btn btn-secondary">Retour</a>
            <button type="submit" class="btn btn-primary">Continuer</button>
        </div>
    {{ form_end(form) }}
{% endblock %}

{% block step_scripts %}
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Parse map center from input
        const mapCenterInput = document.getElementById('install_step6_map_center');
        const mapZoomInput = document.getElementById('install_step6_map_zoom');
        
        let mapCenter = [45.7, 3.2]; // Default center
        let mapZoom = 9; // Default zoom
        
        // Try to parse the center from the input
        if (mapCenterInput.value) {
            try {
                const match = mapCenterInput.value.match(/\[([\d.-]+),([\d.-]+)\]/);
                if (match && match.length === 3) {
                    mapCenter = [parseFloat(match[1]), parseFloat(match[2])];
                }
            } catch (e) {
                console.error('Error parsing map center:', e);
            }
        }
        
        // Try to parse the zoom from the input
        if (mapZoomInput.value) {
            try {
                mapZoom = parseInt(mapZoomInput.value);
            } catch (e) {
                console.error('Error parsing map zoom:', e);
            }
        }
        
        // Initialize the map
        const map = L.map('map-container').setView(mapCenter, mapZoom);
        
        // Add the OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        // Add a marker at the center
        let marker = L.marker(mapCenter).addTo(map);
        
        // Update marker and inputs when the map is clicked
        map.on('click', function(e) {
            const lat = e.latlng.lat.toFixed(6);
            const lng = e.latlng.lng.toFixed(6);
            
            // Update the marker position
            marker.setLatLng(e.latlng);
            
            // Update the input value
            mapCenterInput.value = `[${lat},${lng}]`;
        });
        
        // Update inputs when the map is zoomed
        map.on('zoomend', function() {
            mapZoomInput.value = map.getZoom();
        });
    });
</script>
{% endblock %}