{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>LISTE BILAN D'OUVERTURE</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="#bilanModal" onclick="encaisse(this)" >NOUVEAU BILAN</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>DATE</th>
                    <th>OBJET</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                {% for bilan in all_bilan %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ bilan.date_str }}</td>
                    <td>{{ bilan.objet }}</td>
                    <td><span class="d-flex">
                        {% if bilan.is_defined==False%}
                        <a class="btn btn-outline-warning btn-sm" href="/bilan/reinit?bid={{bilan.id}}">DEFINIR</a>
                        {% endif %}
                        <a class="btn btn-outline-info mx-1 btn-sm" href="/bilan/detail?bid={{bilan.id}}">DETAIL</a>
                    </span>
                    </td>

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

<!-- Modal Form -->
<div class="modal fade" id="bilanModal" tabindex="-1" aria-labelledby="addArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form method="POST" action="/add/bilan">
                <div class="modal-header">
                    <h5 class="modal-title" id="addArticleModalLabel">AJOUT BILAN</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">OBJET</label>
                        <input type="text" class="form-control" name="objet" autocomplete="off" required>
                      </div>
                    <div class="mb-3">
                        <label for="quantityInput" class="form-label">DATE</label>
                        <input type="date" class="form-control" name="date" autocomplete="off" required>
                      </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 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 %}