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

{% block title %}{{ 'display.title'|trans }} {{ commerce_overpass.tags_converted.name }}{% endblock %}


{% block body %}
    <div class="container edit-land mt-4" id="editLand">

        <div class="card shadow-sm">
            <div class="card-body">


                <fieldset class="d-none">
                            <pre>
                                {{ dump(commerce_overpass.tags_converted ) }}
                            </pre>
                </fieldset>
                <h1 class="card-title h2 mb-4">
                    {{ 'display.welcome'|trans }}
                    {% set main_tag = commerce.mainTag is defined and commerce.mainTag is not empty ? commerce.mainTag : (commerce_overpass.tags_converted.main_tag is defined ? commerce_overpass.tags_converted.main_tag : null) %}
                    {% if main_tag %}
                        {{ tag_emoji(main_tag) }}
                    {% endif %}
                    {% if commerce_overpass.tags_converted.name is defined %}
                        {{ commerce_overpass.tags_converted.name }}

                    {% endif %}
                    {% if commerce.stats.name is defined %}
                        - {{ commerce.stats.name }}
                    {% endif %}
                </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">

                        <div id="main_name" 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"
                                       data-important="true"
                                       value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% endif %}">

                            </div>
                        </div>

                        {% include 'public/edit/address.html.twig' %}
                        <input type="hidden" name="osm_kind" value="{{ osm_kind }}">
                        <fieldset class="input-group mb-2 phone-group">


                            <div class="input-group mb-2">
                                    <span class="input-group-text" style="width: 10rem;">
                                        <i class="bi bi-phone me-2"></i>
                                        Téléphone
                                    </span>
                                <input type="text" class="form-control"
                                       id="commerce_tag_value__contact:phone"
                                       name="commerce_tag_value__contact:phone"
                                       data-important="true"
                                       value="{{ commerce_overpass.tags_converted['contact:phone'] ?? '' }}"
                                       placeholder="+33 1 23 45 67 89">
                            </div>

                        </fieldset>
                        <fieldset>
                            <div id="email" class="row mb-3 ">
                                <div class="col-md-5">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-envelope me-2"></i>
                                        <span class="label-translated" title="contact:email">Email</span>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="input-group">
                                        <input type="text" class="form-control"
                                               data-important="true"
                                               id="commerce_tag_value__contact:email"
                                               name="commerce_tag_value__contact:email"
                                               value="{{ commerce_overpass.tags_converted['contact:email'] ?? '' }}">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div id="email" class="row mb-3 ">
                                <div class="col-md-5">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-envelope me-2"></i>
                                        <span class="label-translated" title="contact:website">Site Web du lieu</span>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="input-group">
                                        <input type="text" class="form-control"
                                               data-important="true"
                                               id="commerce_tag_value__contact:website"
                                               name="commerce_tag_value__contact:website"
                                               value="{{ commerce_overpass.tags_converted['contact:website'] ?? '' }}">
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <fieldset>
                            <div id="mastodon" class="row mb-3 ">
                                <div class="col-md-5">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-mastodon me-2"></i>
                                        <span class="label-translated" title="contact:mastodon">Contact Mastodon</span>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="input-group">
                                        <input type="text" class="form-control"
                                               data-important="true"
                                               id="commerce_tag_value__contact:mastodon"
                                               name="commerce_tag_value__contact:mastodon" value="">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        {% include 'public/edit/opening_hours.html.twig' %}


                        <div id="images">
                            {% if commerce_overpass.tags_converted.image is defined and commerce_overpass.tags_converted.image|length > 0 %}
                                <img class="img-fluid img-thumbnail mb-3" style="height: 500px; width: auto;"
                                     src="{{ commerce_overpass.tags_converted.image }}"/>
                            {% endif %}

                            <label for="commerce_tag_value__image" class="form-label">URL de l'image de la
                                façade</label>
                            <input type="text" class="form-control mb-2" id="commerce_tag_value__image"
                                   name="commerce_tag_value__image"
                                   value="{{ commerce_overpass.tags_converted.image is defined ? commerce_overpass.tags_converted.image : '' }}"
                                   placeholder="https://...">
                            {% if commerce_overpass.tags_converted.image is defined and commerce_overpass.tags_converted.image|length > 0 %}
                                <img src="{{ commerce_overpass.tags_converted.image }}" alt="Image de la façade"
                                     class="img-fluid img-thumbnail mb-2" style="max-height:200px;">
                            {% endif %}
                            {{ commerce_overpass.tags_converted.image }}


                            {% if commerce_overpass.tags_converted.panoramax is defined or commerce_overpass.tags_converted.wikimedia_commons is defined %}
                                <input type="text" class="form-control" name="commerce_tag_value__image"
                                       value="{{ commerce_overpass.tags_converted.image }}">
                                url d'image sur Panoramax : {{ commerce_overpass.tags_converted.panoramax is defined ? commerce_overpass.tags_converted.panoramax : '' }}
                                <input type="text" class="form-control" name="commerce_tag_value__panoramax"
                                       value="{{ commerce_overpass.tags_converted.panoramax is defined ? commerce_overpass.tags_converted.panoramax : '' }}">

                                wikimedia_commons:
                                <input type="text" class="form-control" name="commerce_tag_value__wikimedia_commons"
                                       value="{{ commerce_overpass.tags_converted.wikimedia_commons is defined ? commerce_overpass.tags_converted.wikimedia_commons : '' }}">
                            {% endif %}
                        </div>


                        {% if commerce_overpass.tags_converted.amenity is defined and (commerce_overpass.tags_converted.amenity == 'restaurant' or commerce_overpass.tags_converted.amenity == 'bar' or commerce_overpass.tags_converted.amenity == 'cafe' or commerce_overpass.tags_converted.amenity == 'fast_food') %}
                            {% include 'public/edit/restaurant.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 d-none">
                                   opening_hours {{ 'display.already_filled'|trans }}
                                </span>
                        {% endif %}


                        {% include 'public/edit/clim.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 d-none">
                                    {{ 'display.already_filled'|trans }}
                                </span>

                        {% endif %}


                        {% 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 d-none ">
                                    {{ 'display.already_filled'|trans }}
                                </span>
                        {% endif %}
                        {% include 'public/edit/ask_angela.html.twig' %}
                        {% include 'public/edit/wheelchair.html.twig' %}



                        {% include 'public/edit/social_media.html.twig' %}

                        {% include 'public/edit/tags.html.twig' %}

                        {#                        <div class="mb-4" id="previsualisation_tags"> #}
                        {#                            <h4>Prévisualisation des tags OSM (texte à copier-coller)</h4> #}
                        {#                            {% set tags_for_textarea = {} %} #}
                        {#                            {% for k, v in commerce_overpass.tags_converted %} #}
                        {#                                {% if v is not empty %} #}
                        {#                                    {% set tags_for_textarea = tags_for_textarea|merge({ (k): v }) %} #}
                        {#                                {% endif %} #}
                        {#                            {% endfor %} #}
                        {#                            {% include 'public/_tags_textarea.html.twig' with { 'tags': tags_for_textarea } %} #}
                        {#                        </div> #}

                        <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 btn-lg 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 mb-4 mx-2">

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

                <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 mt-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 mr-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 }}">{{ commerce_overpass['@attributes'].user }}</a>
                        </div>
                        <div class="lien-OpenStreetMap">
                            <a href="https://www.openstreetmap.org/{{ commerce.osmKind }}/{{ commerce_overpass['@attributes'].id }}"
                               class="btn btn-outline-secondary">
                                <i class="bi bi-globe"></i> {{ 'display.view_on_osm'|trans }}
                                <i class="bi bi-map"></i>
                                {#                                <img src="{{ asset('img/logo-osm.png') }}" alt="logo OpenStreetMap" #}
                                {#                                     class="img-fluid thumbnail"> #}
                            </a>
                            <button onclick="openInJOSM('{{ commerce.osmKind }}', '{{ commerce_overpass['@attributes'].id }}')"
                                    title="Ouvrir dans JOSM"
                                    class="btn btn-outline-secondary ms-2">
                                <i class="bi bi-pencil"></i>
                                <img src="{{ asset('img/josm.png') }}" alt="JOSM" class="img-fluid thumbnail">
                            </button>
                            <button onclick="openInPanoramax()" title="Ouvrir dans Panoramax"
                                    class="btn btn-outline-secondary ms-2">
                                <i class="bi bi-camera"></i>

                                <img src="{{ asset('img/panoramax.svg') }}" alt="Panoramax" class="img-fluid thumbnail">

                            </button>
                        </div>

                        {% if commerce.stats %}
                            <a href="{{ path('app_admin_stats', {'insee_code': commerce.stats.zone}) }}"
                               class="btn btn-outline-secondary">
                                <i class="bi bi-bar-chart"></i> zone {{ commerce.stats.zone }}
                            </a>
                        {% endif %}

                        <a href="{{ path('app_public_dashboard' ) }}" class="btn btn-outline-secondary">
                            <i class="bi bi-bar-chart"></i> Dashboard
                        </a>
                    </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>

{% endblock %}
{% block completion_progress %}
    <div id="completion_progress" class="">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div id="completion_display" class="mb-2"></div>
                </div>
                <div class="col-6">
                    <div class="progress" role="progressbar" aria-label="Progression de complétion" aria-valuenow="0"
                         aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
    {% block javascripts %}
        {{ parent() }}
        <script src="{{ asset('js/mapbox/mapbox-gl.js') }}"></script>
        <script src='{{ asset('js/utils.js') }}'></script>
        <script>
            {% 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 }}';
				    let 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 %}


				    // Ajouter un écouteur d'événement pour le redimensionnement de la fenêtre
				    window.addEventListener('resize', () => {
					    updateMapHeightForLargeScreens();
				    });


				    /**
				     * indiquer la complétion des champs importants dans ce formulaire
				     * @param e
				     */
				    function check_validity(e) {

					    list_inputs_good_to_fill = [
						    'input[name="commerce_tag_value__name"]',
						    'input[name="commerce_tag_value__contact:email"]',
						    'input[name="commerce_tag_value__contact:phone"]',
						    'input[name="commerce_tag_value__contact:website"]',
						    'input[name="commerce_tag_value__contact:mastodon"]',
						    'input[name="commerce_tag_value__address"]',
						    'input[name="custom_opening_hours"]',
						    'input[name="commerce_tag_value__contact:street"]',
						    'input[name="commerce_tag_value__contact:housenumber"]',
						    'input[name="custom__cuisine"]',
					    ]

					    list_inputs_good_to_fill.forEach(selector => {
						    const input = document.querySelector(selector);
						    if (input) {
							    if (input.value.trim() !== '') {
								    input.classList.add('good_filled');
							    } else {
								    input.classList.remove('good_filled');
							    }
						    }
					    });
					    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');
						    }
					    }

					    // Collect all missing important fields
					    const missingImportantFields = [];
					    list_inputs_good_to_fill.forEach(selector => {
						    const input = document.querySelector(selector);
						    if (input && input.value.trim() === '') {
							    // Get the field label or name for display
							    let fieldName = '';
							    const label = input.closest('.row')?.querySelector('.form-label, .label-translated');
							    if (label) {
								    fieldName = label.textContent.trim();
							    } else {
								    // If no label found, try to get a meaningful name from the input
								    const name = input.getAttribute('name');
								    if (name) {
									    // Extract field name from the attribute (e.g., commerce_tag_value__contact:email -> Email)
									    const parts = name.split('__');
									    if (parts.length > 1) {
										    fieldName = parts[1].replace('commerce_tag_value_', '').replace('contact:', '');
										    // Capitalize first letter
										    fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
									    } else {
										    fieldName = name;
									    }
								    }
							    }
							    missingImportantFields.push(fieldName || input.getAttribute('name') || 'Champ inconnu');
						    }
					    });

					    if (errors.length > 0 || missingImportantFields.length > 0) {
						    e.preventDefault();

						    // Format missing fields as an HTML list for better readability
						    let missingFieldsContent = '';
						    if (missingImportantFields.length > 0) {
							    // Filter out empty or undefined field names and sort them alphabetically
							    const filteredMissingFields = missingImportantFields
								    .filter(field => field && field.trim() !== '')
								    .sort();

							    // Create the HTML content for the popover
							    missingFieldsContent = '<ul class="list-unstyled mb-0">';
							    filteredMissingFields.forEach(field => {
								    missingFieldsContent += `<li><i class="bi bi-exclamation-circle text-warning"></i> ${field}</li>`;
							    });
							    missingFieldsContent += '</ul>';
						    }

						    // Display validation errors
						    let validationMessage = '';
						    if (errors.length > 0) {
							    validationMessage += errors.join('<br>');
						    }

						    // Add information about missing fields with a popover
						    if (missingImportantFields.length > 0) {
							    if (validationMessage) {
								    validationMessage += '<br>';
							    }
							    validationMessage += `Champs manquants: ${missingImportantFields.length} <a href="#" class="missing-fields-info badge rounded-pill bg-warning text-dark ms-1" style="text-decoration: none; font-weight: bold;" data-bs-toggle="popover" data-bs-placement="bottom" title="Champs manquants" data-bs-html="true" data-bs-content="${missingFieldsContent.replace(/"/g, '&quot;')}">?</a>`;
						    }

						    document.querySelector('#validation_messages').innerHTML = validationMessage;
						    document.querySelector('#validation_messages').classList.remove('d-none');
						    document.querySelector('#validation_messages').classList.add('is-invalid');

						    // Initialize the Bootstrap popover
						    const popoverTrigger = document.querySelector('.missing-fields-info');
						    if (popoverTrigger) {
							    // Add click handler to focus on the first missing field
							    popoverTrigger.addEventListener('click', function (e) {
								    e.preventDefault(); // Prevent scrolling to top

								    // Find the first missing field from the list_inputs_good_to_fill
								    let firstMissingField = null;
								    for (const selector of list_inputs_good_to_fill) {
									    const input = document.querySelector(selector);
									    if (input && input.value.trim() === '') {
										    firstMissingField = input;
										    break;
									    }
								    }

								    if (firstMissingField) {
									    // Focus on the first missing field
									    firstMissingField.focus();
									    // Scroll to the field if needed
									    firstMissingField.scrollIntoView({behavior: 'smooth', block: 'center'});
								    }
							    });

							    // Use setTimeout to ensure this runs after the current execution context
							    setTimeout(() => {
								    if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
									    // Destroy existing popover if any
									    const existingPopover = bootstrap.Popover.getInstance(popoverTrigger);
									    if (existingPopover) {
										    existingPopover.dispose();
									    }
									    // Initialize new popover
									    new bootstrap.Popover(popoverTrigger, {
										    html: true,
										    trigger: 'click',
										    container: 'body'
									    });
								    }
							    }, 0);
						    }
					    }
				    }

				    check_validity ? check_validity() : null;

        </script>
    {% endblock %}