@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-description', 'Visión general de tu plataforma de inteligencia artificial.')
@section('content')
<div class="row g-4 mb-4">
@foreach ([['robot','Agentes','12','9 activos','primary'],['activity','Ejecuciones hoy','2.841','+18,4% vs. ayer','success'],['check2-circle','Tasa de éxito','98,7%','Últimas 24 horas','info'],['clock-history','Latencia promedio','1,2s','-120ms esta semana','warning']] as $metric)
<div class="col-sm-6 col-xl-3"><article class="metric-card h-100"><div class="metric-icon metric-icon-{{ $metric[4] }}"><i class="bi bi-{{ $metric[0] }}"></i></div><p class="metric-label">{{ $metric[1] }}</p><div class="d-flex align-items-end justify-content-between gap-2"><strong class="metric-value">{{ $metric[2] }}</strong><span class="metric-detail">{{ $metric[3] }}</span></div></article></div>
@endforeach
</div>
<div class="row g-4">
    <div class="col-xl-8"><section class="content-card h-100"><div class="card-heading"><div><h2>Actividad reciente</h2><p>Ejecuciones de agentes durante los últimos 7 días</p></div><button class="btn btn-light btn-sm"><i class="bi bi-calendar3 me-2"></i>Últimos 7 días</button></div><div class="activity-chart" aria-label="Actividad semanal">@foreach ([42,61,50,78,67,92,75] as $height)<div class="chart-column"><div class="chart-bar" style="height:{{ $height }}%"></div><span>{{ ['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'][$loop->index] }}</span></div>@endforeach</div></section></div>
    <div class="col-xl-4"><section class="content-card h-100"><div class="card-heading"><div><h2>Agentes destacados</h2><p>Mayor actividad esta semana</p></div><a href="{{ route('agents.index') }}" class="text-link">Ver todos</a></div>@foreach ([['Soporte al cliente','Customer Support','1.240','headset'],['Analista de documentos','Document Intelligence','876','file-earmark-text'],['Asistente comercial','Sales Copilot','524','briefcase']] as $agent)<div class="agent-compact"><div class="agent-avatar"><i class="bi bi-{{ $agent[3] }}"></i></div><div class="flex-grow-1"><strong>{{ $agent[0] }}</strong><span>{{ $agent[1] }}</span></div><div class="text-end"><strong>{{ $agent[2] }}</strong><span>ejecuciones</span></div></div>@endforeach</section></div>
</div>
@endsection