@extends('layouts.admin')
@section('content')
    <div class="container-fluid">
	    <div class="content">
		    <!-- Start Content-->
		    <div class="container-fluid">
			    <!-- start page title -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ env('APP_NAME') }}</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('questions.index') }}">{{__('labels.question.title')}}</a></li>
                                    <li class="breadcrumb-item active">{{__('labels.question.add')}}</li>
                                </ol>
                            </div>
                            <h4 class="page-title"></h4>
                        </div>
                    </div>
                </div>     
			    <!-- end page title --> 
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

		        <div id="ShowDropifyMessage"></div>

                <div class="masonry-item">
                    <div class="bgc-white p-20 bd">
                        <div class="mT-10">
                            {{ Form::open(array('route' => 'questions.store','class' => 'form-horizontal submitQuestionForm',)) }}
                                @include('admin.questionnaires.form')
                                <div class="row">
                                    <div class="col-md-12">
                                        {{Form::submit(__('labels.question.add'),['class'=>'btn btn-primary btn-color','id'=>'submitQuestionFormButton'])}}
                                        <a href="{{ route('questions.index') }}" class="btn btn-secondary btn-color">{{__('labels.question.cancel')}}</a>
                                    </div>
                                </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
		    </div>
	    </div>
    </div>
    <script src="https://cdn.ckeditor.com/4.20.0/standard-all/ckeditor.js"></script> 
    <script>
        $("#submitQuestionFormButton").on('click', function(e){
            e.preventDefault();
            $("#submitQuestionFormButton").prop('disabled', true);
            $("#submitQuestionFormButton").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Submitting...');
            $("form.submitQuestionForm").submit();
        });

        // var baseURL = "{!! env('APP_URL') !!}";
        // var prefix = "{{ url('') }}";
        CKEDITOR.editorConfig = function( config ) {
            //config.filebrowserBrowseUrl = prefix + '/plugins/ckfinder/ckfinder.html';
            //config.filebrowserImageBrowseUrl = prefix + '/plugins/ckfinder/ckfinder.html?type=Images';
            //config.filebrowserFlashBrowseUrl = prefix + '/plugins/ckfinder/ckfinder.html?type=Flash';
            //config.filebrowserUploadUrl = prefix + '/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
            //config.filebrowserImageUploadUrl = prefix + '/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
            //config.filebrowserFlashUploadUrl = prefix + '/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
            //config.copyFormatting_allowedContexts = true;
            config.colorButton_backStyle = {
                element: 'span',
                styles: { 'background-color': '#(color)' }
            };
            config.colorButton_foreStyle = {
                element: 'span',
                styles: { color: '#(color)' }
            };
            config.colorButton_historyRowLimit = 8;
        };

        var editors = ['question', 'additional_question_text' ];
        for (i = 0; i < editors.length; i++) {
            var editor = CKEDITOR.replace(editors[i], {
                removePlugins: 'wsc',
                scayt_autoStartup: true,
                //extraPlugins: 'copyformatting,colorbutton,colordialog',
                scayt_maxSuggestions: 3,
                allowedContent: true,
	            versionCheck:false
            });
            //CKFinder.setupCKEditor( editor, prefix + '/plugins/ckfinder/') ;
        }
        // CKEDITOR.on('dialogDefinition', function(ev) {
        //     var dialogName = ev.data.name,
        //     dialogDefinition = ev.data.definition;
        //     if (dialogName === 'image') {
        //         dialogDefinition.removeContents('Upload');
        //         dialogDefinition.removeContents('Link');
        //     }
        // });   

        $(document).ready(function() {
            $('#type').on('change', function() {
                var type = $(this).val();
                var optionsContainer = $('#options-container');
                var correctAnswerContainer = $('#correct-answer-container');
                var additionalTextContainer = $('#additional-text-box-container');
                var additionalTextValContainer = $('#additional-text-value-container');
                if (type === 'dropdown' || type === 'checkbox' || type === 'radio') {
                    optionsContainer.removeClass('d-none').addClass('d-block');
                    additionalTextContainer.removeClass('d-none').addClass('d-block');
                    additionalTextValContainer.removeClass('d-none').addClass('d-block');
                } else {
                    optionsContainer.removeClass('d-block').addClass('d-none');
                    additionalTextContainer.removeClass('d-block').addClass('d-none');
                    additionalTextValContainer.removeClass('d-block').addClass('d-none');
                }
            });
        });

    </script>

@endsection