@extends('layout.authentication')
@section('title', 'Reservar Hora')

@section('page-style')

<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
<style type="text/css">
    .ui-dialog-titlebar{
        background-color:  #00cfd1;
    }
</style>

@stop

@section('content')
<div class="container">
    <div class="row justify-content-center">

        <div class="col-md-5 content-center"><br><br><br>
            <div class="card"  style="color: #00cfd1; ">
                <!-- <div class="card-header">caecera</div> -->
                
                <!-- <div class="card-plain" > -->
                    <form method="POST" action="{{ route('login') }}">                       @csrf
                    <div class="content"> 
                        <div class="form-group row">
                            <div class="col-md-12">
                                <h4 align="center">INGRESAR PARA<br>RESERVAR DE HORAS</h4>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-4" align="right" style="color: #000;">
                                <label for="email" class="col-form-label text-md-right">Email</label>
                            </div>                        

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" required >
                            </div> 
                        </div>
                        
                        <div class="form-group row">
                            <div class="col-md-4" align="right" style="color: #000;">
                                <label for="rut" class="col-form-label text-md-right">RUT</label>
                            </div>                           

                            <div class="col-md-6">
                                <input id="rut" type="text" class="form-control" name="rut" required autocomplete="off">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-4" align="right" style="color: #000;">
                                <label for="password" class="col-form-label text-md-right">Contraseña</label>
                            </div>
                            

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>


                        <div class="form-group row mb-0">
                            <div class="col-md-1"></div>
                            <div class="col-md-5" style="color: black;" align="left">Si no se ha registrado como paciente, presione el botón registrarse.</div>
                            <div class="col-md-1"></div>
                            <div class="col-md-4" align="right">
                                <button type="submit" class="btn btn-primary btn-round">
                                    Entrar
                                </button>

                                <a class="btn btn-primary btn-round" href="{{route('register')}}">Registrarse</a>

                                @if (Route::has('password.request'))
                                    <a class="btn btn-link" style="color:white;" href="{{ route('password.request') }}">
                                        {{ __('Recuperar contraseña?') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    </form>
                <!-- </div> -->
            </div> 
        </div>
    </div>
</div>



<div id="dialog" title="BRIX">
  <p>RUT es Inválido</p>
</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").dialog({ autoOpen: false });
        //$("#dialog2").dialog({ autoOpen: false });

        //$("input#rut").rut({formatOn: 'keyup', ignoreControlKeys: false});
        //focusout
        /*
        $("#rut").rut().on('rutValido', function(e, rut, dv) {
            alert("El rut " + rut + "-" + dv + " es correcto");
        }
        */

        $("input#rut").rut().on('rutInvalido', function(e) {            
            //alert("El rut es inválido");
            
            $( "#dialog" ).dialog('open');
            $(this).val("");

        });


    });
    </script>
@stop