{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    

        <h4>X CAISSE</h4>
        <div class="d-flex justify-content-between align-items-center">
        <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">CAISSIER</span>
              <select class="form-control "  id="caissier">
                {% for id, name in CAISSIER.items() %}
                  <option value="{{id}}" data-name="{{name}}" >{{name}}</option>
                {% endfor %}
              </select>
          </div>
          <div class="input-group mb-1">
            <ul class="list-group " >
            <li class="list-group-item d-flex justify-content-between">
              <span >TOTAL: </span>
              <strong class="mx-1" id="total"></strong>
            </li>
            </ul>
        </div>

    </div>
    <div class="row">
      <div class="col-sm-12 col-md-3 col-lg-3" >
          <div class="input-group mb-1">
              <span class="input-group-text bg-secondary text-white" >DEBUT</span>
              <input type="date"  class="form-control px-2" id="date_debut" required />
          </div>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-3" >
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >FIN</span>
            <input type="date"  class="form-control px-2" id="date_fin" required />
        </div>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-3" >
        <button type="button" class="btn btn-danger no-print" onclick="search()">CHERCHER</button>
        </div>
      </div>
    <div class="">

    <div class="row">
    <div class="table-responsive mt-4 col-lg-6 col-md-3 col-sm-12">
        <table class="table table-sm align-items-center justify-content-center mb-0" id="xtable">
            <thead class="table-light">
                <tr>
                    <th>Date</th>
                    <th>Caissier</th>
                    <th>Commande</th>
                    <th>Montant</th>
                    
                </tr>
            </thead>
            <tbody id="body_detail">
                
            </tbody>
        </table>
    </div>
    </div>
</div>

<script>
  function search() {
    let caissier=document.getElementById("caissier").value;
    let date_debut=document.getElementById("date_debut").value;
    let date_fin=document.getElementById('date_fin').value;
    if((date_fin==="")||(date_debut==="")){
      alert("DATE FIELD REQUIRED")
    }else{
      const debut=new Date(date_debut);
      const fin=new Date(date_fin);
      if(fin>=debut){
        fetch("/json/xcaisse", {
          method: "POST",
          headers:{"Content-Type": 'application/json'},
          body:JSON.stringify({"caissier":caissier,"date_debut":date_debut, "date_fin":date_fin})
        })
        .then(res => res.json())
        .then(data => {  
          console.log(data);
          document.getElementById("total").textContent=parseFloat(data["total"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
           let body_detail=document.getElementById("body_detail");
          body_detail.innerHTML="";
          for(let detail of data["reglement"]){
              let tr_row=document.createElement("tr");
              let date=document.createElement("td");
              date.textContent=detail["date"];

              let cs=document.createElement("td");
              cs.textContent=detail["caissier"];
              let comm=document.createElement("td");
              comm.textContent=detail["commande"];
              let montant=document.createElement("td");
              montant.textContent=parseFloat(detail["montant"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
              
              tr_row.appendChild(date);
              tr_row.appendChild(cs);
              tr_row.appendChild(comm);
              tr_row.appendChild(montant);
              body_detail.appendChild(tr_row);
            }

        })
        .catch(err => {
          console.error(" failed:", err);
          
        });
      }else{
        alert("DATE FIN DOIT ETRE SUPERIEUR OU EGALE A DATE DEBUT")
      }
    
    }
}
</script>
{% endblock %}