@extends('layouts.app', ['activePage' => 'dashboard', 'menuParent' => 'dashboard', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')
@php
  $modulosActivos = session('modulosActivos', []);
  $modulos = [
    [
      'key' => 'Mi espacio',
      'titulo' => 'Mi espacio',
      'descripcion' => 'Gestiona tus documentos, configuraciones y preferencias.',
      'icono' => 'fa fa-user-circle',
      'href' => url('mi-espacio'),
    ],
    [
      'key' => 'Facturacion',
      'titulo' => 'Facturación',
      'descripcion' => 'Gestión de facturas, notas de crédito y documentos fiscales.',
      'icono' => 'fa fa-money-bill',
      'href' => url('fact'),
    ],
    [
      'key' => 'Contabilidad',
      'titulo' => 'Contabilidad',
      'descripcion' => 'Gestión de registros contables, pólizas y reportes financieros.',
      'icono' => 'fa fa-calculator',
      'href' => url('contabilidad'),
    ],
    [
      'key' => 'Impuestos',
      'titulo' => 'Impuestos',
      'descripcion' => 'Gestión de declaraciones fiscales, cálculo de impuestos y papeles de trabajo.',
      'icono' => 'fa fa-building-columns',
      'href' => url('impuestos'),
    ],
    [
      'key' => 'Nominas',
      'titulo' => 'Nómina',
      'descripcion' => 'Gestión integral de empleados, cálculo de nóminas, pagos, prestaciones y timbrado de recibos.',
      'icono' => 'fa fa-users',
      'href' => url('nomina'),
    ],
    [
      'key' => 'Bancos',
      'titulo' => 'Bancos',
      'descripcion' => 'Administración de cuentas bancarias, movimientos y conciliaciones.',
      'icono' => 'fa fa-coins',
      'href' => route('bancos-modulo.index'),
    ],
    [
      'key' => 'Retenciones',
      'titulo' => 'Retenciones al extranjero',
      'descripcion' => 'Gestión y control de retenciones fiscales aplicadas a pagos al extranjero.',
      'icono' => 'fa fa-hand-holding-dollar',
      'href' => route('retenciones.index'),
    ],
    [
      'key' => 'Descarga XML',
      'titulo' => 'Descarga XML',
      'descripcion' => 'Descarga automática de facturas y comprobantes fiscales desde el SAT.',
      'icono' => 'fa fa-file-arrow-down',
      'href' => route('descarga-xml.index'),
    ],
    [
      'key' => 'Travelagent',
      'titulo' => 'Travelagent',
      'descripcion' => 'Gestión completa de agencias de viajes, reservas, itinerarios y operaciones turísticas.',
      'icono' => 'fa fa-plane',
      'href' => route('travelagent.home.index'),
    ],
    [
      'key' => 'Configuracion',
      'titulo' => 'Configuración',
      'descripcion' => 'Ajustes generales y administración del sistema.',
      'icono' => 'fa fa-cogs',
      'href' => route('configuracion.index'),
    ],
  ];
@endphp

<div class="content relative overflow-hidden">
  <div class="container-fluid mx-auto px-4 py-10 relative z-10">
    <div class="rounded-3xl border border-slate-200/80 bg-white/80 backdrop-blur-sm shadow-xl p-6 md:p-8 mb-8">
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-[#0A415F]">Panel de módulos</p>
          <h2 class="text-2xl md:text-3xl font-bold text-slate-800 mt-2">Acceso rápido a tus herramientas</h2>
          <p class="text-slate-600 mt-2">Ingresa a cada módulo desde un solo lugar y continúa tu flujo de trabajo.</p>
        </div>
        <div class="flex gap-3 flex-wrap">
          <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
            <p class="text-xs text-slate-500 uppercase tracking-wider">Módulos activos</p>
            <p class="text-2xl font-bold text-[#0A415F]">{{ count($modulosActivos) }}</p>
          </div>
          <div class="rounded-2xl border border-[#0A415F]/20 bg-[#0A415F]/5 px-4 py-3">
            <p class="text-xs text-slate-500 uppercase tracking-wider">Estado</p>
            <p class="text-sm font-semibold text-[#0A415F] flex items-center gap-2">
              <span class="inline-block h-2.5 w-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
              Operativo
            </p>
          </div>
        </div>
      </div>
    </div>

    @if(!empty($modulosActivos))
    <div id="modulos-skeleton" class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
      @for($i = 0; $i < 8; $i++)
      <div class="rounded-3xl border border-slate-200/90 bg-white/85 p-6 shadow-lg animate-pulse">
        <div class="h-14 w-14 rounded-2xl bg-slate-200 mb-5"></div>
        <div class="h-5 w-2/3 rounded bg-slate-200 mb-3"></div>
        <div class="h-4 w-full rounded bg-slate-200 mb-2"></div>
        <div class="h-4 w-5/6 rounded bg-slate-200 mb-8"></div>
        <div class="h-10 w-full rounded-xl bg-slate-200"></div>
      </div>
      @endfor
    </div>

    <div id="modulos-grid" class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 opacity-0 translate-y-3 transition-all duration-500 hidden">
      @foreach($modulos as $modulo)
      @if(in_array($modulo['key'], $modulosActivos))
      <article class="module-card group relative overflow-hidden rounded-3xl border border-slate-200/90 bg-white/85 backdrop-blur-sm p-6 shadow-lg transition-all duration-500 opacity-0 translate-y-4 hover:-translate-y-2 hover:shadow-2xl">
        <div class="absolute -right-10 -top-10 h-28 w-28 rounded-full bg-[#0A415F]/10 blur-2xl transition-all duration-300 group-hover:bg-[#0A415F]/20"></div>

        <div class="relative z-10 h-full flex flex-col">
          <div class="flex items-start justify-between mb-5">
            <div class="h-14 w-14 rounded-2xl bg-[#0A415F] text-white shadow-md flex items-center justify-center transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3">
              <i class="{{ $modulo['icono'] }} text-2xl"></i>
            </div>
            <span class="text-[11px] font-semibold tracking-widest uppercase text-green-100 bg-green-600 px-2.5 py-1 rounded-full">Activo</span>
          </div>

          <h3 class="text-lg font-semibold text-slate-800 mb-2 leading-tight">{{ $modulo['titulo'] }}</h3>
          <p class="text-sm text-slate-600 mb-6">{{ $modulo['descripcion'] }}</p>

          <a href="{{ $modulo['href'] }}" class="mt-auto inline-flex items-center justify-center gap-2 rounded-xl bg-[#0A415F] px-4 py-2.5 text-sm font-semibold text-white transition-all duration-300 hover:bg-[#083449] group-hover:shadow-lg">
            Acceder al módulo
            <i class="fa fa-arrow-right text-xs transition-transform duration-300 group-hover:translate-x-1"></i>
          </a>
        </div>
      </article>
      @endif
      @endforeach
    </div>
    @else

    <div class="flex items-center justify-center">
      <div class="max-w-2xl w-full">
        <div class="rounded-3xl border border-slate-200 bg-white/85 backdrop-blur-sm shadow-2xl p-8 text-slate-800 text-center relative overflow-hidden">
          <div class="absolute -top-16 left-1/2 -translate-x-1/2 h-44 w-44 rounded-full bg-[#0A415F]/10 blur-3xl"></div>
          <div class="relative z-10">
            <div class="inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-[#0A415F] text-white mb-4 shadow-lg animate-pulse">
              <i class="fa fa-exclamation-circle text-3xl"></i>
            </div>
            <h3 class="text-2xl font-semibold mb-2">Sin módulos activos</h3>
            <p class="font-medium text-slate-600">No hay módulos activos disponibles en este momento.</p>
          </div>
        </div>
      </div>
    </div>
    @endif

  </div>
</div>

@push('js')
<script>
  function getSesion() {
    $.ajax({
        url: '{{ url("home/get_bd") }}',
        type: 'POST',
        dataType: 'json',
        data: {
          param1: 'value1'
        },
      })
      .done(function(resp) {
        if (resp.data != '') {
          let html = '';
          $.each(resp.data, function(index, val) {
            html += '<option value="' + val.nombre + '">' + val.cliente + '</option>';
          });
          if ('{{ auth()->user()->id_perfil }}' == '1') {
            $('#bases').append(html);
            $("#bases").selectpicker('refresh');
          }
        }
      })
      .fail(function() {
        console.log("error");
      });
  }

  function seleccionaBd() {
    $.ajax({
        url: '{{ url("home/sel_bd") }}',
        type: 'POST',
        dataType: 'json',
        data: {
          bd: $('#bases').val()
        },
      })
      .done(function(resp) {
        const subdominio = '{{ env("INSTANCE_NAME") }}' == 'Resultoria' ? 'resultoria' : 'facturacion';
        window.location.href = 'https://' + subdominio + '.ghp.com.mx/' + $('#bases').val() + '/public/dashboard';
      })
      .fail(function() {
        console.log("error");
      });
  }

  document.addEventListener('DOMContentLoaded', function() {
    const skeleton = document.getElementById('modulos-skeleton');
    const grid = document.getElementById('modulos-grid');

    if (!skeleton || !grid) {
      return;
    }

    setTimeout(function() {
      skeleton.classList.add('hidden');
      grid.classList.remove('hidden');

      requestAnimationFrame(function() {
        grid.classList.remove('opacity-0', 'translate-y-3');

        const cards = grid.querySelectorAll('.module-card');
        cards.forEach(function(card, index) {
          setTimeout(function() {
            card.classList.remove('opacity-0', 'translate-y-4');
          }, index * 90);
        });
      });
    }, 550);
  });
</script>
@endpush
@endsection