<?php

// $contentData is already pro-scoped by this point!

if(!$contentData) {
    $contentData = [
        'physical_activity' => [
            'type' => '',
            'frequency' => '',
            'time' => '',
            'intensity' => '',
            'enjoyment' => '',
        ],
        'barriers' => '',   // free text
        'assessment' => '', // Inactive, Insufficiently Active, Active, Highly Active
        'adherence' => [
            'seated' => [
                'active' => false,
                'memo' => '',
                'adherence' => '',
                'adherence_memo' => '',
            ],
            'arm' => [
                'active' => false,
                'memo' => '',
                'adherence' => '',
                'adherence_memo' => '',
            ],
            'aquatic' => [
                'active' => false,
                'memo' => '',
                'adherence' => '',
                'adherence_memo' => '',
            ],
            'aerobic' => [
                'active' => false,
                'walk' => [
                    'active' => false,
                    'days_per_week' => '',
                    'minutes_per_day' => '',
                    'intensity' => '', // Light, Moderate, Vigorous
                    'memo' => '',
                    'adherence' => '',
                    'adherence_memo' => '',
                ],
                'jog' => [
                    'active' => false,
                    'days_per_week' => '',
                    'minutes_per_day' => '',
                    'intensity' => '', // Light, Moderate, Vigorous
                    'memo' => '',
                    'adherence' => '',
                    'adherence_memo' => '',
                ],
                'elliptical' => [
                    'active' => false,
                    'days_per_week' => '',
                    'minutes_per_day' => '',
                    'intensity' => '', // Light, Moderate, Vigorous
                    'memo' => '',
                    'adherence' => '',
                    'adherence_memo' => '',
                ],
                'swim' => [
                    'active' => false,
                    'days_per_week' => '',
                    'minutes_per_day' => '',
                    'intensity' => '', // Light, Moderate, Vigorous
                    'memo' => '',
                    'adherence' => '',
                    'adherence_memo' => '',
                ],
                'bike' => [
                    'active' => false,
                    'days_per_week' => '',
                    'minutes_per_day' => '',
                    'intensity' => '', // Light, Moderate, Vigorous
                    'memo' => '',
                    'adherence' => '',
                    'adherence_memo' => '',
                ],
            ],
            'strength' => [
                'active' => false,
                'exercises' => [
                    [
                        'name' => '',
                        'days_per_week' => '',
                        'reps' => '',
                        'intensity' => '', // Light, Moderate, Vigorous
                        'memo' => '',
                        'adherence' => '',
                        'adherence_memo' => '',
                    ]
                ]
            ],
            'neat' => [
                'active' => false,
                'recommendations' => [
                    'park_farther' => false,
                    'park_farther_adherence' => '',
                    'park_farther_adherence_memo' => '',
                    'steps_instead_of_elevator' => false,
                    'steps_instead_of_elevator_adherence' => '',
                    'steps_instead_of_elevator_adherence_memo' => '',
                    'stand_instead_of_sit' => false,
                    'stand_instead_of_sit_adherence' => '',
                    'stand_instead_of_sit_adherence_memo' => '',
                    'steps_goal_per_day' => '',
                    'steps_goal_per_day_adherence' => '',
                    'steps_goal_per_day_adherence_memo' => '',
                    'other' => '',
                    'other_adherence' => '',
                    'other_adherence_memo' => '',
                ]
            ]
        ]
    ];
}

$formID = rand(0, 100000);
?>

