@extends('layouts.admin')

@section('title', 'Dashboard - Resumen General')

@section('content')

<!-- Botones de Acción Rápida -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
    <a href="{{ route('admin.users.create-personal') }}" class="bg-gradient-to-br from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 flex flex-col items-center justify-center transition transform hover:scale-105">
        <i class="fas fa-user-plus text-2xl sm:text-4xl mb-2"></i>
        <span class="text-xs sm:text-sm font-bold text-center">Personal Admin</span>
    </a>
    
    <a href="{{ route('admin.orders.dashboard') }}" class="bg-gradient-to-br from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 flex flex-col items-center justify-center transition transform hover:scale-105">
        <i class="fas fa-list-check text-2xl sm:text-4xl mb-2"></i>
        <span class="text-xs sm:text-sm font-bold text-center">Órdenes</span>
    </a>

    <a href="{{ route('admin.users.index') }}" class="bg-gradient-to-br from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 flex flex-col items-center justify-center transition transform hover:scale-105">
        <i class="fas fa-users text-2xl sm:text-4xl mb-2"></i>
        <span class="text-xs sm:text-sm font-bold text-center">Usuarios</span>
    </a>

    <a href="{{ route('flujo-diagnostika') }}" class="bg-gradient-to-br from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 flex flex-col items-center justify-center transition transform hover:scale-105">
        <i class="fas fa-diagram-project text-2xl sm:text-4xl mb-2"></i>
        <span class="text-xs sm:text-sm font-bold text-center">Ver Flujo</span>
    </a>
</div>

<!-- Panel de Métricas de Visitas -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 mb-8 border-l-4 border-cyan-600">
    <h3 class="text-base sm:text-lg font-bold text-cyan-700 mb-4">Tráfico y Visitas a la Web</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
        <div class="bg-cyan-50 rounded-lg p-4 border-l-4 border-cyan-400">
            <div class="flex items-center">
                <div class="p-2 bg-cyan-200 rounded-lg text-cyan-700 mr-3 flex-shrink-0">
                    <i class="fas fa-eye text-lg sm:text-2xl"></i>
                </div>
                <div>
                    <p class="text-xs sm:text-sm font-semibold uppercase text-cyan-700">Visitas Hoy</p>
                    <h3 class="text-xl sm:text-2xl font-bold text-cyan-900">{{ $visitasHoy }}</h3>
                </div>
            </div>
        </div>
        <div class="bg-cyan-50 rounded-lg p-4 border-l-4 border-cyan-400">
            <div class="flex items-center">
                <div class="p-2 bg-cyan-200 rounded-lg text-cyan-700 mr-3 flex-shrink-0">
                    <i class="fas fa-calendar-week text-lg sm:text-2xl"></i>
                </div>
                <div>
                    <p class="text-xs sm:text-sm font-semibold uppercase text-cyan-700">Visitas Semana</p>
                    <h3 class="text-xl sm:text-2xl font-bold text-cyan-900">{{ $visitasSemana }}</h3>
                </div>
            </div>
        </div>
        <div class="bg-cyan-50 rounded-lg p-4 border-l-4 border-cyan-400">
            <div class="flex items-center">
                <div class="p-2 bg-cyan-200 rounded-lg text-cyan-700 mr-3 flex-shrink-0">
                    <i class="fas fa-calendar-alt text-lg sm:text-2xl"></i>
                </div>
                <div>
                    <p class="text-xs sm:text-sm font-semibold uppercase text-cyan-700">Visitas Mes</p>
                    <h3 class="text-xl sm:text-2xl font-bold text-cyan-900">{{ $visitasMes }}</h3>
                </div>
            </div>
        </div>
        <div class="bg-cyan-50 rounded-lg p-4 border-l-4 border-cyan-400">
            <div class="flex items-center">
                <div class="p-2 bg-cyan-200 rounded-lg text-cyan-700 mr-3 flex-shrink-0">
                    <i class="fas fa-user-friends text-lg sm:text-2xl"></i>
                </div>
                <div>
                    <p class="text-xs sm:text-sm font-semibold uppercase text-cyan-700">Usuarios Únicos Hoy</p>
                    <h3 class="text-xl sm:text-2xl font-bold text-cyan-900">{{ $usuariosUnicosHoy }}</h3>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 mb-8">
    <!-- Total Usuarios Registrados -->
    <div class="bg-white rounded-lg sm:rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-blue-600 transition hover:scale-[1.02]">
        <div class="flex items-center">
            <div class="p-2 sm:p-3 bg-blue-100 rounded-lg text-blue-600 mr-2 sm:mr-4 flex-shrink-0">
                <i class="fas fa-users text-lg sm:text-2xl"></i>
            </div>
            <div class="min-w-0">
                <p class="text-gray-500 text-xs sm:text-sm font-semibold uppercase">Total Usuarios</p>
                <h3 class="text-2xl sm:text-3xl font-bold text-gray-800">{{ $usuariosRegistrados }}</h3>
            </div>
        </div>
    </div>

    <!-- Usuarios con Orden -->
    <div class="bg-white rounded-lg sm:rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-purple-600 transition hover:scale-[1.02]">
        <div class="flex items-center">
            <div class="p-2 sm:p-3 bg-purple-100 rounded-lg text-purple-600 mr-2 sm:mr-4 flex-shrink-0">
                <i class="fas fa-list-check text-lg sm:text-2xl"></i>
            </div>
            <div class="min-w-0">
                <p class="text-gray-500 text-xs sm:text-sm font-semibold uppercase">Con Orden</p>
                <h3 class="text-2xl sm:text-3xl font-bold text-gray-800">{{ $usuariosConOrden }}</h3>
            </div>
        </div>
    </div>

    <!-- Usuarios Atendidos -->
    <div class="bg-white rounded-lg sm:rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-green-600 transition hover:scale-[1.02]">
        <div class="flex items-center">
            <div class="p-2 sm:p-3 bg-green-100 rounded-lg text-green-600 mr-2 sm:mr-4 flex-shrink-0">
                <i class="fas fa-check-circle text-lg sm:text-2xl"></i>
            </div>
            <div class="min-w-0">
                <p class="text-gray-500 text-xs sm:text-sm font-semibold uppercase">Atendidos</p>
                <h3 class="text-2xl sm:text-3xl font-bold text-gray-800">{{ $usuariosAtendidos }}</h3>
            </div>
        </div>
    </div>

    <!-- Total Personal -->
    <div class="bg-white rounded-lg sm:rounded-xl shadow-md p-4 sm:p-6 border-l-4 border-orange-600 transition hover:scale-[1.02]">
        <div class="flex items-center">
            <div class="p-2 sm:p-3 bg-orange-100 rounded-lg text-orange-600 mr-2 sm:mr-4 flex-shrink-0">
                <i class="fas fa-user-tie text-lg sm:text-2xl"></i>
            </div>
            <div class="min-w-0">
                <p class="text-gray-500 text-xs sm:text-sm font-semibold uppercase">Personal</p>
                <h3 class="text-2xl sm:text-3xl font-bold text-gray-800">{{ $totalPersonal }}</h3>
            </div>
        </div>
    </div>
