@extends('admin.layout')
@section('title', 'Server')

@section('content')

@php
    $fmt    = fn($n)  => number_format((float) $n, 0, ',', '.');
    $ms     = fn($n)  => round((float) $n) . ' ms';
    $mb     = fn($n)  => number_format($n / 1024 / 1024, 2) . ' MB';
    $uptime = fn($s)  => sprintf('%dd %dh %dm', $s/86400, ($s%86400)/3600, ($s%3600)/60);
    $pct    = fn($a, $b) => $b > 0 ? round($a / $b * 100) : 0;

    $periods = ['24h' => 'Laatste 24 uur', 'week' => 'Laatste week', 'month' => 'Laatste maand', 'year' => 'Laatste jaar'];
@endphp

{{-- ── Period tabs ──────────────────────────────────────────────────────────── --}}
<div class="flex gap-1 mb-5 bg-white border border-gray-100 rounded-lg p-1 w-fit">
    @foreach ($periods as $key => $label)
        <a href="{{ route('admin.server', ['period' => $key]) }}"
           class="px-3 py-1.5 rounded-md text-xs font-medium transition"
           style="{{ $period === $key ? 'background:rgb(var(--a6,99 102 241));color:#fff' : 'color:#6b7280' }}">
            {{ $label }}
        </a>
    @endforeach
</div>

{{-- ── Summary cards ─────────────────────────────────────────────────────────── --}}
@php
    $sc = fn($label, $value, $color='gray', $sub='', $clickable=false) =>
        "<div class='bg-white rounded-lg border border-gray-100 px-3 py-2.5" . ($clickable ? " hover:border-gray-300 cursor-pointer" : "") . "'>
            <p class='text-[11px] text-gray-400 uppercase tracking-wide leading-none mb-1'>{$label}" .
            ($clickable ? " <span style='font-size:9px'>↓</span>" : "") . "</p>
            <p class='text-xl font-bold text-{$color}-600 leading-none'>{$value}</p>" .
            ($sub ? "<p class='text-[11px] text-gray-400 mt-0.5'>{$sub}</p>" : '') .
        "</div>";
@endphp

<div class="grid gap-2 mb-5" style="grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))">
    {!! $sc('Verzoeken',   $fmt($summary->total ?? 0),        'blue') !!}
    {!! $sc('Geslaagd',    $fmt($summary->success ?? 0),      'green',
        $pct($summary->success ?? 0, $summary->total ?? 1) . '%') !!}
    @if (($summary->errors_4xx ?? 0) > 0)
        <div onclick="filterErrors('4xx')" style="cursor:pointer">
        {!! $sc('4xx fouten', $fmt($summary->errors_4xx), 'yellow',
            $pct($summary->errors_4xx, $summary->total ?? 1) . '%', true) !!}
        </div>
    @else
        {!! $sc('4xx fouten', '0', 'gray', '0%') !!}
    @endif
    @if (($summary->errors_5xx ?? 0) > 0)
        <div onclick="filterErrors('5xx')" style="cursor:pointer">
        {!! $sc('5xx fouten', $fmt($summary->errors_5xx), 'red',
            $pct($summary->errors_5xx, $summary->total ?? 1) . '%', true) !!}
        </div>
    @else
        {!! $sc('5xx fouten', '0', 'gray', '0%') !!}
    @endif
    {!! $sc('Gem. tijd',   $ms($summary->avg_ms ?? 0),        'violet') !!}
    {!! $sc('Max. tijd',   $ms($summary->max_ms ?? 0),        'orange') !!}
    {!! $sc('Alarmen', $totalAlarms > 0 ? $totalAlarms : '✓',
        $totalAlarms > 0 ? 'red' : 'green',
        $totalAlarms > 0 ? 'beveiligings-\nwaarschuwingen' : 'geen dreigingen') !!}
</div>

{{-- ── Security alarms ──────────────────────────────────────────────────────── --}}
@php
    $threatLabels = [
        'sqli'      => ['SQL-injectie',    '💉', '#ef4444', 'Aanvaller probeerde SQL-code in de URL te injecteren om de database te manipuleren of uit te lezen.'],
        'xss'       => ['XSS',             '🔗', '#f97316', 'Cross-site scripting poging: schadelijke JavaScript of HTML in de URL.'],
        'traversal' => ['Padtraversal',    '📂', '#f59e0b', 'Aanvaller probeerde via "../" buiten de webroot te navigeren en bestanden te lezen.'],
        'scanner'   => ['Scannerprobe',    '🤖', '#8b5cf6', 'Geautomatiseerde scanner zocht naar bekende kwetsbaarheden (bijv. .env, wp-admin, phpMyAdmin).'],
    ];
