{{-- resources/views/dashboard/gestion.blade.php --}}
@extends('layouts.app')

@section('title', 'Dashboard - Gestión')

@push('styles')
<style>
    .gestion-card {
        transition: all 0.3s;
    }
    .gestion-card:hover {
        transform: translateY(-3px);
    }
    .system-stats {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
</style>
@endpush

@section('content')
<div class="content">
    {{-- Cabecera --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-1">
                <i class="fa fa-cog me-2 text-secondary"></i>Panel de Gestión
            </h1>
            <p class="text-muted mb-0">Administración de usuarios, catálogos y configuración del sistema</p>
        </div>
        @if(session('tipo_usuario') == 1)
        <div>
            <a href="{{ route('usuarios.create') }}" class="btn btn-primary">
                <i class="fa fa-user-plus me-1"></i> Nuevo Usuario
            </a>
        </div>
        @endif
    </div>

    {{-- KPIs de Gestión --}}
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="block block-rounded gestion-card">
                <div class="block-content block-content-full text-center">
                    <i class="fa fa-users fa-2x text-primary mb-2"></i>
                    <div class="fs-2 fw-bold">{{ number_format($totalUsuarios) }}</div>
                    <div class="text-muted">Total Usuarios</div>
                    <small class="text-success">{{ $usuariosActivos }} activos</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="block block-rounded gestion-card">
                <div class="block-content block-content-full text-center">
                    <i class="fa fa-user-tie fa-2x text-success mb-2"></i>
                    <div class="fs-2 fw-bold">{{ number_format($totalCobradores) }}</div>
                    <div class="text-muted">Cobradores</div>
                    <small class="text-muted">Registrados</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="block block-rounded gestion-card">
                <div class="block-content block-content-full text-center">
                    <i class="fa fa-chalkboard-user fa-2x text-info mb-2"></i>
                    <div class="fs-2 fw-bold">{{ number_format($totalVendedores) }}</div>
                    <div class="text-muted">Vendedores</div>
                    <small class="text-muted">Registrados</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="block block-rounded gestion-card system-stats">
                <div class="block-content block-content-full text-center">
                    <i class="fa fa-database fa-2x mb-2"></i>
                    <div class="fs-2 fw-bold">{{ number_format($dbSize / 1024 / 1024, 2) }} MB</div>
                    <div class="opacity-75">Tamaño BD</div>
                </div>
            </div>
        </div>
    </div>

        {{-- Acciones de Gestión --}}
    <div class="block block-rounded mb-4">
        <div class="block-header block-header-default">
            <h3 class="block-title">
                <i class="fa fa-tools me-1 text-warning"></i> Herramientas de Gestión
            </h3>
        </div>
        <div class="block-content">
            <div class="row g-3">
                <div class="col-md-3 col-6">
                    <a href="{{ route('cobradores-vendedores.index', ['tipo' => 'cobradores']) }}" class="gestion-card d-block p-3 text-center rounded bg-body-light">
                        <i class="fa fa-user-tie fa-2x text-primary mb-2"></i>
                        <div class="fw-semibold">Cobradores</div>
                        <small class="text-muted">Gestión de cobradores</small>
                    </a>
                </div>
                <div class="col-md-3 col-6">
                    <a href="{{ route('cobradores-vendedores.index', ['tipo' => 'vendedores']) }}" class="gestion-card d-block p-3 text-center rounded bg-body-light">
                        <i class="fa fa-chalkboard-user fa-2x text-success mb-2"></i>
                        <div class="fw-semibold">Vendedores</div>
                        <small class="text-muted">Gestión de vendedores</small>
                    </a>
                </div>
                <div class="col-md-3 col-6">
                    <a href="{{ route('seguimiento.index') }}" class="gestion-card d-block p-3 text-center rounded bg-body-light">
                        <i class="fa fa-binoculars fa-2x text-info mb-2"></i>
                        <div class="fw-semibold">Seguimiento</div>
                        <small class="text-muted">Actividad del sistema</small>
                    </a>
                </div>
                <div class="col-md-3 col-6">
                    <a href="{{ route('backup.index') }}" class="gestion-card d-block p-3 text-center rounded bg-body-light">
                        <i class="fa fa-cloud-upload-alt fa-2x text-warning mb-2"></i>
                        <div class="fw-semibold">Backup</div>
                        <small class="text-muted">Respaldos de seguridad</small>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Actividad Reciente del Sistema --}}
    <div class="row g-3 mb-4">
        <div class="col-xl-7">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        <i class="fa fa-history me-1 text-secondary"></i> Últimos Accesos
                    </h3>
                    <span class="badge bg-primary">{{ $accionesHoy ?? 0 }} acciones hoy</span>
                </div>
                <div class="block-content p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-vcenter fs-sm mb-0">
                            <thead>
                                <tr class="bg-body-light">
                                    <th>Usuario</th>
                                    <th>Fecha</th>
                                    <th>Hora</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($ultimosAccesos ?? [] as $acceso)
                                <tr>
                                    <td class="fw-semibold">{{ $acceso->login ?? 'N/A' }}</td>
                                    <td>{{ $acceso->fecha_local ?? $acceso->fecha }}</td>
                                    <td>{{ $acceso->hora_formateada ?? substr($acceso->hora ?? '', 0, 5) }}</td>
                                    
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">
                                        <i class="fa fa-inbox fa-2x mb-2 d-block"></i>
                                        No hay registros de acceso
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-5">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        <i class="fa fa-chart-bar me-1 text-warning"></i> Actividad por Usuario
                    </h3>
                    <span class="text-muted fs-xs">Último mes</span>
                </div>
                <div class="block-content">
                    <canvas id="chartActividadUsuario" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- Últimas Copias de Seguridad --}}
    @if(isset($ultimosBackups) && $ultimosBackups->count() > 0)
    <div class="block block-rounded mb-4">
        <div class="block-header block-header-default">
            <h3 class="block-title">
                <i class="fa fa-cloud-upload-alt me-1 text-success"></i> Últimas Copias de Seguridad
            </h3>
            <a href="{{ route('backup.copias') }}" class="btn btn-sm btn-alt-primary">
                Ver todas <i class="fa fa-arrow-right ms-1"></i>
            </a>
        </div>
        <div class="block-content p-0">
            <div class="table-responsive">
                <table class="table table-striped table-vcenter mb-0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Denominación</th>
                            <th>Fecha</th>
                            <th>Hora</th>
                            <th>Archivo</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($ultimosBackups as $backup)
                        <tr>
                            <td class="fw-semibold">#{{ $backup->id }}</td>
                            <td>{{ $backup->denominacion }}</td>
                            <td>{{ $backup->fecha_local ?? $backup->fecha }}</td>
                            <td>{{ $backup->hora_formateada ?? substr($backup->hora ?? '', 0, 5) }}</td>
                            <td><code>{{ $backup->archivo }}</code></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    {{-- Footer --}}
    <div class="text-center text-muted fs-sm py-3">
        <i class="fa fa-sync-alt me-1"></i> Datos actualizados al {{ $fechaSistema ?? date('d/m/Y') }}
        <span class="mx-2">•</span>
        <i class="fa fa-database me-1"></i> Base: {{ $bd ?? 'Cosmos 79' }}
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gráfico de Actividad por Usuario
    const actividadData = @json($actividadUsuario);
    if (actividadData && actividadData.length > 0) {
        new Chart(document.getElementById('chartActividadUsuario'), {
            type: 'bar',
            data: {
                labels: actividadData.map(d => d.login),
                datasets: [{
                    label: 'Acciones realizadas',
                    data: actividadData.map(d => d.total),
                    backgroundColor: 'rgba(153, 102, 255, 0.5)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
                },
                plugins: {
                    legend: { display: false }
                }
            }
        });
    }

    // Gráfico de Top Acciones
    const topAccionesData = @json($topAcciones);
    if (topAccionesData && topAccionesData.length > 0) {
        new Chart(document.getElementById('chartTopAcciones'), {
            type: 'pie',
            data: {
                labels: topAccionesData.map(d => d.nombre_accion),
                datasets: [{
                    data: topAccionesData.map(d => d.total),
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(54, 162, 235, 0.5)',
                        'rgba(255, 206, 86, 0.5)',
                        'rgba(75, 192, 192, 0.5)',
                        'rgba(153, 102, 255, 0.5)'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: { position: 'bottom' }
                }
            }
        });
    }
});
</script>
@endpush