@extends('layouts.default')
@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body" style="padding:10px" id="tabsCatalogosRestaurante">                              
                
            </div>                 
        </div>
    </div>
</div>

<div id="mesas" 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-10">                                  
                            <form id="res_mesa-form">                
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        Número:*<br/>
                                        <input type="hidden" class="x-form-control" id="res_mesa-id" name="res_mesa-id"/>
                                        <input type="text" class="x-form-control text-uppercase" id="res_mesa-numero" name="res_mesa-numero" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        Personas:*<br/>
                                        <input type="text" class="x-form-control text-uppercase" id="res_mesa-personas" name="res_mesa-personas" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                        Sucursal:*<br/>
                                        <select class="x-form-control" id="res_mesa-id_tpv_almacen" onchange="getZonas('res_mesa-id_res_zona','res_mesa-id_tpv_almacen')"></select>
                                </div>
                                <div class="col-md-3">
                                        Zona:*<br/>
                                        <select class="x-form-control" id="res_mesa-id_res_zona" name="res_mesa-id_res_zona"></select>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        Descripcion:<br/>
                                        <input type="text" class="x-form-control text-uppercase" id="res_mesa-descripcion" name="res_mesa-descripcion" autocomplete="off" />
                                    </div>
                                </div>
                            </div>
                            </form>
                        </div>
                        <div class="col-md-2">
                            <div class="row">
                                <div class="col-md-12 align-right">
                                    <button type="button" class="btn btn-success btn-icon-text" onclick="guardar('res_mesa')" style="margin:8px;">
                                        <span id="res_mesa-btnAgregar">Guardar</span>  
                                        <span id="res_mesa-btnActualizar" style="display:none">Actualizar</span>                                           
                                    </button>    
                                    <button type="button" class="btn btn-secondary btn-icon-text" onclick="limpiar('res_mesa')" 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>Número</th>
                                        <th>Descripcion</th>
                                        <th>Personas</th>
                                        <th>Sucursal</th>
                                        <th>Zona</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="res_mesa-tabla">
                                    
                                </tbody>
                            </table>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>

<div id="zonas" 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_zona-form">                
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        Zona:*<br/>
                                        <input type="hidden" class="x-form-control" id="res_zona-id" name="res_zona-id"/>
                                        <input type="text" class="x-form-control text-uppercase" id="res_zona-descripcion" name="res_zona-descripcion" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                        Sucursal:*<br/>
                                        <select class="x-form-control" id="res_zona-id_tpv_almacen" name="res_zona-id_tpv_almacen"></select>
                                </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_zona')" style="margin:8px;">
                                        <span id="res_zona-btnAgregar">Guardar</span>  
                                        <span id="res_zona-btnActualizar" style="display:none">Actualizar</span>                                           
                                    </button>    
                                    <button type="button" class="btn btn-secondary btn-icon-text" onclick="limpiar('res_zona')" 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>Zona</th>
                                        <th>Sucursal</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="res_zona-tabla">
                                    
                                </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_catalogo.js"></script>
@stop