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

{% block activeLiSlider %}class="active"{% endblock %}
{% block activeSlider %}class="active"{% endblock %}
{% block body %}
    <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="#">Slider</a></li>
                <li class="active">Liste des slide</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Slider</h3>
            </div>
            <div class="row">
                <div class="col-lg-8">
                </div>
                <div class="col-lg-4 text-right">
                    <a href="#" class="btn btn-info btn-rounded btn-fw"  data-toggle='modal' data-target='#myModal'>Nouveau slide</a>
                </div>
            </div>
            {% if 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> Information enregistrée</a>.
                    </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">
                    Liste slide
                    <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">
                        <thead>
                        <tr>
                            <th width="60%"></th>
                            <th width="20%"></th>
                            <th width="20%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for s in sliders %}
                            <tr>
                                <td><img src="{{ asset(s.img) }}" style="max-height: 80px;" /></td>
                                <td>
                                    <a data-toggle='modal' data-target='#myModal2' onClick='updateSlide({{ s.id }},"{{ s.titreAr }}","{{ s.titreFr }}","{{ s.url }}")' class="btn btn-sm btn-info">Modifier</a>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteSlide({{ s.id }})">Supprimer</button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </section>
    </section>

    <form role="form" method="POST" enctype="multipart/form-data">
        <div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" role="dialog">
            <div class="modal-dialog " style="width: 90% !important;">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Nouveau slide</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div id="response" style="margin-top: 10px;">

                    </div>
                    <div class="modal-body">

                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <input type="hidden" name="formName" value="newSlide">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>Url</label>
                                            <input type="text" class="form-control" placeholder="Url" id="url" name="url">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Titre</label>
                                            <input type="text" class="form-control" placeholder="Titre" id="titreFr" name="titreFr">
                                        </div>
                                        <!--<div class="form-group">
                                            <label>Text</label>
                                            <textarea name="textFr" class="form-control p-input"  aria-describedby="" placeholder="" rows="5"></textarea>
                                        </div>-->
                                    </div>
                                    <div class="col-lg-6" style="direction: rtl;">
                                        <div class="form-group">
                                            <label>عنوان</label>
                                            <input type="text" class="form-control" placeholder="عنوان" id="titreAr" name="titreAr">
                                        </div>
                                        <!--<div class="form-group">
                                            <label>النص</label>
                                            <textarea name="textAr" class="form-control p-input"  aria-describedby="" placeholder="" rows="5"></textarea>
                                        </div>-->
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>Images :</label>
                                            <input id="file-fr" name="file[]" type="file" class="form-control" multiple>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>


                        <button type="submit" class="btn btn-success">Enregistrer</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>

                        <!-- /.panel-body -->

                    </div>

                </div>

            </div>
        </div>
    </form>

    <form role="form" method="POST" enctype="multipart/form-data">
        <div id="myModal2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" role="dialog">
            <div class="modal-dialog " style="width: 90% !important;">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modification slide</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div id="response" style="margin-top: 10px;">

                    </div>
                    <div class="modal-body">

                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <input type="hidden" name="formName" value="updateSlide">
                                    <input type="hidden" name="idSlide" value="0" id="idSlide">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>Url</label>
                                            <input type="text" class="form-control" placeholder="Url" id="urlUp" name="url">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Titre</label>
                                            <input type="text" class="form-control" placeholder="Titre" id="titreFrUp" name="titreFr">
                                        </div>
                                        <!--<div class="form-group">
                                            <label>Text</label>
                                            <textarea name="textFr" id="textArUp" class="form-control p-input"  aria-describedby="" placeholder="" rows="5"></textarea>
                                        </div>-->
                                    </div>
                                    <div class="col-lg-6" style="direction: rtl;">
                                        <div class="form-group">
                                            <label>عنوان</label>
                                            <input type="text" class="form-control" placeholder="عنوان" id="titreArUp" name="titreAr">
                                        </div>
                                        <!--<div class="form-group">
                                            <label>النص</label>
                                            <textarea name="textAr" id="textArUp" class="form-control p-input"  aria-describedby="" placeholder="" rows="5"></textarea>
                                        </div>-->
                                    </div>
                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>


                        <button type="submit" class="btn btn-success">Enregistrer</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>

                        <!-- /.panel-body -->

                    </div>

                </div>

            </div>
        </div>
    </form>

{% endblock %}
{% block js %}
    <script type="text/javascript">

     

        function updateSlide(id,titreAr,titreFr,url){
            document.getElementById("idSlide").value = id;
            document.getElementById("titreArUp").value = titreAr;
            document.getElementById("titreFrUp").value = titreFr;
            //document.getElementById("textArUp").value = textAr;
            //document.getElementById("textFrUp").value = textFr;
            document.getElementById("urlUp").value = url;
        }

        function deleteSlide(id){
            noty({
                text: "Etes vous sûr de vouloir supprimer le slide ?",
                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 = '/deleteSlide/?id='+id;
                        $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                        $.ajax({
                            type: 'get',
                            url: url,
                            success: function(data){
                                if(data=="OK"){
                                    window.location.href=window.location.href;
                                    //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 %}