{% extends 'base.html.twig' %}
{% block title %}Contact{% endblock %}
{% block head %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.6/build/css/intlTelInput.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.6/build/js/intlTelInput.min.js"></script>
{% endblock %}
{% block body %}
    <nav aria-label="breadcrumb" class="mt-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('accueil') }}">Accueil</a></li>
            <li class="breadcrumb-item" aria-current="page">Contact</li>
        </ol>
    </nav>
    <div class="titre_contact">
        <h1> Page contact </h1>
    </div>

    {# Message de confirmation personnalisé, sans Bootstrap, juste au-dessus du formulaire #}
    {% set successMessages = app.session.flashbag.get('success') %}
    {% if successMessages %}
        <div class="confirmation-custom">
            {% for message in successMessages %}
                <span class="confirmation-custom-text">{{ message }}</span>
            {% endfor %}
        </div>
    {% endif %}

    <form method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="col-12 email">
                <label class="email" for="email">Email:</label>
                <input type="email" class="form-control-email" id="email" name="email" required>
            </div>
            <div class="col-12 telephone">
                <label class="telephone" for="telephone">Téléphone:</label>
                <input type="tel" class="form-control-telephone" id="telephone" name="telephone">
            </div>
            <div class="col-6 nom">
                <label class="nom" for="nom">Nom:</label>
                <input type="text" class="form-control-nom" id="nom" name="nom" required>
            </div>
            <div class="col-6 prenom">
                <label class="prenom" for="prenom">Prénom:</label>
                <input type="text" class="form-control-prenom" id="prenom" name="prenom" required>
            </div>
            <div class="col-12 message">
                <label class="message" for="message">Message:</label>
                <textarea class="form-control-message" id="message" name="message" rows="5"></textarea>
            </div>
            <div class="col-12 fichier">
                <label class="fichier" for="fichier">Importer un fichier:</label>
                <input type="file" class="form-control-fichier" id="fichier" name="fichier">
            </div>
        </div>
        <div class="cgu">
            <input type="checkbox" id="cgu" name="cgu" required>
            <label class="cgu" for="cgu">J'accepte les conditions générales d'utilisation</label>
        </div>
        <button type="submit" class="envoyer">Envoyer</button>
    </form>

    <div class="row contact_info">
        <div class="col-md-4">
            <h2>Adresse</h2>
            <p>123 Rue de la Formation,<br>
            75000 Paris,<br>
            France</p>
        </div>
        <div class="col-md-4">
            <h2>Téléphone</h2>
            <p>+33 1 23 45 67 89</p>
        </div>
        <div class="col-md-4">
            <h2>Email</h2>
            <p>exemple@exemple.com</p>
        </div>
    </div>

    <div class="map">
        <h2>Localisation</h2>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2707.5921751738433!2d-2.247634123165299!3d47.2636775115945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480568aef2144919%3A0xab39df13ef6743be!2s3%20All.%20des%20Orchid%C3%A9es%2C%2044600%20Saint-Nazaire!5e0!3m2!1sfr!2sfr!4v1747837102041!5m2!1sfr!2sfr" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <button id="scrollToTop">
        ↑
    </button>

    <script>
        const scrollToTopButton = document.getElementById('scrollToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 200) {
                scrollToTopButton.style.display = 'block';
            } else {
                scrollToTopButton.style.display = 'none';
            }
        });

        scrollToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        const input = document.querySelector("#telephone");
        // Initialise le plugin intl-tel-input sur l'input sélectionné
        const iti = window.intlTelInput(input, {
            initialCountry: "fr", // Définit la France comme pays par défaut
            nationalMode: false, // Utilise le format international plutôt que national
            formatOnDisplay: true, // Formate le numéro affiché dans l'input
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.6/build/js/utils.js"// Charge le script utilitaire pour les fonctionnalités avancées
        });

        // Format le numéro à l'envoi du formulaire
        document.querySelector("form").addEventListener("submit", function(e) {
            // Remplace la valeur de l'input par le numéro formaté en international avant l'envoi
            input.value = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
        });
    </script>
    <style>

        body.container,form.row.col-12.telephone,input {
            width: 100%;
        }

        .iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
            width: 100%;
        }

        .iti {
            width: 100%;
            margin-bottom: 50px;
        }

        .iti__flag-container {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .iti__selected-flag {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .form-control-telephone {
            padding-left: 58px !important; /* espace pour le drapeau */
            height: 38px;
            display: block;
            margin-bottom: 0;
        }

        .iti input.iti__tel-input {
            height: 38px;
            line-height: 38px;
            padding-top: 0;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
        }
    </style>
{% endblock %}