@extends('layouts.admin')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/richtexteditor/rte_theme_default.css') }}" />
@endsection

@section('content')
    <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">New Questions</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- Page body -->
        <div class="page-body">
            <div class="container mt-5">
                <div class="row">
                    <!-- Left panel for selecting question type -->
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header bg-primary text-white">Select Question Type</div>
                            <div class="list-group" id="questionTypeList">
                                @foreach ($questionTypes as $type)
                                    <a href="#" class="list-group-item list-group-item-action"
                                        data-question-type="{{ $type->type }}" data-question-type-id="{{ $type->id }}">{{ ucfirst($type->type) }} Question</a>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Right panel for form generation -->
                    <div class="col-md-8">
                        <form id="quizForm" method="POST" action="{{ route('admin.savequestion') }}"
                            enctype="multipart/form-data">
                            <input type="hidden" id="question_type_id" name="question_type_id">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Grade</label>
                                    <select class="form-control" name="grade_id">
                                        @foreach($grades as $grade)
                                        <option value="{{$grade->id}}">{{$grade->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label>Subject</label>
                                    <select class="form-control" name="subject_id">
                                        @foreach($subjects as $subject)
                                        <option value="{{$subject->id}}">{{$subject->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div id="questionForm">
                                <!-- Dynamic question form will be generated here based on the selected question type -->
                                <p>Select a question type to begin.</p>
                            </div>
                            <button type="submit" class="btn btn-success mt-3">Save Question</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @include('includes.admin_footer')
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/admin/dist/libs/nouislider/dist/nouislider.min.js?1684106062') }}" defer></script>
    <script src="{{ asset('assets/admin/dist/libs/litepicker/dist/litepicker.js?1684106062') }}" defer></script>
    <script src="{{ asset('assets/admin/dist/libs/tom-select/dist/js/tom-select.base.min.js?1684106062') }}" defer></script>
    <script type="text/javascript" src="{{ asset('assets/richtexteditor/rte.js') }}"></script>
    <script type="text/javascript" src='{{ asset('assets/richtexteditor/plugins/all_plugins.js') }}'></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#questionTypeList a').click(function(e) {
                e.preventDefault();
                const questionType = $(this).data('question-type');
                $('#question_type_id').val($(this).data('question-type-id'));
                generateQuestionForm(questionType);
            });

            function generateQuestionForm(questionType) {
                let formHTML = '';

                switch (questionType) {
                    case 'text':
                        formHTML = `
                        <div class="card">
                            <div class="card-header bg-primary text-white">Text Question</div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="questionTitle">Question Title</label>
                                    <input type="text" class="form-control" id="questionTitle" name="question[title]" placeholder="Enter question title" required>
                                </div>
                                <div class="form-group">
                                    <label for="correctAnswer">Correct Answer</label>
                                    <input type="text" class="form-control" id="correctAnswer" name="question[correct_answer]" placeholder="Enter correct answer" required>
                                </div>
                            </div>
                        </div>`;
                        break;

                    case 'image':
                        formHTML = `
                        <div class="card">
                            <div class="card-header bg-primary text-white">Image Question</div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="questionImage">Upload Question Image</label>
                                    <input type="file" class="form-control" id="questionImage" name="question[image]" required>
                                </div>
                                <div class="form-group">
                                    <label for="questionTitle">Question Title</label>
                                    <input type="text" class="form-control" id="questionTitle" name="question[title]" placeholder="Enter question title" required>
                                </div>
                                <div class="form-group">
                                    <label for="correctAnswer">Correct Answer</label>
                                    <input type="text" class="form-control" id="correctAnswer" name="question[correct_answer]" placeholder="Enter correct answer" required>
                                </div>
                            </div>
                        </div>`;
                        break;

                    case 'dropdown':
                    case 'checkbox':
                    case 'radio':
                        formHTML = generateOptionForm(questionType + ` Question`, questionType);
                        break;

                    case 'textarea':
                        formHTML = `
                        <div class="card">
                            <div class="card-header bg-primary text-white">Textarea Question</div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="questionTitle">Question Title</label>
                                    <input type="text" class="form-control" id="questionTitle" name="question[title]" placeholder="Enter question title" required>
                                </div>
                                <div class="form-group">
                                    <label for="correctAnswer">Correct Answer</label>
                                    <textarea class="form-control" id="correctAnswer" name="question[correct_answer]" placeholder="Enter correct answer" required></textarea>
                                </div>
                            </div>
                        </div>`;
                        break;

                    case 'file':
                        formHTML = `
                        <div class="card">
                            <div class="card-header bg-primary text-white">File Upload Question</div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="questionTitle">Question Title</label>
                                    <input type="text" class="form-control" id="questionTitle" name="question[title]" placeholder="Enter question title" required>
                                </div>
                                <div class="form-group">
                                    <label for="correctAnswer">Correct Answer</label>
                                    <input type="file" class="form-control" id="correctAnswer" name="question[correct_answer]" required>
                                </div>
                            </div>
                        </div>`;
                        break;

                    default:
                        formHTML = `<p>Select a valid question type to begin.</p>`;
                }

                $('#questionForm').html(formHTML);
            }

            function generateOptionForm(title, questionType) {
                return `
        <div class="card">
            <div class="card-header bg-primary text-white">${title}</div>
            <div class="card-body">
                <div class="form-group">
                    <label for="questionTitle">Question Title</label>
                    <input type="text" class="form-control" id="questionTitle" name="question[title]" placeholder="Enter question title" required>
                </div>
                <div id="optionsContainer">
                    <div class="form-group option-item">
                        <label>Option 1</label>
                        <input type="text" class="form-control" name="question[options][]" required>
                        <button type="button" class="btn btn-danger remove-option-btn mt-2">Remove Option</button>
                    </div>
                    <div class="form-group option-item">
                        <label>Option 2</label>
                        <input type="text" class="form-control" name="question[options][]" required>
                        <button type="button" class="btn btn-danger remove-option-btn mt-2">Remove Option</button>
                    </div>
                </div>
                <button type="button" class="btn btn-secondary mt-2" id="addOptionBtn">Add Option</button>
                <div class="form-group mt-3">
                    <label for="correctAnswer">Correct Answer</label>
                    <input type="text" class="form-control" id="correctAnswer" name="question[correct_answer]" placeholder="Enter correct answer" required>
                </div>
            </div>
        </div>`;
            }

            // Add more options for dropdown/checkbox/radio
            $(document).on('click', '#addOptionBtn', function() {
                const optionCount = $('#optionsContainer .option-item').length + 1;
                const optionHTML = `
        <div class="form-group option-item">
            <label>Option ${optionCount}</label>
            <input type="text" class="form-control" name="question[options][]" required>
            <button type="button" class="btn btn-danger remove-option-btn mt-2">Remove Option</button>
        </div>`;
                $('#optionsContainer').append(optionHTML);
            });

            $(document).on('click', '.remove-option-btn', function() {
                $(this).closest('.option-item').remove();

                // Renumber the remaining options
                $('#optionsContainer .option-item').each(function(index, element) {
                    $(element).find('label').text(`Option ${index + 1}`);
                });
            });
        });
    </script>
@endsection