{% extends 'FrontofficeAr/base.html.twig' %}
{% block activeCell %}main-menu-active{% endblock %}
{% block titre %}Commissions{% 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') }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        ul{
            list-style: none outside none;
            padding-left: 0;
            margin: 0;
        }
        .content-slider li{
            text-align: center;
            color: #FFF;
            position: relative;
            overflow: hidden;
        }
        .content-slider h3 {
            margin: 0;
            padding: 70px 0;
        }

        li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
        }

        li a.active1 {
        background-color: #04AA6D;
        color: white;
        }

        li a:hover:not(.active) {
        background-color: #555;
        color: white;
        }

        @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;">خليتي</h3>
        </div>
    </div>
    <div class="row block_ac" style="flex-direction: row-reverse;">
      <div class="col-md-12 contact" style='text-align:center;direction:rtl'>
             <ul style='list-style-type: none;margin: 0;padding: 0;background-color: #f1f1f1;overflow: auto;display: flex;justify-content: space-between;'>
                    <li><a href="/ar/cellules/">الخلايا</a></li>
                    <li><a href="/ar/cellule_membre/" class="active1">خليتي</a></li>
                    <li><a href="/ar/mes_publications/">منشوراتي</a></li>
                    <li><a href="/ar/add_pub/">إضافة منشور</a></li>
                    <li><a href="/ar/profil/" >معلوماتي</a></li>
                    <li><a href="/ar/deconnectMembre/">تسجيل الخروج</a></li>
            </ul>   
        </div>

        <div class="contact row col-md-12" style='margin-left: 1%;'>

        <div style='margin-bottom:5%;margin-top:5%'>

           <h4 class="titre_map" style='font-size:16px;direction: rtl;'>نشر من طرف : {{ pub.responsable }}, بتاريخ {{ pub.date|date("d-m-Y  H:i") }}</h4>

          <div class="row">
          <div class="col-lg-6" data-aos-delay="100">

            <div>
                <div class="col-md-12">
                <br/>
                <ul id="image-gallery-slider-htPC" class="gallery list-unstyled cS-hidden" style='width:400px;height:400px'>
                {% set index = 1 %}
                    {% for f in file %}
                        <img style='height:400px' src="{{ asset(f.file) }}" class="img-fluid" alt="">
                    {% endfor %}
                {% set index = index+1 %}    
                </ul>
                </div>
            </div>

          </div>
          

          <div class="col-lg-6 pt-4 pt-lg-6 content d-flex flex-column " data-aos-delay="100">
            <h3 class='text-center'>{{ pub.titre }}</h3>
            <p>
                {{ pub.text|raw }}
            </p>
          </div>
        </div>

        <div style='margin-top:5%;direction: rtl;'>
         <h4 class="titre_calendar" style='font-size:16px'>تعليقات</h4>
            {% if commentaires|length == 0 %}
                لا توجد تعليقات.
            {% else %}
            {% for p in commentaires %}

                    <div class="post-item">
                        <div class="caption wrapper-lg">
                            <div class="post-sum">
                                <span>{{ p["comment"].text|raw }}</span>
                                {% set index = 1 %}
                                {% for f in p["file"] %}
                                    <img style='width:60px;height:60px;margin:1%' src="{{ asset(f.file) }}" class="img-fluid" alt=""></img>
                                    {% set index = index+1 %}
                                {% endfor %}
                            </div>
                            <div class="line line-lg"></div>
                            <div class="text-muted">
                                <div style='display:flex;justify-content: space-around;'>
                                <div><i class="bi bi-person-fill icon-muted"></i> من طرف: {{ p["comment"].responsable }}</div>
                                <div><i class="bi bi-clock icon-muted"></i >  بتاريخ   {{ p["comment"].date|date("d-m-Y  H:i") }} </div>
                                </div>
                                {% if p["comment"].idMembre == user.id %}
                                    <div class="text-center"><a class="btn btn-sm btn-danger" onClick="deleteCommentaire({{ p["comment"].id }})">حذف</a> </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
         
            {% endif %}
            <div>
                <br/>
                <form method="post" enctype="multipart/form-data" class='php-email-form'>
                    <div class="col-lg-12">
                        {% if response != "" %}
                            <br/>
                            <div class="alert alert-danger">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <i class="fa fa-ban-circle"></i><strong>Erreur !</strong> {{ response }}
                            </div>
                        {% endif %}
                        <div class="form-group">
                            <label>تعليق :</label>
                            <textarea name="text" class="form-control p-input ckeditor" id="text" aria-describedby="" placeholder="" rows="7"></textarea>
                        </div>

                        <div class="js">
                          <input type="file" name="file[]" id="file-7" class="custom-file-input1" data-multiple-caption="{count} Fichier(s) selectionné(s)" multiple />
                    
                        <!--<label for="file-7" style='border:1px solid black'><span></span> <strong>Ajouter des fichier&hellip;</strong></label>-->
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-success">اضافة</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </div>
{% 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 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({
                item:1,
                thumbItem:9,
                slideMargin: 0,
                speed:500,
                pause: 5000,
                auto:true,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery-slider-htPC').removeClass('cS-hidden');
                }
            });
        });
    </script>


    <script type="text/javascript">
        $(document).ready(function () {

            tinyMCE.init({
                mode : "textareas",
                editor_selector : "tinymce-enabled-message",
                selector:'ckeditor'
            });


            tinymce.EditorManager.execCommand('mceAddEditor', false, "text");


        });

        var inputs = document.querySelectorAll( '.inputfile' );
        Array.prototype.forEach.call( inputs, function( input )
        {
            var label	 = input.nextElementSibling,
                    labelVal = label.innerHTML;

            input.addEventListener( 'change', function( e )
            {
                var fileName = '';
                if( this.files && this.files.length > 1 )
                    fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
                else
                    fileName = e.target.value.split( '\\' ).pop();

                if( fileName )
                    label.querySelector( 'span' ).innerHTML = fileName;
                else
                    label.innerHTML = labelVal;
            });

            // Firefox bug fix
            input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
            input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
        });

        function deleteCommentaire(id){
            noty({
                text: "Etes vous sûr de vouloir supprimer le commentaire ?",
                type: 'confirm',
                theme: 'relax',
                layout: 'center',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                },
                buttons     : [
                    {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                        var url = '/deleteComment/?id='+id;
                        $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                        $.ajax({
                            type: 'get',
                            url: url,
                            success: function(data){
                                if(data=="OK"){
                                    window.location.reload();
                                }
                                else{
                                    errorMsg("une erreur s'est produite");
                                    $('.fadeMe').animate({opacity: 0.0}, 900,setInvisible);
                                }


                            }
                        });

                        $noty.close();


                    }
                    },
                    {addClass: 'btn btn-danger', text: 'Non', onClick: function ($noty) {
                        $noty.close();

                    }
                    }
                ]
            });
        }

        function errorMsg(message) {
            noty({
                text: message,
                type: 'error',
                theme: 'relax',
                layout: 'topCenter',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                }
            });
        }
    </script>

{% endblock %}