{% extends 'FrontofficeAr/base.html.twig' %}
{% block activeAc %}main-menu-active{% endblock %}
{% block titre %}{{ evenement.titreAr }}{% 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 12px 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;">أحداث</h3>
        </div>
    </div>

    <div class="row block_ac" style='width:100%;margin:0%'>
        <div class="col-md-12 text-center">
            <h3>{{ evenement.titreAr }}</h3><br/>
                {% if evenement.imgPrincipal !='' %}
                {# <img style='max-width: 80%;max-height:1000px;' src="{{asset(evenement.imgPrincipal)}}" class="img-fluid" alt=""> #}

                    {% 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" style="direction: ltr;">
                            {# <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 style='max-width: 80%;max-height:1000px;' src="{{asset("/bundles/Backoffice/images/fcpm.png")}}" class="img-fluid" alt="">
                {% endif %}
            <div class="text-center" style='margin: 5%; margin-top: 0%;'>
                {{ evenement.textAr|raw }}
            </div>


             <div class="text-center" style='border:1px solid black;margin: 5% 35%;border-radius: 30px;background:#0d0d4d'>
                <span style='color:white'>: شارك على  </span>
                <div class="row">
                    <div class="col-lg-12">
                        <div id="share" style='display: flex;justify-content: space-between;'>

                            <!-- facebook -->
                                <a style='margin-top:25px;color:white' class="facebook" href="https://www.facebook.com/share.php?u=http://www.fcpm.org.ma/fr/detailsEvenement/{{ evenement.id }}/&title={{ evenement.titreFr }}" target="blank"><i class="fa fa-facebook"></i></a>

                                <!-- twitter -->
                                <a style='margin-top:25px;color:white' class="twitter" href="https://twitter.com/intent/tweet?status={{ evenement.titreFr }}}+http://www.fcpm.org.ma/fr/detailsEvenement/{{ evenement.id }}/" target="blank"><i class="fa fa-twitter"></i></a>

                                <!-- google plus -->
                                <a style='margin-top:25px;color:white' class="googleplus" href="https://plus.google.com/share?url=http://www.fcpm.org.ma/fr/detailsEvenement/{{ evenement.id }}/" target="blank"><i class="fa fa-google-plus"></i></a>

                        </div>
                    </div>
                </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 %}