{% extends "base_frontoffice.html" %}

{% block content %}
<style>

    .cart-box {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      background-color: #f8f9fa;
    }
    

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

  }
  
</style>
<section>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-7 order-2 order-md-1  text-white">
          <div class=" mt-5">
            <input type="text " id="tableSearch" class="form-control mb-3 w-50" placeholder="Rechercher un article..." >
            <div class="table-responsive fxHead">
            <table class="table table-sm table-stripped table-responsive" id="articleTable">
                <tbody>

                    {% for article in all_articles %}
                     <tr>
                        <td><span class="text-dark">{{ article.code }}</span></td>
                        <td><span class="text-dark">{{ article.nom }}</span></td>
                        <td class="money">{{ article.prix_vente_html }}</td>
                        <td>
                          <a class="btn btn-outline-dark btn-sm"
                             href="#"
                             data-bs-toggle="modal"
                             data-bs-target="#productModal"
                             data-article_id="{{ article.id }}"
                             data-nom="{{ article.nom }}"
                             data-code="{{ article.code }}"
                             data-prix="{{ article.prix_vente }}"
                             onclick="open_product_modal(this)">
                            Ajouter
                          </a>
                        </td>
                      </tr>
                    {% endfor %}
                </tbody>
            </table>
             </div>  
            </div>
        </div>
        <div class="col-sm-12 col-md-5 order-1 order-md-2  text-white mt-5">
            <div class="cart-box text-center">
            <h4 class="text-center text-dark">Votre panier</h4>
            
            <ul class="list-group mb-3" id="cart-items">
              <li class="list-group-item text-muted" id="empty-cart">Panier vide</li>
            </ul>
            <p class="text-dark"><strong>Total: </strong><span id="cart-total">0.00</span>Ar</p>
            <a class="btn btn-success btn-sm btn-block" href="/checkout/cart" id="commande_btn" hidden>Passer à la commande</a>
          </div>
        </div>
        
      </div>
    </div>
</section>
<div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="productModalLabel">Ajout panier</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <!-- Quantity -->
          <div class="mb-3">
            <label for="quantityInput" class="form-label">Quantité</label>
            <input type="number" class="form-control" id="quantityInput" min="1" value="1" onclick="this.value = ''">
          </div>
          <!-- Remise -->
          <div class="mb-3">
            <label for="remiseInput" class="form-label">Remise par unité</label>
            <input type="number" class="form-control" id="remiseInput" min="0" value="0" onclick="this.value = ''">
          </div>
          <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="add2cart()" data-bs-dismiss="modal" id='add2cartBtn'>Ajouter</button>
      </div>
        </form>
      </div>
      
    </div>
  </div>
</div>
<script>
document.getElementById("tableSearch").addEventListener("keyup", function () {
  const input = this.value.toLowerCase();
  const rows = document.querySelectorAll("#articleTable tbody tr");

  rows.forEach(row => {
    const rowText = row.innerText.toLowerCase();
    row.style.display = rowText.includes(input) ? "" : "none";
  });
});



</script>

<script>

const ARTICLES = {{ ARTICLE | tojson }};
var cartItems={};
var savedItem={{ cart | tojson }};
var selectedProduct = {};
var selectedItem=0;


  window.onload=function(){
    var all_number =$(".money");
    for (let number of all_number){
      number.textContent=parseFloat(number.textContent).toLocaleString("fr-FR", {minimumFractionDigits:2});
    };
    rebuild();
    updateCartDisplay();
};

function rebuild(){
    for(let index in savedItem){
       
        let article_id=savedItem[index]["article_id"];
        let code=savedItem[index]["code"];
        let nom=savedItem[index]["nom"];
        let quantity=parseInt(savedItem[index]["quantity"]);
        let sous_total=parseFloat(savedItem[index]["sous_total"]);
        let total_remise=parseFloat(savedItem[index]["total_remise"]);
        if (cartItems[article_id]) {
        cartItems[article_id].quantity = quantity;
        cartItems[article_id].total_remise = quantity*remise;
        cartItems[article_id].sous_total = quantity*unitPrice-cartItems[article_id].total_remise;

      } else {
        cartItems[article_id] = {article_id, code, nom, quantity, total_remise,sous_total};
      }
    }

}

