@extends('layouts.app')
@section('title', $exam->title)
@section('page-title', $exam->title)
@section('content')

<div style="max-width: 760px;">
    <div class="card" style="margin-bottom: 24px;">
        <div class="card-body">
            <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap;">
                <div>
                    <h2 style="margin-bottom: 6px;">{{ $exam->title }}</h2>
                    <div class="text-muted text-sm">
                        By {{ $exam->tester->name }}
                        @if($exam->tester->organization) · {{ $exam->tester->organization }} @endif
                    </div>
                </div>
                <span class="badge {{ $exam->status === 'active' ? 'badge-success' : ($exam->status === 'published' ? 'badge-info' : 'badge-muted') }}" style="font-size: .85rem; padding: 6px 16px;">
                    {{ ucfirst($exam->status) }}
                </span>
            </div>

            @if($exam->description)
            <p style="color: var(--muted); line-height: 1.7; margin-bottom: 20px;">{{ $exam->description }}</p>
            @endif

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px;">
                <div style="background: var(--navy3); border-radius: 10px; padding: 14px; text-align: center;">
                    <i class="bi bi-clock" style="color: var(--accent); font-size: 1.2rem; display: block; margin-bottom: 4px;"></i>
                    <div style="font-weight: 700;">{{ $exam->duration_minutes }} min</div>
                    <div class="text-xs text-muted">Duration</div>
                </div>
                <div style="background: var(--navy3); border-radius: 10px; padding: 14px; text-align: center;">
                    <i class="bi bi-list-check" style="color: var(--green); font-size: 1.2rem; display: block; margin-bottom: 4px;"></i>
                    <div style="font-weight: 700;">{{ $exam->totalQuestions() }}</div>
                    <div class="text-xs text-muted">Questions</div>
                </div>
                <div style="background: var(--navy3); border-radius: 10px; padding: 14px; text-align: center;">
                    <i class="bi bi-trophy" style="color: var(--amber); font-size: 1.2rem; display: block; margin-bottom: 4px;"></i>
                    <div style="font-weight: 700;">{{ $exam->pass_percentage }}%</div>
                    <div class="text-xs text-muted">Pass Mark</div>
                </div>
                <div style="background: var(--navy3); border-radius: 10px; padding: 14px; text-align: center;">
                    <i class="bi bi-arrow-repeat" style="color: var(--accent2); font-size: 1.2rem; display: block; margin-bottom: 4px;"></i>
                    <div style="font-weight: 700;">{{ $exam->max_attempts }}</div>
                    <div class="text-xs text-muted">Max Attempts</div>
                </div>
            </div>

            @if($exam->start_at || $exam->end_at)
            <div style="background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px;">
                @if($exam->start_at)
                <div class="text-sm" style="margin-bottom: 4px;">
                    <i class="bi bi-calendar-check" style="color: var(--amber);"></i>
                    <strong>Opens:</strong> {{ $exam->start_at->format('D, M j Y — H:i') }}
                </div>
                @endif
                @if($exam->end_at)
                <div class="text-sm">
                    <i class="bi bi-calendar-x" style="color: var(--red);"></i>
                    <strong>Closes:</strong> {{ $exam->end_at->format('D, M j Y — H:i') }}
                </div>
                @endif
            </div>
            @endif

            @if($exam->instructions)
            <div style="background: var(--navy3); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px;">
                <div style="font-weight: 600; margin-bottom: 8px;"><i class="bi bi-info-circle" style="color: var(--accent);"></i> Instructions</div>
                <p class="text-sm" style="color: var(--muted); line-height: 1.7; white-space: pre-wrap;">{{ $exam->instructions }}</p>
            </div>
            @endif
        </div>
    </div>

    {{-- Registration / Action panel --}}
    @if($registration)
    <div class="card">
        <div class="card-body" style="text-align: center; padding: 36px;">
            <div style="font-weight: 600; margin-bottom: 6px;">Registration Status</div>
            @php
                $statusMap = [
                    'pending'   => ['label' => 'Awaiting Approval',  'class' => 'badge-warning', 'icon' => 'bi-hourglass-split'],
                    'approved'  => ['label' => 'Approved',            'class' => 'badge-success', 'icon' => 'bi-check-circle'],
                    'completed' => ['label' => 'Completed',           'class' => 'badge-info',    'icon' => 'bi-check2-all'],
                    'rejected'  => ['label' => 'Rejected',            'class' => 'badge-danger',  'icon' => 'bi-x-circle'],
                ];
                $s = $statusMap[$registration->status] ?? ['label' => ucfirst($registration->status), 'class' => 'badge-muted', 'icon' => 'bi-dot'];
            @endphp
            <span class="badge {{ $s['class'] }}" style="font-size: .95rem; padding: 8px 20px; margin-bottom: 20px;">
                <i class="bi {{ $s['icon'] }}"></i> {{ $s['label'] }}
            </span>

            @if($registration->payment_required && !$registration->payment_confirmed)
            <div class="alert alert-warning" style="text-align: left;">
                <i class="bi bi-credit-card"></i>
                Payment of <strong>${{ number_format($exam->price_per_candidate, 2) }}</strong> is required to take this exam.
            </div>
            <a href="{{ route('candidate.payment', $registration) }}" class="btn btn-primary">
                <i class="bi bi-credit-card"></i> Pay & Confirm Registration
            </a>

            @elseif($registration->status === 'approved' && $registration->canAttempt() && $exam->isActive())
            <div class="alert alert-success" style="text-align: left;">
                <i class="bi bi-check-circle"></i> You are cleared to take this exam. Good luck!
            </div>
            <a href="{{ route('candidate.exams.start', $exam) }}" class="btn btn-primary btn-lg">
                <i class="bi bi-play-circle"></i> Start Exam Now
            </a>

            @elseif(!$exam->isActive())
            <div class="alert alert-info" style="text-align: left;">
                <i class="bi bi-clock"></i>
                @if($exam->start_at && $exam->start_at->isFuture())
                    The exam has not started yet. It opens on {{ $exam->start_at->format('M j, Y H:i') }}.
                @else
                    This exam is not currently active.
                @endif
            </div>

            @elseif(!$registration->canAttempt())
            <div class="alert alert-warning" style="text-align: left;">
                <i class="bi bi-exclamation-triangle"></i> You have used all {{ $exam->max_attempts }} allowed attempt(s).
            </div>
            @endif

            {{-- Past attempts --}}
            @if(count($attempts) > 0)
            <div style="margin-top: 28px; text-align: left;">
                <div style="font-weight: 600; margin-bottom: 12px;">Your Attempts</div>
                @foreach($attempts as $att)
                <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--navy3); border-radius: 10px; margin-bottom: 8px;">
                    <div>
                        <span class="text-sm font-bold">Attempt #{{ $att->attempt_number }}</span>
                        <span class="text-xs text-muted" style="margin-left: 8px;">{{ $att->submitted_at?->format('M j, Y') }}</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        @if($att->status === 'graded')
                        <span class="{{ $att->passed ? 'badge-success' : 'badge-danger' }} badge" style="font-size: .8rem;">
                            {{ round($att->percentage) }}% — {{ $att->grade_label }}
                        </span>
                        <a href="{{ route('candidate.exams.result', $att) }}" class="btn btn-outline btn-sm">Result</a>
                        @else
                        <span class="badge badge-muted">{{ ucfirst($att->status) }}</span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>

    @else
    <div class="card">
        <div class="card-body" style="text-align: center; padding: 36px;">
            <div style="font-size: 2.5rem; margin-bottom: 12px;">📋</div>
            <div style="font-weight: 600; margin-bottom: 8px;">Not Yet Registered</div>
            <p class="text-muted text-sm" style="margin-bottom: 24px;">Register to take this exam.</p>
            <form method="POST" action="{{ route('candidate.exams.register', $exam) }}" style="max-width: 300px; margin: 0 auto;">
                @csrf
                @if($exam->access_code)
                <div style="margin-bottom: 14px;">
                    <input type="text" name="access_code" class="form-control" placeholder="Access code required" required>
                </div>
                @endif
                <button type="submit" class="btn btn-primary w-full">
                    <i class="bi bi-person-plus"></i> Register Now
                </button>
            </form>
        </div>
    </div>
    @endif

    <div style="margin-top: 16px;">
        <a href="{{ route('candidate.dashboard') }}" class="btn btn-outline">
            <i class="bi bi-arrow-left"></i> Back to Dashboard
        </a>
    </div>
</div>
@endsection