@extends('public.layouts.login')

@section('title', 'Iniciar Sesión - ' . config('app.name'))

@section('content')
@push('styles')
<style>
  .validation-icon {
    transition: all 0.3s ease;
  }
  
  .input-group .form-control:focus + .input-group-text .validation-icon {
    border-color: #0d6efd;
  }
  
  .form-control.is-valid + .input-group-text .validation-icon {
    background-color: #d1e7dd;
    border-color: #198754;
  }
  
  .form-control.is-invalid + .input-group-text .validation-icon {
    background-color: #f8d7da;
    border-color: #dc3545;
  }
  
  .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
  }
  
  .card {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  
  .card-body {
    padding: 2rem;
  }
  
  .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  }
</style>
@endpush
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-4 col-md-6 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-sign-in-alt me-2"></i>Iniciar Sesión
          </h2>

          <form method="POST" action="{{ route('login.submit') }}" novalidate id="loginForm">
            @csrf
            <div class="mb-3">
              <label for="email" class="form-label">Correo electrónico</label>
              <input type="email" class="form-control @error('email') is-invalid @enderror" 
                     id="email" name="email" value="{{ old('email') }}" required autofocus 
                     autocomplete="email" placeholder="ejemplo@empresa.com">
              <div class="invalid-feedback" id="emailError"></div>
              @error('email')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Contraseña</label>
              <div class="input-group">
                <input type="password" class="form-control @error('password') is-invalid @enderror" 
                       id="password" name="password" required autocomplete="current-password"
                       placeholder="Ingresa tu contraseña">
                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
              <div class="invalid-feedback" id="passwordError"></div>
              @error('password')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="remember" name="remember">
              <label class="form-check-label" for="remember">Recuérdame</label>
            </div>
            
            <!-- Cloudflare Turnstile - DESACTIVADO TEMPORALMENTE -->
            {{-- <div class="mb-3">
              @include('public.components.turnstile', ['action' => 'login', 'theme' => 'light', 'size' => 'normal'])
            </div> --}}
            
            <div class="d-grid gap-2">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-sign-in-alt me-2"></i>Ingresar
              </button>
            </div>
          </form>

        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const emailError = document.getElementById('emailError');
    const passwordError = document.getElementById('passwordError');
    const togglePasswordBtn = document.getElementById('togglePassword');
    const submitBtn = loginForm.querySelector('button[type="submit"]');

    // Toggle para mostrar/ocultar contraseña
    togglePasswordBtn.addEventListener('click', function() {
      const type = passwordInput.type === 'password' ? 'text' : 'password';
      passwordInput.type = type;
      togglePasswordBtn.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
    });

    // Validación de email
    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';
      }
    }

    // Validación de contraseña
    function validatePassword(password) {
      return password.length >= 8;
    }

    function updatePasswordValidation() {
      const password = passwordInput.value;
      const isValid = validatePassword(password);
      
      if (password === '') {
        passwordInput.classList.remove('is-valid', 'is-invalid');
        passwordError.textContent = '';
      } else if (isValid) {
        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';
      }
    }

    // Event listeners para validación en tiempo real
    emailInput.addEventListener('input', updateEmailValidation);
    emailInput.addEventListener('blur', updateEmailValidation);
    passwordInput.addEventListener('input', updatePasswordValidation);
    passwordInput.addEventListener('blur', updatePasswordValidation);

    // Validación del formulario antes del envío
    function validateForm() {
      const email = emailInput.value.trim();
      const password = passwordInput.value;
      
      let isValid = true;
      
      // Validar email
      if (!validateEmail(email)) {
        emailInput.classList.add('is-invalid');
        emailError.textContent = 'Ingresa un correo electrónico válido';
        isValid = false;
      }
      
      // Validar contraseña
      if (!validatePassword(password)) {
        passwordInput.classList.add('is-invalid');
        passwordError.textContent = 'La contraseña debe tener al menos 8 caracteres';
        isValid = false;
      }
      
      return isValid;
    }

    // Manejo del envío del formulario
    loginForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Validar formulario antes de enviar
      if (!validateForm()) {
        showErrorAlert('Por favor, corrige los errores en el formulario antes de continuar.', 'Error de validación');
        return;
      }
      
      const formData = new FormData(loginForm);
      const originalText = submitBtn.innerHTML;
      
      // Deshabilitar botón y mostrar loading
      submitBtn.disabled = true;
      submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Iniciando sesión...';
      
      fetch(loginForm.action, {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          showSuccessAlert(data.message, 'Éxito');
          setTimeout(() => {
            window.location.href = data.redirect;
          }, 1500);
        } else {
          showErrorAlert(data.message, 'Error de inicio de sesión');
          submitBtn.disabled = false;
          submitBtn.innerHTML = originalText;
          
          // Mostrar errores específicos si existen
          if (data.errors) {
            if (data.errors.email) {
              emailInput.classList.add('is-invalid');
              emailError.textContent = data.errors.email[0];
            }
            if (data.errors.password) {
              passwordInput.classList.add('is-invalid');
              passwordError.textContent = data.errors.password[0];
            }
          }
        }
      })
      .catch(error => {
        console.error('Error:', error);
        showErrorAlert('Error de conexión. Por favor, intenta nuevamente.', 'Error');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
      });
    });

    // Efectos visuales adicionales
    emailInput.addEventListener('focus', function() {
      if (!emailInput.classList.contains('is-valid') && !emailInput.classList.contains('is-invalid')) {
        // Sin iconos, solo mantener el estilo del input
      }
    });

    passwordInput.addEventListener('focus', function() {
      if (!passwordInput.classList.contains('is-valid') && !passwordInput.classList.contains('is-invalid')) {
        // Sin iconos, solo mantener el estilo del input
      }
    });

    // Mostrar errores de validación con SweetAlert
    @if($errors->any())
      let errorMsg = '';
      @foreach($errors->all() as $error)
        errorMsg += '{{ $error }}\n';
      @endforeach
      showErrorAlert(errorMsg, 'Error de inicio de sesión');
    @endif

    // CAPTCHA DESACTIVADO TEMPORALMENTE - Simular comportamiento
    // Habilitar botón de envío inmediatamente
    if (submitBtn) {
      submitBtn.disabled = false;
      submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
    }
  });
</script>
@endpush