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

{% block contents %}
<div class="row">
    <div class="col-12 mt-3">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3>Paiement multiple de cotisation</h3>
            </div>
            <div class="body">
                <div class="row mt-3">
                    <div class="col-md-6 col-sm-12 text-right p-3">
                        <h4 class="text-right mt-3"><b>Mois concernes</b></h4>
                    </div>
                    <div class="col-md-6 col-sm-12 text-right p-3 border-start border-primary border-2">
                        <ol class="text-left d-block p-3">
                            {% for cotisation in cotisations %}
                                <li class="text-primary">{{cotisation.mois|month_name }} {{cotisation.annee }}</li>
                            {% endfor %}
                        </ol>
                    </div>
                    
                </div>
                <h4 class="text-center"><b>Montant total</b> : <span class="text-primary">{{total|floatformat:0 }}</span></h4>

                <div class="row p-3">
                    <div class="col-md-6 col-sm-12">
                        <h5 class="text-danger">I - Procedure de paiement</h5>
                        <ol>
                            <li>Assurez vous que votre compte Orange momey contient au minimum {{total|floatformat:0}}.</li>
                            <li>Composez <a href="tel:*144*3*2*{{total|floatformat:0}}#">*144*3*2*{{total|floatformat:0}}#</a> et finalisez pour generer le code OTP.</li>
                            <li>Remplissez maintenant le formulaire avec le numéro de telephone utilise pour le paiement et le code OTP.</li>
                            <li>Enfin, appuyez sur le bouton "payer maintenant" pour enregistrer votre paiement.</li>
                        </ol>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <h5 class="text-danger">II - Formulaire de paiement</h5>

                        <form action="#" method="post">
                            <div class="col mt-3">
                                <label for="tel">Numero de telephone</label>
                                <input type="tel" class="form-control" name="telephone" id="tel" placeholder="Numero de telephone">
                            </div>
                            <div class="col mt-3">
                                <label for="tel">Code OTP</label>
                                <input type="tel" class="form-control" name="telephone" id="tel" placeholder="Code OTP">
                            </div>
                            <div class="col mt-3">
                                <button type="submit" class="btn btn-success form-control"> Payer maintenant</button>
                            </div>
                            
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</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>

    <script>

        $(document).ready(function () {

            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 10000
            });
        
            {% 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 %}