{% extends "layout.html" %}
{% block title %}{{title_pre}} Updates {% endblock %}
 {% block bread %}
    <div class="col-sm-4">
        <h2>Manage Updates</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.php">Home</a>
            </li>
             <li class="breadcrumb-item active">
                <strong>All Updates</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 Updates </h5>
                                <div class="ibox-tools">
                                    <span style="font-size: 13px;"  data-toggle="modal" data-target="#addMaj" class="btn label label-primary mr-1"> Add New Update</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 >Name</th>
                                            <th>Description Name</th>
                                            <th>Date</th>
                                            <th style="width:30px;"></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for key,update in  updates %} 
                                        <tr class="gradeX maj-{{update.id}}" >
                                            <td style="{{ update.color }}" >{{ update.nom }}</td>
                                            <td>{{ update.descriptif }}</td>
                                            <td>{{ update.full_date }}</td>                  
                                            <td>
                                                {% if _session.user.admin == "1" %} 
                                                <a ><i class="fa fa-trash maj_dlt "      m-id="{{ update.id}}"     title="Move to Trash"></i></a> 
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                        </tbody>
                                        <tfoot>
                                        <tr>
                                                <th>Name</th>
                                                <th>Desctiption</th>
                                                <th>Date</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',
                              "aaSorting": [],
                              buttons: [
                                  {extend: 'copy'},
                                  {extend: 'csv'},
                                  {extend: 'excel', title: 'Updates'},
                                  {extend: 'pdf', title: 'Updates'},
                                  {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="addMaj" tabindex="-1" role="dialog" aria-labelledby="addMajLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="editMagasinLabel">Add an update </h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form method="post" id="addMajForm"  enctype="multipart/form-data" data-target="upload_target"  >
            <input type="hidden" name="cf" value="add_update">
            <div class="modal-body">
                        <div class="form-group col-12 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-12 float-left">
                            <label for="recipient-name" class="form-control-label">Descriptive:</label>
                            <textarea name="description" class="form-control" rows="3"></textarea>
                        </div>
    
                        <div class="form-group col-12 float-left">
                        <label for="exampleInputFile">File input</label>
                        <input type="file" class="form-control-file" id="exampleInputFile" name="myfile" aria-describedby="fileHelp" />
                        <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. Its a bit lighter and easy wraps to a new line</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary maj_add">Save</button>
                    </div>
            </form>
        </div>
    </div>
</div>
                              





{% endblock %}