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

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body" style="padding:10px">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="percepciones-tab" data-bs-toggle="tab" data-bs-target="#percepciones" type="button" role="tab" aria-controls="percepciones" aria-selected="true">
                            Clientes
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="deducciones-tab" data-bs-toggle="tab" data-bs-target="#deducciones" type="button" role="tab" aria-controls="deducciones" aria-selected="false">
                            Selects
                        </button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent" style="padding:1em; border: #DDD 1px solid !important">
                    <div class="tab-pane fade show active" id="percepciones" role="tabpanel" aria-labelledby="percepciones-tab">
                        <div class="row">
                            <div class="col-12 col-md-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                                        <div class="p-1">
                                            <i class="icon-edit"></i> <span>Cliente nuevo</span>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding:10px">
                                        <form id="miForm">                   
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        Nombre o razón social:*<br/>
                                                        <input type="text" class="x-form-control" id="idCliente" style="display:none"/>
                                                        <input type="text" class="x-form-control" id="idPersona" style="display:none"/>
                                                        <input type="text" class="x-form-control" id="idDireccion" style="display:none"/>
                                                        <input type="text" class="x-form-control" id="nombre" placeholder="" autocomplete="off" />
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <span class="x-label">RFC:</span>
                                                        <input type="text" maxlength="13" class="x-form-control text-uppercase" id="rfc" placeholder="XAXX010101000" autocomplete="off" />
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <span class="x-label">CURP:</span>
                                                        <input type="text" maxlength="18" class="x-form-control text-uppercase" id="curp" placeholder="" autocomplete="off" />
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <span class="x-label">Telefono:</span>
                                                        <input type="number" maxlength="10" class="x-form-control" id="telefono" placeholder="" autocomplete="off"  />
                                                    </div>
                                                </div>
                                                <div class="col-md-2">                        
                                                    <div class="form-group">
                                                        <span class="x-label">Email:</span>
                                                        <input type="text" class="x-form-control" id="email" autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        Tipo de cliente:*<br/>
                                                        <select class="x-form-control" id="tipocliente">

                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        Uso de CFDI:*<br/>
                                                        <select class="x-form-control" id="usocfdi">

                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        Regimen Fiscal:*<br/>
                                                        <select class="x-form-control" id="regimenfiscal">

                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">                        
                                                    <div class="form-group">
                                                        <span class="x-label">Calle:</span>
                                                        <input type="text" class="x-form-control" id="calle" autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-1">                        
                                                    <div class="form-group">
                                                        # Exterior:*<br/>
                                                        <input type="text" class="x-form-control" id="numExterior" autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-1">                        
                                                    <div class="form-group">
                                                        # Interior:*<br/>
                                                        <input type="text" class="x-form-control" id="numInterior" autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="form-group">
                                                        <span class="x-label">C.P:</span>
                                                        <input type="number" maxlength="5" class="x-form-control" id="codigopostal" placeholder="" autocomplete="off"  />
                                                    </div>
                                                </div>
                                                <div class="col-md-2">                        
                                                    <div class="form-group">
                                                        <span class="x-label">Colonia:</span>
                                                        <input type="text" class="x-form-control" id="colonia" autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">                        
                                                    <div class="form-group">
                                                        <span class="x-label">Pais:</span>
                                                        <select class="x-form-control" id="pais" onchange="getEstados()">

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

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

                                                        </select>
                                                    </div>
                                                </div>
                                                <!--<div class="col-md-2">                        
                                                    <div class="form-group">
                                                        <span class="x-label">Ciudad:</span>
                                                        <input type="text" class="x-form-control" id="ciuydad" autocomplete="off"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <span class="x-label">Observaciones:</span>
                                                        <input type="text" class="x-form-control" id="observaciones" autocomplete="off" readonly></textarea>
                                                    </div>
                                                </div>-->
                                                <div class="col-3">
                                                    <button type="button" class="btn btn-success btn-icon-text" onclick="agregarCliente()" style="margin:8px;">
                                                    <span id="buttonAgregar">Agregar</span>  
                                                    <span id="buttonActualizar" style="display:none">Actualizar</span>                                           
                                                    </button>    
                                                    <button type="button" class="btn btn-secondary btn-icon-text" onclick="limpiarInputs()" style="margin:8px;">
                                                    Limpiar                                                                          
                                                    </button>  
                                                </div>
                                            </div>
                                        </form>
                                        <hr>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <span class="x-label">Buscar cliente:</span>
                                                <input type="text" class="form-control" id="searchCliente" placeholder="Ingresa la clave o el nombre del cliente" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="row" style="height:520px; overflow:auto">
                                            <table class="table table-striped mx-2">
                                                <thead>
                                                    <tr>
                                                        <th>Nombre</th>
                                                        <th>RFC</th>
                                                        <th>CURP</th>
                                                        <th>Telefono</th>
                                                        <th>Uso de CFDI</th>
                                                        <th>Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tableClientes">
                                                    
                                                </tbody>
                                            </table>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--OTRA PRSTAÑA
                    ////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="deducciones" role="tabpanel" aria-labelledby="deducciones-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                                        <div class="p-1">
                                            <i class="icon-edit"></i> <span>Selects</span>
                                        </div>
                                        
                                        <div class="col-1">
                                            <button type="button" class="btn btn-secondary btn-icon" onclick="limpiarinputs()"><i class="mdi mdi-file-outline"></i></button>
                                            <button type="button" class="btn btn-success btn-icon" onclick="guardarConsulta()"><i class="mdi mdi-content-save"></i></button>
                                        </div>	
                                    </div>
                                    <!-- /widget-header -->
                                    <div class="card-body" style="padding:10px">
                                    <form id="miFormConsulta">
                                        <div class="col-6 col-lg-1" style="display:none">
                                            Id<br/>
                                            <input type="text" value="0" id="cId" class="form-control" />
                                        </div>
                                        <div class="row">
                                            <div class="col-8 col-lg-5">
                                                Pregunta*<br/>
                                                <input type="text" id="cpregunta" class="form-control" />
                                            </div>
                                            <div class="col-6 col-lg-3">
                                                Evento*<br/>
                                                <select id="selectEvento" class="form-control"></select>
                                            </div>
                                            <div class="col-6 col-lg-2">
                                                Fecha*<br/>
                                                <input type="text" id="cfecha" class="form-control" placeholder="dd/mm/aaaa"  autocomplete="off"/>
                                            </div>
                                            <div class="col-6 col-lg-2">
                                                Hora*<br/>
                                                <input type="time" class="form-control" id="chora">
                                            </div>
                                        </div>
                                        <br>
                                        <div class="row">
                                            <div class="col-10">
                                                <div class="row">
                                                    <div class="col-6 col-lg-3">
                                                        Fecha inicio*<br/>
                                                        <input type="text" id="cfechainicio" class="form-control" placeholder="dd/mm/aaaa"  autocomplete="off"/>
                                                    </div>
                                                    <div class="col-6 col-lg-3">
                                                        Hora inicio*<br/>
                                                        <input type="time" class="form-control" id="chorainicio">
                                                    </div>
                                                    <div class="col-6 col-lg-3">
                                                        Fecha final*<br/>
                                                        <input type="text" id="cfechafinal" class="form-control" placeholder="dd/mm/aaaa"  autocomplete="off"/>
                                                    </div>
                                                    <div class="col-6 col-lg-3">
                                                        Hora final*<br/>
                                                        <input type="time" class="form-control" id="chorafinal">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6 col-lg-2">
                                                Trabajadores<br/>
                                                <select id="selectModal" class="form-control" onchange="showModal()">
                                                    <option value="0">Todos</option>
                                                    <option value="1">Personalizado</option>
                                                </select>
                                            </div>
                                        </div>
                                    </form>	
                                                                                            
                                    </div>
                                </div>
                                <!-- /widget -->
                            </div>
                            <!-- /span12 -->
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <div class="card">
                                    <div class="card-header" style="font-size:1.2em; font-weight:bold"> 
                                        <i class="icon-sitemap"></i> <span>Consultas</span>
                                    </div>
                                    <!-- /widget-header -->
                                    <div class="card-body" style="padding:10px">						
                                        <div class="table-responsive pt-3" style="max-height:500px">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th width="10px"><input type="checkbox" id="chkall" name="chkall"></th>
                                                        <th> Pregunta </th>
                                                        <th> Evento</th>
                                                        <th> Fecha</th>
                                                        <th> Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tbodyConsultas">
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>                    
                            </div>
                            <!-- <div class="col-12 col-lg-4">
                                <div class="card">
                                    <div class="card-header" style="font-size:1.2em; font-weight:bold"> 
                                        <i class="icon-suitcase"></i> <span>Zonas</span>
                                    </div>
                                    <div class="card-body" style="padding:10px">
                                                        
                                        <div class="row">
                    
                                        </div>
                                        <hr/>

                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <div class="tab-pane fade" id="avisos" role="tabpanel" aria-labelledby="avisos-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row;"> 
                                        <div class="p-1">
                                            <i class="icon-edit"></i> <span>Nuevo Aviso</span>
                                        </div>
                                        <div class="col-1">
                                            <button type="button" class="btn btn-secondary btn-icon" onclick="limpiarinputs()"><i class="mdi mdi-file-outline"></i></button>
                                            <button type="button" class="btn btn-success btn-icon" onclick="guardarAviso()"><i class="mdi mdi-content-save"></i></button>
                                        </div>
                                    </div>
                                    
                                    <!-- /widget-header -->
                                    <div class="card-body" style="padding:10px">
                                        <form id="miFormAviso">
                                            <div class="col-6 col-lg-1" style="display:none">
                                                Id<br/>
                                                <input type="text" value="0" id="aId" class="form-control" />
                                            </div>
                                            <div class="row">
                                                <div class="col-8 col-lg-2">
                                                    Titulo*<br/>
                                                    <input type="text" id="atitulo" class="form-control" />
                                                </div>
                                                <div class="col-6 col-lg-8">
                                                    Mensaje*<br/>
                                                    <input type="text" id="amensaje" class="form-control"/>
                                                </div>
                                                <div class="col-6 col-lg-2">
                                                    Trabajadores<br/>
                                                    <select id="selectUniverso" class="form-control" onchange="showModalUniverso()">
                                                        <option value="0">Todos</option>
                                                        <option value="1">Personalizado</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>		
                                                                                            
                                    </div>
                                </div>
                                <!-- /widget -->
                            </div>
                            <!-- /span12 -->
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <div class="card">
                                    <div class="card-header" style="font-size:1.2em; font-weight:bold"> 
                                        <i class="icon-sitemap"></i> <span>Avisos</span>
                                    </div>
                                    <!-- /widget-header -->
                                    <div class="card-body" style="padding:10px">						
                                        <div class="table-responsive pt-3" style="max-height:500px">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th width="10px"><input type="checkbox" id="chkall" name="chkall"></th>
                                                        <th> Titulo </th>
                                                        <th> Mensaje</th>
                                                        <th class="text-center"> Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tbodyAvisos">
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>                    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!--<div class="row">
    <div class="col-12 col-md-12">
        <div class="card">
            <div class="card-body">                    
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <span class="x-label">Nombre o razón social:</span>
                            <input type="text" class="x-form-control" id="idCliente" style="display:none"/>
                            <input type="text" class="x-form-control" id="idPersona" style="display:none"/>
                            <input type="text" class="x-form-control" id="nombre" placeholder="" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <span class="x-label">RFC:</span>
                            <input type="text" maxlength="13" class="x-form-control text-uppercase" id="rfc" placeholder="XAXX010101000" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <span class="x-label">CURP:</span>
                            <input type="text" maxlength="18" class="x-form-control text-uppercase" id="curp" placeholder="" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <span class="x-label">Telefono:</span>
                            <input type="number" maxlength="10" class="x-form-control" id="telefono" placeholder="" autocomplete="off"  />
                        </div>
                    </div>
                    <div class="col-md-2">                        
                        <div class="form-group">
                            <span class="x-label">Email:</span>
                            <input type="text" class="x-form-control" id="email" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <span class="x-label">Tipo de cliente:</span>
                            <select class="x-form-control" id="tipocliente">

                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="x-label">Uso de CFDI:</span>
                            <select class="x-form-control" id="usocfdi">

                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="x-label">Regimen Fiscal:</span>
                            <select class="x-form-control" id="regimenfiscal">

                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">                        
                        <div class="form-group">
                            <span class="x-label">Calle:</span>
                            <input type="text" class="x-form-control" id="calle" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-1">                        
                        <div class="form-group">
                            <span class="x-label"># Exterior:</span>
                            <input type="text" class="x-form-control" id="numExterior" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-1">                        
                        <div class="form-group">
                            <span class="x-label"># Interior:</span>
                            <input type="text" class="x-form-control" id="numInterior" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <span class="x-label">C.P:</span>
                            <input type="number" maxlength="5" class="x-form-control" id="codigopostal" placeholder="" autocomplete="off"  />
                        </div>
                    </div>
                    <div class="col-md-2">                        
                        <div class="form-group">
                            <span class="x-label">Colonia:</span>
                            <input type="text" class="x-form-control" id="colonia" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-2">                        
                        <div class="form-group">
                            <span class="x-label">Pais:</span>
                            <select class="x-form-control" id="pais" onchange="getEstados()">

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

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

                            </select>
                        </div>
                    </div>
                    /////////////////////<div class="col-md-2">                        
                        <div class="form-group">
                            <span class="x-label">Ciudad:</span>
                            <input type="text" class="x-form-control" id="ciuydad" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <span class="x-label">Observaciones:</span>
                            <input type="text" class="x-form-control" id="observaciones" autocomplete="off" readonly></textarea>
                        </div>
                    </div>////////////////////////////
                    <div class="col-3">
                        <button type="button" class="btn btn-success btn-icon-text" onclick="agregarCliente()" style="margin:8px;">
                        <span id="buttonAgregar">Agregar</span>  
                        <span id="buttonActualizar" style="display:none">Actualizar</span>                                           
                        </button>    
                        <button type="button" class="btn btn-secondary btn-icon-text" onclick="limpiarInputs()" style="margin:8px;">
                        Limpiar                                                                          
                        </button>  
                    </div>
                </div>
                <hr>
                <div class="col-md-3">
                    <div class="form-group">
                        <span class="x-label">Buscar cliente:</span>
                        <input type="text" class="form-control" id="searchCliente" placeholder="Ingresa la clave o el nombre del cliente" autocomplete="off">
                    </div>
                </div>
                <div class="row" style="height:520px; overflow:auto">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>RFC</th>
                                <th>CURP</th>
                                <th>Telefono</th>
                                <th>Uso de CFDI</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="tableClientes">
                            
                        </tbody>
                    </table>
                </div> 
            </div>
        </div>
    </div>
</div>-->
@stop
@section('jspage')
  <script src="jsprod/clientes.js"></script>
@stop