{% extends "base_frontoffice.html" %}

{% block content %}
<style>

    .cart-box {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      background-color: #f8f9fa;
    }
    
    
  </style>
<section>
    <div class="container mt-4">
      
        <h4>Livraison commande N°: <span>{{commande.numero}}</span></h4>

      <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..." >

            <table class="table table-sm table-stripped table-responsive" id="articleTable">
                <tbody>
                    <tr>
                        <td><span class="text-dark">CODE</span></td>
                        <td><span class="text-dark">NOM</span></td>
                        <td><span class="text-dark">QTE</span></td>
                        <td><span class="text-dark">PRIX ACHAT</span></td>
                      </tr>
                    {% for article, value in ARTICLE.items() %}
                     <tr>
                        <td><span class="text-dark">{{ value['article_code'] }}</span></td>
                        <td><span class="text-dark">{{ value['article_nom'] }}</span></td>
                        <td><span class="text-dark">{{ value['qty'] }}</span></td>
                        <td><span class="text-dark money">{{ value['prix_achat'] }}</span></td>
                        <td>
                          <a class="btn btn-outline-dark btn-sm"
                             href="#"
                             data-bs-toggle="modal"
                             data-bs-target="#productModal"
                             data-article_id="{{ value['article_id'] }}"
                             data-nom="{{ value['article_nom'] }}"
                             data-code="{{ value['article_code'] }}"
                             data-qty="{{ value['qty'] }}"
                             data-prix="{{ value['prix_achat'] }}"
                             onclick="open_product_modal(this)">
                            LIVRER
                          </a>
                        </td>
                      </tr>
                    {% endfor %}
                </tbody>
            </table>
               
            </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">Livraison fournisseur</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>
            <span class="d-flex justify-content-between align-items-center">
            <a class="btn btn-warning btn-block btn-sm" href="#" data-bs-toggle="modal" data-bs-target="#saveLivraison">ENREGISTRER</a>
            <a class="btn btn-danger btn-block btn-sm" href="#" onclick="cancel_all()">ANNULER TOUT</a>
            </div>
          </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 livraison</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="prix_achat" class="form-label">Prix d'achat</label>
            <input type="number" class="form-control" id="prix_achat" 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>

<div class="modal fade" id="saveLivraison" 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">ENREGISTRER LIVRAISON</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="/save/panier_fournisseur" method="POST">
          <!-- Quantity -->
          <!-- <div class="mb-3">
            <label for="quantityInput" class="form-label">DATE</label>
            <input type="date" class="form-control" name="date" required>
          </div> -->
          <!-- Remise -->
          <!-- <div class="mb-3">
            <label for="prix_achat" class="form-label">TOTAL MONTANT FACTURE</label>
            <input type="number" class="form-control"  min="0" step="0.01" value="0" onclick="this.value = ''" required autocomplete="off" name="net_payer" id="moneyInput">
          </div>
          <div id="moneyInWords" class="form-text mt-2"></div> -->
          <div class="mb-3">
            <label for="prix_achat" class="form-label">REF FACTURE/BL</label>
            <input type="text" class="form-control"  required autocomplete="off" name="ref">
          </div>
          <div class="modal-footer">
        <button type="submit" class="btn btn-primary" >Ajouter</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
      </div>
        </form>
      </div>
      
    </div>
  </div>
</div>
<script src="../static/js/chiffre2lettre.js"></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("#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={{ livraison | tojson }};
var selectedProduct = {};


  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(){
  console.log(savedItem);
    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 prix_achat=parseFloat(savedItem[index]["prix_achat"]);
        if (cartItems[article_id]) {
        cartItems[article_id].quantity = quantity;
        cartItems[article_id].sous_total = sous_total;

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

}

function open_product_modal(self) {
  selectedProduct.code = self.dataset.code;
  selectedProduct.nom = self.dataset.nom;
  selectedProduct.article_id=parseInt(self.dataset.article_id)

  // Optional: reset inputs
  document.getElementById("quantityInput").value = self.dataset.qty;
  document.getElementById("quantityInput").max=self.dataset.qty;
  document.getElementById("prix_achat").value = self.dataset.prix;

}



function add2cart() {
    let qty_input=document.getElementById("quantityInput");
    if(parseInt(qty_input.value)>parseInt(qty_input.max)){
      alert(`QUANTITE MAX AUTORISE: ${qty_input.max}`)
    }else{
      const quantity = parseInt(qty_input.value);
      const prix_achat = parseFloat(document.getElementById("prix_achat").value);
      const sous_total=prix_achat*quantity;
      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].sous_total = sous_total;

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



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

    
    fetch("/livraison/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;

    for (const key in cartItems) {
      const item = cartItems[key];
      const itemTotal = item.sous_total;
      total += itemTotal;

      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 paSpan = document.createElement("span");
      paSpan.classList="badge badge-info text-dark";
      console.error(item.prix_achat);
      let row_pa=item.prix_achat.toLocaleString("fr-FR", {minimumFractionDigits:2});
      paSpan.textContent = `${row_pa}`;
      // 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(paSpan);
      li.appendChild(controls);
      cartList.appendChild(li);
    }
  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();

    }
  })

  function cancel_all() {
    cartItems={};
    cart2server();

  }
</script>

{% endblock %}