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

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

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

// replace content data
$contentData = [
    "current_overall_health_level" => '',
    "sleep" => '',
    "weight_management" => '',
    "nutrition" => '',
    "exercise" => '',
    "purpose_and_connection" => '',
    "mental_health" => '',
    "substance_use" => '',
    "how_important_rank_1_area" => '',
    "how_confident_rank_1_area" => '',
    "how_important_rank_2_area" => '',
    "how_confident_rank_2_area" => '',
    "how_important_rank_3_area" => '',
    "how_confident_rank_3_area" => '',
    "visit_gains" => [],
    "gain_other_description" => '',
    "sleep_difficulty_staying_awake_routine_tasks" => '',
    "sleep_difficulty_staying_awake_driving" => '',
    "sleep_need_to_nap_during_the_day" => '',
    "sleep_taken_you_more_than_30_mins_to_sleep" => '',
    "sleep_woken_up_at_night" => '',
    "sleep_unintentionally_woken_up_in_morning" => '',
    "sleep_look_at_screen_within_2_hours_of_sleep" => '',
    "sleep_legs_or_arms_jerked_during_sleep" => '',
    "sleep_experienced_creeping_crawling_in_legs" => '',
    "sleep_snored_loudly_gasped_choked_during_sleep" => '',
    "sleep_used_sleeping_aids_to_sleep" => '',
    "sleep_have_a_job_that_requires_shifts" => '',
    "sleep_have_medical_condition_affecting_sleep" => '',
    "sleep_do_you_get_at_least_7_8_hours_sleep_weekday" => '',
    "sleep_do_you_get_at_least_7_8_hours_sleep_weekend" => ''
];

