{% extends "layout.html" %}
{% block title %}{{title_pre}} Stores {% endblock %}
 {% block bread %}
 
    <div class="col-sm-4">
        <h2>Manage Stores</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.php">Home</a>
            </li>
             <li class="breadcrumb-item active">
                <strong>All Stores</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-3 ">
                            <div class="ibox" >
                                    <div class="ibox-title">
                                            <h5>Calendar Show Options</h5>
                                            <div class="ibox-tools">
                                                <a class="collapse-link">
                                                    <i class="fa fa-chevron-up"></i>
                                                </a>
                                                
                                            </div>
                                        </div>
                                     <div class="ibox-content"> 


                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3 class="m-t-none m-b">Calendar Options.</h3>
                                                    <p>Choos what to see on the calendar.</p>
                                                
                                                </div>
                                            </div>

                                     </div>       
                                       
                            </div>
                            
                        </div>-->

                    <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="#editMagasin" class="btn label label-primary mr-1"> Add New Store</span>
                                            <span style="font-size: 13px;"  data-toggle="modal" data-target="#addVille" class="btn label label-primary mr-1"> Add New City</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 >Activity</th>
                                                    <th>Store Name</th>
                                                    <th>Location</th>
                                                    <th>Type</th>
                                                    <th>Network Type</th>
                                                    <th style="width:30px;"></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                             {% for key,store in  stores %} 
                                                <tr class="gradeX store-{{store.id}}" >
                                                    <td>{{ store.activity }}</td>
                                                    <td>{{ store.title }}</td>
                                                    <td>{{ store.city }}</td>                  
                                                    <td class="center">{{ store.type }}</td>
                                                    <td class="center">{{ store.network }}</td>
                                                    <td>
                                                        <i class="fa fa-pencil edit_ma" data-toggle="modal" data-target="#editMagasin" data-id="{{ store.id }}"   data-type="{{ store.type_val }}"  
                                                        data-reseau="{{ store.idreseau}}" data-ville="{{ store.city_val }}"    data-activite="{{ store.activity_val}}"    data-name="{{ store.title }}"  
                                                        data-code="{{ store.code }}"     title="Edit"></i>
                                                        {% if _session.user.admin == "1" %} 
                                                                <a ><i class="fa fa-trash mag_dlt"      m-id="{{ store.id}}"     title="Move to Trash"></i></a> 
                                                        {% endif %}
                                                            <a  href="../myoctv/accueil.php?id={{ store.id }}&pass={{ store.code }}" target="_blank"  ><i class="fa fa-line-chart"     title="Rapport"></i></a>
                                                            <a {% if store.code != "" %}  href="index.php?page=devices&id_store={{ store.id}}" {% endif %} </a> 
                                                                <i class="fa fa-external-link text-danger"     title="See Devices"></i></a>  
                                                    </td>
                                                </tr>
                                               {% endfor %}
                                                </tbody>
                                                <tfoot>
                                                <tr>
                                                        <th>Activity</th>
                                                        <th>Store Name</th>
                                                        <th>Location</th>
                                                        <th>Type</th>
                                                        <th>Network Type</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: 'Stores'},
                                  {extend: 'pdf', title: 'Stores'},
              
                                  {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="editMagasin" tabindex="-1" role="dialog" aria-labelledby="editMagasinLabel" 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 method="post" id="editMagasinForm" class="" >
        <div class="modal-body">
            <input type="hidden" name="id_store" id="idMagasin" />
            <input type="hidden" name="cf" value="editStore" />
            
            <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 " name="nom" id="nom">
            </div>
            <div class="form-group col-6 float-left">
                <label for="recipient-name" class="form-control-label">Store code</label>
                <input required="required" type="text" class="form-control " name="codemagasin" id="codemagasin">
            </div>
            
            <div class="form-group col-6 float-left">
                <label for="recipient-name" class="form-control-label mr-3">Active:</label>
                <select class="custom-select w-100" name="idactivite" id="idactivite">
               {% for activity in activities %}
                    <option value="{{ activity.id }}" > {{ activity.nom }} </option>
                {% endfor%}
    
                </select>
            </div>
            
            <div class="form-group col-6 float-left">
                <label for="recipient-name" class="form-control-label">City:</label>
                <select class="custom-select w-100"  name="idville" id="idville"  >
                    {% for city in cities %}
                        <option value="{{ city.id }}" > {{ city.nom }} </option>
                    {% endfor%}
                </select>
                
                </div>
            <div class="form-group col-6 float-left">
                <label for="recipient-name" class="form-control-label">Store type:</label>
                <select name="idtype_magasin"  id="idtype_magasin"  class="custom-select w-100">
                    {% for type in types %}
                        <option value="{{ type.id }}" > {{ type.nom }} </option>
                    {% endfor%}
                 
                </select>											
                
                </div>
            <div class="form-group col-6 float-left">
                <label for="recipient-name" class="form-control-label" >Network:</label>
                    <select name="idreseau" id="idreseau"  class="custom-select w-100">
                        {% for network in networks %}
                            <option {% if store.idnetwork == type.id  %} selected {% endif%} value="{{ network.id }}" > {{ network.nom }} </option>
                        {% endfor%} 
                           
                    </select>											
            </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_magasins">Save</button>
        </div>
            </form>
        </div>
    </div>
    </div>						
                                    
                            
    

            



                      
    <div class="modal fade" id="addVille" tabindex="-1" role="dialog" aria-labelledby="addVilleLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="editMagasinLabel">Add city</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <form method="post" id="addVilleForm" class="" >
                  <input type="hidden" name="cf" value="add_city">

                  <div class="modal-body">
                      <div class="form-group col-6 float-left">
                          <label for="recipient-name" class="form-control-label mr-3">Country:</label>
                              <select class="custom-select w-100"  name="pays" id="pays" >
                                {% for country in countries %}
                                    <option value="{{ country.id }}" > {{ country.nom }} </option>
                                {% endfor%} 
                              </select>
                      </div>
                      <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 nom_city" name="nom" id="nom_city">
                      </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_ville">Save</button>
                </div>
                  </form>
              </div>
            </div>
          </div>
                  





{% endblock %}