<?php

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


?>

<div class="row">
  <div class="col-lg-12">
    <div class="row">
      <div class="col-md-12 mb-lg-0">
        <div class="card-header pb-0 p-2">
          <div class="row">
            <!-- <div class="col-2">
              <a href="/aqua-restaurant/functions/salir.php"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b" style="width: 80px; height:80px;" data-bs-toggle="tooltip" data-bs-placement="top" title="Cerrar Sesion"><img style="padding: 20%;" width="80" src="../assets/img/icons/sesion.png"></i></a>
            </div>
            <div class="col-2">
              <a href="#"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b" style="width: 80px; height:80px;" data-bs-toggle="tooltip" data-bs-placement="top" title="Cerrar Sesion"><img style="padding: 20%;" width="80" src="../assets/img/icons/refresh.png"></i></a>
            </div> -->
            <div class="col-12 d-flex mb-4 justify-content-center">
              <img width="210" src="../assets/img/logos/logo.png">
            </div>
          </div>
        </div>
        <div class="card mt-1">
          <div class="card-body p-1">
            <div class="row">
              <div class="col-md-4 mb-md-0 mb-4">
                <!-- <div class="card card-body card-plain border-radius-lg d-flex align-items-center flex-row"> -->
                <span class="badge badge-sm btn bg-gradient-warning" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px; font-size: 1.3em;" id="btn_agregar">Agregar</span>
                <!-- </div> -->
              </div>
              <div class="col-md-4 mb-md-0 mb-4">
                <span class="badge badge-sm btn bg-gradient-danger" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px; font-size: 1.3em;" id="btn_Eliminar">Eliminar</span>
              </div>
              <div class="col-md-4 mb-md-0 mb-4">
                <span class="badge badge-sm btn bg-gradient-info" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px; font-size: 1.3em;" id="btn_Exitoso">Exitoso</span>
              </div>
              <div class="col-md-4 mb-md-0 mb-4">
                <span class="badge badge-sm btn bg-gradient-dark" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px; font-size: 1.3em;" id="btn_eliminado">Eliminado</span>
              </div>
              <div class="col-md-4 mb-md-0 mb-4">
                <span class="badge badge-sm btn bg-gradient-light" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px; font-size: 1.3em;" id="btn_Cargando">Cargando</span>
              </div>
              <div class="col-md-4 mb-md-0 mb-4">
                <span class="badge badge-sm btn bg-gradient-primary" style="margin-bottom: 0; padding-bottom: 15px; padding-top: 15px; font-size: 1.3em;" id="btn_comanda">comanda</span>
              </div>
              
            </div>
          </div>
        </div>
      </div>
      
     

    </div>
  </div>
 
 <!-- Modal AGREGAR PRODUCTO -->
