@extends('layout.authentication')
@section('title', 'Ficha Paciente')

<style>

    .oval-input-container {
            position: relative;
            display: inline-block;
        }

    .icon {
            position: absolute;
            right: 0; /* Posición del icono a la derecha */
            top: 50%; /* Centra verticalmente el icono */
            transform: translateY(-50%);
            padding: 23px;
            color: #474747; /* Color del icono */
        }

    .oval-input {
        width: 320px; /* Ancho del input */
        height: 50px; /* Altura del input */
        border-radius: 25px; /* Hace que el input tenga forma ovalada */
        padding: 20px; /* Espaciado interno para que el texto no toque los bordes */
        font-size: 12px; /* Tamaño del texto */
        border-color: #474747; /* Color del borde */
        border-width: 0.5px; /* Grosor del borde */
    }

    .no-close .ui-dialog-titlebar-close {
        display: none;
    }

    .link {
         /*color: #808080 !important;*/
         color: #007bff !important;
         /*font-family: 'Montserrat', Arial, sans-serif !important; /* Usar Montserrat como la fuente principal */
         font-size: 16px !important;
    }

</style>

@section('content')

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

    <div class="row">
        
        <div class="col-md-6 offset-md-0">
            
            <div class="card-plain">
                 <form method="POST" action="{{ url('/iniciar_sesion') }}">                       @csrf
                    <div class="header">

                       
                        <!--<h5>Ficha Paciente</h5>-->
                    </div>

                    <h5 style="color:#474747;text-align:center;">Sesion expirada</h5>

                    <div class="content"> 

                        @if($errors->any())
                        
                            <h5 style="color:#474747;text-align:center;">{{session('errors')->first('message1')}}</h5>
                      
                        @endif 

                        <div class="input-group input-lg" >

                            <div class="oval-input-container">
                                <i class="zmdi zmdi-account-circle icon"></i>
                                <input id="rutlogin" type="" class="oval-input" placeholder="Ingrese Rut Empresa" name="rutlogin" required maxlength="12">
                            </div>

                        </div>

                        <div class="input-group input-lg" >

                            <div class="oval-input-container">
                                <i class="zmdi zmdi-account-circle icon"></i>
                                <input id="email" type="" class="oval-input" placeholder="Ingrese Usuario" name="email" required>
                            </div>
                            
                        </div>

                        <div class="input-group input-lg" >

                            <div class="oval-input-container">
                                <i class="zmdi zmdi-lock icon"></i>
                                <input  id="password" type="password" class="oval-input{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="Contraseña" name="password" required>
                                @if ($errors->has('password'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                            
                        </div>
                    </div>
                    <div class="footer text-center">
                        
                        <button type="submit" class="btn btn-primary btn-round btn-lg btn-block"  >
                            Entrar
                        </button>

                        <div style="margin-top: 15px;">
                            <a href="#" style="font-size: 12px !important;" class="link" id="recuperarcontradmin">Recuperar contraseña administrador</a>
                        </div>

                        
                       
                        <!--<div align="right">
                          <a href="crear_cuenta" class="btn btn-primary btn-round btn-lg btn-block">Crear cuenta</a>
                        </div>-->   

                        <!--<a href="{{route('dashboard.index')}}" class="btn btn-primary btn-round btn-lg btn-block ">Entrar</a>
                        <h5><a href="{{route('authentication.forgot-password')}}" class="link">Forgot Password?</a></h5>-->
                    </div>
                </form>
            </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 no-close">
        <p id="dialog_texto1"></p>
</div>

<div id="dialog_alerta2" name="dialog_alerta2" title="{{config('maestro.nombresistema')}}" align="center" class="selector no-close" >
        <p id="dialog_texto2"></p>
</div>

<div id="dialog_recuperarcontradmin" title="Recuperar contraseña administrador"> 
    <form>
        <div class="row clearfix">

            <div class="col-sm-2">                                
              <div class="d-flex justify-content-left align-items-left ml-0 p-1">
                  <label>Rut empresa</label>
              </div>
            </div>

            <div class="col-sm-4">
              <div class="form-group">
                  <input type="text" id="rutempresarecuperarcontradmin" name="rutempresarecuperarcontradmin" class="form-control" autocomplete="off" required placeholder="" maxlength="" value="">
              </div>
            </div>

            <div class="col-sm-2">                                
              <div class="d-flex justify-content-left align-items-left ml-0 p-1">
                  <label>Email admin.</label>
              </div>
            </div>

            <div class="col-sm-4">
              <div class="form-group">
                  <input type="text" id="emailadminrecuperarcontradmin" name="emailadminrecuperarcontradmin" class="form-control" autocomplete="off" required placeholder="" maxlength="" value="" style="text-transform:uppercase" size="40">
              </div>
            </div>

        </div>

        <div class="row clearfix" align="center">          
            <div class="col-sm-12">
                
                <button style="border-color:#18ce0f; color:#18ce0f;" type="button" class="btn btn-default btn-round btn-simple" id="btnsolicitarcodigoverificacion" name="btnsolicitarcodigoverificacion">Solicitar C&oacute;digo Verificaci&oacute;n</button>

                <button style="border-color:#FF3636; color:#FF3636;" type="button" id="btncancelarrecuperarcontradmin" class="btn btn-default btn-round btn-simple">Cancelar</button>

            </div>
        </div>

        </BR>

        <div id="divcodigorecuperarcontradmin" name="divcodigorecuperarcontradmin" align="center" style="display:none;">
                   
                <label for="name" style="font-size: 18px;">Por favor ingresar el c&oacute;digo de verificaci&oacute;n recibido en el email del administrador</label>

                </BR>

                <div class="col-sm-4">
                  <div class="form-group">
                      <input type="text" id="codigoverificacionrecuperarcontradmin" name="codigoverificacionrecuperarcontradmin" class="form-control" autocomplete="off" required placeholder="" maxlength="" value="" maxlength="6" style="text-align: center;">
                  </div>
                </div>

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

                <button style="border-color:#FF3636; color:#FF3636;" type="button" id="btncancelarconfirmarcodigoverificacion" class="btn btn-default btn-round btn-simple">Cancelar</button>
               
        </div>

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

    <script>

    $(function () {

        $("#dialog_alerta").dialog({ autoOpen: false });


        $("#email").change(function(){


            var regex = /[\w-\.]{2,}@([\w-]{1,}\.)*([\w-]{1,}\.)[\w-]{2,4}/;

            if (regex.test($('#email').val().trim())) {
                //alert('Correo validado');

            } else {
                //alert('La direccón de correo no es válida');
                $( "#dialog_texto" ).empty();
                $( "#dialog_texto" ).append("Formato Email inválido.");
                $( "#dialog_alerta" ).dialog('open');
                $(this).val("");
            }

            
        }); 


    });
    </script>
@stop