{% extends 'Backoffice/base.html.twig' %}
{% block activeLiAD %}class="active"{% endblock %}
{% block activeAD %}class="active"{% endblock %}

{% block body %}
<link rel="stylesheet" href="{{ asset("assets/Backoffice/js/datatables/datatables.css") }}" type="text/css"/>
<section class="vbox">
    <section class="scrollable padder">
        <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
            <li><a href=""><i class="fa fa-home"></i> Tableau de board</a></li>
            <li><a href="#">Arrets</a></li>
            <li class="active">Liste des arrets</li>
        </ul>
        <div class="m-b-md">
            <h3 class="m-b-none">Arrets</h3>
        </div>
        <a href="{{ path('app_add_arret') }}" class="btn btn-success" style="margin-bottom: 15px;">Ajouter un arret</a>
        <section class="panel panel-default">
            <header class="panel-heading">
                Liste des arrets
                <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i>
            </header>
            <div class="table-responsive">
                <table class="table table-striped m-b-none" data-ride="datatables" id="listArret">
                    <thead>
                        <tr>
                            <th width="15%">Date</th>
                            <th width="15%">Titre (FR)</th>
                            <th width="15%">Titre (AR)</th>
                            <th width="7%">Afficher FR</th>
                            <th width="7%">Afficher AR</th>
                            <th width="10%">Fichier FR</th>
                            <th width="10%">Fichier AR</th>
                            <th width="8%">Image FR</th>
                            <th width="8%">Image AR</th>
                            <th width="15%">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for a in arrets %}
                        <tr data-id="{{ a.id }}">
                            <td>{{ a.date ? a.date|date('d-m-Y') : '' }}</td>
                            <td>{{ a.titreFr }}</td>
                            <td>{{ a.titreAr }}</td>
                            <td>{{ a.showFr ? 'Oui' : 'Non' }}</td>
                            <td>{{ a.showAr ? 'Oui' : 'Non' }}</td>
                            <td>
                                {% if a.fichierFr %}
                                    <a href="{{ a.fichierFr }}" target="_blank">Fichier FR</a>
                                {% else %}
                                    --
                                {% endif %}
                            </td>
                            <td>
                                {% if a.fichierAr %}
                                    <a href="{{ a.fichierAr }}" target="_blank">Fichier AR</a>
                                {% else %}
                                    --
                                {% endif %}
                            </td>
                            <td>
                                {% if a.imageFr %}
                                    <a href="{{ a.imageFr }}" target="_blank">
                                        <img src="{{ a.imageFr }}" alt="Image FR" style="max-width:40px;max-height:40px;">
                                    </a>
                                {% else %}
                                    --
                                {% endif %}
                            </td>
                            <td>
                                {% if a.imageAr %}
                                    <a href="{{ a.imageAr }}" target="_blank">
                                        <img src="{{ a.imageAr }}" alt="Image AR" style="max-width:40px;max-height:40px;">
                                    </a>
                                {% else %}
                                    --
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ path('app_update_arret', {'id': a.id}) }}" class="btn btn-sm btn-info">Modifier</a>
                                <button type="button" class="btn btn-sm btn-danger" onclick="deleteArticle({{ a.id }})">Supprimer</button>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <br/><br/>
        </section>
    </section>
</section>
{% endblock %}

{% block js %}
<script src="{{ asset("assets/Backoffice/js/datatables/jquery.dataTables.min.js") }}"></script>
<script src="{{ asset("assets/Backoffice/js/noty/noty.min.js") }}"></script>
<link rel="stylesheet" href="{{ asset("assets/Backoffice/js/noty/noty.css") }}" />
<script type="text/javascript">
    $("#listArret").DataTable({
        "oLanguage": {
            "sUrl": "/assets/Backoffice/js/datatables/french-datatable.json"
        },
        "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        "sPaginationType": "full_numbers"
    });

    function deleteArticle(id){
            noty({
                text: "Etes vous sûr de vouloir supprimer la publication ?",
                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 = '/deleteArret/?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 %}