{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4 class="responsive-heading">Versement fournisseur</h4>
    </div>
<div class="row">
    <div class="col-12 text-white">
    <div class="d-flex justify-content-between align-items-center">
    <input type="text " id="tableSearch" class="form-control  w-50" >
    <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#newVerse" >Nouveau</button>
    </div>
    <div class="table-responsive mt-4">
        <table class="table table-sm align-items-center justify-content-center mb-0" id="commandeTable">
            <thead class="table-light">
                <tr>
                    <th>Fournisseur</th>
                    <th>Date</th>
                    <th>Réf</th>
                    <th>N° SDC</th>
                    <th>Montant</th>
                    <th>Frais</th>
                    <th>Statut</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for versement in all_versement %}
                <tr data-id="{{versement.id}}">
                    <td>{{ versement.fournisseur.nom }}</td>
                    <td>{{ versement.date_str }}</td>
                    <td>{{ versement.ref }}</td>
                    <td>{{ versement.numero }}</td>
                    <td class="money">{{ versement.montant }}</td>
                    <td class="money">{{ versement.frais }}</td>
                    <td>{{ versement.statut_encaissement }}</td>
                    <td><span class="d-flex">
                        
                        {% if versement.statut_encaissement =="NON ENCAISSE" %}
                        <button class="btn btn-danger btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#encaisseModal" onclick="encaisse(this)" data-vid="{{versement.id}}" data-vref="{{versement.ref}}" data-montant="{{versement.montant}}" data-frais="{{versement.frais}}">ENCAISSER</button>
                        {% endif %}
                        {% if versement.statut_encaissement =="ENCAISSE" %}
                        <a class="btn btn-outline-primary btn-sm mx-1" href="#" onclick="ajax_print('/rawbt-caisse-out?id={{versement.sortie_caisse_id}}', this)">IMPRIMER</a>
                        {% endif %}
                        
                    </span>
                    </td>
                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
    </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">SORTIE CAISSE & VERSEMENT FOURNISSEUR</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="/versement/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" />
        </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"   disabled />
        </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 btn-sm" data-bs-dismiss="modal">FERMER</button>
        <button type="submit" class="btn btn-danger btn-sm">ENREGISTRER</button>
      </div>
    </div>
    </form>
  </div>
</div>
</div>

<div class="modal fade" id="newVerse" 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">VERSEMENT FOURNISSEUR</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="/versement/new" id='regForm'>
      <div class="modal-body" >
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE VERSEMENT</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">Fournisseur</span>
              <select class="form-control "  name="fournisseur_id" >
                  <option value="{{fournisseur.id}}" >{{fournisseur.nom}}</option>
              </select>
          </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="versementMontant" class="form-control px-2" name="montant" required autocomplete="off" oninput="number2text('versementMontant','versementMontantInWords')" />
        </div>
        <div id="versementMontantInWords" class="form-text mt-2"></div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >FRAIS (BANQUE)</span>
            <input type="number" min="0" step='0.01' id="fraisInput" class="form-control px-2" name="frais" required  autocomplete="off" oninput="number2text('fraisInput','fraisInWords')"  />
        </div>
        <div id="fraisInWords" class="form-text mt-2"></div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >REF </span>
            <input type="text"  class="form-control px-2" name="ref" placeholder="REF BC, BL, FACTURE,..."  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 = '';
    }
  });

function number2text(input, text){
  const moneyInput = document.getElementById(input);
  const moneyInWords = document.getElementById(text);
  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 vid=self.dataset.vid;
  const vref=self.dataset.vref;
  const form=document.getElementById("encaisseForm");
  form.action='/caisse/sortie?type=fournisseur&vid='+vid;
  form.objet.value=vref;
  form.montant.value=parseFloat(self.dataset.montant)+parseFloat(self.dataset.frais);
}

</script>



<script>
function pc_print(data){
alert("ONLY ON A BLUETOOTH ANDROID PRINTER");
}       


function android_print(data){
            window.location.href = data; 
        }

// for php demo call
function ajax_print(url, btn) {
    console.log(btn);
    b = $(btn);
    b.attr('data-old', b.text());
    b.text('wait');
    $.get(url, function (data) {
    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
    if(isAndroid) {
        android_print(data);
    }else{
        pc_print(data);
    }
        }).fail(function () {
            alert("ajax error");
        }).always(function () {
            b.text(b.attr('data-old'));
        })
    }


</script>
{% endblock %}