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

{% block head %}
    {{ parent() }}
    <style>
        .accueilImgDiv   {
            background-image: url("/SiteEolia/public/assets/img/omaha-main.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
        }
        body {
            background-color: #252c30;
        }
        a {
            color: white;
        }
        a:hover {
            color: white;
        }
    </style>
{% endblock %}

{% block title %}
    {{ parent() }}
{% endblock %}

{% block header %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="container-fluid min-vh-100 accueilImgDiv">
        {# Partie centrale contenant le titre #}
        <div class="row min-vh-50">
            <div class="d-flex justify-content-center align-content-center">
                <img class="imgEoliaMain" src="/SiteEolia/public/assets/img/logo-eolia-normandie.png">
            </div>
        </div>
        <div class="row min-vh-50 d-flex align-items-center">
            <div class="col text-center">
                <button class="btn-custom accueil text-center"><a href="{{ path('centre') }}">Faire</a>
                </button>
            </div>
            <div class="col text-center">
                <button class="btn-custom accueil text-center"><a href="{{ path('centre') }}">Manger</a>
                </button>
            </div>
        </div>
    </div>
    <!-- Footer Start -->
    <div class="container-fluid bg-dark footer mt-5 py-5 wow fadeIn" data-wow-delay="0.1s">
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-lg-3 col-md-6">
                    <h4 class="text-primary mb-4">Nous contacter</h4>
                    <p class="mb-2"><i class="fa fa-map-marker-alt text-primary me-3"></i>14710, Colleville-sur-mer</p>
                    <p class="mb-2"><i class="fa fa-phone-alt text-primary me-3"></i>02 31 22 26 21</p>
                    <p class="mb-2"><i class="fa fa-envelope text-primary me-3"></i>eolia-normandie@orange.fr</p>
                    <div class="d-flex pt-3">
                        <a class="btn btn-square btn-primary rounded-circle me-2" href="https://www.facebook.com/eolianormandie?locale=fr_FR"><i class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-square btn-primary rounded-circle me-2" href=""><i class="fab fa-whatsapp"></i></a>
                        <a class="btn btn-square btn-primary rounded-circle me-2" href=""><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h4 class="text-primary mb-4">Heures d'ouverture</h4>
                    <p class="mb-1">Lundi - Dimanche</p>
                    <h6 class="text-light">Horaires pour :</h6>
                    <p class="mb-1">Restauration</p>
                    <h6 class="text-light">12:00 - 18:00</h6>
                    <p class="mb-1">EOLIA NORMANDIE</p>
                    <h6 class="text-light">9:30 - 17:30</h6>
                </div>
                <div class="col-lg-6">
                    <script src="https://widget.trustmary.com/5ysbLRy-J"></script>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer End -->
    <script>
        window.onload = function () {

            var backgroundImg = [
                "/SiteEolia/public/assets/img/omaha-main.jpg",
                "/SiteEolia/public/assets/img/c-est-fun-de-faire-du-char-a-voile.jpg",
                "/SiteEolia/public/assets/img/omaha-main.jpg",
                "/SiteEolia/public/assets/img/RESTO-EOLIA.jpg"
            ];

            var currentImageIndex = 1;

            setInterval(changeImage, 3000);

            function changeImage() {
                if (currentImageIndex === backgroundImg.length) {
                    currentImageIndex = 0;
                }

                // Je cible l'émément .nomDeLaClasse
                var targetElement = document.querySelector('.accueilImgDiv');

                // Je vérifie que l'élément existe pour éviter les erreurs.
                if (targetElement) {
                    targetElement.style.backgroundImage = "url('" + backgroundImg[currentImageIndex] + "')";
                }

                currentImageIndex++;
            }
        };
    </script>
{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}