@extends('unal-new')

@section('content')

@if(isset($limit_date))
    <div class="row">
        <div class="col-12 text-center mt-5">
            <div class="alert alert-warning">
                <h4>Periodo cerrado</h4>
                <p>El plazo para el envío de documentación ha culminado. Fecha límite: <strong>{{ $limit_date }}</strong></p>
            </div>
        </div>
    </div>
@else

<div class="bg-primary-90 rounded-end-top-unal d-flex flex-column flex-grow-1">
  <!--<div class="col-sm-12   col-md-6 col-md-offset-3" style="border-radius: 5px 5px 5px 5px; box-shadow: 3px 3px 10px #888888; padding: 3px; background-color:#b5c8e1">-->

    <!--<div class="col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1"><br>-->
      <!--<div class="escudocabecera">
        <img src="{{env('APP_URL')}}images/logosimbolo_central_2c.png" width="40%">
      </div>-->
      @if (count($errors) > 0)
      <div class="alert alert-danger">
        <ul>
          @foreach ($errors->all() as $error)
          <li style="height: 36px; display: flex; align-items: center;">{{ $error }}</li>
          @endforeach
        </ul>
      </div>
      @endif

      @if (Session::has('status'))
      <div class="alert alert-success">
        {{ Session::get('status') }}
      </div>
      @endif
      @if (Session::has('warning'))
      <div class="alert alert-warning">
        {{ Session::get('warning') }}
      </div>
      @endif
      <div class="container d-flex flex-column flex-grow-1">
        <div class="d-flex column-gap-15 row-gap-4 flex-column justify-content-center align-items-center py-2 px-4 flex-grow-1 flex-lg-row">
          <div class="d-flex flex-column row-gap-4 row-gap-lg-8 col-lg px-lg-10 text-center text-lg-start"
                id="information">
            <p class="fw-bold lh-1 text-primary-10 display-5">{{env("APP_NAME")}}</p>
            <h4 class="text-wrap text-justify fw-light text-primary-10">A través de esta plataforma podrás postularte al concurso docente {{env("APP_NAME")}}</h4>
          </div>
            <form name="login" id="login" method="post" action="{{ env('APP_URL') }}auth/login" class="col-lg login rounded-4">
              <div class="vstack justify-content-center align-self-stretch login-body">
                {!! csrf_field() !!}
              <h3 align="center" class="text-center mb-3 text-primary-10">Iniciar Sesión</h3>
                <div class="vstack gap-5">
                  <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" style="max-width: 300px" placeholder="micorreo@miproveedor.com" required>
                        </div>
                    </div> 
                    {{--  <div class="form-group">
                      <center style="
                      background: bisque;
                      padding: 15px;
                      border-radius: 5px;">
                    <b>El periodo de diligenciamiento del formulario ha finalizado.</b></center>
                    </div>--}}
                    <div class="form-group">
                      <label for="password" class="form-label required">Contraseña</label>
                      <div class="input-group">
                        <span class="input-group-text start material-symbols-outlined"translate='no'>lock</span>
                        <input class="form-control" type="password" name="password" id="password" style="max-width: 300px" placeholder="Clave de ingreso" required>
                        <span class="input-group-text end material-symbols-outlined password-toggle" translate='no' style="cursor: pointer;">visibility_off</span>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class=" d-flex justify-content-center">
                        {!! Recaptcha::render() !!}
                      </div>
                    </div>
                  </div>
                  <hr class="hr bg-neutral-80" />
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" required />
                    <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 acepto los términos descritos en la 
                      <a class="link link-primary" href="https://legal.unal.edu.co/rlunal/home/doc.jsp?d_i=93798" target="_blank">Política de Tratamiento de Datos Personales</a>
                    </label>
                  </div>
                  <button type="submit" class="btn btn-primary" type="submit" name="envio">Ingresar</button>
                  <a href="{{ env('APP_URL') }}password/email" class="link link-primary text-center w-100">¿Olvidó su contraseña?</a>
                </div>
              </div>
              <div class="border-top border-neutral-80 text-center py-4" id="registerLink">
                <a href="register" class="link link-neutral-50 link-underline w-100 fw-regular">¿No se ha registrado? Registrese aquí</a>
              </div>
            </form>
        </div>
      </div>
    <!--</div>-->
  <!--</div>-->
</div>
<script>
       window.onload = function () {
           var $recaptcha = document.querySelector('#g-recaptcha-response');
           if ($recaptcha) {
               $recaptcha.setAttribute("required", "required");
           }
       };
   </script>
<style>
  a{
    color: #677D29
  }
  .login-container {
    display: flex;
    min-height: 80vh;
    overflow-x: hidden;
  }
  .login-container > * {
    max-width: 100%;
    flex-shrink: 1;
  }
  .left-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    margin-left: 200px;
  }
  .right-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  }
  .login-form {
    background-color: #c4d5ed;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
  }

  .login-form .form-group {
    margin-bottom: 1rem;
    align-items: center;
    align-content: center;
  }

  .login-card {
    background-color: #f0f4fb;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
    max-height: 700px;
  }

  .form-control {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
  }

  .title-margin{
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .new-button{
    background-color: rgb(102, 122, 42);
    color: rgb(255, 255, 255);
    max-width: 300px;
  }
</style>
@endif

@include('components.error-alert')
@include('components.auth-styles')
@include('components.auth-scripts')
@stop