@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Edit Exam - {{ $exam->title }}</h1>
        <!-- Existing Questions -->
        <div id="questions-container">
            @foreach ($exam->questions as $question)
                <div class="question">
                    <h3>Question <span class="questionNumber">{{ $loop->iteration }}</span></h3>
                    <div class="form-group">
                        <label for="questionTitle">Question</label>
                        <input type="text" name="questions[{{ $question->id }}][question_text]" class="form-control" value="{{ $question->question_text }}">
                    </div>
                    <div class="form-group">
                        <label for="options">Options:</label><br>
                        @foreach ($question->options as $option)
                            <input type="text" name="questions[{{ $question->id }}][options][]" class="form-control" value="{{ $option }}">
                        @endforeach
                    </div>
                    <div class="form-group">
                        <label for="correctAnswer">Correct Answer:</label><br>
                        <select name="questions[{{ $question->id }}][correct_answer]" class="form-select">
                            <option value="0">Select correct option</option>
                            @foreach ($question->options as $option)
                                <option value="{{ $option }}" {{ $question->correct_answer === $option ? 'selected' : '' }}>{{ $option }}</option>
                            @endforeach
                        </select>
                    </div>
                    <span class="delete-question">
                        <i class="fas fa-trash-alt"></i> Delete
                    </span>
                </div>
            @endforeach
        </div>

        <!-- Add Question Button -->
        <span id="add-question" class="add-question">
            <i class="fas fa-plus"></i> Add Question
        </span>

        <!-- Save Button -->
        <button id="saveButton" type="button" onclick="updateExam()" class="btn btn-success text-white">Update Exam</button>
    </div>

    <!-- JavaScript Section -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let questionIndex = {{ count($exam->questions) }};
            $('#add-question').click(function() {
                if (questionIndex < 11) {
                    const questionHtml = `
                        <div class="question">
                            <h3>Question <span class="questionNumber">${++questionIndex}</span></h3>
                            <div class="form-group">
                                <label for="questionTitle">Question</label>
                                <input type="text" name="questions[${questionIndex}][question_text]" class="form-control" placeholder="Enter your question">
                            </div>
                            <div class="form-group">
                                <label for="options">Options:</label><br>
                                <input type="text" name="questions[${questionIndex}][options][]" class="form-control" placeholder="Option 1">
                                <input type="text" name="questions[${questionIndex}][options][]" class="form-control" placeholder="Option 2">
                                <input type="text" name="questions[${questionIndex}][options][]" class="form-control" placeholder="Option 3">
                                <input type="text" name="questions[${questionIndex}][options][]" class="form-control" placeholder="Option 4">
                            </div>
                            <div class="form-group">
                                <label for="correctAnswer">Correct Answer:</label><br>
                                <select name="questions[${questionIndex}][correct_answer]" class="form-select">
                                    <option value="0">Select correct option</option>
                                    <option value="question_option1">Option 1</option>
                                    <option value="question_option2">Option 2</option>
                                    <option value="question_option3">Option 3</option>
                                    <option value="question_option4">Option 4</option>
                                </select>
                            </div>
                            <span class="delete-question">
                                <i class="fas fa-trash-alt"></i> Delete
                            </span>
                        </div>
                    `;
                    $('#questions-container').append(questionHtml);
                } else {
                    alert('You have reached the maximum limit of 10 questions.');
                    $('#add-question').prop('disabled', true); // Disable the button when the limit is reached
                }
            });
        });

        function updateExam() {
            const formData = new FormData();
            const questions = document.querySelectorAll('.question');

            questions.forEach((questionForm, index) => {
                const inputs = questionForm.querySelectorAll('input, select');
                inputs.forEach((input) => {
                    const fieldName = input.getAttribute('name');
                    const fieldValue = input.value;
                    formData.append(fieldName, fieldValue);
                });
            });

            // Perform AJAX request to update the exam with the new data
            $.ajax({
                type: "PUT",
                url: "{{ route('exams.update', ['examId' => $exam->id]) }}",
                processData: false,
                contentType: false,
                data: formData,
                success: function(response) {
                    // Handle success response
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    // Handle error response
                    console.error(error);
                }
            });
        }
    </script>
@endsection