@extends('layouts.default')
@section('content')
<style>
    .card-hover{
        background-color: transparent;
    }
    .card-hover:hover {
        background-color: #bebebe;
    }
</style>

<!-- Modal Clientes -->
<div class="modal fade" id="selCliente" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="selClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selClienteLabel">Seleccione un Cliente</h5>
            <div style="width:50%">
                <div class="input-group">
                    <input type="text" class="form-control" id="searchCliente" placeholder="Escribe el nombre o clave del cliente" autocomplete="off" />
                    <button class="btn btn-sm btn-success" type="button" id="btnNewCliente">
                        <i class="mdi mdi-account-plus" style="font-size:1.8em"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <div class="table-responsive" style="height:400px;overflow:auto">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Clave</th>
                            <th>Nombre</th>
                            <th>RFC</th>
                            <th>Telefono</th>
                        </tr>
                    </thead>
                    <tbody id="bodyClientes"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selClienteClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Crear Nuevo Cliente -->
<div class="modal fade" id="modalNewCliente" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalNewClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalNewClienteLabel">Nuevo Cliente</h5>    
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">  
                        <span class="x-label">Nombre o Razón Social:</span>
                        <div class="input-group">
                            <input type="text" style="display:none" id="factIdCliente">
                            <input type="text" style="display:none" id="factIdPersona">
                            <input type="text" style="display:none" id="factIdDireccion">
                            <!-- <input type="text" style="display:none" id="factTipoCliente"> -->
                            <input type="text" class="form-control x-form-control-sm text-uppercase" style="padding:5px !important" id="factNombre" autocomplete="off" />
                        </div>   
                    </div>
                    <div class="col-2">
                        <div class="form-group">
                            Tipo Cliente*<br/>
                            <select class="x-form-control" id="facttipoclientesat">
                                <option value="FISICA">PERSONA FISICA</option>
                                <option value="MORAL">PERSONA MORAL</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">RFC:</span>
                            <input type="text" maxlength="13" class="x-form-control text-uppercase" id="factRfc" autocomplete="off" />
                        </div>
                    </div>                  
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">CURP:</span>
                            <input type="text" maxlength="18" class="x-form-control text-uppercase" id="factCurp" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            CLAVE LECTOR:*<br/>
                            <input type="text" maxlength="18" class="x-form-control text-uppercase" id="factclavelector" placeholder="" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Telefono:</span>
                            <input type="number" maxlength="10" class="x-form-control" id="factTelefono" autocomplete="off"  />
                        </div>
                    </div>  
                    <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">                      
                        <div class="form-group">
                            <span class="x-label">Email:</span>
                            <input type="text" class="x-form-control" id="factEmail" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">  
                        <div class="form-group">
                            <span class="x-label">Régimen Fiscal:</span>
                            <select class="x-form-control" id="factRegimen"></select>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">  
                        <div class="form-group">
                            <span class="x-label">Uso de CFDI:</span>
                            <select class="x-form-control" id="factCfdi"></select>
                        </div>
                    </div>
                    <div class="col-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                        <div class="form-group">
                            <span class="x-label">Calle:</span>
                            <input type="text" class="x-form-control" id="factCalle" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    # Ext:<br/>
                                    <input type="text" class="x-form-control" id="factNumExterior" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    # Int:<br/>
                                    <input type="text" class="x-form-control" id="factNumInterior" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <span class="x-label">C.P:</span>
                                    <input type="number" maxlength="5" class="x-form-control" id="factCodigopostal" autocomplete="off"  />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Colonia:</span>
                            <input type="text" class="x-form-control" id="factColonia" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Pais:</span>
                            <select class="x-form-control" id="factPais" onchange="getEstados()">

                            </select>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Estado:</span>
                            <select class="x-form-control" id="factEstado" onchange="getMunicipios()">

                            </select>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Municipio:</span>
                            <select class="x-form-control" id="factMunicipio">

                            </select>
                        </div>
                    </div>
                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Tipo de cliente:</span>
                            <select class="x-form-control" id="factTipoCliente">

                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            Sucursal:*<br/>
                            <select class="x-form-control" id="sucursal">

                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="modalNewClienteClose" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-success" id="modalNewClienteCrear" onclick="agregarCliente()">Crear</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Vendedores -->
