{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeAc %}main-menu-active{% endblock %}
{% block titre %}Evenements{% 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;
            left: 34%;
            width: 150px;
            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;
        }

     </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;">Évenements</h3>
        </div>
    </div>

    {# <section class="row" style='display:flex;justify-content: space-between;width:100%'>

       <div class='col-md-5' style='display: flex;justify-content: center;margin:2%'>
        <div style='box-shadow: 0px 0px 8px 0px #959595;border-radius: 25px;padding:5%;width:100%;background: white;'> 
           <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h3 class="heading-92913 text-black text-center">Évènements à venir</h3>
                </div>
            </div>

           <div style='border:1px solid lightgrey;margin:2%;height:500px'>
                  
                <div>
                    <div>
                        <ul id="image-gallery-slider-htPC" class="gallery list-unstyled cS-hidden">
                            {% for e in evenementsFut %}
                            <a href="/fr/detailsEvenement/{{ e.id }}/" style='cursor:pointer'>
                                <div style='position:relative;'>
                                    {% if e.imgPrincipal!='' %}
                                    <img style='height:400px;' src="{{ asset(e.imgPrincipal) }}" class="img-fluid" alt="">
                                    {% else %}
                                    <img style='height:400px;' src="{{ asset("/assets/Backoffice/images/fcpm.png") }}" class="img-fluid" alt="">
                                    {% endif %}
                                    <div style='position:absolute;top: 00%;text-align:center;width:100%;text-align:center;font-size:14px'><span style='padding:2%;color:white;padding: 1% 5% 1% 5%;border-radius: 20px ;background: #ff0e37;transform: skewX(-0deg);'>{{ e.dateEvenement|date("d-m-Y") }}</span></div>
                                    <div style='position:absolute;bottom:0%;text-align:center;width:100%;font-size:16px;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.49653364763874297) 31%, rgba(0,0,0,0.7262255243894433) 64%, rgba(0,0,0,1) 100%);color:white;padding:2%'>{{ e.titreFr }}</div>
                                </div> 
                            </a>
                            {% endfor %}
                        </ul>
                    </div>
                </div>

           </div>

         </div>
       </div>


       <div class='col-md-5' style='display: flex;justify-content: center;;margin:2%'>
        <div style='box-shadow: 0px 0px 8px 0px #959595;border-radius: 25px;padding:5%;width:100%;background: white;'>  
           <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h3 class="heading-92913 text-black text-center">Évènements passés</h3>
                </div>
            </div>

           <div style='border:1px solid lightgrey;margin:2%;height:500px'>
                <div>
                    <div>
                        <ul id="image-gallery-slider-htPC1" class="gallery list-unstyled cS-hidden">
                            {% for e in evenementsPass %}
                            <a href="/fr/detailsEvenement/{{ e.id }}/" style='cursor:pointer'>
                                <div style='position:relative;' >
                                    {% if e.imgPrincipal!='' %}
                                    <img style='height:400px;' src="{{ asset(e.imgPrincipal) }}" class="img-fluid" alt="">
                                    {% else %}
                                    <img style='height:400px;' src="{{ asset("/assets/Backoffice/images/fcpm.png") }}" class="img-fluid" alt="">
                                    {% endif %}
                                    <div style='position:absolute;top: 00%;text-align:center;width:100%;text-align:center;font-size:14px'><span style='padding:2%;color:white;padding: 1% 5% 1% 5%;border-radius: 20px ;background: #ff0e37;transform: skewX(-0deg);'>{{ e.dateEvenement|date("d-m-Y") }}</span></div>
                                    <div style='position:absolute;bottom:0%;text-align:center;width:100%;font-size:16px;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.49653364763874297) 31%, rgba(0,0,0,0.7262255243894433) 64%, rgba(0,0,0,1) 100%);color:white;padding:2%'>{{ e.titreFr }}</div>
                                </div> 
                            </a>
                            {% endfor %}
                        </ul>
                    </div>
                </div>

           </div>

        
        </div>
       </div>


    </section> #}
    
    <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">Évènements à venir</h3>
            </div>
        </div>
        <div class="event-gallery-wrapper">
            <ul id="image-gallery-slider-htPC" class="gallery cS-hidden">
            {% for e in evenementsFut %}
            <li>
                <a href="/fr/detailsEvenement/{{ e.id }}/" class="gallery-item">
                <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.titreFr }}</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">Évènements passés</h3>
            </div>
        </div>
        <div class="event-gallery-wrapper">
            <ul id="image-gallery-slider-htPC1" class="gallery cS-hidden">
            {% for e in evenementsPass %}
            <li>
                <a href="/fr/detailsEvenement/{{ e.id }}/" class="gallery-item">
                <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.titreFr }}</div>
                </div>
                </a>
            </li>
            {% endfor %}
            </ul>
        </div>
        </div>
    </div>
    </section>


 

{% endblock %}
{% block js %}

    {# <script type="text/javascript" src="{{  asset('bundles/Backoffice/js/noty/packaged/jquery.noty.packaged.min.js') }}"></script>
    <script src="{{  asset('bundles//FrontofficeFr/assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
     <script src="{{  asset('bundles//FrontofficeFr/assets/vendor/swiper/swiper-bundle.min.js') }}"></script>

    <script type="text/javascript" src="{{ asset("/assets/Backoffice/js/tinymce/tinymce.min.js") }}"></script>

    <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 type="text/javascript">

    $(document).ready(function() {
            $('#image-gallery-slider-htPC').lightSlider({
                item:1,
                thumbItem:9,
                slideMargin: 0,
                speed:500,
                pause: 5000,
                auto:true,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery-slider-htPC').removeClass('cS-hidden');
                }
            });

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

        });
    </script> #}

    <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,
            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,
            auto: true,
            loop: true,
            pause: 4000,
            onSliderLoad: function () {
                $('#image-gallery-slider-htPC1').removeClass('cS-hidden');
            },
            });
        });
    </script>

{% endblock %}