{% 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 d'un mois de cotisation</h3>
            </div>
            <div class="body">
                <h4 class="text-center mt-3"><b>Mois concerne</b> : <span class="text-primary">{{cotisation.mois|month_name }} {{cotisation.annee }}</span></h4>
                <h4 class="text-center mt-3"><b>Montant</b> : <span class="text-primary">{{cotisation.montant|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 {{cotisation.montant|floatformat:0}}.</li>
                            <li>Composez <a href="tel:*144*3*2*{{cotisation.montant|floatformat:0}}#">*144*3*2*{{cotisation.montant|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>

        $(function () {

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