<?php
use App\Models\Client;
use App\Models\Note;
use App\Models\Point;
/** @var Client $patient */
/** @var Note $note */
/** @var Point $point */

// replace content data
$contentData = [
    "social_i_live_purposeful_life" => '',
    "social_i_have_spiritual_community" => '',
    "social_i_have_source_of_inner_strength" => '',
    "social_i_am_satisfied_with_current_belief_system" => '',
    "social_i_have_people_who_care" => '',
    "social_i_have_people_who_accept_me_at_my_worst_and_best" => '',
    "social_i_have_people_i_trust_at_home_or_work" => '',
    "social_i_get_help_when_i_am_sick" => ''
];

$point = Point::getGlobalSingletonOfCategory($patient, 'LIFESTYLE_SOCIAL_RELATIONSHIPS', true);

if ($point && @$point->data) {
    $contentData = $point->data;
}
?>
<div class="p-3 mcp-theme-1">
    <div visit-moe close-on-save close-on-cancel class="d-block">
        <form show url="/api/visitPoint/upsertGlobalSingleton" class="mcp-theme-1">
            <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
            <input type="hidden" name="category" value="LIFESTYLE_SOCIAL_RELATIONSHIPS">
            <input type="hidden" name="data">

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

                <div class="row">
                    <div class="col-md-12">
                        <h5 class="bg-light p-1 font-weight-bold">PURPOSE AND CONNECTION</h5>
                        <p><b>How often do you agree with the following:</b></p>
                    </div>
                </div>

                <div class="row mb-1">

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">a.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I live a purposeful and meaningful life
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_live_purposeful_life">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">b.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I have a spiritual community that I can turn to in times of need
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_have_spiritual_community">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">c.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I have a source of inner strength and meaning
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_have_source_of_inner_strength">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">d.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I am satisfied with my current belief system
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_am_satisfied_with_current_belief_system">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">e.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I have people who care about what happens to me
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_have_people_who_care">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">f.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I have people who accept me at my worst and best
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_have_people_who_accept_me_at_my_worst_and_best">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">g.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I have people I trust at home or work who I can talk to about my problems
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_have_people_i_trust_at_home_or_work">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">h.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        I get help when I’m sick
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm "
                                                v-model="data.social_i_get_help_when_i_am_sick">
                                            <option value="1">1 - Never</option>
                                            <option value="2">2 - Seldom</option>
                                            <option value="3">3 - Sometimes</option>
                                            <option value="4">4 - Often</option>
                                            <option value="5">5 - Always</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



                </div>

                <div class="mt-3 pt-3 border-top text-center">
                    <button type="button" v-on:click.prevent="saveForm()" class="btn btn-sm btn-primary mr-2">Submit</button>
                    <button type="button" onclick="closeStagPopup()" class="btn btn-sm btn-default border">Cancel</button>
                </div>

            </div>

            <div class="d-none">
                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
                <button cancel class="btn btn-sm btn-default border">Cancel</button>
            </div>
        </form>
    </div>
</div>
<script>
    (function() {
        window.segmentInitializers.<?= $segment->segmentTemplate->internal_name ?> = function() {
            // any JS can come here
            // will be run on page-load as well as whenever this segment is refreshed
            new Vue({
                el: '#edit-univ_sub_social_relationships_assessment-container',
                delimiters: ["@{{","}}"],
                data: {
                    data: <?= json_encode($contentData) ?>
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            let parent = $('#edit-univ_sub_social_relationships_assessment-container').closest('form');
                            parent.find('[name="data"]').val(JSON.stringify(this.data));

                            // autosave on change
                            autoSaveSegment(parent.find('[submit]').first());
                        },
                        deep: true
                    }
                },
                methods: {
                    saveForm: function() {
                        let parent = $('#edit-univ_sub_social_relationships_assessment-container').closest('form');
                        parent.find('[name="data"]').val(JSON.stringify(this.data));
                        autoSaveSegmentAndClose(parent.find('[submit]').first());
                    }
                }
            });
        };
    })();
</script>