@extends('layouts.app')
@section('title', 'Exam Security Logs')

@section('breadcrumb')
    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M9 18l6-6-6-6"/></svg>
    <span>Security logs</span>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-header-title">Exam security logs</h1>
        <p class="page-header-sub">Anti-cheating violations captured during exam sessions.</p>
    </div>
</div>

<section class="stats-grid stagger">
    <div class="stat-card">
        <div class="stat-gradient-bg"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-primary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
            <span class="stat-trend trend-live"><span class="pulse-dot"></span>MONITOR</span>
        </div>
        <div class="stat-label">Total events</div>
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">All violations</span></div>
    </div>
    <div class="stat-card warning">
        <div class="stat-gradient-bg stat-grad-warning"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 15h6"/></svg></div>
            <span class="stat-trend trend-up">{{ $stats['tab_switches'] }}</span>
        </div>
        <div class="stat-label">Tab switches</div>
        <div class="stat-value">{{ $stats['tab_switches'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Out-of-focus detections</span></div>
    </div>
    <div class="stat-card">
        <div class="stat-gradient-bg"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-primary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3"/></svg></div>
            <span class="stat-trend trend-up">{{ $stats['fullscreen_exits'] }}</span>
        </div>
        <div class="stat-label">Fullscreen exits</div>
        <div class="stat-value">{{ $stats['fullscreen_exits'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Kiosk-mode breaches</span></div>
    </div>
    <div class="stat-card danger">
        <div class="stat-gradient-bg stat-grad-danger"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg></div>
            <span class="stat-trend trend-down">{{ $stats['force_submits'] }}</span>
        </div>
        <div class="stat-label">Force submits</div>
        <div class="stat-value">{{ $stats['force_submits'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Auto-terminated attempts</span></div>
    </div>
</section>

<div class="chart-card">
    <div class="card-header">
        <div>
            <div class="card-title">
                <div class="card-title-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
                Security log
            </div>
            <div class="card-subtitle">{{ $logs->count() }} event(s)</div>
        </div>
    </div>

    @if($logs->isEmpty())
        <div class="empty-state">
            <div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg></div>
            <div class="empty-state-title">No security events</div>
            <div class="empty-state-text">Violations will be logged here when detected during exams.</div>
        </div>
    @else
        <div style="overflow-x:auto;">
            <table id="securityTable" class="data-table" style="width:100%;">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>Candidate</th>
                        <th>Post</th>
                        <th>Event</th>
                        <th>Message</th>
                        <th>Warn</th>
                        <th>IP</th>
                        <th>Time</th>
                        <th style="width:60px;">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($logs as $log)
                        @php
                            $ev = strtolower($log->event_type ?? '');
                            $pillTone = 's-neutral';
                            if (str_contains($ev, 'tab'))       $pillTone = 's-warning';
                            elseif (str_contains($ev, 'full'))  $pillTone = 's-info';
                            elseif (str_contains($ev, 'force')) $pillTone = 's-danger';
                            elseif (str_contains($ev, 'blur'))  $pillTone = 's-warning';
                            elseif (str_contains($ev, 'multi')) $pillTone = 's-danger';
                        @endphp
                        <tr>
                            <td class="cell-mono">{{ $loop->iteration }}</td>
                            <td>
                                <div class="cell-strong">{{ $log->user?->name ?? '—' }}</div>
                                <div class="cell-mono">{{ $log->user?->email }}</div>
                            </td>
                            <td><span class="status-pill s-neutral">{{ $log->application?->post?->code ?? '—' }}</span></td>
                            <td><span class="status-pill {{ $pillTone }}">{{ $log->event_type_label ?? $log->event_type }}</span></td>
                            <td style="max-width:260px;">
                                <span style="color: var(--text-secondary); font-size:12.5px; word-break:break-word;">{{ $log->event_message ?? '—' }}</span>
                            </td>
                            <td>
                                @if($log->event_count_snapshot !== null)
                                    <span class="warn-pill">{{ $log->event_count_snapshot }}</span>
                                @else
                                    <span class="cell-mono">—</span>
                                @endif
                            </td>
                            <td class="cell-mono">{{ $log->ip_address ?? '—' }}</td>
                            <td class="cell-time" title="{{ $log->created_at->format('d M Y, h:i A') }}">
                                <strong>{{ $log->created_at->format('d M Y') }}</strong><br>{{ $log->created_at->format('h:i A') }}
                            </td>
                            <td>
                                @if($log->examAttempt)
                                    <a href="{{ route('admin.exam-attempts.show', $log->examAttempt) }}" class="ds-icon-link" title="View attempt" aria-label="View">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                    </a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
$(function () {
    if ($('#securityTable tbody tr').length) {
        $('#securityTable').DataTable({
            responsive: true, pageLength: 25, order: [[7, 'desc']],
            dom: '<"row"<"col-sm-6"l><"col-sm-6 text-end"f>><"row"<"col-sm-12"tr>><"row"<"col-sm-5"i><"col-sm-7"p>>',
            language: { search: '', searchPlaceholder: 'Search events…', lengthMenu: 'Show _MENU_', info: 'Showing _START_–_END_ of _TOTAL_', paginate: { first: '«', last: '»', next: '›', previous: '‹' } },
            columnDefs: [{ orderable: false, targets: [8] }]
        });
    }
});
</script>
@endpush