@extends('layouts.app')

@section('title', 'Restablecer contraseña - OnAPB')

@section('content')
<div class="container mt-5 mb-5">
    <div class="kinetic-card p-5 mx-auto" style="max-width:500px;">
        <h4 class="mb-4 text-center fw-bold">RESTABLECER CONTRASEÑA</h4>

        @if(session('mensaje'))
            <div class="alert border-0 text-center mb-4" style="background: rgba(13,202,240,0.1); border-radius: var(--radius-sm);">
                {!! session('mensaje') !!}
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger border-0 mb-4" style="border-radius: var(--radius-sm);">
                @foreach($errors->all() as $error)
                    <p class="mb-0 small">{{ $error }}</p>
                @endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('reset.password.post') }}">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">

            <div class="mb-3">
                <label class="form-label small fw-bold text-uppercase text-muted">Nueva contraseña</label>
                <div class="input-group">
                    <input type="password" name="password" class="form-control" required minlength="6">
                    <button class="btn btn-outline-secondary toggle-password" type="button">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>
            <div class="mb-4">
                <label class="form-label small fw-bold text-uppercase text-muted">Confirmar nueva contraseña</label>
                <div class="input-group">
                    <input type="password" name="password_confirmation" class="form-control" required minlength="6">
                    <button class="btn btn-outline-secondary toggle-password" type="button">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>
            <button type="submit" class="btn btn-primary w-100 btn-lg">Cambiar contraseña</button>
            <div class="text-center mt-4 pt-3 border-top border-light">
                <a href="{{ route('home') }}" class="text-muted small fw-bold text-decoration-none">
                    <i class="bi bi-arrow-left me-1"></i> Volver al inicio
                </a>
            </div>
        </form>
    </div>
</div>
@endsection