@extends('layouts.default')
@section('content')
<!-- Modal Accion Factura -->
<div class="modal fade" id="detallePlatillo" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detallePlatilloLabel">Articulos Incluidos</h5>
            </div>
            <div class="modal-body">  
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body" style="padding:10px">
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label>Artículo:</label>
                                            <select class="form-select" id="addarticulo" onchange="getArticulo()"></select>
                                            <input type="hidden" id="addid" />
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label>Unidad:</label>
                                            <select class="form-select" id="addunidad" disabled></select>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label>Cantidad:</label>
                                            <input type="number" class="x-form-control" id="addcantidad" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <a href="javascript:agregaArticulo()" class="btn btn-success">Agregar</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12"><hr/></div>
                                </div>
                                <div class="row" id="platillo_articulos">
                                    <div class="table-responsive pt-3">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Descripción</th>
                                                    <th>Unidad</th>
                                                    <th>Cantidad</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="listaArticulos">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="detallePlatilloClose" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body" style="padding:10px" id="tabsCocinaRestaurante">                              
                
            </div>                 
        </div>
    </div>
</div>

<div id="platillos" class="contetTab">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body" style="padding:10px">
                    <div class="row"> 
                        <div class="col-md-9">                                  
                            <form id="res_platillo-form">                
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        Sucursal:*<br/>
                                        <input type="hidden" class="x-form-control" id="res_platillo-id" name="res_platillo-id"/>
                                        <select class="x-form-control" id="res_platillo-id_tpv_almacen" name="res_platillo-id_tpv_almacen"></select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        Codigo:*<br/>
                                        <input type="text" class="x-form-control text-uppercase" id="res_platillo-codigo" name="res_platillo-codigo" autocomplete="off" readonly="readonly" />
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                        Descripción:*<br/>
                                        <input type="text" class="x-form-control text-uppercase" id="res_platillo-descripcion" name="res_platillo-descripcion" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        Tipo de Menú:*<br/>
                                        <select class="x-form-control" id="res_platillo-id_res_tipomenu" name="res_platillo-id_res_tipomenu"></select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                        Precio Porción:*<br/>
                                        <input type="number" class="x-form-control" id="res_platillo-precio" name="res_platillo-precio" autocomplete="off" />
                                </div>
                                <div class="col-md-3">
                                        Porciones:*<br/>
                                        <input type="number" class="x-form-control" id="res_platillo-porciones" name="res_platillo-porciones" autocomplete="off" />
                                </div>
                            </div>                            
                            </form>
                        </div>
                        <div class="col-md-3">
                            <div class="row">
                                <div class="col-md-12 align-right">
                                    <button type="button" class="btn btn-success btn-icon-text" onclick="guardar('res_platillo')" style="margin:8px;">
                                        <span id="res_platillo-btnAgregar">Guardar</span>  
                                        <span id="res_platillo-btnActualizar" style="display:none">Actualizar</span>                                           
                                    </button>    
                                    <button type="button" class="btn btn-secondary btn-icon-text" onclick="limpiar('res_platillo')" style="margin:8px;">
                                        Limpiar                                                                          
                                    </button>  
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Sucursal</th>
                                        <th>Codigo</th>
                                        <th>Menú</th>
                                        <th>Descripcion</th>
                                        <th>Precio</th>
                                        <th>Porciones</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="res_platillo-tabla">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>

<div id="cocina_inventario" class="contetTab">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body" style="padding:10px">
                    <div class="row"> 
                        <div class="col-md-8">                      
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        Sucursal:*<br/>
                                        <select class="x-form-control" id="inv_sucursal" onchange="getListaInventario()"></select>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <span class="x-label">Platillo/Bebida*:</span>
                                    <div class="input-group">
                                        <select class="x-form-control" id="inv_platillo"></select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                        Cantidad:*<br/>
                                        <input type="number" class="x-form-control" id="inv_cantidad" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-md-12 align-right">
                                    <button type="button" class="btn btn-success btn-icon-text" onclick="updateInventario(1)" style="margin:8px;">
                                        Agregar                                        
                                    </button>    
                                    <button type="button" class="btn btn-danger btn-icon-text" onclick="updateInventario(2)" style="margin:8px;">
                                        Quitar                                        
                                    </button>    
                                    <button type="button" class="btn btn-secondary btn-icon-text" onclick="limpiarInventario()" style="margin:8px;">
                                        Limpiar                                                                          
                                    </button>  
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Sucursal</th>
                                        <th>Codigo</th>
                                        <th>Platillo/Bebida</th>
                                        <th>Existencia</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="listaExistencia">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.nav-link.active{
    background: #90caf9 !important
}
#bordesTable{
    border: 1px solid #000000;
    text-align: center;
}
</style>

@stop
@section('jspage')
    <script src="jsprod/restaurante_cocina.js"></script>
@stop