{% extends 'Backoffice/base.html.twig' %}

{% block activeLiActualites %}class="active"{% endblock %}
{% block activeActualites %}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="#">Liens utiles</a></li>
            <li class="active">Gestion des liens utiles</li>
        </ul>
        <div class="m-b-md">
            <h3 class="m-b-none">Liens utiles</h3>
        </div>

        {% if response is defined and response != "" %}
            {% if response == "OK" %}
                <div class="alert alert-success">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <i class="fa fa-ok-sign"></i><strong>OK !</strong> Opération effectuée avec succès.
                </div>
            {% else %}
                <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 %}

        <section class="panel panel-default">
            <header class="panel-heading">
                Ajouter / Modifier un lien utile
            </header>
            <div class="panel-body">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="id" value="{{ formData.id|default('') }}">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Titre (Français)</label>
                                <input type="text" class="form-control" name="titreFr" value="{{ formData.titreFr|default('') }}" required>
                            </div>
                        </div>
                        <div class="col-sm-6" style="direction: rtl;">
                            <div class="form-group">
                                <label>العنوان</label>
                                <input type="text" class="form-control" name="titreAr" value="{{ formData.titreAr|default('') }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Chemin (URL)</label>
                                <input type="text" class="form-control" name="chemin" value="{{ formData.chemin|default('') }}">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Image</label>
                                {% if formData.image is defined and formData.image %}
                                    <div>
                                        <img src="{{ asset(formData.image) }}" style="max-height: 60px; margin-bottom: 5px;">
                                    </div>
                                {% endif %}
                                <input type="file" class="form-control" name="image">
                            </div>
                        </div>
                    </div>
                    <div class="text-center" style="margin-bottom: 20px;">
                        <button type="submit" class="btn btn-sm btn-primary">
                            {% if formData.id is defined and formData.id %}Mettre à jour{% else %}Ajouter{% endif %}
                        </button>
                        {% if formData.id is defined and formData.id %}
                            <a href="{{ path('Backoffice_lienutile') }}" class="btn btn-sm btn-default">Annuler</a>
                        {% endif %}
                    </div>
                </form>
            </div>
        </section>

        <section class="panel panel-default">
            <header class="panel-heading">
                Liste des liens utiles
            </header>
            <div class="table-responsive">
                <table class="table table-striped m-b-none" data-ride="datatables" id="listLiens">
                    <thead>
                        <tr>
                            <th width="10%">Image</th>
                            <th width="30%">Titre (FR)</th>
                            <th width="30%">Titre (AR)</th>
                            <th width="20%">Chemin</th>
                            <th width="10%">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for l in liens %}
                            <tr>
                                <td>
                                    {% if l.image %}
                                        <img src="{{ asset(l.image) }}" style="max-height: 40px;">
                                    {% endif %}
                                </td>
                                <td>{{ l.titreFr }}</td>
                                <td>{{ l.titreAr }}</td>
                                <td>{{ l.chemin }}</td>
                                <td>
                                    <a href="{{ path('Backoffice_lienutile', {'edit': l.id}) }}" class="btn btn-xs btn-info">Modifier</a>
                                    <button type="button" class="btn btn-xs btn-danger" onclick="deleteLien({{ l.id }})">Supprimer</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </section>
</section>
{% endblock %}

{% block js %}
<script src="{{ asset("assets/Backoffice/js/datatables/jquery.dataTables.min.js") }}"></script>
<script type="text/javascript">
    $("#listLiens").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 deleteLien(id){
        noty({
            text: "Etes vous sûr de vouloir supprimer ce lien ?",
            type: 'confirm',
            theme: 'relax',
            layout: 'center',
            animation: {
                open: 'animated bounceInDown',
                close: 'animated bounceOutUp',
                easing: 'swing',
                speed: 200
            },
            buttons     : [
                {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                    var url = '{{ path('Backoffice_lienutile') }}?delete='+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',
                easing: 'swing',
                speed: 200
            }
        });
    }
</script>
{% endblock %}