@include("documentcreator::templates.fields.settings.option-modal")
<script src="{{asset('js/stand-alone-button.js')}}"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
<script type="text/javascript">
    (function($){
        var currentCursor = null, templateEditor = null;
        $.fn.serializeObject = function() {
            var self = this,
                json = {},
                push_counters = {},
                patterns = {
                    "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                    "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                    "push":     /^$/,
                    "fixed":    /^\d+$/,
                    "named":    /^[a-zA-Z0-9_]+$/
                };


            this.build = function(base, key, value) {
                base[key] = value;
                return base;
            };

            this.push_counter = function(key){
                if(push_counters[key] === undefined){
                    push_counters[key] = 0;
                }
                return push_counters[key]++;
            };

            $.each($(this).serializeArray(), function(){

                // Skip invalid keys
                if(!patterns.validate.test(this.name)){
                    return;
                }

                var k,
                    keys = this.name.match(patterns.key),
                    merge = this.value,
                    reverse_key = this.name;

                while((k = keys.pop()) !== undefined){

                    // Adjust reverse_key
                    reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                    // Push
                    if(k.match(patterns.push)){
                        merge = self.build([], self.push_counter(reverse_key), merge);
                    }

                    // Fixed
                    else if(k.match(patterns.fixed)){
                        merge = self.build([], k, merge);
                    }

                    // Named
                    else if(k.match(patterns.named)){
                        merge = self.build({}, k, merge);
                    }
                }

                json = $.extend(true, json, merge);
            });

            return json;
        };
        })(jQuery);

        var templateFieldSettings = {};

        function resetEditableFields() {
            $("#editor-tools-box").find("button.disabled[data-editable='1']").removeAttr("disabled")
                .removeClass("disabled");
            $.each(tinymce.get("document-builder-editor-id").dom.select("a.data-field"), function(index, field) {
                let $_field = $(field), field_id = $_field.data('field-id');
                $("button[data-id='"+field_id+"'][data-editable='1']")
                    .attr("disabled", "disabled")
                    .addClass("disabled");
            });
        }

        function checkEditableFieldExists( $field ) {
            var $flag = false;
            $.each(tinymce.get("document-builder-editor-id").dom.select("a.data-field"), function(index, field) {
                let $_field = $(field), field_id = $_field.data('field-id');

                if( field_id == $field &&
                    $("button[data-id='"+field_id+"'][data-editable='1']").length > 0) {
                    $flag = true;
                }
            });

            return $flag;
        }

        //this funciton offer to save field settings to db and text content.
        function setFieldSettings( data, modal = true ) {
            PDRequest({
                type    : "POST",
                url     : "{{route("settings.{$templateType}.templates.fields.options.get")}}",
                data    : data,
                event   : false,
                isFlash : false,
            }).then(response => {
                if(response.status == "success" ) {
                    $(".field-settings-form").find(".modal-title").html(data.options.label);
                    $(".field-settings-form").find("form").html(response.message);

                    tinymce.get("document-builder-editor-id").dom.setAttribs(
                        tinymce.get("document-builder-editor-id").dom.select('a#'+data.options.name),
                        {
                            'data-settings': encodeURIComponent(
                                JSON.stringify(response.settings)
                            )
                        }
                    );

                    tinymce.get("document-builder-editor-id").dom.setHTML(
                        tinymce.get("document-builder-editor-id").dom.select('a#'+data.options.name), response.settings.label
                    );

                    if(modal) {
                        $("#modal-dialog").modal({
                            keyboard: false
                        });

                        if($('.gallery-manager-btn').length > 0) {
                            $('.gallery-manager-btn').filemanager(
                                'files',
                                {prefix: '{{ route('galleries.albums.assets.filemanager') }}'
                            });
                        }
                    } else {
                        $("#modal-dialog").modal('hide');
                    }

                    initilizeRepeater();
                    initilizeSelect2();
                    resetEditableFields();
                    tinymce.init(dbeditorSettingsForTextArea);
                }
            });
        }

        $font_size_formats = "8px";

        for(let i = 9; i <= 80; i++) {
            $font_size_formats += " " + i + "px";
        }

        //tinymce editor options
        let dbeditorSettings = {
            promotion                   : false,
            path_absolute               : "/",
            selector                    : '.document-builder-editor',
            height                      :  865,
            toolbar_sticky              : true,
            toolbar_sticky_offset       : getStickyOffsetOfContentHeader(),
            allow_html_in_named_anchor  : true,
            valid_children              : '+a[class|id|p|div|span|table|tbody|tr|td|strong|ul|#text],-li[p]',
            document_base_url           : '/',
            relative_urls               : false,
            remove_script_host          : false,
            automatic_uploads           : true,
            contextmenu_never_use_native: true,
            paste_data_images           : true,
            body_class                  : 'template-body',
            //menubar                     : false,
            branding                    : false,
            anchor_bottom               : false,
            anchor_top                  : false,
            font_size_formats           : $font_size_formats,
            protect                     : [
                /\<\/?(if|endif)\>/g,  // Protect <if> & </endif>
                /\<xsl\:[^>]+\>/g,  // Protect <xsl:...>
                /<\?php.*?\?>/g  // Protect php code
            ],
            nonbreaking_force_tab       : true,
            pagebreak_separator         : "<p class='pagebreak'><!-- page break --></p>",
            pagebreak_split_block       : true,
            font_family_formats: "Andale Mono=andale mono,monospace; Arial=Arial,Helvetica,sans-serif; Arial Black=Arial Black,sans-serif; Book Antiqua=book antiqua,serif; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,serif; Helvetica=Helvetica,Arial,sans-serif; Impact=impact,sans-serif; Tahoma=tahoma,Arial,Helvetica,sans-serif; Times New Roman=times new roman,Times,serif; Trebuchet MS=trebuchet ms,geneva,serif; Verdana=Verdana,Arial,Helvetica,sans-serif;",
            paste_preprocess            : function( plugin, args ) {
                args.content = convertWord( args.content );
            },
            paste_postprocess           : function( plugin, args ) {
                let $duplicate_field = $(args.node).find("a.data-field");

                $duplicate_field.each(function() {
                    let duplicateID = $(this).attr("id"),
                        field_id            = $(this).data("field-id"),
                        field_name          = $(this).data("field-name"),
                        template_field_name = field_name+"_"+$.now(),
                        settings;

                    if( $(tinymce.get("document-builder-editor-id").getBody()).find("#"+duplicateID).length ) {
                        settings = JSON.parse(
                            decodeURIComponent(
                                $(this).data("settings")
                            )
                        );

                        if( checkEditableFieldExists(field_id) ) {
                            $(args.node).html("");
                            return;
                        }

                        settings.name = template_field_name;

                        delete settings.dc_template_id;

                        settings = encodeURIComponent(
                            JSON.stringify( settings )
                        );

                        $(this).attr("id", template_field_name);
                        $(this).attr("href", "#"+template_field_name);
                        $(this).data("mce-href", "#"+template_field_name);
                        $(this).attr("data-mce-href", "#"+template_field_name);

                        $(this).data("settings", settings);
                        $(this).attr("data-settings", settings);
                    }

                });
            },
            plugins                     :
                'advlist autolink lists link image charmap preview anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media table nonbreaking save directionality emoticons template autosave template'
                //quickbars
            ,
            formats: {
                // Changes the alignment buttons to add a class to each of the matching selector elements
                alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,audio,video,article,span', styles: { textAlign: 'left' } },
                aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,audio,video,article,span', styles: { textAlign: 'center' } },
                alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,audio,video,article,span', styles: { textAlign: 'right' } },
                alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,audio,video,article,span', styles: { textAlign: 'justify' } },
            },
            autosave_retention          : '300m',
            autosave_ask_before_unload  : true,
            autosave_prefix             : "tinymce-autosave-{query}-{id}",
            autosave_interval           : '6s',
            contextmenu                 : "undo redo | copy paste | link image inserttable | tableprops tablecellprops tablerowprops tabledelete restoredraft",
            toolbar1                    : 'undo redo | cut copy | insert table | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
            toolbar2                    : 'link image | print preview media | fontfamily fontsize | forecolor backcolor emoticons | code',
            advlist_number_styles       : "default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman,{{ app()->getLocale() == "en" ? "articles" : "artikel" }}",
            language                    : '{{ app()->getLocale() }}',
            browser_spellcheck          : true,
            content_css                 : "css/pdf.css",
            image_class_list            : [
                { title: 'None', value: '' },
                { title: 'Left', value: 'float-left' },
                { title: 'Right', value: 'float-right' },
                { title: 'Center', value: 'block mx-auto' }
            ],
            setup                       : function (editor) {

                editor.on('keydown', function(e) {
                    var key = e.keyCode || e.which;

                    // do nothing on tab key
                    //tinymce.activeEditor
                    if ((e.which === 9 && !e.shiftKey)) {
                        if( $(tinymce.get(editor.id).selection.getNode()).parents("li").length ||
                            $(tinymce.get(editor.id).selection.getNode()).is("li")
                        ) {
                            if(tinymce.get(editor.id).selection.getRng(true).startOffset > 0) {
                                tinymce.get(editor.id).execCommand('mceInsertContent', false, "&nbsp;&nbsp;&nbsp;");
                                e.preventDefault();
                                e.stopImmediatePropagation();
                            } else if (
                                tinymce.get(editor.id).selection.getRng(true).startOffset == 0 &&
                                tinymce.get(editor.id).selection.getSel().focusNode.previousElementSibling != null &&
                                tinymce.get(editor.id).selection.getSel().focusNode.previousElementSibling.nodeName == "BR"
                            ) {
                                tinymce.get(editor.id).execCommand('mceInsertContent', false, "&nbsp;&nbsp;&nbsp;");
                                e.preventDefault();
                                e.stopImmediatePropagation();
                            }
                        }

                    }
                })

                editor.on('change', function ( e ) {
                    var value = editor.getContent();
                    if (value !== editor._lastChange) {
                        editor._lastChange = value;
                        // tinymce.triggerSave();
                    }

                    if(editor.id == "document-builder-editor-id") {
                        resetEditableFields();
                    }
                });

                if(editor.id == "document-builder-editor-id") {

                    if($('#'+editor.id).attr('readonly')) {
                        {{-- editor.settings.readonly = true; --}}
                        editor.mode.set('readonly')
                    }

                    @if($templateType == "contract" && $template->contract_type_id == 0 )
                        editor.mode.set('readonly')
                    @endif

                    editor.on('click', function (e) {
                        if($(e.target).hasClass("data-field")) {
                            var field_id = $(e.target).data("field-id"), field_name = $(e.target).data("field-name"), field_label = $(e.target).data("field-label"), template_field_name = $(e.target).attr("id"),
                            settings = JSON.parse(
                                decodeURIComponent(
                                    tinymce.get(editor.id).dom.getAttrib(
                                        template_field_name,
                                        "data-settings"
                                    )
                                )
                            );

                            let data = {
                                field_id                    : field_id,
                                field_name                  : field_name,
                                options                     : settings,
                                @if($templateType == "contract")
                                    contract_type_id : $('#form').find("select[name='contract_type_id']").val(),
                                @endif
                            };

                            setFieldSettings(data);
                        }
                        resetEditableFields();
                    });

                    // editor.on('paste',function(evt) {
                    //     console.log(evt)
                    // });

                    editor.on('Undo',function(evt) {
                        resetEditableFields();
                    });

                    editor.on('Redo',function(evt) {
                        resetEditableFields();
                    });
                }
            },
            init_instance_callback : (editor) => {

                if(editor.id == "document-builder-editor-id") {
                    resetEditableFields();
                }

                editor.contentAreaContainer.children[0].contentDocument.children[0].setAttribute('lang', '{{ app()->getLocale() }}');
            },

            images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
                const fd = new FormData();
                fd.append('documents', blobInfo.blob());
                PDRequest({
                    type    : "POST",
                    url     : '/assets',
                    data    : fd,
                    isFlash : false
                }).then(response => {
                    resolve( "/storage/"+response[0].media );
                });

            }),

            file_browser_callback : function( field_name, url, type, win ) {
                var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                var cmsURL = "{{ route('galleries.albums.assets.filemanager') }}?field_name=" + field_name;
                if (type == 'image') {
                    cmsURL = cmsURL + "&type=images";
                } else {
                    cmsURL = cmsURL + "&type=files";
                }

                console.log(win);

                tinyMCE.activeEditor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            }
        };

        tinymce.init(dbeditorSettings);

        let dbeditorSettingsForTextArea = Object.assign({}, dbeditorSettings, {
            height : 300,
            selector : '.document-builder-editor-text-area',
            toolbar1 : 'bold italic | insert table | styles | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
            toolbar2 : 'link image | fontfamily fontsize | forecolor backcolor emoticons',
            menubar : false,
        });

        delete dbeditorSettingsForTextArea.paste_preprocess;

        // when left side bar field clicked we need to insert the selected field on text editor to current cursor position
        $(".input-control").on("click", function(event) {
            if( checkEditableFieldExists($(this).data("id")) ) {
                return;
            }

            let field_id            = $(this).data("id"),
                field_name          = $(this).data("name"),
                field_label         = $(this).data("label"),
                template_field_name = field_name+"_"+$.now(),
                html                = "[<a href='#"+template_field_name+"' data-field-id='"+field_id+"' id='"+template_field_name+"' class='data-field' data-field-name='"+field_name+"'>"+field_label+"</a>]<span id='"+template_field_name+"-span'></span>";

                tinymce.get("document-builder-editor-id").execCommand('mceInsertContent', false, html);

                //currentCursor = tinymce.get("document-builder-editor-id").selection.getRng().startOffset;

            let data = {
                field_id    : field_id,
                field_name  : field_name,
                options     : {
                    name        : template_field_name,
                    label       : field_label,
                    dc_field_id : field_id,
                },
                @if($templateType == "contract")
                    contract_type_id : $('#form').find("select[name='contract_type_id']").val(),
                @endif
            };

            setFieldSettings(data);

        });

        // when modal save button click we need to update the right field on text editor
        $(".modal-btn-settings-save").on("click", function(event) {
            event.preventDefault();

            tinymce.triggerSave();

            let settings = $("#modal-btn-settings-save").serializeObject();

            if(settings.required != "1" && !settings.required ) {
                settings.required = "0";
            }

            if(settings.show_label != "1" && !settings.show_label ) {
                settings.show_label = "0";
            }

            if($(".field-settings-form").find("form").length) {
                $(".field-settings-form").find("form").validate(validateFormObj);
            }

            if($(".field-settings-form").find("form").valid()) {

                setFieldSettings({
                    field_id      : tinymce.get("document-builder-editor-id").dom.getAttrib(
                        settings.name,
                        "data-field-id"
                    ),
                    field_name      : tinymce.get("document-builder-editor-id").dom.getAttrib(
                        settings.name,
                        "data-field-name"
                    ),
                    options         : settings,
                    update_option   : 1,
                    @if($templateType == "contract")
                        contract_type_id : $('#form').find("select[name='contract_type_id']").val(),
                    @endif
                }, false);
            }

        });

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

            tinymce.triggerSave();

            let settings = $("#modal-btn-settings-save").serializeObject();
            // tinymce.get("document-builder-editor-id").undoManager.undo();
            // tinymce.get("document-builder-editor-id").undoManager.undo();
        });

        $("#modal-dialog").on("click", ".radio-option", function() {
            $(this).parents("div[data-repeater-list]")
                .find("div[data-repeater-item] input.radio-option")
                .prop("checked", false);

            $(this).prop("checked", true);
        });

        $("#modal-dialog").on("click", "input[name='allow_multiple']", function() {
            if($(this).is(":checked")) {
                $repeater_list_el     = "div[data-repeater-list]";
                $radio_option_el = "div[data-repeater-item] input.radio-option";

                $($repeater_list_el).find($radio_option_el).prop("type", "checkbox");
                $($repeater_list_el).find($radio_option_el).removeClass("radio-option");
            } else {
                $($repeater_list_el).find("div[data-repeater-item] input[type='checkbox']").addClass("radio-option");
                $($repeater_list_el).find($radio_option_el).prop("type", "radio");
                $($repeater_list_el).find($radio_option_el).prop("checked", false);
            }
        });

        (function ($) {
            $.fn.select2Sortable = function () {
                let $this = this;
                var ul = this.next('.select2-container').first('ul.select2-selection__rendered');
                ul.sortable({
                    axis: "x",
                    placeholder : 'ui-state-highlight',
                    forcePlaceholderSize: true,
                    items       : 'li:not(.select2-search__field)',
                    tolerance   : 'pointer',
                    stop: function() {
                        $($(ul).find('.select2-selection__choice').get().reverse()).each(function() {
                            var id = $(this).data('data').id;
                            var option = $this.find('option[value="' + id + '"]')[0];
                            $this.prepend(option);
                        });
                        // pCallback();
                    }
                });
            };
        })(jQuery);

        $('body').on('click', '.tabs-btn-box', function () {
            // Reset all tabs and contents for the second set filter
            $(".tabs-btn-box").removeClass("active");

            // Set new active state for the clicked tab in the filter set
            $(this).addClass("active");

            if($(this).find("input[type='radio']")) {
                $(this).find("input[type='radio']").prop('checked', 1);
            }
        });

        $('body').on('hidden.bs.modal', '.modal', function() {

            tinymce.triggerSave();

            let settings = $("#modal-btn-settings-save").serializeObject();
            setTinyCursorToLastPosition( settings.name );
        });

        $(document).on('focusin', function(e) {
            if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
                e.stopImmediatePropagation();
            }
        });

        @if($templateType == "contract" && isset($contract_type_fields))

            let contract_fields = {!! json_encode($contract_type_fields, true) !!}
            let $prevSelection = $('select[name="contract_type_id"]').val();

            function toggleFields( fields )
            {

                $prevSelection = $('select[name="contract_type_id"]').val();

                $(".contract-type-fields").addClass("hidden");

                fields.forEach(function(value) {
                    $("button[data-name='"+value+"']").parents(".input-control-parent").removeClass('hidden');
                    $("button[data-name='employee-"+value+"']").parents(".input-control-parent").removeClass('hidden');
                });
            }

            function fetchContractFields()
            {
                let contract_type_id = parseInt($('select[name="contract_type_id"]').val()), $editor = tinymce.get("document-builder-editor-id");

                let content = $editor.getContent();

                if($editor.mode.isReadOnly()) {
                    $editor.mode.set('design')
                }

                if (isNaN(contract_type_id) && (content == "" || content == '<p><br data-mce-bogus="1"></p>')) {

                    for(key in contract_fields ) {
                        toggleFields(contract_fields[key].fields);
                    }

                    return;
                }

                if (!isNaN(contract_type_id) && (content == "" || content == '<p><br data-mce-bogus="1"></p>')) {

                    toggleFields(contract_fields[contract_type_id].fields);

                    return;
                }

                PDSimpleConfirm().then(response => {
                    if (response) {

                        if(isNaN(contract_type_id)) {
                            for(key in contract_fields ) {
                                toggleFields(contract_fields[key].fields);
                            }

                        } else {
                            toggleFields(contract_fields[contract_type_id].fields);
                        }

                        $editor.setContent('');
                    } else {
                        $('select[name="contract_type_id"]').val($prevSelection);
                    }
                });
            }
        @endif

        const _toolSearch = _.debounce( function(data) {
            toolFilter(data);
        }, 500);

        $('.tool-search').on('keyup', function(event) {
            _toolSearch( $(this).val(), this );
        });

        function toolFilter( keyWord )
        {
            if (!keyWord.length) {
                toolClearFilter();
                return;
            } else {

                keyWord = keyWord.toLowerCase();

                let $parent = $("#editor-tools-box");

                $parent.find(".input-control-parent").removeClass("matched");

                // distinguish the matched nodes and the unmatched nodes according to the given key word
                $parent.find(".input-control-parent")
                    .filter(function (index, node) {

                        const string = $(node).find(".tool-name").text().toLowerCase().trim();

                        return string.includes(keyWord);
                    })
                    .addClass("matched");

                // hide the unmatched nodes
                $parent.find(".matched").each(function (index, node) {
                    $(node).removeClass("hidden-tool");

                    $(node).closest(".accordion")
                        .find(".input-control-parent:not(.matched)")
                        .addClass("hidden-tool");
                });

                if(!$parent.find(".matched").length) {
                    $parent.find(".input-control-parent").addClass("hidden-tool");
                }
            }
        }

        function toolClearFilter()
        {
            let $parent = $("#editor-tools-box");

            $parent.find(".input-control-parent")
                .removeClass("matched")
                .removeClass("hidden-tool");
        }
</script>