{% extends "base_frontoffice.html" %}

{% block content %}
<style>

   span {
    font-size: clamp(0.7rem, 1vw, 2rem);
  }
   input {
    font-size: clamp(0.7rem, 1vw, 2rem);
  }
 
  
</style>


<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h3>BILAN D'OUVERTURE</h3> 
    </div>
    <form method="POST" action="/bilan/reinit?bid={{bilan.id}}" id="bilanForm">
    <div class="row my-2">
        <div class="col-sm-12 col-md-6 col-lg-6 card ">
            <h4>CAISSE</h4>
                {% for caisse  in all_caisse %}
                <div class="input-group mb-1">
                  <span class="input-group-text bg-secondary text-light" id="basic-addon1">{{caisse.name}}</span>
                  <input type="number" class="form-control"   required  step="0.01" name="caisse_{{caisse.id}}" autocomplete="off" onclick="this.value = ''" value="0">
                  </div>
                {% endfor %}
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6 card ">
            <h4>FOURNISSEUR</h4>
            <span class="input-group-text bg-secondary text-light" id="basic-addon1">{{ fournisseur.nom }}</span>
                <div class="input-group mb-1">
                  <span class="input-group-text bg-secondary text-light" id="basic-addon1">CREDIT</span>
                  <input type="number" class="form-control"   required min="0" step="0.01" name="fournisseur_credit" autocomplete="off" onclick="this.value = ''" value="0">
                </div>
                <div class="input-group mb-1">
                  <span class="input-group-text bg-secondary text-light" id="basic-addon1">DEBIT</span>
                  <input type="number" class="form-control"   required min="0" step="0.01" name="fournisseur_debit" autocomplete="off" onclick="this.value = ''" value="0">
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6 card ">
            <h4>GERANT</h4>
            {% for gerant in all_gerant %}
            <span class="input-group-text bg-secondary text-light" id="basic-addon1">{{ gerant.nom }}</span>
                <div class="input-group my-1">
                  <span class="input-group-text bg-secondary text-light" id="basic-addon1">CREDIT</span>
                  <input type="number" class="form-control"   required min="0" step="0.01" name="gerantCredit_{{gerant.id}}" autocomplete="off" onclick="this.value = ''" value="0">
                </div>
                <div class="input-group mb-1">
                  <span class="input-group-text bg-secondary text-light" id="basic-addon1">DEBIT</span>
                  <input type="number" class="form-control"   required min="0" step="0.01" name="gerantDebit_{{gerant.id}}" autocomplete="off" onclick="this.value = ''" value="0">
                </div>
                <hr>
            {% endfor %}
        </div>
        </div>
        <div class="row my-2">
        <div class="col-sm-12 col-md-6 col-lg-6 card ">
            <h4>CLIENT</h4>
            {% for client in all_client %}
            <span class="input-group-text bg-secondary text-light" id="basic-addon1">{{ client.full_name }}</span>
                <div class="input-group my-1">
                  <span class="input-group-text bg-secondary text-light" id="basic-addon1">CREDIT</span>
                  <input type="number" class="form-control"   required min="0" step="0.01" name="clientCredit_{{client.id}}" autocomplete="off" onclick="this.value = ''" value="0">
                </div>
                <div class="input-group mb-1">
                  <span class="input-group-text bg-secondary text-light" id="basic-addon1">DEBIT</span>
                  <input type="number" class="form-control"   required min="0" step="0.01" name="clientDebit_{{client.id}}" autocomplete="off" onclick="this.value = ''" value="0">
                </div>
                <hr>
            {% endfor %}
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6 card ">
            <h4>STOCK</h4>
            {% for article in all_article %}
                <div class="input-group my-1">
                  <span class="input-group-text bg-secondary text-light " id="basic-addon1">{{article.full_name}}</span>
                  <input type="number" class="form-control"   required min="0" step="0.01" name="article_{{article.id}}" autocomplete="off" onclick="this.value = ''" value="0">
                </div>
            {% endfor %}
        </div>
        </div>
        </form>
    <button class="btn btn-danger btn-lg w-100" type="button" data-bs-toggle="modal" data-bs-target="#bilanModal">ENREGISTRER</button>
    </div>

<div class="modal fade" id="bilanModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="productModalLabel">ENREGISTREMENT BILAN D'OUVERTURE</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <!-- Quantity -->
          <div class="mb-3">
            <label for="quantityInput" class="form-label">MOT DE PASSE MAGIQUE</label>
            <input type="password" class="form-control" name="superpass" required form="bilanForm">
          </div>
          <div class="modal-footer">
        <button type="submit" class="btn btn-primary" form="bilanForm">ENREGISTRER</button>
      </div>
      </div>
      
    </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 %}