<!--@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">Alta de producto</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">Edición de producto</button>
                    <button class="nav-link" id="nav-productos-tab" data-bs-toggle="tab" data-bs-target="#nav-productos" type="button" role="tab" aria-controls="nav-productos" aria-selected="false">Edición de productos</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">Alta un producto</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <!--action="../functions/producto/guardar_producto.php"-->
                                <form  method="POST" id="formulario_producto">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Clave del producto</label>
                                                <input type="text" class="form-control" name="clave_producto" id="clave_producto" required>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Nombre del producto</label>
                                                <input type="text" class="form-control" name="nombre_producto"  id="nombre_producto" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Precio de venta $</label>
                                                <input type="text" class="form-control" name="precio_producto" id="precio_producto" pattern="\d+(\.\d{1,2})?" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <select class="form-control" name="clasificacion_producto" id="clasificacion_producto" required>
                                                    <option value='BAR'> BAR</option>
                                                    <option value='ALMUERZO'> ALMUERZO</option>
                                                    <option value='BEBIDAS'> BEBIDAS</option>
                                                    <option value='COMIDA'> COMIDA</option>
                                                    <option value='POSTRE'> POSTRE</option>
                                                    <option value='CENA'> CENA</option>
                                                    <!-- <hr>
                                                    <option class="line" value="ENSALADAS" style="color:#495057"> ENSALADAS</option>
                                                    <option value="HORNO" style="color:#495057"> HORNO</option> -->
                                                        
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <select class="form-control" name="prioridad_producto" id="prioridad_producto" required>
                                                    <option value="" selected> Prioridad</option>
                                                    <option value="1">Alta</option>
                                                    <option value="2">Media</option>
                                                    <option value="3">Baja</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Costo de Receta $</label>
                                                <input type="text" class="form-control" name="costo_receta" id="costo_receta" pattern="\d+(\.\d{1,2})?" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Costo redondeado %</label>
                                                <input type="text" class="form-control" name="costo_red_producto" id="costo_red_producto"  pattern="\d+(\.\d{1,2})?" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <select class="form-control" name="clasificacion_extra" id="clasificacion_extra" required>
                                                    <option value="0"> Clasificación Fin de Semana</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Observaciones</label>
                                                <input type="text" class="form-control" name="observaciones_producto" id="observaciones_producto">
                                            </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="#modalAsignarReceta" data-bs-toggle="modal">Asignar Receta</i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <div id="tabla_receta"></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">Crear Producto</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 productos</h5>
                        </div>
                        <div class="card-body pt-3 pb-5" >
                            <div class="col-md-10 mb-lg-0">
                                <form action="" id="formulario_editar_product">
                                <!--<form action="../functions/producto/editar_producto.php" method="POST">-->
                                    <div id="formulario_editar_producto">
                                        <div class='row'>
                                            <div class='col-md-12 pt-3 pb-2'>
                                                <div class='text-center'>
                                                    <i class='btn btn-warning' type='button' data-bs-target='#modalBuscarProducto' data-bs-toggle='modal'>Buscar producto</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="" id="form_edit">
                                        <div class='row' >
                                            <div class='col-md-4'>
                                                <label class='form-label'>Clave de producto</label>
                                                <input type='hidden' class='form-control' name='id_prod' id='id_prod' value=''>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='pro_clave' id='pro_clave' value='' disabled>
                                                </div>
                                            </div>
                                            <div class='col-md-8'>
                                                <label class='form-label'>Nombre de producto</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='pro_nombre' id='pro_nombre' value='' required>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Precio de venta $</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='pro_precio' id='pro_precio' value='' pattern='\d+(\.\d{1,2})?' required>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Clasificacion</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <select class='form-control' name='pro_clasificacion' id='pro_clasificacion' required>
                                                        
                                                        <option value='BAR'> BAR</option>
                                                        <option value='ALMUERZO'> ALMUERZO</option>
                                                        <option value='BEBIDAS'> BEBIDAS</option>
                                                        <option value='COMIDA'> COMIDA</option>
                                                        <option value='POSTRE'> POSTRE</option>
                                                        <option value='CENA'> CENA</option>
                                                        <!-- <hr>
                                                        <option class="line" value="ENSALADAS" style="color:#495057"> ENSALADAS</option>
                                                        <option value="HORNO" style="color:#495057"> HORNO</option> -->
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Prioridad</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <select class='form-control' name='pro_prioridad' id='pro_prioridad' required>
                                                        <option value='' selected> </option>
                                                        <option value='1'>Alta</option>
                                                        <option value='2'>Media</option>
                                                        <option value='3'>Baja</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Costo de Receta $</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='pro_costo' id='pro_costo' value='' pattern='\d+(\.\d{1,2})?' required>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Costo redondeado %</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='pro_costo_red' id='pro_costo_red' value='' required>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Estatus</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <select class='form-control' name='pro_estatus' id='pro_estatus'>
                                                        <option value='' selected></option>
                                                        <option value='Alta'>Alta</option>
                                                        <option value='Baja'>Baja</option>
                                                        <option value='Caducado'>Caducado</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Clasificación Fin de Semana</label>
                                                <div class='input-group input-group-outline mb-3'>
                                                    <select class='form-control' name='clasificacion_extra2' id='clasificacion_extra2' required>
                                                        <option value='0'> Ninguno </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <label class='form-label'>Receta</label>
                                                <div class="card-footer p-0 list-finder">
                                                     <div class='input-group input-group-outline'>
                                                        <input type="text" class="form-control" id="Receta_edt" autocomplete = "off" placeholder="Receta">
                                                        <input type="hidden" id="idReceta" name="idReceta">
                                                        <div id="listReceta" class="list-group list-hide">
                                                            <div class="list-items" ></div>
                                                        </div>
                                                    </div>
                                                </div>
                                               
                                                
                                            </div>
                                            <div class='col-md-12'>
                                                <label class='form-label'>Observaciones</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='pro_observaciones' id='pro_observaciones' value=''>
                                                </div>
                                            </div>
                                            
                                        </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' id='btn_actualizar_producto'>Actualizar</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-productos" role="tabpanel" aria-labelledby="nav-productos-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Edición de productos</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-12 mb-lg-0">
                                <div class="row">
                                    <div class="col-2">
                                        <button class="btn bg-gradient-info w-100 mb-0 toast-btn" type="button" data-target="successToast" id="btn_almuerzo">ALMUERZO</button>
                                    </div>
                                    <div class="col-2">
                                        <button class="btn bg-gradient-dark w-100 mb-0 toast-btn" type="button" data-target="successToast" id="btn_bar">BAR</button>
                                    </div>
                                    <div class="col-2">
                                        <button class="btn bg-gradient-danger w-100 mb-0 toast-btn" type="button" data-target="successToast" id="btn_bebidas">BEBIDAS</button>
                                    </div>
                                    <!--SOPAS-->
                                    <div class="col-2">
                                        <button class="btn bg-gradient-light w-100 mb-0 toast-btn" type="button" data-target="successToast" id="btn_comida">COMIDA</button>
                                    </div>
                                    <div class="col-2" >
                                        <button class="btn bg-gradient-faded-primary w-100 mb-0 toast-btn text-white" type="button" data-target="successToast" id="btn_postre">POSTRE</button>
                                    </div>
                                    <div class="col-2" >
                                        <button class="btn bg-gradient-faded-danger w-100 mb-0 toast-btn text-white" type="button" data-target="successToast" id="btn_cena">CENA</button>
                                    </div>
                                    
                                </div>
                                
                            </div>
                            <div class="col-12">
                                <div class="row mt-4">
                                        
                                        <div class="col-md-10">
                                            <div class="col-2">
                                                <button class="btn bg-gradient-warning w-100 mb-0 toast-btn" type="button" data-target="successToast" id="btn_todos">Todos</button>
                                            </div>
                                            
                                        </div>
                                        <div class="col-2">
                                            <!--<span class="btn bg-gradient-primary w-100 mb-0 toast-btn" type="button" data-bs-toggle="modal" data-bs-target="#modalEditarRenglon" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px;">Editar</span>-->
                                            <button class="btn bg-gradient-primary w-100 mb-0 toast-btn" type="button" data-target="successToast" id="btn_editar_productos">Editar</button>
                                        </div>
                                    </div>
                            </div>
                            <div class="col-md-12 mb-lg-0 mt-4">
                                <!-- <form action="" id="tabla_productos_editar" method="post"> --> 
                                    <div class="table-responsive" >
                                         <table class="table compact" id="tabla_dinamica_productos" style="min-width:100%;">
                                            <thead align="center" style="background: linear-gradient(135deg, #05265926, #052659);color: #052659;border: 1px solid rgba(5, 38, 89, .3);" >
                                                <tr>
                                                    <th scope="col" >Clave</th>
                                                    <th scope="col" >Nombre</th>
                                                    <th scope="col" >Precio venta</th>
                                                    <th scope="col" >Clasificacion</th>
                                                    <th scope="col" >Estatus</th>
                                                    <th scope="col" >Costo Receta</th>
                                                    <th scope="col" >Redondeado</th>
                                                    <th scope="col" >Observaciones</th>
                                                </tr>
                                            </thead>
                                            <tbody class="text-2xl " id="notasTableRow" >
                                            </tbody>
                                        </table>
                                        
                                    </div>
                                <!-- </form> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


