<div class="d-inline mcp-theme-1 text-dark" id="outgoingEmailTemplate">
    <div moe wide center class="ml-auto">
        <a show href="" start><i class="fas fa-paper-plane"></i> Send Email</a>
        <form url="/api/imail/create">
            <div id="outgoingEmailTemplateComponent" v-cloak>
                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">

                <div class="form-group">
                    <label for="" class="control-label">Outgoing Email Template</label>
                    <select name="outgoingEmailTemplate" class="form-control input-sm" @change="setTemplate">
                        <option value=""></option>
                        <option v-for="(template,i) in templates" v-bind:value="i">@{{ template.default_subject_tpl }}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="" class="control-label">From Email</label>
                    <input type="email" name="fromEmailAddress" class="form-control input-sm" v-model="template.default_from_email" />
                </div>
                <div class="form-group">
                    <label for="" class="control-label">From Name</label>
                    <input class="form-control input-sm" type="text" name="fromName" v-model="template.default_from_name">
                </div>
                <div class="form-group">
                    <label for="" class="control-label">To Email</label>
                    <input class="form-control input-sm" type="email" name="toEmailAddress" value="{{$patient->email_address}}">
                </div>
                <div class="form-group">
                    <label for="" class="control-label">Subject</label>
                    <input class="form-control input-sm" type="text" name="subject" v-model="template.default_subject_tpl">
                </div>
                <div class="form-group">
                    <label for="" class="control-label">Body</label>
                    <div class="rte-holder border-left border-right">
                        <div id="htmlBody" class="border-left border-right"></div>
                        <input type="hidden" name="htmlBody" v-model="template.default_message_body_tpl" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm" submit>Submit</button>
                <button class="btn btn-secondary btn-sm" cancel>Cancel</button>
            </div>
        </form>
    </div>
</div>


<script>
    (function() {
        function init() {
            var outgoingEmailTemplate = new Vue({
                el: '#outgoingEmailTemplateComponent',
                data: {
                    templates: [],
                    template: {
                        default_from_email: 'carelink@leadershiphealth.org'
                    },
                    fromEmailAddresses: [
                        'carelink@leadershiphealth.org'
                    ],
                    quill: null
                },
                methods: {
                    setTemplate: function(evt) {
                        var self = this;
                        var input = evt.target;
                        var value = parseInt(evt.target.value);
                        if (isNaN(value)) {
                            self.template = {};
                            return;
                        }
                        self.template = self.templates[value];
                        self.quill.root.innerHTML = self.template.default_message_body_tpl;
                    },
                    loadOutgoingEmailTemplates: function() {
                        var self = this;
                        $.get("{{ route('outgoingEmailTemplates') }}", {}, function(response) {
                            self.templates = response.data;
                        }, 'json');
                    },
                    initQuillEditor: function() {
                        var self = this;
                        self.quill = new Quill('#htmlBody', {
                            theme: 'snow',
                            modules: stagQuillConfig
                        });
                        self.quill.on('text-change', function (delta, oldDelta, source) {
                            $('[name="htmlBody"]').val(self.quill.root.innerHTML);
                        });
                    },
                    init: function() {
                        this.loadOutgoingEmailTemplates();
                        this.initQuillEditor();
                    }
                },
                mounted: function() {
                    this.init();
                }
            });
        }
        addMCInitializer('outgoingEmailTemplate', init, '#htmlBody');
    })();
</script>