{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeAc %}main-menu-active{% endblock %}
{% block titre %}{{ evenement.titreFr }}{% endblock %}
{% block body %}
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/FrontofficeFr/css/lightslider.css') }}" />
    <!--<link rel="stylesheet" href="{{ asset("/assets/Backoffice/js/calendar/bootstrap_calendar.css") }}" type="text/css" />-->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css" />

    <style>
        .block_ac {
            padding: 2rem 0;
            background-color: #f9f9f9;
        }

        .block_ac h3 {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .gallery img {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .titlee-page {
            font-size: 1.3rem;
            font-weight: bold;
            color: #0d0d4d;
        }

        .yellowLine {
            width: 60px;
            height: 4px;
            background: gold;
            margin: 0 auto 10px auto;
        }

        .share-container {
            border: 1px solid #ccc;
            border-radius: 30px;
            background: #0d0d4d;
            padding: 1rem;
            max-width: 300px;
            width: 300px;
            margin: 2rem auto;
            color: white;
            text-align: center;
        }

        .share-container a {
            margin: 0 10px;
            color: white;
            font-size: 1.5rem;
            transition: transform 0.2s;
        }

        .share-container a:hover {
            transform: scale(1.2);
        }

        #color-calendar {
            margin: 2rem auto;
        }
        .text-primary {
            --bs-text-opacity: 1;
            color: rgb(60 112 179) !important;
        }
        .lSSlideOuter .lSPager.lSGallery {
            height: 153px !important;
        }
        .lSSlideWrapper {
            max-width: 1000px !important;
            max-height: 781px !important;
            overflow: hidden;
            position: relative;
        }
        @media (max-width: 768px) {
            .block_ac .article-content {
                margin: 0px 20px 12px 20px;
            }

            .block_ac img.img-fluid {
                width: 100% !important;
                height: auto !important;
                margin: 20px 0px 20px 0px;
            }

            #share {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 5px;
                margin-bottom: -25px;
                align-content: stretch;
                flex-direction: row-reverse;
            }

            .block_ac h3 {
                font-weight: bold;
                color: #0d0d4d;
                margin-bottom: 20px;
                text-align: center;
            }
        }
    </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>

    <div class="container-fluid block_ac">
        <div class="row">
            <div class="col-md-12 text-center">
                <h3 class="text-primary">{{ evenement.titreFr }}</h3>
                {% if evenement.imgPrincipal != '' %}
                    {# 
                        <img class="img-fluid my-3" style="max-width: 80%; max-height: 600px;" src="{{ asset(evenement.imgPrincipal) }}" alt="Image principale de l'événement">
                    #}

                     <!-- Vérification si galerie d'images -->
                    {% set ifSlider = false %}
                    {% if img|length > 0 %}
                        {% if img|length == 1 %}
                            {% if img[0].img != evenement.imgPrincipal %}
                                {% set ifSlider = true %}
                            {% endif %}
                        {% else %}
                            {% set ifSlider = true %}
                        {% endif %}
                    {% endif %}

                    {% if ifSlider %}
                        <!-- Galerie d'images -->
                        <div class="col-md-12" >
                            {# <h4 class="text-left">Galerie</h4> #}
                            <ul id="image-gallery-slider-htPC" class="gallery list-unstyled cS-hidden" style="width: 5000px !important; height: 156px !important; padding-bottom: 0%;">
                                {% for s in img %}
                                    <li data-thumb="{{ s.img }}">
                                        <img src="{{ s.img }}" class="img-fluid" alt="Image de la galerie" />
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                {% else %}
                    <img class="img-fluid my-3" style="max-width: 80%; max-height: 600px;" src="{{ asset('/bundles/Backoffice/images/fcpm.png') }}" alt="Image par défaut">
                {% endif %}

                <!-- Description de l'événement -->
                <div class="text-left" style='margin: 5%;margin-top: 0%;'>
                    {{ evenement.textFr|raw }}
                </div>
                <!-- Partage sur les réseaux sociaux -->
                <div class="share-container">
                    <p class="mb-3">Partager sur :</p>
                    <div class="d-flex justify-content-center">
                        <a href="https://www.facebook.com/share.php?u=http://www.fcpm.org.ma/fr/detailsEvenement/{{ evenement.id }}/&title={{ evenement.titreFr }}" target="_blank" aria-label="Partager sur Facebook">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <a href="https://twitter.com/intent/tweet?status={{ evenement.titreFr }}+http://www.fcpm.org.ma/fr/detailsEvenement/{{ evenement.id }}/" target="_blank" aria-label="Partager sur Twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://plus.google.com/share?url=http://www.fcpm.org.ma/fr/detailsEvenement/{{ evenement.id }}/" target="_blank" aria-label="Partager sur Google Plus">
                            <i class="fab fa-google-plus"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Col droite (Affichage du calendrier) -->
            {# <div class="col-md-4">
                <div class="row justify-content-center">
                    <div class="col-md-7 text-center">
                        <h3 class="heading-92913 text-black">Événements</h3>
                    </div>
                </div>
                <div id="color-calendar"></div>
            </div> #}
        </div>
    </div>

{% endblock %}
{% block js %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.min.js"></script>
    <script src="{{ asset('assets/FrontofficeFr/js/lightslider.js') }}"></script>
    <script src="{{ asset("/assets/Backoffice/js/calendar/bootstrap_calendar.js") }}"></script>
    <script>
        $(document).ready(function() {
            $('#image-gallery-slider-htPC').lightSlider({
                gallery:true,
                item:1,
                thumbItem:9,
                slideMargin: 0,
                speed:500,
                pause: 5000,
                auto:true,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery-slider-htPC').removeClass('cS-hidden');
                }
            });
        });

        //----- calendar

        

    const myEvents = [
    {% for e in events %}
      {
        start: '{{ (e.dateEvenement|date("Y")) }}-{{ (e.dateEvenement|date("m")) }}-{{ (e.dateEvenement|date("d")) }}T06:00:00',
        end: '{{ (e.dateEvenement|date("Y")) }}-{{ (e.dateEvenement|date("m")) }}-{{ (e.dateEvenement|date("d")) }}T06:00:00',
        url: '/fr/detailsEvenement/{{ e.id }}/'
        // more key value pairs here
      },
    {% endfor %}
    ];


    {# new Calendar({
    id: '#color-calendar',
    eventsData: myEvents,
    // custom colors
    primaryColor: '#106eea',
    headerBackgroundColor: 'black',
    // small or large
    calendarSize: 'large',
    // an array of layout modifiers
    selectedDateClicked: (currentDate, DateEvents) => {
        if(DateEvents != '')
        {
            window.location = DateEvents[0].url;
        }
     }
     }) #}


    </script>

{% endblock %}