<?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, 'PSYCH_RISK_ASSESSMENT', $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,
        "no_risks" => false,
        "items" => [
            [
                "area" => '',
                "level" => null,
                "intent" => null,
                "plan" => null,
                "means" => null,
                "risk_factors" => '',
                "protective_factors" => '',
                "additional_details" => ''
            ]
        ]
    ];
}

?>

<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">
            @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_psych_risk_assessment-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="no_risks" name="no_risks">
                        <span>Patient denies all areas of risk. No contrary clinical indications present.</span>
                    </label>
                </div>

                <div v-if="!no_risks" v-for="(item, index) in items" class="note-section-item-row">
                    <hr v-if="index > 0" class="row">
                    <div class="d-flex align-items-baseline mb-2">
                        <label class="width-140px my-0">Area of Risk:</label>
                        <div class="flex-grow-1">
                            <input type="text" class="form-control form-control-sm min-width-unset" data-option-list v-model="item.area" required>
                            <div class="data-option-list">
                                <div>Suicidal ideation</div>
                                <div>Homicidal ideation</div>
                                <div>Inability to care for self</div>
                                <div>Inability to care for others</div>
                                <div>Aggression toward others</div>
                                <div>Aggression toward property</div>
                                <div>Self-harm</div>
                                <div>Elopement</div>
                                <div>Substance misuse</div>
                            </div>
                        </div>
                        <div moe relative v-if="items.length > 1" class="ml-3">
                            <a href="#" start show><i class="fa fa-trash-alt text-danger on-hover-opaque"></i></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 class="row mb-1">
                        <div class="col-3">
                            <div class="mb-1">Level of Risk:</div>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.level" value="Low">
                                <span class="ml-1">Low</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.level" value="Medium">
                                <span class="ml-1">Medium</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.level" value="High">
                                <span class="ml-1">High</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.level" value="Imminent">
                                <span class="ml-1">Imminent</span>
                            </label>
                        </div>
                        <div class="col-3">
                            <div class="mb-1">Intent to Act:</div>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.intent" value="Yes">
                                <span class="ml-1">Yes</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.intent" value="No">
                                <span class="ml-1">No</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.intent" value="Not Applicable">
                                <span class="ml-1">Not Applicable</span>
                            </label>
                        </div>
                        <div class="col-3">
                            <div class="mb-1">Plan to Act:</div>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.plan" value="Yes">
                                <span class="ml-1">Yes</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.plan" value="No">
                                <span class="ml-1">No</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.plan" value="Not Applicable">
                                <span class="ml-1">Not Applicable</span>
                            </label>
                        </div>
                        <div class="col-3">
                            <div class="mb-1">Means to Act:</div>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.means" value="Yes">
                                <span class="ml-1">Yes</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.means" value="No">
                                <span class="ml-1">No</span>
                            </label>
                            <label class="my-0 d-flex align-items-center">
                                <input type="radio" v-model="item.means" value="Not Applicable">
                                <span class="ml-1">Not Applicable</span>
                            </label>
                        </div>
                    </div>
                    <div class="d-flex align-items-baseline mb-1">
                        <label class="width-140px my-0">Risk Factors:</label>
                        <div class="flex-grow-1 position-relative">
                            <input type="text" class="form-control form-control-sm min-width-unset" data-option-list multi-option-list sticky-option-list multi-col-option-list v-model="item.risk_factors" required>
                            <div class="data-option-list width-300px">
                                <div>Current ideation</div>
                                <div>Impulsivity</div>
                                <div>Access to means</div>
                                <div>Hopelessness</div>
                                <div>History of attempts/behaviors</div>
                                <div>Recent loss</div>
                                <div>Alcohol/Substance use</div>
                                <div>Family History</div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-baseline mb-1">
                        <label class="width-140px my-0">Protective Factors:</label>
                        <div class="flex-grow-1 position-relative">
                            <input type="text" class="form-control form-control-sm min-width-unset" data-option-list multi-option-list sticky-option-list multi-col-option-list v-model="item.protective_factors" required>
                            <div class="data-option-list">
                                <div>Positive social support</div>
                                <div>Life satisfaction</div>
                                <div>Cultural/religious beliefs</div>
                                <div>Positive coping skills</div>
                                <div>Social responsibility</div>
                                <div>Sufficient problem-solving skills</div>
                                <div>Children in the home</div>
                                <div>Strong therapeutic rapport</div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-baseline mb-1">
                        <label class="width-140px my-0">Additional Details:</label>
                        <div class="flex-grow-1 position-relative">
                            <input type="text" class="form-control form-control-sm min-width-unset" v-model="item.additional_details" required>
                        </div>
                    </div>
                </div>

                <div class="form-group my-2">
                    <button v-if="!no_risks" class="btn btn-sm btn-default text-primary border border-primary mr-2"
                            v-on:click.prevent="addItem()"
                    >Add Area of Risk</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_psych_risk_assessment-container',
                data: {
                    count: {{ $contentData['count'] }},
                    no_risks: {{ $contentData['no_risks'] ? 'true' : 'false' }},
                    items: <?= json_encode($contentData['items']) ?>
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            let parent = $('#edit-univ_psych_risk_assessment-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_psych_risk_assessment-container').find('textarea').first().trigger('input');
                        });
                    },

                    addItem: function() {
                        this.items.push({
                            area: '',
                            level: null,
                            intent: null,
                            plan: null,
                            means: null,
                            risk_factors: '',
                            protective_factors: '',
                            additional_details: ''
                        });
                        this.count = this.items.length;

                        // trigger autosave!
                        Vue.nextTick(() => {
                            let parent = $('#edit-univ_psych_risk_assessment-container').closest('form');
                            parent.find('[name="no_risks"]').trigger('change');
                            $('#edit-univ_psych_risk_assessment-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_psych_risk_assessment-container').closest('form');
                            parent.find('[name="no_risks"]').trigger('change');
                            hideMoeFormMask();
                        });
                    }
                },
                mounted: function() {
                    $('#edit-univ_psych_risk_assessment-container').find('[moe][initialized]').removeAttr('initialized');
                    initMoes();
                }
            });

        }

        window.segmentInitializers.psych_risk_assessment = init;

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