<!-- Modal asignación de receta-->
<div class="modal fade" id="modalAsignarReceta" tabindex="-1" aria-labelledby="modalAsignarReceta" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAsignarReceta">Buscador de recetas</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_receta">Agregar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Materia-->
<div class="modal fade" id="modalBuscarProducto" tabindex="-1" aria-labelledby="modalBuscarProducto" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBuscarProducto">Buscador de productos</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_producto">
                            </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_buscar_producto"></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="btnBuscarProducto">Agregar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal FALLO-->
<div class="modal fade" id="modalFalloProducto" tabindex="-1" aria-labelledby="modalFalloProducto" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFalloProducto">NO HAS COMPLETADO TODOS LOS CAMPOS</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6>Asegurate de añadir una receta</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Crear Producto-->
<div class="modal fade" id="modalCrearProducto" tabindex="-1" aria-labelledby="modalCrearProducto" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCrearProducto">CREACION EXITOSA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6>Se ha creado exitosamente el producto</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Editar Producto-->
<div class="modal fade" id="modalEditarProducto" tabindex="-1" aria-labelledby="modalEditarProducto" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEditarProducto">EDICION EXITOSA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6>Se ha editado exitosamente el producto</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Seleccionar Renglon -->
<div class="modal fade" id="modalSeleccionarRenglon" tabindex="-1" aria-labelledby="modalSeleccionarRenglon" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalSeleccionarRenglon">SELECCIONA EL RENGLON</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">Para poder editar un producto, por favor selecciona primero el producto</h6>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Seleccionar Renglon -->
<div class="modal fade" id="modalExitoEdtRenglon" tabindex="-1" aria-labelledby="modalExitoEdtRenglon" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalExitoEdtRenglon">EDICION EXITOSA</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">Se ha editado satisfactoriamente el producto!</h6>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Seleccionar Renglon -->
<div class="modal fade" id="modalExProducto" tabindex="-1" aria-labelledby="modalExProducto" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalExProducto">PRODUCTO EXISTENTE</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">El producto ya existe!</h6>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Seleccionar Renglon -->
<div class="modal fade" id="modalSNEdtRenglon" tabindex="-1" aria-labelledby="modalSNEdtRenglon" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalSNEdtRenglon">Sin datos</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">No hay datos para modificar!</h6>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Editar Renglon -->
<div class="modal fade" id="modalEditarRenglon" tabindex="-1" aria-labelledby="modalEditarRenglon" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalEditarRenglon">EDITAR PRODUCTO</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 editar el producto</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="btn_edt_producto">Editar</button>
      </div>
    </div>
  </div>
