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

<div class="stat-grid">
    <div class="stat-card accent">
        <div class="stat-icon accent"><i class="bi bi-journal-bookmark"></i></div>
        <div class="stat-value">{{ $stats['total_registered'] }}</div>
        <div class="stat-label">Registered Exams</div>
    </div>
    <div class="stat-card green">
        <div class="stat-icon green"><i class="bi bi-check2-all"></i></div>
        <div class="stat-value">{{ $stats['completed'] }}</div>
        <div class="stat-label">Completed</div>
    </div>
    <div class="stat-card amber">
        <div class="stat-icon amber"><i class="bi bi-hourglass-split"></i></div>
        <div class="stat-value">{{ $stats['pending'] }}</div>
        <div class="stat-label">Awaiting Approval</div>
    </div>
    <div class="stat-card purple">
        <div class="stat-icon purple"><i class="bi bi-trophy"></i></div>
        <div class="stat-value">{{ $stats['passed'] }}</div>
        <div class="stat-label">Exams Passed</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5>My Registrations</h5>
        <a href="{{ route('candidate.exams.browse') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-search"></i> Browse Exams
        </a>
    </div>

    @forelse($registrations as $reg)
    <div style="padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
        <div style="flex: 1; min-width: 200px;">
            <div style="font-weight: 600; margin-bottom: 4px;">{{ $reg->exam->title }}</div>
            <div class="text-xs text-muted">
                By {{ $reg->exam->tester->name }}
                @if($reg->exam->tester->organization) · {{ $reg->exam->tester->organization }} @endif
            </div>
            <div class="text-xs text-muted" style="margin-top: 4px;">
                <i class="bi bi-clock"></i> {{ $reg->exam->duration_minutes }} min ·
                <i class="bi bi-bar-chart"></i> {{ $reg->exam->total_marks }} marks ·
                Pass: {{ $reg->exam->pass_percentage }}%
            </div>
            @if($reg->exam->start_at)
            <div class="text-xs" style="color: var(--amber); margin-top: 4px;">
                <i class="bi bi-calendar-event"></i> {{ $reg->exam->start_at->format('D, M j Y H:i') }}
            </div>
            @endif
        </div>

        <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
            {{-- Status badge --}}
            @php
                $statusMap = [
                    'pending'   => ['label' => 'Pending Approval', 'class' => 'badge-warning'],
                    'approved'  => ['label' => 'Approved',         'class' => 'badge-info'],
                    'completed' => ['label' => 'Completed',        'class' => 'badge-success'],
                    'rejected'  => ['label' => 'Rejected',         'class' => 'badge-danger'],
                ];
                $s = $statusMap[$reg->status] ?? ['label' => ucfirst($reg->status), 'class' => 'badge-muted'];
            @endphp
            <span class="badge {{ $s['class'] }}">{{ $s['label'] }}</span>

            {{-- Payment badge --}}
            @if($reg->payment_required && !$reg->payment_confirmed)
                <span class="badge badge-danger"><i class="bi bi-credit-card"></i> Payment Required</span>
            @endif

            {{-- Action button --}}
            @if($reg->payment_required && !$reg->payment_confirmed)
                <a href="{{ route('candidate.payment', $reg) }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-credit-card"></i> Pay Now
                </a>
            @elseif($reg->status === 'approved' && $reg->canAttempt() && $reg->exam->isActive())
                <a href="{{ route('candidate.exams.start', $reg->exam) }}" class="btn btn-success btn-sm">
                    <i class="bi bi-play-circle"></i> Start Exam
                </a>
            @elseif($reg->status === 'completed')
                @if($reg->attempts->where('status', 'graded')->first())
                    <a href="{{ route('candidate.exams.result', $reg->attempts->where('status','graded')->first()) }}" class="btn btn-outline btn-sm">
                        <i class="bi bi-bar-chart"></i> View Result
                    </a>
                @endif
            @else
                <a href="{{ route('candidate.exams.show', $reg->exam) }}" class="btn btn-outline btn-sm">
                    <i class="bi bi-eye"></i> Details
                </a>
            @endif
        </div>
    </div>
    @empty
    <div style="padding: 60px; text-align: center; color: var(--muted);">
        <i class="bi bi-journal-x" style="font-size: 2.5rem; display: block; margin-bottom: 12px;"></i>
        You haven't registered for any exams yet.
        <br><br>
        <a href="{{ route('candidate.exams.browse') }}" class="btn btn-primary">
            <i class="bi bi-search"></i> Browse Available Exams
        </a>
    </div>
    @endforelse
</div>
@endsection