@extends('layouts.app')

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

    <div class="container mt-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{{ $exam->exam_title }}</h4>
                <div class="d-flex">
                    <h6 class="me-3">{{ $question_bank->subject->subject_name }}</h6>
                    <h6 class="me-2"><strong>/</strong></h6>
                    <h6>Student Reg No: {{ $submission->student->register_no }}</h6>
                </div>
            </div>
            <div class="text-center">
                <h4>Exam ends in <span id="timer"></span></h4>
            </div>
            <div class="card-body">
                <form action="{{ route('lms_exam_submission_update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="submission_sid" value="{{ $submission->cms_exam_submission_sid }}">
                    @foreach ($question_bank_dtls as $question)
                        <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 }}.
                                    {{ $question->question }}</strong>
                                {{-- <input type="hidden" name="actual_question_{{ $question->cms_question_bank_details_sid }}"
                                    value="{{ $question->question }}">
                                <input type="hidden"
                                    name="question_bank_detail_sid_{{ $question->cms_question_bank_details_sid }}"
                                    value="{{ $question->cms_question_bank_details_sid }}"> --}}
                            </div>
                            <div class="col-md-2">
                                (<strong>Marks:</strong> {{ $question->default_mark ?? 'N/A' }})
                                <input type="checkbox" id="check_{{ $question->cms_question_bank_details_sid }}"
                                    onchange="updateCheckboxValue(this, '{{ $question->cms_question_bank_details_sid }}', '{{ $question->default_mark }}')">
                                <input type="hidden" name="check_status_{{ $question->cms_question_bank_details_sid }}"
                                    id="hidden_check_{{ $question->cms_question_bank_details_sid }}"
                                    value="F#{{ $question->default_mark }}">
                            </div>
                        </div>

                        @php
                            $answer = $answer_bank_dtls->firstWhere(
                                'question',
                                $question->cms_question_bank_details_sid,
                            );
                        @endphp

                        @if ($question->question_type === 'M')
                            <!-- Multiple Choice Question -->
                            <div class="row px-2">
                                <div class="col-3">
                                    <ul class="list-unstyled p-0">
                                        <li class="d-flex align-items-center">
                                            <input type="radio"
                                                name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="1#M" id="option_1_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2" @if ($answer && $answer->selected_answer === '1') checked @endif disabled>
                                            <label for="option_1_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">{{ $question->option_1 }}</label>
                                        </li>
                                        <br>
                                        <li class="d-flex align-items-center">
                                            <input type="radio"
                                                name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="3#M" id="option_3_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2" @if ($answer && $answer->selected_answer === '3') checked @endif disabled>
                                            <label for="option_3_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">{{ $question->option_3 }}</label>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-3">
                                    <ul class="list-unstyled p-0">
                                        <li class="d-flex align-items-center">
                                            <input type="radio"
                                                name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="2#M" id="option_2_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2" @if ($answer && $answer->selected_answer === '2') checked @endif disabled>
                                            <label for="option_2_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">{{ $question->option_2 }}</label>
                                        </li>
                                        <br>
                                        <li class="d-flex align-items-center">
                                            <input type="radio"
                                                name="question_{{ $question->cms_question_bank_details_sid }}"
                                                value="4#M" id="option_4_{{ $question->cms_question_bank_details_sid }}"
                                                class="me-2" @if ($answer && $answer->selected_answer === '4') checked @endif disabled>
                                            <label for="option_4_{{ $question->cms_question_bank_details_sid }}"
                                                style="color: #9690a1;">{{ $question->option_4 }}</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @elseif ($question->question_type === 'W')
                            <!-- Written Question -->
                            <textarea name="question_{{ $question->cms_question_bank_details_sid }}" rows="4" class="form-control mt-2"
                                disabled>{{ $answer ? $answer->written_answer : '' }}</textarea>
                        @endif
                    @endforeach
                    <button class="btn btn-primary mt-4 ms-auto d-block">Save</button>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        function updateCheckboxValue(checkbox, sid, mark) {
            const hiddenInput = document.getElementById(`hidden_check_${sid}`);
            const status = checkbox.checked ? 'T' : 'F';
            hiddenInput.value = `${status}#${mark}`;
        }
    </script>
@endpush