@extends('layouts.app', [
'class' => 'off-canvas-sidebar',
'classPage' => 'login-page',
'activePage' => 'login',
'title' => '',
'pageBackground' => 'white'
])

@section('content')
@include('includes.tailwind')

<div class="min-h-screen w-full flex flex-col items-center justify-center py-10 px-4 relative" style="z-index: 1000; background: white;">
  <!-- Logo fuera del card y más grande -->
  <div class="mb-8 relative z-20">
    <img src="https://ghp.com.mx/assets/images/logo-dark.png" alt="Logo" class="h-[200px] w-auto">
  </div>
  
  <!-- Elementos decorativos animados -->
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute w-96 h-96 bg-[#0A415F]/40 rounded-full -top-48 -left-48 animate-pulse"></div>
    <div class="absolute w-72 h-72 bg-[#0A415F]/40 rounded-full top-1/2 -right-36 animate-pulse" style="animation-delay: 1s;"></div>
    <div class="absolute w-64 h-64 bg-[#0A415F]/40 rounded-full bottom-0 left-1/3 animate-pulse" style="animation-delay: 2s;"></div>
  </div>
  
  <div class="w-full max-w-md relative z-10">
    <div class="bg-white rounded-3xl shadow-2xl border border-indigo-200">
      <div class="px-8 py-6 border-b border-indigo-100">
        <h1 class="text-3xl font-bold text-[#0A415F] text-center mb-1">{{ __('Iniciar sesión') }}</h1>
        <p class="text-center text-slate-600 text-sm font-medium">Ingresa tus credenciales para acceder a la plataforma.</p>
      </div>
      <div class="px-8 py-6">
        <form method="POST" id="loginForm" action="{{ route('login') }}">
          @csrf
          
          <div class="mb-6">
            <label for="exampleEmails" class="block text-base font-semibold text-[#0A415F] mb-2">{{ __('Correo o usuario') }}</label>
            <input 
              type="email" 
              id="exampleEmails" 
              name="email" 
              placeholder="{{ __('Correo o usuario...') }}" 
              class="block w-full rounded-xl border border-indigo-300 bg-white px-4 py-3 text-[#0A415F] placeholder-indigo-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-base transition"
              required
            />
          </div>
          
          <div class="mb-6">
            <label for="examplePassword" class="block text-base font-semibold text-[#0A415F] mb-2">{{ __('Contraseña') }}</label>
            <input 
              type="password" 
              id="examplePassword" 
              name="password" 
              placeholder="{{ __('Contraseña...') }}" 
              class="block w-full rounded-xl border border-indigo-300 bg-white px-4 py-3 text-[#0A415F] placeholder-indigo-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-base transition"
              required
            />
          </div>
          
          <button 
            type="submit" 
            class="mt-6 w-full flex items-center justify-center gap-2 rounded-xl bg-[#0A415F] px-5 py-3 text-white font-semibold text-lg shadow-lg  transition-all duration-200 focus:outline-none focus:ring-2"
          >
            <svg class="w-5 h-5 mr-2 -ml-1 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
            {{ __('Ingresar') }}
          </button>
        </form>
      </div>
      <div class="px-8 pb-6">
        <p class="text-sm text-slate-400 text-center mt-2">¿Problemas para acceder? Contacta a tu administrador o soporte técnico.</p>
      </div>
    </div>
  </div>
</div>
@endsection

@push('js')
<script>
  $(document).ready(function() {
    md.checkFullPageBackgroundImage();
  });

  $("#loginForm").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    Swal.fire({
      title: 'Verificando credenciales',
      allowOutsideClick: false,
      showConfirmButton: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        dataType: 'json'
      })
      .done(function(resp) {
        Swal.close();
        // Si la respuesta es exitosa, redirigir
        if (resp.success) {
          window.location.href = resp.redirect || '{{url("/dashboard")}}';
        } else {
          // Si hay un error en la respuesta exitosa
          Swal.fire({
            icon: 'error',
            title: 'Error en el login',
            text: resp.message || 'Ocurrió un error inesperado',
            confirmButtonText: 'Intentar de nuevo',
            confirmButtonColor: '#3085d6'
          });
        }
      })
      .fail(function(xhr) {
        Swal.close();
        // Verificar si es un error de autenticación
        if (xhr.status === 422 || xhr.status === 401) {
          let response = xhr.responseJSON;
          Swal.fire({
            icon: 'error',
            title: 'Credenciales incorrectas',
            html: '<div style="color:#A94442;"><i class="fa fa-times-circle" style="font-size:48px;margin-bottom:10px;"></i></div>' +
              '<p style="font-size:16px;">' + (response?.message || 'Las credenciales ingresadas son incorrectas o el usuario se encuentra desactivado.') + '<br>Verifica la información y vuelve a intentarlo.</p>',
            confirmButtonText: 'Intentar de nuevo',
            confirmButtonColor: '#3085d6',
            background: '#fff',
            timer: 6500,
            timerProgressBar: true,
            customClass: {
              popup: 'animated shake'
            }
          })
        } else {
          // Para otros tipos de errores, mostrar mensaje genérico
          Swal.fire({
            icon: 'error',
            title: 'Error de conexión',
            text: 'No se pudo conectar con el servidor. Verifica tu conexión e intenta de nuevo.',
            confirmButtonText: 'Intentar de nuevo',
            confirmButtonColor: '#3085d6'
          });
        }
      })
  });
</script>
@endpush