{% extends 'domain/backend/layouts/base.html.twig' %}

{% block title %}Création de station{% endblock %}
{% block style %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
    <style>
        #map {
            height: 400px;
            width: 100%;
            margin: 20px 0;
        }
        b {
            color: #ff0000;
        }
        .search-container {
            margin-bottom: 10px;
        }
        #searchResults {
            position: absolute;
            z-index: 1000;
            background: white;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            display: none;
        }
        .search-result {
            padding: 8px;
            cursor: pointer;
        }
        .search-result:hover {
            background-color: #f0f0f0;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="card container">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <h4 class="card-title">Création de station</h4>
                    <a href="{{ path('back.station.index') }}" class="btn btn-primary float-end"><i
                                class="fa fa-arrow-rotate-back"></i> Retour</a>

                </div><!--end col-->
            </div>  <!--end row-->
        </div><!--end card-header-->
        <div class="card-body pt-0">
            {{ include('domain/backend/station/_form.html.twig') }}
        </div><!--end card-body-->
    </div>
{% endblock %}

{% block javascript %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script>
    // Initialisation de la carte
    var map = L.map('map').setView([5.352992, -3.922516], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

    var marker;
    var searchInput = document.getElementById('searchInput');
    var searchResults = document.getElementById('searchResults');

    // Fonction de recherche
    var searchTimeout;
    searchInput.addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
    var query = searchInput.value;
    if (query.length < 3) {
    searchResults.style.display = 'none';
    return;
}

    fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`)
    .then(response => response.json())
    .then(data => {
    searchResults.innerHTML = '';
    data.forEach(result => {
    var div = document.createElement('div');
    div.className = 'search-result';
    div.textContent = result.display_name;
    div.addEventListener('click', function() {
    const lat = parseFloat(result.lat);
    const lng = parseFloat(result.lon);
    updateLocation(lat, lng);
    searchInput.value = result.display_name;
    searchResults.style.display = 'none';
});
    searchResults.appendChild(div);
});
    searchResults.style.display = data.length ? 'block' : 'none';
});
}, 300);
});

    // Mise à jour de la position
    function updateLocation(lat, lng) {
    document.querySelector('#{{ form.latitude.vars.id }}').value = lat.toFixed(6);
        document.querySelector('#{{ form.longitude.vars.id }}').value = lng.toFixed(6);

        if (marker) {
            marker.setLatLng([lat, lng]);
        } else {
            marker = L.marker([lat, lng]).addTo(map);
        }
        map.setView([lat, lng], 13);
    }

    // Gestion du clic sur la carte
    map.on('click', function(e) {
        updateLocation(e.latlng.lat, e.latlng.lng);
        // Effectuer une recherche inverse pour obtenir l'adresse
        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}`)
            .then(response => response.json())
            .then(data => {
                searchInput.value = data.display_name;
            });
    });

    // Initialisation si coordonnées existantes
    window.addEventListener('load', function() {
        var latField = document.querySelector('#{{ form.latitude.vars.id }}');
        var lngField = document.querySelector('#{{ form.longitude.vars.id }}');

        if (latField.value && lngField.value) {
            var lat = parseFloat(latField.value);
            var lng = parseFloat(lngField.value);
            updateLocation(lat, lng);
            // Recherche inverse pour l'adresse
            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
                .then(response => response.json())
                .then(data => {
                    searchInput.value = data.display_name;
                });
        }
    });
</script>
{% endblock %}