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

{% block docTitle %}Mes cotisations{% endblock docTitle %}
{% block navTitle %}Mes cotisations{% 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" %}">  
  <link rel="stylesheet" href="{% static "virtual-select/virtual-select.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-success mr-3"  data-toggle="modal" data-target="#add-modal">
                    <i class="fas fa-plus"></i> Payer plusieurs mois
                </button>

                <button class="btn btn-info"  data-toggle="modal" data-target="#avance-modal">
                    <i class="fas fa-plus"></i> Payer en avance
                </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>Mois</th>
                                <th>Annee</th>
                                <th>Montant</th>
                                <th>Statut</th>
                                <th>Paye le</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for cotisation in liste_cotisations %}
                                <tr>
                                    <td>{{ forloop.counter}}</td>
                                    <td>{{cotisation.mois|month_name }}</td>
                                    <td>{{cotisation.annee}}</td>
                                    <td>{{request.user.statut_emploi.frais_cotisation}}</td>
                                    <td>{% if cotisation.payee %}<span class="text-success">Payee</span>{% else %}<span class="text-danger">Non payee</span>{% endif %}</td>
                                    <td>{% if cotisation.payee %} {{cotisation.payee_le}}{% else %}-- / -- / ----{% endif %}</td>
                                    <td>
                                        {% if not cotisation.payee %}
                                            <a href="{% url 'payer_un_mois' cotisation.id %}" class="btn btn-warning">Payer maintenant</a>
                                        {% 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" method="POST" action="{% url 'cotisation_paiements_multiples' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h4 class="modal-title">Paiements multiple</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" class="col-md-4 col-sm-12">Mois a payer</label> 
                <div id="sample-select" class="col-md-8 col-sm-12"></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">Passer au paiement</button>
        </div>
    </form>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade" id="avance-modal">
    <div class="modal-dialog">
      <form class="modal-content" method="POST" action="{% url 'cotisation_paiements_avance' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h4 class="modal-title">Payer en avance</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="row align-center">
                <label for="exampleInputNom" class="col-md-6 col-sm-12">Nombre de mois a payer</label> 
                <input type="number" step="1" name="nombre-mois" class="form-control col-md-6 col-sm-12">
            </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">Passer au paiement</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>
    
    <script src="{% static "virtual-select/virtual-select.min.js" %}"></script>

    <script>

        $(function () {

            VirtualSelect.init({
                ele: '#sample-select',
                name: "mois-a-payer",
                placeholder: "Liste des mois non payes",
                multiple: true,
                selectAllText: "Tout selectionnés",
                searchPlaceholderText: "Valeur recherchée",
                optionsSelectedText: "mois selectionnés",
                optionSelectedText: "mois selectionnés",
                allOptionsSelectedText: "Tout",
                options: [
                {% for c in liste_cotisations %}
                    {% if not c.payee %}
                        { label: '{{c.mois|month_name }} {{c.annee}}', value: '{{c.id}}' }
                        {% if not forloop.last %},{% endif %}
                    {% endif %}
                {% endfor %}
                  
                ],
              });

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