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

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

{% block body %}
<style>
/* CSS personnalisé */
  .slider {
    width: 80%;
    max-width: 600px;
    position: relative;
  }
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .slide img {
    width: 100%;
    display: block;
    border-radius: 10px;
  }
  .slide.active {
    opacity: 1;
  }
</style>

<div class="bg-gray-50 text-gray-900">
    <div class="py-8 px-4 bg-gray-50">
        <div class="container mx-auto flex flex-col lg:flex-row justify-between items-center ">
            <div class="mb-8 bg-white shadow-lg rounded-lg p-6 w-full lg:w-1/2 mx-10 my-10">
                <h1 class="text-4xl lg:text-3xl font-bold text-gray-800 mb-6 text-center">Bienvenue au Comptoir de la Poste</h1>
                <p class="text-3xl lg:text-2xl text-gray-700 mb-6 mx-4">
                    Situé au cœur de Foucarmont, dans le département de la Seine Maritime, le Comptoir de la Poste vous accueille dans un cadre chaleureux et authentique. Ce charmant village niché en Normandie, est le reflet parfait du patrimoine français et de la richesse de sa gastronomie.
                </p>
                <p class="text-3xl lg:text-2xl text-gray-700 mb-6 mx-4">
                    Avec ses paysages bucoliques et son histoire marquée par des siècles de traditions, nous sommes au sein d'un département où la culture culinaire est vénérée. L'empreinte gastronomique de cette région se retrouve dans chaque plat que nous servons.
                </p>
                <p class="text-3xl lg:text-2xl text-gray-700 mb-6 mx-4">
                    Au Comptoir de la Poste, nous vous invitons à découvrir l'essence même de la cuisine française traditionnelle. Nos menus sont préparés avec des ingrédients frais et de saison, dans le respect des savoir-faire français. Nous nous réjouissons de vous faire vivre une expérience culinaire inoubliable.
                </p>
            </div>

            <div class="swiper-container main-slider w-full lg:w-1/2 relative overflow-hidden h-96 mx-10 mb-10">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="{{ asset('images/slider/plat2.jpg') }}" alt="Plat 2" class="rounded-lg w-full h-full object-cover"></div>
                    <div class="swiper-slide"><img src="{{ asset('images/slider/plat1.jpg') }}" alt="Plat 1" class="rounded-lg w-full h-full object-cover"></div>
                    <div class="swiper-slide"><img src="{{ asset('images/slider/plat3.jpg') }}" alt="Plat 3" class="rounded-lg w-full h-full object-cover"></div>
                    <div class="swiper-slide"><img src="{{ asset('images/slider/plat4.jpg') }}" alt="Plat 4" class="rounded-lg w-full h-full object-cover"></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Navigation -->
            </div>
        </div>
    </div>

    <div class="container mx-auto">
    <div class="mb-10">
        <h2 class="text-4xl lg:text-3xl font-bold text-gray-800 mb-6 text-center">Best Sellers</h2>
        <div class="flex mx-4">
            {% for menu in menu %}
                {% if menu.bestSeller == true %}
                <div class="w-full lg:w-1/2 px-4 mb-6 flex flex-col">
                    <div class="bg-white border-4 border-yellow-300 shadow-md rounded-lg p-6 flex flex-col h-full w-full">
                        <h2 class="text-4xl lg:text-2xl text-center font-semibold mb-4">{{ menu.title }}</h2>
                        <div class="flex flex-col flex-1">
                            <div class="lg:w-1/2 w-full mb-4 lg:mb-0 lg:pr-4">
                                <p class="text-3xl lg:text-base text-gray-700 mb-2">
                                    <strong class="text-3xl lg:text-base"></strong> {{ menu.description }}
                                </p>
                                <p class="text-3xl lg:text-base text-gray-700 mb-2">
                                    <strong class="text-3xl lg:text-base">Menu valide jusqu'au :</strong> {{ menu.validityEndAt|date('d/m/Y') }}
                                </p>
                                
                                <p class="text-3xl lg:text-base text-blue-500 mb-2">
                                    <strong class="text-3xl lg:text-base text-gray-700">Prix du menu : </strong> <strong>{{ menu.price }} €</strong> 
                                </p>
                            </div>
                            <div class="w-full flex justify-center items-center">
                                {% if menu.images is not empty %}

                                {% set image_count = menu.images|length %}

                                <div class="flex flex-row gap-4 my-4">
                                    {% for image in menu.images %}
                                        {% if image_count == 1 %}
                                            <div class="w-full">
                                                <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                    <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-72 object-cover">
                                                </a>
                                            </div>
                                        {% elseif image_count == 2 %}
                                            <div class="w-1/2">
                                                <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                    <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-72 object-cover">
                                                </a>
                                            </div>
                                        {% elseif image_count == 3 %}
                                            {% if loop.index <= 2 %}
                                                <div class="w-1/2">
                                                    <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                        <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-96 object-cover">
                                                    </a>
                                                </div>
                                            {% elseif loop.index == 3 %}
                                                <div class="w-1/2 flex flex-row">
                                                    <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                        <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-96 object-cover">
                                                    </a>
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                            </div>
                                                  {% else %}
                                    <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                        <span class="text-red-500">Pas d'image</span>
                                    </a>
                                {% endif %}
                                
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

    <div class="mb-10">
        <h2 class="text-4xl lg:text-3xl font-bold text-gray-800 mb-6 text-center">Menus du moment</h2>
        <div class="flex flex-wrap mx-4">
            {% set today = "now"|date("Y-m-d") %}
            {% for menu in menu %}
                {% if not menu.bestSeller and menu.validityStartAt|date("Y-m-d") <= today and menu.validityEndAt|date("Y-m-d") >= today %}
                <div class="w-full lg:w-1/2 px-4 mb-6 flex flex-col">
                    <div class="bg-white shadow-md rounded-lg p-6 flex flex-col h-full w-full">
                        <h2 class="text-4xl lg:text-2xl text-center font-semibold mb-4">{{ menu.title }}</h2>
                        <div class="flex flex-col flex-1">
                            <div class="lg:w-1/2 w-full mb-4 lg:mb-0 lg:pr-4">
                                <p class="text-3xl lg:text-base text-gray-700 mb-2">
                                    <strong class="text-3xl lg:text-base"></strong> {{ menu.description }}
                                </p>
                                <p class="text-3xl lg:text-base text-gray-700 mb-2">
                                    <strong class="text-3xl lg:text-base">Menu valide jusqu'au :</strong> {{ menu.validityEndAt|date('d/m/Y') }}
                                </p>
                                
                                <p class="text-3xl lg:text-base text-blue-500 mb-2">
                                    <strong class="text-3xl lg:text-base text-gray-700">Prix du menu : </strong> <strong>{{ menu.price }} €</strong> 
                                </p>
                            </div>
                            <div class="w-full flex justify-center items-center">
                                {% if menu.images is not empty %}

                                {% set image_count = menu.images|length %}

                                <div class="flex flex-row gap-4 my-4">
                                    {% for image in menu.images %}
                                        {% if image_count == 1 %}
                                            <div class="w-full">
                                                <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                    <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-72 object-cover">
                                                </a>
                                            </div>
                                        {% elseif image_count == 2 %}
                                            <div class="w-1/2">
                                                <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                    <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-72 object-cover">
                                                </a>
                                            </div>
                                        {% elseif image_count == 3 %}
                                            {% if loop.index <= 2 %}
                                                <div class="w-1/2">
                                                    <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                        <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-96 object-cover">
                                                    </a>
                                                </div>
                                            {% elseif loop.index == 3 %}
                                                <div class="w-1/2 flex">
                                                    <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                                        <img src="{{ asset('images/menus/' ~ image.imageName) }}" alt="{{ menu.title }}" class="w-full h-auto max-h-96 object-cover">
                                                    </a>
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                            </div>
                            </div>
                                                  {% else %}
                                    <a href="{{ path('app_menu_show', {'id': menu.id}) }}">
                                        <span class="text-red-500">Pas d'image</span>
                                    </a>
                                {% endif %}
                                
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
</div>

<script>
        var swiper = new Swiper('.main-slider', {
            slidesPerView: 1,
            spaceBetween: 10,
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                320: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 30,
                },
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 30,
                },
                1280: {
                    slidesPerView: 3,
                    spaceBetween: 40,
                },
            },
        });
</script>

{% endblock %}