@extends('public.layouts.app')

@section('title', 'Restablecer Contraseña - ' . config('app.name'))

@section('content')
@push('styles')
<style>
  .card { border: none; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.10); }
  .card-body { padding: 2rem; }
  .form-control:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.15); }
</style>
@endpush
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-5 col-md-7 col-sm-12">
      <div class="card shadow-sm">
        <div class="card-body p-4">
          <h2 class="mb-4 text-center text-primary">
            <i class="fas fa-key me-2"></i>¿Olvidaste tu contraseña?
          </h2>
          <p class="mb-4 text-center">Ingresa tu correo electrónico y te enviaremos un enlace para restablecer tu contraseña.</p>
          <form method="POST" action="{{ route('password.email') }}" id="forgotForm" novalidate>
            @csrf
            <div class="mb-3">
              <label for="email" class="form-label">Correo electrónico</label>
              <input type="email" class="form-control" id="email" name="email" required autofocus autocomplete="email" placeholder="ejemplo@empresa.com">
              <div class="invalid-feedback" id="emailError"></div>
            </div>
            <div class="d-grid gap-2">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-paper-plane me-2"></i>Enviar enlace
              </button>
            </div>
          </form>
          <div class="mt-4 text-center">
            <a href="{{ route('login') }}">Volver al inicio de sesión</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('forgotForm');
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById('emailError');
  const submitBtn = form.querySelector('button[type="submit"]');

  function validateEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  function updateEmailValidation() {
    const email = emailInput.value.trim();
    const isValid = validateEmail(email);
    if (email === '') {
      emailInput.classList.remove('is-valid', 'is-invalid');
      emailError.textContent = '';
    } else if (isValid) {
      emailInput.classList.remove('is-invalid');
      emailInput.classList.add('is-valid');
      emailError.textContent = '';
    } else {
      emailInput.classList.remove('is-valid');
      emailInput.classList.add('is-invalid');
      emailError.textContent = 'Ingresa un correo electrónico válido';
    }
  }

  emailInput.addEventListener('input', updateEmailValidation);
  emailInput.addEventListener('blur', updateEmailValidation);

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    updateEmailValidation();
    if (!validateEmail(emailInput.value.trim())) {
      showErrorAlert('Por favor, ingresa un correo electrónico válido.', 'Error de validación');
      return;
    }
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Enviando...';
    fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        showSuccessAlert(data.message, 'Enlace enviado');
        form.reset();
        emailInput.classList.remove('is-valid', 'is-invalid');
      } else {
        showErrorAlert(data.message, 'Error');
        if (data.errors && data.errors.email) {
          emailInput.classList.add('is-invalid');
          emailError.textContent = data.errors.email[0];
        }
      }
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Enviar enlace';
    })
    .catch(error => {
      showErrorAlert('Error de conexión. Intenta nuevamente.', 'Error');
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Enviar enlace';
    });
  });
});
</script>
@endpush