@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">
                                <a href="#" class="list-group-item list-group-item-action"
                                    data-question-type="text">Text Question</a>
                                <a href="#" class="list-group-item list-group-item-action"
                                    data-question-type="image">Image Question</a>
                                <a href="#" class="list-group-item list-group-item-action"
                                    data-question-type="dropdown">Dropdown</a>
                                <a href="#" class="list-group-item list-group-item-action"
                                    data-question-type="checkbox">Checkbox</a>
                                <a href="#" class="list-group-item list-group-item-action"
                                    data-question-type="radio">Radio Button</a>
                            </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">
                            @csrf
                            <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 Quiz</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');
                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="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':
                        formHTML = generateOptionForm('Dropdown Question', 'dropdown');
                        break;

                    case 'checkbox':
                        formHTML = generateOptionForm('Checkbox Question', 'checkbox');
                        break;

                    case 'radio':
                        formHTML = generateOptionForm('Radio Button Question', 'radio');
                        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">
                                <label>Option 1</label>
                                <input type="text" class="form-control" name="question[options][]" required>
                            </div>
                            <div class="form-group">
                                <label>Option 2</label>
                                <input type="text" class="form-control" name="question[options][]" required>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary" 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 .form-group').length + 1;
                const optionHTML = `
                <div class="form-group">
                    <label>Option ${optionCount}</label>
                    <input type="text" class="form-control" name="question[options][]" required>
                </div>
            `;
                $('#optionsContainer').append(optionHTML);
            });
        });
    </script>
@endsection