<?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 method="POST" action="/process_form_submit"
      id="fhx_{{ $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 class="border border-secondary rounded my-2 p-2">
        <label class="my-0 d-flex align-items-center">
            <input type="checkbox" class="my-0 mr-2" v-model="unknown" name="unknown">
            <span>Family history is unknown/unavailable</span>
        </label>
    </div>

    <div v-if="!unknown" v-for="(item, index) in items" class="note-section-item-row">
        <hr v-if="index > 0" class="row">
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="text-secondary text-sm mb-1 d-block">Relationship</label>
                <select class="form-control form-control-sm" :name="'item_' + index + '_relationship'" v-model="item.relationship" required>
                    <option value="">-- select --</option>
                        <option value="Father">Father</option>
                        <option value="Sister (First)">Sister (First)</option>
                        <option value="Sister (Second)">Sister (Second)</option>
                        <option value="Sister (Third)">Sister (Third)</option>
                        <option value="Sister (Fourth)">Sister (Fourth)</option>
                        <option value="Brother (First)">Brother (First)</option>
                        <option value="Brother (Second)">Brother (Second)</option>
                        <option value="Brother (Third)">Brother (Third)</option>
                        <option value="Brother (Fourth)">Brother (Fourth)</option>
                        <option value="Daughter (First)">Daughter (First)</option>
                        <option value="Daughter (Second)">Daughter (Second)</option>
                        <option value="Daughter (Third)">Daughter (Third)</option>
                        <option value="Daughter (Fourth)">Daughter (Fourth)</option>
                        <option value="Son (First)">Son (First)</option>
                        <option value="Son (Second)">Son (Second)</option>
                        <option value="Son (Third)">Son (Third)</option>
                        <option value="Son (Fourth)">Son (Fourth)</option>
                        <option value="Half-sister">Half-sister</option>
                        <option value="Half-brother">Half-brother</option>
                        <option value="Maternal Aunt">Maternal Aunt</option>
                        <option value="Paternal Aunt">Paternal Aunt</option>
                        <option value="Maternal Uncle">Maternal Uncle</option>
                        <option value="Paternal Uncle">Paternal Uncle</option>
                        <option value="Niece">Niece</option>
                        <option value="Nephew">Nephew</option>
                        <option value="Maternal Cousin">Maternal Cousin</option>
                        <option value="Paternal Cousin">Paternal Cousin</option>
                        <option value="Maternal Grandmother">Maternal Grandmother</option>
                        <option value="Maternal Grandfather">Maternal Grandfather</option>
                        <option value="Paternal Grandmother">Paternal Grandmother</option>
                        <option value="Paternal Grandfather">Paternal Grandfather</option>
                        <option value="Granddaughter">Granddaughter</option>
                        <option value="Grandson">Grandson</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="text-secondary text-sm mb-1 d-block">Health Status</label>
                <label class="my-0 mr-3 d-inline-flex align-items-center">
                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Alive" class="mr-1">
                    Alive
                </label>
                <label class="my-0 mr-3 d-inline-flex align-items-center">
                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Deceased" class="mr-1">
                    Deceased
                </label>
                <label class="my-0 mr-3 d-inline-flex align-items-center">
                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Unknown" class="mr-1">
                    Unknown
                </label>
            </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-1 font-weight-bold">
            <div class="col-8">
                General
            </div>
            <div class="col-4">
                Cancer
            </div>
        </div>
        <div class="row mb-1 font-weight-bold">
            <div class="col-4">
                <div class="rspace">+</div>
                <div class="rspace">-</div>
            </div>
            <div class="col-4">
                <div class="rspace">+</div>
                <div class="rspace">-</div>
            </div>
            <div class="col-4">
                <div class="rspace">+</div>
                <div class="rspace">-</div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-4">
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_no_health_concern'" v-model="item.general_no_health_concern"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_no_health_concern'" v-model="item.general_no_health_concern"></div>
                    <span class="ml-2">No Health Concern</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_arthritis'" v-model="item.general_arthritis"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_arthritis'" v-model="item.general_arthritis"></div>
                    <span class="ml-2">Arthritis</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_asthma'" v-model="item.general_asthma"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_asthma'" v-model="item.general_asthma"></div>
                    <span class="ml-2">Asthma</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_bleeding_disorder'" v-model="item.general_bleeding_disorder"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_bleeding_disorder'" v-model="item.general_bleeding_disorder"></div>
                    <span class="ml-2">Bleeding Disorder</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_cad_lt_age_55'" v-model="item.general_cad_lt_age_55"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_cad_lt_age_55'" v-model="item.general_cad_lt_age_55"></div>
                    <span class="ml-2">CAD < age 55</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_copd'" v-model="item.general_copd"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_copd'" v-model="item.general_copd"></div>
                    <span class="ml-2">COPD</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_diabetes'" v-model="item.general_diabetes"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_diabetes'" v-model="item.general_diabetes"></div>
                    <span class="ml-2">Diabetes</span>
                </div>
            </div>
            <div class="col-4">
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_heart_attack'" v-model="item.general_heart_attack"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_heart_attack'" v-model="item.general_heart_attack"></div>
                    <span class="ml-2">Heart Attack</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_heart_disease'" v-model="item.general_heart_disease"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_heart_disease'" v-model="item.general_heart_disease"></div>
                    <span class="ml-2">Heart Disease</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_high_cholesterol'" v-model="item.general_high_cholesterol"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_high_cholesterol'" v-model="item.general_high_cholesterol"></div>
                    <span class="ml-2">High Cholesterol</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_hypertension'" v-model="item.general_hypertension"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_hypertension'" v-model="item.general_hypertension"></div>
                    <span class="ml-2">Hypertension</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_mental_illness'" v-model="item.general_mental_illness"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_mental_illness'" v-model="item.general_mental_illness"></div>
                    <span class="ml-2">Mental Illness</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_osteoporosis'" v-model="item.general_osteoporosis"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_osteoporosis'" v-model="item.general_osteoporosis"></div>
                    <span class="ml-2">Osteoporosis</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_stroke'" v-model="item.general_stroke"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_stroke'" v-model="item.general_stroke"></div>
                    <span class="ml-2">Stroke</span>
                </div>
            </div>
            <div class="col-4">
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_breast_ca'" v-model="item.cancer_breast_ca"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_breast_ca'" v-model="item.cancer_breast_ca"></div>
                    <span class="ml-2">Breast CA</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_colon_ca'" v-model="item.cancer_colon_ca"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_colon_ca'" v-model="item.cancer_colon_ca"></div>
                    <span class="ml-2">Colon CA</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_other_ca'" v-model="item.cancer_other_ca"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_other_ca'" v-model="item.cancer_other_ca"></div>
                    <span class="ml-2">Other CA</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_ovarian_ca'" v-model="item.cancer_ovarian_ca"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_ovarian_ca'" v-model="item.cancer_ovarian_ca"></div>
                    <span class="ml-2">Ovarian CA</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_uterine_ca'" v-model="item.cancer_uterine_ca"></div>
                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_uterine_ca'" v-model="item.cancer_uterine_ca"></div>
                    <span class="ml-2">Uterine CA</span>
                </div>
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-md-12">
                <textarea rte class="form-control form-control-sm" type="text"
                          data-shortcuts="" :name="'item_' + index + '_comments'" v-model="item.comments">
                </textarea>
            </div>
        </div>

    </div>

    <div class="form-group mt-3 mb-0 d-flex">
        <button class="btn btn-sm btn-primary mr-2">Submit</button>
        <button v-if="!unknown" class="btn btn-sm btn-default text-primary border border-primary mr-2"
                v-on:click.prevent="addItem()"
            >Add Family Member</button>
        <button class="btn btn-sm btn-default border" type="button" onclick="return cancelForm_NoteSection_{{ $formID }}(this)">Cancel</button>
    </div>