function open_product_modal(button) {
  selectedProduct.code = button.dataset.code;
  selectedProduct.nom = button.dataset.nom;
  selectedProduct.prix = parseFloat(button.dataset.prix);
  selectedProduct.article_id=parseInt(button.dataset.article_id)

  // Optional: reset inputs
  document.getElementById("quantityInput").value = 1;
  document.getElementById("remiseInput").value = 0;

}



function add2cart() {
    const quantity = parseInt(document.getElementById("quantityInput").value);
    const remise = parseFloat(document.getElementById("remiseInput").value);
    const unitPrice = parseFloat(selectedProduct.prix);
    const total_remise = remise * quantity;
    const sous_total=unitPrice*quantity - total_remise;
    var code=selectedProduct.code;
    var nom=selectedProduct.nom;
    let article_id=selectedProduct.article_id
      if (cartItems[article_id]) {
        cartItems[article_id].quantity = quantity;
        cartItems[article_id].total_remise = quantity*remise;
        cartItems[article_id].sous_total = quantity*unitPrice-cartItems[article_id].total_remise;

      } else {
        cartItems[article_id] = {article_id, code, nom, quantity, total_remise,sous_total};
      }
      cart2server();
}



function cart2server(){
    const cartData = Object.values(cartItems);

    
    fetch("/cart/update", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(cartData)
    })
    .then(res => res.json())
    .then(data => {
      
      if(data["status"]==="ERROR"){
        for(let i of data["error"]){
          delete cartItems[i["name"]];
          alert("STOCK RESTANT "+i["name"]+"= "+i["stock"]);
        }
      }
      updateCartDisplay();
    })
    .catch(err => {
      console.error("Checkout failed:", err);
      
    });
}



  const cartList = document.getElementById("cart-items");
  const cartTotal = document.getElementById("cart-total");

  function updateCartDisplay() {
    cartList.innerHTML = '';
    let total = 0;
    let remise = 0;
    selectedItem=0;
    for (const key in cartItems) {
      const item = cartItems[key];
      const itemTotal = item.sous_total;
      selectedItem+=1
      total += itemTotal;
      remise+=item.total_remise;

      const li = document.createElement("li");
      li.className = "list-group-item d-block d-lg-flex justify-content-between align-items-center";

      // Item name and quantity
      const nameSpan = document.createElement("span");
      nameSpan.classList="badge badge-info text-dark"
      nameSpan.textContent = `${item.code} ${item.nom} x ${item.quantity}`;
      const remiseSpan = document.createElement("span");
      remiseSpan.classList="badge badge-info text-dark"
      let row_remise=item.total_remise.toLocaleString("fr-FR", {minimumFractionDigits:2});
      remiseSpan.textContent = `${row_remise}`;
      // Price and remove
      const controls = document.createElement("span");
      controls.innerHTML = itemTotal.toLocaleString("fr-FR", {minimumFractionDigits:2});

      // Remove button
      const removeBtn = document.createElement("button");
      removeBtn.className = "remove-btn ml-2";
      removeBtn.textContent = "×";
      removeBtn.title = "Remove";
      removeBtn.onclick = () => {
        delete cartItems[key];
        cart2server();
        updateCartDisplay();
      };
      controls.appendChild(removeBtn);
      li.appendChild(nameSpan);
      li.appendChild(remiseSpan);
      li.appendChild(controls);
      cartList.appendChild(li);
    }
    let commande_btn=document.getElementById("commande_btn");
      if (selectedItem!==0){
        console.log("SHOW? ");
        commande_btn.removeAttribute("hidden");
      }else{
        commande_btn.setAttribute("hidden",true);
        console.log("HIDDEN? ");
      }
  if (Object.keys(cartItems).length === 0) {
      const li = document.createElement("li");
      li.id = "empty-cart";
      li.className = "list-group-item text-muted";
      li.textContent = "Panier vide";
      cartList.appendChild(li);
    }

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


  document.addEventListener("keydown", function(event){
    const modal=document.getElementById("productModal");
    if(modal.classList.contains("show")&&event.key==="Enter"){
        event.preventDefault();
        document.getElementById("add2cartBtn").click();

    }
  })
</script>

{% endblock %}