{% extends "layout.html" %}
{% block title %}{{title_pre}} Groups {% endblock %}
 {% block bread %}
 
    <div class="col-sm-4">
        <h2>Manage Groups</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.php">Home</a>
            </li>
             <li class="breadcrumb-item active">
                <strong>All Groups</strong>
            </li>
        </ol>
    </div>
    
 {% endblock %}
{% block content %}
   <div class="page_content" >

        <div class="wrapper wrapper-content">
        <div class="row animated fadeInDown">
            <div class="col-lg-12 ">
                <div class="ibox" >
                    <div class="ibox-title">
                            <h5>All Stores </h5>
                            <div class="ibox-tools">
                                <span style="font-size: 13px;"  data-toggle="modal" data-target="#editGroupement" class="btn label label-primary mr-1"> Add New Group</span>
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                
                            </div>
                        </div>
                        <div class="ibox-content"> 
                            <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover dataTables-example" >
                                    <thead>
                                    <tr>
                                        <th >Title</th>
                                        <th>Activities</th>
                                        <th>Stores</th>
                                        <th>Clients</th>
                                        <th style="width:30px;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for key,group in  groups %} 
                                    <tr class="gradeX group-{{group.id}}" >
                                        <td>{{ group.title }}</td>
                                        <td>{{ group.activite }}</td>
                                        <td>{{ group.texte }}</td>                  
                                        <td class="center">{{ group.clients }}</td>
                                        <td>
                                            <i class="fa fa-pencil edit_ma"  data-toggle="modal" data-target="#editGroupement"    data-id="{{ group.id }}"   data-type="{{ group.idactivite }}"  
                                            data-ids="{{ group.ids }}" data-name="{{ group.title }}"  title="Edite"></i>
                                            {% if _session.user.admin == 1  %}  <a ><i class="fa fa-trash-o grp_dlt" g-id="{{ group.id }}"     title="Move to Trash"></i></a> {% endif %}
                    
                                            
                                        </td> 
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                            <th >Title</th>
                                            <th>Activities</th>
                                            <th>Stores</th>
                                            <th>Clients</th>
                                            <th ></th>
                                        </tr>
                                    </tfoot>
                                    </table>
                                </div>
                    </div>
                
            </div>
        </div>
    </div>

      
    </div>


    
    <script src="{{ constant('HTTP_JS') }}/plugins/pace/pace.min.js"></script>

          <script src="{{ constant('HTTP_JS') }}/plugins/dataTables/datatables.min.js"></script>
          <script src="{{ constant('HTTP_JS') }}/plugins/dataTables/dataTables.bootstrap4.min.js"></script>
              <!-- Page-Level Scripts -->
              <script>
                      $(document).ready(function(){
                          $('.dataTables-example').DataTable({
                              pageLength: 25,
                              responsive: true,
                              dom: '<"html5buttons"B>lTfgitp',
                              buttons: [
                                  { extend: 'copy'},
                                  {extend: 'csv'},
                                  {extend: 'excel', title: 'groups'},
                                  {extend: 'pdf', title: 'groups'},
              
                                  {extend: 'print',
                                   customize: function (win){
                                          $(win.document.body).addClass('white-bg');
                                          $(win.document.body).css('font-size', '10px');
              
                                          $(win.document.body).find('table')
                                                  .addClass('compact')
                                                  .css('font-size', 'inherit');
                                  }
                                  }
                              ]
              
                          });
              
                      });
              
                  </script>
              
              

                  <div class="modal fade" id="editGroupement" tabindex="-1" role="dialog" aria-labelledby="editGroupementLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="editMagasinLabel">Edit</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            
                          <FORM id="formmodifgroupe" Method="POST" actios="admintable.php?onglet=groupe">
                      
                            <div class="modal-body">
                                          
                                       
                                          <input type="hidden" name="modifmagasin_" value="">
                                          <input type="hidden"  id="actionToDo" name="" value="1">
                                          <input type="hidden"   name="cf" value="edit_group">
                                          <input type="hidden"  id="id" name="id" value="0">
                                          <div class="row">
                                              <div class="form-group col-6 float-left">
                                                  <label for="recipient-name" class="form-control-label">Name:</label>
                                                  <input required="required" type="text" class="form-control" value="" name="nom" id="nom">
                                              </div>
                                              <div class="form-group col-6 float-left">
                                                  <label for="recipient-name" class="form-control-label">Activities:</label>
                          
                                                  <select name="idactivite" id="idactivite-slc" class="custom-select w-100"  onchangessss='javascript:visibilite_activite_modif(this.value);'>
                                                      <option value="-1">All activities</option>
                                                      {% for activity in activities %}
                                                        <option value="{{ activity.id }}" > {{ activity.nom }} </option>
                                                    {% endfor%}
                                                  </select>	
                                              </div>
                                          </div>
                                          <div class="row mb-2" >
                                              <div class="col-md-5" ><strong>Shop</strong></div>
                                              <div class="col-md-5" ><strong>City</strong></div>
                                              <div class="col-md-2" ><strong>Sel</strong></div>
                                          </div>
                                          <div id="Toutmodif" >
                                                 {% for store in stores %}
                                                    <div class="row type-{{ store.idactivite }} all-t"  >
                                                        <div class="col-md-5" ><small>{{ store.nom }}</small></div>
                                                        <div class="col-md-5" ><small>{{ store.ville }}</small></div>
                                                        <div class="col-md-2 text-right" >
                                                            <input class="form-check-input ch-tp ch-tp-{{store.idactivite}}"  id="ch-{{store.id}}" type="checkbox" value="{{store.id}}" name="stores[]"  ></div>
                                                    </div>
                                            {% endfor %}
                                              
                                          </div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary sbmt_form_grp">Save</button>
                            </div>
                          </form>
                            
                          </div>
                        </div>
                      </div>						
                              





{% endblock %}