{% extends 'FrontofficeAr/base.html.twig' %}
{% block activeAc %}main-menu-active{% endblock %}
{% block titre %}أحداث{% endblock %}
{% block body %}
    <link rel="stylesheet" href="{{ asset("/assets/Backoffice/css/animate.min.css") }}" type="text/css" />
    <link rel="stylesheet" href="{{ asset("assets/FrontofficeFr/assets/vendor/swiper/swiper-bundle.min.js") }}" type="text/css" />
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/FrontofficeFr/css/lightslider.css') }}" />

     <style>
        .events-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2rem;
        margin-top: 2rem;
        }

        .event-column {
        flex: 1 1 48%;
        display: flex;
        justify-content: center;
        }

        .event-box {
        width: 100%;
        background: white;
        border-radius: 25px;
        padding: 5%;
        box-shadow: 0 0 8px #959595;
        }

        .heading-92913 {
        font-size: 1.6rem;
        font-weight: bold;
        color: #000;
        }

        .event-gallery-wrapper {
        margin-top: 1.5rem;
        height: 500px;
        overflow: hidden;
        border-radius: 10px;
        }

        .gallery {
        list-style: none;
        padding: 0;
        margin: 0;
        }

        .gallery-item {
        text-decoration: none;
        color: inherit;
        }

        .gallery-image-wrapper {
        position: relative;
        }

        .gallery-image-wrapper img {
        height: 400px;
        width: 100%;
        object-fit: cover;
        border-radius: 10px;
        }
        .event-title {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: white;
        padding: 2%;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.8) 70%,
            rgba(0, 0, 0, 1) 100%
        );
        border-radius: 0 0 10px 10px;
        }

        /* Responsive */
        @media screen and (max-width: 768px) {
        .events-section {
            flex-direction: column;
        }

        .event-column {
            flex: 1 1 100%;
        }
        }

        .heading-92913:after {
            content: "";
            position: absolute;
            bottom: 15px;
            right: 40%;
            width: 80px;
            height: 4px;
            background: #3c70b3;
        }

        .event-date {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: #e8b154;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 15px;
            z-index: 10;
            font-weight: 600;
        }

        .gallery li {
            display: inline-block;
            margin: 0 5px;
            direction: rtl; /* Important pour que le contenu s'aligne bien */
        }

     </style>

    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">أحداث</h3>
        </div>
    </div>

    <section class="events-section row" >
        <div class="event-column col-md-5">
            <div class="event-box">
            <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h3 class="heading-92913 text-black text-center">أحداث قادمة</h3>
                </div>
            </div>
            <div class="event-gallery-wrapper" >
                <ul id="image-gallery-slider-htPC" class="gallery cS-hidden">
                    {% for e in evenementsFut %}
                        <li class="gallery-item">
                            <a href="/ar/detailsEvenement/{{ e.id }}/">
                                <div class="gallery-image-wrapper">
                                {% if e.imgPrincipal != '' %}
                                <img src="{{ asset(e.imgPrincipal) }}" alt="" class="img-fluid" />
                                {% else %}
                                <img src="{{ asset('/assets/Backoffice/images/fcpm.png') }}" alt="" class="img-fluid" />
                                {% endif %}
                                <div class="event-date">{{ e.dateEvenement|date("d-m-Y") }}</div>
                                <div class="event-title">{{ e.titreAr }}</div>
                                </div>
                            </a>
                        </li>
                    {% endfor %}
                </ul>

            </div>
            </div>
        </div>

        <div class="event-column col-md-5">
            <div class="event-box">
            <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h3 class="heading-92913 text-black text-center">أحداث سابقة</h3>
                </div>
            </div>
            <div class="event-gallery-wrapper">
                <ul id="image-gallery-slider-htPC1" class="gallery cS-hidden">
                    {% for e in evenementsPass %}
                        <li class="gallery-item">
                            <a href="/ar/detailsEvenement/{{ e.id }}/">
                                <div class="gallery-image-wrapper">
                                {% if e.imgPrincipal != '' %}
                                <img src="{{ asset(e.imgPrincipal) }}" alt="" class="img-fluid" />
                                {% else %}
                                <img src="{{ asset('/assets/Backoffice/images/fcpm.png') }}" alt="" class="img-fluid" />
                                {% endif %}
                                <div class="event-date">{{ e.dateEvenement|date("d-m-Y") }}</div>
                                <div class="event-title">{{ e.titreAr }}</div>
                                </div>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            </div>
        </div>
    </section>

{% endblock %}
{% block js %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="{{ asset('assets/FrontofficeFr/js/lightslider.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#image-gallery-slider-htPC').lightSlider({
                item: 1,
                rtl: true,
                slideMargin: 0,
                speed: 600,
                auto: true,
                loop: true,
                pause: 4000,
                onSliderLoad: function () {
                    $('#image-gallery-slider-htPC').removeClass('cS-hidden');
                },
            });

            $('#image-gallery-slider-htPC1').lightSlider({
                item: 1,
                slideMargin: 0,
                speed: 600,
                rtl: true,
                auto: true,
                loop: true,
                pause: 4000,
                onSliderLoad: function () {
                    $('#image-gallery-slider-htPC1').removeClass('cS-hidden');
                },
            });


        });
    </script>
{% endblock %}