@extends('unal-new')

@section('content')
<div class="bg-primary-90 d-flex flex-column justify-content-center align-items-center py-7 px-4 flex-grow-1 flex-lg-row bg-opacity-100">
    <form class="reset-password rounded-5" name="registro" id="registro" method="post"
        action="{{ env('APP_URL') }}password/email">

        <div class="position-relative">
            <div class="position-absolute top-0 start-0 prev pt-8">
                <a class="link link-neutral-70 d-flex" href="{{ url('auth/login') }}">
                    <span class="material-symbols-outlined icon-md" translate='no'>west</span>
                </a>
            </div>
        </div>

        <div class="content pt-8 px-6">
            <!--<div class="escudocabecera"><img src="{{env('APP_URL')}}images/logosimbolo_central_2c.png" width="40%"></div>-->
            <div>
                <p align="center" class="text-center text-neutral-30 title">Restablecer contraseña  {{env("APP_NAME")}}</p>
            </div>
            <div class="body">
                @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @elseif(isset($msg))
                <div class="alert alert-success">
                    <ul>
                        <li>El correo para restablecimiento de contraseña se ha enviado satisfactoriamente</li>
                    </ul>
                </div>
                @endif
                {!! csrf_field() !!}
                <div class="vstack gap-3">
                    <div>
                        <label for="email" class="form-label required">Correo electrónico</label>
                        <div class="input-group">
                            <span class="input-group-text start material-symbols-outlined" translate='no'>email</span>
                            <input type="email" name="email" id="email" class="form-control" placeholder="micorreo@miproveedor.com" value="{{ old('email') }}" required>
                        </div>
                    </div>
                    <div class=" d-flex justify-content-center">
                        {!! Recaptcha::render() !!}
                    </div>
                    <div class="form-group">
                        <center><a href="{{ env('APP_URL') }}auth/register"><b>¿No se ha registrado? Registrese aquí</b></a></center>
                    </div>
                    <!--<div class="form-group">
                        <p align="center"><b>&nbsp;Si tiene usuario y contraseña, por favor ingrese <a href="{{ env('APP_URL') }}auth/login">aquí</a>.</b></p>
                    </div>-->
                </div>
                <hr class="hr bg-neutral-80" />
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" required checked>
                    <label class="form-check-label text-justify">
                        De acuerdo a la Ley 1581 de 2012 de Protección de Datos Personales, he leído, entendido y
                        aceptado los
                        términos
                        descritos en la <a class="link link-primary"
                            href="https://unal.edu.co/proteccion-de-datos-personales" target="_blank">Política de
                            Tratamiento
                            de
                            Datos Personales</a>.
                    </label>
                </div>
                <button class="btn btn-primary w-100"  type="submit" id="submit" name="envio">Reiniciar contraseña</button>
            </div>
        </div>
    </form>
</div>

<script>

    (function () {
    /*  document.getElementById('email').addEventListener('keypress', function() {
        if(isEmail(this.value)) {
                document.getElementById("submit").disabled = false;
        } else {
               document.getElementById("submit").disabled = true;
        }
    });
    function isEmail(email) {
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      return regex.test(email);
    }*/

      document.addEventListener('DOMContentLoaded', function() {
          var envioButton = document.querySelector('[name=envio]');
          if (envioButton) {
              envioButton.addEventListener('click', function() {
                  alert("El correo para restablecimiento de contraseña se ha enviado satisfactoriamente.");
              });
          }
      });

		})();

</script>

<style>
    .container-form {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .center-card{
        padding: 1rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-width: 700px;
        max-height: 700px;
        width: 90%;
    }

    .new-button{
        background-color: rgb(102, 122, 42);
        color: rgb(255, 255, 255);
        max-width: 300px;
    }

    .back-arrow {
        font-size: 1.5rem;
        text-decoration: none;
        color: #444;
        margin-right: 10px;
        vertical-align: middle;
    }
</style>
@include('components.error-alert')
@include('components.auth-styles')
@include('components.auth-scripts')
@stop