@extends('dashboard.layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="p-4 md:p-6 2xl:p-10">
    <div class="mx-auto">

        <!-- Alertas -->
        @if(isset($dashboardData['alertas']) && count($dashboardData['alertas']) > 0)
        <div class="mb-6 space-y-3">
            @foreach($dashboardData['alertas'] as $alerta)
            <div class="flex items-center p-4 rounded-lg border
                @if($alerta['tipo'] === 'urgente' || $alerta['tipo'] === 'danger') bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800
                @elseif($alerta['tipo'] === 'advertencia' || $alerta['tipo'] === 'warning') bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800
                @elseif($alerta['tipo'] === 'info' || $alerta['tipo'] === 'success') bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800
                @else bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 @endif">
                <div class="flex-shrink-0">
                    @if($alerta['tipo'] === 'urgente' || $alerta['tipo'] === 'danger')
                        <i data-lucide="x-circle" class="w-5 h-5 text-red-400"></i>
                    @elseif($alerta['tipo'] === 'advertencia' || $alerta['tipo'] === 'warning')
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-400"></i>
                    @elseif($alerta['tipo'] === 'info' || $alerta['tipo'] === 'success')
                        <i data-lucide="check-circle" class="w-5 h-5 text-green-400"></i>
                    @else
                        <i data-lucide="info" class="w-5 h-5 text-blue-400"></i>
                    @endif
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium 
                        @if($alerta['tipo'] === 'urgente') text-red-800 dark:text-red-200
                        @elseif($alerta['tipo'] === 'advertencia') text-yellow-800 dark:text-yellow-200
                        @elseif($alerta['tipo'] === 'info') text-green-800 dark:text-green-200
                        @else text-blue-800 dark:text-blue-200 @endif">
                        {{ $alerta['mensaje'] }}
                    </p>
                    <p class="text-xs 
                        @if($alerta['tipo'] === 'urgente') text-red-600 dark:text-red-300
                        @elseif($alerta['tipo'] === 'advertencia') text-yellow-600 dark:text-yellow-300
                        @elseif($alerta['tipo'] === 'info') text-green-600 dark:text-green-300
                        @else text-blue-600 dark:text-blue-300 @endif">
                        {{ $alerta['empresa'] }} • {{ $alerta['tiempo'] }}
                    </p>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        <!-- Métricas Principales -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Total Empresas -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                            <i data-lucide="building-2" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Empresas</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $dashboardData['metricas_generales']['total_empresas'] }}</p>
                    </div>
                </div>
            </div>

            <!-- Empresas Activas -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 dark:text-green-400"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Empresas Activas</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $dashboardData['metricas_generales']['empresas_activas'] }}</p>
                    </div>
                </div>
            </div>

            <!-- Usuarios Operativos -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
                            <i data-lucide="users" class="w-5 h-5 text-purple-600 dark:text-purple-400"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Usuarios Operativos</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $dashboardData['metricas_generales']['usuarios_operativos'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información Adicional -->
        <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Bienvenido a tu Dashboard</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">
                Desde aquí puedes gestionar todas las empresas asociadas a tu cuenta, administrar usuarios y configurar las opciones del sistema.
            </p>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                    <h4 class="font-medium text-blue-900 dark:text-blue-100 mb-2">Gestión de Empresas</h4>
                    <p class="text-sm text-blue-700 dark:text-blue-300">
                        Crea y administra las empresas que gestionas desde un panel centralizado.
                    </p>
                </div>
                <div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
                    <h4 class="font-medium text-green-900 dark:text-green-100 mb-2">Suscripciones</h4>
                    <p class="text-sm text-green-700 dark:text-green-300">
                        Revisa y gestiona las suscripciones de tus empresas y planes contratados.
                    </p>
                </div>
                <div class="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg">
                    <h4 class="font-medium text-purple-900 dark:text-purple-100 mb-2">Certificados Digitales</h4>
                    <p class="text-sm text-purple-700 dark:text-purple-300">
                        Gestiona los certificados digitales para la facturación electrónica.
                    </p>
                </div>
            </div>
        </div>


    </div>
</div>
@endsection