@extends('public.layouts.app')

@section('title', 'Nueva 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-lock me-2"></i>Restablecer Contraseña
          </h2>
          <form method="POST" action="{{ route('password.update') }}" id="resetForm" novalidate>
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">
            <input type="hidden" name="email" value="{{ $email }}">
            <div class="mb-3">
              <label for="password" class="form-label">Nueva contraseña</label>
              <input type="password" class="form-control" id="password" name="password" required placeholder="Mínimo 8 caracteres">
              <div class="invalid-feedback" id="passwordError"></div>
            </div>
            <div class="mb-3">
              <label for="password_confirmation" class="form-label">Confirmar contraseña</label>
              <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required placeholder="Repite la nueva contraseña">
              <div class="invalid-feedback" id="passwordConfirmationError"></div>
            </div>
            <div class="d-grid gap-2">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-2"></i>Guardar nueva contraseña
              </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('resetForm');
  const passwordInput = document.getElementById('password');
  const passwordConfirmationInput = document.getElementById('password_confirmation');
  const passwordError = document.getElementById('passwordError');
  const passwordConfirmationError = document.getElementById('passwordConfirmationError');
  const submitBtn = form.querySelector('button[type="submit"]');

  function validatePassword(password) {
    return password.length >= 8;
  }

  function updatePasswordValidation() {
    const password = passwordInput.value;
    if (password === '') {
      passwordInput.classList.remove('is-valid', 'is-invalid');
      passwordError.textContent = '';
    } else if (validatePassword(password)) {
      passwordInput.classList.remove('is-invalid');
      passwordInput.classList.add('is-valid');
      passwordError.textContent = '';
    } else {
      passwordInput.classList.remove('is-valid');
      passwordInput.classList.add('is-invalid');
      passwordError.textContent = 'La contraseña debe tener al menos 8 caracteres';
    }
  }

  function updatePasswordConfirmationValidation() {
    const password = passwordInput.value;
    const confirmation = passwordConfirmationInput.value;
    if (confirmation === '') {
      passwordConfirmationInput.classList.remove('is-valid', 'is-invalid');
      passwordConfirmationError.textContent = '';
    } else if (password === confirmation) {
      passwordConfirmationInput.classList.remove('is-invalid');
      passwordConfirmationInput.classList.add('is-valid');
      passwordConfirmationError.textContent = '';
    } else {
      passwordConfirmationInput.classList.remove('is-valid');
      passwordConfirmationInput.classList.add('is-invalid');
      passwordConfirmationError.textContent = 'Las contraseñas no coinciden';
    }
  }

  passwordInput.addEventListener('input', function() {
    updatePasswordValidation();
    updatePasswordConfirmationValidation();
  });
  passwordConfirmationInput.addEventListener('input', updatePasswordConfirmationValidation);

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    updatePasswordValidation();
    updatePasswordConfirmationValidation();
    if (!validatePassword(passwordInput.value)) {
      showErrorAlert('La contraseña debe tener al menos 8 caracteres.', 'Error de validación');
      return;
    }
    if (passwordInput.value !== passwordConfirmationInput.value) {
      showErrorAlert('Las contraseñas no coinciden.', 'Error de validación');
      return;
    }
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Guardando...';
    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, 'Contraseña restablecida');
        setTimeout(() => { window.location.href = data.redirect; }, 1500);
      } else {
        showErrorAlert(data.message, 'Error');
        if (data.errors && data.errors.password) {
          passwordInput.classList.add('is-invalid');
          passwordError.textContent = data.errors.password[0];
        }
        if (data.errors && data.errors.password_confirmation) {
          passwordConfirmationInput.classList.add('is-invalid');
          passwordConfirmationError.textContent = data.errors.password_confirmation[0];
        }
      }
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Guardar nueva contraseña';
    })
    .catch(error => {
      showErrorAlert('Error de conexión. Intenta nuevamente.', 'Error');
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Guardar nueva contraseña';
    });
  });
});
</script>
@endpush