<?php
if(!$contentData || !isset($contentData['text']) || !isset($contentData['was_confirmed'])) {
    $contentData = [
        "text" => '',
        "was_confirmed" => false,
        "note_uid" => (@$note ? $note->uid : ''),
    ];
}

$formID = rand(0, 100000);
?>
<div id="ccMay21Section">
    <input type="hidden" name="data" value="{{json_encode($contentData)}}">
    <div class="border-right border-left">
        <textarea class="form-group mb-2">{{$contentData['text']}}</textarea>
    </div>
    <label class="d-flex align-items-center my-3">
        <input type="checkbox" v-model="data.was_confirmed" {{$contentData['was_confirmed'] ? 'checked' : ''}} class="my-0 mr-2">
        <span>Confirm</span>
    </label>
</div>
<script>
    (function() {
        function init() {
            window.clientCCMay21App = new Vue({
                el: '#ccMay21Section',
                data: {
                    data: <?= json_encode($contentData) ?>
                },
                mounted: function() {
                    this.initRTE();
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('#ccMay21Section').find('[name="data"]').val(JSON.stringify({
                                text: this.data.text,
                                was_confirmed: this.data.was_confirmed,
                                note_uid: '{{(@$note ? $note->uid : '')}}',
                            }));
                        },
                        deep: true
                    }
                },
                methods: {
                    cleanArray: function(_source) {
                        let plItems = [], plObject = {};
                        for (let x=0; x<_source.length; x++) {
                            plObject = {};
                            for (let y in _source[x]) {
                                if(_source[x].hasOwnProperty(y)) {
                                    plObject[y] = _source[x][y];
                                }
                            }
                            plItems.push(plObject);
                        }
                        return plItems;
                    },
                    initRTE: function() {
                        let self = this;
                        $('#ccMay21Section textarea').each(function() {

                            $(this).wrap(
                                $('<div class="rte-holder"/>')
                                    .attr('data-shortcuts', '')
                            );

                            // give a unique id to this editor instance
                            var editorID = Math.ceil(Math.random() * 99999);

                            $('<div data-editor-id="' + editorID + '" data-field="' + this.name + '"/>')
                                .html(this.value)
                                .insertBefore(this);

                            $(this).remove();

                            var qe = new Quill('[data-editor-id="' + editorID + '"]', {
                                theme: 'snow',
                                modules: stagQuillConfig
                            });

                            var toolbar = $(qe.container).prev('.ql-toolbar');

                            // add button for new shortcut
                            var newSCButton = $('<button type="button" tabindex="-1" ' +
                                'class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
                                'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
                            toolbar.append(newSCButton);

                            qe.on('text-change', function() {
                                self.data.text = qe.root.innerHTML;
                            });

                            $(qe.container)
                                .find('.ql-editor[contenteditable]')
                                .attr('data-editor-id', editorID)
                                .attr('with-shortcuts', 1);

                        });
                    }
                }
            });
        }
        addMCInitializer('client-ccMay21', init, '#ccMay21Section');
    })();
</script>
