Merge branch 'dev' into dev-vj

public/css/style.css

@@ -3152,4 +3152,18 @@ body.forced-masking #mask {
 .mcp-theme-1 input[type="checkbox"][toggle][disabled] {
     opacity: 0.5;
     cursor: not-allowed;
+}
+.inline-input-underlined {
+    border: none;
+    border-bottom: 1px solid #ced4da;
+    padding: 0;
+    text-align: center;
+    font-weight: bold;
+}
+.inline-input-underlined:focus {
+    outline: none;
+    box-shadow: none;
+}
+.inline-input-underlined.width-50 {
+    width: 50px;
 }

resources/views/app/patient/vitals-settings/bp-management-form.blade.php

@@ -4,171 +4,145 @@
         <input type="hidden" name="uid" value="{{$patient->uid}}">
         <p class="text-secondary font-weight-bold font-size-14">BP Management</p>
 
-        <div class="row mx-0">
-            <div class="col-6 pl-0 pr-2 border-right">
-                <div class="text-secondary font-weight-bold mb-3">Usual BP:</div>
-                <div class="pl-3 mb-2">
-                    <div class="text-secondary font-weight-bold mb-2">
-                        <i class="fa fa-sun"></i>
-                        AM
-                    </div>
-                    <div class="pl-3">
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">SBP:</span>
-                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-                            <div class="width-70px mr-2"><?= vsElement('usual_am_resting_sbp_min', 'number', 'usualAmRestingSbpMin', $patient) ?></div>
-                            <span class="text-secondary mr-2">and</span>
-                            <div class="width-70px"><?= vsElement('usual_am_resting_sbp_max', 'number', 'usualAmRestingSbpMax', $patient) ?></div>
-                        </div>
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">DBP:</span>
-                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-                            <div class="width-70px mr-2"><?= vsElement('usual_am_resting_dbp_min', 'number', 'usualAmRestingDbpMin', $patient) ?></div>
-                            <span class="text-secondary mr-2">and</span>
-                            <div class="width-70px"><?= vsElement('usual_am_resting_dbp_max', 'number', 'usualAmRestingDbpMax', $patient) ?></div>
-                        </div>
-                        <div class="mb-1 d-flex align-items-center">
-                            <span class="text-secondary width-70px">Pulse:</span>
-                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-                            <div class="width-70px mr-2"><?= vsElement('usual_am_resting_pulse_min', 'number', 'usualAmRestingPulseMin', $patient) ?></div>
-                            <span class="text-secondary mr-2">and</span>
-                            <div class="width-70px"><?= vsElement('usual_am_resting_pulse_max', 'number', 'usualAmRestingPulseMax', $patient) ?></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="pl-3 mb-3">
-                    <div class="text-secondary font-weight-bold mb-2">
-                        <i class="fa fa-moon"></i>
-                        PM
-                    </div>
-                    <div class="pl-3">
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">SBP:</span>
-                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-                            <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_sbp_min', 'number', 'usualPmRestingSbpMin', $patient) ?></div>
-                            <span class="text-secondary mr-2">and</span>
-                            <div class="width-70px"><?= vsElement('usual_pm_resting_sbp_max', 'number', 'usualPmRestingSbpMax', $patient) ?></div>
-                        </div>
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">DBP:</span>
-                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-                            <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_dbp_min', 'number', 'usualPmRestingDbpMin', $patient) ?></div>
-                            <span class="text-secondary mr-2">and</span>
-                            <div class="width-70px"><?= vsElement('usual_pm_resting_dbp_max', 'number', 'usualPmRestingDbpMax', $patient) ?></div>
-                        </div>
-                        <div class="mb-1 d-flex align-items-center">
-                            <span class="text-secondary width-70px">Pulse:</span>
-                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-                            <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_pulse_min', 'number', 'usualPmRestingPulseMin', $patient) ?></div>
-                            <span class="text-secondary mr-2">and</span>
-                            <div class="width-70px"><?= vsElement('usual_pm_resting_pulse_max', 'number', 'usualPmRestingPulseMax', $patient) ?></div>
-                        </div>
-                    </div>
-                </div>
-                <hr class="my-3">
+        <div id="bpManagementComponent" class="row mx-0" v-cloak>
+            <div class="col-7 border-right">
+                <div class="text-secondary font-weight-bold mb-3">Blood Pressure & Pulse:</div>
+                <div class="pl-3">
+                    <h6 class="text-secondary mb-3"><b>Usual:</b></h6>
+                    <div class="d-flex pl-3">
+                        <div class="d-flex flex-column">
+                            <div v-if="form.doesUsualBpHaveAmPmVariation" class="text-secondary font-weight-bold mb-2">
+                                <i class="fa fa-sun mr-2"></i>AM
+                            </div>
+                            <div class="d-flex align-items-center mb-3">
+                                <h6 v-if="form.doesUsualBpHaveRange" class="mb-0 mr-3">LOWEST:</h6>
+                                <h6 class="mb-0 mr-3">BP:</h6>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" value="{{ $patient->usual_am_resting_sbp_min }}" />
+                                <span>/</span>
+                                <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMin" value="{{ $patient->usual_am_resting_dbp_min }}" />
+                                <span>mm Hg Pulse:</span>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" value="{{ $patient->usual_am_resting_pulse_min }}" />
+                                <span>BPM</span>
+                            </div>
 
