{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>Réservation poussin</h4>
    </div>
    <div class="d-flex justify-content-between align-items-center">
    <input type="text " id="tableSearch" class="form-control  w-50" >
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reserveationModal">NOUVEAU</button>
    
    </div>

    <!-- Article Table -->
    <div class="table-responsive mt-4">
        <table class="table table-sm align-items-center justify-content-center mb-0" id='clientTable'>
            <thead class="table-light">
                <tr>
                    <th>Date</th>
                    <th>Client</th>
                    <th>Qté com</th>
                    <th>Prix Unit</th>
                    <th>Date reservé</th>
                    <th>Avance</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for reserve in all_reservation %}
                <tr data-id="{{reserve.id}}">
                    <td>{{ reserve.date_reservation_str }}</td>
                    <td>{{ reserve.client.nom }}</td>
                    <td class="bg-info">{{ reserve.quantite_commande }}</td>
                    <td class="money">{{ reserve.prix_str }}</td>
                    <td >{{ reserve.date_reservation_str }}</td>
                    <td class="money">{{ reserve.avance }}</td>
                    <td><span class="d-flex">
                        <a class="btn btn-outline-warning btn-sm" href="#" onclick="ajax_print('/rawbt-avance?id={{reserve.recette_id}}',this)">IMPRIMER</a>
                        
                    </span>
                    </td>
                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>


<div class="modal fade" id="reserveationModal" 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">RESERVATION POUSSIN</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="/poussin/add_reservation" id='reserveationForm'>
      <div class="modal-body" >
        <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">Client</span>
              <select class="form-control "  name="client" onchange="selectClient(this)">
                <option value="0">NOUVEAU CLIENT</option>
                {% for client in all_client %}
                  <option value="{{client.id}}">{{client.full_name}}</option>
                {% endfor %}
              </select>
          </div>
          <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">Téléphone</span>
          <input type="text" class="form-control" id="phone" required name="phone" >
          </div>
          <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">Nom</span>
          <input type="text" class="form-control" id="nom" required name="nom">
          </div>
          
          <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">Adresse</span>
          <input type="text" class="form-control" id="address"  name="address">
        </div>
        <hr>
        <h5 class="modal-title" >POUSSIN</h5>
        <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">ARTICLE</span>
              <select class="form-control "  name="poussin" >
                {% for poussin in all_poussin %}
                  <option value="{{poussin.id}}">{{poussin.article.nom}}   (<span class="money mx-3">{{poussin.article.prix_vente}}</span>)</option>
                {% endfor %}
              </select>
          </div>
          <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >QUANTITE</span>
            <input type="number" min="1"  class="form-control px-2" name="quantite_commande" required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >PRIX UNIT</span>
            <input type="number"  class="form-control px-2"   name='prix' min="0" step="0.01"  required />
        </div>

        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE RESERVE</span>
            <input type="date"  class="form-control px-2" name="date_reservation" required />
        </div>

        
        
        <hr>
        <h5 class="modal-title" >REGLEMENT</h5>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >AVANCE</span>
            <input type="number"  class="form-control px-2"  id="moneyInput"  name='avance' min="0" step="0.01"  required />
        </div>
        <div id="moneyInWords" class="form-text mt-2"></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}} - {{caisse.mode}}</option>
                {% endfor %}
              </select>
          </div>
        <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">CAISSEIERE</span>
              <select class="form-control "  name="user_id">
                {% for cs in caissier %}
                  <option value="{{cs.id}}">{{cs.username}}</option>
                {% endfor %}
              </select>
          </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">FERMER</button>
      </div>
    </div>
    </form>
  </div>
</div>
</div>
<script src="../static/js/chiffre2lettre.js"></script>
<script>
 
  const phone = document.getElementById('phone');

  phone.addEventListener('input', () => {
    phone.value = phone.value.replace(/[^0-9+ /]/g, ''); // allow digits, spaces, plus
  });
</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 = '';
    }
  });


</script>
<script>
document.getElementById("tableSearch").addEventListener("keyup", function () {
  const input = this.value.toLowerCase();
  const rows = document.querySelectorAll("#clientTable 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 reserveation(id, date_prevu){
    let regForm=document.getElementById("reserveationForm");
    regForm.action='/poussin/add_reserveation?id='+id;
    document.getElementById("date_reservee").textContent=date_prevu;
}

function show_detail(id) {
    let detail_date=document.getElementById("detail_date");
    detail_date.value="";
    let detail_client_nom=document.getElementById("detail_client_nom");
    detail_client_nom.value="";
    let detail_client_code=document.getElementById("detail_client_code");
    detail_client_code.value="";
    let detail_numero=document.getElementById("detail_numero");
    detail_numero.value="";

    let body_detail=document.getElementById("body_detail");
    body_detail.innerHTML="";
    fetch("/json/commande?id="+id, {
      method: "GET",
    })
    .then(res => res.json())
    .then(data => {

      detail_client_code.value=data["client_code"];
      detail_client_nom.value=data["client_nom"];
      detail_numero.value=data["numero"];
      detail_date.value=data["date"];

      for(let detail of data["detail"]){

          let tr_row=document.createElement("tr");
          let ref_td=document.createElement("td");
          ref_td.textContent=detail["article_code"];

          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 rem_td=document.createElement("td");
          rem_td.textContent=detail["remise"];
          let montant_td=document.createElement("td");
          montant_td.textContent=parseFloat(detail["sous_total"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
          tr_row.appendChild(ref_td);
 
          tr_row.appendChild(prix_td);
          tr_row.appendChild(qty_td);
          tr_row.appendChild(rem_td);
          tr_row.appendChild(montant_td);
          body_detail.appendChild(tr_row);
      }
     

      


    })
    .catch(err => {
      console.error(" failed:", err);
      
    });
}

function selectClient(self){

  let nom=document.getElementById("nom");
  let phone=document.getElementById("phone");
  let address=document.getElementById("address");
  if(self.value==="0"){

    nom.hasAttribute("disabled") ? nom.removeAttribute('disabled') :null;
    phone.hasAttribute("disabled") ? phone.removeAttribute('disabled') :null;
    address.hasAttribute("disabled") ? address.removeAttribute('disabled') :null;
  }else{
    nom.setAttribute("disabled",true);
    phone.setAttribute("disabled",true);
    address.setAttribute("disabled",true);
  }
}
</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 %}