@extends('layout.authentication')
@section('title', 'Epraxis-Agendamiento')
@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>
        
        <div class="row clearfix">
            
            <div class="col-md-12 d-flex justify-content-center">
                
                <div class="card">
                    
                    <div class="body">

                        {{ csrf_field() }}

                                                
                        @if($dispositivoacceso == "Ordenador")

                        <img src="{{$rutalogocorporracion}}"  style="margin-left:75%;width: 20%; height:10%"/>
                        
                        @endif 
                        
                        @if($dispositivoacceso != "Ordenador")

                        <img src="{{$rutalogocorporracion}}"  style="margin-left:85%;width: 20%; height:10%;margin-top:-7%;"/>
                        
                        @endif

                        @if($dispositivoacceso == "Ordenador")  

                            <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">

                                <big style="color: black;font-size:20px;margin-top:-7%;" class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Reserva-Anulaci&oacute;n Citas</strong></big>
                            </div> 

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

                             <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">

                                <big style="color: black;font-size:20px;margin-top:-7%;" class=""><strong>Reserva-Anulaci&oacute;n Citas</strong></big>
                                </BR>
                            </div> 

                        @endif     

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

                        
                            <div class="col-sm-2" style="">

                                <button id="btnNuevaCita" type="button" name="btnNuevaCita" class="btn btn-primary btn-round" style="background-color:#01d8da;width:90%;height:90%;" >Nueva Cita</button>
                                                                   
                            </div> 

                            <div class="col-sm-2" style="">                                
                               <button id="btnEliminarCita" type="button" name="btnEliminarCita" class="btn btn-primary btn-round" style="background-color:#01d8da;width:90%;height:90%;" >Eliminar Cita</button>

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

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

                            <div class="col-sm-2">
                                
                                <div class="header">

                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        <h2><strong>Nueva</strong>-Cita<small ></small></h2>
                                    </div>
                                 </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">
                                    Clinica *
                                </div>
                            </div>

                            <div class="col-sm-4">
                              <select class="selectpicker form-control" id="empresa" name="empresa" data-live-search="true">
                                 <option value="0">Seleccione Clinica</option>
                                       
                                @foreach ($listadoEmpresas as $empresa)                                           
                                   <option value="{{$empresa->rut}}">{{$empresa->nombreempresa}}</option>
                                @endforeach  

                              </select>
                            </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="col-sm-4">
                              <select class="selectpicker form-control" id="especialidad" name="especialidad" data-live-search="true" disabled="">
                                 <option value="0">Seleccione Especialidad</option>
                              </select>
                            </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="col-sm-4">
                              <select class="selectpicker form-control" id="subespecialidad" name="subespecialidad" data-live-search="true" disabled="">
                                 <option value="0">Seleccione Sub Especialidad</option>
                              </select>
                            </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="col-sm-4">
                              <select class="selectpicker form-control" id="profesional" name="profesional" data-live-search="true" disabled="">
                                   <option value="0">Seleccione Profesional</option>
                              </select>
                            </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">
                                    Tipo cita *
                                </div>
                            </div>

                            <div class="col-sm-4">
                              <select class="selectpicker form-control" id="motivoconsulta" name="motivoconsulta" data-live-search="true" disabled="">
                                    <option value="0">Seleccione Tipo cita</option>
                              </select>
                            </div>

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

                           
                            <div id="divmodalidad" class="col-sm-2" align="left" style="display:none;">
                            
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left" >
                                    Modalidad cita
                                </div>
                            </div>    

                            <div class="col-sm-4" id="divmodalidad1" style="display:none;">
                                           
                               <div class="checkbox d-flex justify-content-left" >
                                    
                                    <input id="checkboxmodalidadpre" type="checkbox" >
                                    <label for="checkboxmodalidadpre">
                                        Presencial
                                    </label>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input id="checkboxmodalidadvir" type="checkbox">
                                    <label  for="checkboxmodalidadvir">
                                        Virtual
                                    </label> 
                                    
                                </div>  
                            </div>
                           
                        </div>

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

                            <div class="col-sm-6">
                            
                                <div class="header">

                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        
                                         <h2><strong>Horario</strong>-Profesional<small ></small></h2>
                                    </div>
                                 </div>    
                            </div>

                        </div>

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


                                <div class="col-sm-2" style="margin-top:0%;">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Fecha *
                                    </div>
                                </div> 

                                <div class="col-sm-4" style="margin-top:0%;"">
                                    <div class="form-group">
                                          <input type="text" class="datetimepicker form-control" id="fecha_cita" name="fecha_cita"  autocomplete="off" required placeholder="">
                                    </div>
                                </div>

                            </div> 

                        </div> 
                        
                        <div id="divhorasprofesional" style="display:none;"> 


                            <div class="row clearfix"> 

                                <div class="col-sm-2" style="margin-top:3%;">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                         Hora *
                                    </div>
                                </div>

                               
                                <div  id="horarioprofesional" name="horarioprofesional" class="col-sm-9" align="left" style="margin-top:3%;">

   
                                </div>

                            
                            </div> 

                        </div>     

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

                            <div class="col-sm-6">
                            
                                <div class="header">

                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        
                                          <h2><strong>Valor</strong>-Consulta<small ></small></h2> 
                                    </div>
                                 </div>    
                            </div>

                        </div>


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

                            <div class="row clearfix"> 

                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Valor *
                                    </div>
                                </div> 

                                <div class="col-sm-4">
                                    <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>       


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

                            <div class="col-sm-6">
                            
                                <div class="header">

                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        
                                          <h2><strong>Datos</strong>-Paciente<small ></small></h2>  
                                    </div>
                                 </div>    
                            </div>

                        </div>


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

                            <div class="row clearfix">

                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Tipo Documento
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                      <select class="selectpicker form-control" id="tipodocumento" name="tipodocumento" data-live-search="true">
                                         <option value="0">Seleccione Tipo Documento</option>     

                                      </select>
                                </div>

                                <div class="col-sm-2">
                                      <div class="form-group">
                                          
                                          <input type="text" id="rut" name="rut" class="form-control" autocomplete="off" required placeholder="Nr. documento"
                                          size="18">

                                           <input type="text" id="documento" name="documento" class="form-control" autocomplete="off" required placeholder="Nr. documento"
                                          size="18" style="display:none;">
                                      </div>
                                      
                                </div>

                                  <div class="col-sm-2" style="margin-top:-7px;">
                                      <div class="form-group">
                                           <button id="btnBuscarRut" type="button" name="btnBuscarRut" class="btn btn-primary btn-round">Buscar</button>
                                      </div> 
                                  </div>
                            </div>
                        </div> 

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

                            <div class="row clearfix">

                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Nombres *
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <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-items-left ml-0 p-2" align="left">
                                        Apellido Paterno *
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <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>

                                

                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Apellido Materno *
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <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-items-left ml-0 p-2" align="left">
                                        Email *
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <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>

                                

                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Fecha Nacimiento *
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <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-items-left ml-0 p-2" align="left">
                                         Genero *
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                      <select class="selectpicker form-control" id="genero" name="genero" data-live-search="true">
                                          <option value="0">No Declara</option>
                                          <option value="Masculino">Masculino</option>
                                          <option value="Femenino">Femenino</option>
                                          <option value="Otro">Otro</option>  
                                      </select>
                                </div>

                               

                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Celular *
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <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:-1%;" style="display:none;">
                           <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>

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

                            <div class="col-sm-6">
                                
                                <div class="header">

                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        <h2><strong>Eliminar</strong>-Cita<small ></small></h2>
                                    </div>
                                 </div>    
                            </div>

                        </div>  

                        <div id="divdatoseliminarcita4" class="row clearfix" style="display:none;margin-top:-1%;">
                       
                            <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Clinica *
                                </div>
                            </div>

                            <div class="col-sm-4">
                              <select class="selectpicker form-control" id="empresaeliminar" name="empresaeliminar" data-live-search="true">
                                 <option value="0">Seleccione Clinica</option>
                                       
                                @foreach ($listadoEmpresas as $empresa)                                           
                                   <option value="{{$empresa->rut}}">{{$empresa->nombreempresa}}</option>
                                @endforeach  

                              </select>
                            </div>

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

                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Tipo Documento
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                      <select class="selectpicker form-control" id="tipodocumentoeliminar" name="tipodocumentoeliminar" data-live-search="true">
                                         <option value="0">Seleccione Tipo Documento</option>     

                                      </select>
                                </div>

                                <div class="col-sm-2">
                                      <div class="form-group">
                                          
                                          <input type="text" id="ruteliminar" name="ruteliminar" class="form-control" autocomplete="off" required placeholder="Nr. documento"
                                          size="18">

                                           <input type="text" id="documentoeliminar" name="documentoeliminar" class="form-control" autocomplete="off" required placeholder="Nr. documento"
                                          size="18" style="display:none;">
                                      </div>
                                      
                                </div>

                                <div class="col-sm-2" style="margin-top:-7px;">
                                  <div class="form-group">
                                       <button id="btnBuscarRutEliminar" type="button" name="btnBuscarRutEliminar" class="btn btn-primary btn-round">Buscar</button>
                                  </div> 
                                </div>
                            </div>

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

                            <div class="col-sm-6">
                                
                                <div class="header">

                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        <h2><strong>Citas</strong>-Paciente<small ></small></h2> 
                                    </div>
                                 </div>    
                            </div>

                        </div> 

                        <div id="divdatoseliminarcita7" name="divdatoseliminarcita7" class="tab-content m-t-10" style="display:none;" align="left">
                            <div class="tab-pane table-responsive active" id="All">
                                <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 id="dialog_alerta" title="{{config('maestro.nombresistema')}}" align="center">
            <p id="dialog_texto"></p>
    </div>
    
     <div id="dialog_alerta1" name="dialog_alerta1" title="{{config('maestro.nombresistema')}}" align="center" class="selector">
        <p id="dialog_texto1"></p>
    </div>
    
    <div id="dialog_alerta2" name="dialog_alerta2" title="{{config('maestro.nombresistema')}}" align="center" class="selector" >
        <p id="dialog_texto2"></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>
                    
                    </BR>

                    <label id="modalidadcitadialogo" name="modalidadcita" 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>

@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