<?php

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

if(!$contentData) {
    $contentData = [
        'prescription' => [
            '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="pauSection_{{$formID}}">

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

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

    <div class="mb-1 d-flex align-items-center">
        <label class="mb-2 mt-1 width-200px d-inline-flex align-items-start">
            <input type="checkbox" v-model="data['prescription']['seated']['active']" class="mr-2">
            <span>Seated Exercises</span>
        </label>
        <input v-if="data['prescription']['seated']['active']" type="text"
               v-model="data['prescription']['seated']['memo']"
               placeholder="Details" class="form-control form-control-sm ml-3">
    </div>

    <div class="mb-1 d-flex align-items-center">
        <label class="mb-2 mt-1 width-200px d-inline-flex align-items-start">
            <input type="checkbox" v-model="data['prescription']['arm']['active']" class="mr-2">
            <span>Arm Exercises</span>
        </label>
        <input v-if="data['prescription']['arm']['active']" type="text"
               v-model="data['prescription']['arm']['memo']"
               placeholder="Details" class="form-control form-control-sm ml-3">
    </div>

    <div class="mb-1 d-flex align-items-center">
        <label class="mb-2 mt-1 width-200px d-inline-flex align-items-start">
            <input type="checkbox" v-model="data['prescription']['aquatic']['active']" class="mr-2">
            <span>Aquatic Exercises</span>
        </label>
        <input v-if="data['prescription']['aquatic']['active']" type="text"
               v-model="data['prescription']['aquatic']['memo']"
               placeholder="Details" class="form-control form-control-sm ml-3">
    </div>

    <div class="my-2">
        <label class="m-0 width-200px d-inline-flex align-items-start">
            <input type="checkbox" v-model="data['prescription']['aerobic']['active']" class="mr-2">
            <span class="font-weight-bold text-secondary">Aerobic Activity</span>
        </label>
    </div>

    <div v-if="data['prescription']['aerobic']['active']" class="pl-3">
        <table class="table table-sm table-bordered mb-2 table-edit-sheet">
            <thead>
            <tr class="bg-light">
                <th class="px-2 text-secondary border-bottom-0 width-30px text-center"></th>
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Activity</th>
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Days / Week</th>
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Minutes / Day</th>
                <th class="px-2 text-secondary border-bottom-0">Intensity</th>
                <th class="px-2 text-secondary border-bottom-0 w-50">Details</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="px-2 align-middle">
                    <input type="checkbox" v-model="data['prescription']['aerobic']['walk']['active']" class="align-middle">
                </td>
                <td class="px-2 align-middle">Walk</td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['walk']['days_per_week']">
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['walk']['minutes_per_day']">
                </td>
                <td class="px-0 align-middle">
                    <select v-model="data['prescription']['aerobic']['walk']['intensity']" class="form-control form-control-sm">
                        <option value="">-- select --</option>
                        <option value="Light">Light</option>
                        <option value="Moderate">Moderate</option>
                        <option value="Vigorous">Vigorous</option>
                    </select>
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['walk']['memo']">
                </td>
            </tr>
            <tr>
                <td class="px-2 align-middle">
                    <input type="checkbox" v-model="data['prescription']['aerobic']['jog']['active']" class="align-middle">
                </td>
                <td class="px-2 align-middle">Jog</td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['jog']['days_per_week']">
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['jog']['minutes_per_day']">
                </td>
                <td class="px-0 align-middle">
                    <select v-model="data['prescription']['aerobic']['jog']['intensity']" class="form-control form-control-sm">
                        <option value="">-- select --</option>
                        <option value="Light">Light</option>
                        <option value="Moderate">Moderate</option>
                        <option value="Vigorous">Vigorous</option>
                    </select>
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['jog']['memo']">
                </td>
            </tr>
            <tr>
                <td class="px-2 align-middle">
                    <input type="checkbox" v-model="data['prescription']['aerobic']['elliptical']['active']" class="align-middle">
                </td>
                <td class="px-2 align-middle">Elliptical</td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['elliptical']['days_per_week']">
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['elliptical']['minutes_per_day']">
                </td>
                <td class="px-0 align-middle">
                    <select v-model="data['prescription']['aerobic']['elliptical']['intensity']" class="form-control form-control-sm">
                        <option value="">-- select --</option>
                        <option value="Light">Light</option>
                        <option value="Moderate">Moderate</option>
                        <option value="Vigorous">Vigorous</option>
                    </select>
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['elliptical']['memo']">
                </td>
            </tr>
            <tr>
                <td class="px-2 align-middle">
                    <input type="checkbox" v-model="data['prescription']['aerobic']['swim']['active']" class="align-middle">
                </td>
                <td class="px-2 align-middle">Swim</td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['swim']['days_per_week']">
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['swim']['minutes_per_day']">
                </td>
                <td class="px-0 align-middle">
                    <select v-model="data['prescription']['aerobic']['swim']['intensity']" class="form-control form-control-sm">
                        <option value="">-- select --</option>
                        <option value="Light">Light</option>
                        <option value="Moderate">Moderate</option>
                        <option value="Vigorous">Vigorous</option>
                    </select>
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['swim']['memo']">
                </td>
            </tr>
            <tr>
                <td class="px-2 align-middle">
                    <input type="checkbox" v-model="data['prescription']['aerobic']['bike']['active']" class="align-middle">
                </td>
                <td class="px-2 align-middle">Bike</td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['bike']['days_per_week']">
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['bike']['minutes_per_day']">
                </td>
                <td class="px-0 align-middle">
                    <select v-model="data['prescription']['aerobic']['bike']['intensity']" class="form-control form-control-sm">
                        <option value="">-- select --</option>
                        <option value="Light">Light</option>
                        <option value="Moderate">Moderate</option>
                        <option value="Vigorous">Vigorous</option>
                    </select>
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="data['prescription']['aerobic']['bike']['memo']">
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="mt-3 mb-2">
        <label class="m-0 d-inline-flex align-items-start">
            <input type="checkbox" v-model="data['prescription']['strength']['active']" class="mr-2">
            <span class="font-weight-bold text-secondary">Strength Training</span>
        </label>
        <a v-if="data['prescription']['strength']['active']"
           href="#" class="ml-3"
           v-on:click.prevent="data['prescription']['strength']['exercises'].push({name: '', days_per_week: '', reps: '', intensity: '', memo: ''})">
            + Add Exercise
        </a>
    </div>

    <div v-if="data['prescription']['strength']['active']" class="pl-3">
        <table class="table table-sm table-bordered mb-2 table-edit-sheet">
            <thead>
            <tr class="bg-light">
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Exercise</th>
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Days / Week</th>
                <th class="px-2 text-secondary border-bottom-0 width-100px text-nowrap">Reps</th>
                <th class="px-2 text-secondary border-bottom-0">Intensity</th>
                <th class="px-2 text-secondary border-bottom-0 w-35">Details</th>
                <th v-if="data['prescription']['strength']['exercises'].length > 1"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(exercise, exIndex) in data['prescription']['strength']['exercises']">
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="exercise.name">
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="exercise.days_per_week">
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="exercise.reps">
                </td>
                <td class="px-0 align-middle">
                    <select v-model="exercise.intensity" class="form-control form-control-sm">
                        <option value="">-- select --</option>
                        <option value="Light">Light</option>
                        <option value="Moderate">Moderate</option>
                        <option value="Vigorous">Vigorous</option>
                    </select>
                </td>
                <td class="px-0 align-middle">
                    <input type="text" class="form-control form-control-sm" v-model="exercise.memo">
                </td>
                <td class="px-2" v-if="data['prescription']['strength']['exercises'].length > 1" class="px-0 align-middle">
                    <a href="#" v-on:click.prevent="data['prescription']['strength']['exercises'].splice(exIndex, 1)"
                       class="on-hover-opaque text-danger mt-1 d-inline-block">
                        <i class="fa fa-trash-alt"></i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="mt-3 mb-2">
        <label class="m-0 d-inline-flex align-items-start">
            <input type="checkbox" v-model="data['prescription']['neat']['active']" class="mr-2">
            <span class="font-weight-bold text-secondary">Non-Exercise Activity Time (NEAT)</span>
        </label>
    </div>

    <div v-if="data['prescription']['neat']['active']" class="pl-3">

        <div class="mb-1 d-flex align-items-center">
            <label class="mb-0 mt-1 d-inline-flex align-items-start">
                <input type="checkbox" v-model="data['prescription']['neat']['recommendations']['park_farther']" class="mr-2">
                <span>Park farther away from entrances</span>
            </label>
        </div>

        <div class="mb-1 d-flex align-items-center">
            <label class="mb-0 mt-1 d-inline-flex align-items-start">
                <input type="checkbox" v-model="data['prescription']['neat']['recommendations']['steps_instead_of_elevator']" class="mr-2">
                <span>Take the stairs instead of escalator/elevator</span>
            </label>
        </div>

        <div class="mb-1 d-flex align-items-center">
            <label class="mb-0 mt-1 d-inline-flex align-items-start">
                <input type="checkbox" v-model="data['prescription']['neat']['recommendations']['stand_instead_of_sit']" class="mr-2">
                <span>Stand instead of sit</span>
            </label>
        </div>

        <div class="mt-2 mb-1 d-flex align-items-center">
            <label class="mb-2 mt-1 width-200px d-inline-flex align-items-start">
                <span>Steps goal / day:</span>
            </label>
            <input type="text"
                   v-model="data['prescription']['neat']['recommendations']['steps_goal_per_day']"
                   placeholder="Details" class="form-control form-control-sm ml-3">
        </div>

        <div class="mb-1 d-flex align-items-center">
            <label class="mb-2 mt-1 width-200px d-inline-flex align-items-start">
                <span>Other:</span>
            </label>
            <input type="text"
                   v-model="data['prescription']['neat']['recommendations']['other']"
                   placeholder="Details" class="form-control form-control-sm ml-3">
        </div>

    </div>

</div>
<script>
    (function() {
        function init() {
            window.clientPAUApp_{{$formID}} = new Vue({
                el: '#pauSection_{{$formID}}',
                data: {
                    data: <?= json_encode($contentData) ?>,
                },
                mounted: function() {
                    $('#pauSection_{{$formID}} [moe][initialized]').removeAttr('initialized');
                    initMoes();
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('#pauSection_{{$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-pau{{$formID}}', init, '#pauSection_{{$formID}}');
    })();
</script>
