{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeAnn %}main-menu-active{% endblock %}
{% block titre %}{{ actualite.titreAr }}{% endblock %}
{% block body %}
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/FrontofficeFr/css/lightslider.css') }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .carousel {
            position: relative;
            text-align: -webkit-center;
        }
        .carousel-inner {
            position: relative;
            width: 1000px;
            overflow: hidden;
        }
        .carousel-control-next-icon
        {
            background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
            background-color: #3c70b3;
            padding: 20px;
        }
        .carousel-control-prev-icon
        {
            background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
            background-color: #3c70b3;
            padding: 20px;
        }
        .text-primary{
            color:#e8b154 !important;
        }
        .block_ac {
            width: 100%;
            margin: 0;
            background-color: aliceblue;
            padding: 0px 0px;
        }

        .block_ac h3 {
            font-weight: bold;
            color: #0d0d4d;
            margin-bottom: 20px;
        }

        .block_ac iframe {
            width: 100%;
            height: 500px;
            max-height: 500px;
            padding: 20px;
        }

        .block_ac img.img-fluid {
            /*width: 90% !important;*/
            /*height: 500px !important;*/
            border-radius: 10px !important;
            display: block !important;
            margin: 20px 80px 12px 80px;
            object-fit: contain;
            justify-self: center;
                padding-left: 28px;
            padding-right: 28px;
        }

        .block_ac .article-content {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
            text-align: justify;
            display: block;
            margin: 0px 80px 12px 80px
        }

        .gallery {
            padding: 0;
            margin: 20px auto;
            text-align: center;
        }

        .gallery img {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        #share-block {
            margin: 40px auto;
            padding: 15px;
            max-width: 500px;
            border: 1px solid black;
            border-radius: 30px;
            background-color: #0d0d4d;
            text-align: center;
        }

        #share {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 15px;
        }

        #share a {
            font-size: 24px;
            color: white;
            transition: transform 0.2s;
        }

        #share a:hover {
            transform: scale(1.2);
            color: gold;
        }

        /* Sidebar */
        .blockActu {
            padding-top: 30px;
            background-color: #fff;
            border-left: 2px solid #eee;
        }

        .actualite_box_cl {
            border: 2px solid #3c70b3;
            border-radius: 5px;
            margin: 40px !important;
            margin-bottom: 20px;
            background: #fdfdfd;
            transition: box-shadow 0.3s;
            text-align: center;
        }

        .actualite_box_cl:hover { 
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
        }

        .actualite_box img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .date_ac {
            font-size: 15px;
            font-weight: 600;
            color: #3c70b3;
            margin-top: 0px;
            display: block;
        }

        /* Responsive */
        @media screen and (max-width: 768px) {
            .block_ac iframe {
                height: 200px;
                padding: 20px;
            }

            #share {
                flex-direction: column;
                align-items: center;
            }

            .blockActu {
                border-left: none;
                margin-top: 30px;
            }
        }

        .actualite_box {
            background: #ffffff;
            /* max-width: 230px; */
            min-height: 345px;
            padding: 0 !important;
            box-shadow: 0px 0px 0px 0px !important;
            display: block;
            margin: 0 auto 20px auto;
        }

        .article-content {
            display: table-caption;
            width: 90%;
        }

        ..article-content p {
            margin-bottom: 1.2em !important;
        }

        .article-content p img {
            max-width: 100% !important;
            height: 500px !important;
            display: block !important;
            margin: 20px auto !important;
            border-radius: 10px !important;
            object-fit: contain;
        }

        .article-content h1,
        .article-content h2,
        .article-content h3,
        .article-content h4 {
            color: #0d0d4d;
            margin-top: 30px;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .article-content ul,
        .article-content ol {
            margin: 10px 20px;
            padding-left: 20px;
        }

        .article-content blockquote {
            font-style: italic;
            border-left: 5px solid #ccc;
            padding-left: 15px;
            margin: 20px 0;
            color: #555;
            background-color: #f8f8f8;
        }

        #share-block {
            margin: 40px auto;
            padding: 4px;
            max-width: 300px;
            border: 1px solid #3c70b3;
            border-radius: 15px;
            background-color: #3c70b3;
            text-align: center;
        }
        #share {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;
            margin-bottom: -25px;
        }
        #share a:hover {
            transform: scale(1.2);
            color: #e8b154;
        }

        @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') }}" alt="FCPM Logo" />
            <h3 class="title-page" style="color:white;">{{titre}}</h3>
        </div>
    </div>

    <div class="row block_ac">
        <div class="col-md-9 pt-3">
            {#<h3 class="text-center">{{ actualite.titreFr }}</h3>#}
            
            <div class="row" style="margin: 0px 80px 0px 80px;">
                <div class="col-md-9 " >
                    <h3 class="text-right">{{ actualite.titreFr }}</h3>
                </div>
                {% if actualite.fichierAr is not empty %}
                    <div class="col-md-3" style="text-align: left;">
                        <a href="{{ actualite.fichierFr }}" download class="btn btn-primary">
                            Télécharger le fichier
                        </a>
                    </div>
                {% endif %}
            </div>


            {# {% if actualite.imgPrincipal !='' %}
                <img style='max-width: 80%;max-height:1000px;' src="{{ asset(actualite.imgPrincipal) }}" class="img-fluid" alt="">
            {% else %}
                <img style='max-width: 80%;max-height:1000px;' src="{{ asset("/assets/Backoffice/images/fcpm.png") }}" class="img-fluid" alt="">
            {% endif %} #}

            {% if images|length > 0 %}
                <div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        {% for img in images %}
                            <div class="carousel-item {% if loop.first %}active{% endif %}">
                                {# Assuming the img.img contains a full URL or relative path to the image #}
                                <img src="{{ img.img }}" class="d-block w-100" alt="Image de publication">
                            </div>
                        {% endfor %}
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

            {% else %}
                <img src="{{ asset(actualite.imgPrincipal ?: '/assets/Backoffice/images/fcpm.png') }}" class="img-fluid" alt="Image principale">
            {% endif %}

            <div class="article-content mt-4">
                {{ actualite.textFr|raw }}
            </div>


            <div id="share-block">
                <span style="color:white;">Partager sur :</span>
                <div id="share">
                    <a class="facebook" href="https://www.facebook.com/share.php?u=http://www.fcpm.org.ma/fr/detailAnnonce/{{ actualite.titreFr|replace({' ': '_'}) }}/{{ actualite.id }}/" target="_blank"><i class="fa fa-facebook"></i></a>
                    <a class="twitter" href="https://twitter.com/intent/tweet?status={{ actualite.titreFr|replace({' ': '_'}) }} http://www.fcpm.org.ma/fr/detailAnnonce/{{ actualite.titreFr|replace({' ': '_'}) }}/{{ actualite.id }}/" target="_blank"><i class="fa fa-twitter"></i></a>
                    <a class="googleplus" href="https://plus.google.com/share?url=http://www.fcpm.org.ma/fr/detailAnnonce/{{ actualite.titreFr|replace({' ': '_'}) }}/{{ actualite.id }}/" target="_blank"><i class="fa fa-google-plus"></i></a>
                </div>
            </div>
        </div>

        <div class="col-md-3 blockActu">
            <h3 class="text-center text-primary pt-3 ">Autres</h3>

            {% for o in others %}
                <div class="actualite_box_cl">
                    <a href="/fr/detailAnnonce/{{ o.titreFr|replace({' ': '_'}) }}/{{ o.id }}/">
                        <div class="actualite_box">
                            <img src="{{ o.imgPrincipal }}" alt="Autre actualité">
                            <h3>{{ o.titreFr }}</h3>
                            {# <p>
                                {{ o.textFr|striptags|length > 50 ? o.textFr|striptags|slice(0, 50) ~ '...' : o.textFr|striptags }}
                            </p> #}
                            <span class="date_ac">Le {{ o.date|date("d-m-Y") }}</span>
                            {# <a class="btn btn-info mt-2" href="/fr/detailAnnonce/{{ o.id }}/">Voir plus</a> #}
                        </div>
                    </a>
                </div>
            {% else %}
                <div class="actualite_box_cl">
                    Aucun article similaire
                </div>
            {% endfor %}
        </div>
    </div>

{% 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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.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');
                }
            });
        });
    </script>

{% endblock %}