<div class="modal fade" id="modalProducto" tabindex="-1" aria-labelledby="modalProducto" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #ECC950">
        <div class="row" >
            <div id="content" class="col-12">  
                <div class="date" style="display: none;">
                    <span id="weekDay" class="weekDay"></span>, 
                    <span id="day" class="day"></span> de
                    <span id="month" class="month"></span> del
                    <span id="year" class="year"></span>
                </div>
                <div style="position: relative; left: 10px;" class="clock pt-1">
                    <span class="hours h2">Hora: </span>
                    <span id="hours" class="hours h2"></span> :
                    <span id="minutes" class="minutes h2"></span> :
                    <span id="seconds" class="seconds h2"></span>
                </div>
            </div>
            
        
        </div>
        <h3> <span id=""><?php /* echo $nta[1]["CLAVE"] */?> NV003232</span></h3>
        <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
      </div>
      
      <div class="modal-body">
        <form action="" method="post" id="formulario_crear_producto">
          <div class="row">
            
            <div class="col-sm-12 col-lg-12 d-flex align-items-center">
              <div class="card-footer p-1">
                <div class="sizet-modal input-group input-group-outline-gd">
                    <!-- <label class="form-label">Producto</label> -->
                    <input type="text" class="form-control" style="font-size: 30px !important;" id="Producto" placeholder="Producto">
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-6 d-flex align-items-center">
              <div class="card-footer p-1">
                <div class="input-group input-group-outline-gd">
                    <!-- <label class="form-label">Precio</label> -->
                    <input type="text" class="form-control" style="font-size: 30px !important;" id="Precio" placeholder="Precio">
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-6 d-flex align-items-center">
              <div class="card-footer p-1">
                <div class="input-group input-group-outline-gd">
                    <!-- <label class="form-label">Cantidad</label> -->
                    <input type="text" class="form-control" style="font-size: 30px !important;" id="quantity" placeholder="Cantidad">
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-lg-12 d-flex align-items-center mt-2">
              <div class="card-footer p-1">
                <div class="sizet-modal coment-space input-group input-group-outline-gd">
                    <!-- <label class="form-label">Comentario</label> -->
                    <!-- <input type="text" class="form-control" style="font-size: 30px !important;" id="Comentario" placeholder="Comentario"> -->
                     <textarea class="form-control" style="font-size: 30px !important;" id="Comentario" placeholder="Comentario" name="" id=""></textarea>
                </div>
              </div>
            </div>
            <table class="table">
                  <thead></thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="input-group input-group-outline mt-4" id="tiempo" >
                            <div class="form-check form-check-inline text-center">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="T1" checked>
                                <label class="form-check-label" style="font-size: 30px !important;" for="inlineRadio1">T1</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="T2">
                                <label class="form-check-label" style="font-size: 30px !important;" for="inlineRadio1">T2</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="T3">
                                <label class="form-check-label" style="font-size: 30px !important;" for="inlineRadio1">T3</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="Entrada">
                                <label class="form-check-label" style="font-size: 30px !important;" for="inlineRadio1">Entrada</label>
                            </div>
                            
                          </div>
                        </td>
                      </tr>
                    </tbody>
                </table>
          </form>
        </div>
        <div class="row">
          <div class="col-6 d-flex align-items-center">
            <div id="materias_primas_x_producto"></div>
          </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 text-white h5" id="btn_crear_elementos_renglon">Agregar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Eliminar Renglon -->
<div class="modal fade" id="modalAlert" tabindex="-1" aria-labelledby="modalAlert" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #ECC950">
          <div class="col-12 d-flex align-items-center justify-content-center">
              <img src="../assets/img/icons/alert-circle.png" alt="" width="250px">
          </div>
        
      </div>
      <div class="modal-body">
      
        <div class="row ">
          <div class="col-12 d-flex align-items-center justify-content-center">
            <h3>ELIMINANDO PRODUCTO</h3>
             
          </div>
          <div class="col-12 d-flex align-items-center justify-content-center">
            <h6 class="mb-0">Estas por eliminar el producto</h6> 
          </div>
        </div>
      </div>
      <div class="modal-footer align-items-center justify-content-center">
        <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> -->
        <button type="button" class="btn btn-primary text-white h4" id="eliminar_renglon">Eliminar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal SUCCESS -->
<div class="modal fade" id="modalSuccess" tabindex="-1" aria-labelledby="modalSuccess" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
      
        <div class="row">
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
              <img src="../assets/img/icons/success.png" alt="" width="250px">
          </div>
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
              <h1>REALIZADO</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal ELIMINADO -->
<div class="modal fade" id="modalDeleted" tabindex="-1" aria-labelledby="modalDeleted" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered">
    <div class="modal-content">
      
      <div class="modal-body">
        <div class="row">
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
              <img src="../assets/img/icons/close-circle.png" alt="" width="250px">
          </div>
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
              <h1>ELIMINADO</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal CARGANDO -->
<div class="modal fade" id="modalLoading" tabindex="-1" aria-labelledby="modalLoading" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered">
    <div class="modal-content">
      
      <div class="modal-body">
        <div class="row">
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
              <img src="../assets/img/icons/refresh-circle.png" alt="" width="250px">
          </div>
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
              <h1>Cargando datos...</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- Modal Comanda -->
