Vitals settings - bp mgmt UI (wip)

app/Helpers/helpers.php

@@ -617,3 +617,20 @@ if(!function_exists('minutes_to_hhmm')) {
         return $h . ':' . $m;
     }
 }
+if(!function_exists('vsValue')) {
+    function vsValue($_v, $patient = null, $_direct = false)
+    {
+        if ($_direct) {
+            return $_v ? $_v : '<span class="font-weight-normal text-info text-sm font-italic">empty</span>';
+        }
+        return @($patient->{$_v}) ? $patient->{$_v} : '<span class="font-weight-normal text-info text-sm font-italic">empty</span>';
+    }
+}
+if(!function_exists('vsElement')) {
+    function vsElement($_v, $type, $name, $patient)
+    {
+        return '<input type="' . $type . '" class="form-control form-control-sm min-width-unset rounded-0" ' .
+            'name="' . $name . '" ' .
+            'value="' . (@($patient->{$_v}) ? $patient->{$_v} : '') . '">';
+    }
+}

public/css/style.css

@@ -298,6 +298,9 @@ body>nav.navbar {
 .mcp-theme-1 .width-70px {
     width: 70px !important;
 }
+.mcp-theme-1 .min-width-70px {
+    min-width: 70px !important;
+}
 .mcp-theme-1 .width-90px {
     width: 90px !important;
 }

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

@@ -4,17 +4,9 @@
         <input type="hidden" name="uid" value="{{$patient->uid}}">
         <p class="text-secondary font-weight-bold font-size-14">BMI Management</p>
 
-        <?php
-        function _bmiE($_v, $type, $name, $patient) {
-            return '<input type="' . $type . '" class="form-control form-control-sm min-width-unset rounded-0" ' .
-                'name="' . $name. '" ' .
-                'value="' . (@($patient->{$_v}) ? $patient->{$_v} : '') . '">';
-        }
-        ?>
-
         <div class="mb-3 d-flex align-items-center">
             <span class="text-secondary min-width-140px">Current Height:</span>
-            <div class="width-100px mr-2"><?= _bmiE('current_height_in_inches', 'number', 'currentHeightInInches', $patient) ?></div>
+            <div class="width-100px mr-2"><?= vsElement('current_height_in_inches', 'number', 'currentHeightInInches', $patient) ?></div>
             <span class="text-secondary">(in.)</span>
         </div>
 
@@ -22,38 +14,38 @@
 
         <div class="mb-1 d-flex align-items-center">
             <span class="text-secondary min-width-140px">Weight (usual):</span>
-            <div class="width-100px mr-2"><?= _bmiE('usual_weight_in_pounds', 'number', 'usualWeightInPounds', $patient) ?></div>
+            <div class="width-100px mr-2"><?= vsElement('usual_weight_in_pounds', 'number', 'usualWeightInPounds', $patient) ?></div>
             <span class="text-secondary">(lbs)</span>
         </div>
         <div class="mb-1 d-flex align-items-center">
             <span class="text-secondary min-width-140px">Ranging between</span>
-            <div class="width-100px"><?= _bmiE('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
+            <div class="width-100px"><?= vsElement('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
             <span class="text-secondary mx-2">and</span>
-            <div class="width-100px"><?= _bmiE('usual_weight_in_pounds_max', 'number', 'usualWeightInPoundsMax', $patient) ?></div>
+            <div class="width-100px"><?= vsElement('usual_weight_in_pounds_max', 'number', 'usualWeightInPoundsMax', $patient) ?></div>
         </div>
         <div class="mb-3 d-flex align-items-center">
             <span class="text-secondary min-width-140px">BMI (usual):</span>
-            <div class="width-100px mr-2"><?= _bmiE('usual_bmi', 'number', 'usualBmi', $patient) ?></div>
-            <span class="text-secondary"><?= _bmiE('usual_bmi_category', 'hidden', 'usualBmiCategory', $patient) ?></span>
+            <div class="width-100px mr-2"><?= vsElement('usual_bmi', 'number', 'usualBmi', $patient) ?></div>
+            <span class="text-secondary"><?= vsElement('usual_bmi_category', 'hidden', 'usualBmiCategory', $patient) ?></span>
         </div>
 
         <hr class="my-3">
 
         <div class="mb-1 d-flex align-items-center">
             <span class="text-secondary min-width-140px">Weight (ideal):</span>
-            <div class="width-100px mr-2"><?= _bmiE('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $patient) ?></div>
+            <div class="width-100px mr-2"><?= vsElement('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $patient) ?></div>
             <span class="text-secondary">(lbs)</span>
         </div>
         <div class="mb-1 d-flex align-items-center">
             <span class="text-secondary min-width-140px">Ranging between</span>
-            <div class="width-100px"><?= _bmiE('ideal_weight_in_pounds_min', 'number', 'idealWeightInPoundsMin', $patient) ?></div>
+            <div class="width-100px"><?= vsElement('ideal_weight_in_pounds_min', 'number', 'idealWeightInPoundsMin', $patient) ?></div>
             <span class="text-secondary mx-2">and</span>
-            <div class="width-100px"><?= _bmiE('ideal_weight_in_pounds_max', 'number', 'idealWeightInPoundsMax', $patient) ?></div>
+            <div class="width-100px"><?= vsElement('ideal_weight_in_pounds_max', 'number', 'idealWeightInPoundsMax', $patient) ?></div>
         </div>
         <div class="mb-3 d-flex align-items-center">
             <span class="text-secondary min-width-140px">BMI (ideal):</span>
-            <div class="width-100px mr-2"><?= _bmiE('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
-            <span class="text-secondary"><?= _bmiE('ideal_bmi_category', 'hidden', 'idealBmiCategory', $patient) ?></span>
+            <div class="width-100px mr-2"><?= vsElement('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
+            <span class="text-secondary"><?= vsElement('ideal_bmi_category', 'hidden', 'idealBmiCategory', $patient) ?></span>
         </div>
 
         <hr class="my-3">
@@ -108,23 +100,23 @@
             <tbody>
             <tr>
                 <td class="p-0 align-middle text-center">1</td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_icd1', 'text', 'whyIsWeightMonitoringNeededIcd1', $patient) ?></td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_description1', 'text', 'whyIsWeightMonitoringNeededDescription1', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd1', 'text', 'whyIsWeightMonitoringNeededIcd1', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description1', 'text', 'whyIsWeightMonitoringNeededDescription1', $patient) ?></td>
             </tr>
             <tr>
                 <td class="p-0 align-middle text-center">2</td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_icd2', 'text', 'whyIsWeightMonitoringNeededIcd2', $patient) ?></td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_description2', 'text', 'whyIsWeightMonitoringNeededDescription2', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd2', 'text', 'whyIsWeightMonitoringNeededIcd2', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description2', 'text', 'whyIsWeightMonitoringNeededDescription2', $patient) ?></td>
             </tr>
             <tr>
                 <td class="p-0 align-middle text-center">3</td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_icd3', 'text', 'whyIsWeightMonitoringNeededIcd3', $patient) ?></td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_description3', 'text', 'whyIsWeightMonitoringNeededDescription3', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd3', 'text', 'whyIsWeightMonitoringNeededIcd3', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description3', 'text', 'whyIsWeightMonitoringNeededDescription3', $patient) ?></td>
             </tr>
             <tr>
                 <td class="p-0 align-middle text-center">4</td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_icd4', 'text', 'whyIsWeightMonitoringNeededIcd4', $patient) ?></td>
-                <td class="p-0 align-middle text-center"><?= _bmiE('why_is_weight_monitoring_needed_description4', 'text', 'whyIsWeightMonitoringNeededDescription4', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd4', 'text', 'whyIsWeightMonitoringNeededIcd4', $patient) ?></td>
+                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description4', 'text', 'whyIsWeightMonitoringNeededDescription4', $patient) ?></td>
             </tr>
             </tbody>
         </table>

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

@@ -1,12 +1,3 @@
-<?php
-    function _bmiV($_v, $patient = null, $_direct = false) {
-        if($_direct) {
-            return $_v ? $_v : '<span class="font-weight-normal text-info text-sm font-italic">empty</span>';
-        }
-        return @($patient->{$_v}) ? $patient->{$_v} : '<span class="font-weight-normal text-info text-sm font-italic">empty</span>';
-    }
-?>
-
 <div class="mb-3">
     <span class="text-secondary">Height:</span>
     <b>
@@ -17,35 +8,35 @@
 
 <div class="mb-1">
     <span class="text-secondary">Weight (usual):</span>
-    <b><?= _bmiV('usual_weight_in_pounds', $patient) ?></b><span class="text-secondary">, ranging between</span>
-    <b><?= _bmiV('usual_weight_in_pounds_min', $patient) ?></b>
+    <b><?= vsValue('usual_weight_in_pounds', $patient) ?></b><span class="text-secondary">, ranging between</span>
+    <b><?= vsValue('usual_weight_in_pounds_min', $patient) ?></b>
     <span class="text-secondary">and</span>
-    <b><?= _bmiV('usual_weight_in_pounds_max', $patient) ?></b>
+    <b><?= vsValue('usual_weight_in_pounds_max', $patient) ?></b>
 </div>
 
 <div class="mb-3 ml-3">
     <span class="text-secondary">BMI (usual):</span>
-    <b><?= _bmiV('usual_bmi', $patient) ?></b>
-    <span class="text-secondary">(<?= _bmiV('usual_bmi_category', $patient) ?>)</span>
+    <b><?= vsValue('usual_bmi', $patient) ?></b>
+    <span class="text-secondary">(<?= vsValue('usual_bmi_category', $patient) ?>)</span>
 </div>
 
 <div class="mb-1">
     <span class="text-secondary">Weight (ideal):</span>
-    <b><?= _bmiV('ideal_weight_in_pounds', $patient) ?></b><span class="text-secondary">, ranging between</span>
-    <b><?= _bmiV('ideal_weight_in_pounds_min', $patient) ?></b>
+    <b><?= vsValue('ideal_weight_in_pounds', $patient) ?></b><span class="text-secondary">, ranging between</span>
+    <b><?= vsValue('ideal_weight_in_pounds_min', $patient) ?></b>
     <span class="text-secondary">and</span>
-    <b><?= _bmiV('ideal_weight_in_pounds_max', $patient) ?></b>
+    <b><?= vsValue('ideal_weight_in_pounds_max', $patient) ?></b>
 </div>
 
 <div class="mb-3 ml-3">
     <span class="text-secondary">BMI (ideal):</span>
-    <b><?= _bmiV('ideal_bmi', $patient) ?></b>
-    <span class="text-secondary">(<?= _bmiV('ideal_bmi_category', $patient) ?>)</span>
+    <b><?= vsValue('ideal_bmi', $patient) ?></b>
+    <span class="text-secondary">(<?= vsValue('ideal_bmi_category', $patient) ?>)</span>
 </div>
 
 <div class="mb-3">
     <span class="text-secondary">Goal:</span>
-    <span><?= _bmiV('weight_management_goal_category', $patient) ?></span>
+    <span><?= vsValue('weight_management_goal_category', $patient) ?></span>
 </div>
 <!--<div class="mb-3">
     <span class="text-secondary">Remarks:</span>
@@ -54,7 +45,7 @@
 
 <div class="mb-3">
     <span class="text-secondary">CHF?:</span>
-    <span><?= _bmiV('has_heart_failure_dx', $patient) ?></span>
+    <span><?= vsValue('has_heart_failure_dx', $patient) ?></span>
 </div>
 
 <div class="mb-1">
@@ -69,20 +60,20 @@
     </thead>
     <tbody>
     <tr>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_icd1', $patient) ?></td>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_description1', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_icd1', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_description1', $patient) ?></td>
     </tr>
     <tr>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_icd2', $patient) ?></td>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_description2', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_icd2', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_description2', $patient) ?></td>
     </tr>
     <tr>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_icd3', $patient) ?></td>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_description3', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_icd3', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_description3', $patient) ?></td>
     </tr>
     <tr>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_icd4', $patient) ?></td>
-        <td><?= _bmiV('why_is_weight_monitoring_needed_description4', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_icd4', $patient) ?></td>
+        <td><?= vsValue('why_is_weight_monitoring_needed_description4', $patient) ?></td>
     </tr>
     </tbody>
 </table>

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

@@ -1,311 +1,199 @@
 <div moe large>
     <a href="#" start show>Update</a>
-    <form url="/api/client/updateBpManagementValue">
+    <form url="/api/client/updateBpManagementSettingsValue">
         <input type="hidden" name="uid" value="{{$patient->uid}}">
-        <p>BP Management</p>
-        <div class="mb-2">
-            <label class="text-sm text-secondary mb-1">Is BP Monitoring Needed?</label>
-            <select type="text" class="form-control form-control-sm min-width-unset" condition 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 condition-key="isBpMonitoringNeeded" condition-value="YES">
-            <div class="mb-2">
-                <label class="text-sm text-secondary mb-1">Why Is BP Monitoring Needed?</label>
-                <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeeded" value="{{$patient->why_is_bp_monitoring_needed}}">
-            </div>
-            <div class="row mb-2">
-                <div class="col-3 pr-0">
-                    <label class="text-sm text-secondary mb-1">ICD 1</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededIcd1" value="{{$patient->why_is_bp_monitoring_needed_icd1}}">
-                </div>
-                <div class="col-3 pr-0">
-                    <label class="text-sm text-secondary mb-1">ICD 2</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededIcd2" value="{{$patient->why_is_bp_monitoring_needed_icd2}}">
-                </div>
-                <div class="col-3 pr-0">
-                    <label class="text-sm text-secondary mb-1">ICD 3</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededIcd3" value="{{$patient->why_is_bp_monitoring_needed_icd3}}">
-                </div>
-                <div class="col-3">
-                    <label class="text-sm text-secondary mb-1">ICD 4</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededIcd4" value="{{$patient->why_is_bp_monitoring_needed_icd4}}">
-                </div>
-            </div>
-            <div class="row mb-2">
-                <div class="col-6 pr-0">
-                    <label class="text-sm text-secondary mb-1">Description 1</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededDescription1" value="{{$patient->why_is_bp_monitoring_needed_description1}}">
-                </div>
-                <div class="col-6">
-                    <label class="text-sm text-secondary mb-1">Description 2</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededDescription2" value="{{$patient->why_is_bp_monitoring_needed_description2}}">
-                </div>
-            </div>
-            <div class="row mb-2">
-                <div class="col-6 pr-0">
-                    <label class="text-sm text-secondary mb-1">Description 3</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededDescription3" value="{{$patient->why_is_bp_monitoring_needed_description3}}">
-                </div>
-                <div class="col-6">
-                    <label class="text-sm text-secondary mb-1">Description 4</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeededDescription4" value="{{$patient->why_is_bp_monitoring_needed_description4}}">
-                </div>
-            </div>
-            <div class="mb-2">
-                <label class="text-sm text-secondary mb-1">Has Pre-Hypertension Dx?</label>
-                <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 class="mb-2">
-                <label class="text-sm text-secondary mb-1">Has Hypertension Dx?</label>
-                <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 class="mb-2">
-                <label class="text-sm text-secondary mb-1">Is Prescribed Hypertension Medicine?</label>
-                <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 class="mb-2">
-                <label class="text-sm text-secondary mb-1">Is goal to reduce hypertension medicine?</label>
-                <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 class="mb-2">
-                <label class="text-sm text-secondary mb-1">Goal to reduce hypertension medicine</label>
-                <input type="text" class="form-control form-control-sm min-width-unset" name="goalToReduceHypertensionMedicine" value="{{$patient->goal_to_reduce_hypertension_medicine}}">
-            </div>
-            <div class="mb-2">
-                <label class="text-sm text-secondary mb-1">SBP Management Goal Category</label>
-                <select type="text" class="form-control form-control-sm min-width-unset" name="sbpManagementGoalCategory">
-                    <option value="">-- select --</option>
-                    <option {{$patient->sbp_management_goal_category === 'LOSE' ? 'selected' : ''}} value="LOSE">Lose</option>
-                    <option {{$patient->sbp_management_goal_category === 'GAIN' ? 'selected' : ''}} value="GAIN">Gain</option>
-                    <option {{$patient->sbp_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
-                </select>
-            </div>
-            <div class="mb-2">
-                <label class="text-sm text-secondary mb-1">DBP Management Goal Category</label>
-                <select type="text" class="form-control form-control-sm min-width-unset" name="dbpManagementGoalCategory">
-                    <option value="">-- select --</option>
-                    <option {{$patient->dbp_management_goal_category === 'LOSE' ? 'selected' : ''}} value="LOSE">Lose</option>
-                    <option {{$patient->dbp_management_goal_category === 'GAIN' ? 'selected' : ''}} value="GAIN">Gain</option>
-                    <option {{$patient->dbp_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
-                </select>
-            </div>
-            <div class="mb-2">
-                <label class="text-sm text-secondary mb-1">Pulse Management Goal Category</label>
-                <select type="text" class="form-control form-control-sm min-width-unset" name="pulseManagementGoalCategory">
-                    <option value="">-- select --</option>
-                    <option {{$patient->pulse_management_goal_category === 'LOSE' ? 'selected' : ''}} value="LOSE">Lose</option>
-                    <option {{$patient->pulse_management_goal_category === 'GAIN' ? 'selected' : ''}} value="GAIN">Gain</option>
-                    <option {{$patient->pulse_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
-                </select>
-            </div>
+        <p class="text-secondary font-weight-bold font-size-14">BP Management</p>
 
-            <p><b>Baseline AM Resting BP</b></p>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingSbp" value="{{$patient->baseline_am_resting_sbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingSbpMin" value="{{$patient->baseline_am_resting_sbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">SBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingSbpMax" value="{{$patient->baseline_am_resting_sbp_max}}">
-                </div>
-            </div>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingDbp" value="{{$patient->baseline_am_resting_dbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingDbpMin" value="{{$patient->baseline_am_resting_dbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">DBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingDbpMax" value="{{$patient->baseline_am_resting_dbp_max}}">
+        <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>
+                    <div class="width-70px mr-2"><?= vsElement('usual_am_resting_sbp', 'number', 'usualAmRestingSbp', $patient) ?></div>
+                    <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>
+                    <div class="width-70px mr-2"><?= vsElement('usual_am_resting_dbp', 'number', 'usualAmRestingDbp', $patient) ?></div>
+                    <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>
+                    <div class="width-70px mr-2"><?= vsElement('usual_am_resting_pulse', 'number', 'usualAmRestingPulse', $patient) ?></div>
+                    <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 class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingPulse" value="{{$patient->baseline_am_resting_pulse}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingPulseMin" value="{{$patient->baseline_am_resting_pulse_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">Pulse Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselineAmRestingPulseMax" value="{{$patient->baseline_am_resting_pulse_max}}">
+        </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>
+                    <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_sbp', 'number', 'usualPmRestingSbp', $patient) ?></div>
+                    <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>
+                    <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_dbp', 'number', 'usualPmRestingDbp', $patient) ?></div>
+                    <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>
+                    <div class="width-70px mr-2"><?= vsElement('usual_pm_resting_pulse', 'number', 'usualPmRestingPulse', $patient) ?></div>
+                    <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">
 
-
-
-            <p><b>Baseline PM Resting BP</b></p>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingSbp" value="{{$patient->baseline_pm_resting_sbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingSbpMin" value="{{$patient->baseline_pm_resting_sbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">SBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingSbpMax" value="{{$patient->baseline_pm_resting_sbp_max}}">
+        <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 mr-2 text-center text-sm">ranging between</span>
+                    <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_sbp_min', 'number', 'idealAmRestingSbpMin', $patient) ?></div>
+                    <span class="text-secondary mr-2">and</span>
+                    <div class="width-70px"><?= vsElement('ideal_am_resting_sbp_max', 'number', 'idealAmRestingSbpMax', $patient) ?></div>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary min-width-70px">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 mr-2 text-center text-sm">ranging between</span>
+                    <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_dbp_min', 'number', 'idealAmRestingDbpMin', $patient) ?></div>
+                    <span class="text-secondary mr-2">and</span>
+                    <div class="width-70px"><?= vsElement('ideal_am_resting_dbp_max', 'number', 'idealAmRestingDbpMax', $patient) ?></div>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary min-width-70px">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->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 mr-2 text-center text-sm">ranging between</span>
+                    <div class="width-70px mr-2"><?= vsElement('ideal_am_resting_pulse_min', 'number', 'idealAmRestingPulseMin', $patient) ?></div>
+                    <span class="text-secondary mr-2">and</span>
+                    <div class="width-70px"><?= vsElement('ideal_am_resting_pulse_max', 'number', 'idealAmRestingPulseMax', $patient) ?></div>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary min-width-70px">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->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 class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingDbp" value="{{$patient->baseline_pm_resting_dbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingDbpMin" value="{{$patient->baseline_pm_resting_dbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">DBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingDbpMax" value="{{$patient->baseline_pm_resting_dbp_max}}">
-                </div>
-            </div>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingPulse" value="{{$patient->baseline_pm_resting_pulse}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingPulseMin" value="{{$patient->baseline_pm_resting_pulse_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">Pulse Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="baselinePmRestingPulseMax" value="{{$patient->baseline_pm_resting_pulse_max}}">
-                </div>
-            </div>
-
-
+        </div>
+        <hr class="my-3">
 
-            <p><b>Ideal AM Resting BP</b></p>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingSbp" value="{{$patient->ideal_am_resting_sbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingSbpMin" value="{{$patient->ideal_am_resting_sbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">SBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingSbpMax" value="{{$patient->ideal_am_resting_sbp_max}}">
+        <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-100px">SBP: above</span>
+                    <div class="width-70px mr-2"><?= vsElement('red_alert_when_sbp_above', 'number', 'redAlertWhenSbpAbove', $patient) ?></div>
+                    <span class="text-secondary mr-2 text-center">or below</span>
+                    <div class="width-70px mr-2"><?= 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-100px">DBP: above</span>
+                    <div class="width-70px mr-2"><?= vsElement('red_alert_when_dbp_above', 'number', 'redAlertWhenDbpAbove', $patient) ?></div>
+                    <span class="text-secondary mr-2 text-center">or below</span>
+                    <div class="width-70px mr-2"><?= 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-100px">Pulse: above</span>
+                    <div class="width-70px mr-2"><?= vsElement('red_alert_when_pulse_above', 'number', 'redAlertWhenPulseAbove', $patient) ?></div>
+                    <span class="text-secondary mr-2 text-center">or below</span>
+                    <div class="width-70px mr-2"><?= vsElement('red_alert_when_pulse_below', 'number', 'redAlertWhenPulseBelow', $patient) ?></div>
                 </div>
             </div>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingDbp" value="{{$patient->ideal_am_resting_dbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingDbpMin" value="{{$patient->ideal_am_resting_dbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">DBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingDbpMax" value="{{$patient->ideal_am_resting_dbp_max}}">
-                </div>
-            </div>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingPulse" value="{{$patient->ideal_am_resting_pulse}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingPulseMin" value="{{$patient->ideal_am_resting_pulse_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">Pulse Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealAmRestingPulseMax" value="{{$patient->ideal_am_resting_pulse_max}}">
+        </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-100px">SBP: above</span>
+                    <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_sbp_above', 'number', 'yellowAlertWhenSbpAbove', $patient) ?></div>
+                    <span class="text-secondary mr-2 text-center">or below</span>
+                    <div class="width-70px mr-2"><?= 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-100px">DBP: above</span>
+                    <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_dbp_above', 'number', 'yellowAlertWhenDbpAbove', $patient) ?></div>
+                    <span class="text-secondary mr-2 text-center">or below</span>
+                    <div class="width-70px mr-2"><?= 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-100px">Pulse: above</span>
+                    <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_pulse_above', 'number', 'yellowAlertWhenPulseAbove', $patient) ?></div>
+                    <span class="text-secondary mr-2 text-center">or below</span>
+                    <div class="width-70px mr-2"><?= vsElement('yellow_alert_when_pulse_below', 'number', 'yellowAlertWhenPulseBelow', $patient) ?></div>
                 </div>
             </div>
+        </div>
+        <hr class="my-3">
+
 
 
 
-            <p><b>Ideal PM Resting BP</b></p>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingSbp" value="{{$patient->ideal_pm_resting_sbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">SBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingSbpMin" value="{{$patient->ideal_pm_resting_sbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">SBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingSbpMax" value="{{$patient->ideal_pm_resting_sbp_max}}">
-                </div>
-            </div>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingDbp" value="{{$patient->ideal_pm_resting_dbp}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">DBP Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingDbpMin" value="{{$patient->ideal_pm_resting_dbp_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">DBP Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingDbpMax" value="{{$patient->ideal_pm_resting_dbp_max}}">
-                </div>
-            </div>
-            <div class="row mb-2">
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingPulse" value="{{$patient->ideal_pm_resting_pulse}}">
-                </div>
-                <div class="col-4 pr-0">
-                    <label class="text-sm text-secondary mb-1">Pulse Min</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingPulseMin" value="{{$patient->ideal_pm_resting_pulse_min}}">
-                </div>
-                <div class="col-4">
-                    <label class="text-sm text-secondary mb-1">Pulse Max</label>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="idealPmRestingPulseMax" value="{{$patient->ideal_pm_resting_pulse_max}}">
-                </div>
-            </div>
 
-        </div>
         <div class="pt-2">
             <button class="btn btn-success btn-sm" submit>Submit</button>
             <button class="btn btn-default border btn-sm" cancel>Cancel</button>