-                <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
-                <div class="pl-3 mb-3">
-                    <div class="pl-3">
-                        <div class="mb-1 d-flex align-items-center">
-                            <span class="text-secondary min-width-70px">SBP:</span>
-                            <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_sbp', 'number', 'idealAmRestingSbp', $patient) ?></div>
-                            <span class="text-secondary">Goal: &nbsp;</span>
-                            <div class="flex-grow-1">
-                                <select class="form-control form-control-sm min-width-unset rounded-0" name="sbpManagementGoalCategory">
-                                    <option value="">-- select --</option>
-                                    <option {{$patient->sbp_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
-                                    <option {{$patient->sbp_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
-                                    <option {{$patient->sbp_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
-                                </select>
+                            <div v-if="form.doesUsualBpHaveRange" class="d-flex align-items-center mb-3">
+                                <h6 class="mb-0 mr-3">HIGHEST:</h6>
+                                <h6 class="mb-0 mr-3">BP:</h6>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMax" value="{{ $patient->usual_am_resting_sbp_max }}" />
+                                <span>/</span>
+                                <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
+                                <span>mm Hg Pulse:</span>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" />
+                                <span>BPM</span>
                             </div>
-                        </div>
-                        <div class="mb-1 d-flex align-items-center">
-                            <span class="text-secondary min-width-70px">DBP:</span>
-                            <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_dbp', 'number', 'idealAmRestingDbp', $patient) ?></div>
-                            <span class="text-secondary">Goal: &nbsp;</span>
-                            <div class="flex-grow-1">
-                                <select class="form-control form-control-sm min-width-unset rounded-0" name="dbpManagementGoalCategory">
-                                    <option value="">-- select --</option>
-                                    <option {{$patient->dbp_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
-                                    <option {{$patient->dbp_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
-                                    <option {{$patient->dbp_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
-                                </select>
+
+                            <div v-if="form.doesUsualBpHaveAmPmVariation">
+                                <!-- Moon -->
+                                <div class="text-secondary font-weight-bold mb-2">
+                                    <i class="fa fa-moon mr-2"></i>PM
+                                </div>
+                                <div class="d-flex align-items-center mb-3">
+                                    <h6 v-if="form.doesUsualBpHaveRange" class="mb-0 mr-3">LOWEST:</h6>
+                                    <h6 class="mb-0 mr-3">BP:</h6>
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMin" value="{{ $patient->usual_pm_resting_sbp_min }}" />
+                                    <span>/</span>
+                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
+                                    <span>mm Hg Pulse:</span>
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" />
+                                    <span>BPM</span>
+                                </div>
+                                <div v-if="form.doesUsualBpHaveRange" class="d-flex align-items-center mb-3">
+                                    <h6 class="mb-0 mr-3">HIGHEST:</h6>
+                                    <h6 class="mb-0 mr-3">BP:</h6>
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMax" value="{{ $patient->usual_pm_resting_sbp_max }}" />
+                                    <span>/</span>
+                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMax" value="{{ $patient->usual_pm_resting_dbp_max }}" />
+                                    <span>mm Hg Pulse:</span>
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMax" value="{{ $patient->usual_pm_resting_pulse_max }}" />
+                                    <span>BPM</span>
+                                </div>
+
                             </div>
-                        </div>
-                        <div class="mb-1 d-flex align-items-center">
-                            <span class="text-secondary min-width-70px">Pulse:</span>
-                            <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_pulse', 'number', 'idealAmRestingPulse', $patient) ?></div>
-                            <span class="text-secondary">Goal: &nbsp;</span>
-                            <div class="flex-grow-1">
-                                <select class="form-control form-control-sm min-width-unset rounded-0" name="pulseManagementGoalCategory">
-                                    <option value="">-- select --</option>
-                                    <option {{$patient->pulse_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
-                                    <option {{$patient->pulse_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
-                                    <option {{$patient->pulse_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
-                                </select>
+
+                            <div>
+                                <div class="form-check mb-2">
+                                    <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
+                                    <label class="form-check-label" for="amPmVariation">AM/PM Variation</label>
+                                </div>
+                                <div class="form-check">
+                                    <input type="checkbox" class="form-check-input" id="bpRange" name="doesUsualBpHaveRange" v-model="form.doesUsualBpHaveRange">
+                                    <label class="form-check-label" for="bpRange">Range</label>
+                                </div>
                             </div>
+
                         </div>
                     </div>
-                </div>
-                <hr class="my-3">
-            </div>
-            <div class="col-6 pr-0 pl-2">
-                <div class="text-secondary font-weight-bold mb-3">Alerts</div>
-                <div class="pl-3 mb-3">
-                    <div class="text-secondary font-weight-bold mb-2">
-                        <i class="fa fa-circle text-danger"></i>
-                        Red
-                    </div>
-                    <div class="pl-3">
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">SBP: </span>
-                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"> <?= vsElement('red_alert_when_sbp_above', 'number', 'redAlertWhenSbpAbove', $patient) ?></div>
-                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
-                            <div class="width-70px"><?= vsElement('red_alert_when_sbp_below', 'number', 'redAlertWhenSbpBelow', $patient) ?></div>
-                        </div>
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">DBP: </span>
-                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"> <?= vsElement('red_alert_when_dbp_above', 'number', 'redAlertWhenDbpAbove', $patient) ?></div>
-                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
-                            <div class="width-70px"><?= vsElement('red_alert_when_dbp_below', 'number', 'redAlertWhenDbpBelow', $patient) ?></div>
-                        </div>
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">Pulse: </span>
-                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('red_alert_when_pulse_above', 'number', 'redAlertWhenPulseAbove', $patient) ?></div>
-                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
-                            <div class="width-70px"><?= vsElement('red_alert_when_pulse_below', 'number', 'redAlertWhenPulseBelow', $patient) ?></div>
+                    
+                    <hr class="my-3">
+                    <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
+                    <div class="pl-3 mb-3">
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Target:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingSbpMin" value="{{ $patient->ideal_am_resting_sbp_min }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="idealAmRestingDbpMin" value="{{ $patient->ideal_am_resting_dbp_min }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" />
+                            <span>BPM</span>
                         </div>
                     </div>
-                </div>
-                <div class="pl-3 mb-2">
-                    <div class="text-secondary font-weight-bold mb-2">
-                        <i class="fa fa-circle text-warning-mellow"></i>
-                        Yellow
-                    </div>
-                    <div class="pl-3">
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">SBP: </span>
-                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_sbp_above', 'number', 'yellowAlertWhenSbpAbove', $patient) ?></div>
-                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
-                            <div class="width-70px"><?= vsElement('yellow_alert_when_sbp_below', 'number', 'yellowAlertWhenSbpBelow', $patient) ?></div>
+                    <hr class="my-3">
+                    <div class="text-secondary font-weight-bold mb-3">Alerts</div>
+                    <div class="pl-3 mb-3">
+                        <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-danger mr-2"></i>Red</div>
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Above:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpAbove" value="{{ $patient->red_alert_when_sbp_above }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpAbove" value="{{ $patient->red_alert_when_dbp_above }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseAbove" value="{{ $patient->red_alert_when_pulse_above }}" />
+                            <span>BPM</span>
                         </div>
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">DBP: </span>
-                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_dbp_above', 'number', 'yellowAlertWhenDbpAbove', $patient) ?></div>
-                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
-                            <div class="width-70px"><?= vsElement('yellow_alert_when_dbp_below', 'number', 'yellowAlertWhenDbpBelow', $patient) ?></div>
-                        </div>
-                        <div class="mb-2 d-flex align-items-center">
-                            <span class="text-secondary width-70px">Pulse: </span>
-                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_pulse_above', 'number', 'yellowAlertWhenPulseAbove', $patient) ?></div>
-                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
-                            <div class="width-70px"><?= vsElement('yellow_alert_when_pulse_below', 'number', 'yellowAlertWhenPulseBelow', $patient) ?></div>
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Below:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpBelow" value="{{ $patient->red_alert_when_sbp_below }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpBelow" value="{{ $patient->red_alert_when_dbp_below }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
+                            <span>BPM</span>
+                        </div> 
+                    </div>
+                    <div class="pl-3 mb-3">
+                        <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-warning-mellow mr-2"></i>Yellow</div>
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Above:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpAbove" value="{{ $patient->yellow_alert_when_sbp_above }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpAbove" value="{{ $patient->yellow_alert_when_dbp_above }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseAbove" value="{{ $patient->yellow_alert_when_pulse_above }}" />
+                            <span>BPM</span>
                         </div>
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Below:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpBelow" value="{{ $patient->yellow_alert_when_sbp_below }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpBelow" value="{{ $patient->yellow_alert_when_dbp_below }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
+                            <span>BPM</span>
+                        </div> 
                     </div>
                 </div>
-                <hr class="my-3">
-
+            </div>
+            <div class="col-5">
                 <div class="mb-2 d-flex align-items-start">
                     <span class="text-secondary min-width-140px w-50">Reports prehypertension?</span>
                     <div class="w-50">
@@ -279,6 +253,24 @@
     </form>
 </div>
 <script>
+    var doesUsualBpHaveAmPmVariation = <?= $patient->does_usual_bp_have_am_pm_variation ? 1:0 ?>;
+    var doesUsualBpHaveRange = <?= $patient->does_usual_bp_have_range ? 1:0 ?>;
+    // BP Management
+    var BPManagementComponent = new Vue({
+        el:'#bpManagementComponent',
+        data:{
+            form:{
+                doesUsualBpHaveAmPmVariation: parseInt(doesUsualBpHaveAmPmVariation),
+                doesUsualBpHaveRange: parseInt(doesUsualBpHaveRange)
+            }
+        },
+        methods:{
+            
+            init: function(){
+                console.log({form:this.form});
+            }
+        }
+    });
     (function() {
 
         function initICDAutoSuggest(_codeElem, _descElem) {
@@ -306,6 +298,7 @@
             // for (let i = 1; i <= 4; i++) {
             //     initICDAutoSuggest($('[name="whyIsBpMonitoringNeededIcd' + i + '"]'), $('[name="whyIsBpMonitoringNeededDescription' + i + '"]'));
             // }
+            BPManagementComponent.init();
         }
 
         addMCInitializer('bp-management-settings', init, '#bp-management-settings');

resources/views/app/patient/vitals-settings/bp-management-form_depricated.blade.php

@@ -0,0 +1,314 @@
+<div moe extra-huge id="bp-management-settings">
+    <a href="#" start show>Update</a>
+    <form url="/api/client/updateBpManagementSettingsValue">
+        <input type="hidden" name="uid" value="{{$patient->uid}}">
+        <p class="text-secondary font-weight-bold font-size-14">BP Management</p>
+
+        <div class="row mx-0">
+            <div class="col-6 pl-0 pr-2 border-right">
+                <div class="text-secondary font-weight-bold mb-3">Usual BP:</div>
+                <div class="pl-3 mb-2">
+                    <div class="text-secondary font-weight-bold mb-2">
+                        <i class="fa fa-sun"></i>
+                        AM
+                    </div>
+                    <div class="pl-3">
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">SBP:</span>
+                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
+                            <div class="width-70px mr-2"><?= vsElement('usual_am_resting_sbp_min', 'number', 'usualAmRestingSbpMin', $patient) ?></div>
+                            <span class="text-secondary mr-2">and</span>
+                            <div class="width-70px"><?= vsElement('usual_am_resting_sbp_max', 'number', 'usualAmRestingSbpMax', $patient) ?></div>
+                        </div>
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">DBP:</span>
+                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
+                            <div class="width-70px mr-2"><?= vsElement('usual_am_resting_dbp_min', 'number', 'usualAmRestingDbpMin', $patient) ?></div>
+                            <span class="text-secondary mr-2">and</span>
+                            <div class="width-70px"><?= vsElement('usual_am_resting_dbp_max', 'number', 'usualAmRestingDbpMax', $patient) ?></div>
+                        </div>
+                        <div class="mb-1 d-flex align-items-center">
+                            <span class="text-secondary width-70px">Pulse:</span>
+                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
+                            <div class="width-70px mr-2"><?= vsElement('usual_am_resting_pulse_min', 'number', 'usualAmRestingPulseMin', $patient) ?></div>
+                            <span class="text-secondary mr-2">and</span>
+                            <div class="width-70px"><?= vsElement('usual_am_resting_pulse_max', 'number', 'usualAmRestingPulseMax', $patient) ?></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pl-3 mb-3">
+                    <div class="text-secondary font-weight-bold mb-2">
+                        <i class="fa fa-moon"></i>
+                        PM
+                    </div>
+                    <div class="pl-3">
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">SBP:</span>
+                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
+                            <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_sbp_min', 'number', 'usualPmRestingSbpMin', $patient) ?></div>
+                            <span class="text-secondary mr-2">and</span>
+                            <div class="width-70px"><?= vsElement('usual_pm_resting_sbp_max', 'number', 'usualPmRestingSbpMax', $patient) ?></div>
+                        </div>
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">DBP:</span>
+                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
+                            <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_dbp_min', 'number', 'usualPmRestingDbpMin', $patient) ?></div>
+                            <span class="text-secondary mr-2">and</span>
+                            <div class="width-70px"><?= vsElement('usual_pm_resting_dbp_max', 'number', 'usualPmRestingDbpMax', $patient) ?></div>
+                        </div>
+                        <div class="mb-1 d-flex align-items-center">
+                            <span class="text-secondary width-70px">Pulse:</span>
+                            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
+                            <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_pulse_min', 'number', 'usualPmRestingPulseMin', $patient) ?></div>
+                            <span class="text-secondary mr-2">and</span>
+                            <div class="width-70px"><?= vsElement('usual_pm_resting_pulse_max', 'number', 'usualPmRestingPulseMax', $patient) ?></div>
+                        </div>
+                    </div>
+                </div>
+                <hr class="my-3">
+
+                <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
+                <div class="pl-3 mb-3">
+                    <div class="pl-3">
+                        <div class="mb-1 d-flex align-items-center">
+                            <span class="text-secondary min-width-70px">SBP:</span>
+                            <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_sbp', 'number', 'idealAmRestingSbp', $patient) ?></div>
+                            <span class="text-secondary">Goal: &nbsp;</span>
+                            <div class="flex-grow-1">
+                                <select class="form-control form-control-sm min-width-unset rounded-0" name="sbpManagementGoalCategory">
+                                    <option value="">-- select --</option>
+                                    <option {{$patient->sbp_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
+                                    <option {{$patient->sbp_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
+                                    <option {{$patient->sbp_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="mb-1 d-flex align-items-center">
+                            <span class="text-secondary min-width-70px">DBP:</span>
+                            <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_dbp', 'number', 'idealAmRestingDbp', $patient) ?></div>
+                            <span class="text-secondary">Goal: &nbsp;</span>
+                            <div class="flex-grow-1">
+                                <select class="form-control form-control-sm min-width-unset rounded-0" name="dbpManagementGoalCategory">
+                                    <option value="">-- select --</option>
+                                    <option {{$patient->dbp_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
+                                    <option {{$patient->dbp_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
+                                    <option {{$patient->dbp_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="mb-1 d-flex align-items-center">
+                            <span class="text-secondary min-width-70px">Pulse:</span>
+                            <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_pulse', 'number', 'idealAmRestingPulse', $patient) ?></div>
+                            <span class="text-secondary">Goal: &nbsp;</span>
+                            <div class="flex-grow-1">
+                                <select class="form-control form-control-sm min-width-unset rounded-0" name="pulseManagementGoalCategory">
+                                    <option value="">-- select --</option>
+                                    <option {{$patient->pulse_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
+                                    <option {{$patient->pulse_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
+                                    <option {{$patient->pulse_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <hr class="my-3">
+            </div>
+            <div class="col-6 pr-0 pl-2">
+                <div class="text-secondary font-weight-bold mb-3">Alerts</div>
+                <div class="pl-3 mb-3">
+                    <div class="text-secondary font-weight-bold mb-2">
+                        <i class="fa fa-circle text-danger"></i>
+                        Red
+                    </div>
+                    <div class="pl-3">
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">SBP: </span>
+                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"> <?= vsElement('red_alert_when_sbp_above', 'number', 'redAlertWhenSbpAbove', $patient) ?></div>
+                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
+                            <div class="width-70px"><?= vsElement('red_alert_when_sbp_below', 'number', 'redAlertWhenSbpBelow', $patient) ?></div>
+                        </div>
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">DBP: </span>
+                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"> <?= vsElement('red_alert_when_dbp_above', 'number', 'redAlertWhenDbpAbove', $patient) ?></div>
+                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
+                            <div class="width-70px"><?= vsElement('red_alert_when_dbp_below', 'number', 'redAlertWhenDbpBelow', $patient) ?></div>
+                        </div>
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">Pulse: </span>
+                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('red_alert_when_pulse_above', 'number', 'redAlertWhenPulseAbove', $patient) ?></div>
+                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
+                            <div class="width-70px"><?= vsElement('red_alert_when_pulse_below', 'number', 'redAlertWhenPulseBelow', $patient) ?></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pl-3 mb-2">
+                    <div class="text-secondary font-weight-bold mb-2">
+                        <i class="fa fa-circle text-warning-mellow"></i>
+                        Yellow
+                    </div>
+                    <div class="pl-3">
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">SBP: </span>
+                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_sbp_above', 'number', 'yellowAlertWhenSbpAbove', $patient) ?></div>
+                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
+                            <div class="width-70px"><?= vsElement('yellow_alert_when_sbp_below', 'number', 'yellowAlertWhenSbpBelow', $patient) ?></div>
+                        </div>
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">DBP: </span>
+                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_dbp_above', 'number', 'yellowAlertWhenDbpAbove', $patient) ?></div>
+                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
+                            <div class="width-70px"><?= vsElement('yellow_alert_when_dbp_below', 'number', 'yellowAlertWhenDbpBelow', $patient) ?></div>
+                        </div>
+                        <div class="mb-2 d-flex align-items-center">
+                            <span class="text-secondary width-70px">Pulse: </span>
+                            <span class="text-secondary text-sm mr-2">above</span> <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_pulse_above', 'number', 'yellowAlertWhenPulseAbove', $patient) ?></div>
+                            <span class="text-secondary text-sm text-nowrap mr-2">or below</span>
+                            <div class="width-70px"><?= vsElement('yellow_alert_when_pulse_below', 'number', 'yellowAlertWhenPulseBelow', $patient) ?></div>
+                        </div>
+                    </div>
+                </div>
+                <hr class="my-3">
+
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Reports prehypertension?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="hasPrehypertensionDx">
+                            <option value="">-- select --</option>
+                            <option {{$patient->has_prehypertension_dx === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->has_prehypertension_dx === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->has_prehypertension_dx === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Reports HTN?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="hasHypertensionDx">
+                            <option value="">-- select --</option>
+                            <option {{$patient->has_hypertension_dx === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->has_hypertension_dx === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->has_hypertension_dx === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Reports HTN medicine?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="isPrescribedHypertensionMedicine">
+                            <option value="">-- select --</option>
+                            <option {{$patient->is_prescribed_hypertension_medicine === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->is_prescribed_hypertension_medicine === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->is_prescribed_hypertension_medicine === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Goal to reduce HTN medicine?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="isGoalToReduceHypertensionMedicine">
+                            <option value="">-- select --</option>
+                            <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="text-secondary min-width-140px mb-1">Describe the goal:</div>
+                <input type="text" class="form-control form-control-sm min-width-unset" name="goalToReduceHypertensionMedicineMemo" value="{{$patient->goal_to_reduce_hypertension_medicine_memo}}">
+
+                <div class="my-3 d-flex align-items-center">
+            <span class="text-secondary min-width-140px w-50">
+                <strong>BP monitoring prescribed?</strong>
+            </span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="isBpMonitoringNeeded">
+                            <option value="">-- select --</option>
+                            <option {{$patient->is_bp_monitoring_needed === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->is_bp_monitoring_needed === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->is_bp_monitoring_needed === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
+                    </div>
+                </div>
+
+                {{--
+                <hr class="my-3">
+                <div class="text-secondary min-width-140px mb-1">ICDs</div>
+                <table class="table table-sm table-striped table-bordered mb-3">
+                    <thead>
+                    <tr class="bg-light text-secondary">
+                        <th class="border-bottom-0 width-30px">#</th>
+                        <th class="border-bottom-0 w-25">Code</th>
+                        <th class="border-bottom-0">Description</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td class="p-0 align-middle text-center">1</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd1', 'text', 'whyIsBpMonitoringNeededIcd1', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description1', 'text', 'whyIsBpMonitoringNeededDescription1', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td class="p-0 align-middle text-center">2</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd2', 'text', 'whyIsBpMonitoringNeededIcd2', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description2', 'text', 'whyIsBpMonitoringNeededDescription2', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td class="p-0 align-middle text-center">3</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd3', 'text', 'whyIsBpMonitoringNeededIcd3', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description3', 'text', 'whyIsBpMonitoringNeededDescription3', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td class="p-0 align-middle text-center">4</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd4', 'text', 'whyIsBpMonitoringNeededIcd4', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description4', 'text', 'whyIsBpMonitoringNeededDescription4', $patient) ?></td>
+                    </tr>
+                    </tbody>
+                </table>
+                --}}
+                <div class="text-secondary min-width-140px mb-1">Remarks on clinical need:</div>
+                <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeeded" value="{{$patient->why_is_bp_monitoring_needed}}">
+
+            </div>
+        </div>
+
+        <div class="pt-2">
+            <button class="btn btn-primary btn-sm" submit>Submit</button>
+            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
+        </div>
+    </form>
+</div>
+<script>
+    (function() {
+
+        function initICDAutoSuggest(_codeElem, _descElem) {
+            if(_codeElem.is('[ac-initialized]')) return false;
+            var elem = _codeElem[0], descElem = _descElem[0], dynID = 'icd-' + Math.ceil(Math.random() * 1000000);
+            $(elem).attr('id', dynID);
+            new window.Def.Autocompleter.Search(dynID,
+                'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name', {
+                    tableFormat: true,
+                    valueCols: [0],
+                    colHeaders: ['Code', 'Name'],
+                }
+            );
+            window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                let acData = elem.autocomp.getSelectedItemData();
+                if(!acData[0] || !acData[0].data) return false;
+                $(elem).val(acData[0].code);
+                $(descElem).val(acData[0].data.name);
+                return false;
+            });
+            $(elem).attr('ac-initialized', 1);
+        }
+
+        function init() {
+            // for (let i = 1; i <= 4; i++) {
+            //     initICDAutoSuggest($('[name="whyIsBpMonitoringNeededIcd' + i + '"]'), $('[name="whyIsBpMonitoringNeededDescription' + i + '"]'));
+            // }
+        }
+
+        addMCInitializer('bp-management-settings', init, '#bp-management-settings');
+
+    }).call(window);
+</script>

resources/views/app/patient/vitals-settings/bp-management-summary.blade.php

@@ -1,226 +1,174 @@
+
 <div class="row">
-    <div class="col-6 border-right">
-        <div class="text-secondary font-weight-bold mb-3">Usual BP:</div>
-        <div class=" mb-3">
-            <div class="text-secondary font-weight-bold mb-2">
-                <i class="fa fa-sun"></i>
-                AM
-            </div>
-            <div class="">
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">SBP:</span>
-                    <span class="text-secondary">(range
-                    <?= vsValue('usual_am_resting_sbp_min', $patient) ?>
-                    to
-                    <?= vsValue('usual_am_resting_sbp_max', $patient) ?>)</span>
-                </div>
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">DBP:</span>
-                    <span class="text-secondary">(range
-                    <?= vsValue('usual_am_resting_dbp_min', $patient) ?>
-                    to
-                    <?= vsValue('usual_am_resting_dbp_max', $patient) ?>)</span>
-                </div>
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">Pulse:</span>
-                    <span class="text-secondary">(range
-                    <?= vsValue('usual_am_resting_pulse_min', $patient) ?>
-                    to
-                    <?= vsValue('usual_am_resting_pulse_max', $patient) ?>)</span>
-                </div>
-            </div>
-        </div>
-        <div class=" ">
-            <div class="text-secondary font-weight-bold mb-2">
-                <i class="fa fa-moon"></i>
-                PM
-            </div>
-            <div class="">
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">SBP:</span>
-                    <span class="text-secondary">(range
-                    <?= vsValue('usual_pm_resting_sbp_min', $patient) ?>
-                    to
-                    <?= vsValue('usual_pm_resting_sbp_max', $patient) ?>)</span>
-                </div>
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">DBP:</span>
-                    <span class="text-secondary">(range
-                    <?= vsValue('usual_pm_resting_dbp_min', $patient) ?>
-                    to
-                    <?= vsValue('usual_pm_resting_dbp_max', $patient) ?>)</span>
-                </div>
+    <div class="col-5 border-right">
+        <h6 class="text-secondary font-weight-bold mb-3">Usual:</h6>
+        <div class="d-flex mb-3">
+            <div class="pl-3">
+                @if($patient->does_usual_bp_have_am_pm_variation)
+                    <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-sun"></i> AM</div>
+                @endif
                 <div class="d-flex align-items-center">
-                    <span class="text-secondary width-50px">Pulse:</span>
-                    <span class="text-secondary">(range
-                    <?= vsValue('usual_pm_resting_pulse_min', $patient) ?>
-                    to
-                    <?= vsValue('usual_pm_resting_pulse_max', $patient) ?>)</span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-6">
-        <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
-        <div class=" ">
-            <div class="">
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">SBP:</span>
-                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_sbp', $patient) ?></div>
-                </div>
-                <div class="mb-3 d-flex align-items-center">
-                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
-                    <div class="flex-grow-1">
-                        <?= vsValue('sbp_management_goal_category', $patient) ?>
+                    @if($patient->does_usual_bp_have_range)
+                        <h6 class="mb-0 mr-2">LOWEST:</h6>
+                    @endif
+                    <h6 class="mb-0 mr-2">BP:</h6>
+                    <span><b><?= vsValue('usual_am_resting_sbp_min', $patient) ?></b></span>
+                    <span>/</span>
+                    <span class="mr-2"><b><?= vsValue('usual_am_resting_dbp_min', $patient) ?></b></span>
+                    <span class="mr-2">mm Hg Pulse:</span>
+                    <span><b><?= vsValue('usual_am_resting_pulse_min', $patient) ?></b></span>
+                    <span class="ml-2">BPM</span>
+                </div>
+                @if($patient->does_usual_bp_have_range)
+                    <div class="d-flex align-items-center">
+                        <h6 class="mb-0 mr-2">HIGHEST:</h6>
+                        <h6 class="mb-0 mr-2">BP:</h6>
+                        <span><b><?= vsValue('usual_am_resting_sbp_max', $patient) ?></b></span>
+                        <span>/</span>
+                        <span class="mr-2"><b><?= vsValue('usual_am_resting_dbp_max', $patient) ?></b></span>
+                        <span class="mr-2">mm Hg Pulse:</span>
+                        <span><b><?= vsValue('usual_am_resting_pulse_max', $patient) ?></b></span>
+                        <span class="ml-2">BPM</span>
                     </div>
-                </div>
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">DBP:</span>
-                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_dbp', $patient) ?></div>
-                </div>
-                <div class="mb-3 d-flex align-items-center">
-                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
-                    <div class="flex-grow-1">
-                        <?= vsValue('dbp_management_goal_category', $patient) ?>
+                @endif
+                @if($patient->does_usual_bp_have_am_pm_variation)
+                    <div class="text-secondary font-weight-bold my-2"><i class="fa fa-moon"></i> PM</div>
+                    <div class="d-flex align-items-center">
+                        @if($patient->does_usual_bp_have_range)
+                            <h6 class="mb-0 mr-2">LOWEST:</h6>
+                        @endif
+                        <h6 class="mb-0 mr-2">BP:</h6>
+                        <span><b><?= vsValue('usual_pm_resting_sbp_min', $patient) ?></b></span>
+                        <span>/</span>
+                        <span class="mr-2"><b><?= vsValue('usual_pm_resting_dbp_min', $patient) ?></b></span>
+                        <span class="mr-2">mm Hg Pulse:</span>
+                        <span><b><?= vsValue('usual_pm_resting_pulse_min', $patient) ?></b></span>
+                        <span class="ml-2">BPM</span>
                     </div>
-                </div>
-                <div class="mb-1 d-flex align-items-center">
-                    <span class="text-secondary width-50px">Pulse:</span>
-                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_pulse', $patient) ?></div>
-                </div>
-                <div class="mb-3 d-flex align-items-center">
-                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
-                    <div class="flex-grow-1">
-                        <?= vsValue('pulse_management_goal_category', $patient) ?>
+                @endif
+                @if($patient->does_usual_bp_have_range)
+                    <div class="d-flex align-items-center">
+                        @if($patient->does_usual_bp_have_range)
+                            <h6 class="mb-0 mr-2">HIGHEST:</h6>
+                        @endif
+                        <h6 class="mb-0 mr-2">BP:</h6>
+                        <span><b><?= vsValue('usual_pm_resting_sbp_max', $patient) ?></b></span>
+                        <span>/</span>
+                        <span class="mr-2"><b><?= vsValue('usual_pm_resting_dbp_max', $patient) ?></b></span>
+                        <span class="mr-2">mm Hg Pulse:</span>
+                        <span><b><?= vsValue('usual_pm_resting_pulse_max', $patient) ?></b></span>
+                        <span class="ml-2">BPM</span>
                     </div>
-                </div>
+                @endif
             </div>
         </div>
-    </div>
-</div>
-
-<hr class="my-3">
-
-<div class="text-secondary font-weight-bold mb-3">Alerts</div>
-
-<div class="row">
-    <div class="col-6 border-right">
-        <div class="">
-            <div class="text-secondary font-weight-bold mb-2">
-                <i class="fa fa-circle text-danger"></i>
-                Red
-            </div>
-            <div class="">
-                <div class="mb-2 d-flex align-items-center">
-                    <span class="text-secondary">SBP: above</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_above', $patient) ?></div>
-                    <span class="text-secondary text-center">or below</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_below', $patient) ?></div>
-                </div>
-                <div class="mb-2 d-flex align-items-center">
-                    <span class="text-secondary">DBP: above</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_above', $patient) ?></div>
-                    <span class="text-secondary text-center">or below</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_below', $patient) ?></div>
-                </div>
+        <div class="mb-3">
+            <h6 class="text-secondary font-weight-bold">Ideal BP</h6>
+            <div class="pl-3">
                 <div class="d-flex align-items-center">
-                    <span class="text-secondary">Pulse: above</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_above', $patient) ?></div>
-                    <span class="text-secondary text-center">or below</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_below', $patient) ?></div>
+                    <h6 class="mb-0 mr-2">Target:</h6>
+                    <h6 class="mb-0 mr-2">BP:</h6>
+                    <span><b><?= vsValue('ideal_am_resting_sbp_min', $patient) ?></b></span>
+                    <span>/</span>
+                    <span class="mr-2"><b><?= vsValue('ideal_am_resting_dbp_min', $patient) ?></b></span>
+                    <span class="mr-2">mm Hg Pulse:</span>
+                    <span><b><?= vsValue('ideal_am_resting_pulse', $patient) ?></b></span>
+                    <span class="ml-2">BPM</span>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="col-6">
-        <div class="">
-            <div class="text-secondary font-weight-bold mb-2">
-                <i class="fa fa-circle text-warning-mellow"></i>
-                Yellow
-            </div>
-            <div class="">
-                <div class="mb-2 d-flex align-items-center">
-                    <span class="text-secondary">SBP: above</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_above', $patient) ?></div>
-                    <span class="text-secondary text-center">or below</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_below', $patient) ?></div>
-                </div>
-                <div class="mb-2 d-flex align-items-center">
-                    <span class="text-secondary">DBP: above</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_above', $patient) ?></div>
-                    <span class="text-secondary text-center">or below</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_below', $patient) ?></div>
-                </div>
-                <div class="d-flex align-items-center">
-                    <span class="text-secondary">Pulse: above</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_above', $patient) ?></div>
-                    <span class="text-secondary text-center">or below</span>
-                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_below', $patient) ?></div>
+
+        <div class="mb-3">
+            <h6 class="text-secondary font-weight-bold mb-3">Alerts</h6>
+            <div class="pl-3">
+                <div class="mb-3">
+                    <div class="mb-2"><i class="fa fa-circle text-danger"></i> Red</div>
+                    <div class="d-flex align-items-center">
+                        <h6 class="mb-0 mr-2">Above:</h6>
+                        <h6 class="mb-0 mr-2">BP:</h6>
+                        <span><b><?= vsValue('red_alert_when_sbp_above', $patient) ?></b></span>
+                        <span>/</span>
+                        <span class="mr-2"><b><?= vsValue('red_alert_when_dbp_above', $patient) ?></b></span>
+                        <span class="mr-2">mm Hg Pulse:</span>
+                        <span><b><?= vsValue('red_alert_when_pulse_above', $patient) ?></b></span>
+                        <span class="ml-2">BPM</span>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <h6 class="mb-0 mr-2">Below:</h6>
+                        <h6 class="mb-0 mr-2">BP:</h6>
+                        <span><b><?= vsValue('red_alert_when_sbp_below', $patient) ?></b></span>
+                        <span>/</span>
+                        <span class="mr-2"><b><?= vsValue('red_alert_when_dbp_below', $patient) ?></b></span>
+                        <span class="mr-2">mm Hg Pulse:</span>
+                        <span><b><?= vsValue('red_alert_when_pulse_below', $patient) ?></b></span>
+                        <span class="ml-2">BPM</span>
+                    </div>
                 </div>
-            </div>
+                <div class="mb-3">
+                    <div class="mb-2"><i class="fa fa-circle text-warning-mellow"></i> Yellow</div>
+                    <div class="d-flex align-items-center">
+                        <h6 class="mb-0 mr-2">Above:</h6>
+                        <h6 class="mb-0 mr-2">BP:</h6>
+                        <span><b><?= vsValue('yellow_alert_when_sbp_above', $patient) ?></b></span>
+                        <span>/</span>
+                        <span class="mr-2"><b><?= vsValue('yellow_alert_when_dbp_above', $patient) ?></b></span>
+                        <span class="mr-2">mm Hg Pulse:</span>
+                        <span><b><?= vsValue('yellow_alert_when_pulse_above', $patient) ?></b></span>
+                        <span class="ml-2">BPM</span>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <h6 class="mb-0 mr-2">Below:</h6>
+                        <h6 class="mb-0 mr-2">BP:</h6>
+                        <span><b><?= vsValue('yellow_alert_when_sbp_below', $patient) ?></b></span>
+                        <span>/</span>
+                        <span class="mr-2"><b><?= vsValue('yellow_alert_when_dbp_below', $patient) ?></b></span>
+                        <span class="mr-2">mm Hg Pulse:</span>
+                        <span><b><?= vsValue('yellow_alert_when_pulse_below', $patient) ?></b></span>
+                        <span class="ml-2">BPM</span>
+                    </div>
+                </div>   
+            </div>         
         </div>
-    </div>
-</div>
-
-<hr class="my-3">
 
-<div class="row mb-2">
-    <div class="col-6 border-right">
-        <div class="d-flex align-items-start">
-            <span class="text-secondary min-width-140px pr-3">Reports prehypertension?</span>
-            <div>
-                <?= vsValue('has_prehypertension_dx', $patient) ?>
-            </div>
-        </div>
     </div>
-    <div class="col-6">
-        <div class="d-flex align-items-start">
-            <span class="text-secondary min-width-140px pr-3">Reports hypertension?</span>
-            <div>
-                <?= vsValue('has_hypertension_dx', $patient) ?>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="row mb-2">
-    <div class="col-6 border-right">
-        <div class="d-flex align-items-start">
-            <span class="text-secondary min-width-140px pr-3">Reports hypertension medicine?</span>
-            <div>
-                <?= vsValue('is_prescribed_hypertension_medicine', $patient) ?>
-            </div>
-        </div>
-    </div>
-    <div class="col-6">
-        <div class="d-flex align-items-start">
-            <span class="text-secondary min-width-140px pr-3">Is it a goal to reduce<br>hypertension medicine?</span>
-            <div>
-                <?= vsValue('is_goal_to_reduce_hypertension_medicine', $patient) ?>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="row mb-2">
-    <div class="col-6 border-right">
-        <div class="d-flex align-items-start">
-            <span class="text-secondary min-width-140px pr-3">Describe the goal</span>
-            <div>
-                <?= vsValue('goal_to_reduce_hypertension_medicine_memo', $patient) ?>
-            </div>
-        </div>
-    </div>
-    <div class="col-6">
-        <div class="d-flex align-items-center mb-2">
-            <span class="text-secondary min-width-140px pr-3">BP monitoring prescribed?</span>
-            <div>
-                <?= vsValue('is_bp_monitoring_needed', $patient) ?>
-            </div>
-        </div>
-        <div class="d-flex align-items-baseline">
-            <span class="text-secondary pr-3">Remarks</span>
-            <div class="flex-grow-1">
-                <?= vsValue('why_is_bp_monitoring_needed', $patient) ?>
-            </div>
+    <div class="col-6 offset-1">
+        <div class="table-responsive">
+            <table class="table table-sm table-striped table-bordered">
+                <tbody>
+                    <tr>
+                        <td>Reports prehypertension?</td>
+                        <td><?= vsValue('has_prehypertension_dx', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td>Reports hypertension?</td>
+                        <td><?= vsValue('has_hypertension_dx', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td>Reports hypertension medicine?</td>
+                        <td><?= vsValue('is_prescribed_hypertension_medicine', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td>Is it a goal to reduce<br>hypertension medicine?</td>
+                        <td><?= vsValue('is_goal_to_reduce_hypertension_medicine', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td>Describe the goal</td>
+                        <td><?= vsValue('goal_to_reduce_hypertension_medicine_memo', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td>BP monitoring prescribed?</td>
+                        <td><?= vsValue('is_bp_monitoring_needed', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td>BP monitoring prescribed?</td>
+                        <td><?= vsValue('is_bp_monitoring_needed', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td>Remarks</td>
+                        <td><?= vsValue('why_is_bp_monitoring_needed', $patient) ?></td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
-</div>
+</div>

resources/views/app/patient/vitals-settings/bp-management-summary_depricated.blade.php

@@ -0,0 +1,226 @@
+<div class="row">
+    <div class="col-6 border-right">
+        <div class="text-secondary font-weight-bold mb-3">Usual BP:</div>
+        <div class=" mb-3">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-sun"></i>
+                AM
+            </div>
+            <div class="">
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">SBP:</span>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_am_resting_sbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_am_resting_sbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">DBP:</span>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_am_resting_dbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_am_resting_dbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Pulse:</span>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_am_resting_pulse_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_am_resting_pulse_max', $patient) ?>)</span>
+                </div>
+            </div>
+        </div>
+        <div class=" ">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-moon"></i>
+                PM
+            </div>
+            <div class="">
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">SBP:</span>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_pm_resting_sbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_pm_resting_sbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">DBP:</span>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_pm_resting_dbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_pm_resting_dbp_max', $patient) ?>)</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <span class="text-secondary width-50px">Pulse:</span>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_pm_resting_pulse_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_pm_resting_pulse_max', $patient) ?>)</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-6">
+        <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
+        <div class=" ">
+            <div class="">
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">SBP:</span>
+                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_sbp', $patient) ?></div>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
+                    <div class="flex-grow-1">
+                        <?= vsValue('sbp_management_goal_category', $patient) ?>
+                    </div>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">DBP:</span>
+                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_dbp', $patient) ?></div>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
+                    <div class="flex-grow-1">
+                        <?= vsValue('dbp_management_goal_category', $patient) ?>
+                    </div>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Pulse:</span>
+                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_pulse', $patient) ?></div>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
+                    <div class="flex-grow-1">
+                        <?= vsValue('pulse_management_goal_category', $patient) ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<hr class="my-3">
+
+<div class="text-secondary font-weight-bold mb-3">Alerts</div>
+
+<div class="row">
+    <div class="col-6 border-right">
+        <div class="">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-circle text-danger"></i>
+                Red
+            </div>
+            <div class="">
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">SBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_below', $patient) ?></div>
+                </div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">DBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_below', $patient) ?></div>
+                </div>
+                <div class="d-flex align-items-center">
+                    <span class="text-secondary">Pulse: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_below', $patient) ?></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-6">
+        <div class="">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-circle text-warning-mellow"></i>
+                Yellow
+            </div>
+            <div class="">
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">SBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_below', $patient) ?></div>
+                </div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">DBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_below', $patient) ?></div>
+                </div>
+                <div class="d-flex align-items-center">
+                    <span class="text-secondary">Pulse: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_below', $patient) ?></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<hr class="my-3">
+
+<div class="row mb-2">
+    <div class="col-6 border-right">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Reports prehypertension?</span>
+            <div>
+                <?= vsValue('has_prehypertension_dx', $patient) ?>
+            </div>
+        </div>
+    </div>
+    <div class="col-6">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Reports hypertension?</span>
+            <div>
+                <?= vsValue('has_hypertension_dx', $patient) ?>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row mb-2">
+    <div class="col-6 border-right">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Reports hypertension medicine?</span>
+            <div>
+                <?= vsValue('is_prescribed_hypertension_medicine', $patient) ?>
+            </div>
+        </div>
+    </div>
+    <div class="col-6">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Is it a goal to reduce<br>hypertension medicine?</span>
+            <div>
+                <?= vsValue('is_goal_to_reduce_hypertension_medicine', $patient) ?>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row mb-2">
+    <div class="col-6 border-right">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Describe the goal</span>
+            <div>
+                <?= vsValue('goal_to_reduce_hypertension_medicine_memo', $patient) ?>
+            </div>
+        </div>
+    </div>
+    <div class="col-6">
+        <div class="d-flex align-items-center mb-2">
+            <span class="text-secondary min-width-140px pr-3">BP monitoring prescribed?</span>
+            <div>
+                <?= vsValue('is_bp_monitoring_needed', $patient) ?>
+            </div>
+        </div>
+        <div class="d-flex align-items-baseline">
+            <span class="text-secondary pr-3">Remarks</span>
+            <div class="flex-grow-1">
+                <?= vsValue('why_is_bp_monitoring_needed', $patient) ?>
+            </div>
+        </div>
+    </div>
+</div>