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

$contentData = [
    "current_overall_health_level" => '',
    "sleep" => '',
    "weight_management" => '',
    "nutrition" => '',
    "exercise" => '',
    "purpose_and_connection" => '',
    "mental_health" => '',
    "substance_use" => '',
    "how_important_rank_1_area" => '',
    "how_confident_rank_1_area" => '',
    "how_important_rank_2_area" => '',
    "how_confident_rank_2_area" => '',
    "how_important_rank_3_area" => '',
    "how_confident_rank_3_area" => '',
    "visit_gains" => [],
    "gain_other_description" => '',
];

$point = Point::getGlobalSingletonOfCategory($patient, 'LIFESTYLE_GENERAL', 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_GENERAL">
            <input type="hidden" name="data">

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

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

                <div class="row">

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">a.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Please circle your current overall <b>LEVEL OF HEALTH</b>
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.current_overall_health_level">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">b.</div>
                            <div class="flex-grow-1">
                                <div class="row mb-2">
                                    <div class="col-12">
                                        Please rank the top <b>3 areas</b> you would like to improve with 1 being the most important and
                                        3 the least important
                                    </div>
                                </div>
                                <table class="table table-sm width-300px table-striped table-bordered m-0">
                                    <tbody>
                                    <tr>
                                        <td class="text-nowrap align-middle">Sleep</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.sleep">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Weight Management</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.weight_management">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Nutrition</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.nutrition">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Exercise</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.exercise">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Purpose &amp; Connection</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.purpose_and_connection">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Mental Health</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.mental_health">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-nowrap align-middle">Substance Use</td>
                                        <td class="p-0">
                                            <input class="form-control form-control-sm min-width-unset border-0 rounded-0 shadow-none"
                                                   type="number" min="1" max="3" v-model="data.substance_use">
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">c.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How <b>IMPORTANT</b> is it for you to make the change you ranked as
                                        the <b>#1</b> most motivated topic area to address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_important_rank_1_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">d.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How <b>CONFIDENT</b> are you regarding your ability to make the
                                        change you ranked as the <b>#1</b> most motivated topic area to
                                        address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_confident_rank_1_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">e.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How <b>IMPORTANT</b> is it for you to make the change you ranked as
                                        the <b>#2</b> most motivated topic area to address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_important_rank_2_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">f.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How <b>CONFIDENT</b> are you regarding your ability to make the
                                        change you ranked as the <b>#2</b> most motivated topic area to
                                        address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_confident_rank_2_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">g.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How <b>IMPORTANT</b> is it for you to make the change you ranked as
                                        the <b>#3</b> most motivated topic area to address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_important_rank_3_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">h.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        How <b>CONFIDENT</b> are you regarding your ability to make the
                                        change you ranked as the <b>#3</b> most motivated topic area to
                                        address?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.how_confident_rank_3_area">
                                            <option value="0">0 - Lowest</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10 - Highest</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">i.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-12">
                                        <div>
                                            <b>What would you like to gain from this lifestyle visit?</b> Check all that apply
                                        </div>
                                        <div class="mt-2">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox"
                                                       id="more_medical_scientific_knowledge"
                                                       value="more_medical_scientific_knowledge" v-model="data.visit_gains">
                                                <label class="form-check-label" for="more_medical_scientific_knowledge">More medical/scientific
                                                    knowledge</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox"
                                                       id="practical_health_tips"
                                                       value="practical_health_tips" v-model="data.visit_gains">
                                                <label class="form-check-label" for="practical_health_tips">Practical health tips</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="accountability"
                                                       value="accountability" v-model="data.visit_gains">
                                                <label class="form-check-label" for="accountability">Accountability</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox"
                                                       id="personalized_plan"
                                                       value="personalized_plan" v-model="data.visit_gains">
                                                <label class="form-check-label" for="personalized_plan">Personalized Plan</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="other"
                                                       value="other"
                                                       v-model="data.visit_gains">
                                                <label class="form-check-label" for="other">Other</label>
                                            </div>

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

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

                </div>

                <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_lifestyle_general-container',
                delimiters: ["@{{","}}"],
                data: {
                    data: <?= json_encode($contentData) ?>
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            let parent = $('#edit-univ_sub_lifestyle_general-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_lifestyle_general-container').closest('form');
                        parent.find('[name="data"]').val(JSON.stringify(this.data));
                        autoSaveSegmentAndClose(parent.find('[submit]').first());
                    }
                }
            });
        };
    })();
</script>
