@extends('layouts.student')
@section('title','Exam Instructions')

@section('content')
<div class="row justify-content-center">
<div class="col-lg-8">

<div class="card dashboard-card">
    <div class="card-header py-3 border-bottom" style="background:#003580">
        <h5 class="fw-bold mb-0 text-white">
            <i class="bi bi-info-circle me-2"></i>{{ $examSession->title }}
        </h5>
    </div>
    <div class="card-body p-4">

        {{-- Exam details --}}
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3 text-center">
                <div class="p-3 rounded" style="background:#f0f5ff">
                    <div class="fw-bold fs-3 text-primary">{{ $examSession->duration_minutes }}</div>
                    <div class="small text-muted">Minutes</div>
                </div>
            </div>
            <div class="col-6 col-md-3 text-center">
                <div class="p-3 rounded" style="background:#f0fff4">
                    <div class="fw-bold fs-3 text-success">{{ $subjects->count() }}</div>
                    <div class="small text-muted">Subjects</div>
                </div>
            </div>
            <div class="col-6 col-md-3 text-center">
                <div class="p-3 rounded" style="background:#fff8f0">
                    <div class="fw-bold fs-3 text-warning">
                        {{ $examSession->english_questions + ($examSession->questions_per_subject * ($subjects->count() - 1)) }}
                    </div>
                    <div class="small text-muted">Questions</div>
                </div>
            </div>
            <div class="col-6 col-md-3 text-center">
                <div class="p-3 rounded" style="background:#fff0f0">
                    <div class="fw-bold fs-3 text-danger">1</div>
                    <div class="small text-muted">Attempt Only</div>
                </div>
            </div>
        </div>

        {{-- Your subjects --}}
        <h6 class="fw-bold mb-3">Your Subjects:</h6>
        <div class="row g-2 mb-4">
            @foreach($subjects as $sel)
            <div class="col-6 col-md-3">
                <div class="p-3 rounded border d-flex align-items-center gap-2">
                    <i class="bi bi-book text-primary"></i>
                    <div>
                        <div class="fw-semibold small">{{ $sel->subject->name }}</div>
                        @if($sel->is_compulsory)
                            <span class="badge bg-warning text-dark" style="font-size:0.6rem">Compulsory</span>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Instructions --}}
        <div class="mb-4">
            <h6 class="fw-bold mb-3">General Instructions:</h6>
            <ul class="list-unstyled">
                @php $instructions = [
                    'Do not close or refresh this page during the exam — your answers are saved automatically.',
                    'The timer will count down. When time is up, the exam submits automatically.',
                    'You can flag questions to review later using the flag button.',
                    'Click any question number in the panel to jump to that question.',
                    'You can change your answer at any time before submission.',
                    'Once you click Submit Exam, you cannot go back.',
                ]; @endphp
                @foreach($instructions as $instruction)
                <li class="d-flex align-items-start gap-2 mb-2">
                    <i class="bi bi-check-circle-fill text-success mt-1 flex-shrink-0"></i>
                    <span class="small">{{ $instruction }}</span>
                </li>
                @endforeach
            </ul>

            @if($examSession->description)
            <div class="alert alert-light border mt-3">
                <strong>Additional Instructions:</strong><br>
                {{ $examSession->description }}
            </div>
            @endif
        </div>

        {{-- Start button --}}
        <div class="d-flex gap-3 align-items-center">
            <form method="POST" action="{{ route('student.exam.start', $examSession) }}">
                @csrf
                <button type="submit" class="btn btn-success btn-lg px-5 fw-bold">
                    <i class="bi bi-play-fill me-2"></i>Start Exam Now
                </button>
            </form>
            <a href="{{ route('student.dashboard') }}" class="btn btn-light">Cancel</a>
        </div>
    </div>
</div>

</div>
</div>
@endsection