</div>

<!-- Últimos Usuarios Registrados -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6">
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0 mb-4 sm:mb-6">
        <h3 class="text-base sm:text-lg font-bold text-gray-800">Últimos Usuarios Registrados</h3>
        <a href="{{ route('admin.users.index') }}" class="text-blue-600 hover:text-blue-800 text-xs sm:text-sm font-semibold flex items-center w-fit">
            Ver todos <i class="fas fa-arrow-right ml-2"></i>
        </a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left text-xs sm:text-sm">
            <thead>
                <tr class="text-gray-400 border-b">
                    <th class="pb-3 px-2 uppercase text-xs font-bold">Nombres</th>
                    <th class="pb-3 px-2 uppercase text-xs font-bold hidden sm:table-cell">Correo</th>
                    <th class="pb-3 px-2 uppercase text-xs font-bold">Fecha</th>
                    <th class="pb-3 px-2 sm:px-4 uppercase text-xs font-bold text-right">Estado</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @foreach($recentUsers as $user)
                <tr class="hover:bg-gray-50 transition border-b border-gray-100">
                    <td class="py-4 px-2 text-sm font-bold text-gray-700 uppercase">{{ $user->name }}</td>
                    <td class="py-4 px-2 text-sm text-gray-500 lowercase">{{ $user->email }}</td>
                    <td class="py-4 px-2 text-sm text-gray-500">
                        {{ $user->created_at->locale('es')->format('d M, Y') }}
                    </td>
                    <td class="py-4 px-4 text-right">
                        @if($user->role == 'admin')
                            <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold uppercase ring-1 ring-purple-600 ring-inset">ADMIN</span>
                        @else
                            <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase ring-1 ring-green-600 ring-inset">USUARIO</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection