@extends('layouts.app')
@section('title', 'Browse Exams')
@section('page-title', 'Available Exams')
@section('content')

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;">
    @forelse($exams as $exam)
    <div class="card" style="display: flex; flex-direction: column;">
        <div style="padding: 24px 24px 16px;">
            <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px;">
                <h3 style="font-size: 1rem; font-weight: 700; line-height: 1.4; flex: 1;">{{ $exam->title }}</h3>
                <span class="badge {{ $exam->status === 'active' ? 'badge-success' : 'badge-info' }}">
                    {{ ucfirst($exam->status) }}
                </span>
            </div>

            @if($exam->description)
            <p class="text-sm text-muted" style="margin-bottom: 14px; line-height: 1.6;">
                {{ Str::limit($exam->description, 100) }}
            </p>
            @endif

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;">
                <div style="background: var(--navy3); border-radius: 8px; padding: 8px 12px;">
                    <div class="text-xs text-muted">Duration</div>
                    <div style="font-weight: 600; font-size: .9rem;">{{ $exam->duration_minutes }} min</div>
                </div>
                <div style="background: var(--navy3); border-radius: 8px; padding: 8px 12px;">
                    <div class="text-xs text-muted">Pass Mark</div>
                    <div style="font-weight: 600; font-size: .9rem;">{{ $exam->pass_percentage }}%</div>
                </div>
                <div style="background: var(--navy3); border-radius: 8px; padding: 8px 12px;">
                    <div class="text-xs text-muted">Questions</div>
                    <div style="font-weight: 600; font-size: .9rem;">{{ $exam->questions_count ?? '—' }}</div>
                </div>
                <div style="background: var(--navy3); border-radius: 8px; padding: 8px 12px;">
                    <div class="text-xs text-muted">Fee</div>
                    <div style="font-weight: 600; font-size: .9rem; color: {{ $exam->isFree() ? 'var(--green)' : 'var(--amber)' }};">
                        {{ $exam->isFree() ? 'Free' : '$'.number_format($exam->price_per_candidate, 2) }}
                    </div>
                </div>
            </div>

            @if($exam->start_at)
            <div class="text-xs" style="color: var(--amber); margin-bottom: 10px;">
                <i class="bi bi-calendar-event"></i>
                Opens: {{ $exam->start_at->format('M j, Y H:i') }}
            </div>
            @endif

            <div class="text-xs text-muted">
                <i class="bi bi-person"></i> By {{ $exam->tester->name }}
                @if($exam->tester->organization) · {{ $exam->tester->organization }} @endif
                <span style="float: right;">{{ $exam->registrations_count }} registered</span>
            </div>
        </div>

        <div style="padding: 16px 24px; border-top: 1px solid var(--border); margin-top: auto;">
            @php
                $myReg = auth()->user()->registrations()->where('exam_id', $exam->id)->first();
            @endphp

            @if($myReg)
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <span class="badge badge-info"><i class="bi bi-check"></i> Registered</span>
                    <a href="{{ route('candidate.exams.show', $exam) }}" class="btn btn-outline btn-sm">View Status</a>
                </div>
            @else
                <form method="POST" action="{{ route('candidate.exams.register', $exam) }}">
                    @csrf
                    @if($exam->access_code)
                    <div style="margin-bottom: 10px;">
                        <input type="text" name="access_code" class="form-control" placeholder="Enter access code" required>
                    </div>
                    @endif
                    <button type="submit" class="btn btn-primary w-full">
                        <i class="bi bi-person-plus"></i> Register for This Exam
                    </button>
                </form>
            @endif
        </div>
    </div>
    @empty
    <div style="grid-column: 1/-1; text-align: center; padding: 80px 20px; color: var(--muted);">
        <i class="bi bi-journal-x" style="font-size: 3rem; display: block; margin-bottom: 16px;"></i>
        No exams are currently available. Check back later.
    </div>
    @endforelse
</div>

@if($exams->hasPages())
<div class="pagination-wrapper">{{ $exams->links() }}</div>
@endif
@endsection