{% 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 N°: <span>{{commande.numero}}</span></h4>
        <p class="my-0 py-0">Client : <span>{{commande.client.nom}}</span></p>
        <p class="my-0 py-0">Réf : <span>{{commande.ref}}</span></p>
      <div class="row">
        <div class="col-sm-12 col-md-7 order-2 order-md-1  text-white">
          <div class=" mt-5">
            
            <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">LIVRE</span></td>
                        <td><span class="text-dark">RESTE</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">{{ value['livre'] }}</span></td>
                        <td><span class="text-dark">{{ value['reste'] }}</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-reste="{{ value['reste'] }}"
                             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 client</h4>
            
            <ul class="list-group mb-3" id="cart-items">
              <li class="list-group-item text-muted" id="empty-cart">Panier vide</li>
            </ul>
            
            
            <button class="btn btn-warning btn-block btn-sm" disabled data-bs-toggle="modal" data-bs-target="#saveLivraison" id="save_btn_liv">ENREGISTRER</button>
         
            </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>

          <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/livraison_reste?cid={{commande.id}}" method="POST">
         <input type="hidden" name="mydata" id="mydata"> 
          <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>

const ARTICLES = {{ ARTICLE | tojson }};
var cartItems={};
var savedItem={{ reste | tojson }};
var selectedProduct = {};



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.reste;
  document.getElementById("quantityInput").max=self.dataset.reste;


}



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);
      var code=selectedProduct.code;
      var nom=selectedProduct.nom;
      let article_id=selectedProduct.article_id
        if (cartItems[article_id]) {
          cartItems[article_id].quantity = quantity;

        } else {
          cartItems[article_id] = {article_id, code, nom, quantity};
        }
        updateCartDisplay();
      }
    
}





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

  function updateCartDisplay() {
    cartList.innerHTML = '';


    for (const key in cartItems) {
      const item = cartItems[key];


      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} `;
      const paSpan = document.createElement("span");
      paSpan.classList="badge badge-info text-dark";

      const controls = document.createElement("span");
      controls.innerHTML = `${item.quantity}`;
  

      // Remove button
      const removeBtn = document.createElement("button");
      removeBtn.className = "remove-btn ml-2";
      removeBtn.textContent = "×";
      removeBtn.title = "Remove";
      removeBtn.onclick = () => {
        delete cartItems[key];
        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);
      document.getElementById("save_btn_liv").setAttribute("disabled", true);
    }else{
      document.getElementById("save_btn_liv").removeAttribute("disabled");
    }

    document.getElementById("mydata").value=JSON.stringify(cartItems);
  }


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