@extends('layouts.appLayout')

@section('title', $course->title.' — Exam')
@section('nav_title', 'Course Chapter')

@section('content')
    <div class="container my-4">

        {{-- Breadcrumbs --}}
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent px-0">
                <li class="breadcrumb-item"><a href="{{ route('myProfilePage') }}">Profile</a></li>
                <li class="breadcrumb-item"><a href="{{ route('myCoursesPage') }}">My Courses</a></li>
                <li class="breadcrumb-item"><a href="{{ route('showCourseInfo', ['id' => $course->id]) }}">Course info</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $course->title }}</li>
            </ol>
        </nav>

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="text-white mb-0">{{ $course->title }}</h1>
            <a href="{{ route('showCourseInfo', ['id' => $course->id]) }}" class="btn btn3">
                <i class="fas fa-arrow-left me-2"></i>Back to course info
            </a>
        </div>

        {{-- Chapter Heading --}}
        <h2 class="chapter-heading mb-3">
            <span class="textOrange">Chapter {{ $chapterData['chapter_number'] }}:</span>
            <span class="text-white">{{ $chapterData['title'] }}</span>
        </h2>

        {{-- Chapter Content --}}
        <div class="chapter-content bg-white border border-2 mb-4" style="border-color: rgb(255,115,0); padding:1.5rem;">
            {!! $chapterData['content'] !!}
        </div>

        {{-- Exam Form --}}
        <h3 class="mb-3">Exam Questions</h3>
        <form id="exam-form"
              method="POST"
              action="{{ route('course.chapter.submitExam', ['chapterId' => $chapterData['chapter_id']]) }}">
            @csrf

            @foreach($chapterData['exercises'] as $exe)
                @php
                    $attempted = $exe['status'] !== 'incompleted';
                @endphp

                <div class="exercise mb-4 {{ $attempted ? 'attempted' : '' }}"
                     data-exercise-id="{{ $exe['exercise_id'] }}"
                     data-exercise-type="{{ $exe['type'] }}">
                    
                    <p><strong>#{{ $exe['exercise_number'] }}</strong> – {{ $exe['question'] }}</p>

                    @if(! $attempted)
                        @switch($exe['type'])
                            @case('input')
                                <input type="text"
                                       class="form-control mb-2 inputTextLong"
                                       name="answers[{{ $exe['exercise_id'] }}]" />
                                @break

                            @case('radio')
                                @foreach($exe['options'] as $opt)
                                    <div class="form-check mb-1">
                                        <input class="form-check-input inputRadioPurple"
                                               type="radio"
                                               name="answers[{{ $exe['exercise_id'] }}]"
                                               id="opt_{{ $opt['option_id'] }}"
                                               value="{{ $opt['option_id'] }}">
                                        <label class="form-check-label">
                                            {{ $opt['answer'] }}
                                        </label>
                                    </div>
                                @endforeach
                                @break

                            @case('checkbox')
                                @foreach($exe['options'] as $opt)
                                    <div class="form-check mb-1">
                                        <input class="form-check-input inputCheckboxPurple"
                                               type="checkbox"
                                               name="answers[{{ $exe['exercise_id'] }}][]"
                                               id="opt_{{ $opt['option_id'] }}"
                                               value="{{ $opt['option_id'] }}">
                                        <label class="form-check-label">
                                            {{ $opt['answer'] }}
                                        </label>
                                    </div>
                                @endforeach
                                @break
                        @endswitch

                        <button class="btn btn2 btn-sm mt-2 answer-btn" type="button">
                            Submit Answer
                        </button>
                    @else
                        {{-- Attempted: show disabled inputs --}}
                        @switch($exe['type'])
                            @case('input')
                                <input type="text"
                                       class="form-control mb-2 inputTextLong"
                                       disabled />
                                @break

                            @case('radio')
                                @foreach($exe['options'] as $opt)
                                    <div class="form-check mb-1">
                                        <input class="form-check-input inputRadioPurple"
                                               type="radio"
                                               disabled>
                                        <label class="form-check-label">
                                            {{ $opt['answer'] }}
                                        </label>
                                    </div>
                                @endforeach
                                @break

                            @case('checkbox')
                                @foreach($exe['options'] as $opt)
                                    <div class="form-check mb-1">
                                        <input class="form-check-input inputCheckboxPurple"
                                               type="checkbox"
                                               disabled>
                                        <label class="form-check-label">
                                            {{ $opt['answer'] }}
                                        </label>
                                    </div>
                                @endforeach
                                @break
                        @endswitch
                    @endif
                </div>
            @endforeach

            @php
                $allAttempted = collect($chapterData['exercises'])
                    ->every(fn($e) => $e['status'] !== 'incompleted');
            @endphp

            <button id="submit-exam-btn"
                    type="submit"
                    class="btn btn-danger {{ $allAttempted ? '' : 'd-none' }}">
                Submit Exam
            </button>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/exam.js') }}" defer></script>
@endpush
