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

@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>Exam attempts</span>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-header-title">Exam attempts</h1>
        <p class="page-header-sub">All candidate exam sessions across the system.</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"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div>
            <span class="stat-trend trend-up">all</span>
        </div>
        <div class="stat-label">Total attempts</div>
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Across all posts</span></div>
    </div>
    <div class="stat-card success">
        <div class="stat-gradient-bg stat-grad-success"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg></div>
            <span class="stat-trend trend-up">done</span>
        </div>
        <div class="stat-label">Completed</div>
        <div class="stat-value">{{ $stats['completed'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Submitted for grading</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"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
            <span class="stat-trend trend-live"><span class="pulse-dot"></span>LIVE</span>
        </div>
        <div class="stat-label">In progress / review</div>
        <div class="stat-value">{{ $stats['in_progress'] + $stats['in_review'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">{{ $stats['in_progress'] }} active · {{ $stats['in_review'] }} reviewing</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="M1 4v6h6M23 20v-6h-6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg></div>
            <span class="stat-trend trend-up">{{ $stats['reset'] }}</span>
        </div>
        <div class="stat-label">Reset</div>
        <div class="stat-value">{{ $stats['reset'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Admin-initiated restarts</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"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div>
                All exam attempts
            </div>
            <div class="card-subtitle">{{ number_format($stats['total']) }} record(s) · showing {{ $attempts->firstItem() ?? 0 }}–{{ $attempts->lastItem() ?? 0 }}</div>
        </div>
    </div>

    @if($attempts->isEmpty())
        <div class="empty-state">
            <div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/></svg></div>
            <div class="empty-state-title">No exam attempts yet</div>
            <div class="empty-state-text">Candidate exam sessions will appear here once they begin.</div>
        </div>
    @else
        <div style="overflow-x:auto;">
            <table id="attemptsTable" class="data-table" style="width:100%;">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>Candidate</th>
                        <th>Post</th>
                        <th>Attempt</th>
                        <th>Status</th>
                        <th>Score</th>
                        <th>Force</th>
                        <th>Started</th>
                        <th style="width:60px;">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($attempts as $a)
                        @php
                            $status = strtolower($a->status_label ?? $a->status ?? '');
                            $pillTone = str_contains($status, 'complet') ? 's-success'
                                      : (str_contains($status, 'progress') ? 's-info'
                                      : (str_contains($status, 'review') ? 's-warning'
                                      : (str_contains($status, 'reset') ? 's-info' : 's-neutral')));
                        @endphp
                        <tr>
                            <td class="cell-mono">{{ $loop->iteration }}</td>
                            <td>
                                <div class="cell-strong">{{ $a->user?->name }}</div>
                                <div class="cell-mono">{{ $a->user?->email }}</div>
                            </td>
                            <td><span class="status-pill s-neutral">{{ $a->post?->code }}</span></td>
                            <td class="cell-mono cell-strong">#{{ $a->attempt_no }}</td>
                            <td><span class="status-pill {{ $pillTone }}">{{ $a->status_label ?? ucfirst(str_replace('_',' ',$a->status)) }}</span></td>
                            <td>
                                @if($a->status === 'completed')
                                    <span class="cell-strong" style="font-family:'JetBrains Mono',monospace;">{{ $a->score }}/{{ $a->total_questions }}</span>
                                @else
                                    <span class="cell-mono">—</span>
                                @endif
                            </td>
                            <td>
                                @if($a->force_submitted)
                                    <span class="status-pill s-danger">Yes</span>
                                @else
                                    <span class="status-pill s-neutral">No</span>
                                @endif
                            </td>
                            <td class="cell-time">
                                @if($a->started_at)
                                    <strong>{{ $a->started_at->format('d M Y') }}</strong>
                                @else
                                    <span class="cell-mono">—</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('admin.exam-attempts.show', $a) }}" 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>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($attempts->hasPages())
            <div style="padding: 14px 16px; border-top: 1px solid var(--border);">
                {{ $attempts->links() }}
            </div>
        @endif
    @endif
</div>

@endsection

@push('scripts')
<script>
$(function () {
    if ($('#attemptsTable tbody tr').length) {
        $('#attemptsTable').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 attempts…', lengthMenu: 'Show _MENU_', info: 'Showing _START_–_END_ of _TOTAL_', paginate: { first: '«', last: '»', next: '›', previous: '‹' } },
            columnDefs: [{ orderable: false, targets: [8] }]
        });
    }
});
</script>
@endpush