{# modal_edit_componente.html.twig #}
<div class="modal fade" id="editComponente" tabindex="-1" aria-labelledby="editComponenteLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editComponenteLabel">Editar <span id="modal-producto"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <form method="post" class="form" id="editComponenteForm">
        <input type="hidden" name="action" value="editarComponente"/>
        <input type="hidden" name="idcomponente"/>
        {{ formToken() }}

        <div class="modal-body">
          <div class="mb-3">
            <label for="modal-cantidad" class="form-label">Cantidad</label>
            <input type="number" class="form-control" id="modal-cantidad" name="cantidad" step="1" min="0"/>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary">Guardar cambios</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var modal = document.getElementById('editComponente');
    modal.addEventListener('show.bs.modal', function (event) {
      var button = event.relatedTarget; // Button that triggered the modal
      var producto = button.getAttribute('data-producto');
      var cantidad = button.getAttribute('data-cantidad');
      var idcomponente = button.getAttribute('data-idcomponente');
      
      var modalProducto = modal.querySelector('#modal-producto');
      var modalCantidad = modal.querySelector('input[name="cantidad"]');
      var idcomponenteInput = modal.querySelector('input[name="idcomponente"]');
      
      modalProducto.textContent = producto;
      modalCantidad.value = cantidad;
      idcomponenteInput.value = idcomponente
    });
  });
</script>