@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 class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left" style="margin-top:-3%;">
                           <p class="" style="color:#FF0000;" ><small>* Son campos obligatorios.</small></p>

                            <div class="" style="margin-left:-13%;">
                              <div class="header">
                                  </br>
                                  </br>
                            
                                  <h2><strong>Selección</strong>-Profesional<small ></small></h2>
                                 
                              </div>
                            </div>

                        </div>
                           

                        <div class="row clearfix">

                            <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>

                        <br>
                        <br>

                        <div class="row clearfix" align="center">          
                            <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édico</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>

    @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