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

      <form method="post" class="form" id="crearProceso">
        <input type="hidden" name="action" value="actualizarProceso"/>
        <input type="hidden" name="idProceso"/>
        {{ formToken() }}

        <div class="modal-body">
          <div class="d-flex row g-3">
            <div class="col-md-6">
              <input class="form-control" type="text" id="create-boardwizard-name" placeholder="Nombre proceso" name="nombre"/>
            </div>
            <div class="col-md-6">
              <select class="form-select" aria-label="Default select example" name="idmaquina">
                <option value="0">Elegir Maquina</option>
                {% for maquina in fsc.getMaquinas() %}
                <option value="{{ maquina.id }}">{{ maquina.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <select class="form-select" aria-label="Default select example" name="idoperario">
                <option value="0">Elegir Operario</option>
                {% for operario in fsc.getOperario() %}
                <option value="{{ operario.id }}">{{ operario.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <input class="form-control" name="tiempo" type="number" placeholder="Tiempo" step="any" autocomplete="off">
            </div>
          </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('editProceso');
    modal.addEventListener('show.bs.modal', function (event) {
      var button = event.relatedTarget; // Button that triggered the modal
      var nombre = button.getAttribute('data-nombre');
      var idmaquina = button.getAttribute('data-idmaquina');
      var idoperario = button.getAttribute('data-idoperario');
      var tiempo = button.getAttribute('data-tiempo');
      var idProcesoValue = button.getAttribute('data-idproceso');
      
      var modalNombre = modal.querySelector('input[name="nombre"]');
      var modalIdmaquina = modal.querySelector('select[name="idmaquina"]');
      var modalIdoperario = modal.querySelector('select[name="idoperario"]');
      var modalTiempo = modal.querySelector('input[name="tiempo"]');
      var idProceso = modal.querySelector('input[name="idProceso"]');
      
      modalNombre.value = nombre;
      modalIdmaquina.value = idmaquina;
      modalIdoperario.value = idoperario;
      modalTiempo.value = tiempo;
      idProceso.value = idProcesoValue
        
    });
  });
</script>