@extends('layout.authentication')
@section('title', 'Registro')
<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-12 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 Documento" 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 Email" 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>
                </form>
            </div>
        </div>
    </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 () {


        $("#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