<?php
if(!$contentData || !isset($contentData['items'])) {
    $contentData = [
        "count" => 1,
        "unknown" => false,
        "items" => [[]]
    ];
}

$formID = rand(0, 100000);
?>
<div id="fhxSection">
    <input type="hidden" name="data" value="{{json_encode($contentData)}}">
    <div class="border border-secondary rounded mb-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 min-width-unset" v-model="item.relationship" required>
                    <option value="">-- select --</option>
                    <option value="Mother">Mother</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-6">
                <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-2">
                <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 class="form-control form-control-sm" type="text" v-model="item.comments" :model-index="index">
                </textarea>
            </div>
        </div>

    </div>

    <div class="form-group my-2">
    <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>
    </div>

</div>
<script>
    (function() {
        function init() {
            window.clientFHXApp = new Vue({
                el: '#fhxSection',
                data: {
                    count: {{ $contentData['count'] }},
                    unknown: {{ $contentData['unknown'] ? 'true' : 'false' }},
                    items: <?= json_encode($contentData['items']) ?>
                },
                mounted: function() {

                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('#fhxSection').find('[name="data"]').val(JSON.stringify({
                                count: this.count,
                                unknown: this.unknown,
                                items: this.cleanArray(this.items)
                            }));
                        },
                        deep: true
                    }
                },
                methods: {
                    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;
                    },
                    removeItem: function(_index) {
                        this.items.splice(_index, 1);
                        this.count = this.items.length;
                    },
                    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;
                    }
                }
            });
        }
        addMCInitializer('client-fhx', init, '#fhxSection');
    })();
</script>
