<!--@Header-->
<?php
session_start();
if(isset($_SESSION['nomUsuario'])){
        
    $usuario = $_SESSION['nomUsuario'];
    $rol_usuario=$_SESSION['rolUsuario'];
    $id=$_SESSION['cveUsuario'];
    
    if ($rol_usuario == 'ADMINISTRADOR') {
        include("path/header.php");
    }else{
        echo "<script> 
               document.location.href='../functions/salir.php';
            </script>";
    }
}else{
  echo "<script> 
        document.location.href='/aqua-restaurant/';
    </script>";
}

?>
<div class="row">
    <div class="col-md-12 mb-lg-0">
        <div class="card mt-1 pb-0 p-2">
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Crear Recetas</button>
                    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Editar Recetas</button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Crear una receta</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <!-- action="../functions/receta/guardar_receta.php"-->
                                <form  method="POST" id="formulario_receta">
                                    <div class="row">
                                        <div class="col-md-4">
                                            
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Clave de mi receta</label>
                                                <input type="text" class="form-control" name="clave_receta" id="clave_receta" pattern="[a-zA-Z0-9]+" required>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Nombre de mi receta</label>
                                                <input type="text" class="form-control" name="nombre_receta" id="nombre_receta" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 pt-3 pb-3">
                                            <div class="text-center">
                                                <i class="btn btn-warning" type="button" data-bs-target="#modalMateria" data-bs-toggle="modal">Agregar materias primas</i>
                                                <i class="btn btn-danger" type="button" id="eliminarRenglon" >Eliminar</i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive" style="max-height: 200px; overflow-y: auto;">
                                        <!--<div id="tabla_materia_prima"></div>-->
                                        <table class='table' id="tabla-lista-materia-prima">
                                            <thead>
                                                <tr style='background: #052659;'>
                                                    <th class='align-middle text-center' scope='col'>Clave</th>
                                                    <th class='align-middle text-center' scope='col'>Nombre</th>
                                                    <th class='align-middle text-center' scope='col'>Precio U.</th>
                                                    <th class='align-middle text-center' scope='col'>Unidad</th>
                                                    <th class='align-middle text-center' scope='col'>Cantidad</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                        
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Guardar Receta</button>
                                            </div>
                                        </div>
                                    </div>
                                   
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Edición de mi receta</h5>
                            <input type="hidden" class="form-control" name="idReceta" id="idReceta" style="color: white">
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <form action="" id="formulario_editar_receta">
                                <!--<form action="../functions/receta/editar_receta.php" method="POST">-->
                                    <div class="row">
                                        <div class="col-md-12 pt-3 pb-3">
                                            <div class="text-center">
                                                <i class="btn btn-warning" type="button" data-bs-target="#modalBuscarReceta" data-bs-toggle="modal">Buscar receta</i>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="receta_seleccionada"></div>

                                    <p><b>Lista de productos actuales</b></p>
                                    <div class="table-responsive" style="max-height: 120px; overflow-y: auto;">
                                        <div id="tabla-productos-actuales"></div>
                                        
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 pt-3 pb-3">
                                            <div class="text-center">
                                                <i class="btn btn-warning" type="button" data-bs-target="#modalMateria2" data-bs-toggle="modal">Agregar más materia prima</i>
                                                <i class="btn btn-danger" type="button" data-bs-target="#modalEliminarMat" data-bs-toggle="modal">Eliminar</i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Actualizar Receta</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Modal Materia-->
<div class="modal fade" id="modalMateria" tabindex="-1" aria-labelledby="modalMateria" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalMateria">Buscador materia prima</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline ">
                                <label class="form-label">Buscador...</label>
                                <input type="text" class="form-control" id="caja_buscar_map">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary" style="padding-top: 5px; padding-bottom: 6px;"><img width="15" src="../assets/img/icons/buscar.png"></button>
                    </div>
                </div>
                <div class="table-responsive pt-2">
                    <div id="tabla_map"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="btn_agregar_map">Agregar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Eliminar Renglon -->
