updated vitals summary

public/css/style.css

@@ -628,31 +628,25 @@ input.search_field, textarea.search_field {
         padding-top: 55px;
     }
 }
-.flex-parent-container {
-  display: flex;
-  align-items: flex-start;
-}
-.flex-parent-container > div:first-child {
-  border-right: 1px solid #eee !important;
-  margin-right: 10px;
-}
-.flex-parent-container > div {
-  flex-basis: 50%;
+
+@media screen and (max-width: 1400px) {
+  .flex-container > div:first-child {
+    margin-bottom: 20px;
+  }
 }
 @media screen and (min-width: 1400px) {
-  .flex-container, .flex-parent-container {
+  .flex-container{
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
   }
-  .flex-container >div {
+  .flex-container > div {
     flex-basis: 50%;
   }
-  .flex-parent-container > div:first-child {
-    flex-basis: 40%;
-  }
-  .flex-parent-container > div {
-    flex-basis: 60%;
+  .flex-container > div:first-child {
+    border-right: 1px solid #eee;
+    margin-right: 20px;
+    padding-right: 20px;
   }
 }
 

resources/views/app/patient/note/dashboard.blade.php

@@ -951,7 +951,7 @@ use App\Models\Handout;
                         <p class="font-weight-bold text-secondary m-0 font-size-14">Vitals Settings</p>
                     </div>
                     <div class="row" id="vitals-settings-{{$patient->uid}}">
-                        <div class="col-4 border-right">
+                        <div class="col-5 border-right">
                             <div class="d-flex align-items-baseline">
                                 <b>BMI/Weight Management</b>
                                 <span class="mx-2 text-secondary">|</span>
@@ -961,7 +961,7 @@ use App\Models\Handout;
                                 @include('app.patient.vitals-settings.bmi-management-summary')
                             </div>
                         </div>
-                        <div class="col-8">
+                        <div class="col-7">
                             <div class="d-flex align-items-baseline">
                                 <b>BP Management</b>
                                 <span class="mx-2 text-secondary">|</span>

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

@@ -23,51 +23,52 @@
 
         <hr class="my-3">
 
-        <div class="mb-1 d-flex align-items-center">
-            <span class="text-secondary min-width-140px">Weight (usual):</span>
-            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-            <div class="width-70px"><?= vsElement('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
-            <span class="text-secondary mx-2 text-center text-sm">and</span>
-            <div class="width-70px"><?= vsElement('usual_weight_in_pounds_max', 'number', 'usualWeightInPoundsMax', $patient) ?></div>
-        </div>
-        <div class="mb-3 d-flex align-items-baseline">
-            {{--<span class="text-secondary min-width-140px">BMI (usual):</span>
-            <div class="width-100px mr-2"><?= vsRoElement('usual_bmi', 'number', 'usualBmi', $patient) ?></div>
-            <span class="text-secondary">
-                <input type="text" readonly=""
-                       class="form-control form-control-sm min-width-unset rounded-0 border-0 bg-transparent font-weight-bold"
-                       name="usualBmiCategory"
-                       value="{{$patient->usual_bmi_category ?: ''}}">
-            </span>--}}
-
-            <span class="text-secondary min-width-140px">BMI (usual):</span>
-            <span class="text-secondary mr-2 text-center text-sm">ranging between</span>
-            <div class="width-70px">
-                <?= vsRoElement('usual_bmi_min', 'number', 'usualBmiMin', $patient) ?>
-                <?= vsRoElement('usual_bmi_min_category', 'text', 'usualBmiMinCategory', $patient, 'bg-transparent p-0 border-0 text-sm text-center text-secondary') ?>
-            </div>
-            <span class="text-secondary mx-2 text-center text-sm">and</span>
-            <div class="width-70px">
-                <?= vsRoElement('usual_bmi_max', 'number', 'usualBmiMax', $patient) ?>
-                <?= vsRoElement('usual_bmi_max_category', 'text', 'usualBmiMaxCategory', $patient, 'bg-transparent p-0 border-0 text-sm text-center text-secondary') ?>
-            </div>
-        </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"><?= vsElement('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $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"><?= vsRoElement('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
-            <span class="text-secondary">
-                <input type="text" readonly=""
-                       class="form-control form-control-sm min-width-unset rounded-0 border-0 bg-transparent font-weight-bold"
-                       name="idealBmiCategory"
-                       value="{{$patient->ideal_bmi_category ?: ''}}">
-            </span>
+        <div class="table-responsive">
+          <table class="table-condensed table-bordered table-sm">
+            <thead>
+              <tr>
+                <th class="border-bottom-0"></th>
+                <th class="border-bottom-0">Weight</th>
+                <th class="border-bottom-0">BMI</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Usual</td>
+                <td>
+                  <div class="width-100px"><?= vsElement('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="width-100px"><?= vsRoElement('usual_bmi_min', 'number', 'usualBmiMin', $patient) ?></div>
+                    <span class="text-secondary">
+                      <input type="text" readonly=""
+                      class="form-control form-control-sm min-width-unset rounded-0 border-0 bg-transparent"
+                      name="usualBmiMinCategory"
+                      value="{{$patient->usual_bmi_min_category ?: ''}}">
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Target</td>
+                <td>
+                  <div class="width-100px"><?= vsElement('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                  <div class="width-100px"><?= vsRoElement('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
+                  <span class="text-secondary">
+                      <input type="text" readonly=""
+                             class="form-control form-control-sm min-width-unset rounded-0 border-0 bg-transparent"
+                             name="idealBmiCategory"
+                             value="{{$patient->ideal_bmi_category ?: ''}}">
+                  </span>
+                </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
 
         <hr class="my-3">

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

@@ -1,70 +1,197 @@
-<div class="mb-3">
-    <span class="text-secondary">Height:</span>
-    <b>
-        <?= ($patient->current_height_in_inches ? floor($patient->current_height_in_inches / 12) : '-') ?>'
-        <?= ($patient->current_height_in_inches ? floor($patient->current_height_in_inches % 12) : '-') ?>"
-    </b>
-</div>
+<div moe class="w-100" id="bmi-management-settings-summary">
+    <form start show>
+      <fieldset disabled>
+        <input type="hidden" name="uid" value="{{$patient->uid}}">
+        <div class="mb-3 d-flex align-items-center">
+            <span class="text-secondary min-width-140px">Current Height:</span>
+            <div class="width-50px mr-1">
+                <input type="text" name="current_height_FT" class="form-control form-control-sm min-width-unset rounded-0"
+                       heightFeetInput
+                       value="{{feetFromInches($patient->current_height_in_inches)}}">
+            </div>
+            <span class="text-secondary mr-2">ft.</span>
+            <div class="width-50px mr-1">
+                <input type="text" name="current_height_IN" class="form-control form-control-sm min-width-unset rounded-0"
+                       heightInchesInput
+                       value="{{inchesAfterFeetFromInches($patient->current_height_in_inches)}}">
+            </div>
+            <span class="text-secondary mr-2">in.</span>
+            <?= vsElement('current_height_in_inches', 'hidden', 'currentHeightInInches', $patient) ?>
+        </div>
 
-<div class="mb-1 d-flex align-items-baseline">
-    <span class="text-secondary text-nowrap">Weight (usual):</span>
-    <div class="ml-2">
-      @if($patient->usual_weight_in_pounds_min)
-        <b>{{$patient->usual_weight_in_pounds_min}}</b>
-        @if($patient->usual_weight_in_pounds_max)
-        - <b>{{$patient->usual_weight_in_pounds_max}}</b>
-        @endif
-      @else
-      <span>-</span>
-      @endif
-    </div>
-</div>
+        <hr class="my-3">
 
-<div class="mb-3 d-flex align-items-baseline">
-    <span class="text-secondary text-nowrap">BMI (usual):</span>
-    <div class="ml-2">
-      @if($patient->usual_bmi_min)
-        <span class="text-nowrap"><b>{{$patient->usual_bmi_min}}</b> {{$patient->usual_bmi_min_category}}</span>
-        @if($patient->usual_bmi_max)
-        - <span class="text-nowrap"><b>{{$patient->usual_bmi_max}}</b> {{$patient->usual_bmi_max_category}}</span>
-        @endif
-      @else
-      <span>-</span>
-      @endif
-    </div>
-</div>
+        <div class="table-responsive">
+          <table class="table-condensed table-bordered table-sm">
+            <thead>
+              <tr>
+                <th class="border-bottom-0"></th>
+                <th class="border-bottom-0">Weight</th>
+                <th class="border-bottom-0">BMI</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Usual</td>
+                <td>
+                  <div class="width-100px"><?= vsElement('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="width-100px"><?= vsRoElement('usual_bmi_min', 'number', 'usualBmiMin', $patient) ?></div>
+                    <span class="text-secondary">
+                      <input type="text" readonly=""
+                      class="form-control form-control-sm min-width-unset rounded-0 border-0 bg-transparent"
+                      name="usualBmiMinCategory"
+                      value="{{$patient->usual_bmi_min_category ?: ''}}">
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Target</td>
+                <td>
+                  <div class="width-100px"><?= vsElement('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                  <div class="width-100px"><?= vsRoElement('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
+                  <span class="text-secondary">
+                      <input type="text" readonly=""
+                             class="form-control form-control-sm min-width-unset rounded-0 border-0 bg-transparent"
+                             name="idealBmiCategory"
+                             value="{{$patient->ideal_bmi_category ?: ''}}">
+                  </span>
+                </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
-<div class="mb-1 d-flex align-items-baseline">
-    <span class="text-secondary text-nowrap">Weight (ideal):</span>
-    <div class="ml-2">
-        <b>{{$patient->ideal_weight_in_pounds ?? '-'}}</b>
-    </div>
-</div>
+        <hr class="my-3">
 
-<div class="mb-3 d-flex align-items-baseline">
-    <span class="text-secondary text-nowrap">BMI (ideal):</span>
-    <div class="ml-2">
-        <b>{{$patient->ideal_bmi ?? '-'}}</b>
-        <span class="text-secondary text-sm">{{$patient->ideal_bmi_category}}</span>
-    </div>
-</div>
+        <div class="mb-2 d-flex align-items-center">
+            <span class="text-secondary min-width-140px">Goal:</span>
+            <div class="width-150px">
+                <select type="text" class="form-control form-control-sm min-width-unset" name="weightManagementGoalCategory">
+                    <option value="">-- select --</option>
+                    <option {{$patient->weight_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
+                    <option {{$patient->weight_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
+                    <option {{$patient->weight_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
+                </select>
+            </div>
+        </div>
 
-<div class="mb-3 d-flex align-items-baseline">
-    <span class="text-secondary mr-2">Goal:</span>
-    <div class="flex-grow-1">{{$patient->weight_management_goal_category ?? '-'}}</div>
-</div>
+        <div class="mb-3 d-flex align-items-center">
+            <span class="text-secondary min-width-140px">Reports heart failure?</span>
+            <div class="width-150px">
+                <select type="text" class="form-control form-control-sm min-width-unset" name="hasHeartFailureDx">
+                    <option value="">-- select --</option>
+                    <option {{$patient->has_heart_failure_dx === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                    <option {{$patient->has_heart_failure_dx === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                    <option {{$patient->has_heart_failure_dx === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                </select>
+            </div>
+        </div>
 
-<div class="mb-3 d-flex align-items-baseline">
-    <span class="text-secondary mr-2">CHF?</span>
-    <div class="flex-grow-1">{{$patient->has_heart_failure_dx ?? '-'}}</div>
-</div>
+        <hr class="my-3">
 
-<div class="mb-3 d-flex align-items-baseline">
-    <span class="text-secondary mr-2">Weight monitoring prescribed?</span>
-    <div class="flex-grow-1">{{$patient->is_weight_monitoring_needed ?? '-'}}</div>
-</div>
+        <div class="mb-3 d-flex align-items-center">
+            <span class="text-secondary min-width-140px mr-2"><b>Monitoring prescribed?</b> </span>
+            <div class="width-150px">
+                <select type="text" class="form-control form-control-sm min-width-unset" name="isWeightMonitoringNeeded">
+                    <option value="">-- select --</option>
+                    <option {{$patient->is_weight_monitoring_needed === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                    <option {{$patient->is_weight_monitoring_needed === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                    <option {{$patient->is_weight_monitoring_needed === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                </select>
+            </div>
+        </div>
 
-<div class="mb-3 d-flex align-items-baseline">
-    <span class="text-secondary mr-2">Remarks:</span>
-    <div class="flex-grow-1">{{$patient->why_is_weight_monitoring_needed ?? '-'}}</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_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"><?= 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"><?= 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"><?= 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>
+        --}}
+
+        <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="whyIsWeightMonitoringNeeded" value="{{$patient->why_is_weight_monitoring_needed}}">
+      </fieldset>
+    </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="whyIsWeightMonitoringNeededIcd' + i + '"]'), $('[name="whyIsWeightMonitoringNeededDescription' + i + '"]'));
+            // }
+
+            let parentSegment = $('#bmi-management-settings-summary');
+            parentSegment.find('[heightFeetInput], [heightInchesInput]').off('change input paste');
+            parentSegment.find('[heightFeetInput], [heightInchesInput]').on('change input paste', function () {
+                let inches = 0;
+                let ft = +(parentSegment.find('[heightFeetInput]').val()),
+                    inc = +(parentSegment.find('[heightInchesInput]').val());
+                inches = Math.round(ft * 12 + inc);
+                parentSegment.find('[name="currentHeightInInches"]').val(inches).trigger('change');
+            });
+        }
+
+        addMCInitializer('bmi-management-settings-summary', init, '#bmi-management-settings-summary');
+
+    }).call(window);
+</script>

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

@@ -1,4 +1,4 @@
-<div moe extra-wide center id="bp-management-settings">
+<div moe wide center id="bp-management-settings">
     <a href="#" start show>Update</a>
     <form url="/api/client/updateBpManagementSettingsValue">
         <input type="hidden" name="uid" value="{{$patient->uid}}">
@@ -6,156 +6,23 @@
 
         <div id="bpManagementComponent" class="row mx-0" v-cloak>
             <div class="col-6 border-right">
-              <div class="d-flex align-items-center mb-2">
-                <h6 class="text-secondary mr-3 mb-0"><b>Usual BP & Pulse</b></h6>
-                <div class="d-flex align-items-start">
-                    <div class="form-check mr-3">
-                        <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
-                        <label class="form-check-label" for="amPmVariation">AM/PM</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 class="table-responsive">
-                    <table class="table-bordered table-condensed table-sm">
-                      <tbody>
-                        <tr>
-                          <td v-if="form.doesUsualBpHaveAmPmVariation">AM</td>
-                          <td v-if="form.doesUsualBpHaveRange"><h6 class="mb-0">LOWEST</h6></td>
-                          <td>
-                            <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" v-model="form.usualAmRestingSbpMin" />
-                            <span>/</span>
-                            <input type="text" class="inline-input-underlined width-50 mr-2" name="usualAmRestingDbpMin" v-model="form.usualAmRestingDbpMin" />
-                          </td>
-                          <td>
-                            <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" v-model="form.usualAmRestingPulseMin" />
-                            <span>BPM</span>
-                          </td>
-                        </tr>
-                        <tr v-if="form.doesUsualBpHaveRange">
-                          <td v-if="form.doesUsualBpHaveAmPmVariation"></td>
-                          <td><h6 class="mb-0">HIGHEST</h6></td>
-                          <td>
-                            <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-2" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
-                          </td>
-                          <td><input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" /> <span>BPM</span></td>
-                        </tr>
-                        <tr v-if="form.doesUsualBpHaveAmPmVariation">
-                          <td>PM</td>
-                          <td v-if="form.doesUsualBpHaveRange"><h6 class="mb-0">LOWEST</h6></td>
-                          <td>
-                            <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-2" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
-                          </td>
-                          <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" /> <span>BPM</span></td>
-                        </tr>
-                        <tr v-if="form.doesUsualBpHaveAmPmVariation && form.doesUsualBpHaveRange">
-                          <td></td>
-                          <td v-if="form.doesUsualBpHaveRange"><h6 class="mb-0">HIGHEST</h6></td>
-                          <td>
-                            <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-2" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
-                          </td>
-                          <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" /> <span>BPM</span></td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                    <hr class="my-3">
-                    <div class="mb-3 d-flex align-items-start">
-                      <div class="text-secondary font-weight-bold">Ideal BP:</div>
-                        <div class="d-flex align-items-center">
-                            <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 }}" />
-                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" /> <span>BPM</span>
-                        </div>
-                    </div>
-                    <hr class="my-3">
-                    <div class="text-secondary font-weight-bold mb-3">Alerts</div>
-                    <div class="pl-3 mb-3 d-flex align-items-start">
-                        <div class="text-secondary font-weight-bold mr-2"><i class="fa fa-circle text-danger mr-2"></i></div>
-                        <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 }}" />
-                              <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseAbove" value="{{ $patient->red_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="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 }}" />
-                              <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
-                              <span>BPM</span>
-                          </div>
-                        </div>
-                    </div>
-                    <div class="pl-3 mb-3 d-flex align-items-start">
-                        <div class="text-secondary font-weight-bold mr-2"><i class="fa fa-circle text-warning-mellow mr-2"></i></div>
-                        <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 }}" />
-                              <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 }}" />
-                              <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
-                              <span>BPM</span>
-                          </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-6">
-                <div class="mb-2 d-flex align-items-start">
-                    <span class="text-secondary min-width-140px w-50">Reports prehypertension?</span>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary min-width-140px w-50">BP Status</span>
                     <div class="w-50">
-                        <select type="text" class="form-control form-control-sm min-width-unset" name="hasPrehypertensionDx">
+                        <select type="text" class="form-control form-control-sm min-width-unset" v-model="form.bloodPressureHealthStatus" name="bloodPressureHealthStatus">
                             <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>
+                            <option value="PREHYPERTENSION">Prehypertension</option>
+                            <option value="HYPERTENSION">Hypertension</option>
+                            <option value="HYPOTENSIVE">Hypontensive</option>
+                            <option value="NORMAL">Normal</option>
+                            <option value="OTHER">Other</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">
+                <div class="mb-2 d-flex align-items-center">
                     <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">
+                        <select type="text" class="form-control form-control-sm min-width-unset" v-model="form.isPrescribedHypertensionMedicine" 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>
@@ -163,10 +30,10 @@
                         </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="mb-2 d-flex align-items-center">
+                    <span class="text-secondary min-width-140px w-50">Goal to reduce HTN meds?</span>
                     <div class="w-50">
-                        <select type="text" class="form-control form-control-sm min-width-unset" name="isGoalToReduceHypertensionMedicine">
+                        <select type="text" class="form-control form-control-sm min-width-unset" v-model="form.isGoalToReduceHypertensionMedicine" 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>
@@ -174,13 +41,14 @@
                         </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 v-if="form.isGoalToReduceHypertensionMedicine == 'YES'">
+                    <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>
 
                 <div class="my-3 d-flex align-items-center">
                     <span class="text-secondary min-width-140px w-50">
-                        <strong>BP monitoring prescribed?</strong>
+                        <strong>BP monitoring Rx'd?</strong>
                     </span>
                     <div class="w-50">
                         <select type="text" class="form-control form-control-sm min-width-unset" name="isBpMonitoringNeeded">
@@ -192,45 +60,142 @@
                     </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}}">
+                <textarea name="whyIsBpMonitoringNeeded" class="form-control form-control-sm min-width-unset" rows="3">{{$patient->why_is_bp_monitoring_needed}}</textarea>
 
             </div>
+            <div class="col-6">
+                <div class="d-flex align-items-center mb-2">
+                    <h6 class="text-secondary mr-3 mb-0"><b>Usual BP & Pulse</b></h6>
+                    <div class="d-flex align-items-start">
+                        <div class="form-check mr-3">
+                            <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
+                            <label class="form-check-label" for="amPmVariation">AM/PM</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 class="table-responsive">
+                        <table class="table-bordered table-condensed table-sm">
+                            <tbody>
+                                <tr>
+                                    <td v-if="form.doesUsualBpHaveAmPmVariation"><i class="fas fa-sun mr-1"></i>AM</td>
+                                    <td v-if="form.doesUsualBpHaveRange">
+                                        <h6 class="mb-0">LOWEST</h6>
+                                    </td>
+                                    <td>
+                                        <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" v-model="form.usualAmRestingSbpMin" />
+                                        <span>/</span>
+                                        <input type="text" class="inline-input-underlined width-50 mr-2" name="usualAmRestingDbpMin" v-model="form.usualAmRestingDbpMin" />
+                                    </td>
+                                    <td>
+                                        <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" v-model="form.usualAmRestingPulseMin" />
+                                        <span>BPM</span>
+                                    </td>
+                                </tr>
+                                <tr v-if="form.doesUsualBpHaveRange">
+                                    <td v-if="form.doesUsualBpHaveAmPmVariation"></td>
+                                    <td>
+                                        <h6 class="mb-0">HIGHEST</h6>
+                                    </td>
+                                    <td>
+                                        <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-2" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
+                                    </td>
+                                    <td><input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" /> <span>BPM</span></td>
+                                </tr>
+                                <tr v-if="form.doesUsualBpHaveAmPmVariation">
+                                    <td><i class="fas fa-moon mr-1"></i>PM</td>
+                                    <td v-if="form.doesUsualBpHaveRange">
+                                        <h6 class="mb-0">LOWEST</h6>
+                                    </td>
+                                    <td>
+                                        <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-2" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
+                                    </td>
+                                    <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" /> <span>BPM</span></td>
+                                </tr>
+                                <tr v-if="form.doesUsualBpHaveAmPmVariation && form.doesUsualBpHaveRange">
+                                    <td></td>
+                                    <td v-if="form.doesUsualBpHaveRange">
+                                        <h6 class="mb-0">HIGHEST</h6>
+                                    </td>
+                                    <td>
+                                        <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-2" name="usualPmRestingDbpMax" value="{{ $patient->usual_pm_resting_dbp_max }}" />
+                                    </td>
+                                    <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMax" value="{{ $patient->usual_pm_resting_pulse_max }}" /> <span>BPM</span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <hr class="my-3">
+                    <div class="mb-3 d-flex align-items-start">
+                        <div class="text-secondary font-weight-bold mr-2">Ideal BP:</div>
+                        <div class="d-flex align-items-center">
+                            <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 }}" />
+                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" /> <span>BPM</span>
+                        </div>
+                    </div>
+                    <hr class="my-3">
+                    <div class="text-secondary font-weight-bold mb-3">Alerts</div>
+                    <div class="mb-2 d-flex align-items-start">
+                        <div class="text-secondary font-weight-bold mr-2"><i class="fa fa-circle text-danger"></i></div>
+                        <div>
+                            <div class="d-flex align-items-center mb-2">
+                                <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 }}" />
+                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseAbove" value="{{ $patient->red_alert_when_pulse_above }}" />
+                                <span>BPM</span>
+                            </div>
+                            <div class="d-flex align-items-center mb-2">
+                                <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 }}" />
+                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
+                                <span>BPM</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mb-2 d-flex align-items-start">
+                        <div class="text-secondary font-weight-bold mr-2"><i class="fa fa-circle text-warning-mellow"></i></div>
+                        <div>
+                            <div class="d-flex align-items-center mb-2">
+                                <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 }}" />
+                                <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-2">
+                                <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 }}" />
+                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
+                                <span>BPM</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="pt-2">
@@ -252,7 +217,10 @@
                 doesUsualBpHaveRange: parseInt(doesUsualBpHaveRange),
                 usualAmRestingSbpMin: '{{ $patient->usual_am_resting_sbp_min }}',
                 usualAmRestingDbpMin: '{{ $patient->usual_am_resting_dbp_min }}',
-                usualAmRestingPulseMin: '{{ $patient->usual_am_resting_pulse_min }}'
+                usualAmRestingPulseMin: '{{ $patient->usual_am_resting_pulse_min }}',
+                bloodPressureHealthStatus: '{{ $patient->blood_pressure_health_status }}',
+                isPrescribedHypertensionMedicine: '{{$patient->is_prescribed_hypertension_medicine}}',
+                isGoalToReduceHypertensionMedicine: '{{$patient->is_goal_to_reduce_hypertension_medicine}}'
             }
         },
         methods: {

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

@@ -1,226 +1,263 @@
-
-<div class="flex-container">
-    <div>
-        <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 mb-2">
-                    @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>{{$patient->usual_am_resting_sbp_min ?? '-'}}</b></span>
-                    @if($patient->usual_am_resting_dbp_min)
-                    <span>/</span>
-                    <span class="mr-2"><b>{{$patient->usual_am_resting_dbp_min}}</b></span>
-                    @endif
-                    @if($patient->usual_am_resting_pulse_min)
-                    <span class="mr-2">Pulse:</span>
-                    <span><b>{{$patient->usual_am_resting_pulse_min}}</b></span>
-                    <span class="ml-2">BPM</span>
-                    @endif
+<div class="w-100" moe center id="bp-management-settings-summary">
+    <form start show url="">
+      <fieldset disabled>
+        <div id="bpManagementComponentSummary" class="flex-container mx-0" v-cloak>
+            <div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary min-width-140px w-50">BP Status</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" v-model="form.bloodPressureHealthStatus" name="bloodPressureHealthStatus">
+                            <option value="">-- select --</option>
+                            <option value="PREHYPERTENSION">Prehypertension</option>
+                            <option value="HYPERTENSION">Hypertension</option>
+                            <option value="HYPOTENSIVE">Hypontensive</option>
+                            <option value="NORMAL">Normal</option>
+                            <option value="OTHER">Other</option>
+                        </select>
+                    </div>
                 </div>
-                @if($patient->does_usual_bp_have_range)
-                    <div class="d-flex align-items-center mb-2">
-                        <h6 class="mb-0 mr-2">HIGHEST:</h6>
-                        <h6 class="mb-0 mr-2">BP:</h6>
-                        <span><b>{{$patient->usual_am_resting_sbp_max ?? '-'}}</b></span>
-                        @if($patient->usual_am_resting_dbp_max)
-                        <span>/</span>
-                        <span class="mr-2"><b>{{$patient->usual_am_resting_dbp_max}}</b></span>
-                        @endif
-                        @if($patient->usual_am_resting_pulse_max)
-                        <span class="mr-2">Pulse:</span>
-                        <span><b>{{$patient->usual_am_resting_pulse_max}}</b></span>
-                        <span class="ml-2">BPM</span>
-                        @endif
+                <div class="mb-2 d-flex align-items-center">
+                    <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" v-model="form.isPrescribedHypertensionMedicine" 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>
-                @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 mb-2">
-                        @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>{{$patient->usual_pm_resting_sbp_min ?? '-'}}</b></span>
-                        @if($patient->usual_pm_resting_dbp_min)
-                        <span>/</span>
-                        <span class="mr-2"><b>{{$patient->usual_pm_resting_dbp_min}}</b></span>
-                        @endif
-                        @if($patient->usual_pm_resting_pulse_min)
-                        <span class="mr-2">Pulse:</span>
-                        <span><b>{{$patient->usual_pm_resting_pulse_min}}</b></span>
-                        <span class="ml-2">BPM</span>
-                        @endif
+                </div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary min-width-140px w-50">Goal to reduce HTN meds?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" v-model="form.isGoalToReduceHypertensionMedicine" 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>
-                    @if($patient->does_usual_bp_have_range)
-                    <div class="d-flex align-items-center mb-2">
-                      @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>{{$patient->usual_pm_resting_sbp_max ?? '-'}}</b></span>
-                      @if($patient->usual_pm_resting_dbp_max)
-                      <span>/</span>
-                      <span class="mr-2"><b>{{$patient->usual_pm_resting_dbp_max}}</b></span>
-                      @endif
-                      @if($patient->usual_pm_resting_pulse_max)
-                      <span class="mr-2">Pulse:</span>
-                      <span><b>{{$patient->usual_pm_resting_pulse_max}}</b></span>
-                      <span class="ml-2">BPM</span>
-                      @endif
+                </div>
+                <div v-if="form.isGoalToReduceHypertensionMedicine == 'YES'">
+                    <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>
+
+                <div class="my-3 d-flex align-items-center">
+                    <span class="text-secondary min-width-140px w-50">
+                        <strong>BP monitoring Rx'd?</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>
-                    @endif
-                @endif
-            </div>
-        </div>
-        @if($patient->ideal_am_resting_sbp_min)
-        <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">
-                    <h6 class="mb-0 mr-2">Target:</h6>
-                    <h6 class="mb-0 mr-2">BP:</h6>
-                    <span><b>{{$patient->ideal_am_resting_sbp_min ?? '-'}}</b></span>
-                    @if($patient->ideal_am_resting_dbp_min)
-                    <span>/</span>
-                    <span class="mr-2"><b>{{$patient->ideal_am_resting_dbp_min}}</b></span>
-                    @endif
-                    @if($patient->ideal_am_resting_pulse)
-                    <span class="mr-2">Pulse:</span>
-                    <span><b>{{$patient->ideal_am_resting_pulse}}</b></span>
-                    <span class="ml-2">BPM</span>
-                    @endif
                 </div>
-            </div>
-        </div>
-        @endif
 
-        <div class="mb-3">
-            <h6 class="text-secondary font-weight-bold mb-3">Alerts</h6>
-            <div class="pl-3">
-                <div class="d-flex align-items-start mb-3">
-                  <?php
-                    $redAlertHasContent = $patient->red_alert_when_sbp_above || $patient->red_alert_when_sbp_below;
-                   ?>
-                    <div class="mr-2"><i class="fa fa-circle text-danger"></i> @if(!$redAlertHasContent)<span class="ml-2">-</span> @endif</div>
-                    <div>
-                      @if($redAlertHasContent)
-                      <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>{{$patient->red_alert_when_sbp_above ?? '-'}}</b></span>
-                          @if($patient->red_alert_when_dbp_above)
-                          <span>/</span>
-                          <span class="mr-2"><b>{{$patient->red_alert_when_dbp_above}}</b></span>
-                          @endif
-                          @if($patient->red_alert_when_pulse_above)
-                          <span class="mr-2">Pulse:</span>
-                          <span><b>{{$patient->red_alert_when_pulse_above}}</b></span>
-                          <span class="ml-2">BPM</span>
-                          @endif
-                      </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>{{$patient->red_alert_when_sbp_below ?? '-'}}</b></span>
-                          @if($patient->red_alert_when_dbp_below)
-                          <span>/</span>
-                          <span class="mr-2"><b>{{$patient->red_alert_when_dbp_below}}</b></span>
-                          @endif
-                          @if($patient->red_alert_when_pulse_below)
-                          <span class="mr-2">Pulse:</span>
-                          <span><b>{{$patient->red_alert_when_pulse_below}}</b></span>
-                          <span class="ml-2">BPM</span>
-                          @endif
-                      </div>
-                      @endif
+                <div class="text-secondary min-width-140px mb-1">Remarks on clinical need:</div>
+                <textarea name="whyIsBpMonitoringNeeded" class="form-control form-control-sm min-width-unset" rows="3">{{$patient->why_is_bp_monitoring_needed}}</textarea>
+
+            </div>
+            <div class="">
+                <div class="d-flex align-items-center mb-2">
+                    <h6 class="text-secondary mr-3 mb-0"><b>Usual BP & Pulse</b></h6>
+                    <div class="d-flex align-items-start">
+                        <div class="form-check mr-3">
+                            <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
+                            <label class="form-check-label" for="amPmVariation">AM/PM</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 class="d-flex align-items-start mb-3">
-                    <?php
-                      $yellowAlertHasContent = $patient->yellow_alert_when_sbp_above || $patient->yellow_alert_when_sbp_below;
-                     ?>
-                    <div class="mr-2"><i class="fa fa-circle text-warning-mellow"></i> @if(!$yellowAlertHasContent)<span class="ml-2">-</span> @endif</div>
-                    <div>
-                      @if($yellowAlertHasContent)
-                      <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>{{$patient->yellow_alert_when_sbp_above ?? '-'}}</b></span>
-                          @if($patient->yellow_alert_when_dbp_above)
-                          <span>/</span>
-                          <span class="mr-2"><b>{{$patient->yellow_alert_when_dbp_above}}</b></span>
-                          @endif
-                          @if($patient->yellow_alert_when_pulse_above)
-                          <span class="mr-2">Pulse:</span>
-                          <span><b>{{$patient->yellow_alert_when_pulse_above}}</b></span>
-                          <span class="ml-2">BPM</span>
-                          @endif
-                      </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>{{$patient->yellow_alert_when_sbp_below ?? '-'}}</b></span>
-                          @if($patient->yellow_alert_when_dbp_below)
-                          <span>/</span>
-                          <span class="mr-2"><b>{{$patient->yellow_alert_when_dbp_below}}</b></span>
-                          @endif
-                          @if($patient->yellow_alert_when_pulse_below)
-                          <span class="mr-2">Pulse:</span>
-                          <span><b>{{$patient->yellow_alert_when_pulse_below}}</b></span>
-                          <span class="ml-2">BPM</span>
-                          @endif
-                      </div>
-                      @endif
+                <div>
+                    <div class="table-responsive">
+                        <table class="table-bordered table-condensed table-sm">
+                            <tbody>
+                                <tr>
+                                    <td v-if="form.doesUsualBpHaveAmPmVariation"><i class="fas fa-sun mr-1"></i>AM</td>
+                                    <td v-if="form.doesUsualBpHaveRange">
+                                        <h6 class="mb-0">LOWEST</h6>
+                                    </td>
+                                    <td>
+                                        <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" v-model="form.usualAmRestingSbpMin" />
+                                        <span>/</span>
+                                        <input type="text" class="inline-input-underlined width-50 mr-2" name="usualAmRestingDbpMin" v-model="form.usualAmRestingDbpMin" />
+                                    </td>
+                                    <td>
+                                        <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" v-model="form.usualAmRestingPulseMin" />
+                                        <span>BPM</span>
+                                    </td>
+                                </tr>
+                                <tr v-if="form.doesUsualBpHaveRange">
+                                    <td v-if="form.doesUsualBpHaveAmPmVariation"></td>
+                                    <td>
+                                        <h6 class="mb-0">HIGHEST</h6>
+                                    </td>
+                                    <td>
+                                        <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-2" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
+                                    </td>
+                                    <td><input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" /> <span>BPM</span></td>
+                                </tr>
+                                <tr v-if="form.doesUsualBpHaveAmPmVariation">
+                                    <td><i class="fas fa-moon mr-1"></i>PM</td>
+                                    <td v-if="form.doesUsualBpHaveRange">
+                                        <h6 class="mb-0">LOWEST</h6>
+                                    </td>
+                                    <td>
+                                        <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-2" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
+                                    </td>
+                                    <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" /> <span>BPM</span></td>
+                                </tr>
+                                <tr v-if="form.doesUsualBpHaveAmPmVariation && form.doesUsualBpHaveRange">
+                                    <td></td>
+                                    <td v-if="form.doesUsualBpHaveRange">
+                                        <h6 class="mb-0">HIGHEST</h6>
+                                    </td>
+                                    <td>
+                                        <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-2" name="usualPmRestingDbpMax" value="{{ $patient->usual_pm_resting_dbp_max }}" />
+                                    </td>
+                                    <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMax" value="{{ $patient->usual_pm_resting_pulse_max }}" /> <span>BPM</span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <hr class="my-3">
+                    <div class="mb-3 d-flex align-items-start">
+                        <div class="text-secondary font-weight-bold mr-2">Ideal BP:</div>
+                        <div class="d-flex align-items-center">
+                            <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 }}" />
+                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" /> <span>BPM</span>
+                        </div>
+                    </div>
+                    <hr class="my-3">
+                    <div class="text-secondary font-weight-bold mb-3">Alerts</div>
+                    <div class="mb-2 d-flex align-items-start">
+                        <div class="text-secondary font-weight-bold mr-2"><i class="fa fa-circle text-danger"></i></div>
+                        <div>
+                            <div class="d-flex align-items-center mb-2">
+                                <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 }}" />
+                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseAbove" value="{{ $patient->red_alert_when_pulse_above }}" />
+                                <span>BPM</span>
+                            </div>
+                            <div class="d-flex align-items-center mb-2">
+                                <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 }}" />
+                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
+                                <span>BPM</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mb-2 d-flex align-items-start">
+                        <div class="text-secondary font-weight-bold mr-2"><i class="fa fa-circle text-warning-mellow"></i></div>
+                        <div>
+                            <div class="d-flex align-items-center mb-2">
+                                <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 }}" />
+                                <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-2">
+                                <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 }}" />
+                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
+                                <span>BPM</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-
-    </div>
-    <div class="">
-        <div class="table-responsive">
-            <table class="table table-sm table-striped table-bordered">
-                <tbody>
-                    <tr>
-                        <td>Reports prehypertension?</td>
-                        <td>{{$patient->has_prehypertension_dx ?? '-'}}</td>
-                    </tr>
-                    <tr>
-                        <td>Reports hypertension?</td>
-                        <td>{{$patient->has_hypertension_dx ?? '-'}}</td>
-                    </tr>
-                    <tr>
-                        <td>Reports hypertension medicine?</td>
-                        <td>{{$patient->is_prescribed_hypertension_medicine ?? '-'}}</td>
-                    </tr>
-                    <tr>
-                        <td>Is it a goal to reduce<br>hypertension medicine?</td>
-                        <td>{{$patient->is_goal_to_reduce_hypertension_medicine ?? '-'}}</td>
-                    </tr>
-                    <tr>
-                        <td>Describe the goal</td>
-                        <td>{{$patient->goal_to_reduce_hypertension_medicine_memo ?? '-'}}</td>
-                    </tr>
-                    <tr>
-                        <td>BP monitoring prescribed?</td>
-                        <td>{{$patient->is_bp_monitoring_needed ?? '-'}}</td>
-                    </tr>
-                    <tr>
-                        <td>BP monitoring prescribed?</td>
-                        <td>{{$patient->is_bp_monitoring_needed ?? '-'}}</td>
-                    </tr>
-                    <tr>
-                        <td>Remarks</td>
-                        <td>{{$patient->why_is_bp_monitoring_needed ?? '-'}}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
+      </fieldset>
+    </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: '#bpManagementComponentSummary',
+        data: {
+            form: {
+                doesUsualBpHaveAmPmVariation: parseInt(doesUsualBpHaveAmPmVariation),
+                doesUsualBpHaveRange: parseInt(doesUsualBpHaveRange),
+                usualAmRestingSbpMin: '{{ $patient->usual_am_resting_sbp_min }}',
+                usualAmRestingDbpMin: '{{ $patient->usual_am_resting_dbp_min }}',
+                usualAmRestingPulseMin: '{{ $patient->usual_am_resting_pulse_min }}',
+                bloodPressureHealthStatus: '{{ $patient->blood_pressure_health_status }}',
+                isPrescribedHypertensionMedicine: '{{$patient->is_prescribed_hypertension_medicine}}',
+                isGoalToReduceHypertensionMedicine: '{{$patient->is_goal_to_reduce_hypertension_medicine}}'
+            }
+        },
+        methods: {
+
+            init: function() {
+                console.log({
+                    form: this.form
+                });
+            }
+        }
+    });
+    (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 + '"]'));
+            // }
+            BPManagementComponent.init();
+        }
+
+        addMCInitializer('bp-management-settings-summary', init, '#bp-management-settings-summary');
+
+    }).call(window);
+</script>