const $ = (id) => document.getElementById(id);

document.addEventListener('DOMContentLoaded', function () {
  const voirBtns = document.querySelectorAll('.voir-demande');
  const modal = new bootstrap.Modal($('enregistrerDetailDemande'));

  voirBtns.forEach(btn => {
    btn.addEventListener('click', function () {
      const produitId = this.dataset.id;

      fetch(`/gestion-produit/detailDemande/${produitId}/`)
        .then(response => response.json())
        .then(data => {
          $('detailNom').value = data.detailNom;
          $('detailCategorie').value = data.detailCategorie;
          $('detailmotif').textContent = data.detailmotif;
          $('detailDateDemande').value = data.detailDeMiseADispo;
          $('detailARendre').checked = data.detailARendre ? true : false;

          if(data.chef_departement){
            $('confirmerBtn').dataset.id = produitId;
            $('refuserBtn').dataset.id = produitId;
          }

          modal.show();
        });
    });
  });

  function updateStatut(demandeId, action) {
    const csrf = document.querySelector("[name=csrfmiddlewaretoken]").value;
    fetch('/gestion-produit/update-demande', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRFToken': csrf
      },
      body: `id=${demandeId}&action=${action}&emetteur=chef`
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert(data.message);
        location.reload();
      } else {
        alert(data.message);
      }
    })
    .catch(error => console.error('Erreur :', error));
  }

  try{
    $('confirmerBtn').addEventListener('click', function (e) {
      e.preventDefault();
      updateStatut(this.dataset.id, '1');
    });

    $('refuserBtn').addEventListener('click', function (e) {
      e.preventDefault();
      updateStatut(this.dataset.id, '0');
    });
  }catch (error) {
    
  }

  const tabulator = new Tabulator("#listeDemandeTable", {
    columns: [
      { title: "Nom Produit", field: "produit", sorter: "string" },
      { title: "Motif", field: "motifs", sorter: "string" },
      { title: "Date de mise à disposition souhaitée", field: "dateDeMiseADispoSouhaite", sorter: "date" },
      { title: "À Rendre", field: "a_rendre", sorter: "boolean", formatter: "tickCross" },
      { title: "Validé par le supérieur", field: "valider_par_chef", sorter: "boolean", formatter: "tickCross", formatterParams: {
            allowEmpty: true
        } 
      },
      { title: "Valider par la logistique", field: "valider_par_logisticien", sorter: "boolean", formatter: "tickCross", formatterParams: {
            allowEmpty: true
      }},
      { title: "Motif de refus", field: "motifs_refus"},
    ],
    ajaxURL: `${$("listeDemandeTable").dataset.url}`,
  })

  // --------------------------- FILTRE PAR NOM DU PRODUIT -------------------------
  $('searchInput').addEventListener('keyup', function() {
    const filter = this.value.toLowerCase();
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        const title = card.querySelector('.card-title').textContent.toLowerCase();
        if (title.includes(filter)) {
            card.style.display = '';
        } else {
            card.style.display = 'none';
        }
      });
  })

  // Enregistrement de commande
  const listeCommanderButton = document.querySelectorAll(".listeCommanderButton");
  const modalCommander = new bootstrap.Modal($("commanderModal"));

  listeCommanderButton.forEach(commanderButton => {
    commanderButton.addEventListener("click", function (e) {
      const idProduit = this.dataset.id;
      const champs_produit = $("id_produit");
      const champs_fournisseur = $("id_fournisseur");
      champs_produit.value = idProduit;

      fetch(`/gestion-produit/recuperer-fournisseur-categorie/${idProduit}`)
      .then(response => response.json())
      .then(data => {
        champs_fournisseur.innerHTML = "";
        data.forEach(fournisseur => {
          const option = document.createElement("option");
          option.value = fournisseur.id;
          option.text = fournisseur.nom_fournisseur;
          champs_fournisseur.appendChild(option);
        });
      })

      modalCommander.show();
    })
  });

  // Fenetre modal pour emettre une demande de nouveau produit
  const listeDemandeButton = document.querySelectorAll(".listeDemandeButton");
  const demanderModal = new bootstrap.Modal($("demanderModal"));

  listeDemandeButton.forEach(demanderButton => {
    demanderButton.addEventListener("click", function() {
      const produitCommanderId = this.dataset.id;
      const champs_produit = document.querySelector("#demanderModal #id_produit");
      champs_produit.value = produitCommanderId;

      demanderModal.show();
    })
  });

  // Filtre des produits par categorie
  $("filterCategorie").addEventListener("change", function(){
    const card = document.querySelectorAll(".card");
    const filtre = this.value;
    if(filtre === ""){
      card.forEach(carte => {
        carte.style.display = "";
      });
    }else{
      card.forEach(carte => {
        categorie = carte.querySelector(".categorie-produit").textContent.toLowerCase();
        if(parseInt(categorie) === parseInt(filtre)){
          carte.style.display = "";
        }else{
          carte.style.display = 'none'
        }
      });
    }
  })

  // Enregistrement de nouveau produit
  $("enregistrement-produit-form").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const url = this.dataset.url;
    const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch(
      url,
      {
        method: "POST",
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "X-CSRFToken": csrf
        },
        body: new FormData(form)
      }
    )
    .then(response => response.json())
    .then(data => {
      const messageZone = $("messageZone");
      if(data.success){
        messageZone.innerHTML = `
          <div class="alert alert-success">
            ${data.message}
          </div>
        `;
        form.reset();
      }else{
        messageZone.innerHTML = `
          <div class="alert alert-danger">
            ${data.message}
          </div>
        `;
      }
    })
  })

  $('enregistrerProduit').addEventListener("hidden.bs.modal", function () {
    location.reload()
  })

  // --------------------------- Modification produit --------------------------
  const produitModifTitles = document.querySelectorAll(".produitModifTitre");
  const modalModifProduit = new bootstrap.Modal($("modifierProduitModal"));
  produitModifTitles.forEach(title => {
    title.addEventListener("click", function () {
      const idProduit = this.dataset.idproduit;
      fetch(`/gestion-produit/detailProduit/${idProduit}/`)
      .then(response => response.json())
      .then(data => {
        $("modifIdProduit").value = data.detailId;
        $("modifLibelle").value = data.detailLibelle;
        $("modifQuantiteStock").value = data.detailQuantiteStock;
        $("modifSeuilPreRupture").value = data.detailSeuilPreRupture;

        $("modifCondi").value = data.detailConditionnement;

        $("modifCategorie").innerHTML = "";
        data.listeCategorie.forEach(categorie => {
          const option = document.createElement("option");
          option.value = categorie.id;
          option.text = categorie.categorie;
          if(categorie.id === data.detailCategorie){
            option.selected = true;
          }
          $("modifCategorie").appendChild(option);
        });

        modalModifProduit.show();
      });
    });
  });

  $("modification-produit").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const url = this.dataset.url;
    const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch(url, {
      method: "POST",
      headers:{
        "X-Requested-With": "XMLHttpResponse",
        "X-CSRFToken": csrf
      },
      body: new FormData(form)
    })
    .then(response => response.json())
    .then(data => {
      if(data.success){
        const messageBox = $("messageZone");
        messageBox.innerHTML = `
          <div class="alert alert-success">
            Produit modifié avec succès
          </div>
        `;
        modalModifProduit.hide();

        location.reload();
      }
    })
  })

  // --------------------------- Gestion des categories -------------------------
  const url_liste_categorie = $("listecategorie").dataset.url;
  const tableau_categorie = new Tabulator("#listecategorie", {
    columns: [
      {title: "Nom de la catégorie", field: "categorie"}
    ],
    ajaxURL: url_liste_categorie
  })

  $("enregistrer-categorie").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const url = this.dataset.url;
    const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;

    fetch(url, {
      method: "POST",
      headers:{
        "X-Requested-With": "XMLHttpResponse",
        "X-CSRFToken": csrf
      },
      body: new FormData(form)
    })
    .then(response => response.json())
    .then(data => {
      if(data.success){
        const messageBox = $("message-creation-categorie");
        messageBox.innerHTML = `
          <div class="alert alert-success">
            Categorie crée avec succès
          </div>
        `;
        tableau_categorie.setData(url_liste_categorie);
      }
    })
  })

  $("enregistrerCategorie").addEventListener("hidden.bs.modal", function () {
    location.reload();
  })
});