<div class="modal fade" id="modalEliminarMat" tabindex="-1" aria-labelledby="modalEliminarMat" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalEliminarMat">ELIMINAR MATERIA PRIMA</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      
        <div class="row">
          <div class="col-10 d-flex align-items-center">
            <h6 class="mb-0">Estas por eliminar la materia prima</h6>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" id="eliminar_renglon">Eliminar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Materia2-->
<div class="modal fade" id="modalMateria2" tabindex="-1" aria-labelledby="modalMateria2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalMateria2">Buscador materia prima</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline ">
                                <label class="form-label">Buscador...</label>
                                <input type="text" class="form-control" id="caja_buscar_map2">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary" style="padding-top: 5px; padding-bottom: 6px;"><img width="15" src="../assets/img/icons/buscar.png"></button>
                    </div>
                </div>
                <div class="table-responsive pt-2">
                    <div id="tabla_map2"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="btn_agregar_map2">Agregar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal buscar receta Actualizar-->
<div class="modal fade" id="modalBuscarReceta" tabindex="-1" aria-labelledby="modalBuscarReceta" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBuscarReceta">Buscador Receta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline ">
                                <label class="form-label">Buscador...</label>
                                <input type="text" class="form-control" id="caja_buscar_receta">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary" style="padding-top: 5px; padding-bottom: 6px;"><img width="15" src="../assets/img/icons/buscar.png"></button>
                    </div>
                </div>
                <div class="table-responsive pt-2">
                    <div id="buscar_receta"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="btn_agregar_rec">Agregar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal FalloGuardar-->