<div class="modal fade" id="selVendedor" tabindex="-1" role="dialog" aria-labelledby="selVendedorLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-body">
            <div class="d-flex justify-content-center">
                <input type="text" class="form-control" id="codigoVendedor" style="width:90%; font-size:1.5em; text-align:center" placeholder="Codigo de vendedor" autocomplete="off" />
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(1)">1</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(2)">2</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(3)">3</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(4)">4</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(5)">5</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(6)">6</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(7)">7</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(8)">8</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(9)">9</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-danger" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="delInput()"><i class="mdi mdi-backspace" style="font-size:1.5em"></i></button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(0)">0</button>
                <button class="btn btn-success" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="saveInput()"><i class="mdi mdi-check" style="font-size:1.5em"></i></button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selVendedorClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Agregar Alimentos -->
<div class="modal fade" id="modalAddAlimentos" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="selClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="selClienteLabel">Seleccione un Alimento</h5>
                <div style="width:50%">
                    <div class="input-group">
                        <input type="text" class="form-control" id="searchAlimentos" placeholder="Escribe el nombre del platillo" autocomplete="off" onkeyup="listaAlimentos()" />
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6 col-xl-6" id="listaAlimentos">

                    </div>
                    <div class="col-lg-6 col-xl-6">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Descripcion</th>
                                        <th>Cantidad</th>
                                        <th>Importe</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="listaorden"></tbody>
                            </table>
                        </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-success" onclick="enviarOrden()" style="display:none" id="btnEnviarOrden">Enviar Orden</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<div class="modal fade" id="modalEnganche" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalEngancheLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Datos de la Cuenta por Cobrar</h5>
            </div>
            <div class="modal-body">
                <div  style="border: #DDD 1px solid; background-color: #fefefe; padding:10px">
                    <div class="row">
                        <div class="col-6">
                            <label>Plazo:</label>
                            <select class="x-form-control" id="modalidadpago"></select>
                        </div>
                        <div class="col-6">
                            <label>Forma de Pago:</label>
                            <select class="x-form-control" onchange="showInfoPPD()" id="eformapago"></select>
                        </div>
                    </div>
                    <hr/>
                    <div class="row">
                        <div class="col-4">
                            <b>Total:</b><br/>
                            <div id="infoTotal">0.00</div>
                        </div>
                        <div class="col-4">
                            <b>Num. de Pagos:</b><br/>
                            <div id="infonumpagos">0</div>
                        </div>
                        <div class="col-4">
                            <b>Monto de Pago:</b><br/>
                            <div id="infomontopago">0.00</div>
                        </div>
                    </div>
                    <hr/>                 
                    <div style="padding-top:2px; font-size: .9em; text-align: center">
                            <button type="button" class="btn btn-success" onclick="qCobroCXC()">
                                ACEPTAR
                            </button>
                            <button type="button" class="btn btn-danger" onclick="cancelCXC()">
                                CANCELAR
                            </button>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</div>
