{% extends 'base_backend.html.twig' %}

{% block body %}

     <div class="wrapper wrapper-content animated fadeInRight ecommerce">
         <div class="row ">
             <div class="wrapper wrapper-content"  >
                 <div class="ibox-content m-b-sm border-bottom">
                     <div class="p-xs">
                         <div class="pull-left m-r-md">
                                 <i class="fa fa-cogs text-navy mid-icon" style="color:#024071"></i>
                         </div>
                         <h2> Gestion des services</h2>
                         <span>Liste des services</span>
                     </div>
                 </div>
             </div>
         </div>

         <div class="ibox-content m-b-sm border-bottom">
             <label class="control-label" for="order_id">Nouveau Service</label>
             {{ form_start(form) }}
             <div class="row">
                 <div class="col-sm-10">
                     <div class="">
                         {{ form_widget(form.intitule ,  {'attr':{'class':'form-control', 'placeholder':'Intitule de service' }} ) }}
                         {#<input type="text" id="order_id" name="order_id" placeholder="Intitule de service"  class="form-control">#}
                     </div>
                 </div>
                 <div class="col-sm-2">
                     <button type="submit" class="btn btn-block btn-primary">Enregistrer</button>
                 </div>

             </div>
             {{ form_end(form) }}
         <br>



         <label class="control-label mt-2" >Liste des services</label>


         <div class="ibox-content m-t-2">
             <table class="table table-stripped tab_services"  >
                 <thead>
                 <tr>
                     {#<th>IDentifiant</th>#}
                     <th align="text-center">Nom du service</th>
                     <th class="text-center"> NB Collaborateur(s)</th>
                     <th class="text-center">Date de création</th>
                     <th class="text-right">Action</th>
                 </tr>
                 </thead>
                 <tbody>

                 {% for  serv in roles|reverse  %}
                     <tr>
                         <td align="center">
                             <strong>{{  serv.intitule }}</strong>
                         </td>
                         <td align="center"> {% if(serv.collabo|length>0) %}
                             <a data-toggle="modal" href="#"data-target="#getserv_collabo{{ serv.cbmarq }}"  ><strong>{{ serv.collabo|length }} </strong>Collaborateur(s) </a>
                             {% else %}  ------- {%  endif %}
                             <div class="modal inmodal " id="getserv_collabo{{ serv.cbmarq }}"   role="dialog"    >
                                 <div class="modal-dialog">
                                     <div class="modal-content animated fadeIn">
                                         <div class="modal-header">
                                             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Fermer</span></button>

                                             <h4 class="modal-title"> Service {{  serv.intitule }}  </h4>
                                             <span> Liste des collaborateurs</span>
                                         </div>
                                         <div class="ibox-content m-t-2">
                                             <table class="table table-stripped tab_services"  >
                                                 <thead>
                                                 <tr>
                                                     {#<th>IDentifiant</th>#}
                                                     <th>Nom & Prénom </th>
                                                     <th>Email </th>
                                                     <th>Nom d'utilisateur</th>
                                                     <th class="text-right">Action</th>
                                                 </tr>
                                                 </thead>
                                                 <tbody>
                                                 {% for  col in  serv.collabo %}
                                                     <tr>
                                                         <td>
                                                             {{  col.intitule }}
                                                         </td>
                                                         <td>
                                                             {{  col.Utid.email }}
                                                         </td>
                                                         <td>
                                                             {{  col.Utid.username }}
                                                         </td>

                                                         <td class="text-right">
                                                             <div class="btn-group">
                                                                 <button onclick="location.href='{{ path('retirer_userroles',{'idc':col.cbmarq , 'ids': serv.cbmarq}) }}'" class="btn-danger btn btn-xs">Retirer</button>
                                                             </div>
                                                         </td>
                                                     </tr>
                                                 {% endfor %}
                                                 </tbody>
                                             </table>


                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </td>
                         <td align="center">
                             {{  serv.cbcreation|date('d-m-Y')}}
                         </td>
                         <td class="text-right">
                             <div class="btn-group">
                                 <button data-toggle="modal" data-target="#editserv{{ serv.cbmarq }}" class="btn-white btn btn-xs">modifier</button>
                                 <button id="{{ serv.cbmarq }}" class="btn-white btn btn-xs supp">Supprimer</button>
                             </div>
                             {{ render(controller('BackendBundle:Utilisateur:modifier_roles', { 'ids' : serv.cbmarq } )) }}
                         </td>
                     </tr>


                 {% endfor %}
                 </tbody>

             </table>
         </div>

         </div>


</div>


    <!-- FooTable -->
    <!-- Mainly scripts -->
    <script src="{{ asset('bundles/backend/') }}js/jquery-3.1.1.min.js"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {

            $('.tab_services').DataTable({ "order": []});

            $('#date_added').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });

            $('#date_modified').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });

        });

    </script>
    <script>

        $('.supp').click(function(){
            id=this.id;
            swal({
                    title: "Confirmation !!",
                    text: "êtes vous sur de vouloir supprimer ce service !!",
                    type: "warning",
                    showCancelButton: true,
                    cancelButtonText: "Non,annuler l'action ",
                    confirmButtonColor: "#ef6e6e",
                    confirmButtonText: "Oui, continuer.. ",
                    closeOnConfirm: false,
                    closeOnCancel: false},
                function (isConfirm) {
                    if (isConfirm) {
                        var url = '{{ path("supprimer_roles", {'ids': 'idd'}) }}';
                        url = url.replace("idd",id );
                        $.ajax({
                            type: "POST",
                            url:url,
                        }).then(function (data) {
                            if (typeof data.status != "undefined" && data.status != "undefined") {

                                if (data.status == "OK") {
                                    if (typeof data.message != "undefined" && data.message != "undefined") {
                                        swal({title:"Supprimé!!",
                                            text: data.message,
                                            type: "success"
                                        },function(){
                                            window.location.reload();
                                        });
                                    }
                                }
                                if (data.status == "Error") {
                                    // swal("Erreur", "Probléme de connexion à la base ",  "error");
                                    if (typeof data.message != "undefined" && data.message != "undefined") {
                                        swal({title:"Erreur!!",
                                            text: data.message,
                                            type: "error"
                                        });
                                    }
                                }
                            }
                        });
                    } else {
                        swal.close();
                        // swal("Annulé", "Opération annulé !", "error");
                    }
                });

        });
    </script>
{% endblock %}