</form>
<script>
    function submitForm_NoteSection_{{ $formID }}(_form) {
        showMask();
        $.post(_form.action, $(_form).serialize(), function(_data) {
            fastReload();
        });
        return false;
    }
    function cancelForm_NoteSection_{{ $formID }}(_trigger) {
        $(_trigger).closest('.note-section').toggleClass('edit');
        return false;
    }

    (function() {

        let count = {{ $contentData['count'] }}, items = [];
        let input = {!! json_encode($contentData)  !!};
        for (let i = 0; i < count; i++) {
            items.push({
                relationship: input['item_' + i + '_relationship'],
                status: input['item_' + i + '_status'],

                general_no_health_concern: input['item_' + i + '_general_no_health_concern'],
                general_arthritis: input['item_' + i + '_general_arthritis'],
                general_asthma: input['item_' + i + '_general_asthma'],
                general_bleeding_disorder: input['item_' + i + '_general_bleeding_disorder'],
                general_cad_lt_age_55: input['item_' + i + '_general_cad_lt_age_55'],
                general_copd: input['item_' + i + '_general_copd'],
                general_diabetes: input['item_' + i + '_general_diabetes'],
                general_heart_attack: input['item_' + i + '_general_heart_attack'],
                general_heart_disease: input['item_' + i + '_general_heart_disease'],
                general_high_cholesterol: input['item_' + i + '_general_high_cholesterol'],
                general_hypertension: input['item_' + i + '_general_hypertension'],
                general_mental_illness: input['item_' + i + '_general_mental_illness'],
                general_osteoporosis: input['item_' + i + '_general_osteoporosis'],
                general_stroke: input['item_' + i + '_general_stroke'],

                cancer_breast_ca: input['item_' + i + '_cancer_breast_ca'],
                cancer_colon_ca: input['item_' + i + '_cancer_colon_ca'],
                cancer_other_ca: input['item_' + i + '_cancer_other_ca'],
                cancer_ovarian_ca: input['item_' + i + '_cancer_ovarian_ca'],
                cancer_uterine_ca: input['item_' + i + '_cancer_uterine_ca'],

                comments: input['item_' + i + '_comments'],
            });
        }

        window.fhxApp = new Vue({
            el: '#fhx_{{ $formID }}',
            data: {
                count: {{ $contentData['count'] }},
                unknown: {{ @$contentData['unknown'] ? 'true' : 'false' }},
                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: {
                                keyboard: {
                                    bindings: {
                                        handleEnter: {
                                            key: 13,
                                            handler: function() {
                                                if(!$('.stag-shortcuts:visible').length) return true;
                                            }
                                        }
                                    }
                                }
                            }
                        });
                        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({
                        relationship: '',
                        status: '',

                        general_no_health_concern: null,
                        general_arthritis: null,
                        general_asthma: null,
                        general_bleeding_disorder: null,
                        general_cad_lt_age_55: null,
                        general_copd: null,
                        general_diabetes: null,
                        general_heart_attack: null,
                        general_heart_disease: null,
                        general_high_cholesterol: null,
                        general_hypertension: null,
                        general_mental_illness: null,
                        general_osteoporosis: null,
                        general_stroke: null,

                        cancer_breast_ca: null,
                        cancer_colon_ca: null,
                        cancer_other_ca: null,
                        cancer_ovarian_ca: null,
                        cancer_uterine_ca: null,

                        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>