<!-- Modal Cobrar Cuenta -->
<div class="modal fade" id="modalVerMesa" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="selClienteLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 80%">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="selClienteLabel">Detalle de la Mesa</h5>
                <div style="width:50%;text-align:right;font-size:20px;font-weight:bold">$ <span id="totalMesa">0.00</span></div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Descripcion</th>
                                        <th>Cantidad</th>
                                        <th>Importe</th>
                                    </tr>
                                </thead>
                                <tbody id="cuentaMesa"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <span class="x-label">Vendedor:</span>
                                    <input type="text" class="x-form-control" id="vendedor" placeholder="Seleccione..." readonly autocomplete="off" />
                                    <input type="text" style="display:none" id="vendedorHidden">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <span class="x-label">Asignar Cliente:</span>
                                    <input type="text" class="x-form-control" id="cliente" placeholder="Seleccione..." readonly autocomplete="off" />
                                    <input type="text" style="display:none" id="clienteHidden">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <span class="x-label">Asignar a Habitación:</span>
                                    <select class="x-form-control" id="mesa_habitacion" onchange="asignaHabitacion()"></select>
                                </div>
                            </div>
                            <div class="col-12">
                                <hr/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="button" class="btn btn-warning btn-icon-text" onclick="mesaRemisionarCredito()">
                                    <i class="ti-ticket btn-icon-prepend"></i>
                                    Remisionar a Credito
                                </button>
                                <button type="button" class="btn btn-success btn-icon-text" onclick="mesaRemisionar()">
                                    <i class="ti-ticket btn-icon-prepend"></i>
                                    Remisionar
                                </button>
                                <button type="button" class="btn btn-primary btn-icon-text" onclick="mesaRemisionarCortesia()">
                                    <i class="ti-ticket btn-icon-prepend"></i>
                                    Remisionar Cortesía
                                </button>
                                <button type="button" class="btn btn-warning btn-icon-text" style="display:none" id="btnImprimirCuenta" onclick="mesaImprimir()">
                                    <i class="ti-printer btn-icon-prepend"></i>
                                    Imprimir Cuenta
                                </button>
                                <button type="button" class="btn btn-danger btn-icon-text" style="display:none" id="btnLiberarMesa" onclick="mesaLiberar()">
                                    <i class="ti-close btn-icon-prepend"></i>
                                    Liberar
                                </button>
                            </div>    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Cobrar Cuenta -->
<div class="modal fade" id="modalAdd" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="selClienteLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <div class="d-flex justify-content-center">
                            <input type="text" class="form-control" id="addcantidad" style="width:90%; font-size:1.5em; text-align:center" placeholder="Cantidad" autocomplete="off" />
                        </div>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(1)">1</button>
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(2)">2</button>
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(3)">3</button>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(4)">4</button>
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(5)">5</button>
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(6)">6</button>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(7)">7</button>
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(8)">8</button>
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addAddInput(9)">9</button>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-danger" style="width:30%;float:left;font-size:1.5em; margin:2px;padding:0px" onclick="addDelInput()"><i class="mdi mdi-backspace" style="font-size:1.5em"></i></button>
                            <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(0)">0</button>
                            <button class="btn btn-success" style="width:30%;float:left;font-size:1.5em; margin:2px;padding:0px" onclick="addSaveInput()"><i class="mdi mdi-check" style="font-size:1.5em"></i></button>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-12" style="padding:10px; font-size:16px;font-weight:bold; text-align:right; background-color:#f7f7f7" id="adddescripcion">

                            </div>
                            <div class="col-12" style="padding:10px; font-size:16px;font-weight:bold; text-align:right; background-color:#ffffff">
                                $ <span id="addprecio"></span>
                            </div>
                            <div class="col-12">
                                <hr/>
                                <div class="form-group">
                                    <label>Sugerencia:</label>
                                    <textarea class="form-control" id="addsugerencia"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">  
                <div class="row">
                    <div class="col-6">
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Sucursal</label>
                                    <select class="form-select form-select-sm" id="sucursal" onchange="getZonas('zona','sucursal')"></select>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Zona</label>
                                    <select class="form-select form-select-sm" id="zona" onchange="getMesas()"></select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">

                    </div>
                </div>
                <div class="row">                    
                    <div class="col-12"><hr/></div>
                </div>
                <div class="row" id="habitaciones">
                </div>
            </div>
        </div>
    </div>
</div>
<!--  -->
@stop
@section('jspage')
  <script src="jsprod/misc.js"></script>
    <script src="jsprod/restaurante_orden.js"></script>
@stop