@extends('layouts.app')

@section('title', 'Plataforma K2')

@section('head')
    @parent 
    <link rel="stylesheet" href="{{ asset('css/auth/styles.css') }}">
@endsection

@section('body-class', 'reset')

@section('content')
<div class="container">
    <nav class="navbar navbar-light my-3 py-2">
        <div id="logo">
            <img src="{{ asset('img/Logo_K2.svg') }}" class="ms-4" alt="Logo">
        </div>
    </nav>
</div>
<br><br>
<div class="container">
    <div class="row" id="">
        
        <div class="col-md-6 d-flex flex-column align-items-center justify-content-center">
        <br>
        <h1 class="text-wrapper mb-3 text-center">¿Olvidó su contraseña?</h1>
        @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
        @endif
        <form method="POST" action="{{ route('password.email')}}">
            @csrf
            <h2 class="text-wrapper-3 mb-3 mt-3">Por favor ingrese un correo electrónico para cambiar la contraseña.</h2>
            <div class="mb-3">
                <input type="email" class="input-width @error('email') is-invalid @enderror" id="email"
                    placeholder="Correo electrónico" name="email" required>
                @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
            <div class="mb-3">
                <button type="submit" class="button-IS w-100">Enviar</button>
            </div>
            <div class="mb-3">
                <button type="button" class="button-close w-100" onclick="window.location.href='/login'">Cancelar</button>
            </div>
        </form>
    </div>
    <div class="col-md-6 d-flex justify-content-center align-items-center">
        <img src="{{ asset('img/Icon2.png') }}" alt="Descripción de la imagen" class="img-fluid">
    </div>
</div>

<br><br>
<footer class="d-flex fixed-bottom justify-content-center flex-column align-items-center" style="width: 100%; bottom: -10px">
    <div class="d-flex gap-2 align-items-center">
        <p>Powered by</p>
        <img class="small-logo" src="{{ asset('img/Logo_K2.svg') }}" alt="Logo pequeño">
    </div>
    <img class="footer-img" src="{{ asset('img/footers_powered_by_K2 1.svg') }}" />
</footer>
@endsection