@extends('adminlte::page')

@section('title', $pc->nombre_pc)

@section('plugins.ChartJs', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>{{ $pc->nombre_pc }} <small class="text-muted">{{ $pc->ip }}</small></h1>
        <div>
            <a href="{{ route('pcs.edit', $pc) }}" class="btn btn-warning btn-sm">
                <i class="fas fa-edit"></i> Editar
            </a>
            <a href="{{ route('pcs.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Volver
            </a>
        </div>
    </div>
@stop

@section('content')

<div class="row">

    {{-- Ficha --}}
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-info-circle mr-1"></i> Ficha técnica</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <tr><th class="w-40">Estado</th><td>
                        @if($pc->estado === 'online')
                            <span class="badge badge-success">ONLINE</span>
                        @else
                            <span class="badge badge-danger">OFFLINE</span>
                        @endif
                    </td></tr>
                    <tr><th>Hostname</th><td>{{ $pc->hostname ?? '—' }}</td></tr>
                    <tr><th>Área</th><td>{{ $pc->area ?? '—' }}</td></tr>
                    <tr><th>Responsable</th><td>{{ $pc->responsable ?? '—' }}</td></tr>
                    <tr><th>SO</th><td>{{ $pc->sistema_operativo ?? '—' }}</td></tr>
                    <tr><th>Procesador</th><td>{{ $pc->procesador ?? '—' }}</td></tr>
                    <tr><th>RAM</th><td>{{ $pc->ram ?? '—' }}</td></tr>
                    <tr><th>Disco</th><td>{{ $pc->disco ?? '—' }}</td></tr>
                    <tr><th>Marca/Modelo</th><td>{{ $pc->marca_modelo ?? '—' }}</td></tr>
                    <tr><th>Garantía</th><td>
                        @if($pc->garantia_hasta)
                            {{ $pc->garantia_hasta->format('d/m/Y') }}
                            @if($pc->garantia_hasta->isPast())
                                <span class="badge badge-danger ml-1">Vencida</span>
                            @elseif($pc->garantia_hasta->diffInDays(now()) < 90)
                                <span class="badge badge-warning ml-1">Por vencer</span>
                            @endif
                        @else
                            —
                        @endif
                    </td></tr>
                    <tr><th>Ping promedio</th><td>
                        {{ $pc->tiempo_respuesta ? $pc->tiempo_respuesta . ' ms' : '—' }}
                    </td></tr>
                    <tr><th>Uptime 7 días</th><td>
                        <strong>{{ $pc->uptimePorcentaje(7) }}%</strong>
                    </td></tr>
                    <tr><th>Último ping</th><td>
                        {{ $pc->ultimo_ping ? \Carbon\Carbon::parse($pc->ultimo_ping)->diffForHumans() : '—' }}
                    </td></tr>
                </table>
                @if($pc->notas)
                    <div class="p-3 border-top">
                        <small class="text-muted"><i class="fas fa-sticky-note mr-1"></i> {{ $pc->notas }}</small>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Gráfico latencia --}}
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-line mr-1"></i> Latencia últimas 24 horas</h3>
            </div>
            <div class="card-body">
                <canvas id="chartLatencia" height="80"></canvas>
            </div>
        </div>

        {{-- Últimos pings --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">Historial de pings (últimos 50)</h3></div>
            <div class="card-body p-0">
                <div style="max-height:320px;overflow-y:auto;">
                    <table class="table table-sm table-striped mb-0">
                        <thead>
                            <tr><th>Fecha/hora</th><th>Estado</th><th>Ping</th></tr>
                        </thead>
                        <tbody>
                            @foreach($logs->take(50) as $log)
                                <tr>
                                    <td class="small">{{ \Carbon\Carbon::parse($log->created_at)->format('d/m H:i:s') }}</td>
                                    <td>
                                        @if($log->estado === 'online')
                                            <span class="badge badge-success">ONLINE</span>
                                        @else
                                            <span class="badge badge-danger">OFFLINE</span>
                                        @endif
                                    </td>
                                    <td>{{ $log->tiempo_respuesta ? $log->tiempo_respuesta . ' ms' : '—' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

@stop

@section('js')
<script>
// Carga datos de latencia desde la API JSON
fetch('{{ route('pcs.api.latencia', $pc) }}')
    .then(r => r.json())
    .then(data => {
        new Chart(document.getElementById('chartLatencia'), {
            type: 'line',
            data: {
                labels: data.map(d => {
                    const dt = new Date(d.created_at);
                    return dt.getHours().toString().padStart(2,'0') + ':' + dt.getMinutes().toString().padStart(2,'0');
                }),
                datasets: [{
                    label: 'Latencia (ms)',
                    data: data.map(d => d.tiempo_respuesta),
                    borderColor: '#51cbce',
                    backgroundColor: 'rgba(81,203,206,0.1)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 3,
                    spanGaps: true,
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: { beginAtZero: true, ticks: { callback: v => v + ' ms' } },
                    x: { grid: { display: false } }
                },
                plugins: { legend: { display: false } }
            }
        });
    });
</script>
@stop