<div class="modal fade" id="modalAnnulerProduction" tabindex="-1" aria-labelledby="modalAnnulerProductionLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="formAnnulerProduction" method="POST" action="/eagle_client_istanbulcups/api/productions/annuler.php">
        <div class="modal-header bg-danger text-white">
          <h5 class="modal-title" id="modalAnnulerProductionLabel">Annuler la production</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="annulerProductionId">
          <p class="fs-6">
            Êtes-vous sûr de vouloir <strong class="text-danger">annuler cette production</strong> ?<br>
            Cette action est irréversible et le stock sera automatiquement réajusté.
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Non, fermer</button>
          <button type="submit" class="btn btn-danger">Oui, annuler</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const annulerButtons = document.querySelectorAll(".btnAnnulerProduction");
    const inputId = document.getElementById("annulerProductionId");

    annulerButtons.forEach(btn => {
        btn.addEventListener("click", function() {
            inputId.value = this.dataset.id;
        });
    });
});
</script>