<div class="modal fade" id="modalFalloGuardar" tabindex="-1" aria-labelledby="modalFalloGuardar" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFalloGuardar">FALLO AL GUARDAR LA RECETA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4 style="color: #343a40"> Introduce al menos una materia prima a la receta</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal RECETA YA CREADA-->
<div class="modal fade" id="modalExistenteReceta" tabindex="-1" aria-labelledby="modalExistenteReceta" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalExistenteReceta">LA RECETA YA EXISTE</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4 style="color: #343a40"> REVISA LOS DATOS INTRODUCIDOS, TAL PARECE QUE LA RECETA YA EXISTE</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal PROCESO EXITOSO-->
<div class="modal fade" id="modalExitoGuardar" tabindex="-1" aria-labelledby="modalExitoGuardar" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalExitoGuardar" style="color: #4CAF50">RECETA EXITOSAMENTE CREADA</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4 style="color: #343a40"> La receta ha sido creada exitosamente</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal RECETA ACTUALIZADA-->
<div class="modal fade" id="modalExitoActualizar" tabindex="-1" aria-labelledby="modalExitoActualizar" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalExitoActualizar" style="color: #4CAF50">RECETA EXITOSAMENTE ACTUALIZADA</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4 style="color: #343a40"> La receta ha sido actualizada exitosamente</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal RECETA ACTUALIZADA-->
<div class="modal fade" id="modalNOExitoActualizar" tabindex="-1" aria-labelledby="modalNOExitoActualizar" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalNOExitoActualizar" style="color: #4CAF50">FALLO AL ACTUALIZAR EL RECETA</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4 style="color: #343a40"> La receta no se ha podido actualizar</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script src="../assets/js/jquery-3.5.1.min.js"></script>
<!-- ///////////// BUSCAR MATERIA PRIMA //////////////-->
<script type="text/javascript">

    $(document).ready(function(){
        buscar_materia_prima();
        
    });
    function buscar_materia_prima(consulta){
        $.ajax({
            data: {consulta: consulta},
            url: '../functions/materia_prima/buscar_materia_prima.php',
            type: 'post',
            dataType:'html',
            success:  function (response) {
                $('#tabla_map').html(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });

    }
    $(document).on('keyup','#caja_buscar_map', function(){
        var valor = $(this).val();
        if(valor != ""){
            buscar_materia_prima(valor);
        }else{
            buscar_materia_prima();
        }
    });
</script>
<!-- ///////////// BUSCAR MATERIA PRIMA2 //////////////-->
<script type="text/javascript">

    $(document).ready(function(){
        buscar_materia_prima2();
        
    });
    function buscar_materia_prima2(consulta){
        $.ajax({
            data: {consulta: consulta},
            url: '../functions/materia_prima/buscar_materia_prima.php',
            type: 'post',
            dataType:'html',
            success:  function (response) {
                $('#tabla_map2').html(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });

    }
    $(document).on('keyup','#caja_buscar_map2', function(){
        var valor = $(this).val();
        if(valor != ""){
            buscar_materia_prima2(valor);
        }else{
            buscar_materia_prima2();
        }
    });
</script>
<!-- //////////////// BUSCAR RECETA /////////////////-->
<script type="text/javascript">
     $(document).ready(function(){
        buscar_receta();
    });
    $(document).on('keyup','#caja_buscar_receta', function(){
        var valor = $(this).val();
        if(valor != ""){
            buscar_receta(valor);
        }else{
            buscar_receta();
        }
    });
    function buscar_receta(consulta){
        $.ajax({
            data: {clave_receta: consulta},
            url: '../functions/receta/buscar_recetas.php',
            type: 'post',
            dataType:'html',
            success:  function (response) {
                $('#buscar_receta').html(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });

    }

</script>
<!-- /////////////// SELECCIONAR MATERIA PRIMA DEL BUSCADOR ///////////////-->
<script type="text/javascript">
    $(document).ready(function(){
        //seleccionar_materia_prima();
        var clave_materia="";
        var cont=0;
        document.getElementById('clave_receta').classList.remove('input_error');
        document.getElementById('nombre_receta').classList.remove('input_error');
        $(document).on('click', '#edit_materia tbody tr', function(){

            var tr = $(this).closest('tr');
            id_materia = $(tr).find('td:nth-child(1)').text();
            clave_materia = $(tr).find('td:nth-child(2)').text();
            nombre_materia = $(tr).find('td:nth-child(3)').text();
            precio_unico_materia = $(tr).find('td:nth-child(4)').text();
            unidad_materia = $(tr).find('td:nth-child(5)').text();

            cleanTr()
            $(this).addClass('row-selected')
        
            function cleanTr(){
                $('.row-selected').each(function(index, element){
                    $(element).removeClass('row-selected');
                })
                }
            });

        $('#btn_agregar_map').on('click',function(){
            agregarMateriaPrima();
            
            //seleccionar_materia_prima(clave_materia);
            $('#modalMateria').modal('toggle'); 
        });
        
        function agregarMateriaPrima(){
            cont =cont+1;
            //console.log(clave_materia, nombre_materia, precio_unico_materia, unidad_materia);
            if (clave_materia != ''){
                var tabla = document.getElementById("tabla-lista-materia-prima").getElementsByTagName('tbody')[0];
                var nuevaFila = tabla.insertRow();
                
                var celdaClave = nuevaFila.insertCell(0);
                celdaClave.innerHTML = "<input type='text' name='clave_materia_"+cont+"' id='clave_materia_"+cont+"' class='form-control' value='"+clave_materia+"' >";

                var celdaNombre = nuevaFila.insertCell(1);
                celdaNombre.innerHTML = "<input type='text' name='nombre_materia_"+cont+"' id='nombre_materia_"+cont+"' class='form-control' value='"+nombre_materia+"' >";

                var celdaPrecio = nuevaFila.insertCell(2);
                celdaPrecio.innerHTML ="<input type='text' name='precio_unico_materia_"+cont+"' id='precio_unico_materia_"+cont+"' class='form-control' value='"+precio_unico_materia+"' >"; 

                var celdaUnidad = nuevaFila.insertCell(3);
                celdaUnidad.innerHTML = "<input type='text' name='unidad_materia_"+cont+"' id='unidad_materia_"+cont+"' class='form-control' value='"+unidad_materia+"'>";

                var celdaCantidad = nuevaFila.insertCell(4);
                celdaCantidad.innerHTML = "<input type='text' name='cantidad_"+cont+"' id='cantidad_"+cont+"' class='form-control' value=''  required>";

                var celdaId = nuevaFila.insertCell(5);
                celdaId.innerHTML = "<input type='hidden' name='id_materia_"+cont+"'id='id_materia_"+cont+"' class='form-control' value='"+id_materia+"' >";
                
                clave_materia = ''
                nombre_materia = ''
                precio_unico_materia = ''
                unidad_materia = ''
                id_materia = ''
            }
            
        }
        
  });
</script>
<!-- /////////////// SELECCIONAR MATERIA PRIMA2 DEL BUSCADOR ///////////////-->
<script type="text/javascript">
    $(document).ready(function(){
        //seleccionar_materia_prima();
        var clave_materia="";
        var cont=0;

        $(document).on('click', '#edit_materia tbody tr', function(){

            var tr = $(this).closest('tr');
            id_materia = $(tr).find('td:nth-child(1)').text();
            clave_materia = $(tr).find('td:nth-child(2)').text();
            nombre_materia = $(tr).find('td:nth-child(3)').text();
            precio_unico_materia = $(tr).find('td:nth-child(4)').text();
            unidad_materia = $(tr).find('td:nth-child(5)').text();

            cleanTr()
            $(this).addClass('row-selected')
        
            function cleanTr(){
                $('.row-selected').each(function(index, element){
                    $(element).removeClass('row-selected');
                })
                }
            });

        $('#btn_agregar_map2').on('click',function(){
            agregarMateriaPrima2();
            //seleccionar_materia_prima(clave_materia);
            $('#modalMateria2').modal('toggle'); 
        });
        
        function agregarMateriaPrima2(){
            cont =cont+1;
            //console.log(clave_materia, nombre_materia, precio_unico_materia, unidad_materia);
             if (clave_materia != ''){
                var tabla = document.getElementById("lista-materia-prima").getElementsByTagName('tbody')[0];
                var nuevaFila = tabla.insertRow();
                var celda = nuevaFila.insertCell(0);
                var celdaClave = nuevaFila.insertCell(1);
                celdaClave.innerHTML = "<input type='text' name='clave_materia_"+cont+"' id='clave_materia_"+cont+"' class='form-control' value='"+clave_materia+"' >";

                var celdaNombre = nuevaFila.insertCell(2);
                celdaNombre.innerHTML = "<input type='text' name='nombre_materia_"+cont+"' id=nombre_materia_"+cont+"' class='form-control' value='"+nombre_materia+"' >";

                var celdaPrecio = nuevaFila.insertCell(3);
                celdaPrecio.innerHTML ="<input type='text' name='precio_unico_materia_"+cont+"' id=precio_unico_materia_"+cont+"' class='form-control' value='"+precio_unico_materia+"' >"; 

                var celdaUnidad = nuevaFila.insertCell(4);
                celdaUnidad.innerHTML = "<input type='text' name='unidad_materia_"+cont+"' id=unidad_materia_"+cont+"' class='form-control' value='"+unidad_materia+"'>";

                var celdaCantidad = nuevaFila.insertCell(5);
                celdaCantidad.innerHTML = "<input type='text' name='cantidad_"+cont+"' id='cantidad_"+cont+"' class='form-control' value='' required>";

                var celdaId = nuevaFila.insertCell(6);
                celdaId.innerHTML = "<div class=' input-group input-group-outline'> <input type='hidden' name='id_materia_"+cont+"'id='id_materia_"+cont+"' class='form-control' value='"+id_materia+"' > </div>";
        
                clave_materia = ''
                nombre_materia = ''
                precio_unico_materia = ''
                unidad_materia = ''
                id_materia = ''
             }
        }
        
    });
</script>
<!-- /////////////// SELECCIONAR RECETA DEL BUSCADOR ///////////////-->
<script type="text/javascript">
    $(document).ready(function(){
        seleccionar_receta();
        lista_materia_prima();
        var clave_receta="";

        $(document).on('click', '#table_receta tbody tr', function(){

            var tr = $(this).closest('tr');
            clave_receta = $(tr).find('td:nth-child(1)').text();
            $('#idReceta').val(clave_receta);
            cleanTr()
            $(this).addClass('row-selected')
        
            function cleanTr(){
                $('.row-selected').each(function(index, element){
                    $(element).removeClass('row-selected');
                })
                }
            });

        $('#btn_agregar_rec').on('click',function(){
            seleccionar_receta(clave_receta);
            lista_materia_prima(clave_receta);
            $('#modalBuscarReceta').modal('toggle'); 
        });
        function seleccionar_receta(clave_receta){
            $.ajax({
                data: {clave_receta: clave_receta},
                url: '../functions/receta/tabla_recetas.php',
                type: 'post',
                dataType:'html',
                success:  function (response) {
                    //console.log(response);
                    $('#receta_seleccionada').html(response);
                },
                error: function (error) {
                    console.log(error); 
                }
            });
        }
        function lista_materia_prima(clave_receta){
            $.ajax({
                data: {clave_receta: clave_receta},
                url: '../functions/materia_prima/lista_materia_prima.php',
                type: 'post',
                dataType:'html',
                success:  function (response) {
                    //console.log(response);
                   $('#tabla-productos-actuales').html(response);
                },
                error: function (error) {
                    console.log(error); 
                }
            });
        }
        

  });
</script>
<!--//////////////////////-->
<script>
    var clave_receta =document.getElementById('clave_receta');
    var nombre_receta =document.getElementById('nombre_receta');

    clave_receta.addEventListener('keyup', (e)=>{
        document.getElementById('clave_receta').classList.remove('input_error');
    });
    nombre_receta.addEventListener('keyup', (e)=>{
        document.getElementById('nombre_receta').classList.remove('input_error');
    });
    
    $('#formulario_receta').submit(function(event) {
    // Prevenir que el formulario se envíe de forma predeterminada
    event.preventDefault();
    
    // Obtener los datos del formulario
    var datos = $(this).serialize();
    //clave_receta nombre_receta
    if(document.getElementById('clave_receta').value!="" && document.getElementById('nombre_receta').value!='' && document.getElementById('clave_materia_1')){
        enviarDatosReceta(datos);
    }else{
        if(document.getElementById('clave_receta').value == ""){
            document.getElementById('clave_receta').classList.add('input_error');
        }
        if(document.getElementById('nombre_receta').value == ""){
            document.getElementById('nombre_receta').classList.add('input_error');
        }
        if(!document.getElementById('clave_materia_1')){
            $('#modalFalloGuardar').modal('show'); 
        }
    }
    
    //
    
  });
  function enviarDatosReceta(datos){
        // Enviar la solicitud AJAX
        $.ajax({
            data: datos,
            url: '../functions/receta/guardar_receta.php',
            type: 'post',
            success:  function (response) {
                console.log(response);
                
                if(response==1){
                    $('#modalExitoGuardar').modal('show'); 
                    setTimeout(function() {
                        location.href='/aqua-restaurant/usuario_administrador/recetas.php';
                        }, 3000);
                }else{
                    $('#modalExistenteReceta').modal('show'); 
                    //console.log(response);
                }
                //location.href='/aqua-restaurant/usuario_administrador/recetas.php';*/
            },
            error: function (error) {
                console.log(error); 
            }
        });
        }
</script>
<!--//////////////////////-->
<script>
    $('#formulario_editar_receta').submit(function(event) {
        // Prevenir que el formulario se envíe de forma predeterminada
        event.preventDefault();
        
        // Obtener los datos del formulario
        var datos = $(this).serialize();
        //clave_receta nombre_receta
        
        editarDatosReceta(datos);
    
    
  });
  function editarDatosReceta(datos){
        // Enviar la solicitud AJAX
        $.ajax({
            data: datos,
            url: '../functions/receta/editar_receta.php',
            type: 'post',
            success:  function (response) {
                console.log(response);
                if(response==1){
                    $('#modalExitoActualizar').modal('show'); 
                    setTimeout(function() {
                        location.href='/aqua-restaurant/usuario_administrador/recetas.php';
                        }, 3000);
                }else{
                    $('#modalNOExitoActualizar').modal('show'); 
                }
                //location.href='/aqua-restaurant/usuario_administrador/recetas.php';*/
            },
            error: function (error) {
                console.log(error); 
            }
        });
        }
</script>

<!-- proceso para eliminar los renglones de las recetas al crear una nueva receta-->
<script>
    // proceso para seleccionar las lineas a eliminar de la tabla.
    $(document).on('click', '#tabla-lista-materia-prima tbody tr', function(){

        var tr = $(this).closest('tr');
       /*  id_materia = $(tr).find('td:nth-child(1)').text();
        clave_materia = $(tr).find('td:nth-child(2)').text();
        nombre_materia = $(tr).find('td:nth-child(3)').text();
        precio_unico_materia = $(tr).find('td:nth-child(4)').text();
        unidad_materia = $(tr).find('td:nth-child(5)').text(); */

        // verificar si el renglon seleccionado ya fue seleccionado, si es así, se le quita la clase que indica que esta seleccionado
        if ($(this).closest('tr').hasClass("row-selected")) {
            $(this).removeClass('row-selected');
        } else {
            $(this).addClass('row-selected')
        }
        
    });

    // ELIMINAR LOS RENGLONES SELECCIONADOS
    $("#eliminarRenglon")
        .on('click', function(){ 
            $filas_seleccionadas = $('.row-selected');
            $filas_seleccionadas.closest("tr").remove();
        });

</script>
<!-- proceso para eliminar los renglones de las recetas existentes-->
<script>
    var id="";
    // proceso para seleccionar las lineas a eliminar de la tabla.
    $(document).on('click', '#lista-materia-prima tbody tr', function(){
        var tr = $(this).closest('tr');
        
        id = $(tr).find('td:nth-child(1)').find('input').val();
        cleanTr();
        $(this).addClass('row-selected-mate')
        function cleanTr(){
            $('.row-selected-mate').each(function(index, element){
                $(element).removeClass('row-selected-mate');
            })
        }
    });

    /* // ELIMINAR LOS RENGLONES SELECCIONADOS
   $("#elmMaterias")
        .on('click', function(){ 
            $filas_seleccionada = $('.row-selected-mate');
            console.log($filas_seleccionada.closest("tr").find('td:nth-child(1)').text());
            // $.each($filas_seleccionadas, function (v, u){
              //  console.log(u.closest("tr").find('td').eq(0).text());

            //}) 
            //console.log($filas_seleccionadas.closest("tr").find('td:nth-child(1)').text());
        }); // eddy98K43 */
    $('#eliminar_renglon').on('click', function(){
        var idReceta = $('#idReceta').val();
        var datos = {
        "id": id,
        "id_rec": idReceta,
        }
        console.log(datos);
        $.ajax({
            data: datos,
            url: '../functions/eliminar_materia_prima.php',
            type: 'post',
            dataType:'html',
            success:  function (response) {
            console.log(response);
            if (response == 1) {
                $filas_seleccionadas = $('.row-selected-mate');
                $filas_seleccionadas.closest("tr").remove();
            }
            },
            error: function (error) {
                console.log(error); 
            }
        }); 
        id='';
        $('#modalEliminarMat').modal('toggle'); 
        
    });

</script>
<!--@Footer-->
<?php
include("path/footer.php");
?>