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

{% block docTitle %}Gestion membres{% endblock docTitle %}
{% block navTitle %}Gestion membres{% endblock navTitle %}
{% block activeMembre %}active{% endblock activeMembre %}

{% 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" %}">  
  
{% endblock headLinks %}

{% 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>N</th>
                                <th>Nom</th>
                                <th>Prenom</th>
                                <th>Email</th>
                                <th>Genre</th>
                                <th>Statut</th>
                                <th>communaute</th>
                                <th>Date d'ajout</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for membre in membres %}
                                <tr>
                                    <td>{{ forloop.counter}}</td>
                                    <td>{{membre.last_name}}</td>
                                    <td>{{membre.first_name}}</td>
                                    <td>{{membre.email}}</td>
                                    <td>{% if membre.genre %}{{membre.genre}}{% endif %}</td>
                                    <td>{{membre.statut_emploi.nom}}</td>
                                    <td>
                                        {% if membre.communaute_provinciale %}
                                            {{membre.communaute_provinciale}}
                                        {% else %}
                                            {% if membre.diapora_pays %}
                                                {{membre.diapora_pays}}
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    <td>{{membre.date_joined}}</td>
                                    <td>
                                        <div class="btn-group">
                                            {% comment %} <button type="button" class="btn btn-warning">Action</button> {% endcomment %}
                                            <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" enctype="multipart/form-data" method="post" action="{% url "add_communaute_membre" %}">
        {% csrf_token %}
        <div class="modal-header">
          <h4 class="modal-title">Ajouter un 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="exampleInputFile">Photo Profil</label> 
                <input type="file" class="form-control" name="photo" id="exampleInputFile">
            </div>

            <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="row">
                <div class="col-6">
                    <div class="form-group">
                        <label for="genre">Genre</label> 
                        <select class="form-control" name="genre" id="genre" required >
                            <option value="Masculin">Masculin</option>
                            <option value="Feminin">Feminin</option>
                        </select>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label for="statut">Statut</label> 
                        <select class="form-control" name="statut" id="statut" required >
                            <option value="" disabled>Selectionnez un statut</option>
                            {% for statut in statuts %}
                                <option value="{{statut.id}}">{{statut.nom}}</option>
                            {% endfor %}
                            
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12" >
                    <div class="row" style="padding: 16px 24px; border: 2px solid #ff0000; border-radius: 8px; display: flex; justify-content: space-between;  align-items: center;">
                        <label>
                            <input type="radio" name="category" value="diaspora" > Diaspora
                        </label>
                        <label class="ml-3">
                            <input type="radio" name="category" value="national" checked> National
                        </label>
                    </div>
                </div>

                <div class="col-md-6 col-sm-12">
                    <div class="row">
                        <div class="col-12"  id="national-select">
                            <div class="form-group">
                                <label for="communauteProvinciale">Communauté Provinciale</label> 
                                <select class="form-control" name="communauteProvinciale" id="communauteProvinciale" placeholder="Province de rattachement">
                                    <option value="" selected>Selectionnez la province de rattachement</option>
                                    {% for communaute in provinces %}
                                        <option value="{{communaute.id}}">{{communaute.nom_province}} ({{communaute.communaute_regionale.nom_region}})</option>
                                    {% endfor %}
                                    
                                </select>
                            </div>
                        </div>
                        <div class="col-12" id="diaspora-select">
                            <div class="form-group">
                                <label for="diaspora">Diaspora</label> 
                                <select class="form-control" name="diaspora" id="diaspora" placeholder="Diaspora de rattachement" >
                                    <option value="" selected>Selectionnez la diaspora de rattachement</option>
                                    {% for diaspora in diasporas %}
                                        <option value="{{diaspora.id}}">{{diaspora.nom_pays}} ({{diaspora.communaute_diaspora_continent.nom_continent}})</option>
                                    {% endfor %}
                                    
                                </select>
                            </div>
                        </div>
                    </div> 
                </div>

            </div>
                       
            <div class="col">
                <p class="text-danger"><span>NB : </span> La personne ne peut etre rattacher que soit a une provinve ou a une diaspora.</p>
            </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>

    <!-- bs-custom-file-input -->
    <script src="{% static "plugins/bs-custom-file-input/bs-custom-file-input.min.js" %}"></script>

    <script>

        $(document).ready(function () {
            $('#diaspora-select').hide();

            // Lorsque l'un des boutons radio est cliqué
            $('input[name="category"]').change(function() {
                // On vérifie la valeur du bouton sélectionné
                if ($(this).val() === 'diaspora') {
                    $('#diaspora-select').show();
                    $('#national-select').hide();
                    $('#diaspora').attr("required");
                    $('#communauteProvinciale').removeAttr("required");
                } else if ($(this).val() === 'national') {
                    $('#national-select').show();
                    $('#diaspora-select').hide();
                    $('#diaspora').removeAttr("required");
                    $('#communauteProvinciale').attr("required");
                }
            });

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