@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')

    @if($dispositivoacceso == "Ordenador")

         <div style="margin-left:3%; width: 25%; height:7%; margin-top:-40%;">

                <a href="{{ route('rutachilepraxis') }}" target="_blank" style="">
                    <img src="{{route('logotranspachilepraxis')}}" style="" />
                </a> 
                
        </div>        

    @endif 

    @if($dispositivoacceso != "Ordenador")

        <a href="{{ route('rutachilepraxis') }}" target="_blank" style="position: relative; z-index: 20;">
            <img src="{{route('logotranspachilepraxis')}}"  style="width: 60%; margin-left:5%; height:5%; margin-top:-45%;"/>
        </a>       

    @endif 


    <div class="container-fluid" >

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

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

                        <div class="card card-ancha" style="margin: 20px auto;background-color: white;padding: 20px;border-radius: 10px; /*Esquinas redondeadas */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 15px 15px rgba(0, 0, 0, 0.3);margin-top:0%;">

                @endif

                @if($dispositivoacceso != "Ordenador")  

                        <div class="card" style="width: 100%;margin: 20px auto;background-color: white;padding: 20px;border-radius: 10px; /*Esquinas redondeadas */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 15px 15px rgba(0, 0, 0, 0.3);margin-top:-25%;">

                @endif     
                    
                    <div class="body">

                        {{ csrf_field() }}

                        @if($dispositivoacceso == "Ordenador")
                            <div style="position: relative;">
                                 <img src="{{ route('logocorporacion', ['rut' => $rutempresa]) }}" 
                                     style="position: absolute; top: 0; right: 0; max-width: 150px; max-height: 100px; object-fit: contain;"/>
                                 
                            </div>
                        @endif
                                                
                        @if($dispositivoacceso != "Ordenador")
                            
                            <div style="position: relative; display: flex; justify-content: center; align-items: center; height: 150px;">
                                <img src="{{ route('logocorporacion', ['rut' => $rutempresa]) }}" 
                                    style="max-width: 100px; max-height: 100px; object-fit: contain;"/>
                            </div>
                        @endif

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

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

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

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

                        <input type="hidden" id="idtiposerviciocategoriaoculto" autocomplete="off" name="idtiposerviciocategoriaoculto" class="form-control" required value="">

                         <input type="hidden" id="idservicioseleccoculto" autocomplete="off" name="idservicioseleccoculto" class="form-control" required value="">

                         <input type="hidden" name="credencialesflow" id="credencialesflow" value="{{$credencialesflow}}">

                        @if($dispositivoacceso == "Ordenador")  
                            <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                               <big id="titulonuevo" name="titulonuevo" style="color: black;font-size:20px;margin-top:-1%;" class="">&nbsp;&nbsp;<strong>Nuevo Servicio</strong></big>
                            </div>
                            <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                                <big id="tituloeliminar" name="tituloeliminar" style="color: black; font-size:20px; display:none;" class="">&nbsp;&nbsp;&nbsp;<strong>Eliminar Servicio</strong></big>
                            </div>
                            <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                                <big id="tituloimprimir" name="tituloimprimir" style="color: black; font-size:20px; display:none;" class="">&nbsp;&nbsp;&nbsp;<strong>Reimprimir comprobante de pago</strong></big>
                            </div>    
                        @endif 
                        
                        @if($dispositivoacceso != "Ordenador") 
                            <div class="navbar-header d-flex justify-content-center align-items-center ml-0 p-0">
                                <big id="titulonuevo" name="titulonuevo" style="color: black; font-size:20px;">
                                    <strong>Nuevo Servicio</strong>
                                </big>
                            </div>

                            <div class="navbar-header d-flex justify-content-center align-items-center ml-0 p-0">
                                <big id="tituloeliminar" name="tituloeliminar" style="color: black; font-size:20px;display:none;">
                                    <strong>Eliminar Servicio</strong>
                                </big>
                            </div>

                            <div id="navbar-header" style="display: flex; justify-content: center; align-items: center; width: 100%; padding: 0; margin-left: 0;">
                                <big id="tituloimprimir" name="tituloimprimir" style="color: black; font-size: 20px; display:none; text-align: center; font-weight: bold; line-height: 1.2;">
                                    Reimprimir<br>comprobante pago
                                </big>
                            </div>
                            
                        @endif 
                        
                        @if($dispositivoacceso == "Ordenador") 

                            <div class="row clearfix" style="margin-top:1%;">
                                <div class="col-sm-2">
                                    <button id="btnNuevaCita" type="button" name="btnNuevaCita" class="btn btn-primary btn-round" style="background-color:#01d8da; width:90%; height:90%; font-weight: bold;" >Nuevo Servicio</button>
                                </div> 
                                <div class="col-sm-2">                                
                                    <button id="btnEliminarCita" type="button" name="btnEliminarCita" class="btn btn-primary btn-round" style="background-color:#01d8da; width:90%; height:90%; font-weight: bold;" >Eliminar Servicio</button>
                                </div>
                                <!--<div class="col-sm-3">                                
                                    <button id="btnImprimirComprobante" type="button" name="btnImprimirComprobante" class="btn btn-primary btn-round" style="background-color:#01d8da; width:120%; height:90%; font-weight: bold;" >Reimprimir comprobante de pago</button>
                                </div>-->                                 
                            </div>
                        
                         @endif 
                         
                         @if($dispositivoacceso != "Ordenador")
                         
                            </br>
                           
                            <div class="row clearfix" style="">
                                <div class="col-sm-2">
                                    <button id="btnNuevaCita" type="button" name="btnNuevaCita" class="btn btn-primary btn-round" style="background-color:#01d8da; width:90%; height:90%; font-weight: bold;" >Nuevo Servicio</button>
                                </div> 
                                <div class="col-sm-2">                                
                                    <button id="btnEliminarCita" type="button" name="btnEliminarCita" class="btn btn-primary btn-round" style="background-color:#01d8da; width:90%; height:90%; font-weight: bold;" >Eliminar Servicio</button>
                                </div>
                                <div class="col-sm-3">                                
                                    <button id="btnImprimirComprobante" type="button" name="btnImprimirComprobante" class="btn btn-primary btn-round" style="background-color:#01d8da; width:90%; height:90%; font-weight: bold;" >Reimprimir comprobante de pago</button>
                                </div>                               
                            </div>
                        
                         @endif 

                        </br>
                        </br>
                        </br> 
                        
                        @if($dispositivoacceso == "Ordenador")

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

                        @endif

                        @if($dispositivoacceso != "Ordenador")

                           <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:-10%;" style="display:none;">
                           <p id="divnuevacita2" name="divnuevacita2" class="" style="color:#FF0000;display:none;" ><small>* Son campos obligatorios.</small></p>

                           </div>

                        @endif
                    

                        <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>Nuevo</strong>-Servicio<small ></small></h2>
                                    </div>
                                 </div>    
                            </div>

                        </div>

                        <div class="icon-container" id="divtiposervicio" name="divtiposervicio" style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;display:none;">
                            <div class="icon-card selected" id="servconsulta" name="servconsulta" title="Consultas">
                                <i class="zmdi zmdi-hospital"></i>
                                <span>Consultas</span>
                            </div>
                            
                            <!--HABILITAR ESTO CUANDO SE RETOME REALIZAR LOS AGENDAMIENTOS DE LAS TOMAS DE MUESTRAS E IMAGENES MODIFICANDO LA PROPIEDAD style="display:none;" -->
                                                    </div>


                        <!--<ul id="divtiposervicio" name="divtiposervicio" class="nav nav-tabs" role="tablist" style="display:none;">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#home_with_icon_title" style="color: #3871C2; font-size: 1.2em; font-weight: 600; letter-spacing: 0.5px;">
                                    <i class="zmdi zmdi-hospital"></i> Consultas
                                </a>
                            </li>

                           
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#profile_with_icon_title" style="color: #3871C2; font-size: 1.2em; font-weight: 600; letter-spacing: 0.5px;">
                                    <i class="zmdi zmdi-assignment"></i> Procedimientos
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#messages_with_icon_title" style="color: #3871C2; font-size: 1.2em; font-weight: 600; letter-spacing: 0.5px;">
                                    <i class="zmdi zmdi-invert-colors"></i> Toma de muestra
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#settings_with_icon_title" style="color: #3871C2; font-size: 1.2em; font-weight: 600; letter-spacing: 0.5px;">
                                    <i class="zmdi zmdi-camera"></i> Imágenes
                                </a>
                            </li>

                        </ul>-->

                        
                        
                        <!--<div class="row clearfix" id="divtiposervicio1" name="divtiposervicio1" style="display:none;">
                           
                            <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Servicio *
                                    </div>
                            </div>

                            <div class="col-sm-4">
                                <select class="selectpicker form-control" id="servicio" name="servicio" data-live-search="true">
                                    <option value="1">Consultas médicas</option>
                                    <option value="2">Procedimientos</option>
                                    <option value="3">Toma muestra</option>
                                    <option value="4">Imágenes</option>
                                </select>
                            </div>
                        </div>-->

                        </br>
                        </br>
                           
                        <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="">

                            <input type="hidden" name="dispositivoacceso" id="dispositivoacceso" value="{{$dispositivoacceso}}">

                            <input type="hidden" name="dispositivoacceso" id="dispositivoacceso" value="{{$dispositivoacceso}}">

                            <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" disabled="" >
                                
                                       
                                @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">
                                    Sucursal *
                                </div>
                            </div>
                            
                            
                                
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <input type="hidden" id="sucursal" name="sucursal" class="form-control" autocomplete="off" required value="">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" id="direccionsucursal" name="direccionsucursal" class="form-control" autocomplete="off" required value="No existe Sucursal" disabled>
                                        </div>
                                    </div>
                                
                                                            
                            
                            <div class="col-sm-2" id="divtituloespecialidad" name="divtituloespecialidad">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Especialidad *
                                </div>
                            </div>

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

                            </br>
                            </br>
                            </br>
                            
                            <div class="col-sm-2" id="divtitulosubespecialidad" name="divtitulosubespecialidad">                                
                                <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" id="divsubespecialidad" name="divsubespecialidad">
                              <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" id="divtituloserviciocons" name="divtituloserviciocons" style="display:none;">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Servicio *
                                </div>
                            </div>

                            <div class="col-sm-4" id="divserviciocons" name="divserviciocons" style="display:none;">
                              <select class="selectpicker form-control" id="serviciocons" name="serviciocons" data-live-search="true" disabled>
                                    <option value="0">Seleccione Servicio</option>
                                    
                              </select>
                            </div>

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

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

                            <div class="col-sm-2" id="divtitulotipocita" name="divtitulotipocita" style="display:none;">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Tipo consulta *
                                </div>
                            </div>

                            <div class="col-sm-4" id="divtipocita" name="divtipocita" style="display:none;">
                              <select class="selectpicker form-control" id="motivoconsulta" name="motivoconsulta" data-live-search="true" disabled="">
                                    
                              </select>
                            </div>

                            <div class="col-sm-2" id="divtitulocategoriaservicio" name="divtitulocategoriaservicio" style="display:none;">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Categoria *
                                </div>
                            </div>

                            <div class="col-sm-4" id="divcategoriaservicio" name="divcategoriaservicio" style="display:none;">
                              <select class="selectpicker form-control" id="categoria" name="categoria" data-live-search="true">
                                   <option value="0">Seleccione Categoria</option>
                                  
                              </select>
                            </div>

                            <div class="col-sm-2" id="divtituloservicio" name="divtituloservicio" style="display:none;">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Servicio *
                                </div>
                            </div>

                            <div class="col-sm-4" id="divservicio" name="divservicio" style="display:none;">
                              <select class="selectpicker form-control" id="serviciocategoria" name="serviciocategoria" data-live-search="true" disabled>
                                    <option value="0">Seleccione Servicio</option>
                                    
                              </select>
                            </div>

                            <div class="col-sm-2" id="divtituloprofesionalproc" name="divtituloprofesionalproc" style="display:none">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Profesional *
                                </div>
                            </div>

                            <div class="col-sm-4" id="divprofesionalproc" name="divprofesionalproc" style="display:none">
                              <select class="selectpicker form-control" id="profesionalproc" name="profesionalproc" data-live-search="true" disabled="">
                                   <option value="0">Seleccione Profesional</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 servicio
                                </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 id="labelmodalidadteleconsulta" name="labelmodalidadteleconsulta" for="checkboxmodalidadvir">
                                        Teleconsulta
                                    </label> 
                                    
                                </div>  
                            </div>
                           
                        </div>

                        </br>
                           

                        <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><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="divdatoshorarioprofesional2" 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_citatomuimag" name="fecha_citatomuimag"  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>Datos</strong>-Servicio<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">
                                        Nombre
                                    </div>
                                </div> 

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

                                <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-1" 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 d-flex align-items-left">
                                    <div class="ml-1 p-0" style="width: 100%;margin-top:2%;">
                                        <span class="d-inline-block text-left">Fecha Nacimiento *</span>
                                    </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 class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Direcci&oacute;n *
                                    </div>
                                </div>                             
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <input type="text"  id="direccion" name="direccion" class="form-control" autocomplete="off" style="text-transform:uppercase">
                                    </div>
                                </div>
                                
                                <div class="col-sm-2">                                
                                    <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                        Comuna *
                                    </div>
                                </div>                             
                                <div class="col-sm-4">
                                    
                                    <select class="selectpicker form-control" id="comuna" name="comuna" data-live-search="true" disabled >
                                        <option value="0">Seleccione Comuna</option>
                                        @foreach ($comunas as $comuna)
                                            <option value="{{ $comuna->id }}">{{ $comuna->nombre }}</option>
                                        @endforeach 
                                       
                                    </select>
                                </div> 
                                
                                
                            </div>
                        </div>      


                        <!-- ELIMINACION DE CITA -->

                        @if($dispositivoacceso == "Ordenador")

                           <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:-5%;" 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 seguridad para la anulaci&oacuten del servicio.</small></p>

                           </div>

                        @endif

                        @if($dispositivoacceso != "Ordenador")

                           <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:-28%;" 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 seguridad para la anulaci&oacuten del servicio.</small></p>

                           </div>

                        @endif


                        <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>-Servicio<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" disabled="">
                                       
                                @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>Tipo</th>
                                            <th>Servicio</th>
                                            <th>Valor</th>
                                            <th>Estado pago</th>
                                            <th>Acci&oacuten</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div> 


                        <!-- COMPROBANTE DE PAGO-->

                        <div id="divdatosimprimir1" name="divdatosimprimir1" class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left" style="margin-top:0%;" style="display:none;">
                           <p id="divdatosimprimir2" name="divdatosimprimir2" class="" style="color:#FF0000;display:none;" ><small>* Son campos obligatorios.</small></BR><small>* Usted debera tener a mano el codigo de seguridad para la impresi&oacutenn del comprobante.</small></p>

                        </div>

                        <div id="divdatosimprimir3" name="divdatosimprimir3" 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>Imprimir</strong>-Comprobante<small ></small></h2>
                                    </div>
                                 </div>    
                            </div>

                        </div>  

                        <div id="divdatosimprimir4" 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="empresaimprimir" name="empresaimprimir" data-live-search="true" disabled="">
                                       
                                @foreach ($listadoEmpresas as $empresa)                                           
                                   <option value="{{$empresa->rut}}">{{$empresa->nombreempresa}}</option>
                                @endforeach  

                              </select>
                            </div>

                        </div> 
                        
                        <div id="divdatosimprimir5" 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="tipodocumentoimprimir" name="tipodocumentoimprimir" 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="rutimprimir" name="rutimprimir" class="form-control" autocomplete="off" required placeholder="Nr. documento"
                                          size="18">

                                           <input type="text" id="documentoimprimir" name="documentoimprimir" 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="btnBuscarRutImprimir" type="button" name="btnBuscarRutImprimir" class="btn btn-primary btn-round">Buscar</button>
                                  </div> 
                                </div>
                            </div>

                        </div> 
                       
                        <div id="divdatosimprimir6" name="divdatosimprimir6" 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="divdatosimprimir7" name="divdatosimprimir7" 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="tablacitasimprimir" name="tablacitasimprimir" style="width:100%;">
                                    <thead>
                                        <tr class="ui-widget-header">        
                                            <th>Fecha</th>
                                            <th>Hora</th>
                                            <th>M&eacutedico</th>
                                            <th>Especialidad</th>
                                            <th>Tipo</th>
                                            <th>Servicio</th>
                                            <th>Valor</th>
                                            <th>Estado pago</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>

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

                        <div id="divbotongrabar" name="divbotongrabar" align="center" class="col-sm-12" style="display:none;">

                            <button style="border-color:#18ce0f; color:#18ce0f;" type="button" class="btn btn-default btn-round btn-simple" id="btnGrabar" name="btnGrabar">Grabar</button>
                           
                        </div>

                        <div id="divbotonpagar" name="divbotonpagar"  align="center" class="col-sm-12" style="display:none;">

                            <button style="border-color:#18ce0f; color:#18ce0f;" type="button" class="btn btn-default btn-round btn-simple" id="btnPagar" name="btnPagar">Ir a Pagar</button>

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

    </div> 

    <div id="dialog_alerta" title="ePRAXIS - Agendamiento" align="center">
            <p id="dialog_texto"></p>
    </div>

    <div id="dialog_alerta1" name="dialog_alerta1" title="ePRAXIS - Agendamiento" align="center" class="selector">
        <p id="dialog_texto1"></p>
    </div>

    <div id="dialog_alerta2" name="dialog_alerta2" title="ePRAXIS - Agendamiento" align="center" class="selector1" >
        <p id="dialog_texto2"></p>
    </div>

    <div id="dialog-agendamiento" title="ePRAXIS - Agendamiento" class="selector" style="margin-left: 10%;"> 
        <form>
            <fieldset>
                <BR>
               
                <div class="row clearfix" align="left">

                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;margin-right: 10%;">
                            Paciente:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="nombrepaciente" name="nombrepaciente" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div> 
                
                <div class="row clearfix" align="left" style="margin-top:-2%;">   
                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Rut:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="rutpaciente" name="rutpaciente" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div>
                
                <div class="row clearfix" align="left" style="margin-top:-2%;">     

                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Email:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="emailpaciente" name="emailpaciente" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div>

                <div class="row clearfix" align="left" style="margin-top:1%;">

                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Clin&iacuteca:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="nombreclinica" name="nombreclinica" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div>


                <div class="row clearfix" align="left" style="margin-top:-2%;">
                    <div class="col-sm-3" id="titulonombreprofesional" name="titulonombreprofesional">                                
                        <div style="font-size: 18px;color:#828282;">
                            M&eacutedico:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="nombreprofesional" name="nombreprofesional" style="font-size: 18px;"></label>
                        </div>
                    </div>

                </div>
                
                <div class="row clearfix" align="left" style="margin-top:-2%;">    
                    <div class="col-sm-3" id="titulonombreespecialidadprofesional" name="titulonombreespecialidadprofesional">                                
                        <div style="font-size: 18px;color:#828282;">
                            Especialidad:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="nombreespecialidadprofesional" name="nombreespecialidadprofesional" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div>

                <div class="row clearfix" align="left" style="margin-top:1%;">

                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Fecha:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="fechacita" name="fechacita" class="datetimepicker" style="font-size:18px"></label>
                        </div>
                    </div>

                    
                </div>


                <div class="row clearfix" align="left" style="margin-top:-2%;">
                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Hora:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="horacita" name="horacita" style="font-size: 18px;"></label>
                        </div>
                    </div>

                </div>

                <div class="row clearfix" align="left" style="margin-top:-2%;">    
                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Servicio:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="nombreservicio" name="nombreservicio" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div>
                
                <div class="row clearfix" align="left" style="margin-top:-2%;">    
                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Valor:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="valorcita" name="valorcita" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div>

                <div class="row clearfix" align="left" style="margin-top:-2%;">    
                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Pago:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="pagocita" name="pagocita" style="font-size: 18px;">PENDIENTE</label>
                        </div>
                    </div>
                </div>

                <div class="row clearfix" align="left" style="margin-top:-2%;">    
                    <div class="col-sm-3">                                
                        <div style="font-size: 18px;color:#828282;">
                            Modalidad:
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="form-group">
                              <label id="modalidadcitadialogo" name="modalidadcitadialogo" style="font-size: 18px;"></label>
                        </div>
                    </div>
                </div>
                
            </fieldset>
        </form>
    </div>

    <div id="dialog-nombreencontrado" title="ePRAXIS - Agendamiento" align="center">
            <p id="dialog_textonombreencontrado"></p>

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

    <div id="dialog-eliminaragendamiento" title="ePRAXIS - Agendamiento"> 
        <form>
            <fieldset>
                <div align="center">
                   
                        <label for="name" style="font-size: 18px;">Por favor ingresar el codigo de seguridad que usted recibio en el correo de confirmaci&oacuten del servicio</label>

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

    <div id="dialog-confirmarcitasesionunica" title="ePRAXIS - Agendamiento">
        <form>
            <fieldset>
            <div id="" name="" class="row" style="margin-top:-1%;">
                <div class="col-sm-12" align="center">
                <h4>Actualmente, usted cuenta con un agendamiento activo para este servicio.</h4>
                </div>
            </div>

            <div id="" name="" class="row" style="margin-top:-5%;">
                <div class="col-sm-12" align="center">
                <h4>¿Desea programar otro?</h4>
                </div>
            </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