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

@section('content')
<div class="p-6 max-w-7xl mx-auto space-y-6">

    {{-- Tab navigatie --}}
    <div class="flex flex-wrap gap-1 bg-white border border-gray-100 rounded-lg p-1 w-fit">
        @foreach (['payments' => 'Betalingen', 'security' => 'Beveiliging', 'app-errors' => 'App-fouten', 'server' => 'Serverfouten', 'queue-errors' => 'Queue-fouten'] as $key => $label)
            <a href="{{ route('admin.logs', ['tab' => $key] + request()->except('tab','page','apage','lpage')) }}"
               class="px-3 py-1.5 rounded-md text-xs font-medium transition
                      {{ $tab === $key ? 'bg-indigo-600 text-white' : 'text-gray-500 hover:text-gray-800 hover:bg-gray-50' }}">
                {{ $label }}
                @if($key === 'queue-errors')
                    @php $failedCount = \Illuminate\Support\Facades\DB::table('failed_jobs')->count(); @endphp
                    @if($failedCount > 0)
                        <span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold
                                     {{ $tab === $key ? 'bg-white text-indigo-600' : 'bg-red-500 text-white' }}">
                            {{ $failedCount > 9 ? '9+' : $failedCount }}
                        </span>
                    @endif
                @endif
            </a>
        @endforeach
    </div>

    {{-- ── BETALINGEN ─────────────────────────────────────────────────────── --}}
    @if($tab === 'payments')
        @php
            $eventColors = [
                'checkout_started'            => 'bg-gray-100 text-gray-700',
                'plan_switch_started'         => 'bg-gray-100 text-gray-700',
                'payment_paid'                => 'bg-green-100 text-green-800',
                'renewal_paid'                => 'bg-green-100 text-green-800',
                'payment_failed'              => 'bg-red-100 text-red-700',
                'payment_expired'             => 'bg-red-100 text-red-700',
                'payment_cancelled'           => 'bg-red-100 text-red-700',
                'subscription_cancelled'      => 'bg-orange-100 text-orange-700',
                'subscription_creation_failed'=> 'bg-red-100 text-red-700',
                'webhook_received'            => 'bg-blue-100 text-blue-700',
                'webhook_error'               => 'bg-red-100 text-red-700',
                'referral_reward_granted'     => 'bg-violet-100 text-violet-700',
            ];
        @endphp

        {{-- Summary cards --}}
        @if($summary)
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
            @foreach ([
                ['label' => 'Gestart',      'value' => $summary->started   ?? 0, 'color' => 'text-gray-700'],
                ['label' => 'Betaald',       'value' => $summary->paid      ?? 0, 'color' => 'text-green-700'],
                ['label' => 'Mislukt',       'value' => $summary->failed    ?? 0, 'color' => 'text-red-700'],
                ['label' => 'Geannuleerd',   'value' => $summary->cancelled ?? 0, 'color' => 'text-orange-700'],
                ['label' => 'Verlengingen',  'value' => $summary->renewals  ?? 0, 'color' => 'text-blue-700'],
                ['label' => 'Webhooks',      'value' => $summary->webhooks  ?? 0, 'color' => 'text-indigo-700'],
            ] as $card)
            <div class="bg-white rounded-lg border border-gray-100 p-3 text-center">
                <div class="text-2xl font-bold {{ $card['color'] }}">{{ number_format($card['value']) }}</div>
                <div class="text-xs text-gray-500 mt-0.5">{{ $card['label'] }} <span class="text-gray-400">(30d)</span></div>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Filterbar --}}
        <form method="GET" action="{{ route('admin.logs') }}" class="bg-white border border-gray-100 rounded-lg p-4 flex flex-wrap gap-3 items-end">
            <input type="hidden" name="tab" value="payments">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Event</label>
                <select name="event" class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-44">
                    <option value="">— Alle events —</option>
                    @foreach(['checkout_started','plan_switch_started','payment_paid','renewal_paid','payment_failed','payment_expired','payment_cancelled','subscription_cancelled','subscription_creation_failed','webhook_received','webhook_error','referral_reward_granted'] as $ev)
                        <option value="{{ $ev }}" {{ request('event') === $ev ? 'selected' : '' }}>{{ $ev }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Mollie ID</label>
                <input type="text" name="mollie_id" value="{{ request('mollie_id') }}" placeholder="tr_..." class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-36">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Gebruiker ID</label>
                <input type="number" name="user_id" value="{{ request('user_id') }}" placeholder="ID" class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-24">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Van</label>
                <input type="date" name="from" value="{{ request('from') }}" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Tot</label>
                <input type="date" name="to" value="{{ request('to') }}" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
            </div>
            <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 transition">Filter</button>
            <a href="{{ route('admin.logs', ['tab' => 'payments']) }}" class="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700">Reset</a>
        </form>

        {{-- Tabel --}}
        <div class="bg-white border border-gray-100 rounded-lg overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Datum/tijd</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Gebruiker</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Event</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Plan</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Bedrag</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Orig.</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Korting</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Mollie ID</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @forelse($logs as $log)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-2.5 text-gray-600 whitespace-nowrap text-xs">{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                            <td class="px-4 py-2.5">
                                @if($log->user)
                                    <a href="{{ route('admin.users.show', $log->user) }}" class="text-indigo-600 hover:underline"><span class="text-gray-400 font-normal">#{{ $log->user->id }}</span> {{ $log->user->name }}</a>
                                @elseif($log->user_id)
                                    <span class="text-gray-400 text-xs">#{{ $log->user_id }} (verwijderd)</span>
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $eventColors[$log->event] ?? 'bg-gray-100 text-gray-600' }}">
                                    {{ $log->event }}
                                </span>
                            </td>
                            <td class="px-4 py-2.5 text-gray-600 text-xs">{{ $log->plan ?? '—' }}</td>
                            <td class="px-4 py-2.5 text-gray-800 text-xs font-mono">{{ $log->amount ? '€' . $log->amount : '—' }}</td>
                            <td class="px-4 py-2.5 text-gray-500 text-xs font-mono">{{ $log->original_amount ? '€' . $log->original_amount : '—' }}</td>
                            <td class="px-4 py-2.5 text-xs font-mono {{ $log->discount_amount ? 'text-green-700' : 'text-gray-300' }}">{{ $log->discount_amount ? '-€' . $log->discount_amount : '—' }}</td>
                            <td class="px-4 py-2.5 text-xs font-mono text-gray-500 max-w-xs truncate" title="{{ $log->mollie_payment_id }}">{{ $log->mollie_payment_id ? substr($log->mollie_payment_id, 0, 20) . (strlen($log->mollie_payment_id) > 20 ? '…' : '') : '—' }}</td>
                            <td class="px-4 py-2.5">
                                <a href="{{ route('admin.logs.payment', $log) }}" class="text-xs text-indigo-500 hover:underline">Details</a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="9" class="px-4 py-6 text-center text-gray-400 text-sm">Geen betalingslogs gevonden.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($logs->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">{{ $logs->links() }}</div>
            @endif
        </div>
    @endif

    {{-- ── BEVEILIGING ─────────────────────────────────────────────────────── --}}
    @if($tab === 'security')
        @php
            $actionColors = [
                'ban'                   => 'bg-red-100 text-red-700',
                'suspend'               => 'bg-orange-100 text-orange-700',
                'unsuspend'             => 'bg-green-100 text-green-800',
                'role_change'           => 'bg-blue-100 text-blue-700',
                'premium_update'        => 'bg-indigo-100 text-indigo-700',
                'user_delete'           => 'bg-red-100 text-red-700',
                'subscription_grant'    => 'bg-violet-100 text-violet-700',
                'subscription_extend'   => 'bg-violet-100 text-violet-700',
                'subscription_revoke'   => 'bg-orange-100 text-orange-700',
                'subscription_trial'    => 'bg-yellow-100 text-yellow-700',
                'subscription_manual'   => 'bg-gray-100 text-gray-700',
            ];
            $loginColors = [
                'success'                    => 'bg-green-100 text-green-800',
                'failed'                     => 'bg-red-100 text-red-700',
                'logout'                     => 'bg-gray-100 text-gray-600',
                'registration'               => 'bg-green-100 text-green-800',
                'registration_failed'        => 'bg-red-100 text-red-700',
                'email_verified'             => 'bg-green-100 text-green-800',
                'password_reset_requested'   => 'bg-blue-100 text-blue-700',
                'password_reset_completed'   => 'bg-blue-100 text-blue-700',
                'password_changed'           => 'bg-blue-100 text-blue-700',
                'email_changed'              => 'bg-blue-100 text-blue-700',
                'account_deletion_requested' => 'bg-orange-100 text-orange-700',
                'account_deleted'            => 'bg-red-100 text-red-700',
                'login_throttled'            => 'bg-yellow-100 text-yellow-800',
                'photo_uploaded'             => 'bg-sky-100 text-sky-700',
                'photo_upload_failed'        => 'bg-red-100 text-red-700',
                'photo_deleted'              => 'bg-orange-100 text-orange-700',
            ];
        @endphp

        {{-- Gedeelde filterbar --}}
        <form method="GET" action="{{ route('admin.logs') }}" class="bg-white border border-gray-100 rounded-lg p-4 flex flex-wrap gap-3 items-end">
            <input type="hidden" name="tab" value="security">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Admin-actie</label>
                <select name="action" class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-44">
                    <option value="">— Alle acties —</option>
                    @foreach(['ban','suspend','unsuspend','role_change','premium_update','user_delete','subscription_grant','subscription_extend','subscription_revoke','subscription_trial','subscription_manual'] as $act)
                        <option value="{{ $act }}" {{ request('action') === $act ? 'selected' : '' }}>{{ $act }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Auth-type</label>
                <select name="login_type" class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-44">
                    <option value="">— Alle types —</option>
                    @foreach(['success','failed','logout','registration','registration_failed','email_verified','password_reset_requested','password_reset_completed','password_changed','email_changed','account_deletion_requested','account_deleted','login_throttled','photo_uploaded','photo_upload_failed','photo_deleted'] as $lt)
                        <option value="{{ $lt }}" {{ request('login_type') === $lt ? 'selected' : '' }}>{{ $lt }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">E-mail</label>
                <input type="text" name="login_email" value="{{ request('login_email') }}" placeholder="zoek op e-mail" class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-44">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Van</label>
                <input type="date" name="from" value="{{ request('from') }}" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Tot</label>
                <input type="date" name="to" value="{{ request('to') }}" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
            </div>
            <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 transition">Filter</button>
            <a href="{{ route('admin.logs', ['tab' => 'security']) }}" class="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700">Reset</a>
        </form>

        {{-- Sectie 1: Admin-acties --}}
        <div class="bg-white border border-gray-100 rounded-lg overflow-hidden" x-data="{ open: false }">
            <button type="button" @click="open = !open"
                    class="w-full px-4 py-3 border-b border-gray-100 flex items-center justify-between hover:bg-gray-50 transition">
                <h3 class="text-sm font-semibold text-gray-700">Beheerdersacties</h3>
                <div class="flex items-center gap-3">
                    <span class="text-xs text-gray-400">{{ $adminLogs->total() }} entries</span>
                    <svg class="w-4 h-4 text-gray-400 transition-transform" :class="{ 'rotate-180': open }"
                         fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </div>
            </button>
            <div x-show="open">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Datum/tijd</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Admin</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Doelgebruiker</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Actie</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Oud → Nieuw</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Opmerking</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @forelse($adminLogs as $log)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-2.5 text-gray-600 whitespace-nowrap text-xs">{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                            <td class="px-4 py-2.5 text-xs">
                                @if($log->admin)
                                    <a href="{{ route('admin.users.show', $log->admin) }}" class="text-indigo-600 hover:underline"><span class="text-gray-400 font-normal">#{{ $log->admin->id }}</span> {{ $log->admin->name }}</a>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-xs">
                                @if($log->targetUser)
                                    <a href="{{ route('admin.users.show', $log->targetUser) }}" class="text-indigo-600 hover:underline"><span class="text-gray-400 font-normal">#{{ $log->targetUser->id }}</span> {{ $log->targetUser->name }}</a>
                                @elseif($log->target_name || $log->target_email)
                                    <span class="text-gray-500">{{ $log->target_name ?? $log->target_email }}</span>
                                    <span class="text-gray-400 text-xs">(verwijderd)</span>
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $actionColors[$log->action] ?? 'bg-gray-100 text-gray-600' }}">
                                    {{ $log->action }}
                                </span>
                            </td>
                            <td class="px-4 py-2.5 text-xs text-gray-600">
                                @if($log->old_value || $log->new_value)
                                    <span class="text-gray-400">{{ $log->old_value ?? '—' }}</span>
                                    <span class="mx-1 text-gray-300">→</span>
                                    <span class="font-medium">{{ $log->new_value ?? '—' }}</span>
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-xs text-gray-500 max-w-xs truncate" title="{{ $log->note }}">{{ Str::limit($log->note, 60) ?? '—' }}</td>
                            <td class="px-4 py-2.5">
                                <a href="{{ route('admin.logs.security', $log) }}" class="text-xs text-indigo-500 hover:underline">Details</a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="7" class="px-4 py-6 text-center text-gray-400 text-sm">Geen admin-acties gevonden.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($adminLogs->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">{{ $adminLogs->links() }}</div>
            @endif
            </div>{{-- /x-show --}}
        </div>

        {{-- Sectie 2: Auth-events --}}
        <div class="bg-white border border-gray-100 rounded-lg overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-700">Auth-events</h3>
                <span class="text-xs text-gray-400">{{ $loginLogs->total() }} entries</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Datum/tijd</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">E-mail</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Gebruiker</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Type</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Laatste activiteit</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">IP</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">User-agent</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @forelse($loginLogs as $log)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-2.5 text-gray-600 whitespace-nowrap text-xs">{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                            <td class="px-4 py-2.5 text-xs text-gray-700">{{ $log->email }}</td>
                            <td class="px-4 py-2.5 text-xs">
                                @if($log->user)
                                    <a href="{{ route('admin.users.show', $log->user) }}" class="text-indigo-600 hover:underline"><span class="text-gray-400 font-normal">#{{ $log->user->id }}</span> {{ $log->user->name }}</a>
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $loginColors[$log->type] ?? 'bg-gray-100 text-gray-600' }}">
                                    {{ $log->type }}
                                </span>
                                @if ($log->type === 'failed' && ($reason = $log->context['reason'] ?? null))
                                    <div class="text-xs mt-0.5 {{ $reason === 'wrong_password' ? 'text-orange-500' : 'text-red-400' }}">
                                        {{ $reason === 'email_not_found' ? 'e-mail onbekend' : 'fout wachtwoord' }}
                                    </div>
                                @elseif ($log->type === 'registration_failed')
                                    <div class="text-xs mt-0.5 text-red-400">DB-fout</div>
                                @elseif ($log->type === 'registration' && ($log->context['email_failed'] ?? false))
                                    <div class="text-xs mt-0.5 text-orange-500">verificatie-e-mail mislukt</div>
                                @elseif ($log->type === 'photo_upload_failed')
                                    <div class="text-xs mt-0.5 text-red-400 truncate max-w-32" title="{{ $log->context['error'] ?? '' }}">
                                        {{ \Illuminate\Support\Str::limit($log->context['error'] ?? '', 40) }}
                                    </div>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-xs text-gray-500 whitespace-nowrap">
                                @if ($log->last_active_at)
                                    @php $activeAt = \Carbon\Carbon::parse($log->last_active_at); @endphp
                                    <span title="{{ $activeAt->format('d/m/Y H:i:s') }}">{{ $activeAt->diffForHumans() }}</span>
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-xs font-mono text-gray-500">{{ $log->ip_address ?? '—' }}</td>
                            <td class="px-4 py-2.5 text-xs text-gray-400 max-w-xs truncate" title="{{ $log->user_agent }}">{{ Str::limit($log->user_agent, 60) }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="7" class="px-4 py-6 text-center text-gray-400 text-sm">Geen auth-events gevonden.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($loginLogs->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">{{ $loginLogs->links() }}</div>
            @endif
        </div>
    @endif

    {{-- ── APP-FOUTEN ──────────────────────────────────────────────────────── --}}
    @if($tab === 'app-errors')
        @php
            $levelColors = [
                'ERROR'     => 'bg-red-100 text-red-700',
                'CRITICAL'  => 'bg-red-200 text-red-800',
                'EMERGENCY' => 'bg-red-300 text-red-900',
                'WARNING'   => 'bg-yellow-100 text-yellow-700',
            ];
        @endphp

        @if(!auth()->user()->isAdmin())
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
                Alleen admins kunnen applicatiefouten inzien.
            </div>
        @else
            {{-- Filterbar --}}
            <form method="GET" action="{{ route('admin.logs') }}" class="bg-white border border-gray-100 rounded-lg p-4 flex flex-wrap gap-3 items-end">
                <input type="hidden" name="tab" value="app-errors">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Niveau</label>
                    <select name="level" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
                        @foreach(['ERROR' => 'ERROR + CRITICAL', 'WARNING' => 'WARNING', 'CRITICAL' => 'CRITICAL + EMERGENCY'] as $val => $lbl)
                            <option value="{{ $val }}" {{ ($level ?? 'ERROR') === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                        @endforeach
                    </select>
                </div>
                @if(!empty($availableDates))
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Bestand</label>
                    <select name="date" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
                        @foreach($availableDates as $d)
                            <option value="{{ $d }}" {{ $date === $d ? 'selected' : '' }}>
                                {{ $d === 'laravel.log' ? 'laravel.log (huidig)' : $d }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @endif
                <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 transition">Filter</button>
                <a href="{{ route('admin.logs', ['tab' => 'app-errors']) }}" class="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700">Reset</a>
            </form>

            <div class="bg-white border border-gray-100 rounded-lg overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-700">Log-entries</h3>
                    <span class="text-xs text-gray-400">{{ $logs->total() }} entries</span>
                </div>
                <div class="divide-y divide-gray-50">
                    @forelse($logs as $entry)
                    <div class="px-4 py-3" x-data="{ open: false }">
                        <div class="flex items-start gap-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium shrink-0 {{ $levelColors[$entry['level']] ?? 'bg-gray-100 text-gray-600' }}">
                                {{ $entry['level'] }}
                            </span>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-0.5">
                                    <span class="text-xs text-gray-400 font-mono">{{ $entry['timestamp'] }}</span>
                                    @if(!empty($entry['trace']))
                                    <button @click="open = !open" class="text-xs text-indigo-500 hover:underline">
                                        <span x-text="open ? 'verberg trace' : 'toon trace'"></span>
                                    </button>
                                    @endif
                                </div>
                                @if(!empty($entry['exception_class']))
                                <span class="inline-block text-xs font-mono font-semibold text-red-600 mb-0.5">{{ $entry['exception_class'] }}</span>
                                @endif
                                <p class="text-sm text-gray-700 break-words">{{ $entry['message'] }}</p>
                                @if(!empty($entry['trace']))
                                <div x-show="open" x-cloak class="mt-2">
                                    <pre class="text-xs text-gray-500 bg-gray-50 rounded p-2 overflow-x-auto whitespace-pre-wrap">{{ $entry['trace'] }}</pre>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="px-4 py-6 text-center text-gray-400 text-sm">Geen log-entries gevonden voor de gekozen filters.</div>
                    @endforelse
                </div>
                @if($logs->hasPages())
                <div class="px-4 py-3 border-t border-gray-100">{{ $logs->links() }}</div>
                @endif
            </div>
        @endif
    @endif

    {{-- ── SERVERFOUTEN ────────────────────────────────────────────────────── --}}
    @if($tab === 'server')
        @php
            $statusColor = fn(int $s) => match(true) {
                $s >= 503 => 'bg-yellow-100 text-yellow-700',
                $s >= 500 => 'bg-red-100 text-red-700',
                $s >= 429 => 'bg-orange-100 text-orange-700',
                $s >= 404 => 'bg-gray-100 text-gray-600',
                $s >= 400 => 'bg-amber-100 text-amber-700',
                default   => 'bg-gray-100 text-gray-500',
            };
        @endphp

        {{-- Breakdown --}}
        @if($breakdown->isNotEmpty())
        <div class="bg-white border border-gray-100 rounded-lg overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-100">
                <h3 class="text-sm font-semibold text-gray-700">Verdeling per statuscode</h3>
            </div>
            <div class="p-4 flex flex-wrap gap-3">
                @foreach($breakdown as $row)
                <div class="flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold {{ $statusColor($row->status) }}">
                        {{ $row->status }}
                    </span>
                    <span class="text-sm font-semibold text-gray-700">{{ number_format($row->total) }}×</span>
                    <span class="text-xs text-gray-400">{{ \Carbon\Carbon::parse($row->last_seen)->format('d/m H:i:s') }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Filterbar --}}
        <form method="GET" action="{{ route('admin.logs') }}" class="bg-white border border-gray-100 rounded-lg p-4 flex flex-wrap gap-3 items-end">
            <input type="hidden" name="tab" value="server">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Statuscodes</label>
                <select name="status_range" class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-36>
                    <option value="all" {{ request('status_range', 'all') === 'all' ? 'selected' : '' }}>4xx + 5xx</option>
                    <option value="4xx" {{ request('status_range') === '4xx' ? 'selected' : '' }}>Alleen 4xx</option>
                    <option value="5xx" {{ request('status_range') === '5xx' ? 'selected' : '' }}>Alleen 5xx</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Pad</label>
                <input type="text" name="path" value="{{ request('path') }}" placeholder="/api/..." class="text-sm border border-gray-200 rounded-md px-2 py-1.5 w-48">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Van</label>
                <input type="date" name="from" value="{{ request('from') }}" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Tot</label>
                <input type="date" name="to" value="{{ request('to') }}" class="text-sm border border-gray-200 rounded-md px-2 py-1.5">
            </div>
            <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 transition">Filter</button>
            <a href="{{ route('admin.logs', ['tab' => 'server']) }}" class="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700">Reset</a>
        </form>

        <div class="bg-white border border-gray-100 rounded-lg overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-700">HTTP-fouten</h3>
                <span class="text-xs text-gray-400">{{ $logs->total() }} entries</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Datum/tijd</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Method</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Pad</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Status</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Duur (ms)</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">IP</th>
                            <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Gebruiker</th>
                            <th class="px-4 py-2.5"></th>
                        </tr>
                    </thead>
                    @forelse($logs as $log)
                    <tbody x-data="{ open: false }" class="divide-y divide-gray-50">
                        <tr class="hover:bg-gray-50 transition" :class="open ? 'bg-red-50/40' : ''">
                            <td class="px-4 py-2.5 text-gray-600 whitespace-nowrap text-xs">{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                            <td class="px-4 py-2.5 text-xs font-mono font-medium text-gray-700">{{ $log->method }}</td>
                            <td class="px-4 py-2.5 text-xs font-mono text-gray-600 max-w-xs truncate" title="{{ $log->path }}">{{ $log->path }}</td>
                            <td class="px-4 py-2.5">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold {{ $statusColor($log->status) }}">
                                    {{ $log->status }}
                                </span>
                            </td>
                            <td class="px-4 py-2.5 text-xs font-mono text-gray-600">{{ $log->duration_ms }}</td>
                            <td class="px-4 py-2.5 text-xs font-mono text-gray-500">{{ $log->ip ?? '—' }}</td>
                            <td class="px-4 py-2.5 text-xs">
                                @if($log->user_id)
                                    @php $u = App\Models\User::find($log->user_id); @endphp
                                    @if($u)
                                        <a href="{{ route('admin.users.show', $u) }}" class="text-indigo-600 hover:underline"><span class="text-gray-400 font-normal">#{{ $u->id }}</span> {{ $u->name }}</a>
                                    @else
                                        <span class="text-gray-400">#{{ $log->user_id }}</span>
                                    @endif
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-right whitespace-nowrap">
                                @if(!empty($log->exception))
                                <button @click="open = !open" class="text-xs text-red-500 hover:underline mr-2">
                                    <span x-text="open ? 'verberg' : 'exception'"></span>
                                </button>
                                @endif
                                <a href="{{ route('admin.logs.server', $log) }}" class="text-xs text-indigo-500 hover:underline">Details</a>
                            </td>
                        </tr>
                        @if(!empty($log->exception))
                        <tr x-show="open" x-cloak>
                            <td colspan="8" class="px-4 pb-3 pt-0 bg-red-50">
                                <pre class="text-xs text-red-700 bg-red-100 rounded p-2 overflow-x-auto whitespace-pre-wrap">{{ $log->exception }}</pre>
                            </td>
                        </tr>
                        @endif
                    </tbody>
                    @empty
                    <tbody>
                        <tr><td colspan="8" class="px-4 py-6 text-center text-gray-400 text-sm">Geen serverfouten gevonden.</td></tr>
                    </tbody>
                    @endforelse
                </table>
            </div>
            @if($logs->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">{{ $logs->links() }}</div>
            @endif
        </div>
    @endif

    {{-- ── QUEUE-FOUTEN ────────────────────────────────────────────────────── --}}
    @if($tab === 'queue-errors')
        @if(!auth()->user()->isAdmin())
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
                Alleen admins kunnen queue-fouten inzien.
            </div>
        @else
            <div class="flex items-center justify-between">
                <p class="text-sm text-gray-500">
                    Jobs die na 3 pogingen nog steeds mislukten. Hier kun je ze opnieuw proberen of verwijderen.
                </p>
                @if($logs->total() > 0)
                <form method="POST" action="{{ route('admin.logs.queue.retry-all') }}"
                      onsubmit="return confirm('Alle {{ $logs->total() }} mislukte jobs opnieuw proberen?')">
                    @csrf
                    <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-xs rounded-md hover:bg-indigo-700 transition">
                        Alles herproberen ({{ $logs->total() }})
                    </button>
                </form>
                @endif
            </div>

            <div class="bg-white border border-gray-100 rounded-lg overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-100">
                            <tr>
                                <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Mislukt op</th>
                                <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Job</th>
                                <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Queue</th>
                                <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5">Fout</th>
                                <th class="text-left text-xs font-medium text-gray-500 px-4 py-2.5"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @forelse($logs as $job)
                            <tr class="hover:bg-gray-50 transition" x-data="{ open: false }">
                                <td class="px-4 py-2.5 text-gray-600 whitespace-nowrap text-xs">
                                    {{ \Carbon\Carbon::parse($job->failed_at)->format('d/m/Y H:i:s') }}
                                </td>
                                <td class="px-4 py-2.5">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700"
                                          title="{{ $job->full_name }}">
                                        {{ $job->display_name }}
                                    </span>
                                </td>
                                <td class="px-4 py-2.5 text-xs font-mono text-gray-500">{{ $job->queue }}</td>
                                <td class="px-4 py-2.5 text-xs text-gray-600 max-w-sm">
                                    <div class="truncate" title="{{ $job->first_line }}">{{ Str::limit($job->first_line, 80) }}</div>
                                    <button @click="open = !open" class="text-indigo-500 hover:underline text-xs mt-0.5">
                                        <span x-text="open ? 'verberg trace' : 'toon trace'"></span>
                                    </button>
                                    <div x-show="open" x-cloak class="mt-1">
                                        <pre class="text-xs text-gray-500 bg-gray-50 rounded p-2 overflow-x-auto whitespace-pre-wrap max-h-48">{{ $job->exception }}</pre>
                                    </div>
                                </td>
                                <td class="px-4 py-2.5 text-right whitespace-nowrap">
                                    <form method="POST" action="{{ route('admin.logs.queue.retry', $job->uuid) }}" class="inline">
                                        @csrf
                                        <button type="submit" class="text-xs text-indigo-500 hover:underline mr-3">Herproberen</button>
                                    </form>
                                    <form method="POST" action="{{ route('admin.logs.queue.delete', $job->uuid) }}" class="inline"
                                          onsubmit="return confirm('Job verwijderen?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-xs text-red-400 hover:underline">Verwijderen</button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="px-4 py-8 text-center text-gray-400 text-sm">Geen mislukte jobs. Alles werkt goed.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($logs->hasPages())
                <div class="px-4 py-3 border-t border-gray-100">{{ $logs->links() }}</div>
                @endif
            </div>
        @endif
    @endif

</div>
@endsection