@extends('layouts.app')
@section('title', trans('menu.360_feedback_title'))

@section('content')
<div class="content">
    <x-content.header title="{{ isset($subject)? $subject->name. ' - '.__('title.form'): __('title.lbl_create_a_new_subject') }}" />
	<div class="tw-card">
	    <div class="p-6">
	    	<div class="row">
	        	<div class="col-md-12">
                    <form name="feedback-form" method="POST" action="{{url('settings/feedback/subjects/'.$subject->id)}}" data-method="PUT">
                    	<div class="row">
    						<div class="col col-md-8">
    							<div class="form-group">
    								<label for="question">{{__('forms.lbl_name')}} </label>
    								<input type="text" class="form-control" id="name" name="name" placeholder="{{__('forms.lbl_insert_subject_name')}}" value="{{ ($errors && $errors->any()? old('name') : (isset($subject)? $subject->name : '')) }}">

    							</div>

                                <div class="form-group">
                                    @php
                                        $settings = json_decode($subject->settings);
                                    @endphp
    								<label for="question">{{__('forms.lbl_footer')}} </label>
    								<textarea class="form-control form-control-lg" name="settings[footer_text]">{{ ($errors && $errors->any()? old('name', (isset($settings->footer_text)? $settings->footer_text : '')) : (isset($settings->footer_text)? $settings->footer_text : '')) }}</textarea>
    							</div>

    							<div class="form-group">
    								<div class="form-check">
    									<label class="form-check-label">
    									  <input type="checkbox" name="status" value="1" class="form-check-input"
    									  @if( isset($subject->status) && ($subject->status == 1))
    										 checked
    									  @endif
    									  />
                                          {{__('forms.lbl_active')}}
    									<i class="input-helper"></i></label>
    								  </div>
    							</div>
    						</div>
    					</div>

    					<div class="row">
    						<div class="col-md-12">
    					   		<h4 for="question">{{__('forms.lbl_question')}} </h4>
    							<div class="list-wrapper">
                                    <form name="question-form" method="POST" action="{{url('settings/feedback/subjects/'.$subject->id.'/questions')}}">
                                        <div class="form-group add-question mt-4">
                                            <textarea id="baseTinyMceEditor" placeholder="{{__('forms.lbl_question')}}"
                                                class="form-control form-control-lg tinyMceEditor"
                                                data-height ="250"
                                                name="question" required></textarea>
                                            <br/>
                                            <p>
                                                <button class="btn btn-sm btn-primary btn-save"
                                                    data-form="question-form"
                                                    data-action="{{url('settings/feedback/subjects/'.$subject->id.'/questions')}}"
                                                    type="submit"><span class="mdi mdi-plus icon-sm"></span></button>
                                            </p>
                                        </div>
                                    </form>

                                    <form class="editable-form" method="POST" action="">

    									<ul class="mt-4 ml-3 subject-questions" id="questions">
    										@forelse ($subject->questions as $key => $question)
    											@include('feedback::subjects.question')
    										@empty
    											<li class="empty">{{__('forms.no_question_added_text')}}</li>
    										@endforelse
    									</ul>
    								</form>
    							</div>
    						</div>
    					</div>

                        <div class="mt-4 border-top">
                            <button type="submit" class="btn btn-info mt-4 btn-save" data-form="feedback-form">
                                {{trans('forms.lbl_save')}}
                            </button>
                            <a href="{{url('settings/feedback/subjects')}}"  class="btn btn-outline-secondary mt-4">{{trans('forms.lbl_cancel')}}</a>
                        </div>
                    </form>
            	</div>
	    	</div>
	   </div>
	</div>
</div>
@stop


