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

{% block docTitle %}Gestion de la section de rattachement{% endblock docTitle %}
{% block navTitle %}Gestion de la section de rattachement{% endblock navTitle %}

{% 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 %}

    <div class="row mt-3">
        <div class="card col mt-3">
            <div class="card-header">
                <button class="btn btn-primary" id="collapse-menu1" data-toggle="collapse" data-target="#section-regionale">Sections regionales</button>
                <button class="btn btn-outline-success" id="collapse-menu2" data-toggle="collapse" data-target="#section-provinciale">Sections provinciales</button>
                <button class="btn btn-outline-warning" id="collapse-menu3" data-toggle="collapse" data-target="#continents-diaspora">Continents de diapora</button>
                <button class="btn btn-outline-danger" id="collapse-menu4" data-toggle="collapse" data-target="#pays-diaspora">Pays de diaspora</button>
            </div>
            <div class="card-body">
                <div id="section-regionale" class="collapse show">
                    <button class="btn btn-outline-success"  data-toggle="modal" data-target="#regional-add-modal">
                        <i class="fas fa-plus"></i> Ajouter
                    </button>
                    <table id="region-table" class="table table-bordered table-striped dataTable dtr-inline">
                        <thead>
                            <tr>
                                <th>Ordre</th>
                                <th>Nom de la region</th>
                                <th>Nombre de membres</th>
                                <th>Cotisations recus</th>
                                <th>Cotisations impayes</th>
                                <th>Date d'ajout</th>
                                <th>Date de creation</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for region in regions %}
                                <tr>
                                    <td>{{ forloop.counter}}</td>
                                    <td>{{region.nom_region}}</td>
                                    <td>{{region.nb_membres}}</td>
                                    <td>{{region.total_payes}}</td>
                                    <td>{{region.total_impayes}}</td>
                                    <td>{{region.updated_at}}</td>
                                    <td>{{region.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="{% url "supprimer_communaute_regionale" region.id %}">Supprimer</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div id="section-provinciale"  class="collapse">
                    <button class="btn btn-outline-success"  data-toggle="modal" data-target="#provincial-add-modal">
                        <i class="fas fa-plus"></i> Ajouter
                    </button>
                    <table id="province-table" class="table table-bordered table-striped dataTable dtr-inline">
                        <thead>
                            <tr>
                                <th>Ordre</th>
                                <th>Region</th>
                                <th>Province</th>
                                <th>Nombre de membres</th>
                                <th>Cotisations recus</th>
                                <th>Cotisations impayes</th>
                                <th>Derniere modification</th>
                                <th>Date d'ajout</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for province in provinces %}
                                <tr>
                                    <td>{{ forloop.counter}}</td>
                                    <td>{{province.communaute_regionale.nom_region}}</td>
                                    <td>{{province.nom_province}}</td>
                                    <td>{{province.nb_membres}}</td>
                                    <td>{{province.frais_adhesion}}</td>
                                    <td>{{province.frais_cotisation}}</td>
                                    <td>{{province.updated_at}}</td>
                                    <td>{{province.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="{% url 'supprimer_communaute_provinciale' province.id %}">Supprimer</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div id="continents-diaspora" class="collapse">
                    <button class="btn btn-outline-success"  data-toggle="modal" data-target="#continentdiaspo-add-modal">
                        <i class="fas fa-plus"></i> Ajouter
                    </button>
                    <table id="continentdiaspo-table" class="table table-bordered table-striped dataTable dtr-inline">
                        <thead>
                            <tr>
                                <th>Ordre</th>
                                <th>Nom du continent</th>
                                <th>Nombre de membres</th>
                                <th>Cotisations recus</th>
                                <th>Cotisations impayes</th>
                                <th>Derniere modification</th>
                                <th>Date d'ajout</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for continent in continents %}
                                <tr>
                                    <td>{{ forloop.counter}}</td>
                                    <td>{{continent.nom_continent}}</td>
                                    <td>{{continent.nb_membres}}</td>
                                    <td>{{continent.frais_adhesion}}</td>
                                    <td>{{continent.frais_cotisation}}</td>
                                    <td>{{continent.updated_at}}</td>
                                    <td>{{continent.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="{% url 'supprimer_communaute_diaspo_continent' continent.id %}">Supprimer</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div id="pays-diaspora" class="collapse">
                    <button class="btn btn-outline-success"  data-toggle="modal" data-target="#paysdiapo-add-modal">
                        <i class="fas fa-plus"></i> Ajouter
                    </button>
                    <table id="paysdiapo-table" class="table table-bordered table-striped dataTable dtr-inline">
                        <thead>
                            <tr>
                                <th>Ordre</th>
                                <th>Continent</th>
                                <th>Pays</th>
                                <th>Nombre de membres</th>
                                <th>Cotisations recus</th>
                                <th>Cotisations impayes</th>
                                <th>Derniere modification</th>
                                <th>Date d'ajout</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in pays %}
                                <tr>
                                    <td>{{ forloop.counter}}</td>
                                    <td>{{p.communaute_diaspora_continent.nom_continent}}</td>
                                    <td>{{p.nom_pays}}</td>
                                    <td>{{p.nb_membres}}</td>
                                    <td>{{p.frais_adhesion}}</td>
                                    <td>{{p.frais_cotisation}}</td>
                                    <td>{{p.updated_at}}</td>
                                    <td>{{p.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="{% url 'supprimer_communaute_diaspo_pays' p.id %}">Supprimer</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    


<div class="modal fade" id="regional-add-modal">
    <div class="modal-dialog">
      <form class="modal-content" method="POST" action="{% url 'add_communaute_regionale' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h4 class="modal-title">Ajouter une communaute regionale</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 de la region" required>
            </div>
            <div class="form-group">
                <label for="admin-reg">Administrateur</label> 
                <select class="form-control" name="admin" id="admin-reg" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="secretaire-reg">Secretaire</label> 
                <select class="form-control" name="secretaire" id="secretaire-reg" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="tresorier-reg">Tresorier</label> 
                <select class="form-control" name="tresorier" id="tresorier-reg" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </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>


<div class="modal fade" id="provincial-add-modal">
    <div class="modal-dialog">
      <form class="modal-content" method="POST" action="{% url 'add_communaute_provinciale' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h4 class="modal-title">Ajouter une communaute provinciale</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 de la province" required>
            </div>
            <div class="form-group">
                <label for="region">Region</label> 
                <select class="form-control" name="region" id="region" required >
                    <option value="">Selectionnez une region</option>
                    {% for region in regions %}
                        <option value="{{region.id}}">{{region.nom_region}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="admin-prov">Administrateur</label> 
                <select class="form-control" name="admin" id="admin-prov" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="secretaire-prov">Secretaire</label> 
                <select class="form-control" name="secretaire" id="secretaire-prov" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="tresorier-prov">Tresorier</label> 
                <select class="form-control" name="tresorier" id="tresorier-prov" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </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>


<div class="modal fade" id="continentdiaspo-add-modal">
    <div class="modal-dialog">
      <form class="modal-content" method="POST" action="{% url "add_communaute_diaspora_continent" %}">
        {% csrf_token %}
        <div class="modal-header">
          <h4 class="modal-title">Ajouter une communaute de diaspora (Continent)</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 du continent</label> 
                <input type="text" name="nom" class="form-control" id="exampleInputNom" placeholder="Nom du continent" required>
            </div>
            <div class="form-group">
                <label for="admin-dc">Administrateur</label> 
                <select class="form-control" name="admin" id="admin-dc" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="secretaire-dc">Secretaire</label> 
                <select class="form-control" name="secretaire" id="secretaire-dc" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="tresorier-dc">Tresorier</label> 
                <select class="form-control" name="tresorier" id="tresorier-dc" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </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>


<div class="modal fade" id="paysdiapo-add-modal">
    <div class="modal-dialog">
      <form class="modal-content" method="POST" action="{% url "add_communaute_diaspora_pays" %}">
        {% csrf_token %}
        <div class="modal-header">
          <h4 class="modal-title">Ajouter une communaute de diaspora (Pays)</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 du pays" required>
            </div>
            <div class="form-group">
                <label for="continent">Continent</label> 
                <select class="form-control" name="continent" id="continent" required >
                    <option value="">Selectionnez un continent</option>
                    {% for continent in continents %}
                        <option value="{{continent.id}}">{{continent.nom_continent}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="admin-prov">Administrateur</label> 
                <select class="form-control" name="admin" id="admin-prov" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="secretaire-prov">Secretaire</label> 
                <select class="form-control" name="secretaire" id="secretaire-prov" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="tresorier-prov">Tresorier</label> 
                <select class="form-control" name="tresorier" id="tresorier-prov" required >
                    <option value="">Selectionnez une membre</option>
                    {% for membre in membres %}
                        <option value="{{membre.id}}">{{membre.first_name}} {{membre.last_name}} ({{membre.email}})</option>
                    {% endfor %}
                </select>
            </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>


{% 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() {
        

        $('#collapse-menu1').click(function() {
            console.log("testing....1");
            $('#section-provinciale').removeClass('show');
            $('#continents-diaspora').removeClass('show');
            $('#pays-diaspora').removeClass('show');
            $('#collapse-menu1').addClass("btn-primary");
            $('#collapse-menu1').removeClass("btn-outline-primary");
            $('#collapse-menu2').removeClass("btn-success");
            $('#collapse-menu3').removeClass("btn-warning");
            $('#collapse-menu4').removeClass("btn-danger");
            $('#collapse-menu2').addClass("btn-outline-success");
            $('#collapse-menu3').addClass("btn-outline-warning");
            $('#collapse-menu4').addClass("btn-outline-danger");
        });
        $('#collapse-menu2').click(function() {
            console.log("testing....2");
            $('#section-regionale').removeClass('show');
            $('#continents-diaspora').removeClass('show');
            $('#pays-diaspora').removeClass('show');
            $('#collapse-menu1').addClass("btn-outline-primary");
            $('#collapse-menu1').removeClass("btn-primary");
            $('#collapse-menu2').removeClass("btn-outline-success");
            $('#collapse-menu3').removeClass("btn-warning");
            $('#collapse-menu4').removeClass("btn-danger");
            $('#collapse-menu2').addClass("btn-success");
            $('#collapse-menu3').addClass("btn-outline-warning");
            $('#collapse-menu4').addClass("btn-outline-danger");
        });
        $('#collapse-menu3').click(function() {
            console.log("testing....3");
            $('#section-regionale').removeClass('show');
            $('#section-provinciale').removeClass('show');
            $('#pays-diaspora').removeClass('show');
            $('#collapse-menu1').addClass("btn-outline-primary");
            $('#collapse-menu1').removeClass("btn-primary");
            $('#collapse-menu2').removeClass("btn-success");
            $('#collapse-menu3').removeClass("btn-outline-warning");
            $('#collapse-menu4').removeClass("btn-danger");
            $('#collapse-menu2').addClass("btn-outline-success");
            $('#collapse-menu3').addClass("btn-warning");
            $('#collapse-menu4').addClass("btn-outline-danger");
        });
        $('#collapse-menu4').click(function() {
            console.log("testing....");
            $('#section-regionale').removeClass('show');
            $('#section-provinciale').removeClass('show');
            $('#continents-diaspora').removeClass('show');
            $('#collapse-menu1').addClass("btn-outline-primary");
            $('#collapse-menu1').removeClass("btn-primary");
            $('#collapse-menu2').removeClass("btn-success");
            $('#collapse-menu3').removeClass("btn-warning");
            $('#collapse-menu4').removeClass("btn-outline-danger");
            $('#collapse-menu2').addClass("btn-outline-success");
            $('#collapse-menu3').addClass("btn-outline-warning");
            $('#collapse-menu4').addClass("btn-danger");
        });
    });

    $(function () {

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