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

@section('content')
	@php $user = auth()->user(); @endphp
	<div class='content'>

        <x-content.header title="<a href='{{route('settings.feedbacks.index')}}'>{{ __('title.settings') }} - {{ trans('title.360_feedbacks') }}</a>" subTitle="{{ __('title.subjects') }}">
            <x-slot:headerRight>
                <a
                    data-toggle="canvas-panel"
                    data-uri="{{route('settings.feedback.subjects.store')}}"
                    data-title="{{trans('forms.add_new_subject')}}"
                    href="javascript:;"
                    class="btn-secondary-base">
                        <x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}
                </a>
                <a href="javascript:;" data-uri="{{route('settings.feedback.subjects.store')}}" class="btn-delete-all btn-secondary-base"><x-svg-icon icon="icon-trash" />{{trans('forms.lbl_delete')}}</a>

                @if(request()->user()->hasAnyPermission(['access reviews']))
                    <a href="{{route('settings.feedbacks.index')}}" class="btn-tertiary-base">{{trans('forms.lbl_back')}}</a>
                @endif
            </x-slot:headerRight>
        </x-content.header>

        <div class="w-full flex gap-4 pb-8 flex-wrap">

            <div id="categories-container" class="w-full">

                <table id="datatable" class="table-custom-striped !w-full">
                    <thead>
                        <tr>
                            <th scope="col" width="5%">
                                <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                            </th>
                            <th scope="col">{{trans("tables.name_title")}}</th>
                            <th scope="col">{{trans("tables.action_title")}}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>

    @include('feedback::subjects.questions-modal')
    @include('feedback::subjects.question-form')
@stop

@section('panel-content')
    @include('feedback::subjects.form', ['edit' => false])
@stop

@section('footer-script')
    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
    <script type="text/javascript">
        const currentlyScrolling = false;
        const SCROLL_AREA_HEIGHT = 40;
        let currentSubject = 0;

        PDDataTable({
            url: "{{route('settings.feedback.subjects.index')}}",
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column" },
                { data: 'name', name: 'name', class: "!text-sm/6 !font-semibold !text-gray-900" },
                { data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right" }
            ],
            order : [1, 'asc']
        });

        $(".btn-save").on("click", function(event) {
			event.preventDefault();

			let form = $(this).parents('form');
			data = form.serialize(),
			type  = (form.data('method') == "PUT") ? form.data("method") : "POST";

			PDRequest({
				type    : form.attr("method"),
	            url     : form.attr("action"),
				data    : data,
				event   : event
			}).then((response) => {
				if(response.status == "success") {
                    PDTable.draw();
                    Canvas.close();

				}
            });
		});

		//Folder Details Close
        $("#folder-details-close, #folder-details-cancel").click(function() {
            $("#folder-details").addClass("hidden");

            $("#categories-container")
                .removeClass("w-full lg:w-[calc(100%-380px-24px)]")
                .addClass("w-full");
        });

        //Folder Details View
        $("body").on("click", "#folder-info-btn", function() {

            $("#folder-details").removeClass("hidden");

            $("#categories-container").removeClass("w-full")
                .addClass("w-full lg:w-[calc(100%-380px-24px)]");
        });

        $('body').on('click', '.question-new', function() {
            $("form[name='question-form']").attr("action", "{{url('settings/feedback/subjects')}}/"+ $(this).data('id')+"/questions")
        });

        $(".btn-question-save").on("click", function(event) {
			event.preventDefault();

            const form = $(this).parents('form');

            const html = $(this).parents('form').find('textarea[name="question"]').val();

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

            type  = (form.data('method') == "PUT") ? form.data("method") : "POST";

			PDRequest({
				type    : form.attr("method"),
	            url     : form.attr("action"),
				data    : data,
				event   : event
			}).then(response => {
                if(type != "PUT") {
                    //$("#questions").append(response.row);
                    tinymce.get('baseTinyMceEditor').setContent('');
                    $(".close").trigger('click');
                    // $('textarea#baseTinyMceEditor').val('');
                }

			});
		});

        $("body").on("click", ".subject", function(event) {

            event.preventDefault();

            let url = "{{ url('settings/feedback/subjects/') }}"+ "/" + $(this).data('id')+ "/questions";

            let customLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>', data = null;

            $(this).append(customLoader);
            $("#questions").append(customLoader);

            PDRequest({
                type    : "GET",
                url     : url,
                isFlash : false,
                data    : data
            }).then((response) => {
                if(response.status == "success") {

                    currentSubject = response.subject.id;

                    $("#questions").html(response.html);

                    $(".question-title").html(response.title);

                    const checklistID = "modal-" + $("#questions-modal").find("#questions").attr("id");

                    $("#questions-modal").find(".question").attr("id", checklistID);
                    $("#questions-modal").find("label").attr("for", checklistID);

                    $( "#questions" ).sortable({
                        items: ".draggable-field",
                        cursor: 'move',
                        placeholder: "ui-state-highlight",
                        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(currentSubject);
                        }
                    });
                }

                $(this).find(".custom-loader").remove();
                $("#questions").find(".custom-loader").remove();
            }).catch(error => {
                $(this).find(".custom-loader").remove();
                $("#questions").find(".custom-loader").remove();
            });

        });


        $('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).addClass("hidden");
                let id = $(this).attr('id').split("-")[1];
                $('#editable-'+id).removeClass("hidden");

                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'));
			});
		});

        function sendOrderToServer(subject) {

            console.log(subject);
            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     : "{{ url('settings/feedbacks/subjects') }}/"+subject+"/reorder",
                data    : { orders : orders }
            }).then(function(response){});


        }

    </script>
@stop