<?php

use App\Models\Client;
use App\Models\Point;
use App\Models\Note;
/** @var Client $patient */
/** @var Note $note */

if(!@$segment) $segment = null;

if(!@$sessionKey) {
    $sessionKey = request()->cookie('sessionKey');
}

$point = Point::getOrCreateOnlyTopLevelPointOfCategory($note, 'FAMILY_HISTORY', $sessionKey, true);

$contentData = $parsed = false;

if ($point->lastChildReview && $point->lastChildReview->data) {
    $point->lastChildReview->data = json_decode($point->lastChildReview->data, true);
    $contentData = $parsed = $point->lastChildReview->data;
}

if(!$contentData) {
    $contentData = [
        "count" => 1,
        "unknown" => false,
        "items" => [
            [
                "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" => '',
            ]
        ]
    ];
}

?>

<hr class="hide-outside-popup mt-3 mb-0">
<div class="p-3 mcp-theme-1">
    <div {{!!$segment ? 'visit-moe' : 'moe'}} close-on-save close-on-cancel class="d-block">
        <form show url="/api/visitPoint/upsertChildReview" class="mcp-theme-1"
                    {{!$segment ? 'hook=onHxPopupClosure' : ''}}>
            @if(!!@$segment)
                <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
            @else
                <input type="hidden" name="segmentUid" value="<?= $note->coreSegment->uid ?>">
            @endif
            <input type="hidden" name="uid" value="<?= $point->uid ?>">
            <input type="hidden" name="noteUid" value="<?= $note->uid ?>">
            <input type="hidden" name="data">

            <div id="edit-univ_history_family-container">

                <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-12 col-sm-6 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-12 col-sm-6 mt-2 mt-sm-0">
                            <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 mt-2 mt-md-0">
                            <label class="text-secondary text-sm mb-1 d-none d-md-block">&nbsp;</label>
                            <div moe relative v-if="items.length > 1">
                                <a href="#" start show><i class="fa fa-trash-alt text-danger on-hover-opaque"></i> <span class="d-inline d-md-none">Delete</span></a>
                                <div url="/nop" right>
                                    <p>Are you sure?</p>
                                    <div class="">
                                        <a class="btn btn-sm btn-danger text-white" v-on:click.prevent="removeItem(index)">Yes</a>
                                        <button type="button" class="btn btn-sm btn-default border" cancel>No</button>
                                    </div>
                                </div>
                            </div>
                        </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-6 col-md-4">
                            <div class="rspace">+</div>
                            <div class="rspace">-</div>
                        </div>
                        <div class="col-6 col-md-4">
                            <div class="rspace">+</div>
                            <div class="rspace">-</div>
                        </div>
                        <div class="col-6 col-md-4">
                            <div class="rspace">+</div>
                            <div class="rspace">-</div>
                        </div>
                    </div>--}}
                    <div class="row mb-3">
                        <div class="col-12 col-sm-6 col-md-4">
                            <div class="d-flex">
                                <div class="rspace">+</div>
                                <div class="rspace">-</div>
                            </div>
                            <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>
                                <a href="#" v-show="item.general_no_health_concern" v-on:click.prevent="clearValue(item, 'general_no_health_concern')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_arthritis" v-on:click.prevent="clearValue(item, 'general_arthritis')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_asthma" v-on:click.prevent="clearValue(item, 'general_asthma')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_bleeding_disorder" v-on:click.prevent="clearValue(item, 'general_bleeding_disorder')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_cad_lt_age_55" v-on:click.prevent="clearValue(item, 'general_cad_lt_age_55')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_copd" v-on:click.prevent="clearValue(item, 'general_copd')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_diabetes" v-on:click.prevent="clearValue(item, 'general_diabetes')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-4">
                            <div class="d-none d-sm-flex">
                                <div class="rspace">+</div>
                                <div class="rspace">-</div>
                            </div>
                            <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>
                                <a href="#" v-show="item.general_heart_attack" v-on:click.prevent="clearValue(item, 'general_heart_attack')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_heart_disease" v-on:click.prevent="clearValue(item, 'general_heart_disease')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_high_cholesterol" v-on:click.prevent="clearValue(item, 'general_high_cholesterol')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_hypertension" v-on:click.prevent="clearValue(item, 'general_hypertension')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_mental_illness" v-on:click.prevent="clearValue(item, 'general_mental_illness')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_osteoporosis" v-on:click.prevent="clearValue(item, 'general_osteoporosis')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.general_stroke" v-on:click.prevent="clearValue(item, 'general_stroke')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-4">
                            <div class="d-none d-sm-flex">
                                <div class="rspace">+</div>
                                <div class="rspace">-</div>
                            </div>
                            <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>
                                <a href="#" v-show="item.cancer_breast_ca" v-on:click.prevent="clearValue(item, 'cancer_breast_ca')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.cancer_colon_ca" v-on:click.prevent="clearValue(item, 'cancer_colon_ca')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.cancer_other_ca" v-on:click.prevent="clearValue(item, 'cancer_other_ca')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.cancer_ovarian_ca" v-on:click.prevent="clearValue(item, 'cancer_ovarian_ca')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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>
                                <a href="#" v-show="item.cancer_uterine_ca" v-on:click.prevent="clearValue(item, 'cancer_uterine_ca')"><i class="text-danger on-hover-opaque fa fa-trash-alt ml-1"></i></a>
                            </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" placeholder="Additional details (optional)">
                        </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>

            @if(!!$segment)
                <div>
                    <button onclick="return saveVisitForm(this, false, false)" type="button" class="btn btn-sm btn-primary mr-2"><i class="fa fa-save"></i></button>
                    <div class="d-inline-flex align-self-stretch align-items-center">
                        <span class="autosave-indicator saving text-sm text-secondary">Saving changes &hellip;</span>
                        <span class="autosave-indicator saved text-sm text-secondary">
                            <i class="fa fa-check"></i>
                            Saved
                        </span>
                    </div>
                </div>
            @else
                <div>
                    <button submit type="button" class="btn btn-sm btn-primary mr-2">Submit</button>
                    <button cancel type="button" class="btn btn-sm btn-default border" {!! @$closeOnSave ? 'onmousedown="return closeStagPopup()"' : '' !!}>Close</button>
                </div>
            @endif

        </form>
    </div>