if ($point->lastChildReview && $point->lastChildReview->data) {
    $point->lastChildReview->data = json_decode($point->lastChildReview->data, true);
    $contentData = $point->lastChildReview->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/upsertChildReview" class="mcp-theme-1">
            <input type="hidden" name="uid" value="<?= $point->uid ?>">
            <input type="hidden" name="noteUid" value="<?= $note->uid ?>">
            <input type="hidden" name="segmentUid" value="<?= $note->coreSegment->uid ?>">
            <input type="hidden" name="data" value="{{json_encode($contentData)}}">

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

                @include('app.patient.modules._undo_changes', compact('point'))

                <div class="row">
                    <div class="col-md-12">
                        <h5 class="bg-light p-1 font-weight-bold">GETTING STARTED</h5>
                    </div>
                </div>

                <div class="row">

                    <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">
                                        Please circle your current overall <b>LEVEL OF HEALTH</b>
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.current_overall_health_level">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</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 mb-2">
                                    <div class="col-12">
                                        Please rank the top <b>3 areas</b> you would like to improve with 1 being the most important and
                                        3 the least important
                                    </div>
                                </div>
                                <table class="table table-sm width-300px table-striped table-bordered m-0">
                                    <tbody>
                                    <tr>
                                        <td class="text-nowrap align-middle">Sleep</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.sleep">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Weight Management</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.weight_management">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Nutrition</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.nutrition">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Exercise</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.exercise">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Purpose &amp; Connection</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.purpose_and_connection">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Mental Health</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.mental_health">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Substance Use</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.substance_use">
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </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">
                                        How <b>IMPORTANT</b> is it for you to make the change you ranked as
                                        the <b>#1</b> most motivated topic area to address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_important_rank_1_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</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">
                                        How <b>CONFIDENT</b> are you regarding your ability to make the
                                        change you ranked as the <b>#1</b> most motivated topic area to
                                        address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_confident_rank_1_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</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">
                                        How <b>IMPORTANT</b> is it for you to make the change you ranked as
                                        the <b>#2</b> most motivated topic area to address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_important_rank_2_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</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">
                                        How <b>CONFIDENT</b> are you regarding your ability to make the
                                        change you ranked as the <b>#2</b> most motivated topic area to
                                        address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_confident_rank_2_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</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">
                                        How <b>IMPORTANT</b> is it for you to make the change you ranked as
                                        the <b>#3</b> most motivated topic area to address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_important_rank_3_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</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">
                                        How <b>CONFIDENT</b> are you regarding your ability to make the
                                        change you ranked as the <b>#3</b> most motivated topic area to
                                        address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_confident_rank_3_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</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">i.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-12">
                                        <div>
                                            <b>What would you like to gain from this lifestyle visit?</b> Check all that apply
                                        </div>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="more_medical_scientific_knowledge"
                                                       name="visit_gains" value="more_medical_scientific_knowledge" v-model="data.visit_gains">
                                                <label class="form-check-label" for="more_medical_scientific_knowledge">More medical/scientific
                                                    knowledge</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox"
                                                       name="visit_gains" value="practical_health_tips" v-model="data.visit_gains">
                                                <label class="form-check-label" for="practical_health_tips">Practical health tips</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" name="visit_gains"
                                                       value="accountability" v-model="data.visit_gains">
                                                <label class="form-check-label" for="accountability">Accountability</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox"
                                                       name="visit_gains" value="personalized_plan" v-model="data.visit_gains">
                                                <label class="form-check-label" for="personalized_plan">Personalized Plan</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" name="visit_gains" value="other"
                                                       v-model="data.visit_gains">
                                                <label class="form-check-label" for="other">Other</label>
                                            </div>

                                            <div v-if="data.visit_gains.indexOf('other') !== -1" class="form-group mt-3">
                                                <label>Other</label>
                                                <input type="text" class="form-control" name="gain_other_description"
                                                       v-model="data.gain_other_description" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <hr>

                <div class="row">
                    <div class="col-md-12">
                        <h5 class="bg-light p-1 font-weight-bold">SLEEP</h5>
                        <p><b>Please answer based on your sleeping patterns OVER the LAST TWO WEEKS</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">
                                        How often have you had difficulty staying awake during routine tasks?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_difficulty_staying_awake_routine_tasks">
                                            <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">
                                        How often have you had difficulty staying awake while driving?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_difficulty_staying_awake_driving">
                                            <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">
                                        How often have you felt fatigued or needed to nap during the day?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_need_to_nap_during_the_day">
                                            <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">
                                        How often has it taken you more than 30 minutes to fall asleep at night?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_taken_you_more_than_30_mins_to_sleep">
                                            <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">
                                        How often have you woken up at night?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.sleep_woken_up_at_night">
                                            <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">
                                        How often have you unintentionally woken up early in the morning?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_unintentionally_woken_up_in_morning">
                                            <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">
                                        How often do you look at a screen within 2 hours of sleeping (i.e. TV, computer, iPad, or Phone)?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_look_at_screen_within_2_hours_of_sleep">
                                            <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">
                                        How often have your legs or arms jerked during sleep?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_legs_or_arms_jerked_during_sleep">
                                            <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">i.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How often have you experienced “creeping” or “crawling” feelings in your legs?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_experienced_creeping_crawling_in_legs">
                                            <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">j.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How often have you snored loudly, gasped, choked, or stopped breathing during sleep?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_snored_loudly_gasped_choked_during_sleep">
                                            <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">k.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How often have you used sleeping aids (i.e. tobacco, alcohol, over-the-counter medications, or
                                        prescription medications) to help you fall asleep?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_used_sleeping_aids_to_sleep">
                                            <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">l.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Do you have a job that requires night shifts?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_have_a_job_that_requires_shifts">
                                            <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">m.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Do you have a medical condition or chronic pain that interferes with your sleep?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_have_medical_condition_affecting_sleep">
                                            <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">n.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        On an average weekday do you get at least 7-8 hours of sleep in a 24-hour period?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_do_you_get_at_least_7_8_hours_sleep_weekday">
                                            <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">o.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        On an average weekend do you get at least 7-8 hours of sleep in a 24-hour period?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.sleep_do_you_get_at_least_7_8_hours_sleep_weekend">
                                            <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() {
        function init() {

            runMCInitializer('hide-moes');
            // 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_sleep_assessment-container',
                delimiters: ["@{{","}}"],
                data: {
                    data: <?= json_encode($contentData) ?>
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            let parent = $('#edit-univ_sub_sleep_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_sleep_assessment-container').closest('form');
                        parent.find('[name="data"]').val(JSON.stringify(this.data));
                        autoSaveSegmentAndClose(parent.find('[submit]').first());
                    },
                    undoChanges: function() {
                        $.post('/api/visitPoint/destroyCurrentChildReview', {
                            uid: '{{$point->uid}}'
                        }, _data => {
                            if(!hasResponseError(_data)) {
                                closeStagPopup();
                                refreshSegment('omega_subjective_system');
                            }
                        });
                        return false;
                    }
                }
            });

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

        }

        window.segmentInitializers.lifestyle_sleep = init;

        addMCInitializer('edit-univ_sub_sleep_assessment-container-{{$note->id}}', init, '#edit-univ_sub_sleep_assessment-container');

    })();
</script>