@extends('layouts.app')
@section('title', 'Tester Dashboard')
@section('page-title', 'Dashboard')
@section('content')

<!-- Stats -->
<div class="stat-grid">
    <div class="stat-card accent">
        <div class="stat-icon accent"><i class="bi bi-journal-code"></i></div>
        <div class="stat-value">{{ $stats['total_exams'] }}</div>
        <div class="stat-label">Total Exams</div>
    </div>
    <div class="stat-card green">
        <div class="stat-icon green"><i class="bi bi-lightning-charge"></i></div>
        <div class="stat-value">{{ $stats['active_exams'] }}</div>
        <div class="stat-label">Active Exams</div>
    </div>
    <div class="stat-card purple">
        <div class="stat-icon purple"><i class="bi bi-people"></i></div>
        <div class="stat-value">{{ $stats['total_candidates'] }}</div>
        <div class="stat-label">Total Candidates</div>
    </div>
    <div class="stat-card amber">
        <div class="stat-icon amber"><i class="bi bi-check2-circle"></i></div>
        <div class="stat-value">{{ $stats['completed_attempts'] }}</div>
        <div class="stat-label">Completed Attempts</div>
    </div>
</div>

<div class="grid-2">
    <!-- Recent Exams -->
    <div class="card">
        <div class="card-header">
            <h5>Recent Exams</h5>
            <a href="{{ route('tester.exams.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus"></i> New Exam
            </a>
        </div>
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Exam</th>
                        <th>Status</th>
                        <th>Candidates</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentExams as $exam)
                    <tr>
                        <td>
                            <div style="font-weight:600;">{{ Str::limit($exam->title, 35) }}</div>
                            <div class="text-xs text-muted">{{ $exam->duration_minutes }} min · {{ $exam->total_marks }} marks</div>
                        </td>
                        <td>
                            <span class="badge badge-{{ $exam->status_badge['class'] === 'badge-success' ? 'success' : ($exam->status_badge['class'] === 'badge-info' ? 'info' : ($exam->status_badge['class'] === 'badge-warning' ? 'warning' : 'muted')) }}">
                                {{ $exam->status_badge['label'] }}
                            </span>
                        </td>
                        <td>{{ $exam->registrations->count() }}</td>
                        <td>
                            <a href="{{ route('tester.exams.results', $exam) }}" class="btn btn-outline btn-sm">Results</a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="text-muted" style="text-align:center;padding:40px;">No exams yet. <a href="{{ route('tester.exams.create') }}">Create your first exam</a></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Wallet & Quick Actions -->
    <div style="display:flex;flex-direction:column;gap:20px;">
        <div class="card">
            <div class="card-body" style="text-align:center;">
                <div style="font-size:2.5rem;margin-bottom:4px;">
                    <i class="bi bi-wallet2" style="color:var(--accent);"></i>
                </div>
                <div style="font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;margin-bottom:4px;">
                    {{ $stats['wallet']?->student_credits ?? 0 }}
                </div>
                <div class="text-muted text-sm" style="margin-bottom:20px;">Student Credits Available</div>
                <a href="{{ route('tester.billing.index') }}" class="btn btn-primary w-full">
                    <i class="bi bi-plus-circle"></i> Top Up Credits
                </a>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h5>Quick Actions</h5></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:10px;">
                <a href="{{ route('tester.exams.create') }}" class="btn btn-outline w-full">
                    <i class="bi bi-plus-circle"></i> Create New Exam
                </a>
                <a href="{{ route('tester.exams.index') }}" class="btn btn-outline w-full">
                    <i class="bi bi-journal-code"></i> Manage Exams
                </a>
                <a href="{{ route('tester.billing.index') }}" class="btn btn-outline w-full">
                    <i class="bi bi-credit-card"></i> Billing History
                </a>
            </div>
        </div>
    </div>
</div>
@endsection