</div>
<script>
    (function() {

        function init() {

            new Vue({
                el: '#edit-univ_history_family-container',
                data: {
                    count: {{ $contentData['count'] }},
                    unknown: {{ $contentData['unknown'] ? 'true' : 'false' }},
                    items: <?= json_encode($contentData['items']) ?>
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            let parent = $('#edit-univ_history_family-container').closest('form');
                            parent.find('[name="data"]').val(JSON.stringify(this.$data)).trigger('save-trigger');
                        },
                        deep: true
                    }
                },
                methods: {

                    clearValue: function(_item, _key) {
                        _item[_key] = null;
                        Vue.nextTick(function() {
                            $('#edit-univ_history_family-container').find('textarea').first().trigger('input');
                        });
                    },

                    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;

                        // trigger autosave!
                        Vue.nextTick(() => {
                            let parent = $('#edit-univ_history_family-container').closest('form');
                            parent.find('[name="unknown"]').trigger('change');
                            $('#edit-univ_history_family-container').find('[moe][initialized]').removeAttr('initialized');
                            initMoes();
                        });
                    },
                    removeItem: function(_index) {
                        this.items.splice(_index, 1);
                        this.count = this.items.length;

                        // trigger autosave!
                        Vue.nextTick(() => {
                            let parent = $('#edit-univ_history_family-container').closest('form');
                            parent.find('[name="unknown"]').trigger('change');
                            hideMoeFormMask();
                        });
                    }
                },
                mounted: function() {
                    $('#edit-univ_history_family-container').find('[moe][initialized]').removeAttr('initialized');
                    initMoes();
                }
            });

            // if in popup (omega template), add provision to toggle relevance
            @include('app.patient.segment-templates._common_actions.toggle-relevance', ['container' => '#edit-univ_history_family-container', 'segmentName' => 'omega_history_family'])

        }

        window.segmentInitializers.history_family = init;
        addMCInitializer('edit-univ_history_family-container-{{$note->id}}', init, '#edit-univ_history_family-container');

    }).call(window);
</script>