@section('footer-script')
    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
    <!-- End custom js for this page-->
	<script type="text/javascript">

        $(".btn-save").on("click", function(event) {
			event.preventDefault();
            if($(this).data('form') == "feedback-form") {
    			form = $("form[name='"+$(this).data('form')+"']");
    			data = form.serialize();
                data = data.replace('&name=', '&ignoreName=');
    			type  = ((form.data('method') == "PUT") ? form.data("method") : "POST");
                action = form.prop("action");
            }  else if($(this).data('form') == "question-form") {
                var html = $('textarea#baseTinyMceEditor').val();
                data = {
                    question : (html === "<p><br></p>" ? "" : html ),
                    notes    : $(this).parents('form').find('textarea[name="notes"]').val()
                };
                type = "POST";
                action = "{{url('settings/feedback/subjects/'.$subject->id.'/questions')}}";
            }

			PDRequest({
				type    : type,
				url     : action,
				data    : data,
				event   : event
			}).then(response => {
                if(type != "PUT") {
                    if($('.subject-questions').find("li").hasClass("empty")) {
                        $(".subject-questions").find(".empty").remove();
                    }

                    $(".subject-questions").append(response.row);
                    tinymce.get('baseTinyMceEditor').setContent('');
                    // $('textarea#baseTinyMceEditor').val('');
                }

                if($(this).data('form') == "feedback-form") {
                    window.location = "{{url('settings/feedback/subjects')}}";
                }
			});
		});

        $('body').on("click", ".editable-btn, .editable, .editable-cancel", function(e) {
            e.stopPropagation();
            e.preventDefault();

            let editableId = '#editable-'+$(this).data('fieldid');
            let editorId = '#editor-'+$(this).data('fieldid');

            $("div.editor").not(editorId).each(function(){
                $(this).hide();
                let id = $(this).attr('id').split("-")[1];
                $('#editable-'+id).show();

                if(tinymce.get("question-editor-"+id)) {
                    tinymce.get("question-editor-"+id).setContent($("#question-editor-"+id).text());
                }
            });

            if($(this).hasClass("editable-cancel")) {
                tinymce.get("question-editor-"+$(this).data('fieldid')).setContent($(editorId).find('textarea[name="question"]').text());
                tinymce.remove("#question-editor-"+$(this).data('fieldid'));
            } else {
                initializeEditor("#question-editor-"+$(this).data('fieldid'));
            }

            $(editableId).toggle();
            $(editorId).toggle();

        });


        $("body").on("click", ".editable-submit", function(event) {
			event.preventDefault();

            let editableId = '#editable-'+$(this).data('fieldid'), editorId = '#editor-'+$(this).data('fieldid'),
            index = $(this).data('index');

            var html = $(editorId).find('textarea[name="question"]').val();
            data = {
                question : (html === "<p><br></p>" ? "" : html ),
                notes: $(editorId).find("textarea[name='notes']").val()
            };

            type = "PUT";
            action = $(this).data('uri');

			PDRequest({
				type    : type,
				url     : action,
				data    : data,
				event   : event
			}).then(success => {
                $(editableId).html(html);
                $(editableId).toggle();
                $(editorId).toggle();
                $("#question-editor-"+$(this).data('fieldid')).html(html);
                tinymce.remove("#question-editor-"+$(this).data('fieldid'));
			});
		});

		var currentlyScrolling = false;
		var SCROLL_AREA_HEIGHT = 40;

        $( "#questions" ).sortable({
            items: ".draggable-field",
            cursor: 'move',
            opacity: 0.6,
            iframeFix:true,
            opacity: 0.6,
            scroll: true,
            sort: function(event, ui) {

                if (currentlyScrolling) {
                    return;
                }

                var windowHeight   = $(window).height();
                var mouseYPosition = event.clientY;

                if (mouseYPosition < SCROLL_AREA_HEIGHT) {
                    currentlyScrolling = true;

                    $('html, body').animate({
                    scrollTop: "-=" + windowHeight / 2 + "px" // Scroll up half of window height.
                    },
                    800, // 400ms animation.
                    function() {
                    currentlyScrolling = false;
                    });

                } else if (mouseYPosition > (windowHeight - SCROLL_AREA_HEIGHT)) {

                    currentlyScrolling = true;

                    $('html, body').animate({
                    scrollTop: "+=" + windowHeight / 2 + "px" // Scroll down half of window height.
                    },
                    800, // 400ms animation.
                    function() {
                    currentlyScrolling = false;
                    });

                }
            },
            stop : function(event, ui) {
                if(tinymce.get("question-editor-"+$(ui.item).data('id'))) {
                    tinymce.remove("#question-editor-"+$(ui.item).data('id'));
                    initializeEditor("#question-editor-"+$(ui.item).data('id'));
                    //tinymce.get("question-editor-"+$(ui.item).data('id')).setContent($("#question-editor-"+$(ui.item).data('id')).text());
                }
            },
            update: function() {
                sendOrderToServer();
            }
        });

        function sendOrderToServer() {

            var orders = [];
            $('.draggable-field').each(function(index, element) {
                orders.push($(this).data('id'));
                $(this).find("input.position").val($(this).data('id'));
            });

            PDRequest({
                type    : "POST",
                url     : "{{route('settings.feedbacks.subjects.reorder', $subject->id)}}",
                data    : { orders : orders }
            }).then(function(response){});

        }

	</script>

@stop