{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeCell %}main-menu-active{% endblock %}
{% block titre %}Commissions et Publications - FCPM {% endblock %}
{% block body %}
<style>


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;
}
.yellowLine{
    height: 5px;
    background: gold;
    width: 60%;
    margin: 0% 20% 0% 20%;
    border-radius: 30px;
            
}
</style>

    <link rel="stylesheet" href="{{ asset("/assets/Backoffice/css/animate.min.css") }}" type="text/css" />
    <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;">Commissions</h3>
        </div>
    </div>
    <div class="row block_ac">
            <div class="col-md-12 contact" style='text-align:center;'>
                <ul style='list-style-type: none;margin: 0;padding: 0;background-color: #f1f1f1;overflow: auto;display: flex;justify-content: space-between;'>
                    <li><a href="/fr/cellules/">Commissions</a></li>
                    <li><a href="/fr/cellule_membre/">Ma commission</a></li>
                    <li><a href="/fr/mes_publications/" class="active1">Mes publications</a></li>
                    <li><a href="/fr/add_pub/" >Nouvelle publication</a></li>
                    <li><a href="/fr/profil/">Mes informations</a></li>
                    <li><a href="/fr/deconnectMembre/">Deconnexion</a></li>
                </ul>
            </div>


        <div class="col-md-12 contact">
            <div style='margin-bottom:5%;margin-top:5%'>

                <div class="text-center" style='margin-top:5%'>
                    <div class='yellowLine'></div>
                    <h5 class="titlee-page">Mes publications</h5>
                </div>
                <form method="post" class="php-email-form" enctype="multipart/form-data" style='padding:20px'>
                    {% if response != "" %}
                        {% if response == "OK" %}
                            <br/>
                            <div class="alert alert-success">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <i class="fa fa-ban-circle"></i><strong>OK !</strong> Publication modifiée
                            </div>
                        {% else %}
                            <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 %}
                    {% endif %}
                    <div class="form-group">
                        <label>Titre :</label>
                        <input type="text" name="titre" class="form-control" value="{{ pub.titre }}" />
                    </div>
                    <div class="form-group">
                        <label>Text :</label>
                        <textarea name="text" class="form-control p-input ckeditor" id="text" aria-describedby="" placeholder="" rows="10">{{ pub.text }}</textarea>
                    </div>
                    <div>
                        <th colspan="2">Liste des fichiers</th>
                     </div>
                    <div width="100%" style='display: flex;justify-content: space-around;flex-wrap: wrap'>
                        {% set index = 1 %}
                        {% for f in file %}
                            <div class="col-md-3" style='padding: 2%;margin:1%;-webkit-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.35); box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.35);'>
                                <td><img style='padding:5%;height:200px;width:200px' src="{{ asset(f.file) }}" class="img-fluid" alt=""></td>
                                <td><a class="btn btn-sm btn-danger" onClick="deleteFilePub({{ f.id }})">Supprimer</a></td>
                            </div>
                            {% set index = index+1 %}
                        {% endfor %}

                    </div>
                    <br/>

                <div class="js">
                        <input type="file" name="file[]" id="file-7" class="custom-file-input" 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">Modifier</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
{% endblock %}
{% block js %}

    <script type="text/javascript" src="{{  asset('bundles/Backoffice/js/noty/packaged/jquery.noty.packaged.min.js') }}"></script>

    <script type="text/javascript" src="{{ asset("/assets/Backoffice/js/tinymce/tinymce.min.js") }}"></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 deleteFilePub(id){
            noty({
                text: "Etes vous sûr de vouloir supprimer le fichier ?",
                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 = '/deleteFilePub?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 %}