{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>GERANT</h4>
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newGerant" onclick="clear_form()">Ajouter</button>
    </div>

    <!-- Article Table -->
    <div class="table-responsive mt-4">
        <table class="table table-sm align-items-center justify-content-center mb-0">
            <thead class="table-light">
                <tr>
                    <th>NOM</th>
                    <th>SOLDE</th>
                    <th>RETRAIT</th>
                    <th>DEPOT</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                {% for gerant in all_gerant %}
                <tr>
                    <td>{{ gerant.nom }}</td>
                    <td class="money bg-warning p-1">{{ gerant.solde }}</td>
                    <td class="money ">{{ gerant.retrait }}</td>
                    <td class="money ">{{ gerant.depot }}</td>
                    <td><span class="d-flex">
                        <a class="btn btn-outline-warning btn-sm" href="/balance/gerant?gid={{gerant.id}}">BALANCE</a>
                        <button class="btn btn-primary btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#modalAction" onclick="clear_form()">ACTION</button>
                    </span>
                    </td>

                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Form -->
<div class="modal fade" id="modalAction" tabindex="-1" aria-labelledby="addArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form method="POST" action="/gerant/action">
                <div class="modal-header">
                    <h5 class="modal-title" id="addArticleModalLabel">DEPOT/RETRAIT GERANT</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-1">
                        <span class="input-group-text bg-secondary text-light" id="basic-addon1">DATE</span>
                        <input type="date" class="form-control" required  name="date" autocomplete="off" >
                    </div>
                    <div class="input-group mb-1">
                      <span class="input-group-text bg-secondary text-light" id="basic-addon1">GERANT</span>
                          <select class="form-control "  name="gerant_id" >
                            {% for gerant in all_gerant %}
                              <option value="{{gerant.id}}" >{{gerant.nom}}</option>
                            {% endfor %}
                          </select>
                      </div>
                      <div class="input-group mb-1">
                      <span class="input-group-text bg-secondary text-light" id="basic-addon1">TYPE</span>
                          <select class="form-control "  name="type" >
                              <option value="RETRAIT">RETRAIT</option>
                              <option value="DEPOT">DEPOT</option>
                          </select>
                      </div>
                      <div class="input-group mb-1">
                      <span class="input-group-text bg-secondary text-light" id="basic-addon1">CAISSE</span>
                          <select class="form-control "  name="caisse_id" >
                            {% for caisse in all_caisse %}
                              <option value="{{caisse.id}}" >{{caisse.name}}</option>
                            {% endfor %}
                          </select>
                      </div>
                      <div class="input-group mb-1">
                          <span class="input-group-text bg-secondary text-light" id="basic-addon1">MONTANT</span>
                          <input type="number" class="form-control" id="moneyInput"  required min="0" step="0.01" name="montant" autocomplete="off" onclick="this.value = ''">
                      </div>
                          <div id="moneyInWords" class="form-text mt-2"></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-warning" >ENREGISTRER</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="newGerant" tabindex="-1" aria-labelledby="addArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form method="POST" action="/add/gerant">
                <div class="modal-header">
                    <h5 class="modal-title" id="addArticleModalLabel">Ajouter un gérant</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="quantityInput" class="form-label">NOM</label>
                        <input type="text" class="form-control" name="name" autocomplete="off">
                      </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-warning" >ENREGISTRER</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    
                </div>
            </form>
        </div>
    </div>
</div>
<script>
  window.onload=function(){
    var all_number =$(".money");
    for (let number of all_number){

      number.textContent=parseFloat(number.textContent).toLocaleString("fr-FR", {minimumFractionDigits:2});
    };

};
</script>
<script src="../static/js/chiffre2lettre.js"></script>
<script>
  const moneyInput = document.getElementById('moneyInput');
  const moneyInWords = document.getElementById('moneyInWords');

  moneyInput.addEventListener('input', () => {
    moneyInput.value = moneyInput.value.replace(/[^0-9+ ]/g, ''); 
    const value = parseInt(moneyInput.value);
    if (!isNaN(value) && value <= 1000000000) {
      moneyInWords.textContent = NumberToLetter(value) + ' Ariary';
    } else {
      moneyInWords.textContent = '';
    }
  });
</script>
{% endblock %}