{% 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">Listes Commande fournisseur</h4>
    </div>
<div class="row">
    <div class="col-sm-12 col-md-8 col-lg-8 text-white">
    <div class="d-flex justify-content-between align-items-center">
    <input type="text " id="tableSearch" class="form-control  w-50" >
    <a class="btn btn-primary" href="/panier/commande">NOUVEAU</a>
    
    </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>Numéro</th>
                    <th>Date</th>
                    <th>Montant</th>
                    <th>Livraison</th>
                    <th>Règlement</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for commande in all_commande %}
                <tr data-id="{{commande.id}}">
                    <td>{{ commande.fournisseur.nom }}</td>
                    <td>{{ commande.numero }}</td>
                    <td>{{ commande.date_str }}</td>
                    <td class="money">{{ commande.montant_commande }}</td>
                    <td>{{ commande.statut_livraison() }}</td>
                    <td class="money">{{ commande.statut_reglement()[0] }}</td>
                    <td><span class="d-flex">
                        <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#detailModal" onclick="show_detail('{{commande.id}}')">Detail</button>
                        {% if commande.statut_reglement()[1]=="NON REGLEE" %}
                        <button class="btn btn-warning btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#reglerModal" data-montant="{{commande.statut_reglement()[2]}}" data-bc="{{commande.numero}}" data-datebc={{commande.date_html}} onclick="reglement('{{commande.id}}', this)">Régler</button>
                        {% endif %}
                        {% if commande.statut_livraison()!= "100%" %}
                        <a class="btn btn-info btn-sm mx-1" href="/panier/fournisseur?cid={{commande.id}}">Livrer</a>
                        {% endif %}
                        {% if current.account_type=="admin" %}
                        <a class="btn btn-outline-danger btn-sm mx-1" href="/commande_fournisseur/edit?id={{commande.id}}" >MODIFIER</a>
                        {% endif %}
                    </span>
                    </td>
                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
    </div>
    </div>
</div>
<!-- Modal Form -->
<div class="modal fade" id="detailModal" 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">DETAIL COMMANDE</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-white" >DATE COMMANDE</span>
            <input type="date"  class="form-control px-2"  id="detail_date"  disabled />
        </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"  id="ref"  disabled />
        </div>
        
        
        <div class="table-responsive mt-1">
        <table class="table table-sm align-items-center justify-content-center mb-0">
            <thead class="table-light">
                <tr>
                    <th>Ref</th>
                    <th>P Achat</th>
                    <th>Qté</th>
                    <th>Montant</th>
                    <th>Qté liv</th>
                    <th>Reste</th>
                </tr>
            </thead>
            <tbody id="body_detail">
             </tbody>
        </table> 
        </div>
        <hr>
       <h5>REGLEMENT</h5>
       <ul class="list-group mb-3" id="reg-items">
        </ul>
        <hr>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">FERMER</button>
      </div>
    </div>
  </div>
</div>
</div>

<div class="modal fade" id="reglerModal" 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">REGLEMENT FOURNISSEUR & SORTIE CAISSE</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="#" id='regForm'>
      <div class="modal-body" >
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE COMMANDE</span>
            <input type="date"  class="form-control px-2" name="date" disabled />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >N° COMMANDE</span>
            <input type="text"  class="form-control px-2" name="bc" 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 oninput="refresh()" />
        </div>
        <div id="moneyInWords" class="form-text mt-2"></div>
        <hr>
        

        <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">
                {% for caisse in all_caisse %}
                  <option value="{{caisse.id}}">{{caisse.name}} - {{caisse.mode}}</option>
                {% endfor %}
              </select>
          </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="moneyInput" class="form-control px-2" name="frais" value="0" required oninput="refresh()"/>
        </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" required />
        </div> -->
        <hr>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >TOTAL MONTANT</span>
            <strong class="form-control px-2 money" id="total" ></strong>
        </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-sm btn-secondary" data-bs-dismiss="modal">FERMER</button>
        <button type="submit" class="btn btn-sm 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 refresh() {
  let regForm=document.getElementById("regForm");
  let total_montant=parseInt(regForm.montant.value)+parseInt(regForm.frais.value);
  let total=document.getElementById("total");
  total.textContent=total_montant.toLocaleString("fr-FR", {minimumFractionDigits:2});
}
function reglement(id, self){
    let regForm=document.getElementById("regForm");
    regForm.action='/reglement/commande?id='+id;
    let montant=self.dataset.montant;
    regForm.montant.value=parseInt(montant);
    const moneyInWords = document.getElementById('moneyInWords');
    moneyInWords.textContent = NumberToLetter(montant) + ' Ariary';
    regForm.bc.value=self.dataset.bc;
    regForm.date.value=self.dataset.datebc;
    let total=document.getElementById("total");
    total.textContent=parseFloat(regForm.montant.value).toLocaleString("fr-FR", {minimumFractionDigits:2});
    regForm.frais.value=0;

}

function show_detail(id) {
    let detail_date=document.getElementById("detail_date");
    detail_date.value="";
    let ref=document.getElementById("ref");
    ref.value="";
    let body_detail=document.getElementById("body_detail");
    body_detail.innerHTML="";
    let reg_items=document.getElementById("reg-items");
    reg_items.innerHTML=""

    fetch("/json/commande/fournisseur?id="+id, {
      method: "GET",
    })
    .then(res => res.json())
    .then(data => {
      ref.value=data["numero"];
      detail_date.value=data["date"];
      for(let detail of data["detail"]){
          let code =detail["article_code"];
          let tr_row=document.createElement("tr");
          let ref_td=document.createElement("td");
          ref_td.textContent=code;
          let livraison=data["livraison"];
          let prix_td=document.createElement("td");
          prix_td.textContent=parseFloat(detail["pu"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
          let qty_td=document.createElement("td");
          qty_td.textContent=detail["quantite"];
          let montant_td=document.createElement("td");
          montant_td.textContent=parseFloat(detail["sous_total"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
          let liv_td=document.createElement("td");
          liv_td.textContent=data["livraison"][code];
          let reste=document.createElement("td");
          reste.textContent=data["reste"][code];
          tr_row.appendChild(ref_td);
          tr_row.appendChild(prix_td);
          tr_row.appendChild(qty_td);
          tr_row.appendChild(montant_td);
          tr_row.appendChild(liv_td);
          tr_row.appendChild(reste);
          body_detail.appendChild(tr_row);
      }

      for(let reg of data["reglement"]){
        let li=document.createElement("li");
        li.classList="list-group-item d-flex justify-content-between";
        let span=document.createElement("span");
        span.textContent=reg["date"];
        let strong=document.createElement("strong");
        strong.textContent=parseFloat(reg["montant"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
        let btn =document.createElement("button");
        btn.classList="btn btn-outline-primary btn-sm mx-1";
        btn.setAttribute("onclick",`ajax_print('/rawbt-versement-out?cid=${reg["reg_id"]}', this)`);
        btn.textContent="IMPRIMER";
        li.appendChild(span);
        li.appendChild(strong);
        li.appendChild(btn);
        reg_items.appendChild(li);

      }
     
    })
    .catch(err => {
      console.error(" failed:", err);
      
    });
}
</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) {
    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 %}