@extends('layouts.mobile')

@section('title', 'Recuperar contraseña')
@section('screen-label', 'Recuperar')
@section('bare', '1')

@section('content')
<div style="flex:1;display:flex;flex-direction:column;padding:24px 24px 28px;background:var(--bg-canvas);overflow-y:auto;"
     x-data="recuperarForm()">
    <a href="{{ route('login') }}" aria-label="Atrás" style="color:var(--ink-500);text-decoration:none;font-size:18px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-13px;"><i class="fa-solid fa-arrow-left"></i></a>

    <div style="margin:24px 0 22px;">
        <div style="font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--text-primary);">¿Contraseña olvidada?</div>
        <div class="fm-muted" style="font-size:14px;margin-top:6px;">Te enviamos un enlace al correo para crear una nueva.</div>
    </div>

    <template x-if="!sent">
        <form @submit.prevent="submit()" class="fm-stack" style="gap:14px;">
            <div><label class="fm-label" for="fmRecEmail">Correo</label>
                <input id="fmRecEmail" x-model="email" type="email" class="fm-input" autocomplete="email" required placeholder="tucorreo@ejemplo.com"></div>
            <p x-show="error" x-cloak x-text="error" style="margin:0;color:var(--rust-500);font:500 13px/1.4 var(--font-sans);"></p>
            <button type="submit" class="fm-btn fm-btn--gold fm-btn--block" :disabled="busy" x-text="busy ? 'Un momento…' : 'Enviarme el enlace'"></button>
        </form>
    </template>

    <template x-if="sent">
        <div class="fm-stack" style="gap:14px;text-align:center;padding-top:8px;">
            <span style="width:56px;height:56px;border-radius:50%;background:var(--green-050);color:var(--green-700);display:inline-flex;align-items:center;justify-content:center;margin:0 auto;font-size:22px;"><i class="fa-solid fa-envelope-circle-check"></i></span>
            <div style="font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--text-primary);">Revisa tu correo</div>
            <p class="fm-muted" style="font-size:14px;line-height:1.5;margin:0;">Si <strong x-text="email"></strong> tiene cuenta, el enlace ya va de camino. Cambia la contraseña desde el correo y vuelve aquí para entrar.</p>
            <a href="{{ route('login') }}" class="fm-btn fm-btn--gold fm-btn--block">Volver a entrar</a>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function recuperarForm() {
    return {
        email: '', busy: false, sent: false, error: '',
        async submit() {
            this.busy = true; this.error = '';
            try {
                await window.fmApi.post('/forgot-password', { email: this.email });
                this.sent = true;
            } catch (e) {
                this.error = (e.data && e.data.message) || e.message || 'No se pudo enviar el correo. Inténtalo de nuevo.';
            } finally {
                this.busy = false;
            }
        },
    };
}
</script>
@endpush