@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title])

    <div class="container">
        <div class="card mb-4">
            <div class="card-header">
                <h4>Questions</h4>
            </div>
            <div class="card-body text-sm">
                <div class="question-list">
                    {{-- MCQ Section --}}

                    <h5>MCQ - Multiple Choice Questions</h5>
                    @foreach ($mcq_questions as $item)
                        <div class="question-item mb-4 row p-2 d-flex justify-content-between">
                            <div class="col-md-10">
                                <strong style="white-space: normal;display: inline-block;">{{ $loop->iteration }}.
                                    {{ $item->question }}</strong>
                            </div>
                            <div class="col-md-2">
                                (<strong>Marks:</strong> {{ $item->default_mark }})
                            </div>
                        </div>

                        <div class="options mt-2">
                            <div class="row px-2">
                                <!-- First Row for Option 1 and Option 2 -->
                                <div class="col-3">
                                    <ul class="list-unstyled p-0">
                                        <li class="d-flex">
                                            <span class="me-2">A.</span>
                                            <span>{{ $item->option_1 }}</span>
                                        </li>
                                        <br>
                                        <li class="d-flex">
                                            <span class="me-2">C.</span>
                                            <span>{{ $item->option_3 }}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-3">
                                    <ul class="list-unstyled p-0">
                                        <li class="d-flex">
                                            <span class="me-2">B.</span>
                                            <span>{{ $item->option_2 }}</span>
                                        </li>
                                        <br>
                                        <li class="d-flex">
                                            <span class="me-2">D.</span>
                                            <span>{{ $item->option_4 }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endforeach


                    {{-- Written Section --}}
                    @if (count($written_questions) > 0)
                        <h5>Written Questions</h5>
                        @foreach ($written_questions as $item)
                            <div class="question-item mb-4 row p-2 d-flex justify-content-between">
                                <div class="col-md-10">
                                    <strong style="white-space: normal;display: inline-block;">{{ $loop->iteration }}.
                                        {{ $item->question }}</strong>
                                </div>
                                <div class="col-md-2">
                                    (<strong>Marks:</strong> {{ $item->default_mark }})
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection