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

$contentData = [
    "total_exercise" => 0,
    "days_exercise" => "",
    "min_exercise" => "",
    "completing_activities_difficult" => "",
    "completing_activities_difficult_yes" => "",
    "health_problems" => [],
    "activities_done" => "",
    "exercise_motivation" => [],
    "barriers_exercise" => [],
    "injuries_difficult" => "",
    "injuries_difficult_yes" => "",
    "bone_problems" => "",
    "bone_problems_yes" => "",
    "breathing_problems" => "",
    "breathing_problems_yes" => "",
    "balance_problems" => "",
    "balance_problems_yes" => ""
];

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

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

            <div id="edit-univ_sub_physical_activity_assessment-container">
                <p class="font-weight-bold my-3 font-size-14"><i>Exercise</i></p>
                <p><b>EXERCISE HABITS: AEROBIC/CARDIO TRAINING</b></p>
                <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-8">
                                During the average week, how many <b>days</b> do you exercise at a moderate to strenuous intensity (i.e. brisk walking or enough to break a light sweat)?
                            </div>
                            <div class="col-4">
                                <div class="d-flex">
                                    <input type="number" @change="calculateTotal" min="1" max="7" class="form-control mr-1 form-control-sm width-200px" v-model="data.days_exercise" value="">days
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <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-8">
                                During an average session, how many <b>minutes</b> do you exercise at a moderate to strenuous intensity (i.e. brisk walking or enough movement to break a light sweat)?
                            </div>
                            <div class="col-4">
                                <div class="d-flex">
                                    <input type="number" @change="calculateTotal" min="1" class="form-control mr-1 form-control-sm width-200px" v-model="data.min_exercise" value="">min
                                </div>
                                <span><b>@{{data.total_exercise}}</b> Total min/week (days x min)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <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-8">
                                List types of activities you do (i.e. weightlifting, Pilates, kettle ball, resistance machines, exercise bands, etc.):
                            </div>
                            <div class="col-4">
                                <input type="text" class="form-control form-control-sm width-200px" v-model="data.activities_done" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-6">
                        <p><b>What MOTIVATES you or would motivate you to exercise?</b> <em>Check top three</em></p>
                        <table class="table table-sm table-striped table-bordered m-0">
                            <tbody>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Nothing would motivate me"></td>
                                <td class="text-nowrap align-middle" colspan="2">Nothing would motivate me</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Control Blood glucose"></td>
                                <td class="text-nowrap align-middle" colspan="2">Control Blood glucose</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Decrease stress"></td>
                                <td class="text-nowrap align-middle" colspan="2">Decrease stress</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Increase self-esteem"></td>
                                <td class="text-nowrap align-middle" colspan="2">Increase self-esteem</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Family or partner"></td>
                                <td class="text-nowrap align-middle" colspan="2">Family or partner</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Body Image"></td>
                                <td class="text-nowrap align-middle" colspan="2">Body Image</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Prevent heart disease"></td>
                                <td class="text-nowrap align-middle" colspan="2">Prevent heart disease</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Improve mood"></td>
                                <td class="text-nowrap align-middle" colspan="2">Improve mood</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Increase Energy"></td>
                                <td class="text-nowrap align-middle" colspan="2">Increase Energy</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Prevent Bone loss"></td>
                                <td class="text-nowrap align-middle" colspan="2">Prevent Bone loss</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Weight reduction"></td>
                                <td class="text-nowrap align-middle" colspan="2">Weight reduction</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Reduce blood pressure"></td>
                                <td class="text-nowrap align-middle" colspan="2">Reduce blood pressure</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Improve sleep"></td>
                                <td class="text-nowrap align-middle" colspan="2">Improve sleep</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.exercise_motivation" value="Other"></td>
                                <td class="text-nowrap align-middle">Other</td>
                                <td class="p-0">
                                    <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none" type="text" v-model="data.exercise_motivation_other">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-6">
                        <p><b>Are there any BARRIERS or PROBLEMS that limit exercise?</b> <em>Check all that apply</em></p>
                        <table class="table table-sm table-striped table-bordered m-0">
                            <tbody>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="No barriers"></td>
                                <td class="text-nowrap align-middle" colspan="2">No barriers</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Life Transition Period"></td>
                                <td class="text-nowrap align-middle" colspan="2">Life Transition Period </td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Family Responsibility"></td>
                                <td class="text-nowrap align-middle" colspan="2">Family Responsibility</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Depression"></td>
                                <td class="text-nowrap align-middle" colspan="2">Depression </td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Time"></td>
                                <td class="text-nowrap align-middle" colspan="2">Time</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Apparel"></td>
                                <td class="text-nowrap align-middle" colspan="2">Apparel</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Work Responsibility"></td>
                                <td class="text-nowrap align-middle" colspan="2">Work Responsibility </td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Fear"></td>
                                <td class="text-nowrap align-middle" colspan="2">Fear</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Energy"></td>
                                <td class="text-nowrap align-middle" colspan="2">Energy</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Cost"></td>
                                <td class="text-nowrap align-middle" colspan="2">Cost</td>
                            </tr>
                            <tr>
                                <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.barriers_exercise" value="Other"></td>
                                <td class="text-nowrap align-middle" colspan="2">Other</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <p><b>EXERCISE SAFETY</b></p>
                <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">
                                Do you have any injuries that would make it difficult to exercise?
                            </div>
                            <div class="col-6">
                                <select class="form-control form-control-sm width-200px" v-model="data.injuries_difficult">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                                <label v-if="data.injuries_difficult == 'Yes'" class="mt-2">If yes, please explain:</label>
                                <input type="text" class="form-control form-control-sm width-200px" v-if="data.injuries_difficult == 'Yes'" v-model="data.injuries_difficult_yes" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <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">
                                Do you have any joint, muscle, or bone problems that might get worse with exercise?
                            </div>
                            <div class="col-6">
                                <select class="form-control form-control-sm width-200px" v-model="data.bone_problems">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                                <label v-if="data.bone_problems == 'Yes'" class="mt-2">If yes, please explain:</label>
                                <input type="text" class="form-control form-control-sm width-200px" v-if="data.bone_problems == 'Yes'" v-model="data.bone_problems_yes" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <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">
                                Do you have any breathing problems while exercising?
                            </div>
                            <div class="col-6">
                                <select class="form-control form-control-sm width-200px" v-model="data.breathing_problems">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                                <label v-if="data.breathing_problems == 'Yes'" class="mt-2">If yes, please explain:</label>
                                <input type="text" class="form-control form-control-sm width-200px" v-if="data.breathing_problems == 'Yes'" v-model="data.breathing_problems_yes" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <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">
                                Do you have any balance problems or have had a fall in the last 6 months?
                            </div>
                            <div class="col-6">
                                <select class="form-control form-control-sm width-200px" v-model="data.balance_problems">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                                <label v-if="data.balance_problems == 'Yes'" class="mt-2">If yes, please explain:</label>
                                <input type="text" class="form-control form-control-sm width-200px" v-if="data.balance_problems == 'Yes'" v-model="data.balance_problems_yes" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <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">
                                Do you have any difficulty completing your activities of daily living (i.e. showering, dressing, toileting)?
                            </div>
                            <div class="col-6">
                                <select class="form-control form-control-sm width-200px" v-model="data.completing_activities_difficult">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                                <label v-if="data.completing_activities_difficult == 'Yes'" class="mt-2">If yes, please explain:</label>
                                <input type="text" class="form-control form-control-sm width-200px" v-if="data.completing_activities_difficult == 'Yes'" v-model="data.completing_activities_difficult_yes" value="">
                            </div>
                        </div>
                    </div>
                </div>

                <p><b>Do you have any of the following health problems? Check all that apply</b></p>
                <table class="table table-sm table-striped table-bordered m-0">
                    <tbody>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Arrhythmia or irregular heartbeat"></td>
                        <td class="text-nowrap align-middle" colspan="2">Arrhythmia or irregular heartbeat </td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Arthritis or significant joint pain"></td>
                        <td class="text-nowrap align-middle" colspan="2">Arthritis or significant joint pain </td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Chest pain/angina"></td>
                        <td class="text-nowrap align-middle" colspan="2">Chest pain/angina</td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Uncontrolled diabetes"></td>
                        <td class="text-nowrap align-middle" colspan="2">Uncontrolled diabetes</td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Severe or uncontrolled heart failure"></td>
                        <td class="text-nowrap align-middle" colspan="2">Severe or uncontrolled heart failure</td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Uncontrolled asthma"></td>
                        <td class="text-nowrap align-middle" colspan="2">Uncontrolled asthma</td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Recent heart attack"></td>
                        <td class="text-nowrap align-middle" colspan="2">Recent heart attack</td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Chronic or unusual fatigue/tiredness"></td>
                        <td class="text-nowrap align-middle" colspan="2">Chronic or unusual fatigue/tiredness </td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Difficulty breathing with activity"></td>
                        <td class="text-nowrap align-middle" colspan="2">Difficulty breathing with activity</td>
                    </tr>
                    <tr>
                        <td class="text-nowrap align-middle width-40px text-center"><input type="checkbox" class="m-0" v-model="data.health_problems" value="Other"></td>
                        <td class="text-nowrap align-middle" colspan="2">Other</td>
                    </tr>
                    </tbody>
                </table>

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

            </div>

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

                            // autosave on change
                            autoSaveSegment(parent.find('[submit]').first());
                        },
                        deep: true
                    }
                },
                methods: {
                    calculateTotal: function() {
                        var days = !isNaN(parseInt(this.data.days_exercise)) ? parseInt(this.data.days_exercise) : 0;
                        var min = !isNaN(parseInt(this.data.min_exercise)) ? parseInt(this.data.min_exercise) : 0;
                        this.data.total_exercise = days * min;
                    },
                    saveForm: function() {
                        let parent = $('#edit-univ_sub_physical_activity_assessment-container').closest('form');
                        parent.find('[name="data"]').val(JSON.stringify(this.data));
                        autoSaveSegmentAndClose(parent.find('[submit]').first());
                    }
                }
            });
        };
    })();
</script>