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

{% block title %}{{ 'display.title'|trans }} {{ commerce_overpass.tags_converted.name }}{% 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; }
        @media (max-width: 768px) {
            .form-label { margin-bottom: 0.5rem; }
            .mb-3 { margin-bottom: 1rem !important; }
        }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-10 col-xl-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h1 class="card-title h2 mb-4">{{ 'display.welcome'|trans }} {{ commerce_overpass.tags_converted.name }}</h1>
                    <div id="map" style="height: 400px; width: 100%;" class="rounded mb-4"></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-4">
                                <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>
                                <div class="mt-2">
                                    <a class="btn btn-info" href="{{ path('app_public_index') }}">{{ 'display.contact_humans'|trans }}</a>
                                </div>
                            </div>

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

                            <h2 class="h3 mb-3">{{ 'display.attributes'|trans }}</h2>
                            <div class="row g-3 mb-4">
                                <div class="col-12 col-md-4">
                                    <label for="commerce_tag_value__name" class="form-label">{{'display.keys.name'|trans}}</label>
                                </div>
                                <div class="col-12 col-md-8">
                                    <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>

                            {% if hide_filled_inputs and 
                                (commerce_overpass.tags_converted['addr:street']) is defined and commerce_overpass.tags_converted['addr:street'] is empty
                             and (commerce_overpass.tags_converted['addr:housenumber']) is defined and commerce_overpass.tags_converted['addr:housenumber'] is empty
                             %}
                                {% include 'public/edit/address.html.twig' %}
                            {% endif %}

                            {% if hide_filled_inputs and  (commerce_overpass.tags_converted.opening_hours) is defined and commerce_overpass.tags_converted.opening_hours is empty %}
                                <span class="deja-rempli">
                                    {{ 'display.already_filled'|trans }}
                                </span>
                            {% endif %}
                                {% include 'public/edit/opening_hours.html.twig' %}
 
                            {% if hide_filled_inputs and (commerce_overpass.tags_converted.wheelchair) is defined and commerce_overpass.tags_converted.wheelchair is empty %} 
                                <span class="deja-rempli">
                                    {{ 'display.already_filled'|trans }}
                                </span>
                            
                            {% endif %}
                                {% include 'public/edit/wheelchair.html.twig' %}
                            
                            {% if hide_filled_inputs and (commerce_overpass.tags_converted.ask_angela) is defined and commerce_overpass.tags_converted.ask_angela is not empty %}
                                <span class="deja-rempli">
                                    {{ 'display.already_filled'|trans }}
                                </span>
                            {% endif %}
                                {% include 'public/edit/ask_angela.html.twig' %}

                            {% include 'public/edit/tags.html.twig' %}
                            
                            <div id="validation_messages" class="alert alert-danger d-none"></div>
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                                <button type="submit" class="btn btn-primary  col-12 col-md-5">
                                    <i class="bi bi-send"></i>
                                    {{ 'display.submit'|trans }}
                                </button>
                            </div>
                            <hr>
                            
                        </form>

                        
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 mt-4">
                <div class="actions-modification">
                    <button id="showAllFields" class="btn btn-secondary mx-4">
                        <i class="bi bi-eye"></i>
                        Voir aussi les champs déjà remplis
                            </button>

                            <button id="closedCommerce" class="btn btn-danger mx-4">
                                <i class="bi bi-x-circle"></i>
                        Je souhaite signaler que ce commerce est fermé
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center mt-4">
        <div class="col-12 col-lg-10 col-xl-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
                        <div class="mb-3 mb-md-0">
                            <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>
                        <div class="lien-OpenStreetMap">
                            <a href="https://www.openstreetmap.org/node/{{ commerce_overpass['@attributes'].id }}" target="_blank" class="btn btn-outline-secondary">
                                {{ 'display.view_on_osm'|trans }}
                            </a>
                        </div>
                    </div>
                    <div class="disclaimer mt-3 p-3 bg-light rounded">
                        <p class="mb-0">
                            <strong>{{ 'display.disclaimer.title'|trans }}:</strong>
                            {{ 'display.disclaimer.text'|trans }}
                        </p>
                    </div>
                </div>
            </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 = [];
            document.querySelectorAll('.is-invalid').forEach(input => {
                input.classList.remove('is-invalid');
            });
            
            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');
            }

            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');
                }
            }

            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');
                }
            }

            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: 17
        }); 

        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 %}

        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);

            document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
        }

        document.querySelectorAll('input[type="text"]').forEach(input => {
            input.addEventListener('blur', updateCompletionProgress);
        });

        document.querySelector('form').addEventListener('submit', check_validity);
        document.addEventListener('DOMContentLoaded', updateCompletionProgress);
 
        
    </script> 
{% endblock %}
{% endblock %}