{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>POUSSIN</h4>
        
    </div>
    <div class="d-flex justify-content-between align-items-center no-print">
    <button class="btn btn-danger btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#addArticleModal" onclick="clearForm()">NOUVEAU</button>
    </div>
    <!-- Article Table -->
    <div class="table-responsive mt-4">
        <table class="table table-sm align-items-center justify-content-center mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>CODE</th>
                    <th>NOM</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for poussin in all_poussin %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ poussin.article.code }}</td>
                    <td>{{ poussin.article.nom }}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#addArticleModal" data-artid="{{poussin.article.id}}" data-artnom="{{poussin.article.nom}}" onclick="edit_poussin('{{poussin.id}}',this)">Modifier</button>
                    </td>
                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>


<div class="modal fade" id="addArticleModal" 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">POUSSIN</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="/poussin/add" id="poussinForm" >
      <div class="modal-body" >
        <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="article_id" id="article_select">
                {% for article in all_article %}
                  <option value="{{article.id}}" >{{article.nom}}</option>
                {% endfor %}
              </select>
          </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">FERMER</button>
        <button type="submit" class="btn btn-primary">ENREGISTRER</button>
        <button type="button" class="btn btn-danger" id="delete_btn" onclick="deletePoussin(self)" disabled>SUPPRIMER</button>
      </div>
    </div>
    </form>
  </div>
</div>
</div>
<script>

    var selected=0;
    var selected_poussin=0;
    function edit_poussin(id,self) {
        let article_id=self.dataset.artid;
        selected=parseInt(article_id);
        selected_poussin=id;
        let poussinForm=document.getElementById("poussinForm");
        poussinForm.action="/poussin/edit?id="+id;
        document.getElementById("article_select").value=selected;
        document.getElementById("delete_btn").removeAttribute("disabled");
    }
    function clearForm(){
        document.getElementById("delete_btn").setAttribute("disabled",true);
    }
    function deletePoussin(self) {
        fetch("/poussin/delete", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({"poussin":selected_poussin})
    })
    .then(res => res.json())
    .then(result => {
      window.location='/poussin';
    })
    .catch(err => console.error("Fetch error:", err));
    }
</script>  


{% endblock %}