@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <div class="card shadow-md border-0 rounded-4">
                <div class="card-header bg-primary  d-flex justify-content-between align-items-center">
                    <h4 class="mb-0 text-white">Create Quiz</h4>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('admin.quiz.store') }}" method="POST" id="quizForm">
                        @csrf
                        <div class="row mb-3">
                            <!-- Course -->
                            <div class="col-md-6">
                                <label class="form-label ">Course <span class="text-danger">*</span></label>
                                <select id="course_id" name="course_id"
                                    class="form-select select2 @error('course_id') is-invalid @enderror" required>
                                    <option value="">-- Choose Course --</option>
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}"
                                            {{ request('course_id') == $course->id ? 'selected' : '' }}>
                                            {{ $course->title }}</option>
                                    @endforeach
                                </select>
                                @error('course_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Module -->
                            <div class="col-md-6">
                                <label class="form-label ">Module <span class="text-danger">*</span></label>
                                <select id="module_id" name="module_id"
                                    class="form-select select2 @error('module_id') is-invalid @enderror" required>
                                    <option value="">First, select a course</option>
                                </select>
                                @error('module_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Quiz Title -->
                        <div class="mb-4">
                            <label for="quizTitle" class="form-label fw-semibold">Quiz Title</label>
                            <input type="text" class="form-control" id="quizTitle" name="title"
                                placeholder="Enter quiz title" required>
                        </div>

                        <!-- Question List -->
                        <div id="questionsWrapper">
                            <div class="question-block border rounded-3 p-3 mb-4 bg-light position-relative">
                                <button type="button" class="btn-close position-absolute top-0 end-0 m-2 remove-question"
                                    aria-label="Remove"></button>
                                <h6 class="fw-bold mb-3">Question 1</h6>

                                <div class="mb-3">
                                    <label class="form-label">Question</label>
                                    <textarea class="form-control" name="questions[0][question]" rows="2" placeholder="Enter question" required></textarea>
                                </div>

                                <label class="form-label">Options</label>
                                @for ($i = 1; $i <= 4; $i++)
                                    <div class="input-group mb-2">
                                        <div class="input-group-text">
                                            <input class="form-check-input mt-0" type="radio"
                                                name="questions[0][correct_answer]" value="option_{{ $i }}"
                                                required>
                                        </div>
                                        <input type="text" class="form-control"
                                            name="questions[0][option_{{ $i }}]"
                                            placeholder="Option {{ $i }}" required>
                                    </div>
                                @endfor
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <!-- Add Question Button -->
                            <button type="button" id="addQuestionBtn" class="btn btn-primary fw-semibold">
                                + Add Question
                            </button>

                            <!-- Reset & Save Buttons -->
                            <div>
                                <button type="reset" class="btn btn-outline-secondary me-2">Reset</button>
                                <button type="submit" class="btn btn-primary">Save Quiz</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {

            $('#course_id').on('change', function() {
                let courseId = $(this).val();
                let moduleSelect = $('#module_id');

                if (courseId) {
                    let url = "{{ route('admin.module.get', ':id') }}";
                    url = url.replace(':id', courseId);

                    Swal.fire({
                        title: 'Loading modules...',
                        text: 'Please wait!',
                        didOpen: () => {
                            Swal.showLoading();
                        },
                        allowOutsideClick: false
                    });

                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(res) {
                            moduleSelect.empty().append(
                                '<option value="" disabled selected>-- Choose Module --</option>'
                            );
                            if (res.length > 0) {
                                $.each(res, function(key, module) {
                                    moduleSelect.append('<option value="' + module.id +
                                        '">' + module.title + '</option>');
                                });
                                let selectedModule =
                                    "{{ old('module_id', request('module_id')) }}";
                                if (selectedModule) {
                                    moduleSelect.val(selectedModule);
                                }
                            } else {
                                moduleSelect.append(
                                    '<option value="" disabled >No Module Available</option>'
                                    );
                            }
                        },
                        error: function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong while fetching modules!'
                            });
                        },
                        complete: function() {
                            // Close loading Swal
                            Swal.close();
                        }
                    });
                }
            });




            let questionIndex = 1;

            // Add new question
            $('#addQuestionBtn').click(function() {
                let newQuestion = `
      <div class="question-block border rounded-3 p-3 mb-4 bg-light position-relative">
        <button type="button" class="btn-close position-absolute top-0 end-0 m-2 remove-question" aria-label="Remove"></button>
        <h6 class="fw-bold mb-3">Question ${questionIndex + 1}</h6>

        <div class="mb-3">
          <label class="form-label">Question</label>
          <textarea class="form-control" name="questions[${questionIndex}][question]" rows="2" placeholder="Enter question" required></textarea>
        </div>

        <label class="form-label">Options</label>
        ${[1,2,3,4].map(i => `
              <div class="input-group mb-2">
                <div class="input-group-text">
                  <input class="form-check-input mt-0" type="radio" name="questions[${questionIndex}][correct_answer]" value="option_${i}" required>
                </div>
                <input type="text" class="form-control" name="questions[${questionIndex}][option_${i}]" placeholder="Option ${i}" required>
              </div>
            `).join('')}
      </div>
    `;

                $('#questionsWrapper').append(newQuestion);
                questionIndex++;
            });

            // Remove question
            $(document).on('click', '.remove-question', function() {
                $(this).closest('.question-block').remove();
            });
        });
    </script>
@endpush