</div>


<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/lib/dataTable/datatables.min.js"></script>
<!-- ////////////// BUSCAR RECETA ///////////////// -->
<script type="text/javascript">
     $(document).ready(function(){
        buscar_receta();
        getListRecetas('');
        getClasificacionesExtra()
        $('#form_edit').css('display','none');
        $('#btn_actualizar_producto').css('display','none');
        $('#tabla_dinamica_productos').DataTable({
            //order: [[4, 'Desc']],
            ordering: true,
            dom: 'Blfrtip',
            searching: false,  
            lengthChange: false,
            buttons: [],
            pagingType: 'simple_numbers',
            language: {
                url: '../assets/lib/dataTable/spanish.json',
            },
            paging: true,
            scrollY: 'calc(60vh -50px)',
            scrollX: true,
            fixedHeader: true,
            bFilter: false, 
            bInfo: false,
            columns: [
                {data: 'clave', class: ''},
                {data: 'producto', class: ''},
                {data: 'precio_venta', class: ''},
                {data: 'clasificacion', class: ''},
                {data: 'estatus', class: ''},
                {data: 'costo_rec', class: ''},
                {data: 'redondeado', class: ''},
                {data: 'observaciones', class: ''},
              ],
          });
    });
    $(document).on('keyup','#caja_buscar_receta', function(){
        var valor = $(this).val();
        if(valor != ""){
            buscar_receta(valor);
        }else{
            buscar_receta();
        }
    });
    // 
    function getClasificacionesExtra(){
        $.ajax({
            data: {id:0},
            url: '../functions/producto/clasificaciones_extra.php',
            type: 'post',
            dataType:'JSON',
            success:  function (response) {
                if (response[0].id > 0) {
                    $('#clasificacion_extra').html('<option value="0"> Clasificación Fin de Semana</option>');
                    $('#clasificacion_extra2').html('<option value="0"> Ninguna </option>');
                    // $('#clasificacion_extra2').html('');
                    $.each(response, function (v, u) {
                        let H = `<option value="${u.id}"> ${u.uss_nombre}</option>`;
                        $('#clasificacion_extra').append(H);
                        $('#clasificacion_extra2').append(H);
                    })

                }
            },
            error: function (error) {
                console.log(error); 
            }
        });
    }
    
    function buscar_receta(consulta){
        var type = 'prod'; // Generar otro tipo de busqueda
        $.ajax({
            data: {clave_receta: consulta, type: type},
            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 RECETA DEL BUSCADOR ///////////////-->
<script>
    $(document).ready(function(){
        seleccionar_receta();
        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();

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

        $('#btn_agregar_receta').on('click',function(){
            //console.log('clave_receta');
            seleccionar_receta(clave_receta);
            devolver_costo_receta(clave_receta)
            $('#modalAsignarReceta').modal('toggle'); 
        });

        function seleccionar_receta(clave_receta){
            $.ajax({
                data: {clave_receta: clave_receta},
                url: '../functions/receta/tabla_receta_2.php',
                type: 'post',
                dataType:'html',
                success:  function (response) {
                    $('#tabla_receta').html(response);
                },
                error: function (error) {
                    console.log(error); 
                }
            });
            
        }
        function devolver_costo_receta(clave_receta){
            $.ajax({
                data: {clave_receta: clave_receta},
                url: '../functions/obtener_costo_receta.php',
                type: 'GET',
                dataType: 'json',
                success:  function (data) {
                console.log(data);
                if (data.rec_costo) {
                    
                    $('#costo_receta').val(data.rec_costo);
                }
                
                },
                error: function (error) {
                console.log(error); 
                
                }
            });
        }
  });
</script>
<!-- ////////////// BUSCAR PRODUCTO ///////////////// -->
<script type="text/javascript">
     $(document).ready(function(){
        buscar_producto();
    });
    $(document).on('keyup','#caja_buscar_producto', function(){
        var valor2 = $(this).val();
        if(valor2 != ""){
            buscar_producto(valor2);
        }else{
            buscar_producto();
        }
    });
    function buscar_producto(consulta){
        $.ajax({
            data: {clave_producto: consulta},
            url: '../functions/producto/buscador_producto.php',
            type: 'post',
            dataType:'html',
            success:  function (response) {
                $('#tabla_buscar_producto').html(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });

    }
</script>
<!-- /////////////// SELECCIONAR PRODUCTO DEL BUSCADOR ///////////////-->
<script>
    $(document).ready(function(){
        var clave_producto="";
        
        $(document).on('click', '#editar_producto tbody tr', function(){
        var tr = $(this).closest('tr');
        clave_producto = $(tr).find('td:nth-child(1)').text();
        
        cleanTr()
        $(this).addClass('row-selected')
    
        function cleanTr(){
            $('.row-selected').each(function(index, element){
                $(element).removeClass('row-selected');
            })
            }
        });

        $('#btnBuscarProducto').unbind('click').on('click',function(){
            //console.log('clave_receta');
            seleccionar_producto(clave_producto);
            $('#modalBuscarProducto').modal('toggle'); 
        });

        
  });
  function seleccionar_producto(clave_producto){
    $('#form_edit').css('display','block');
    $('#btn_actualizar_producto').css('display','block');
    $.ajax({
        data: {clave_producto: clave_producto},
        url: '../functions/producto/editar_producto_form.php',
        type: 'post',
        dataType:'JSON',
        success:  function (response) {
            $('#id_prod').val(response[0].ID);
            $('#pro_clave').val(response[0].PRO_CLAVE);
            $('#pro_nombre').val(response[0].PRO_NOMBRE);
            $('#pro_precio').val(response[0].PRO_PRECIO_VENTA);
            $('#pro_clasificacion').val(response[0].PRO_CLASIFICIACION);
            $('#pro_prioridad').val(response[0].PRO_PRIORIDAD);
            $('#pro_costo').val(response[0].PRO_COSTO_RECETA);
            $('#pro_costo_red').val(response[0].PRO_RENDONDEADO);
            $('#pro_estatus').val(response[0].PRO_ESTATUS);
            $('#clasificacion_extra2').val(response[0].PRO_VISTA);
            $('#pro_observaciones').val(response[0].PRO_OBSERVACIONES);
            $('#idReceta').val(response[0].PRO_ID_RECETA);
            $('#Receta_edt').val(response[0].RECETA);
            //$('#formulario_editar_producto').html(response);
            
            
        },
        error: function (error) {
            console.log(error); 
        }
    });
}
  function putClasificacionExtra(){
        let clasiExtra= $("#id_prod").attr('data-content');
        $("#clasificacion_extra2").val(clasiExtra);
    }
</script>

<!--ENVIAR DATOS PARA CREAR EL PRODUCTO-->
<script>
    $(document).ready(function(){
        //rec_nombre
        var clave_producto =document.getElementById('clave_producto');
        var nombre_producto =document.getElementById('nombre_producto');
        var precio_producto =document.getElementById('precio_producto');
        var costo_red_producto =document.getElementById('costo_red_producto');
        var clasificacion_producto =document.getElementById('clasificacion_producto');
        var prioridad_producto =document.getElementById('prioridad_producto');
        var rec_nombre =document.getElementById('rec_nombre');

        clave_producto.addEventListener('keyup', (e)=>{
            document.getElementById('clave_producto').classList.remove('input_error');
        });
        nombre_producto.addEventListener('keyup', (e)=>{
            document.getElementById('nombre_producto').classList.remove('input_error');
        });
        precio_producto.addEventListener('keyup', (e)=>{
            document.getElementById('precio_producto').classList.remove('input_error');
        });
        clasificacion_producto.addEventListener('change', (e)=>{
            document.getElementById('clasificacion_producto').classList.remove('input_error');
        });
        prioridad_producto.addEventListener('change', (e)=>{
            document.getElementById('prioridad_producto').classList.remove('input_error');
        });
        costo_red_producto.addEventListener('keyup', (e)=>{
            document.getElementById('costo_red_producto').classList.remove('input_error');
        });

        $('#formulario_producto').submit(function(event) {
            // Prevenir que el formulario se envíe de forma predeterminada
            event.preventDefault();
            const expresiones={
                caracteres: /^[a-zA-Z0-9]/,
                numeros: /^[0-9]/,
                decimales:/^[0-9.]/,
            }
            // Obtener los datos del formulario
            var datos = $(this).serialize();
            //clave_receta nombre_receta
            if(document.getElementById('clave_producto').value!="" && document.getElementById('nombre_producto').value!='' && document.getElementById('precio_producto').value!='' && document.getElementById('clasificacion_producto').value!='' && document.getElementById('prioridad_producto').value!='' ){
                if(expresiones.decimales.test(document.getElementById('precio_producto').value)  && expresiones.decimales.test(document.getElementById('costo_red_producto').value)){
                    enviarDatosProductos(datos);
                }else{
                    if(!expresiones.decimales.test(document.getElementById('precio_producto').value)){
                        document.getElementById('precio_producto').classList.add('input_error');
                    }
                    if(!expresiones.decimales.test(document.getElementById('costo_red_producto').value)){
                        document.getElementById('costo_red_producto').classList.add('input_error');
                    }
                    
                }
                
            }else{
                if(document.getElementById('clave_producto').value == ""){
                    document.getElementById('clave_producto').classList.add('input_error');
                }
                if(document.getElementById('nombre_producto').value == ""){
                    document.getElementById('nombre_producto').classList.add('input_error');
                }
                if(document.getElementById('precio_producto').value == ""){
                    document.getElementById('precio_producto').classList.add('input_error');
                }
                if(document.getElementById('clasificacion_producto').value == ""){
                    document.getElementById('clasificacion_producto').classList.add('input_error');
                }
                if(document.getElementById('prioridad_producto').value == ""){
                    document.getElementById('prioridad_producto').classList.add('input_error');
                }
                if(!expresiones.decimales.test(document.getElementById('precio_producto').value)){
                    document.getElementById('precio_producto').classList.add('input_error');
                }
                if(!expresiones.decimales.test(document.getElementById('costo_red_producto').value)){
                    document.getElementById('costo_red_producto').classList.add('input_error');
                }
                $('#modalFalloProducto').modal('show'); 
            }
        });
        
    });
     
  function enviarDatosProductos(datos){
        // Enviar la solicitud AJAX
        $.ajax({
            data: datos,
            url: '../functions/producto/guardar_producto.php',
            type: 'post',
            success:  function (response) {
                console.log(response);
                if(response==1){
                    $('#modalCrearProducto').modal('show'); 
                    setTimeout(function() {
                        location.href='/aqua-restaurant/usuario_administrador/productos.php';
                    }, 3000);
                }else{
                    $('#modalExProducto').modal('show'); 
                }
               
            },
            error: function (error) {
                console.log(error); 
            }
        });
        }
</script>

<!--ENVIAR DATOS PARA CREAR EL PRODUCTO-->
<script>
    $(document).ready(function(){
        $('#formulario_editar_product').submit(function(event) {
            // Prevenir que el formulario se envíe de forma predeterminada
            event.preventDefault();
            const expresiones={
                caracteres: /^[a-zA-Z0-9]/,
                numeros: /^[0-9]/,
                decimales:/^[0-9.]/,
            }
            // Obtener los datos del formulario
            var datos = $(this).serialize();
            //clave_receta nombre_receta
           
            editarDatosProductos(datos);
               
            
        });
        
    });
     
  function editarDatosProductos(datos){
        // Enviar la solicitud AJAX
        $.ajax({
            data: datos,
            url: '../functions/producto/editar_producto.php',
            type: 'post',
            success:  function (response) {
                //console.log(response);
                $('#modalEditarProducto').modal('show'); 
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/productos.php';
                }, 3000);
                
            },
            error: function (error) {
                console.log(error); 
            }
        });
        }
</script>


<script>
    
    let products = [];
    function getProductosClas(clasificacion){
         $.ajax({
            type: 'POST',
            dataType: 'JSON',
            data: { clasificacion: clasificacion },
            url: '../functions/producto/list_productos.php',
            success: function (respuesta) {
                putProductosClas(respuesta);
                //seleccionarFila();
            }, error(e) {
                console.log(e);
            }
        })
    }
    function putProductosClas(dt){
        limpiarTabla()
        let tabla = $('#tabla_dinamica_productos').DataTable();
        if (dt[0]['pro_id'] > 0) {
            $.each(dt, function (v, u) {
                var rowNode = tabla.row
                    .add({
                        clave: `<input type="text" class="form-control input-precio" name="edts_prod_clave_${u.pro_id}" id="edts_prod_clave_${u.pro_id}" value="${u.CLAVE}">` ,
                        producto:  `<input type="text" class=" sizet-prod form-control input-precio" name="edts_prod_nombre_v_${u.pro_id}" id="edts_prod_nombre_v_${u.pro_id}" value="${u.NOMBRE}">` ,
                        precio_venta: `<input type="text" class="form-control input-precio" name="edts_prod_precio_v_${u.pro_id}" id="edts_prod_precio_v_${u.pro_id}" value="${u.PRECIO_VENTA}">`  ,
                        clasificacion: `<input type="text" class="form-control input-precio" name="edts_prod_clasificacion_v_${u.pro_id}" id="edts_prod_clasificacion_v_${u.pro_id}" value="${u.CLASIFICACION}">`,
                        estatus: `<input type="text" class="form-control input-precio" name="edts_prod_estatus_v_${u.pro_id}" id="edts_prod_estatus_v_${u.pro_id}" value="${u.ESTATUS}">`,
                        costo_rec: `<input type="text" class="form-control input-precio" name="edts_prod_costo_${u.pro_id}" id="edts_prod_costo_${u.pro_id}" value="${u.COSTO_RECETA}">`,
                        redondeado: `<input type="text" class="form-control input-precio" name="edts_prod_redondeado_${u.pro_id}" id="edts_prod_redondeado_${u.pro_id}" value="${u.REDONDEADO}">`,
                        observaciones: `<input type="text" class="form-control input-precio" name="edts_prod_observaciones_${u.pro_id}" id="edts_prod_observaciones_${u.pro_id}" value="${u.OBSERVACIONES}">`,
                    }).draw().node();
                $(rowNode).attr('id', u.pro_id);
            });
        }
    }

    function limpiarTabla(){
        let tabla = $('#tabla_dinamica_productos').DataTable();
        tabla.rows().remove().draw();
    }

    function readColTable(){
        $('#tabla_dinamica_productos tbody tr').each(function (v, u){
        let clave = $($(u).find('td')[0]).find('input').val();
        let producto = $($(u).find('td')[1]).find('input').val();
        let precio_venta = $($(u).find('td')[2]).find('input').val();
        let clasificacion = $($(u).find('td')[3]).find('input').val();
        let estatus = $($(u).find('td')[4]).find('input').val();
        let costo_rec = $($(u).find('td')[5]).find('input').val();
        let redondeado = $($(u).find('td')[6]).find('input').val();
        let observaciones = $($(u).find('td')[7]).find('input').val();

        let id_prod = $(this).attr('id');


        /* if ($(this).attr('data-complement')) {
            cantidad_ant = $(this).attr('data-complement').split('|')[0];
        } */
        if (id_prod) {
            console.log('read',clave, producto, precio_venta, clasificacion, estatus, costo_rec, redondeado, observaciones)
            guardarProductos(clave, producto, precio_venta, clasificacion, estatus, costo_rec, redondeado, observaciones, id_prod)
        }
        
        });
    }
    function guardarProductos(clave, producto, precio_venta, clasificacion, estatus, costo_rec, redondeado, observaciones, id_prod){
        
        products.push({
            clave:clave,
            nombre: producto,
            precio: precio_venta,
            clasificacion: clasificacion,
            estatus: estatus,
            costo_rec:costo_rec,
            redondeado: redondeado,
            observaciones: observaciones,
            id: id_prod,
        });
    }
    function saveAll()
    {
        //console.log('save_all')
        let pagina = "../functions/producto/editar_lista_productos_2.php"; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 

        const datos = {
            products: products
        };
        $.ajax({
        type: tipo,
        contentType: "application/json",
        data: JSON.stringify(datos),
        url: pagina,
        success: function (dt) {
            console.log(dt)
        if (dt == 1) {
            setTimeout(function() {
            location.href ="/aqua-restaurant/usuario_administrador/productos.php";
            }, 500);
        }
        }, error(e) {
            console.log(e);
        }
        });
    }
    $("#btn_todos").on('click', function(){
        getProductosClas("Todos")
    });
    
    $("#btn_almuerzo").on('click', function(){
        getProductosClas("ALMUERZO")
    });
    $("#btn_bar").on('click', function(){
        getProductosClas("BAR")
    });
    $("#btn_bebidas").on('click', function(){
        
        getProductosClas("BEBIDAS")
    });
    $("#btn_comida").on('click', function(){
        
        getProductosClas("COMIDA")
    });
    $('#btn_postre').on('click', function(){
        getProductosClas("POSTRE")
    });
    $('#btn_cena').on('click', function(){
        
        getProductosClas("CENA")
    });
    $('#btn_editar_productos').unbind('click').on('click', function(){
        readColTable();
        saveAll();
    });
    $('#Receta_edt')
      .unbind('keyup')
      .on('keyup', function () {
          let text = $(this).val().toUpperCase();
          selReceta(text);
    });

/* LISTAR RECETAS */
    function getListRecetas(word) {
        // console.log(word);
        let pagina = "../functions/list_recetas.php"; 
        let datos = { word: word }; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 
        let selector = searchReceta;
        ajax_function(pagina, datos, dtipo, tipo, selector);
    }
    function searchReceta(dt){
        
        /* console.log(dt); */
        var sl = $('#Receta_edt').offset();
        $('#listReceta .list-items').html('');
        $('#listReceta').css({top: sl.top + 40 + 'px'});// volver a tomar al hacer scroll.
        if (dt[0].id > 0) {
            $.each(dt, function (v, u) {
                let H = `<div class="list-item" id="${u.id}" data_complement="${u.rec_clave}|${u.id}|${u.rec_nombre.replace(/"/g, '')}">${u.rec_nombre}</div>`;
                $('#listReceta .list-items').append(H);
            });
        }
        
        $('#listReceta').on('mouseleave', function () {
            $('#listReceta').slideUp('fast');
        });

        $('#listReceta .list-item').on('click', function () {
            let prdNm = $(this).html();
            let prdId = $(this).attr('id');
            $('#Receta_edt').val(prdNm);
            $('#idReceta').val(prdId);
            $('#listReceta').slideUp(100);
            
        });
    }

    function selReceta(res) {
        res = res.toUpperCase();
        if (res == '') {
            $('#listReceta').slideUp(100);
        } else {
            $('#listReceta').slideDown(400);
        }
        if (res.length > 1) {
            if (res.length == 2) {
                // getlistRecetas(res)
                $('#listReceta .list-items div.list-item').css({display: 'block'});
            } else {
                $('#listReceta .list-items div.list-item').css({display: 'none'});
                $('#listReceta .list-items div.list-item').each(function (index) {
                    var cm = $(this).attr('data_complement').toUpperCase().replace(/|/g, '');
                    
                    cm = omitirAcentos(cm);
                    var cr = cm.indexOf(res);
                    if (cr > -1) {
                        $(this).css({display: 'block'});
                    }
                });
            }
            // rowCurr.show();
        }else {
            var sl = $('#Receta_edt').offset();
            $('#listReceta').css({top: sl.top + 40 + 'px'});// volver a tomar al hacer scroll.
            $('#listReceta .list-items div.list-item').css({display: 'none'});
        }
    }

    /** Omite acentos para su facil consulta */
    function omitirAcentos(text) {
      var acentos = 'ÃÀÁÄÂÈÉËÊÌÍÏÎÒÓÖÔÙÚÜÛãàáäâèéëêìíïîòóöôùúüûÑñÇç';
      var original = 'AAAAAEEEEIIIIOOOOUUUUaaaaaeeeeiiiioooouuuunncc';
      for (var i = 0; i < acentos.length; i++) {
          text = text.replace(acentos.charAt(i), original.charAt(i));
      }
      return text;
    }
    /** FUNCION AJAX */
  function ajax_function(pagina, datos, dtipo, tipo, selector){
    $.ajax({
      type: tipo,
      dataType: dtipo,
      data: datos,
      url: pagina,
      success: function (respuesta) {
        selector(respuesta)
      }, error(e) {
        console.log(e);
      }
    });
  }
/* END LISTAR RECETAS */

</script>

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