@extends('layouts.app')

@section('title', 'Dashboard')

@section('breadcrumbs')
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')
<!-- Mensajes de estado -->
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('warning'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-triangle"></i> {{ session('warning') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(isset($demo_mode) && $demo_mode)
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <i class="fas fa-info-circle"></i> 
        <strong>Modo de demostración:</strong> Los datos mostrados son de ejemplo debido a problemas de conectividad con el servidor.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<!-- Estadísticas Generales -->
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ $stats['total_companies'] ?? 0 }}</h3>
                    <p class="mb-0">Total Empresas</p>
                </div>
                <div class="fs-1">
                    <i class="fas fa-building"></i>
                </div>
            </div>
            <div class="mt-2">
                <small>{{ $stats['active_companies'] ?? 0 }} activas</small>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="stats-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ $stats['active_company_plans'] ?? 0 }}</h3>
                    <p class="mb-0">Planes Activos</p>
                </div>
                <div class="fs-1">
                    <i class="fas fa-layer-group"></i>
                </div>
            </div>
            <div class="mt-2">
                <small>{{ $stats['total_plans'] ?? 0 }} planes disponibles</small>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="stats-card warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">${{ number_format($stats['monthly_revenue'] ?? 0, 0, ',', '.') }}</h3>
                    <p class="mb-0">Ingresos del Mes</p>
                </div>
                <div class="fs-1">
                    <i class="fas fa-dollar-sign"></i>
                </div>
            </div>
            <div class="mt-2">
                <small>{{ $stats['confirmed_payments'] ?? 0 }} pagos confirmados</small>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="stats-card info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ $stats['pending_payments'] ?? 0 }}</h3>
                    <p class="mb-0">Pagos Pendientes</p>
                </div>
                <div class="fs-1">
                    <i class="fas fa-clock"></i>
                </div>
            </div>
            <div class="mt-2">
                <small>Requieren atención</small>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Resumen de Planes -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-chart-pie"></i> Estado de Planes de Empresas
                </h5>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-primary" onclick="refreshStats()">
                        <i class="fas fa-sync-alt"></i> Actualizar
                    </button>
                </div>
            </div>
            <div class="card-body">
                @if(isset($company_plans_summary))
                <div class="row text-center">
                    <div class="col-md-2">
                        <div class="p-3">
                            <h4 class="text-success">{{ $company_plans_summary['active'] ?? 0 }}</h4>
                            <small class="text-muted">Activos</small>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="p-3">
                            <h4 class="text-warning">{{ $company_plans_summary['pending'] ?? 0 }}</h4>
                            <small class="text-muted">Pendientes</small>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="p-3">
                            <h4 class="text-info">{{ $company_plans_summary['suspended'] ?? 0 }}</h4>
                            <small class="text-muted">Suspendidos</small>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="p-3">
                            <h4 class="text-secondary">{{ $company_plans_summary['expired'] ?? 0 }}</h4>
                            <small class="text-muted">Expirados</small>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="p-3">
                            <h4 class="text-danger">{{ $company_plans_summary['cancelled'] ?? 0 }}</h4>
                            <small class="text-muted">Cancelados</small>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="p-3">
                            <h4 class="text-warning">{{ $company_plans_summary['expiring_soon'] ?? 0 }}</h4>
                            <small class="text-muted">Por Vencer</small>
                        </div>
                    </div>
                </div>
                @else
                <div class="text-center py-4">
                    <i class="fas fa-chart-pie fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No hay datos de planes disponibles</p>
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Acciones Rápidas -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-bolt"></i> Acciones Rápidas
                </h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-primary" onclick="alert('Próximamente')">
                        <i class="fas fa-plus"></i> Nueva Empresa
                    </button>
                    <button class="btn btn-outline-primary" onclick="alert('Próximamente')">
                        <i class="fas fa-layer-group"></i> Gestionar Planes
                    </button>
                    <button class="btn btn-outline-success" onclick="alert('Próximamente')">
                        <i class="fas fa-credit-card"></i> Ver Pagos
                    </button>
                    <button type="button" class="btn btn-outline-info" onclick="showExpiringPlans()">
                        <i class="fas fa-exclamation-triangle"></i> Planes por Vencer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Información del Sistema -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fas fa-info-circle"></i> Sistema SISCON Backoffice
        </h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="text-center p-4">
                    <i class="fas fa-building fa-3x text-primary mb-3"></i>
                    <h5>Gestión de Empresas</h5>
                    <p class="text-muted">Administra las empresas registradas en el sistema y gestiona sus configuraciones específicas.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <i class="fas fa-layer-group fa-3x text-success mb-3"></i>
                    <h5>Planes de Servicio</h5>
                    <p class="text-muted">Controla los planes disponibles, suscripciones activas y configuraciones de precios.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <i class="fas fa-chart-bar fa-3x text-info mb-3"></i>
                    <h5>Análisis y Reportes</h5>
                    <p class="text-muted">Visualiza estadísticas detalladas y genera reportes comprensivos del sistema.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function refreshStats() {
        // Mostrar loading
        const btn = event.target.closest('button');
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Actualizando...';
        btn.disabled = true;
        
        // Simular actualización (en producción sería una llamada AJAX)
        setTimeout(() => {
            location.reload();
        }, 1000);
    }
    
    function showExpiringPlans() {
        // Scroll a la sección de planes por vencer si existe
        const section = document.querySelector('.card:has(.fa-exclamation-triangle)');
        if (section && section.closest('.row')) {
            section.scrollIntoView({ behavior: 'smooth' });
            section.style.border = '2px solid #ffc107';
            setTimeout(() => {
                section.style.border = '';
            }, 2000);
        } else {
            alert('No hay planes próximos a vencer en este momento');
        }
    }
    
    // Auto-refresh cada 5 minutos
    setInterval(() => {
        console.log('Auto-refreshing dashboard stats...');
        // En producción aquí haríamos fetch a una API para actualizar stats
    }, 300000); // 5 minutos
</script>
@endpush