<div class="modal fade" id="modalComanda" tabindex="-1" aria-labelledby="modalComanda" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg ">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #ECC950">
          <div class="row" >
            <!-- <div id="content" class="col-12">  
                <div class="date" style="display: none;">
                    <span id="weekDay" class="weekDay"></span>, 
                    <span id="day" class="day"></span> de
                    <span id="month" class="month"></span> del
                    <span id="year" class="year"></span>
                </div>
                <div style="position: relative; left: 10px;" class="clock pt-1">
                    <span class="hours h2">Hora: </span>
                    <span id="hours" class="hours h2"></span> :
                    <span id="minutes" class="minutes h2"></span> :
                    <span id="seconds" class="seconds h2"></span>
                </div>
            </div> -->
        </div>
        <h3>No. nota: <span id="">NTV00303</span></h3>
        
      </div>
      <div class="modal-body">
      
        <div class="row">
          <div class="col-6 justify-content-center" style="padding-left: 150px;">
            <h5>Fecha: 2024-06-02</h5>
             
          </div>
          <div class="col-6 justify-content-center" >
            <h5 class="mb-0">Nota: NV000353</h5> 
          </div>
        </div>
        <div class="row ">
          <div class="col-6 justify-content-center" style="padding-left: 150px;">
            <h5>Tipo de Venta:</h5>
             
          </div>
          <div class="col-6 justify-content-center">
            <h5 class="mb-0">Venta en Piso</h5> 
          </div>
        </div>
        <div class="row ">
          <div class="col-6 justify-content-center" style="padding-left: 150px;">
            <h5>Comensal: </h5>
             
          </div>
          <div class="col-6 justify-content-center">
            <h5 class="mb-0">Sudadera roja</h5> 
          </div>
        </div>
        <div class="row ">
          <div class="col-6 justify-content-center" style="padding-left: 150px;">
            <h5>Mesero:  </h5>
             
          </div>
          <div class="col-6 justify-content-center">
            <h5 class="mb-0">CRISTINA</h5> 
          </div>
          <div class="col-6 mt-4" style="padding-left: 250px;">
            <h2>MESA: </h2>
             
          </div>
          <div class="col-6 mt-4 justify-content-center"  style="padding-left: 40px;">
            <h2 class="mb-0">13</h2> 
          </div>
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
            <h2 class="mb-0 text-center">PECHUGAS DE POLLO ENVUELTAS EN TOCINO CON ENSALADA CALIENTE DE LENTEJAS</h6> 
          </div>
          <div class="col-6 mt-4  justify-content-center" style="padding-left: 150px;">
            <h4 class="mb-0">Cant: 6</h4> 
          </div>
          <div class="col-6 mt-4 justify-content-center">
            <h4 class="mb-0">Tiempo: T2</h4> 
          </div>
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
            <h4 class="mb-0">COMENTARIOS ACERCA DEL PEDIDO....(...)</h4> 
          </div>
        </div>
      </div>
      <div class="modal-footer align-items-center justify-content-center">
        <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> -->
        <button type="button" class="btn btn-primary text-white h4" id="terminar">Terminar</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>
<script src="../assets/js/funciones.js"></script>

<script src="../assets/js/clock.js"></script>
<script>
    $(document).ready(function () {
       //**** MODAL */
       $('#btn_agregar').on('click', function(){
          $('#modalProducto').modal("show");
      });
      $('#btn_Eliminar').on('click', function(){
          //$('#modalProducto').modal("show");
          $('#modalAlert').modal("show");
      });
      $('#btn_Exitoso').on('click', function(){
          //$('#modalProducto').modal("show");
          $('#modalSuccess').modal("show");
      });
      $('#btn_eliminado').on('click', function(){
          //$('#modalProducto').modal("show");
          $('#modalDeleted').modal("show");
      });
      $('#btn_Cargando').on('click', function(){
          //$('#modalProducto').modal("show");
          $('#modalLoading').modal("show");
      });
      $('#btn_comanda').on('click', function(){
          //$('#modalProducto').modal("show");
          $('#modalComanda').modal("show");
      });
    });
</script>