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;

        //   Sauvegarde de l’ID pour les boutons d’action
          if(data.chef_departement){
            $('confirmerBtn').dataset.id = produitId;
            $('refuserBtn').dataset.id = produitId;
          }

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

  function updateStatut(demandeId, action) {
    fetch('/gestion-produit/update-demande', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `id=${demandeId}&action=${action}&emetteur=chef`
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert(`Demande ${action} avec succès !`);
        location.reload(); // recharge la page pour voir le nouveau statut
      } else {
        alert(data.message);
      }
    })
    .catch(error => console.error('Erreur :', error));
  }

  try{
    $('confirmerBtn').addEventListener('click', function () {
      updateStatut(this.dataset.id, '1'); // '1' pour confirmer
    });

    $('refuserBtn').addEventListener('click', function () {
      updateStatut(this.dataset.id, '0'); // '0' pour refuser
    });
  }catch{
    
  }
  

  const tabulator = new Tabulator("#listeDemandeTable", {
    columns: [
      { title: "Nom Produit", field: "produit", sorter: "string" },
      // { title: "Catégorie", field: "categorie", 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
  $('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;
      // champs_produit.disabled = true;

      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();
    })
  });

  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.disabled = true;

      champs_produit.value = produitCommanderId;

      demanderModal.show();
    })
  });

  $("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-produit-form").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const url = this.dataset.url;
    // const csrf = 
    fetch(
      url,
      {
        method: "POST",
        headers: {
          "X-Requested-With": "XMLHttpRequest"
        },
        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();
      }
    })
  })

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


// --------------------------------- Tableau categorie
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;

  fetch(url, {
    method: "POST",
    headers:{
      "X-Requested-With": "XMLHttpResponse"
    },
    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();
})