@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.AddNewFeedbackQuestion') }}</h4>
                    <h6>{{ __('sitelabel.CreatenewFeedbackQuestion') }}</h6>
                </div>
            </div>

            <style>
                .text-right {
                    text-align: right;
                }

                .form-group {
                    margin-bottom: 1.5rem;
                }

                textarea.form-control {
                    resize: none;
                }

                .tox-tinymce {
                    border: 1px solid #ced4da !important;
                    border-radius: 0.25rem !important;
                }

                .tox .tox-toolbar__group {
                    padding: 0 4px !important;
                }

                .tox .tox-toolbar__primary {
                    background: #f8f9fa !important;
                    border-bottom: 1px solid #ddd !important;
                }
            </style>

            <form method="post" action="{{ url('/feedbackquestionprocess') }}" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">

                            <!-- Question Type Field -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.QuestionType') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" id="ddlQuestionType" name="ddlQuestionType">
                                        <option value="">{{ __('sitelabel.Select') }}</option>
                                        @foreach ($questionTypes as $type)
                                            <option value="{{ $type->Id }}"
                                                {{ old('ddlQuestionType') == $type->Id ? 'selected' : '' }}>
                                                {{ $type->Name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">
                                        @error('ddlQuestionType')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>


                            <!-- Status Field -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus" checked>
                                </div>
                            </div>

                            <!-- Title Field -->
                            <div class="col-lg-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Title') }}<span class="text-danger">*</span></label>
                                    <textarea class="form-control tinymce" id="txtTitle" name="txtTitle" rows="4">{{ old('txtTitle') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtTitle')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <!-- Option One Field -->
                            <div class="col-lg-12 col-sm-12 col-12 option-field">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.OptionOne') }}</label>
                                    <textarea class="form-control tinymce" id="txtOptionOne" name="txtOptionOne" rows="3">{{ old('txtOptionOne') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtOptionOne')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <!-- Option Two Field -->
                            <div class="col-lg-12 col-sm-12 col-12 option-field">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.OptionTwo') }}</label>
                                    <textarea class="form-control tinymce" id="txtOptionTwo" name="txtOptionTwo" rows="3">{{ old('txtOptionTwo') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtOptionTwo')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <!-- Option Three Field -->
                            <div class="col-lg-12 col-sm-12 col-12 option-field">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.OptionThree') }}</label>
                                    <textarea class="form-control tinymce" id="txtOptionThree" name="txtOptionThree" rows="3">{{ old('txtOptionThree') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtOptionThree')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <!-- Option Four Field -->
                            <div class="col-lg-12 col-sm-12 col-12 option-field">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.OptionFour') }}</label>
                                    <textarea class="form-control tinymce" id="txtOptionFour" name="txtOptionFour" rows="3">{{ old('txtOptionFour') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtOptionFour')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <!-- Answer Field -->
                            <div class="col-lg-12 col-sm-12 col-12" id="answer-container">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Answer') }}</label>
                                    <textarea class="form-control" id="txtAnswer" name="txtAnswer" rows="3">{{ old('txtAnswer') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtAnswer')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <!-- Solutions Field -->
                            <div class="col-lg-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Solutions') }}</label>
                                    <textarea class="form-control tinymce" id="txtSolutions" name="txtSolutions" rows="3">{{ old('txtSolutions') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtSolutions')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <!-- Instructions Field -->
                            <div class="col-lg-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Instructions') }}</label>
                                    <textarea class="form-control" id="txtInstructions" name="txtInstructions" rows="3">{{ old('txtInstructions') }}</textarea>
                                    <span class="text-danger">
                                        @error('txtInstructions')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary">{{ __('sitelabel.Save') }}</button>
                                <button type="button"
                                    onclick="javascript:window.location='{{ url('/feedbackquestion') }}';"
                                    class="btn btn-dark">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize TinyMCE
            tinymce.init({
                selector: 'textarea.tinymce',
                menubar: false,
                statusbar: false,
                height: 200,
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime', 'media', 'table', 'help', 'wordcount'
                ],
                toolbar: [
                    'cut paste copy | undo redo | link image media table | subscript superscript | fullscreen | source',
                    'bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styles | format'
                ],
                toolbar_mode: 'wrap',
                content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; }',
                branding: false,
                promotion: false
            });

            // Initially hide option fields
            toggleOptionsVisibility('none');

            // Initially show answer field section
            toggleAnswerVisibility(true);

            // Question Type change event handler
            $('#ddlQuestionType').change(function() {
                const selectedType = $(this).find('option:selected').text().trim();
                handleQuestionType(selectedType);
            });

            function handleQuestionType(questionType) {
                const answerContainer = $('#answer-container');

                // Remove any existing select element
                answerContainer.find('select').remove();
                // Show the original text input initially
                $('#txtAnswer').show();

                // Convert to uppercase and trim for more robust matching
                const type = questionType.toUpperCase().trim();

                switch (type) {
                    case 'MCQS':
                        toggleOptionsVisibility('block');
                        toggleAnswerVisibility(true);
                        createMCQAnswerDropdown(answerContainer);
                        break;

                    case 'TRUE/FALSE':
                        toggleOptionsVisibility('none');
                        toggleAnswerVisibility(true);
                        createTrueFalseDropdown(answerContainer);
                        break;

                    case 'SHORT':
                    case 'LONG':
                    case 'SHORT QUESTION':
                    case 'LONG QUESTION':
                        toggleOptionsVisibility('none');
                        toggleAnswerVisibility(false);
                        break;

                    default:
                        toggleOptionsVisibility('none');
                        toggleAnswerVisibility(true);
                        $('#txtAnswer').show();
                        break;
                }
            }

            function toggleOptionsVisibility(display) {
                $('.option-field').css('display', display);
            }

            function toggleAnswerVisibility(show) {
                if (show) {
                    $('#answer-container').show();
                    $('#txtAnswer').prop('disabled', false);
                } else {
                    $('#answer-container').hide();
                    $('#txtAnswer').prop('disabled', true).val('');
                }
            }

            function createMCQAnswerDropdown(container) {
                // Hide the original text input
                $('#txtAnswer').hide();

                // Create and append select element
                const select = $('<select>', {
                    class: 'form-select',
                    name: 'mcq_answer',
                    id: 'mcq_answer'
                });

                // Add options
                select.append('<option value="">Select Answer</option>');
                for (let i = 1; i <= 4; i++) {
                    select.append(`<option value="Option ${i}">Option ${i}</option>`);
                }

                // Update hidden input when selection changes
                select.change(function() {
                    $('#txtAnswer').val($(this).val());
                });

                container.find('.form-group').append(select);
            }

            function createTrueFalseDropdown(container) {
                // Hide the original text input
                $('#txtAnswer').hide();

                // Create and append select element
                const select = $('<select>', {
                    class: 'form-select',
                    name: 'tf_answer',
                    id: 'tf_answer'
                });

                // Add options
                select.append('<option value="">Select Answer</option>');
                select.append('<option value="True">True</option>');
                select.append('<option value="False">False</option>');

                // Update hidden input when selection changes
                select.change(function() {
                    $('#txtAnswer').val($(this).val());
                });

                container.find('.form-group').append(select);
            }
            // Trigger the change event on page load if a question type is already selected
            if ($('#ddlQuestionType').val()) {
                $('#ddlQuestionType').trigger('change');
            }
        });
    </script>

    @if (session()->get('locale') == 'ur')
        <script>
            window.onload = function() {
                MakeTextBoxUrduEnabled(txtTitle);
                MakeTextBoxUrduEnabled(txtOptionOne);
                MakeTextBoxUrduEnabled(txtOptionTwo);
                MakeTextBoxUrduEnabled(txtOptionThree);
                MakeTextBoxUrduEnabled(txtOptionFour);
                MakeTextBoxUrduEnabled(txtAnswer);
                MakeTextBoxUrduEnabled(txtInstructions);
                MakeTextBoxUrduEnabled(txtSolutions);
            };
        </script>
    @endif
@endsection