{% extends "../frames/__account.html" %}
{% load static %}

{% block headLinks %}
  <!-- DataTables -->
  <link rel="stylesheet" href="{% static "plugins/datatables-bs4/css/dataTables.bootstrap4.min.css" %}">
  <link rel="stylesheet" href="{% static "plugins/datatables-responsive/css/responsive.bootstrap4.min.css" %}">
  <link rel="stylesheet" href="{% static "plugins/datatables-buttons/css/buttons.bootstrap4.min.css" %}">  
  <!-- SweetAlert2 -->
  <link rel="stylesheet" href="{% static "plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css" %}"> 
{% endblock headLinks %}

{% block docTitle %}Gestion des types de statut membre{% endblock docTitle %}
{% block navTitle %}Gestion des types de statut membre{% endblock navTitle %}
{% block activeStatut %}active{% endblock activeStatut %}

{% block contents %}
    <div class="row">
        <div class="col-12 mt-3">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <button class="btn btn-outline-success"  data-toggle="modal" data-target="#add-modal">
                        <i class="fas fa-plus"></i> Ajouter
                    </button>
                </div>
                <div class="body">
                    <div class="col-12">
                        <table id="statut-table" class="table table-bordered table-striped dataTable dtr-inline">
                            <thead>
                                <tr>
                                    <th>Ordre</th>
                                    <th>Intitule</th>
                                    <th>Frais d'adhesion</th>
                                    <th>Cotisation/mois</th>
                                    <th>Derniere modification</th>
                                    <th>Date d'ajout</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for statut in statuts %}
                                    <tr>
                                        <td>{{ forloop.counter}}</td>
                                        <td>{{statut.nom}}</td>
                                        <td>{{statut.frais_adhesion}}</td>
                                        <td>{{statut.frais_cotisation}}</td>
                                        <td>{{statut.updated_at}}</td>
                                        <td>{{statut.created_at}}</td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-warning">Action</button>
                                                <button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                                    <span class="sr-only">Etendre</span>
                                                </button>
                                                <div class="dropdown-menu" role="menu">
                                                    <a class="dropdown-item" href="#">Modifier</a>
                                                    <a class="dropdown-item" href="#">Supprimer</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="add-modal">
        <div class="modal-dialog">
          <form class="modal-content" method="POST" action="{% url 'add_type_membre' %}">
            {% csrf_token %}
            <div class="modal-header">
              <h4 class="modal-title">Ajouter un type de membre</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                
                    <div class="form-group">
                        <label for="exampleInputEmail1">Intitule</label> 
                        <input type="text" name="intitule" class="form-control" id="exampleInputEmail1" placeholder="Intitule" required>
                    </div>
                
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="frais_adhesion">Frais d'adhesion</label> 
                            <input type="number"  name="frais-adhesion" step="1" class="form-control" id="frais_adhesion" placeholder="Frais d'adhesion" required>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="Cotisation">Montant cotisation</label> 
                            <input type="number" name="cotisation" step="1" class="form-control" id="Cotisation" placeholder="Cotisation" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
              <button type="submit" class="btn btn-primary">Enregistrer</button>
            </div>
        </form>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

{% endblock contents %}

{% block scripts %}
    
    <!-- DataTables  & Plugins -->
    <script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "plugins/datatables-bs4/js/dataTables.bootstrap4.min.js" %}"></script>
    <script src="{% static "plugins/datatables-responsive/js/dataTables.responsive.min.js" %}"></script>
    <script src="{% static "plugins/datatables-responsive/js/responsive.bootstrap4.min.js" %}"></script>
    <!-- SweetAlert2 -->
    <script src="{% static "plugins/sweetalert2/sweetalert2.min.js" %}"></script>

    <script>

        $(document).ready(function () {
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000
              });
          
            {% for message in messages %}
                Toast.fire({
                    icon: '{{ message.tags }}',
                    title: '{{ message|safe }}'
                  });
            {% endfor %}

            $('#statut-table').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        });
    </script>
{% endblock scripts %}