<div id="parSection_{{$formID}}">
    <h3 class="stag-popup-title mb-3 border-bottom pb-1 hide-if-note pt-1 pb-2">
        <span>Lifestyle Rx Review</span>
        <a href="#" onclick="return closeStagPopup()"
           class="ml-auto text-secondary">
            <i class="fa fa-times-circle"></i>
        </a>
    </h3>

    <p class="my-3">As you know many of our elderly patients are either inactive or doing very little physical activity, Studies have shown even a modest increase in the physical activity can be beneficial to their overall health and can help manage hypertension, diabetes and obesity.</p>
    <p class="my-3">Here are some of the guidelines to determine someone’s physical activity levels and then prescribe appropriate exercise prescription.</p>

    <p class="font-weight-bold my-3">Physical Activity History</p>

    <div class="pl-3 py-1 border-left mb-3">

        <input type="hidden" name="data" value="{{json_encode($contentData)}}">

        <table class="table table-sm table-bordered mb-4 bg-white">
            <thead>
            <tr class="bg-white">
                <th class="px-2 text-dark border-bottom-0 text-nowrap" colspan="2">1. Asses Current Physical Activity</th>
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap w-50">Sample Language</th>
            </tr>
            </thead>
            <tbody class="border-0">
            <tr>
                <td class="px-2 align-top width-200px bg-light">Type</td>
                <td class="px-0 py-0 bg-white align-top">
                    <input type="text" v-model="data['physical_activity']['type']" class="form-control form-control-sm border-0 shadow-none">
                </td>
                <td class="px-2 align-top bg-white text-secondary">
                    Mr/Mrs May I ask you currently how much physical activity you do such as? Such as Walking, Jogging, Swimming and weight lifting
                </td>
            </tr>
            <tr>
                <td class="px-2 align-top bg-light">Frequency</td>
                <td class="px-0 py-0 bg-white align-top">
                    <input type="text" v-model="data['physical_activity']['frequency']" class="form-control form-control-sm border-0 shadow-none">
                </td>
                <td class="px-2 align-top bg-white text-secondary">
                    How often you do that?
                </td>
            </tr>
            <tr>
                <td class="px-2 align-top bg-light">Time</td>
                <td class="px-0 py-0 bg-white align-top">
                    <input type="text" v-model="data['physical_activity']['time']" class="form-control form-control-sm border-0 shadow-none">
                </td>
                <td class="px-2 align-top bg-white text-secondary">
                    How long does it take to perform the activity?
                </td>
            </tr>
            <tr>
                <td class="px-2 align-top bg-light">Intensity</td>
                <td class="px-0 py-0 bg-white align-top">
                    <input type="text" v-model="data['physical_activity']['intensity']" class="form-control form-control-sm border-0 shadow-none">
                </td>
                <td class="px-2 align-top bg-white text-secondary">
                    How hard it is to do that?
                </td>
            </tr>
            <tr>
                <td class="px-2 align-top bg-light">Enjoyment</td>
                <td class="px-0 py-0 bg-white align-top">
                    <input type="text" v-model="data['physical_activity']['enjoyment']" class="form-control form-control-sm border-0 shadow-none">
                </td>
                <td class="px-2 align-top bg-white text-secondary">
                    Do you do this alone, with some friend or you like listening to music etc.
                </td>
            </tr>
            </tbody>
        </table>

        <table class="table table-sm table-bordered mb-4 bg-white">
            <thead>
            <tr class="bg-white">
                <th class="px-2 text-dark border-bottom-0 text-nowrap" colspan="2">2. Asses Barriers To Physical Activity
                </th>
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap w-50"></th>
            </tr>
            </thead>
            <tbody class="border-0">
            <tr>
                <td class="px-2 align-top width-200px bg-light">Barriers</td>
                <td class="px-0 py-0 bg-white align-top">
                    <input type="text" v-model="data['physical_activity']['barriers']"
                           class="form-control form-control-sm border-0 shadow-none">
                </td>
                <td class="px-2 align-top bg-white text-secondary">
                    Mr / Mrs is there anything that limits you to be move active. Such as Joint or Back Pain, Shortage
                    of time, Chest pain, short breathe, lack of safe space to exercise?
                </td>
            </tr>
            </tbody>
        </table>

        <table class="table table-sm table-bordered mb-0 bg-white">
            <thead>
            <tr class="bg-white">
                <th class="px-2 text-dark border-bottom-0 text-nowrap" colspan="2">3. Assessment of Physical Activity Level</th>
            </tr>
            </thead>
            <tbody class="border-0">
            <tr>
                <td class="px-2 align-top width-200px bg-light">
                    <label class="d-flex align-items-center c-pointer">
                        <input type="radio" v-model="data['physical_activity']['assessment']" value="Inactive" class="mr-2 my-0 align-middle">
                        <span>Inactive</span>
                    </label>
                </td>
                <td class="px-2 bg-white align-top text-secondary">
                    Nothing beyond basic movement of daily life
                </td>
            </tr>
            <tr>
                <td class="px-2 align-top width-200px bg-light">
                    <label class="d-flex align-items-center c-pointer">
                        <input type="radio" v-model="data['physical_activity']['assessment']" value="Insufficiently Active" class="mr-2 my-0 align-middle">
                        <span>Insufficiently Active</span>
                    </label>
                </td>
                <td class="px-2 bg-white align-top text-secondary">
                    Doing something which is less than 150 minutes of moderate intensity or less than 75 minutes of vigorous intensity per week.
                </td>
            </tr>
            <tr>
                <td class="px-2 align-top width-200px bg-light">
                    <label class="d-flex align-items-center c-pointer">
                        <input type="radio" v-model="data['physical_activity']['assessment']" value="Active" class="mr-2 my-0 align-middle">
                        <span>Active</span>
                    </label>
                </td>
                <td class="px-2 bg-white align-top text-secondary">
                    150-300 minutes per week of moderate intensity
                </td>
            </tr>
            <tr>
                <td class="px-2 align-top width-200px bg-light">
                    <label class="d-flex align-items-center c-pointer">
                        <input type="radio" v-model="data['physical_activity']['assessment']" value="Highly Active" class="mr-2 my-0 align-middle">
                        <span>Highly Active</span>
                    </label>
                </td>
                <td class="px-2 bg-white align-top text-secondary">
                    300 minutes or more per week of moderate intensity
                </td>
            </tr>
            </tbody>
        </table>

    </div>

    <div v-if="data['adherence']['seated']['active'] || data['adherence']['arm']['active'] || data['adherence']['aquatic']['active'] || data['adherence']['aerobic']['active'] || data['adherence']['strength']['active'] || data['adherence']['neat']['active']">

        <p class="font-weight-bold my-2">Lifestyle Rx Adherence</p>

        <div class="pl-3 border-left mb-3">
            <table class="table table-sm table-bordered mb-2 table-edit-sheet bg-white">
                <thead>
                <tr class="bg-light">
                    <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Lifestyle Rx</th>
                    <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Rx Memo</th>
                    <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Adherence</th>
                    <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Adherence Memo</th>
                </tr>
                </thead>

                <tbody class="border-0" v-if="data['adherence']['seated']['active'] || data['adherence']['arm']['active'] || data['adherence']['aquatic']['active']">
                    <tr v-if="data['adherence']['seated']['active']">
                        <td class="px-2 align-middle">
                            Seated Exercises
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['seated']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['seated']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['seated']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['seated']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['seated']['adherence_memo']">
                        </td>
                    </tr>
                    <tr v-if="data['adherence']['arm']['active']">
                        <td class="px-2 align-middle">
                            Arm Exercises
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['arm']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['arm']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['arm']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['arm']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['arm']['adherence_memo']">
                        </td>
                    </tr>
                    <tr v-if="data['adherence']['aquatic']['active']">
                        <td class="px-2 align-middle">
                            Aquatic Exercises
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['aquatic']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['aquatic']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['aquatic']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['aquatic']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['aquatic']['adherence_memo']">
                        </td>
                    </tr>
                </tbody>

                <tbody class="border-0" v-if="data['adherence']['aerobic']['active']">
                    <tr v-if="data['adherence']['aerobic']['walk']['active']">
                        <td class="px-2 align-middle">
                            Aerobic → Walk
                            <span v-if="data['adherence']['aerobic']['walk']['intensity']" v-html="' / ' + data['adherence']['aerobic']['walk']['intensity']"></span>
                            <span v-if="data['adherence']['aerobic']['walk']['days_per_week']" v-html="' / ' + data['adherence']['aerobic']['walk']['days_per_week'] + ' days/wk'"></span>
                            <span v-if="data['adherence']['aerobic']['walk']['minutes_per_day']" v-html="' / ' + data['adherence']['aerobic']['walk']['minutes_per_day'] + ' mins/days'"></span>
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['aerobic']['walk']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['walk']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['walk']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['walk']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['aerobic']['walk']['adherence_memo']">
                        </td>
                    </tr>
                    <tr v-if="data['adherence']['aerobic']['jog']['active']">
                        <td class="px-2 align-middle">
                            Aerobic → Jog
                            <span v-if="data['adherence']['aerobic']['jog']['intensity']" v-html="' / ' + data['adherence']['aerobic']['jog']['intensity']"></span>
                            <span v-if="data['adherence']['aerobic']['jog']['days_per_week']" v-html="' / ' + data['adherence']['aerobic']['jog']['days_per_week'] + ' days/wk'"></span>
                            <span v-if="data['adherence']['aerobic']['jog']['minutes_per_day']" v-html="' / ' + data['adherence']['aerobic']['jog']['minutes_per_day'] + ' mins/days'"></span>
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['aerobic']['jog']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['jog']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['jog']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['jog']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['aerobic']['jog']['adherence_memo']">
                        </td>
                    </tr>
                    <tr v-if="data['adherence']['aerobic']['elliptical']['active']">
                        <td class="px-2 align-middle">
                            Aerobic → Elliptical
                            <span v-if="data['adherence']['aerobic']['elliptical']['intensity']" v-html="' / ' + data['adherence']['aerobic']['elliptical']['intensity']"></span>
                            <span v-if="data['adherence']['aerobic']['elliptical']['days_per_week']" v-html="' / ' + data['adherence']['aerobic']['elliptical']['days_per_week'] + ' days/wk'"></span>
                            <span v-if="data['adherence']['aerobic']['elliptical']['minutes_per_day']" v-html="' / ' + data['adherence']['aerobic']['elliptical']['minutes_per_day'] + ' mins/days'"></span>
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['aerobic']['elliptical']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['elliptical']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['elliptical']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['elliptical']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['aerobic']['elliptical']['adherence_memo']">
                        </td>
                    </tr>
                    <tr v-if="data['adherence']['aerobic']['swim']['active']">
                        <td class="px-2 align-middle">
                            Aerobic → Swim
                            <span v-if="data['adherence']['aerobic']['swim']['intensity']" v-html="' / ' + data['adherence']['aerobic']['swim']['intensity']"></span>
                            <span v-if="data['adherence']['aerobic']['swim']['days_per_week']" v-html="' / ' + data['adherence']['aerobic']['swim']['days_per_week'] + ' days/wk'"></span>
                            <span v-if="data['adherence']['aerobic']['swim']['minutes_per_day']" v-html="' / ' + data['adherence']['aerobic']['swim']['minutes_per_day'] + ' mins/days'"></span>
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['aerobic']['swim']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['swim']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['swim']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['swim']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['aerobic']['swim']['adherence_memo']">
                        </td>
                    </tr>
                    <tr v-if="data['adherence']['aerobic']['bike']['active']">
                        <td class="px-2 align-middle">
                            Aerobic → Bike
                            <span v-if="data['adherence']['aerobic']['bike']['intensity']" v-html="' / ' + data['adherence']['aerobic']['bike']['intensity']"></span>
                            <span v-if="data['adherence']['aerobic']['bike']['days_per_week']" v-html="' / ' + data['adherence']['aerobic']['bike']['days_per_week'] + ' days/wk'"></span>
                            <span v-if="data['adherence']['aerobic']['bike']['minutes_per_day']" v-html="' / ' + data['adherence']['aerobic']['bike']['minutes_per_day'] + ' mins/days'"></span>
                        </td>
                        <td class="px-2 align-middle" v-html="data['adherence']['aerobic']['bike']['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['bike']['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['bike']['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 mb-0">
                                    <input type="radio" v-model="data['adherence']['aerobic']['bike']['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['aerobic']['bike']['adherence_memo']">
                        </td>
                    </tr>
                </tbody>

                <tbody class="border-0" v-if="data['adherence']['strength']['active']">

                    <tr v-for="(exercise) in data['adherence']['strength']['exercises']">
                        <td class="px-2 align-middle">
                            Strength → <span v-html="exercise.name"></span>
                            <span v-if="exercise.intensity" v-html="' / ' + exercise.intensity"></span>
                            <span v-if="exercise.reps" v-html="' / ' + exercise.reps + ' reps'"></span>
                            <span v-if="exercise.days_per_week" v-html="' / ' + exercise.days_per_week + ' days/wk'"></span>
                        </td>
                        <td class="px-2 align-middle" v-html="exercise['memo']"></td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="exercise['adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="exercise['adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="exercise['adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="exercise['adherence_memo']">
                        </td>
                    </tr>
                </tbody>

                <tbody class="border-0" v-if="data['adherence']['neat']['active']">

                    <tr v-if="data['adherence']['neat']['recommendations']['park_farther']">
                        <td class="px-2 align-middle" colspan="2">
                            NEAT → Park farther away from entrances
                        </td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['park_farther_adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['park_farther_adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['park_farther_adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['neat']['recommendations']['park_farther_adherence_memo']">
                        </td>
                    </tr>

                    <tr v-if="data['adherence']['neat']['recommendations']['steps_instead_of_elevator']">
                        <td class="px-2 align-middle" colspan="2">
                            NEAT → Take the stairs instead of escalator/elevator
                        </td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['steps_instead_of_elevator_adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['steps_instead_of_elevator_adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['steps_instead_of_elevator_adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['neat']['recommendations']['steps_instead_of_elevator_adherence_memo']">
                        </td>
                    </tr>

                    <tr v-if="data['adherence']['neat']['recommendations']['stand_instead_of_sit']">
                        <td class="px-2 align-middle" colspan="2">
                            NEAT → Stand instead of sit
                        </td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['stand_instead_of_sit_adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['stand_instead_of_sit_adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['stand_instead_of_sit_adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['neat']['recommendations']['stand_instead_of_sit_adherence_memo']">
                        </td>
                    </tr>

                    <tr v-if="data['adherence']['neat']['recommendations']['steps_goal_per_day']">
                        <td class="px-2 align-middle" colspan="2">
                            NEAT → Steps goal / day: <b v-html="data['adherence']['neat']['recommendations']['steps_goal_per_day']"></b>
                        </td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['steps_goal_per_day_adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['steps_goal_per_day_adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['steps_goal_per_day_adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['neat']['recommendations']['steps_goal_per_day_adherence_memo']">
                        </td>
                    </tr>

                    <tr v-if="data['adherence']['neat']['recommendations']['other']">
                        <td class="px-2 align-middle" colspan="2">
                            NEAT → Other: <b v-html="data['adherence']['neat']['recommendations']['other']"></b>
                        </td>
                        <td class="px-2 align-middle">
                            <div class="d-flex align-items-center">
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['other_adherence']" value="Yes">
                                    <span class="ml-1">Yes</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['other_adherence']" value="No">
                                    <span class="ml-1">No</span>
                                </label>
                                <label class="d-inline-flex align-items-center mr-3 my-0">
                                    <input type="radio" v-model="data['adherence']['neat']['recommendations']['other_adherence']" value="Other">
                                    <span class="ml-1">Other</span>
                                </label>
                            </div>
                        </td>
                        <td class="px-0 align-middle">
                            <input type="text" class="form-control form-control-sm border-0" v-model="data['adherence']['neat']['recommendations']['other_adherence_memo']">
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>

    </div>

</div>
<script>
    (function() {
        function init() {
            window.clientPARApp_{{$formID}} = new Vue({
                el: '#parSection_{{$formID}}',
                delimiters: ['@{{', '}}'],
                data: {
                    data: <?= json_encode($contentData) ?>,
                },
                mounted: function() {
                    $('#parSection_{{$formID}} [moe][initialized]').removeAttr('initialized');
                    initMoes();
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('#parSection_{{$formID}}').find('[name="data"]').val(JSON.stringify(this.data));
                        },
                        deep: true
                    }
                },
                methods: {
                    addItem: function() {
                        this.data['current_cch']['list'].push({
                            "category": '',
                            "name": '',
                            "icd": '',
                            "memo": '',
                            "hpi": {
                                "free_text": ''
                            },
                        });
                    },
                    removeItem: function(_index) {
                        this.data['current_cch']['list'].splice(_index, 1);
                    },
                    cleanArray: function(_source) {
                        let plItems = [], plObject = {};
                        for (let x=0; x<_source.length; x++) {
                            plObject = {};
                            for (let y in _source[x]) {
                                if(_source[x].hasOwnProperty(y)) {
                                    plObject[y] = _source[x][y];
                                }
                            }
                            plItems.push(plObject);
                        }
                        return plItems;
                    },
                }
            });
        }
        addMCInitializer('client-par{{$formID}}', init, '#parSection_{{$formID}}');
    })();
</script>
