{{-- metrics/partials/detail.blade.php --}}
@foreach ($metrics as $endpoint => $data)
    @php
        $hash = md5($endpoint);

        $avgDay = collect($data['by_hour'])
            ->where('count', '>', 0)
            ->avg('avg_ms');
        $p95Day = collect($data['by_hour'])->max('p95_ms');
        $maxDay = collect($data['by_hour'])->max('max_ms');
        $successRate = ($data['ok'] / $data['total']) * 100;

        $successRateClass = match (true) {
            $successRate >= 99 => 'text-bg-success',
            $successRate >= 95 => 'text-bg-warning',
            default            => 'text-bg-danger',
        };

        $formatted = number_format($successRate, 4, ',', '.');
    @endphp

    <div class="endpoint-detail d-none" id="endpoint-{{ $hash }}">

        {{-- Header --}}
        <div class="card mb-4">
            <div class="card-body d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ $endpoint }}</h5>
                <span title="Success Rate" class="badge badge-successRate {{$successRateClass}}">{{$formatted}} %</span>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">Resumen</div>
            <div class="card-body">
                <div class="row text-center mb-4">
                    <div class="col">
                        <div class="fw-bold">Total</div>
                        {{ $data['total'] }}
                    </div>
                    <div class="col">
                        <div class="fw-bold">OK</div>
                        {{ $data['ok'] }}
                    </div>
                    <div class="col">
                        <div class="fw-bold">Error</div>
                        {{ $data['error'] }}
                    </div>
                    <div class="col">
                        <div class="fw-bold">Avg (día)</div>
                        {{ number_format($avgDay, 1) }} ms
                    </div>
                    <div class="col">
                        <div class="fw-bold">P95 (día)</div>
                        {{ number_format($p95Day, 1) }} ms
                    </div>
                    <div class="col">
                        <div class="fw-bold">Max (día)</div>
                        {{ number_format($maxDay, 1) }} ms
                    </div>
                </div>
            </div>
        </div>

        {{-- Resumen --}}


        {{-- Charts --}}
        <div class="card mb-4">
            <div class="card-header">Llamadas por hora</div>
            <div class="card-body">
                <canvas id="count-{{ $hash }}"></canvas>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">Percentiles de latencia</div>
            <div class="card-body">
                <canvas id="p95-{{ $hash }}"></canvas>
            </div>
        </div>

        <div class="card">
            <div class="card-header">Avg por hora</div>
            <div class="card-body">
                <canvas id="avg-{{ $hash }}"></canvas>
            </div>
        </div>

    </div>
@endforeach