@extends('layouts.auth')

@section('title', 'Recuperar Contraseña')

@section('content')
<div class="login-page">
    <div class="login-sidebar">
        <div class="login-brand">
            <img src="{{ asset('assets/img/logo-siryc-white.png') }}" alt="SIRYC" onerror="this.style.display='none'">
            <h1>Sistema de Mantenimiento</h1>
            <p>Recuperación de contraseña</p>
        </div>
    </div>

    <div class="login-content">
        <div class="login-box">
            <div class="login-header">
                <h2>Recuperar Contraseña</h2>
                <p>Ingrese su correo electrónico y le enviaremos instrucciones para restablecer su contraseña.</p>
            </div>

            @if(session('success'))
            <div class="alert alert-success">
                <i class="fas fa-check-circle me-2"></i>
                {{ session('success') }}
            </div>
            @endif

            @if(session('error'))
            <div class="login-error">
                <i class="fas fa-exclamation-circle me-2"></i>
                {{ session('error') }}
            </div>
            @endif

            <form class="login-form" method="POST" action="{{ route('web.forgot-password.post') }}">
                @csrf

                <div class="form-group">
                    <label class="form-label" for="email">Correo Electrónico</label>
                    <div class="input-group">
                        <i class="input-icon fas fa-envelope"></i>
                        <input
                            type="email"
                            class="form-control @error('email') is-invalid @enderror"
                            id="email"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="ejemplo@correo.com"
                            required
                            autofocus
                        >
                    </div>
                    @error('email')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <button type="submit" class="btn btn-login">
                    Enviar Instrucciones
                </button>
            </form>

            <div class="login-footer">
                <a href="{{ route('web.login') }}">
                    <i class="fas fa-arrow-left me-1"></i>Volver al inicio de sesión
                </a>
            </div>
        </div>
    </div>
</div>
@endsection