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

{% block docTitle %}Demande d'adhesion{% endblock docTitle %}
{% block navTitle %}Demande d'adhesion{% endblock navTitle %}
{% block activeDemande %}active{% endblock activeDemande %}

{% 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 contents %}
{% comment %} {% if messages %}
  <ul class="messages">
    {% for message in messages %}
      <li class="{% if message.tags %} {{ message.tags }} {% endif %}">
        {{ message }}
      </li>
    {% endfor %}
  </ul>
{% endif %} {% endcomment %}

<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>Nom & Prénom(s)</th>
                                <th>Telephone</th>
                                <th>Email</th>
                                <th>Communauté Provinciale</th>
                                <th>Statut Emploi</th>
                                <th>Motivation</th>
                                <th>Etat</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for demande in demandes %}
                                <tr>
                                    <td>{{ forloop.counter}}</td>
                                    <td>{{demande.nom}} {{demande.prenom}}</td>
                                    <td>{{demande.telephone}}</td>
                                    <td>{{demande.email}}</td>
                                    <td>{{demande.communaute_provinciale.nom_province}}</td>
                                    <td>{{demande.statut_emploi.nom}}</td>
                                    <td>{{demande.motivation}}</td>
                                    <td>{{demande.etat}}</td>
                                    <td>
                                        {% if demande.etat == "En attente" or demande.etat == "En examen" %}
                                        <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">
                                                {% if demande.etat == "En attente" %}
                                                    <a class="dropdown-item" href="{% url "demande-mettre_en_examen" demande.id %}">Mettre en examen</a>
                                                    <a class="dropdown-item" href="{% url "demande-accepter" demande.id %}">Accepter</a>
                                                    <a class="dropdown-item" href="{% url "demande-rejeter" demande.id %}">Rejeter</a>
                                                {% else %}
                                                    {% if demande.etat == "En examen" %}
                                                        <a class="dropdown-item" href="{% url "demande-accepter" demande.id %}">Accepter</a>
                                                        <a class="dropdown-item" href="{% url "demande-rejeter" demande.id %}">Rejeter</a>
                                                    {% endif %}
                                                {% endif %}
                                                
                                            </div>
                                        </div>
                                        {% endif %}
                                        
                                    </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">
        <div class="modal-header">
          <h4 class="modal-title">Ajouter une demande d'adhésion</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="exampleInputNom">Nom</label> 
                <input type="text" name="nom" class="form-control" id="exampleInputNom" placeholder="Nom" required>
            </div>
            <div class="form-group">
                <label for="exampleInputPrenom">Prénom(s)</label> 
                <input type="text" name="prenom" class="form-control" id="exampleInputPrenom" placeholder="Prénom(s)" required>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">Adresse Email</label> 
                <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Adresse email" required>
            </div>
            <div class="form-group">
                <label for="telephone">Téléphone</label> 
                <input type="text" class="form-control" name="telephone" id="telephone" placeholder="Téléphone" required >
            </div>
            
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <label for="statut">Statut Emploi</label> 
                        <select class="form-control" name="statut" id="statut" required >
                            <option value="" disabled>Selectionnez une option</option>
                            {% for statut in statuts %}
                            <option value="{{statut.id}}">{{statut.nom}}</option>
                            {% endfor %}
                            
                        </select>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label for="communauteProvinciale">Communauté Provinciale</label> 
                        <input type="text" class="form-control" name="communauteProvinciale" id=communauteProvinciale placeholder="communauté provinciale"  required >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="motivation">Motivation</label> 
                <textarea id="motivation" class="form-control" name="motivation" rows="3"  placeholder="Motivation ..."></textarea>
                         
            </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>

        $(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 %}