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

{% block title %}{{ 'display.title'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        .hidden {
            display: none;
        }
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
        }
        .is-invalid {
            border: 1px solid red;
        }
        .is-invalid #validation_messages {
            color: red;
        }
        img{
            max-width: 100%;
            max-height: 400px;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container mt-4">
    






    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h1 class="card-title mb-4">{{ 'display.welcome'|trans }} {{ commerce_overpass.tags_converted.name }}</h1>
                    <div id="map" style="height: 400px; width: 100%;" class="rounded"></div>

                    {% if commerce_overpass is not empty %}
                         

                        <form action="{{ path('app_public_submit', {'osm_object_id': commerce_overpass['@attributes'].id, 'version': commerce_overpass['@attributes'].version, 'changesetID': commerce_overpass['@attributes'].changeset }) }}" method="post" class="needs-validation">
                            <input type="hidden" name="osm_kind" value="{{ osm_kind }}">
                            <div class="mb-3">
                                <label for="commerce_id" class="form-label">{{ 'display.modify_commerce'|trans }}: 
                                <strong>
                                {% if commerce_overpass.tags_converted.name is defined %}
                                    {{ commerce_overpass.tags_converted.name }}
                                {% elseif commerce_overpass['@attributes'].name is defined %}
                                    {{ commerce_overpass['@attributes'].name }}
                                {% else %}
                                    {{ 'display.unknown'|trans }}
                                {% endif %}
                                </strong>
                                </label>
                                <br/>

                                <a class="btn btn-info" href="{{ path('app_public_index') }}">{{ 'display.contact_humans'|trans }}</a>
                            </div>

                            {% if commerce.tags_converted.image is defined %}
                                <img class="img-fluid mb-3" src="{{ commerce.tags_converted.image }}" alt="Image du lieu">
                            {% endif %}

                            <h2>{{ 'display.attributes'|trans }}</h2>
 
                               
                            <div class="row mb-3">
                                    <div class="col-md-5">
                                    <label for="commerce_tag_value__name">{{'display.keys.name'|trans}}</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" class="form-control" name="commerce_tag_value__name" value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% elseif commerce_overpass['@attributes'].name is defined %}{{ commerce_overpass['@attributes'].name }}{% endif %}">
                                    </div>
                                </div>
  

                            {% include 'public/edit/address.html.twig' %}
                            {% include 'public/edit/opening_hours.html.twig' %}
                            {% include 'public/edit/wheelchair.html.twig' %}
                            {% include 'public/edit/ask_angela.html.twig' %}
                            {% include 'public/edit/tags.html.twig' %}
                            
                            <div id="validation_messages"></div>
                            <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send"></i>
                            
                            {{ 'display.submit'|trans }}</button>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
        

    </div>
    </div>
    <div class="row">
        <div class="col-12">
            <span class="p-4">
                <span class="last-modification">{{ 'display.last_modification'|trans }}: {{ commerce_overpass['@attributes'].timestamp }}</span>, 
                <strong>
                {{ 'display.days_ago'|trans({'%days%': date(commerce_overpass['@attributes'].timestamp).diff(date()).days}) }} </strong>
                {{ 'display.by'|trans }} 
                <a href="https://www.openstreetmap.org/user/{{ commerce_overpass['@attributes'].user }}" target="_blank">{{ commerce_overpass['@attributes'].user }}</a>
                
                <div class="lien-OpenStreetMap">
                    <a href="https://www.openstreetmap.org/node/{{ commerce_overpass['@attributes'].id }}" target="_blank">{{ 'display.view_on_osm'|trans }}</a>
                </div>

            </span>
            <div class="disclaimer p-3">
                <p>
                    <strong>{{ 'display.disclaimer.title'|trans }}:</strong>
                    {{ 'display.disclaimer.text'|trans }}
                </p>
            </div>
        </div>
    </div>

    
</div>

{% block javascripts %}
    {{ parent() }}
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> 
     <script>


function check_validity(e){
 let errors = [];
            // Réinitialiser les classes d'erreur
            document.querySelectorAll('.is-invalid').forEach(input => {
                input.classList.remove('is-invalid');
            });
            
            // Vérification du nom
            const nameInput = document.querySelector('input[name="commerce_tag_value__name"]');
            if (!nameInput.value.trim()) {
                errors.push("Le nom de l'établissement est obligatoire");
                nameInput.classList.add('is-invalid');
            }

            // Vérification de l'email 
            const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
            if (emailInput && emailInput.value) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(emailInput.value)) {
                    errors.push("L'adresse email n'est pas valide");
                    emailInput.classList.add('is-invalid');
                }
            }

            // Vérification du téléphone
            const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
            if (phoneInput && phoneInput.value) {
                const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
                if (!phoneRegex.test(phoneInput.value.replace(/\s/g, ''))) {
                    errors.push("Le numéro de téléphone n'est pas valide");
                    phoneInput.classList.add('is-invalid');
                }
            }

            // Affichage des erreurs si présentes
            if (errors.length > 0) {
                e.preventDefault();
                document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
                document.querySelector('#validation_messages').classList.add('is-invalid');
            }
}

        {% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}
        mapboxgl.accessToken = '{{ mapbox_token }}'; 
        map = new mapboxgl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
           center: [
            {{ commerce_overpass['@attributes'].lon }},
             {{ commerce_overpass['@attributes'].lat }}
             ], 
            
            zoom: 14
        }); 

        // Ajout du marqueur
        new mapboxgl.Marker()
            .setLngLat([
                {{ commerce_overpass['@attributes'].lon  }},
                 {{ commerce_overpass['@attributes'].lat  }}
                 ])
            .setPopup(new mapboxgl.Popup({
                offset: 25
            }).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
            .addTo(map);
         {% endif %}

    // Fonction pour calculer et mettre à jour la barre de progression
    function updateCompletionProgress() {
        const inputs = document.querySelectorAll('input[type="text"]');
        let filledInputs = 0;
        let totalInputs = inputs.length;

        inputs.forEach(input => {
            if (input.value.trim() !== '') {
                filledInputs++;
            }
        });

        const completionPercentage = (filledInputs / totalInputs) * 100;
        const progressBar = document.querySelector('#completion_progress .progress-bar');
        
        progressBar.style.width = completionPercentage + '%';
        progressBar.setAttribute('aria-valuenow', completionPercentage);
    }

    // Ajouter les écouteurs d'événements sur tous les champs input
    document.querySelectorAll('input[type="text"]').forEach(input => {
        input.addEventListener('blur', updateCompletionProgress);
    });
        // Validation du formulaire avant envoi
    document.querySelector('form').addEventListener('submit', check_validity);

    // Calculer la progression initiale au chargement
    document.addEventListener('DOMContentLoaded', updateCompletionProgress);
    </script> 
{% endblock %}
{% endblock %}