@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-light my-3 py-2 start-0 mx-5">
        <div id="logo">
            <img src="{{ asset('img/Logo_K2.svg') }}" alt="Logo">
        </div>
    </nav>
</div>
<div class="container mt-5">
    <div class="row">
        <div class="col-lg-6 order-lg-1 order-1">
            <h1 class="text-wrapper mb-5">Cambio de contraseña</h1>
            <form method="POST" action="{{ route ('password.update')}}">
                @csrf
                <h2 class="text-wrapper-4 mb-4">Por favor ingrese su nueva contraseña.</h2>
                <input type="hidden" name="token" value="{{ $token }}">
                <div class="mb-3">
                    <input type="email" class="input-width @error('email') is-invalid @enderror" id="email"
                        placeholder="Email" value="{{$email}}" name="email" required readonly>
                </div>
                <div class="mb-3">
                    <input type="password" class="input-width @error('password') is-invalid @enderror" id="password"
                        placeholder="Nueva Contraseña" name="password" required autocomplete="new-password">
                    @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <div class="mb-3">
                    <input id="password-confirm" type="password" class="input-width" placeholder="Confirmar Contraseña"
                        name="password_confirmation" required autocomplete="new-password">
                    @error('password_confirmation')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <div class="mb-3">
                    <button type="submit" class="button-IS">Enviar</button>
                </div>
                <div class="mb-3">
                    <button type="submit" class="button-close" onclick="window.location.href='/login'">Cancelar</button>
                </div>
            </form>
        </div>
        <div class="col-lg-6 order-lg-2 order-2">
        <img src="{{ asset('img/Icon2.png') }}" alt="Descripción de la imagen" class="img-logo2">
        </div>
    </div>
</div>


<footer class="d-flex fixed-bottom justify-content-center flex-column align-items-center 
             position-absolute" style="width: 100%; bottom: -120px">
    <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