@extends('layout.authentication')
@section('title', 'Reserva de Hora')
@section('page-style')

<link rel="stylesheet" href="{{asset('assets/plugins/dropzone/dropzone.css')}}">
<link rel="stylesheet" href="{{asset('assets/plugins/bootstrap-select/css/bootstrap-select.css')}}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">



@stop

@section('content')




    <div class="container">

        </br>
        </br>
        </br>
        


    @if($dispositivoacceso == "Ordenador")    
        
        <div class="row clearfix">
            
            <div class="col-md-15 d-flex justify-content-center">
                
                <div class="card">
                    
                    <div class="body">

                        {{ csrf_field() }}

                        
                       <img src="{{$rutalogocorporracion}}"  style="margin-left:75%;width: 20%; height:10%"/>

                        <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                        
                        <big style="color: black;font-size:25px;margin-top:-6%;" class="">@yield('title')</big>
                        </div>

                        <div style="margin-top:-1%;margin-left:-88%;" class="">
                            <button id="btnNuevaCita" name="btnNuevaCita" type="button" name="btnNuevaCita" class="btn btn-primary btn-round" style="background-color:#01d8da;width:7%;" >Nueva Cita</button>
                        </div>

                        <div style="margin-top:-4.3%;margin-left:-60%;" class="">
                            <button id="btnEliminarCita" name="btnEliminarCita" type="button" name="btnEliminarCita" class="btn btn-primary btn-round" style="background-color:#01d8da;width:8%;" >Eliminar Cita</button>
                        </div>

                        </br>
                        </br>
                        </br>            
                        
                        <div id="divnuevacita1" name="divnuevacita1" class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left" style="margin-top:-3%;" style="display:none;">
                           <p id="divnuevacita2" name="divnuevacita2" class="" style="color:#FF0000;display:none;" ><small>* Son campos obligatorios.</small></p>

                            <div id="divnuevacita3" name="divnuevacita3" class="" style="margin-left:-13%;display:none;">
                              <div class="header">
                                  </br>
                                  </br>
                            
                                  <h2><strong>Nueva</strong>-Cita<small ></small></h2>
                                 
                              </div>
                            </div>

                        </div>
                           

                        <div id="divnuevacita4" name="divnuevacita4" class="row clearfix" style="display:none;">

                            <input type="hidden" name="maximomontodescuentohaboculto" id="maximomontodescuentohaboculto" value="">

                            <input type="hidden" name="paciente_cita" id="paciente_cita" value="">

                            <input type="hidden" name="tiposerviciooculto" id="tiposerviciooculto" value="">

                            <input type="hidden" name="emailoculto" id="emailoculto" value="">

                            <input type="hidden" name="celularoculto" id="celularoculto" value="">

                            <input type="hidden" name="nombresoculto" id="nombresoculto" value="">

                            <input type="hidden" name="apellidopaternooculto" id="apellidopaternooculto" value="">

                            <input type="hidden" name="apellidomaternooculto" id="apellidomaternooculto" value="">

                            <div class="col-sm-2">                          
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Empresa *
                                </div>
                            </div>                             
                                        
                            <div class="" style="margin-top:-1%;margin-left:-0.5%;width:34%;">
                                <div class="form-group">
                                    <select id="empresa" name="empresa" required class="selectpicker form-control" data-live-search="true">
                                        <option value="0">Seleccione Empresa</option>
                                           @foreach ($listadoEmpresas as $empresa)                                 
                                              <option value="{{$empresa->rut}}">{{$empresa->nombreempresa}}</option>
                                          @endforeach 
                                    </select>
                                </div>
                            </div> 

                            <div class="col-sm-2">                          
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Especialidad *
                                </div>
                            </div>                    
                                
                            <div class="" style="margin-top:-1%;margin-left:-0.5%;width:33%;">
                                <div class="form-group">
                                    <select id="especialidad" name="especialidad" required class="selectpicker form-control" data-live-search="true" disabled="">
                                        <option value="0">Seleccione Especialidad</option>
                                    </select>
                                </div>
                            </div> 

                            </br>
                            </br>
                            </br>
                            
                            <div class="col-sm-2">                          
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Sub Especialidad *
                                </div>
                            </div>                    
                                
                            <div class="" style="margin-top:-1%;margin-left:-0.5%;width:34%;">
                                <div class="form-group">
                                    <select id="subespecialidad" name="subespecialidad" required class="selectpicker form-control" data-live-search="true" disabled="">
                                        <option value="0">Seleccione Sub Especialidad</option>
                                          
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-2">                          
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Profesional *
                                </div>
                            </div>                    
                                
                            <div class="" style="margin-top:-1%;margin-left:-0.5%;width:33%;">
                                <div class="form-group">
                                    <select id="profesional" name="profesional" required class="selectpicker form-control" data-live-search="true" disabled="">
                                        <option value="0">Seleccione Profesional</option>
                                          
                                    </select>
                                </div>
                            </div>

                            </br>
                            </br>
                            </br>

                            <div class="col-sm-2">                          
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Motivo Consulta *
                                </div>
                            </div>                    
                                
                            <div class="" style="margin-top:-1%;margin-left:-0.5%;width:34%;">
                                <div class="form-group">
                                    <select id="motivoconsulta" name="motivoconsulta" required class="selectpicker form-control" data-live-search="true" disabled="">
                                        <option value="0">Seleccione Motivo Consulta</option>
                                          
                                    </select>
                                </div>
                            </div>

                            </br>
                            </br>
                            </br>

                                 
                            <div class="" style="margin-top:0%;margin-left:1%;width:30%;">
                               
                            </div> 

                            <div id="divdatoshorarioprofesional" class="row clearfix" style="display:none;">

                                <div class="" style="margin-left:7%;">
                                  <div class="header">
                                      <h2><strong>Horario</strong>-Profesional<small ></small></h2>
                                     
                                  </div>
                                </div>

                                <div class="col-sm-8" align="left" style="" >
                                    <div class="" style="margin-top:5%;margin-left:8%;">
                                            Fecha *
                                    </div>

                                </div> 

                                 <div class="col-sm-8" >
                                    <div class="form-group" style="margin-top:-9%;margin-left:48%;width:78%;">

                                         <input type="text" class="datetimepicker form-control" id="fecha_cita" name="fecha_cita"  autocomplete="off" required placeholder="">
                                       
                                    </div>
                                </div> 

                            </div> 

                           
                            <div id="divhorasprofesional" class="col-sm-10" style="display:none;">

                               <div class="" style="margin-top:3%;margin-left:-93%;">
                                        Hora *
                                </div>

                                <div  id="horarioprofesional" class="col-lg-11" align="left" style="margin-top:-3%;margin-left:12%;">
                                    
                                </div>

                            </div>        
                          
                        </div>
                        
                        </BR>
                        </BR>

                        <div id="divvalorconsulta1" class="row clearfix" style="display:none;">

                            <div class="" style="margin-left:2%;">
                              <div class="header">
                                  <h2><strong>Valor</strong>-Consulta<small ></small></h2> 
                              </div> 
                            </div>

                        </div>

                        <div id="divvalorconsulta2" class="row clearfix" style="display:none;">

                               <div class="col-sm-3">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:0%;margin-left:5%;">
                                         Valor *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-1%;margin-left:-10%;width:24%;">
                                    <div class="form-group">

                                         <input type="text" placeholder="" id="valorconsulta" name="valorconsulta" class="form-control d-flex justify-content-left" value="" autocomplete="off" required disabled="">
                                       
                                    </div>
                                </div> 
                        </div>     

                        <div id="divdatospaciente1" class="row clearfix" style="display:none;">

                            <div class="" style="margin-left:2%;">
                              <div class="header">
                                  <h2><strong>Datos</strong>-Paciente<small ></small></h2> 
                              </div> 
                            </div>

                        </div>

                        <div id="divdatospaciente2" class="row clearfix" style="display:none;">

                           <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left" align="left" style="margin-top:8%;margin-left:9%;">
                                    Tipo Documento
                                </div>
                            </div> 

                            <div class="col-sm-3">
                              <div class="form-group d-flex justify-content-left" style="margin-top:-3%;margin-left:-20%;">
                                     
                                      <select id="tipodocumento" name="tipodocumento" required class="selectpicker form-control" data-live-search="true" >

                                     <option value="0">Seleccione Tipo Documento</option>   

                                     </select> 
                              </div>
                            </div>
                           
                            <div class="col-sm-13">                                
                                <div class="row">
                                    &nbsp;&nbsp;&nbsp;
                                    <div class="d-flex justify-content-left" style="margin-top:0.5%;margin-left:-5%;"><input type="text" id="rut" name="rut" class="form-control" autocomplete="off" required placeholder="Digite el documento"></div>

                                    &nbsp;&nbsp;&nbsp;
                                    <div class="d-flex justify-content-left" style="margin-top:1%;margin-left:-2%;"><input type="text" id="documento" name="documento" class="form-control" autocomplete="off" required placeholder="Digite el documento" style="display:none;" ></div>

                                    &nbsp;&nbsp;&nbsp;
                                    <div style="margin-top:-1%" class="">
                                        <button id="btnBuscarRut" type="button" name="btnBuscarRut" class="btn btn-primary btn-round" style="background-color:#01d8da;" >Buscar</button>
                                    </div>

                                </div> 
                            </div>

                            <br>
                            <br>
                            <br>
                            <br>

                           <div id="divdatospaciente3" class="row clearfix" style="display:none;"> 

                               <div class="col-sm-3">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:-3%;margin-left:12%;">
                                         Nombres *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-1%;margin-left:-8%;width:33%;">
                                    <div class="form-group">

                                         <input type="text" placeholder="" id="nombres" name="nombres" class="form-control d-flex justify-content-left" value="" autocomplete="off" required style="text-transform:uppercase" disabled="">
                                       
                                    </div>
                                </div> 

                                <div class="col-sm-2">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:-3%;margin-left:17%;">
                                         Apellido Paterno *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-1%;margin-left:-0.5%;width:31%;">
                                    <div class="form-group">

                                         <input type="text" placeholder="" id="apellidopaterno" name="apellidopaterno" class="datetimepicker form-control d-flex justify-content-left" value="" autocomplete="off" required style="text-transform:uppercase" disabled="">
                                       
                                    </div>
                                </div> 

                                </br>
                                </br>
                                </br>
                                
                                <div class="col-sm-3">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:-3%;margin-left:12%;">
                                         Apellido Materno *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-1%;margin-left:-8%;width:33%;">
                                    <div class="form-group">

                                         <input type="text" placeholder="" id="apellidomaterno" name="apellidomaterno" class="form-control d-flex justify-content-left" value="" autocomplete="off" required style="text-transform:uppercase" disabled="">
                                       
                                    </div>
                                </div> 

                                <div class="col-sm-2">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:-3%;margin-left:17%;">
                                         Email *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-1%;margin-left:-0.5%;width:31%;">
                                    <div class="form-group">

                                         <input type="text" placeholder="" id="email" name="email" class="datetimepicker form-control d-flex justify-content-left" value="" autocomplete="off" required style="text-transform:uppercase" disabled="">
                                       
                                    </div>
                                </div> 

                                </br>
                                </br>
                                </br>

                                <div class="col-sm-3">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:-3%;margin-left:12%;">
                                         Fecha Nacimiento *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-1%;margin-left:-8%;width:33%;">
                                    <div class="form-group">

                                         <input type="text" class="datetimepickerfechanac form-control" id="fnacimiento" name="fnacimiento"  autocomplete="off" required placeholder="" disabled="">
                                       
                                    </div>
                                </div> 

                                <div class="col-sm-2">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:-3%;margin-left:17%;">
                                         Genero *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-2%;margin-left:-2%;width:34%;">
                                    <div class="form-group">

                                         <select id="genero" name="genero" class="selectpicker form-control" disabled="">

                                            <option value="0">No Declara</option>
                                            <option value="Masculino">Masculino</option>
                                            <option value="Femenino">Femenino</option>
                                            <option value="Otro">Otro</option>
                                        </select>
                                       
                                    </div>
                                </div> 

                                </br>
                                </br>
                                </br>

                                <div class="col-sm-3">                          
                                    <div class="d-flex justify-content-left" align="left" style="margin-top:-3%;margin-left:12%;">
                                         Celular *
                                    </div>
                                </div>                    
                                    
                                <div class="" style="margin-top:-1%;margin-left:-8%;width:33%;">
                                    <div class="form-group">

                                         <input type="text" class="datetimepicker form-control" id="celular" name="celular"  autocomplete="off" required placeholder="" disabled="">
                                       
                                    </div>
                                </div> 

                            </div>    
                            
                        </div>

                        <!-- ELIMINACION DE CITA -->

                        <div id="divdatoseliminarcita1" name="divdatoseliminarcita1" class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left" style="margin-top:-4%;margin-left:5%;" >
                            <p id="divdatoseliminarcita2" name="divdatoseliminarcita2" class="" style="color:#FF0000;display:none;" ><small>* Son campos obligatorios.</small></BR><small>* Usted debera tener a mano el codigo de reserva para la anulaci&oacuten de la cita.</small></p>

                            <div id="divdatoseliminarcita3" name="divdatoseliminarcita3" class="" style="margin-left:-39%;display:none;">
                              <div class="header">
                                  </br>
                                  </br>
                                  </br>
                                 
                                  <h2><strong>Eliminar</strong>-Cita<small ></small></h2>
                                 
                              </div>
                            </div>

                        </div>

                        </br>
                        </br>
                        </br>

                        <div id="divdatoseliminarcita4" class="row clearfix" style="display:none;margin-top:-5%;">

                            <div class="col-sm-2">                          
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Empresa *
                                </div>
                            </div>                             
                                        
                            <div class="" style="margin-top:-1%;margin-left:-3.2%;width:34%;">
                                <div class="form-group">
                                    <select id="empresaeliminar" name="empresaeliminar" required class="selectpicker form-control" data-live-search="true">
                                        <option value="0">Seleccione Empresa</option>
                                           @foreach ($listadoEmpresas as $empresa)                                 
                                              <option value="{{$empresa->rut}}">{{$empresa->nombreempresa}}</option>
                                          @endforeach 
                                    </select>
                                </div>
                            </div> 

                        </div> 

                        </br>
                        </br>
                       

                        <div id="divdatoseliminarcita5" class="row clearfix" style="display:none;margin-top:-2%">

                            <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left" align="left" style="margin-top:8%;margin-left:6%;">
                                    Tipo Documento
                                </div>
                            </div> 

                            <div class="col-sm-3">
                              <div class="form-group d-flex justify-content-left" style="margin-top:-3%;margin-left:-20%;">
                                     
                                      <select id="tipodocumentoeliminar" name="tipodocumentoeliminar" required class="selectpicker form-control" data-live-search="true" >

                                     <option value="0">Seleccione Tipo Documento</option>   

                                     </select> 
                              </div>
                            </div>

                            <div class="col-sm-13">                                
                                <div class="row">
                                    &nbsp;&nbsp;&nbsp;
                                    <div class="d-flex justify-content-left" style="margin-top:0.5%;margin-left:-5%;"><input type="text" id="ruteliminar" name="ruteliminar" class="form-control" autocomplete="off" required placeholder="Digite el documento"></div>

                                    &nbsp;&nbsp;&nbsp;
                                    <div class="d-flex justify-content-left" style="margin-top:1%;margin-left:-2%;"><input type="text" id="documentoeliminar" name="documentoeliminar" class="form-control" autocomplete="off" required placeholder="Digite el documento" style="display:none;" ></div>

                                    &nbsp;&nbsp;&nbsp;
                                    <div style="margin-top:-1%" class="">
                                        <button id="btnBuscarRutEliminar" type="button" name="btnBuscarRutEliminar" class="btn btn-primary btn-round" style="background-color:#01d8da;" >Buscar</button>
                                    </div>

                                </div> 
                            </div>

                        </div>   
                       
                        </BR>
                        </BR>

                        <div id="divdatoseliminarcita6" class="row clearfix" style="display:none;margin-top:-2%;">

                            <div class="" style="margin-left:2%;">
                              <div class="header">
                                  <h2><strong>Citas</strong>-Paciente<small ></small></h2> 
                              </div> 
                            </div>

                        </div>

                        <div id="divdatoseliminarcita7" name="divdatoseliminarcita7" class="tab-content m-t-10"  style="display:none;">
                                    <div class="tab-pane table-responsive active" id="All" style="overflow-x: hidden;">
                                        <table class="table m-b-0 table-hover" id="tablacitaseliminar" name="tablacitaseliminar" style="width:100%;">
                                            <thead>
                                                <tr class="ui-widget-header">                         
                                                  <th>Fecha</th>
                                                  <th>Hora</th>
                                                  <th>M&eacutedico</th>
                                                  <th>Especialidad</th>
                                                  <th>Valor</th>
                                                  <th>Acci&oacuten</th>
                                                  </tr>
                                            </thead>
                                            
                                        </table>
                                    </div>
                                </div>

                       
                                                  
                        <br>
                        <br>

                        <div id="divbotonagendar" name="divbotonagendar" class="row clearfix" align="center" style="display:none;">          
                            <div class="col-sm-12">
                                <button style="border-color:#18ce0f; color:#18ce0f;" type="button" class="btn btn-default btn-round btn-simple" id="btnAgendar" name="btnAgendar">Agendar</button>
                                
                            </div>
                        </div>

                        </div>

                    </div>     
                </div> 
            </div> 
        </div>         
    </div> 

    <div id="dialog_alerta" title="{{config('maestro.nombresistema')}}" align="center">
            <p id="dialog_texto"></p>
    </div>

    <div id="dialog-agendamiento" title="{{config('maestro.nombresistema')}}"> 
        <form>
            <fieldset>

                <div align="left">

                    <label id="titulo1" for="name" style="font-size: 18px;color:#828282;">Sr(a)</label>
                   
                    <label id="nombrepaciente" style="font-size: 18px;"></label>

                    </BR>
                   
                    <label id="titulo2" style="font-size: 18px;color:#828282;">Rut</label>
                    
                    <label id="rutpaciente" name="rutpaciente" style="font-size: 18px;"></label>

                    </BR>
                    
                    <label id="titulo3" style="font-size: 18px;color:#828282;">Usted va a agendar una cita con el m&eacutedico</label>
                    <label id="nombreprofesional" name="nombreprofesional" style="font-size: 18px;"></label>
                    
                    <label id="nombreespecialidadprofesional" name="nombreespecialidadprofesional" style="font-size: 18px;"></label>
                    
                    </BR>
                    <label id="titulo5" style="font-size: 18px;color:#828282;">En la fecha</label>
                    <label id="fechacita" name="fechacita" style="font-size: 18px;"></label>
                    <label id="titulo6" style="font-size: 18px;color:#828282;">y hora</label>
                    <label id="horacita"  name="horacita" style="font-size: 18px;"></label>
                    
                    </BR>
                    <label id="titulo7" style="font-size: 18px;color:#828282;">Por un valor</label> 
                    <label id="valorcita" name="valorcita" style="font-size: 18px;"></label>  
                        
                </div>
                
            </fieldset>
        </form>
    </div>

    <div id="dialog-nombreencontrado" title="{{config('maestro.nombresistema')}}" align="center">
            <p id="dialog_textonombreencontrado"></p>

            <p id="dialog_textonombreencontrado1"></p>
    </div>

    <div id="dialog-eliminaragendamiento" title="{{config('maestro.nombresistema')}}"> 
        <form>
            <fieldset>
                <div align="center">
                   
                        <label for="name" style="font-size: 18px;">Por favor ingresar el codigo de reserva que usted recibio en el correo de confirmaci&oacuten de la cita</label>

                        </BR>
                   
                        <input type="text" name="codigoreservacita" id="codigoreservacita" maxlength="6">
                       
                </div>
               
            </fieldset>
        </form>
    </div>

    @endif
 
    @if($dispositivoacceso != "Ordenador") 


    @endif  

@endsection


@section('page-script')
    <script src="{{asset('js/jquery-3.4.1.min.js')}}"></script>
    <script src="{{asset('assets/jquery-ui.js')}}"></script>
    <script src="{{asset('js/jquery.rut-master/jquery.rut.js')}}"></script>
    
@stop