<?php
$cdFormat = [
    "effectiveDate" => (@$note ? friendlier_date($note->effective_dateest) : date('Y-m-d')),
    "note_uid" => (@$note ? $note->uid : ''),
    "temperature" => [
        "value" => '',
        "baseline" => '',
        "deviceRemarks" => [
            "hasDevice" => null,
            "issues" => null,
            "other" => null,
        ]
    ],
    "bp" => [
        "valueSystolic" => '',
        "valueDiastolic" => '',
        "baselineSystolicMin" => '',
        "baselineSystolicMax" => '',
        "baselineDiastolicMin" => '',
        "baselineDiastolicMax" => '',
        "deviceRemarks" => [
            "hasDevice" => null,
            "issues" => null,
            "other" => null,
        ]
    ],
    "pulse" => [
        "value" => '',
        "baseline" => '',
        "deviceRemarks" => [
            "hasDevice" => null,
            "issues" => null,
            "other" => null,
        ]
    ],
    "spO2" => [
        "value" => '',
        "baseline" => '',
        "deviceRemarks" => [
            "hasDevice" => null,
            "issues" => null,
            "other" => null,
        ]
    ],
    "weight" => [
        "value" => '',
        "baselineMin" => '',
        "baselineMax" => '',
        "isCHF" => null,
        "deviceRemarks" => [
            "hasDevice" => null,
            "issues" => null,
            "other" => null,
        ]
    ],
    "height" => [
        "valueFeet" => '',
        "valueInches" => '',
        "baselineFeet" => '',
        "baselineInches" => '',
        "isCHF" => null,
        "deviceRemarks" => [
            "hasDevice" => null,
            "issues" => null,
            "other" => null,
        ]
    ],
    "other" => null,
];
if(!$contentData) {
    $contentData = $cdFormat;
}
else {
    foreach ($cdFormat as $k => $v) {
        if(!isset($contentData[$k])) {
            $contentData[$k] = $v;
        }
    }
}
$formID = rand(0, 100000);
?>
<div id="vitalsMay21Section">

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

    <table class="table table-sm table-bordered mb-2 table-edit-sheet">
        <thead class="bg-light text-secondary font-weight-bold">
        <tr>
            <th class="border-bottom-0">&nbsp;</th>
            <th class="border-bottom-0">Value ({{@$note ? friendlier_date($note->effective_dateest) : date('Y-m-d')}})</th>
            <th class="border-bottom-0">Baseline</th>
            <th class="border-bottom-0">Device Remarks</th>
        </tr>
        </thead>
        <tbody class="bg-white">
        <!--temp-->
        <tr>
            <td class="text-secondary font-weight-bold px-2 py-1 bg-white">Temperature</td>
            <td>
                <div class="px-2 text-sm text-secondary my-1">Value (℉)</div>
                <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.temperature.value">
            </td>
            <td>
                <div class="px-2 text-sm text-secondary my-1">Baseline (℉)</div>
                <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.temperature.baseline">
            </td>
            <td class="pt-1">
                <label class="d-flex align-items-center px-2">
                    <input type="checkbox" v-model="data.temperature.deviceRemarks.hasDevice">
                    <span class="py-1 ml-1">Has device at home?</span>
                </label>
                <div v-if="data.temperature.deviceRemarks.hasDevice">
                    <div class="text-sm text-secondary my-1 px-2">Any issues?</div>
                    <input class="form-control form-control-sm" type="text" v-model="data.temperature.deviceRemarks.issues">
                    <div class="text-sm text-secondary my-1 px-2">Other</div>
                    <input class="form-control form-control-sm border-bottom-0" type="text" v-model="data.temperature.deviceRemarks.other">
                </div>
            </td>
        </tr>

        <!--bp-->
        <tr>
            <td class="text-secondary font-weight-bold px-2 py-1 bg-white">BP</td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="w-50 border-right">
                        <div class="px-2 text-sm text-secondary my-1">Systolic (mmHg)</div>
                        <input class="form-control form-control-sm border-top" type="text" v-model="data.bp.valueSystolic">
                    </div>
                    <div class="w-50">
                        <div class="px-2 text-sm text-secondary my-1">Diastolic (mmHg)</div>
                        <input class="form-control form-control-sm border-top" type="text" v-model="data.bp.valueDiastolic">
                    </div>
                </div>
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="w-50 border-right">
                        <div class="px-2 text-sm text-secondary my-1">Systolic Min (mmHg)</div>
                        <input class="form-control form-control-sm border-top" type="text" v-model="data.bp.baselineSystolicMin">
                    </div>
                    <div class="w-50">
                        <div class="px-2 text-sm text-secondary my-1">Diastolic Min (mmHg)</div>
                        <input class="form-control form-control-sm border-top" type="text" v-model="data.bp.baselineDiastolicMin">
                    </div>
                </div>
                <div class="d-flex align-items-center mt-2">
                    <div class="w-50 border-right">
                        <div class="px-2 text-sm text-secondary my-1">Systolic Max (mmHg)</div>
                        <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.bp.baselineSystolicMax">
                    </div>
                    <div class="w-50">
                        <div class="px-2 text-sm text-secondary my-1">Diastolic Max (mmHg)</div>
                        <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.bp.baselineDiastolicMax">
                    </div>
                </div>
            </td>
            <td class="pt-1">
                <label class="d-flex align-items-center px-2">
                    <input type="checkbox" v-model="data.bp.deviceRemarks.hasDevice">
                    <span class="py-1 ml-1">Has device at home?</span>
                </label>
                <div v-if="data.bp.deviceRemarks.hasDevice">
                    <div class="text-sm text-secondary my-1 px-2">Any issues?</div>
                    <input class="form-control form-control-sm" type="text" v-model="data.bp.deviceRemarks.issues">
                    <div class="text-sm text-secondary my-1 px-2">Other</div>
                    <input class="form-control form-control-sm border-bottom-0" type="text" v-model="data.bp.deviceRemarks.other">
                </div>
            </td>
        </tr>

        <!--pulse-->
        <tr>
            <td class="text-secondary font-weight-bold px-2 py-1 bg-white">Pulse</td>
            <td>
                <div class="px-2 text-sm text-secondary my-1">Value (bpm)</div>
                <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.pulse.value">
            </td>
            <td>
                <div class="px-2 text-sm text-secondary my-1">Baseline (bpm)</div>
                <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.pulse.baseline">
            </td>
            <td class="pt-1">
                <label class="d-flex align-items-center px-2">
                    <input type="checkbox" v-model="data.pulse.deviceRemarks.hasDevice">
                    <span class="py-1 ml-1">Has device at home?</span>
                </label>
                <div v-if="data.pulse.deviceRemarks.hasDevice">
                    <div class="text-sm text-secondary my-1 px-2">Any issues?</div>
                    <input class="form-control form-control-sm" type="text" v-model="data.pulse.deviceRemarks.issues">
                    <div class="text-sm text-secondary my-1 px-2">Other</div>
                    <input class="form-control form-control-sm border-bottom-0" type="text" v-model="data.pulse.deviceRemarks.other">
                </div>
            </td>
        </tr>

        <!--spO2-->
        <tr>
            <td class="text-secondary font-weight-bold px-2 py-1 bg-white">SpO2</td>
            <td>
                <div class="px-2 text-sm text-secondary my-1">Value (%)</div>
                <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.spO2.value">
            </td>
            <td>
                <div class="px-2 text-sm text-secondary my-1">Baseline (%)</div>
                <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.spO2.baseline">
            </td>
            <td class="pt-1">
                <label class="d-flex align-items-center px-2">
                    <input type="checkbox" v-model="data.spO2.deviceRemarks.hasDevice">
                    <span class="py-1 ml-1">Has device at home?</span>
                </label>
                <div v-if="data.spO2.deviceRemarks.hasDevice">
                    <div class="text-sm text-secondary my-1 px-2">Any issues?</div>
                    <input class="form-control form-control-sm" type="text" v-model="data.spO2.deviceRemarks.issues">
                    <div class="text-sm text-secondary my-1 px-2">Other</div>
                    <input class="form-control form-control-sm border-bottom-0" type="text" v-model="data.spO2.deviceRemarks.other">
                </div>
            </td>
        </tr>

        <!--weight-->
        <tr>
            <td class="text-secondary font-weight-bold px-2 py-1 bg-white">Weight</td>
            <td>
                <div class="px-2 text-sm text-secondary my-1">Value (lbs)</div>
                <input class="form-control form-control-sm border-top" type="text" v-model="data.weight.value">
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="w-50 border-right">
                        <div class="px-2 text-sm text-secondary my-1">Baseline Min (lbs)</div>
                        <input class="form-control form-control-sm border-top" type="text" v-model="data.weight.baselineMin">
                    </div>
                    <div class="w-50">
                        <div class="px-2 text-sm text-secondary my-1">Baseline Max (lbs)</div>
                        <input class="form-control form-control-sm border-top" type="text" v-model="data.weight.baselineMax">
                    </div>
                </div>
                <label class="my-2 text-left px-2">
                    <input type="checkbox" v-model="data.weight.isCHF">
                    Is CHF?
                </label>
            </td>
            <td class="pt-1">
                <label class="d-flex align-items-center px-2">
                    <input type="checkbox" v-model="data.weight.deviceRemarks.hasDevice">
                    <span class="py-1 ml-1">Has device at home?</span>
                </label>
                <div v-if="data.weight.deviceRemarks.hasDevice">
                    <div class="text-sm text-secondary my-1 px-2">Any issues?</div>
                    <input class="form-control form-control-sm" type="text" v-model="data.weight.deviceRemarks.issues">
                    <div class="text-sm text-secondary my-1 px-2">Other</div>
                    <input class="form-control form-control-sm border-bottom-0" type="text" v-model="data.weight.deviceRemarks.other">
                </div>
            </td>
        </tr>

        <!--height-->
        <tr>
            <td class="text-secondary font-weight-bold px-2 py-1 bg-white">Height</td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="w-50 border-right">
                        <div class="px-2 text-sm text-secondary my-1">Feet</div>
                        <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.height.valueFeet">
                    </div>
                    <div class="w-50">
                        <div class="px-2 text-sm text-secondary my-1">Inches</div>
                        <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.height.valueInches">
                    </div>
                </div>
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="w-50 border-right">
                        <div class="px-2 text-sm text-secondary my-1">Baseline Feet</div>
                        <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.height.baselineFeet">
                    </div>
                    <div class="w-50">
                        <div class="px-2 text-sm text-secondary my-1">Baseline Inches</div>
                        <input class="form-control form-control-sm border-top border-bottom-0" type="text" v-model="data.height.baselineInches">
                    </div>
                </div>
            </td>
            <td class="pt-1">
                <label class="d-flex align-items-center px-2">
                    <input type="checkbox" v-model="data.height.deviceRemarks.hasDevice">
                    <span class="py-1 ml-1">Has device at home?</span>
                </label>
                <div v-if="data.height.deviceRemarks.hasDevice">
                    <div class="text-sm text-secondary my-1 px-2">Any issues?</div>
                    <input class="form-control form-control-sm" type="text" v-model="data.height.deviceRemarks.issues">
                    <div class="text-sm text-secondary my-1 px-2">Other</div>
                    <input class="form-control form-control-sm border-bottom-0" type="text" v-model="data.height.deviceRemarks.other">
                </div>
            </td>
        </tr>

        <!--other-->
        <tr>
            <td class="text-secondary font-weight-bold px-2 py-1 bg-white">Other</td>
            <td colspan="3"><input class="form-control form-control-sm" type="text" v-model="data.other"></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    (function() {
        function init() {
            window.clientVitalsMay21App = new Vue({
                el: '#vitalsMay21Section',
                data: {
                    data: <?= json_encode($contentData) ?>
                },
                mounted: function() {
                    // $(this.$el).closest('#vitalsMay21Section').find('[name="data"]').val(
                    //     JSON.stringify(this.cleanObject(this.data))
                    // );
                },
                watch: {
                    data: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('#vitalsMay21Section').find('[name="data"]').val(
                                JSON.stringify(this.cleanObject(this.data))
                            );
                        },
                        deep: true
                    },
                },
                computed: {
                    // bmi: function () {
                    //     let result = '';
                    //     let h = this.items.heightInInches, w = this.items.weightPounds;
                    //     if(!h || !w) {
                    //         return result;
                    //     }
                    //     h = h.value;
                    //     w = w.value;
                    //     try {
                    //         h = parseFloat(h);
                    //         w = parseFloat(w);
                    //         if(!h || !w) {
                    //             this.items.bmi.value = '';
                    //             return result;
                    //         }
                    //         let result = (w / [ h * h]) * 703;
                    //         return result.toFixed(1);
                    //     }
                    //     catch (e) {
                    //         return result;
                    //     }
                    // }
                },
                methods: {
                    cleanObject: function(_source) {
                        let plObject = {};
                        for (let y in _source) {
                            if(_source.hasOwnProperty(y)) {
                                plObject[y] = _source[y];
                            }
                        }
                        plObject.bmi = {
                            label: "BMI (kg/m²)",
                            value: this.bmi,
                            date: this.bmi ? this.today : '',
                        };
                        return plObject;
                    }
                }
            });
        }
        addMCInitializer('client-vitals-may21', init, '#vitalsMay21Section');
    })();
</script>
