@extends('layouts.app', [
'class' => 'off-canvas-sidebar',
'classPage' => 'login-page',
'activePage' => 'login',
'title' => '',
'titlePage' => 'Ingresar',
'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">Bienvenido</h1>
        <p class="text-center text-slate-600 text-sm font-medium">Por favor ingresa el nombre de tu licencia para acceder a la plataforma.</p>
      </div>
      <div class="px-8 py-6">
        @csrf
        <label for="instancias" class="block text-base font-semibold text-[#0A415F] mb-2">Nombre de la licencia</label>
        <input 
          type="text" 
          id="instancias" 
          name="instancias" 
          placeholder="Ejemplo: miempresa" 
          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"
        />
        <button 
          type="button" 
          onclick="redireccionar();" 
          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 hover:bg-indigo-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-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="M16 17l-4 4m0 0l-4-4m4 4V3"></path></svg>
          Acceder
        </button>
      </div>
      <div class="px-8 pb-6">
        <p class="text-sm text-slate-400 text-center mt-2">¿No conoces el nombre de tu licencia? Contacta a tu administrador o soporte técnico.</p>
      </div>
    </div>
  </div>
</div>

@endsection

@push('js')
<script>
  $(document).ready(function() {
    md.checkFullPageBackgroundImage();
  });
  $('#instancias').on('keypress', function(event) {
    if (event.keyCode === 13) {
      redireccionar()
    }
  })

  function redireccionar() {
    var ins = $('#instancias').val();
    if (ins != '') {
      Swal.fire({
        title: 'Verificando licencia',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
          Swal.showLoading();
        }
      });
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
          url: "{{ url('busca_licencias') }}",
          type: 'POST',
          dataType: 'json',
          data: {
            ins: ins
          },
        })
        .done(function(resp) {
          console.log("success");
          if (resp.estatus > 0) {
            const INSTANCE_NAME = "{{ env('INSTANCE_NAME') }}";
            if (INSTANCE_NAME === 'Resultoria') {
              subdominio = 'resultoria'
            } else {
              subdominio = 'app'
            }
            window.location.href = 'https://' + subdominio + '.ghp.com.mx/' + ins + '/public/login';
          } else {
            Swal.close();
            Swal.fire({
              icon: 'error',
              title: 'Licencia no encontrada o inválida',
              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;">La licencia ingresada no se encuentra registrada o se encuentra inhabilitada.<br>Verifica el nombre y vuelve a intentarlo.</p>',
              confirmButtonText: 'Intentar de nuevo',
              confirmButtonColor: '#3085d6',
              background: '#fff',
              timer: 6500,
              timerProgressBar: true,
              customClass: {
                popup: 'animated shake'
              }
            })
            return false;
          }
        })
        .fail(function() {
          Swal.close();
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });

    } else {
      Swal.fire({
        icon: 'warning',
        title: 'Campo vacío',
        html: `
          <div style="color:#FFA726;">
            <i class="fa fa-exclamation-triangle" style="font-size:48px;margin-bottom:10px;"></i>
          </div>
          <p style="font-size:16px;">Por favor ingresa una licencia antes de continuar.</p>
        `,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#6366F1',
        background: '#fff',
        timer: 4000,
        timerProgressBar: true,
        customClass: {
          popup: 'animate__animated animate__shakeX'
        }
      })
      return false;
    }

  }

  $("#loginForm").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    Swal.fire({
      title: 'Procesando',
      allowOutsideClick: false,
      showConfirmButton: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize()
      })
      .done(function(resp) {
        setTimeout(() => {
          location.replace("{{ url('/dashboard') }}")
        }, 2000);
      })
      .fail(function(resp) {
        Swal.close();
        setTimeout(() => {
          showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Licencias incorrectas o usuario desactivado, verifica la información.')
        }, 2000);
      }).always(function() {
        // Si hay navegación, el close no es necesario
      })
  });
</script>
@endpush