{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>Commande 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="#newCommande">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 com</th>
                    <th>Qté com</th>
                    <th >Date prévu</th>
                    <th>Prix achat</th>
                    <th>Date livraison</th>
                    <th>Qté livré</th>
                    <th>Prix vente</th>
                    <th>Reservé</th>
                    <th >Reste</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for comm in all_commande %}
                <tr data-id="{{comm.id}}">
                    <td>{{ comm.date_commande_str }}</td>
                    <td>{{ comm.quantite_commande }}</td>
                    <td class="bg-info">{{ comm.date_prevu_livraison_str }}</td>
                    <td class="money">{{ comm.prix_achat_str }}</td>
                    <td class="bg-warning">{{ comm.date_livraison_str }}</td>
                    <td class="bg-warning">{{ comm.quantite_livre }}</td>
                    <td class="money">{{ comm.prix_vente_str }}</td>
                    <td >{{comm.reserve}}</td>
                    <td class="bg-danger">{{comm.reste}}</td>
                    <td >{{ comm.status }}</td>
                    <td><span class="d-flex">
                        {% if comm.reste<=0 %}
                        <button class="btn btn-danger btn-sm" disabled>RESERVER</button>
                        {% else %}
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#reservationModal" onclick="reservation('{{comm.id}}','{{comm.date_prevu_livraison_str}}')">RESERVER</button>
                        {% endif %}
                        {% if comm.status=="LIVRE" %}
                        <button class="btn btn-secondary btn-sm" disabled>LIVRAISON</button>
                        {% else %}
                        <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#livraisonModal" onclick="livraison('{{comm.id}}','{{comm.date_prevu_livraison_str}}')">LIVRAISON</button>
                        {% endif %}
                        <a class="btn btn-info btn-sm" href="/reservation?cId={{comm.id}}">LISTE RESERVATION</a>
                    </span>
                    </td>
                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<!-- Modal Form -->
<div class="modal fade" id="newCommande" 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">NOUVEAU COMMANDE POUSSIN</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="/poussin/new_commande">
      <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_commande'  required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >QUANTITE COMMANDE</span>
            <input type="number"  class="form-control px-2" name="quantite_commande" min="0"  required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE PREVU LIVRAISON</span>
            <input type="date"  class="form-control px-2"  name='date_prevu_livraison'  required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >PRIX D'ACHAT</span>
            <input type="number"  class="form-control px-2"   name='prix_achat' min="0" step="0.01"  required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >PRIX DE VENTE</span>
            <input type="number"  class="form-control px-2"   name='prix_vente' min="0" step="0.01"  required />
        </div>
        <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"   name='prix_achat' min="0" step="0.01"  required />
        </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>

<div class="modal fade" id="reservationModal" 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 DU: <strong id="date_reserve"></strong> </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="#" id='reservationForm'>
      <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>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE RESERVATION</span>
            <input type="date"  class="form-control px-2" name="date_reservation" required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >QUANTITE RESERVE</span>
            <input type="number" min="1"  class="form-control px-2" name="quantite_commande" required />
        </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>

<div class="modal fade" id="livraisonModal" 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">LIVRAISON POUSSIN DU: <strong id="date_livraison"></strong></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="#" id="livForm">
      <div class="modal-body" >
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE LIVRAISON</span>
            <input type="date"  class="form-control px-2"  name='date_livraison'  required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >QUANTITE LIVRE</span>
            <input type="number"  class="form-control px-2" name="quantite_livre" min="0"  required />
        </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>
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 reservation(id, date_prevu){
    let regForm=document.getElementById("reservationForm");
    regForm.action='/poussin/add_reservation?id='+id;
    document.getElementById("date_reserve").textContent=date_prevu;
}



function livraison(id, date_prevu){
    let livForm=document.getElementById("livForm");
    livForm.action='/poussin/livrer?id='+id;
    document.getElementById("date_livraison").textContent=date_prevu;
}


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>
{% endblock %}