{% extends "base_frontoffice.html" %}

{% block content %}

<style>



  .fxHead{
    overflow: auto;
    height: 450px;
  }
  .fxHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    

  }
  
</style>

<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>Liste des Articles</h4>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addArticleModal" onclick="clear_form()">Ajouter un article</button>
    </div>

    <!-- Article Table -->
    <div class="table-responsive mt-4 fxHead">
        <table class="table table-sm align-items-center justify-content-center mb-0">
            <thead class="table-light">
                <tr>
                    <th>Code</th>
                    <th>Nom</th>
                    <th>Unité</th>
                    <th>Prix d'achat</th>
                    <th>Prix de vente</th>
                    <th>Stock</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for article in all_articles %}
                <tr data-id="{{article.id}}" data-code="{{article.code}}" data-nom="{{article.nom}}" data-unite="{{article.unite}}" data-achat="{{article.prix_achat}}" data-vente="{{article.prix_vente}}" id='article_{{article.id}}'>
                    <td>{{ article.code }}</td>
                    <td>{{ article.nom }}</td>
                    <td>{{ article.unite }}</td>
                    <td class="money">{{ article.prix_achat_html }}</td>
                    <td class="money">{{ article.prix_vente_html }}</td>
                    <td>{{ article.stock }}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#addArticleModal" onclick="edit_article(this)">Modifier</button>
                    </td>
                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Form -->
<div class="modal fade" id="addArticleModal" tabindex="-1" aria-labelledby="addArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form method="POST" action="/add/op_article">
                {{ form.hidden_tag() }}
                <div class="modal-header">
                    <h5 class="modal-title" id="addArticleModalLabel">Ajouter un Article</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" >{{ form.code.label(class="form-label") }}</span>
                        {{ form.code(class="form-control px-2") }}
                        
                    </div>
                    <div class="input-group mb-1">
                        <span class="input-group-text bg-secondary text-white" >{{ form.nom.label(class="form-label") }}</span>
                        {{ form.nom(class="form-control px-2") }} 
                    </div>
                    <div class="input-group mb-1">
                        <span class="input-group-text bg-secondary text-white" >{{ form.unite.label(class="form-label") }}</span>
                        {{ form.unite(class="form-control px-2") }} 
                    </div>
                    <div class="input-group mb-1">
                        <span class="input-group-text bg-secondary text-white" >{{ form.prix_achat.label(class="form-label") }}</span>
                        {{ form.prix_achat(class="form-control px-2") }} 
                    </div>
                    <div class="input-group mb-1">
                        <span class="input-group-text bg-secondary text-white" >{{ form.prix_vente.label(class="form-label") }}</span>
                        {{ form.prix_vente(class="form-control px-2") }} 
                    </div>
                   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    {{ form.submit(class="btn btn-primary") }}
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    function edit_article(button){
       const row = button.closest('tr');
        const id = row.dataset.id;
        const code = row.dataset.code;
        const nom = row.dataset.nom;
        const unite = row.dataset.unite;
        const achat = row.dataset.achat;
        const vente = row.dataset.vente;

        let modal=document.getElementById("addArticleModal");
        let form=modal.querySelector("form");
        form.action="/edit/article?id="+id;
        form.code.value=code;
        form.nom.value=nom;
        form.unite.value=unite;
        form.prix_achat.value=achat;
        form.prix_vente.value=vente;
        document.getElementById("addArticleModalLabel").textContent="Modifier article";

    }

function clear_form() {
   let modal=document.getElementById("addArticleModal");
    let form=modal.querySelector("form");
    form.action="/add/article";
    form.code.value="";
    form.name.value="";
    form.unite.value="";
    form.prix_achat.value="";
    form.prix_vente.value="";

}

function variantes(id){
    let new_variantes=document.getElementById("add_variante");
    new_variantes.setAttribute("href", "/variantes/new?id="+id);
    let variante_list=document.getElementById("variante_list");
    variante_list.innerHTML="";
    $.ajax({
      type: 'GET',
      url: "/json/variantes",
      data: {"article_id":id},
      success: function(response){
        
        for(let v in response){
          console.log(v);
          console.log(response[v])
          let col_div=document.createElement("div");
          col_div.classList="col-6 col-lg-3";
          let square_div=document.createElement("div");
          square_div.classList="py-3 d-flex justify-content-center align-items-center rounded m-2";
          square_div.style.background=response[v]["color"];

          let text_div=document.createElement("div");
          text_div.textContent=response[v]["ref"];
          text_div.classList='bg-dark text-white p-1 rounded';
          square_div.appendChild(text_div);
          col_div.appendChild(square_div);
          variante_list.appendChild(col_div);
        }
          
      },
      error: function(error){
        alert(error)
    },
  })
}

  window.onload=function(){
    var all_number =$(".money");
    for (let number of all_number){

      number.textContent=parseFloat(number.textContent).toLocaleString("fr-FR", {minimumFractionDigits:2});
    };

};
</script>
{% endblock %}