@extends('adminlte::page')

@section('title', 'Dashboard - Monitor de PCs')

@section('plugins.ChartJs', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>Dashboard Monitor de PCs</h1>
        <small class="text-muted">Hora actual: <span id="relojActual"></span></small>
    </div>
@stop

@section('content')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif

@if($alertas->count())
    <div class="alert alert-warning alert-dismissible fade show">
        <i class="fas fa-exclamation-triangle mr-1"></i>
        <strong>{{ $alertas->count() }} equipo(s) offline</strong> sin respuesta hace más de 30 minutos:
        {{ $alertas->pluck('nombre_pc')->join(', ') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif

<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $pcs->where('estado','online')->count() }}</h3>
                <p>PCs Online</p>
            </div>
            <div class="icon"><i class="fas fa-desktop"></i></div>
            <a href="{{ route('pcs.index') }}" class="small-box-footer">Ver listado <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $pcs->where('estado','offline')->count() }}</h3>
                <p>PCs Offline</p>
            </div>
            <div class="icon"><i class="fas fa-times-circle"></i></div>
            <a href="{{ route('pcs.index') }}" class="small-box-footer">Ver listado <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $pcs->count() }}</h3>
                <p>Total Equipos</p>
            </div>
            <div class="icon"><i class="fas fa-network-wired"></i></div>
            <a href="{{ route('pcs.index') }}" class="small-box-footer">Administrar PCs <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $pcs->whereNotNull('tiempo_respuesta')->avg('tiempo_respuesta') ? round($pcs->whereNotNull('tiempo_respuesta')->avg('tiempo_respuesta')) . ' ms' : 'N/A' }}</h3>
                <p>Ping Promedio</p>
            </div>
            <div class="icon"><i class="fas fa-wifi"></i></div>
            <a href="{{ route('pcs.index') }}" class="small-box-footer">Ver inventario <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-7">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-line mr-1"></i> Disponibilidad últimos 7 días</h3>
            </div>
            <div class="card-body">
                <canvas id="chartDisponibilidad" style="height: 250px;"></canvas>
            </div>
        </div>
    </div>

    <div class="col-md-5">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-building mr-1"></i> Estado por Área</h3>
            </div>
            <div class="card-body">
                <canvas id="chartAreas" style="height: 250px;"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-bolt mr-1"></i> Accesos rápidos</h3>
    </div>
    <div class="card-body">
        <a href="{{ route('pcs.index') }}" class="btn btn-primary">
            <i class="fas fa-list"></i> Ir al CRUD / Escaneo
        </a>
        <a href="{{ route('pcs.create') }}" class="btn btn-success">
            <i class="fas fa-plus"></i> Registrar PC
        </a>
    </div>
</div>

@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(function () {

    function actualizarRelojActual() {
        const ahora = new Date();

        const dia = String(ahora.getDate()).padStart(2, '0');
        const mes = String(ahora.getMonth() + 1).padStart(2, '0');
        const anio = ahora.getFullYear();

        const hora = String(ahora.getHours()).padStart(2, '0');
        const minuto = String(ahora.getMinutes()).padStart(2, '0');
        const segundo = String(ahora.getSeconds()).padStart(2, '0');

        $('#relojActual').text(`${dia}/${mes}/${anio} ${hora}:${minuto}:${segundo}`);
    }

    actualizarRelojActual();
    setInterval(actualizarRelojActual, 1000);

    if (typeof Chart === 'undefined') {
        console.error('Chart.js no está cargado.');
        return;
    }

    const dispData = @json($disponibilidad ?? []);

    new Chart(document.getElementById('chartDisponibilidad'), {
        type: 'line',
        data: {
            labels: dispData.map(d => d.fecha),
            datasets: [{
                label: 'Disponibilidad %',
                data: dispData.map(d => d.uptime),
                borderColor: '#51cbce',
                backgroundColor: 'rgba(81,203,206,0.1)',
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointBackgroundColor: '#51cbce',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: { min: 0, max: 100, ticks: { callback: v => v + '%' } },
                x: { grid: { display: false } }
            },
            plugins: { legend: { display: false } }
        }
    });

    const pcsData = @json($pcs->groupBy('area') ?? []);
    const areas   = Object.keys(pcsData);
    const online  = areas.map(a => pcsData[a].filter(p => p.estado === 'online').length);
    const offline = areas.map(a => pcsData[a].filter(p => p.estado === 'offline').length);

    new Chart(document.getElementById('chartAreas'), {
        type: 'bar',
        data: {
            labels: areas,
            datasets: [
                { label: 'Online',  data: online,  backgroundColor: '#6bd098' },
                { label: 'Offline', data: offline, backgroundColor: '#ef8157' },
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: { stacked: true, grid: { display: false } },
                y: { stacked: true, beginAtZero: true, ticks: { stepSize: 1 } }
            }
        }
    });

    setTimeout(() => location.reload(), 60000);
});
</script>
@stop