{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>CAISSES</h4>
        
    </div>
    <div class="d-flex justify-content-between align-items-center no-print">
    <button class="btn btn-danger btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#encaisseModal" onclick="encaisse(this)" >NOUVEAU DEPENSE</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>#</th>
                    <th>CAISSE</th>
                    <th>SOLDE</th>
                    <th>RECETTE</th>
                    <th>DEPENSE</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                {% for caisse in all_caisse %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ caisse.name }}</td>
                    <td class="money bg-warning p-1">{{ caisse.solde_val_html }}</td>
                    <td class="money ">{{ caisse.recette_html }}</td>
                    <td class="money ">{{ caisse.depense_html }}</td>
                    <td><span class="d-flex">
                        <a class="btn btn-outline-warning btn-sm" href="/journal/caisse?cid={{caisse.id}}">JOURNAL</a><a class="btn btn-outline-danger btn-sm mx-1" href="/depense/caisse?cid={{caisse.id}}">DEPENSE</a><a class="btn btn-outline-success btn-sm" href="/recette/caisse?cid={{caisse.id}}">RECETTE</a>
                    </span>
                    </td>

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

<!-- Modal Form -->
<div class="modal fade" id="addArticleModal" tabindex="-1" aria-labelledby="addArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form method="POST" action="/add/caisse">
                <div class="modal-header">
                    <h5 class="modal-title" id="addArticleModalLabel">Ajouter une caisse</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>

<div class="modal fade" id="encaisseModal" tabindex="-1" aria-labelledby="cancelLabel" >
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cancelLabel">NOUVEAU DEPENSE</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="/depense/new" id='encaisseForm'>
      <div class="modal-body" >
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE</span>
            <input type="date"  class="form-control px-2" name="date" required />
        </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-white" >LIBELLE</span>
          <input type="text" class="form-control px-2" name="libelle"  autocomplete="off" required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >OBJET</span>
            <input type="text"  class="form-control px-2" name="objet"   autocomplete="off" required />
        </div>
        
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >MONTANT</span>
            <input type="number" min="0" step='0.01' id="moneyInput" class="form-control px-2" name="montant" required autocomplete="off" />
        </div>
        <div id="moneyInWords" class="form-text mt-2"></div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >BENEFICIAIRE</span>
            <input type="text" class="form-control px-2" name="beneficiaire" required autocomplete="off" />
          </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">FERMER</button>
        <button type="submit" class="btn btn-danger">ENREGISTRER</button>
      </div>
    </div>
    </form>
  </div>
</div>
</div>
<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 = '';
    }
  });

document.getElementById("tableSearch").addEventListener("keyup", function () {
  const input = this.value.toLowerCase();
  const rows = document.querySelectorAll("#commandeTable tbody tr");

  rows.forEach(row => {
    const rowText = row.innerText.toLowerCase();
    row.style.display = rowText.includes(input) ? "" : "none";
  });
});
</script>
<script>
  window.onload=function(){
    var all_number =$(".money");
    for (let number of all_number){

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

};


function encaisse(self) {

  const form=document.getElementById("encaisseForm");
  form.action='/caisse/sortie?type=depense';
  
}
</script>
{% endblock %}