@endphp

{{-- Detection legend (always visible, collapsible) --}}
<details class="mb-4 bg-white border border-gray-100 rounded-lg overflow-hidden" id="detection-legend">
    <summary class="px-4 py-2.5 text-xs font-semibold text-gray-500 cursor-pointer select-none flex items-center gap-2 hover:bg-gray-50 transition">
        <span>🔍 Wat detecteren wij?</span>
        <span class="text-[11px] font-normal text-gray-400">— klik om uit te klappen</span>
    </summary>
    <div class="border-t border-gray-100 divide-y divide-gray-50">

        {{-- SQL injection --}}
        <div class="px-4 py-3">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-block px-2 py-0.5 rounded-full text-[11px] font-bold text-white" style="background:#ef4444">💉 SQL-injectie</span>
                <span class="text-[11px] text-gray-400">Type: <code class="font-mono">sqli</code></span>
            </div>
            <p class="text-[12px] text-gray-600 mb-1.5">
                De aanvaller probeert SQL-commando's in de URL te verstoppen om de database te lezen, aan te passen of te verwijderen.
                Detectie gebeurt op patronen in het URL-pad en de querystring.
            </p>
            <div class="grid gap-1" style="grid-template-columns: 1fr 1fr">
                @foreach ([
                    ["UNION SELECT", "Gegevens uit andere tabellen ophalen"],
                    ["SELECT … FROM", "Directe queryconstructie in de URL"],
                    ["DROP TABLE", "Tabel verwijderen"],
                    ["INSERT INTO / DELETE FROM", "Data manipuleren"],
                    ["EXEC( / CAST( / CONVERT(", "Opgeslagen procedures of typeconversie misbruiken"],
                    ["xp_cmdshell / xp_*", "SQL Server systeemcommando's uitvoeren"],
                    ["OR 1=1 / ' --", "Authenticatie omzeilen via altijd-ware conditie"],
                    ["/* commentaar */", "SQL-commentaar om filters te omzeilen"],
                ] as [$pattern, $explanation])
                <div class="flex gap-1.5 text-[11px]">
                    <code class="font-mono text-red-600 shrink-0 bg-red-50 px-1 rounded">{{ $pattern }}</code>
                    <span class="text-gray-400">{{ $explanation }}</span>
                </div>
                @endforeach
            </div>
        </div>

        {{-- XSS --}}
        <div class="px-4 py-3">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-block px-2 py-0.5 rounded-full text-[11px] font-bold text-white" style="background:#f97316">🔗 XSS</span>
                <span class="text-[11px] text-gray-400">Type: <code class="font-mono">xss</code></span>
            </div>
            <p class="text-[12px] text-gray-600 mb-1.5">
                Cross-site scripting: de aanvaller injecteert JavaScript of HTML via de URL, in de hoop dat die code wordt uitgevoerd in de browser van een andere gebruiker.
            </p>
            <div class="grid gap-1" style="grid-template-columns: 1fr 1fr">
                @foreach ([
                    ["&lt;script", "Klassiek scripttag-injectie"],
                    ["javascript: / vbscript:", "Protocol-gebaseerde scriptuitvoering"],
                    ["data:text/html", "Inline HTML via data-URI"],
                    ["onerror= / onload= / on*=", "HTML event handlers als aanvalsvector"],
                    ["eval(", "JavaScript eval-uitvoering"],
                    ["expression(", "IE-specifieke CSS expression injection"],
                ] as [$pattern, $explanation])
                <div class="flex gap-1.5 text-[11px]">
                    <code class="font-mono text-orange-600 shrink-0 bg-orange-50 px-1 rounded">{{ $pattern }}</code>
                    <span class="text-gray-400">{{ $explanation }}</span>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Path traversal --}}
        <div class="px-4 py-3">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-block px-2 py-0.5 rounded-full text-[11px] font-bold text-white" style="background:#f59e0b">📂 Padtraversal</span>
                <span class="text-[11px] text-gray-400">Type: <code class="font-mono">traversal</code></span>
            </div>
            <p class="text-[12px] text-gray-600 mb-1.5">
                Via herhaalde <code class="font-mono">../</code> probeert de aanvaller buiten de webroot te navigeren en systeembestanden te lezen
                (bijv. <code class="font-mono">/etc/passwd</code>, configuratiebestanden).
            </p>
            <div class="grid gap-1" style="grid-template-columns: 1fr 1fr">
                @foreach ([
                    ["../../", "Klassieke directoryescaping"],
                    ["..\\ (backslash)", "Windows-variant van padtraversal"],
                    ["%2e%2e%2f", "URL-geëncodeerde versie van ../"],
                    ["%252e%252e", "Dubbel geëncodeerde variant (bypass-poging)"],
                ] as [$pattern, $explanation])
                <div class="flex gap-1.5 text-[11px]">
                    <code class="font-mono text-yellow-700 shrink-0 bg-yellow-50 px-1 rounded">{{ $pattern }}</code>
                    <span class="text-gray-400">{{ $explanation }}</span>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Scanner probes --}}
        <div class="px-4 py-3">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-block px-2 py-0.5 rounded-full text-[11px] font-bold text-white" style="background:#8b5cf6">🤖 Scannerprobe</span>
                <span class="text-[11px] text-gray-400">Type: <code class="font-mono">scanner</code></span>
            </div>
            <p class="text-[12px] text-gray-600 mb-1.5">
                Geautomatiseerde scanners (zoals Shodan, Nuclei, Nikto) tasten servers af op bekende kwetsbare paden. Geen enkele van deze paden bestaat in ND-Link — elk verzoek ernaar is verdacht.
            </p>
            <div class="grid gap-1" style="grid-template-columns: 1fr 1fr">
                @foreach ([
                    ["/.env", "Omgevingsbestand met wachtwoorden en sleutels"],
                    ["/.git", "Blootgestelde Git-repository"],
                    ["/wp-admin / /wp-login.php", "WordPress-beheerpaneel (hier niet aanwezig)"],
                    ["/phpmyadmin", "Databasebeheertool"],
                    ["/xmlrpc.php", "WordPress XML-RPC (veelgebruikt voor aanvallen)"],
                    ["/shell.php / /cmd.php", "Geüploade webshell of backdoor"],
                    ["/.htaccess / /web.config", "Webserverconfiguratie uitlezen"],
                    ["/etc/passwd / /etc/shadow", "Unix systeemgebruikersbestanden"],
                    ["/proc/self", "Linux procesmemory uitlezen"],
                    ["/actuator", "Spring Boot beheer-endpoint"],
                    ["/cgi-bin", "Oude CGI-scripts (vaak kwetsbaar)"],
                    ["/manager/html", "Tomcat-beheerpaneel"],
                ] as [$pattern, $explanation])
                <div class="flex gap-1.5 text-[11px]">
                    <code class="font-mono text-violet-600 shrink-0 bg-violet-50 px-1 rounded">{{ $pattern }}</code>
                    <span class="text-gray-400">{{ $explanation }}</span>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Brute force --}}
        <div class="px-4 py-3">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-block px-2 py-0.5 rounded-full text-[11px] font-bold text-white" style="background:#eab308">🔑 Brute force</span>
                <span class="text-[11px] text-gray-400">Berekend op basis van HTTP 401/403 per IP</span>
            </div>
            <p class="text-[12px] text-gray-600 mb-1">
                Een IP-adres dat ≥ 10 keer een <strong>401 Unauthorized</strong> of <strong>403 Forbidden</strong> ontvangt wordt als verdacht gemarkeerd.
                Dit kan duiden op automatische wachtwoordraapaanvallen (credential stuffing) of op aftasten van afgeschermde pagina's.
            </p>
            <div class="grid gap-1 text-[11px] text-gray-400" style="grid-template-columns: 1fr 1fr">
                <span>≥ 10 weigeringen → alarm (laag risico)</span>
                <span>≥ 30 weigeringen → gemiddeld risico</span>
                <span>≥ 100 weigeringen → hoog risico</span>
                <span>Drempel geldt per IP over de gekozen periode</span>
            </div>
        </div>

        {{-- Flood --}}
        <div class="px-4 py-3">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-block px-2 py-0.5 rounded-full text-[11px] font-bold text-white" style="background:#f97316">🌊 Verkeersoverlast (flood)</span>
                <span class="text-[11px] text-gray-400">Berekend op totaal verzoeken per IP per periode</span>
            </div>
            <p class="text-[12px] text-gray-600 mb-1">
                Een IP-adres dat een abnormaal hoog volume verzoeken verstuurt kan duiden op een DDoS-aanval, agressieve webscraper of kapotte client.
                Drempelwaarden per periode:
            </p>
            <div class="grid gap-1 text-[11px]" style="grid-template-columns: 1fr 1fr">
                @foreach (['24 uur' => 300, 'Week' => 1500, 'Maand' => 5000, 'Jaar' => 15000] as $p => $threshold)
                <div class="flex gap-1.5">
                    <span class="text-gray-500 font-medium w-12">{{ $p }}</span>
                    <span class="text-gray-400">≥ {{ number_format($threshold, 0, ',', '.') }} verzoeken → alarm</span>
                </div>
                @endforeach
            </div>
        </div>

    </div>
