<div id="cm-entry-{{ $careMonth->uid }}">
    <div class="mb-2">
        <label class="mb-0 d-block d-flex align-items-center">
            <span class="mr-1">Template</span>
            <select class="form-control form-control-sm" v-model="template">
                <option value="">-- Select Template --</option>
                @foreach($cmTemplates as $template)
                    <option value="{{ $template }}">{{ ucwords($template) }}</option>
                @endforeach
            </select>
        </label>
    </div>

    <input type="hidden" class="w-100 mb-2" name="contentText" v-model="contentText">
    <input type="hidden" class="w-100 mb-2" name="contentDetail" v-model="contentDetail">

    @foreach($cmTemplates as $template)
    <div class="mb-2" data-template="{{ $template }}" v-if="template === '{{ $template }}'">
        <hr class="my-2">
        <div id="cm-content-{{ $careMonth->uid }}" class="d-none">
            @include('app/entry-templates/cm/' . $template . '-narration')
        </div>
        @include('app/entry-templates/cm/' . $template)
        <hr class="my-2">
    </div>
    @endforeach
</div>
<script>
    (function() {
        window.cmEntryApp = new Vue({
            el: '#cm-entry-{{ $careMonth->uid }}',
            delimiters: ['@{{', '}}'],
            data: {
                template: '',
                contentText: '',
                contentDetail: '',
                called_patient: false,
                called_patient_result: '',
                no_answer_result: '',
                spoke_to_whom: '',
            },
            methods: {
                generateOutput: function() {
                    this.contentDetail = JSON.stringify({
                        called_patient: this.called_patient,
                        called_patient_result: this.called_patient_result,
                        no_answer_result: this.no_answer_result,
                        spoke_to_whom: this.spoke_to_whom,
                    });
                    var self = this;
                    Vue.nextTick(function () {
                        var html = $('#cm-content-{{ $careMonth->uid }}').html();
                        html = $.trim(html
                            .replace(/\s*\<\!----\>\s*/g, '')
                            .replace(/[\r\n]*/g, '')
                            .replace(/\s+/g, ' ')
                            .replace(/<div><\/div>/g, ''));
                        self.contentText = html;
                    });
                }
            },
            watch: {
                called_patient: function() {
                    console.log('Changed: called_patient');
                    this.generateOutput();
                },
                called_patient_result: function() {
                    console.log('Changed: called_patient_result');
                    this.generateOutput();
                },
                no_answer_result: function() {
                    console.log('Changed: no_answer_result');
                    this.generateOutput();
                },
                spoke_to_whom: function() {
                    console.log('Changed: spoke_to_whom');
                    this.generateOutput();
                },
            }
        });
    })();
</script>
