<?php
$contentData = false;
if($section){
    $contentData = json_decode($section->content_data, true);
}
if(!$contentData) {
    $contentData = [];
}
if(!isset($contentData['count'])) {
    $contentData['count'] = 1;
}
$formID = rand(0, 100000);
?>
<form processed id="hospitalizations_{{ $formID }}"
      onsubmit="return submitForm_NoteSection_{{ $formID }}(this);">
    <input type="hidden" name="count" v-model="count">
    <?php if($section): ?>
        <input type="hidden" name="section_uid" value="<?= $section->uid?>">
    <?php else: ?>
        <input type="hidden" name="note_uid" value="<?= $note->uid?>">
        <input type="hidden" name="section_template_uid" value="<?= $sectionTemplate->uid ?>">
    <?php endif; ?>

    <div v-for="(item, index) in items" class="note-section-item-row">
        <hr v-if="index > 0" class="row">
        <div class="row mb-2">
            <div class="col-md-3">
                <label class="text-secondary text-sm mb-1 d-block">Admission Date</label>
                <input class="form-control form-control-sm" type="date" :name="'item_' + index + '_date'" v-model="item.date" required>
            </div>
            <div class="col-md-3">
                <label class="text-secondary text-sm mb-1 d-block">&nbsp;</label>
                <a v-if="items.length > 1" href="#" v-on:click.prevent="removeItem(index)"
                   class="on-hover-opaque text-danger mt-1 d-inline-block">
                    <i class="fa fa-trash-alt"></i>
                </a>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="text-secondary text-sm mb-1 d-block">Length of Stay</label>
                <input class="form-control form-control-sm" type="number" :name="'item_' + index + '_days'" v-model="item.days" required>
            </div>
            <div class="col-md-3">
                <label class="text-secondary text-sm mb-1 d-block">Related To:</label>
                <input class="form-control form-control-sm" type="text" :name="'item_' + index + '_related_to'" v-model="item.related_to">
            </div>
            <div class="col-md-3">
                <label class="text-secondary text-sm mb-1 d-block">Procedure</label>
                <input class="form-control form-control-sm" type="text" :name="'item_' + index + '_procedure'" v-model="item.procedure">
            </div>
            <div class="col-md-3">
                <label class="text-secondary text-sm mb-1 d-block">Status</label>
                {{--<input class="form-control form-control-sm" type="text" :name="'item_' + index + '_status'" v-model="item.status">--}}

                <select :name="'item_' + index + '_status'" v-model="item.status"
                        class="form-control form-control-sm">
                    <option value=""> -- select --</option>
                    <option value="Completed">Completed</option>
                    <option value="Active">Active</option>
                    <option value="Aborted">Aborted</option>
                    <option value="Canceled">Canceled</option>
                    <option value="Scheduled">Scheduled</option>
                </select>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-md-12">
                <textarea rte class="form-control form-control-sm" type="text"
                          :name="'item_' + index + '_comments'"
                          data-shortcuts=""  v-model="item.comments">
                </textarea>
            </div>
        </div>
    </div>

</form>
<script>

    (function() {

        let count = {{ $contentData['count'] }}, items = [];
        let input = {!! json_encode($contentData)  !!};
        for (let i = 0; i < count; i++) {
            items.push({
                date: input['item_' + i + '_date'],
                days: input['item_' + i + '_days'],
                related_to: input['item_' + i + '_related_to'],
                procedure: input['item_' + i + '_procedure'],
                status: input['item_' + i + '_status'],
                comments: input['item_' + i + '_comments'],
            });
        }

        window.hospitalizationsApp = new Vue({
            el: '#hospitalizations_{{ $formID }}',
            data: {
                count: {{ $contentData['count'] }},
                items: items
            },
            methods: {
                initRTE: function() {
                    $('textarea[rte]').each(function() {

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

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

                        var ti = $('<input type="hidden" />')
                            .val(this.value)
                            .attr('name', this.name)
                            .insertBefore(this);
                        var ce = $('<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 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() {
                            ti.val(qe.root.innerHTML);
                        });

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

                    });
                },
                addItem: function() {
                    this.items.push({
                        date: '',
                        days: '',
                        related_to: '',
                        procedure: '',
                        status: '',
                        comments: '',
                    });
                    this.count = this.items.length;
                    var self = this;
                    Vue.nextTick(function() {
                        self.initRTE();
                    })
                },
                removeItem: function(_index) {
                    this.items.splice(_index, 1);
                    this.count = this.items.length;
                }
            }
        });

    })();

</script>