</details>

@if ($totalAlarms > 0)
<div class="mb-5">
    {{-- Section header --}}
    <div class="flex items-center gap-2 mb-3">
        <span class="text-xs font-semibold text-red-600 uppercase tracking-wide">⚠ Beveiligingsalarmen</span>
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-red-100 text-red-700">
            {{ $totalAlarms }} alarm{{ $totalAlarms !== 1 ? 'en' : '' }}
        </span>
        <span class="text-[11px] text-gray-400">— {{ $periods[$period] }}</span>
    </div>

    {{-- Threat probes (sqli, xss, traversal, scanner) --}}
    @if ($threatAlarms->isNotEmpty())
    <div class="bg-white rounded-lg border border-red-100 overflow-hidden mb-3">
        <div class="px-4 py-2.5 bg-red-50 border-b border-red-100">
            <p class="text-xs font-semibold text-red-700">Injectie- en scanpogingen</p>
            <p class="text-[11px] text-red-400 mt-0.5">Gedetecteerd op basis van verdachte patronen in de URL (pad + querystring).</p>
        </div>
        <table class="w-full text-xs">
            <thead class="bg-gray-50 text-gray-400 uppercase tracking-wide">
                <tr>
                    <th class="px-4 py-2 text-left">Type</th>
                    <th class="px-4 py-2 text-left">Betekenis</th>
                    <th class="px-4 py-2 text-left">IP-adres</th>
                    <th class="px-4 py-2 text-right">Pogingen</th>
                    <th class="px-4 py-2 text-left">Laatste activiteit</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach ($threatAlarms as $t)
                    @php [$label, $icon, $color, $desc] = $threatLabels[$t->threat] ?? [$t->threat, '⚠', '#6b7280', '']; @endphp
                    <tr class="hover:bg-red-50 transition" title="{{ $desc }}">
                        <td class="px-4 py-2">
                            <span class="inline-flex items-center gap-1 font-semibold text-[11px] px-2 py-0.5 rounded-full"
                                  style="background:{{ $color }}18; color:{{ $color }}">
                                {{ $icon }} {{ $label }}
                            </span>
                        </td>
                        <td class="px-4 py-2 text-gray-400 max-w-xs" style="max-width:280px">
                            <span title="{{ $desc }}">{{ Str::limit($desc, 80) }}</span>
                        </td>
                        <td class="px-4 py-2 font-mono text-gray-600">{{ $t->ip ?? '–' }}</td>
                        <td class="px-4 py-2 text-right font-bold" style="color:{{ $color }}">{{ $t->total }}</td>
                        <td class="px-4 py-2 text-gray-400 whitespace-nowrap">
                            {{ \Carbon\Carbon::parse($t->last_seen)->format('d/m H:i:s') }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

    {{-- Brute force --}}
    @if ($bruteForceAlarms->isNotEmpty())
    <div class="bg-white rounded-lg border border-yellow-100 overflow-hidden mb-3">
        <div class="px-4 py-2.5 bg-yellow-50 border-b border-yellow-100">
            <p class="text-xs font-semibold text-yellow-700">🔑 Brute force / toegangspogingen</p>
            <p class="text-[11px] text-yellow-500 mt-0.5">
                IP-adressen met ≥ 10 geweigerde verzoeken (HTTP 401/403). Dit kan duiden op herhaalde inlogpogingen of geautomatiseerde aanvallen op afgeschermde pagina's.
            </p>
        </div>
        <table class="w-full text-xs">
            <thead class="bg-gray-50 text-gray-400 uppercase tracking-wide">
                <tr>
                    <th class="px-4 py-2 text-left">IP-adres</th>
                    <th class="px-4 py-2 text-right">Weigeringen</th>
                    <th class="px-4 py-2 text-right">Unieke paden</th>
                    <th class="px-4 py-2 text-left">Laatste poging</th>
                    <th class="px-4 py-2 text-left">Risico</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach ($bruteForceAlarms as $bf)
                    @php
                        $risk = $bf->total >= 100 ? ['Hoog', '#ef4444'] : ($bf->total >= 30 ? ['Gemiddeld', '#f59e0b'] : ['Laag', '#84cc16']);
                    @endphp
                    <tr class="hover:bg-yellow-50 transition">
                        <td class="px-4 py-2 font-mono text-gray-600">{{ $bf->ip ?? '–' }}</td>
                        <td class="px-4 py-2 text-right font-bold text-yellow-600">{{ $bf->total }}</td>
                        <td class="px-4 py-2 text-right text-gray-500">{{ $bf->unique_paths }}</td>
                        <td class="px-4 py-2 text-gray-400 whitespace-nowrap">
                            {{ \Carbon\Carbon::parse($bf->last_seen)->format('d/m H:i:s') }}
                        </td>
                        <td class="px-4 py-2">
                            <span class="inline-block px-2 py-0.5 rounded-full text-[11px] font-semibold text-white"
                                  style="background:{{ $risk[1] }}">{{ $risk[0] }}</span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

    {{-- Flood --}}
    @if ($floodAlarms->isNotEmpty())
    <div class="bg-white rounded-lg border border-orange-100 overflow-hidden mb-3">
        <div class="px-4 py-2.5 bg-orange-50 border-b border-orange-100">
            <p class="text-xs font-semibold text-orange-700">🌊 Verkeersoverlast (flood)</p>
            <p class="text-[11px] text-orange-400 mt-0.5">
                IP-adressen met een abnormaal hoog aantal verzoeken in de gekozen periode. Kan wijzen op een DDoS-aanval, scraper of defecte client.
            </p>
        </div>
        <table class="w-full text-xs">
            <thead class="bg-gray-50 text-gray-400 uppercase tracking-wide">
                <tr>
                    <th class="px-4 py-2 text-left">IP-adres</th>
                    <th class="px-4 py-2 text-right">Verzoeken</th>
                    <th class="px-4 py-2 text-left">Laatste activiteit</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach ($floodAlarms as $fl)
                    <tr class="hover:bg-orange-50 transition">
                        <td class="px-4 py-2 font-mono text-gray-600">{{ $fl->ip ?? '–' }}</td>
                        <td class="px-4 py-2 text-right font-bold text-orange-600">{{ number_format($fl->total, 0, ',', '.') }}</td>
                        <td class="px-4 py-2 text-gray-400 whitespace-nowrap">
                            {{ \Carbon\Carbon::parse($fl->last_seen)->format('d/m H:i:s') }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>
@else
<div class="flex items-center gap-2 mb-5 px-3 py-2 bg-green-50 border border-green-100 rounded-lg w-fit">
    <span class="text-green-500 text-sm">✓</span>
    <span class="text-xs text-green-600 font-medium">Geen beveiligingsalarmen in {{ $periods[$period] }}</span>
</div>
@endif

{{-- ── Chart ────────────────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-4">
    <p class="text-xs font-semibold text-gray-500 mb-3">
        Verzoeken per {{ $bucketLabel }}
        <span class="text-gray-400 font-normal">— {{ $periods[$period] }}</span>
    </p>
    @php $maxVal = max($chart->max('total'), 1); @endphp
    <div style="display:flex; align-items:flex-end; gap:2px; height:80px">
        @foreach ($chart as $row)
            @php
                $total   = $row->total ?? 0;
                $err     = ($row->errors_5xx ?? 0) + ($row->errors_4xx ?? 0);
                $barH    = max($total > 0 ? 4 : 0, round($total / $maxVal * 68));
                $label   = match($period) {
                    '24h'   => \Carbon\Carbon::parse($row->bucket)->format('H') . 'h',
                    'year'  => \Carbon\Carbon::parse($row->bucket . '-01')->format('M'),
                    default => \Carbon\Carbon::parse($row->bucket)->format('d/m'),
                };
                $tooltip = $label . ': ' . $total . ' verzoeken' . ($err ? ', ' . $err . ' fouten' : '');
            @endphp
            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:1px" title="{{ $tooltip }}">
                <div style="width:100%; border-radius:2px 2px 0 0; height:{{ $barH }}px;
                            background:{{ $err > 0 ? '#f87171' : 'rgb(var(--a6,99 102 241))' }};
                            min-height:{{ $total > 0 ? '2px' : '0' }}"></div>
                @if ($loop->count <= 24 || $loop->index % max(1, intdiv($loop->count, 12)) === 0)
                    <span style="font-size:9px; color:#d1d5db; white-space:nowrap">{{ $label }}</span>
                @endif
            </div>
        @endforeach
    </div>
    {{-- Avg response time as a secondary line annotation --}}
    <p class="text-[11px] text-gray-400 mt-2">
        Gemiddelde responstijd: <strong>{{ $ms($summary->avg_ms ?? 0) }}</strong> ·
        Max: <strong>{{ $ms($summary->max_ms ?? 0) }}</strong>
    </p>
</div>

{{-- ── Status distribution + Endpoints ────────────────────────────────────── --}}
<div class="grid gap-4 mb-4" style="grid-template-columns: 1fr 1fr">

    {{-- Status distribution --}}
    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <p class="text-xs font-semibold text-gray-500 mb-3">HTTP statuscodes</p>
        @php
            $statusColors = [200 => '#34d399', 300 => '#60a5fa', 400 => '#fbbf24', 500 => '#f87171'];
            $total = $summary->total ?: 1;
        @endphp
        @forelse ($statusDist as $row)
            @php $color = $statusColors[$row->code_group] ?? '#9ca3af'; @endphp
            <div class="mb-2">
                <div class="flex justify-between text-xs mb-0.5">
                    <span class="font-mono text-gray-600">{{ $row->code_group }}–{{ $row->code_group + 99 }}</span>
                    <span class="text-gray-400">{{ $fmt($row->total) }} ({{ $pct($row->total, $total) }}%)</span>
                </div>
                <div style="height:6px; border-radius:3px; background:#e5e7eb">
                    <div style="height:6px; border-radius:3px; width:{{ $pct($row->total, $total) }}%; background:{{ $color }}"></div>
                </div>
            </div>
        @empty
            <p class="text-xs text-gray-400 italic">Nog geen data.</p>
        @endforelse
    </div>

    {{-- Top endpoints --}}
    <div class="bg-white rounded-lg border border-gray-100 p-4">
        <p class="text-xs font-semibold text-gray-500 mb-3">Meest bezocht</p>
        @if ($topEndpoints->isEmpty())
            <p class="text-xs text-gray-400 italic">Nog geen data.</p>
        @else
            @php $maxHits = max($topEndpoints->max('hits'), 1); @endphp
            <ul class="space-y-1.5 text-xs">
                @foreach ($topEndpoints as $ep)
                    <li>
                        <div class="flex justify-between mb-0.5">
                            <span class="font-mono text-gray-600 truncate" style="max-width:55%" title="{{ $ep->endpoint }}">{{ $ep->endpoint }}</span>
                            <span class="text-gray-400 shrink-0 pl-1">
                                {{ $fmt($ep->hits) }}x
                                @if ($ep->errors > 0)<span class="text-red-400"> · {{ $ep->errors }} err</span>@endif
                            </span>
                        </div>
                        <div style="height:4px; border-radius:2px; background:#e5e7eb">
                            <div style="height:4px; border-radius:2px; width:{{ $pct($ep->hits, $maxHits) }}%;
                                        background:{{ $ep->errors > 0 ? '#f87171' : 'rgb(var(--a6,99 102 241))' }}"></div>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>

</div>

{{-- ── Slowest endpoints ────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-6">
    <p class="text-xs font-semibold text-gray-500 mb-3">Traagste endpoints (gem. responstijd)</p>
    @if ($slowestEndpoints->isEmpty())
        <p class="text-xs text-gray-400 italic">Nog geen data.</p>
    @else
        @php $maxMs = max($slowestEndpoints->max('avg_ms'), 1); @endphp
        <div class="grid gap-1.5" style="grid-template-columns: 1fr 1fr">
            @foreach ($slowestEndpoints as $ep)
                <div>
                    <div class="flex justify-between text-xs mb-0.5">
                        <span class="font-mono text-gray-600 truncate" style="max-width:55%" title="{{ $ep->endpoint }}">{{ $ep->endpoint }}</span>
                        <span class="text-gray-400 shrink-0 pl-1">gem. {{ $ms($ep->avg_ms) }} · max {{ $ms($ep->max_ms) }}</span>
                    </div>
                    <div style="height:4px; border-radius:2px; background:#e5e7eb">
                        <div style="height:4px; border-radius:2px; width:{{ $pct($ep->avg_ms, $maxMs) }}%;
                                    background:{{ $ep->avg_ms > 500 ? '#f87171' : ($ep->avg_ms > 200 ? '#fbbf24' : '#34d399') }}"></div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>


{{-- ── Error drill-down ────────────────────────────────────────────────────── --}}
@if ($errorBreakdown->isNotEmpty())
<div id="fouten" class="mt-6">
    <div class="flex items-center justify-between mb-2">
        <p class="text-xs font-semibold text-gray-500">Foutanalyse</p>
        <div class="flex gap-1" id="error-filter-tabs">
            <button onclick="filterErrors(null)"
                    class="px-2 py-1 rounded text-[11px] font-medium transition"
                    id="etab-all"
                    style="{{ $errorType === null ? 'background:#e5e7eb;color:#374151' : 'color:#9ca3af' }}">
                Alle ({{ $errorsTotalCount }})
            </button>
            <button onclick="filterErrors('4xx')"
                    class="px-2 py-1 rounded text-[11px] font-medium transition"
                    id="etab-4xx"
                    style="{{ $errorType === '4xx' ? 'background:#fef9c3;color:#92400e' : 'color:#9ca3af' }}">
                4xx ({{ $fmt($summary->errors_4xx ?? 0) }})
            </button>
            <button onclick="filterErrors('5xx')"
                    class="px-2 py-1 rounded text-[11px] font-medium transition"
                    id="etab-5xx"
                    style="{{ $errorType === '5xx' ? 'background:#fee2e2;color:#991b1b' : 'color:#9ca3af' }}">
                5xx ({{ $fmt($summary->errors_5xx ?? 0) }})
            </button>
        </div>
    </div>

    {{-- Legend: 4xx vs 5xx explanation --}}
    <div class="flex gap-4 mb-3 text-[11px] text-gray-400">
        <span><span class="font-semibold text-yellow-600">4xx</span> = clientfout — verzoek is ongeldig of niet toegestaan (bijv. pagina niet gevonden, niet ingelogd, CSRF verlopen)</span>
        <span><span class="font-semibold text-red-500">5xx</span> = serverfout — de server kon het verzoek niet verwerken (bijv. crash, configuratiefout)</span>
    </div>

    {{-- Status code breakdown mini-grid --}}
    @php
        $statusDesc = [
            400 => 'Ongeldig verzoek (Bad Request)',
            401 => 'Niet ingelogd (Unauthorized)',
            403 => 'Geen toegang (Forbidden)',
            404 => 'Pagina niet gevonden (Not Found)',
            405 => 'Methode niet toegestaan (Method Not Allowed)',
            419 => 'CSRF-token verlopen (Page Expired)',
            422 => 'Validatiefout (Unprocessable Entity)',
            429 => 'Te veel verzoeken (Too Many Requests)',
            500 => 'Interne serverfout (Internal Server Error)',
            502 => 'Slechte gateway (Bad Gateway)',
            503 => 'Service niet beschikbaar (Service Unavailable)',
            504 => 'Gateway timeout (Gateway Timeout)',
        ];
    @endphp
    <div class="grid gap-1.5 mb-3" style="grid-template-columns: repeat(auto-fill, minmax(90px,1fr))">
        @foreach ($errorBreakdown as $eb)
            @php
                $ebColor = $eb->status >= 500 ? '#f87171' : ($eb->status >= 400 ? '#fbbf24' : '#60a5fa');
                $ebPct   = $summary->total > 0 ? round($eb->total / $summary->total * 100, 1) : 0;
                $ebDesc  = $statusDesc[$eb->status] ?? 'HTTP ' . $eb->status;
            @endphp
            <button onclick="filterErrors('{{ $eb->status >= 500 ? '5xx' : '4xx' }}')"
                    title="{{ $eb->status }}: {{ $ebDesc }}"
                    class="bg-white rounded-lg border border-gray-100 px-2 py-2 text-left hover:border-gray-300 transition">
                <p class="font-mono font-bold text-sm" style="color:{{ $ebColor }}">{{ $eb->status }}</p>
                <p class="text-[11px] text-gray-500">{{ $fmt($eb->total) }}x</p>
                <p class="text-[10px] text-gray-400">{{ $ebPct }}% · gem {{ $ms($eb->avg_ms) }}</p>
                <p class="text-[10px] text-gray-400 mt-0.5 leading-tight">{{ $ebDesc }}</p>
            </button>
        @endforeach
    </div>

    {{-- Error log table --}}
    <div class="bg-white rounded-lg border border-gray-100 overflow-hidden">
        <div class="px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
            <p class="text-xs text-gray-500">
                Recentste fouten
                <span class="text-gray-400">(max 100 getoond)</span>
            </p>
            <span id="error-count-label" class="text-[11px] text-gray-400"></span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-xs" id="error-table">
                <thead class="bg-gray-50 text-gray-400 uppercase tracking-wide">
                    <tr>
                        <th class="px-4 py-2 text-left">Tijd</th>
                        <th class="px-4 py-2 text-left">Methode</th>
                        <th class="px-4 py-2 text-left">Pad</th>
                        <th class="px-4 py-2 text-center">Status</th>
                        <th class="px-4 py-2 text-right">Duur</th>
                        <th class="px-4 py-2 text-left">IP</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50" id="error-tbody">
                    @foreach ($recentErrors as $err)
                        @php
                            $is5xx    = $err->status >= 500;
                            $rowColor = $is5xx ? '#fef2f2' : '#fffbeb';
                            $badgeCol = $is5xx ? '#ef4444' : '#f59e0b';
                        @endphp
                        <tr class="hover:bg-gray-50 transition error-row"
                            data-type="{{ $err->status >= 500 ? '5xx' : '4xx' }}"
                            style="display:table-row">
                            <td class="px-4 py-2 text-gray-400 whitespace-nowrap">
                                {{ $err->created_at->format('d/m H:i:s') }}
                            </td>
                            <td class="px-4 py-2 font-mono text-gray-600">{{ $err->method }}</td>
                            <td class="px-4 py-2 font-mono text-gray-700 max-w-xs truncate" title="{{ $err->path }}">
                                {{ $err->path }}
                            </td>
                            <td class="px-4 py-2 text-center">
                                <span class="inline-block px-1.5 py-0.5 rounded text-white text-[11px] font-bold"
                                      style="background:{{ $badgeCol }}">
                                    {{ $err->status }}
                                </span>
                            </td>
                            <td class="px-4 py-2 text-right text-gray-500">{{ $ms($err->duration_ms) }}</td>
                            <td class="px-4 py-2 font-mono text-gray-400">{{ $err->ip }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            @if ($recentErrors->isEmpty())
                <p class="px-4 py-6 text-xs text-gray-400 italic text-center">Geen fouten in deze periode.</p>
            @endif
        </div>
    </div>
</div>
@endif

<script>
function filterErrors(type) {
    const rows = document.querySelectorAll('.error-row');
    let visible = 0;

    rows.forEach(row => {
        const show = type === null || row.dataset.type === type;
        row.style.display = show ? 'table-row' : 'none';
        if (show) visible++;
    });

    // Update tab styles
    const tabs = { all: 'all', '4xx': '4xx', '5xx': '5xx' };
    const styles = {
        all:  { active: 'background:#e5e7eb;color:#374151', inactive: 'color:#9ca3af' },
        '4xx':{ active: 'background:#fef9c3;color:#92400e', inactive: 'color:#9ca3af' },
        '5xx':{ active: 'background:#fee2e2;color:#991b1b', inactive: 'color:#9ca3af' },
    };
    const tabKey = type ?? 'all';
    document.getElementById('etab-all').style = styles.all[tabKey === 'all' ? 'active' : 'inactive'];
    document.getElementById('etab-4xx').style = styles['4xx'][tabKey === '4xx' ? 'active' : 'inactive'];
    document.getElementById('etab-5xx').style = styles['5xx'][tabKey === '5xx' ? 'active' : 'inactive'];

    const label = document.getElementById('error-count-label');
    if (label) label.textContent = visible + ' fouten getoond';

    // Scroll to section
    const el = document.getElementById('fouten');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// Apply initial filter from server-side if set
@if ($errorType)
document.addEventListener('DOMContentLoaded', () => filterErrors('{{ $errorType }}'));
@endif
</script>

@endsection