Updates

public/css/style.css

@@ -339,6 +339,10 @@ body>nav.navbar {
     left: calc(50% - 400px);
     width: 800px;
 }
+[moe][center][extra-wide] [url]:not([show]) {
+    left: calc(50% - 450px);
+    width: 900px;
+}
 [moe][center] [url]:not([show]) .form-control.form-control-sm {
     min-width: unset;
     max-width: 100%;

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

@@ -1,287 +1,285 @@
-<button type="button" class="p-0 m-0 btn btn-link" data-toggle="modal" data-target="#bp-management-settings">
-  Update
-</button>
+<div moe extra-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}}">
+        <p class="text-secondary font-weight-bold font-size-14">BP Management</p>
 
-<div class="modal fade" id="bp-management-settings" tabindex="-1" aria-labelledby="bp-management-settingsLabel" aria-hidden="true">
-  <div class="modal-dialog modal-xl modal-dialog-centered">
-    <div class="modal-content">
-      <div moe start class="modal-body">
-        <form show url="/api/client/updateBpManagementSettingsValue">
-            <input type="hidden" name="uid" value="{{$patient->uid}}">
-            <p class="text-secondary font-weight-bold font-size-14">BP Management</p>
+        <div id="bpManagementComponent" class="row mx-0" v-cloak>
+            <div class="col-7 border-right">
+                <div class="text-secondary font-weight-bold mb-3">Blood Pressure & Pulse:</div>
+                <div class="pl-3">
+                    <h6 class="text-secondary mb-3"><b>Usual:</b></h6>
+                    <div class="d-flex pl-3">
+                        <div class="d-flex flex-column">
+                            <div v-if="form.doesUsualBpHaveAmPmVariation" class="text-secondary font-weight-bold mb-2">
+                                <i class="fa fa-sun mr-2"></i>AM
+                            </div>
+                            <div class="d-flex align-items-center mb-3">
+                                <h6 v-if="form.doesUsualBpHaveRange" class="mb-0 mr-3">LOWEST:</h6>
+                                <h6 class="mb-0 mr-3">BP:</h6>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" value="{{ $patient->usual_am_resting_sbp_min }}" />
+                                <span>/</span>
+                                <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMin" value="{{ $patient->usual_am_resting_dbp_min }}" />
+                                <span>mm Hg Pulse:</span>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" value="{{ $patient->usual_am_resting_pulse_min }}" />
+                                <span>BPM</span>
+                            </div>
+
+                            <div v-if="form.doesUsualBpHaveRange" class="d-flex align-items-center mb-3">
+                                <h6 class="mb-0 mr-3">HIGHEST:</h6>
+                                <h6 class="mb-0 mr-3">BP:</h6>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMax" value="{{ $patient->usual_am_resting_sbp_max }}" />
+                                <span>/</span>
+                                <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
+                                <span>mm Hg Pulse:</span>
+                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" />
+                                <span>BPM</span>
+                            </div>
 
-            <div id="bpManagementComponent" class="row mx-0" v-cloak>
-                <div class="col-6 border-right">
-                    <div class="text-secondary font-weight-bold mb-3">Blood Pressure & Pulse:</div>
-                    <div class="pl-3">
-                        <h6 class="text-secondary mb-3"><b>Usual:</b></h6>
-                        <div class="d-flex pl-3">
-                            <div class="d-flex flex-column">
-                                <div v-if="form.doesUsualBpHaveAmPmVariation" class="text-secondary font-weight-bold mb-2">
-                                    <i class="fa fa-sun mr-2"></i>AM
+                            <div v-if="form.doesUsualBpHaveAmPmVariation">
+                                <!-- Moon -->
+                                <div class="text-secondary font-weight-bold mb-2">
+                                    <i class="fa fa-moon mr-2"></i>PM
                                 </div>
                                 <div class="d-flex align-items-center mb-3">
                                     <h6 v-if="form.doesUsualBpHaveRange" class="mb-0 mr-3">LOWEST:</h6>
                                     <h6 class="mb-0 mr-3">BP:</h6>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" value="{{ $patient->usual_am_resting_sbp_min }}" />
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMin" value="{{ $patient->usual_pm_resting_sbp_min }}" />
                                     <span>/</span>
-                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMin" value="{{ $patient->usual_am_resting_dbp_min }}" />
+                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
                                     <span>mm Hg Pulse:</span>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" value="{{ $patient->usual_am_resting_pulse_min }}" />
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" />
                                     <span>BPM</span>
                                 </div>
-
                                 <div v-if="form.doesUsualBpHaveRange" class="d-flex align-items-center mb-3">
                                     <h6 class="mb-0 mr-3">HIGHEST:</h6>
                                     <h6 class="mb-0 mr-3">BP:</h6>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMax" value="{{ $patient->usual_am_resting_sbp_max }}" />
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMax" value="{{ $patient->usual_pm_resting_sbp_max }}" />
                                     <span>/</span>
-                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
+                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMax" value="{{ $patient->usual_pm_resting_dbp_max }}" />
                                     <span>mm Hg Pulse:</span>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" />
+                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMax" value="{{ $patient->usual_pm_resting_pulse_max }}" />
                                     <span>BPM</span>
                                 </div>
 
-                                <div v-if="form.doesUsualBpHaveAmPmVariation">
-                                    <!-- Moon -->
-                                    <div class="text-secondary font-weight-bold mb-2">
-                                        <i class="fa fa-moon mr-2"></i>PM
-                                    </div>
-                                    <div class="d-flex align-items-center mb-3">
-                                        <h6 v-if="form.doesUsualBpHaveRange" class="mb-0 mr-3">LOWEST:</h6>
-                                        <h6 class="mb-0 mr-3">BP:</h6>
-                                        <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMin" value="{{ $patient->usual_pm_resting_sbp_min }}" />
-                                        <span>/</span>
-                                        <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
-                                        <span>mm Hg Pulse:</span>
-                                        <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" />
-                                        <span>BPM</span>
-                                    </div>
-                                    <div v-if="form.doesUsualBpHaveRange" class="d-flex align-items-center mb-3">
-                                        <h6 class="mb-0 mr-3">HIGHEST:</h6>
-                                        <h6 class="mb-0 mr-3">BP:</h6>
-                                        <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMax" value="{{ $patient->usual_pm_resting_sbp_max }}" />
-                                        <span>/</span>
-                                        <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMax" value="{{ $patient->usual_pm_resting_dbp_max }}" />
-                                        <span>mm Hg Pulse:</span>
-                                        <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMax" value="{{ $patient->usual_pm_resting_pulse_max }}" />
-                                        <span>BPM</span>
-                                    </div>
+                            </div>
 
+                            <div>
+                                <div class="form-check mb-2">
+                                    <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
+                                    <label class="form-check-label" for="amPmVariation">AM/PM Variation</label>
                                 </div>
-
-                                <div class="d-flex">
-                                    <div class="form-check mr-4">
-                                        <input type="checkbox" class="form-check-input mt-1" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
-                                        <label class="form-check-label" for="amPmVariation">AM/PM Variation</label>
-                                    </div>
-                                    <div class="form-check">
-                                        <input type="checkbox" class="form-check-input mt-1" id="bpRange" name="doesUsualBpHaveRange" v-model="form.doesUsualBpHaveRange">
-                                        <label class="form-check-label" for="bpRange">Range</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>
 
-                        <hr class="my-3">
-                        <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
-                        <div class="pl-3 mb-3">
-                            <div class="d-flex align-items-center mb-3">
-                                <h6 class="mb-0 mr-3">Target:</h6>
-                                <h6 class="mb-0 mr-3">BP:</h6>
-                                <input type="text" class="inline-input-underlined width-50" name="idealAmRestingSbpMin" value="{{ $patient->ideal_am_resting_sbp_min }}" />
-                                <span>/</span>
-                                <input type="text" class="inline-input-underlined width-50 mr-3" name="idealAmRestingDbpMin" value="{{ $patient->ideal_am_resting_dbp_min }}" />
-                                <span>mm Hg Pulse:</span>
-                                <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" />
-                                <span>BPM</span>
-                            </div>
+                    <hr class="my-3">
+                    <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
+                    <div class="pl-3 mb-3">
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Target:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingSbpMin" value="{{ $patient->ideal_am_resting_sbp_min }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="idealAmRestingDbpMin" value="{{ $patient->ideal_am_resting_dbp_min }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" />
+                            <span>BPM</span>
                         </div>
-                        <hr class="my-3">
-                        <div class="text-secondary font-weight-bold mb-3">Alerts</div>
-                        <div class="pl-3 mb-3">
-                            <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-danger mr-2"></i>Red</div>
-                            <div class="d-flex align-items-center mb-3">
-                                <h6 class="mb-0 mr-3">Above:</h6>
-                                <h6 class="mb-0 mr-3">BP:</h6>
-                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpAbove" value="{{ $patient->red_alert_when_sbp_above }}" />
-                                <span>/</span>
-                                <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpAbove" value="{{ $patient->red_alert_when_dbp_above }}" />
-                                <span>mm Hg Pulse:</span>
-                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseAbove" value="{{ $patient->red_alert_when_pulse_above }}" />
-                                <span>BPM</span>
-                            </div>
-                            <div class="d-flex align-items-center mb-3">
-                                <h6 class="mb-0 mr-3">Below:</h6>
-                                <h6 class="mb-0 mr-3">BP:</h6>
-                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpBelow" value="{{ $patient->red_alert_when_sbp_below }}" />
-                                <span>/</span>
-                                <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpBelow" value="{{ $patient->red_alert_when_dbp_below }}" />
-                                <span>mm Hg Pulse:</span>
-                                <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
-                                <span>BPM</span>
-                            </div>
+                    </div>
+                    <hr class="my-3">
+                    <div class="text-secondary font-weight-bold mb-3">Alerts</div>
+                    <div class="pl-3 mb-3">
+                        <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-danger mr-2"></i>Red</div>
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Above:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpAbove" value="{{ $patient->red_alert_when_sbp_above }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpAbove" value="{{ $patient->red_alert_when_dbp_above }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseAbove" value="{{ $patient->red_alert_when_pulse_above }}" />
+                            <span>BPM</span>
                         </div>
-                        <div class="pl-3 mb-3">
-                            <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-warning-mellow mr-2"></i>Yellow</div>
-                            <div class="d-flex align-items-center mb-3">
-                                <h6 class="mb-0 mr-3">Above:</h6>
-                                <h6 class="mb-0 mr-3">BP:</h6>
-                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpAbove" value="{{ $patient->yellow_alert_when_sbp_above }}" />
-                                <span>/</span>
-                                <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpAbove" value="{{ $patient->yellow_alert_when_dbp_above }}" />
-                                <span>mm Hg Pulse:</span>
-                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseAbove" value="{{ $patient->yellow_alert_when_pulse_above }}" />
-                                <span>BPM</span>
-                            </div>
-                            <div class="d-flex align-items-center mb-3">
-                                <h6 class="mb-0 mr-3">Below:</h6>
-                                <h6 class="mb-0 mr-3">BP:</h6>
-                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpBelow" value="{{ $patient->yellow_alert_when_sbp_below }}" />
-                                <span>/</span>
-                                <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpBelow" value="{{ $patient->yellow_alert_when_dbp_below }}" />
-                                <span>mm Hg Pulse:</span>
-                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
-                                <span>BPM</span>
-                            </div>
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Below:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpBelow" value="{{ $patient->red_alert_when_sbp_below }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpBelow" value="{{ $patient->red_alert_when_dbp_below }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
+                            <span>BPM</span>
                         </div>
                     </div>
-                </div>
-                <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="w-50">
-                            <select type="text" class="form-control form-control-sm min-width-unset" name="hasPrehypertensionDx">
-                                <option value="">-- select --</option>
-                                <option {{$patient->has_prehypertension_dx === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
-                                <option {{$patient->has_prehypertension_dx === 'NO' ? 'selected' : ''}} value="NO">No</option>
-                                <option {{$patient->has_prehypertension_dx === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
-                            </select>
+                    <div class="pl-3 mb-3">
+                        <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-warning-mellow mr-2"></i>Yellow</div>
+                        <div class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Above:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpAbove" value="{{ $patient->yellow_alert_when_sbp_above }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpAbove" value="{{ $patient->yellow_alert_when_dbp_above }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseAbove" value="{{ $patient->yellow_alert_when_pulse_above }}" />
+                            <span>BPM</span>
                         </div>
-                    </div>
-                    <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 class="d-flex align-items-center mb-3">
+                            <h6 class="mb-0 mr-3">Below:</h6>
+                            <h6 class="mb-0 mr-3">BP:</h6>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpBelow" value="{{ $patient->yellow_alert_when_sbp_below }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpBelow" value="{{ $patient->yellow_alert_when_dbp_below }}" />
+                            <span>mm Hg Pulse:</span>
+                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
+                            <span>BPM</span>
                         </div>
                     </div>
-                    <div class="mb-2 d-flex align-items-start">
-                        <span class="text-secondary min-width-140px w-50">Reports HTN medicine?</span>
-                        <div class="w-50">
-                            <select type="text" class="form-control form-control-sm min-width-unset" name="isPrescribedHypertensionMedicine">
-                                <option value="">-- select --</option>
-                                <option {{$patient->is_prescribed_hypertension_medicine === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
-                                <option {{$patient->is_prescribed_hypertension_medicine === 'NO' ? 'selected' : ''}} value="NO">No</option>
-                                <option {{$patient->is_prescribed_hypertension_medicine === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
-                            </select>
-                        </div>
+                </div>
+            </div>
+            <div class="col-5">
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Reports prehypertension?</span>
+                    <div class="w-50">
+                        <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 d-flex align-items-start">
-                        <span class="text-secondary min-width-140px w-50">Goal to reduce HTN medicine?</span>
-                        <div class="w-50">
-                            <select type="text" class="form-control form-control-sm min-width-unset" name="isGoalToReduceHypertensionMedicine">
-                                <option value="">-- select --</option>
-                                <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
-                                <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'NO' ? 'selected' : ''}} value="NO">No</option>
-                                <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
-                            </select>
-                        </div>
+                </div>
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Reports HTN?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="hasHypertensionDx">
+                            <option value="">-- select --</option>
+                            <option {{$patient->has_hypertension_dx === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->has_hypertension_dx === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->has_hypertension_dx === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Reports HTN medicine?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="isPrescribedHypertensionMedicine">
+                            <option value="">-- select --</option>
+                            <option {{$patient->is_prescribed_hypertension_medicine === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->is_prescribed_hypertension_medicine === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->is_prescribed_hypertension_medicine === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="mb-2 d-flex align-items-start">
+                    <span class="text-secondary min-width-140px w-50">Goal to reduce HTN medicine?</span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="isGoalToReduceHypertensionMedicine">
+                            <option value="">-- select --</option>
+                            <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->is_goal_to_reduce_hypertension_medicine === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
                     </div>
+                </div>
 
-                    <div class="text-secondary min-width-140px mb-1">Describe the goal:</div>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="goalToReduceHypertensionMedicineMemo" value="{{$patient->goal_to_reduce_hypertension_medicine_memo}}">
+                <div class="text-secondary min-width-140px mb-1">Describe the goal:</div>
+                <input type="text" class="form-control form-control-sm min-width-unset" name="goalToReduceHypertensionMedicineMemo" value="{{$patient->goal_to_reduce_hypertension_medicine_memo}}">
 
-                    <div class="my-3 d-flex align-items-center">
-                <span class="text-secondary min-width-140px w-50">
-                    <strong>BP monitoring prescribed?</strong>
-                </span>
-                        <div class="w-50">
-                            <select type="text" class="form-control form-control-sm min-width-unset" name="isBpMonitoringNeeded">
-                                <option value="">-- select --</option>
-                                <option {{$patient->is_bp_monitoring_needed === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
-                                <option {{$patient->is_bp_monitoring_needed === 'NO' ? 'selected' : ''}} value="NO">No</option>
-                                <option {{$patient->is_bp_monitoring_needed === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
-                            </select>
-                        </div>
+                <div class="my-3 d-flex align-items-center">
+                    <span class="text-secondary min-width-140px w-50">
+                        <strong>BP monitoring prescribed?</strong>
+                    </span>
+                    <div class="w-50">
+                        <select type="text" class="form-control form-control-sm min-width-unset" name="isBpMonitoringNeeded">
+                            <option value="">-- select --</option>
+                            <option {{$patient->is_bp_monitoring_needed === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
+                            <option {{$patient->is_bp_monitoring_needed === 'NO' ? 'selected' : ''}} value="NO">No</option>
+                            <option {{$patient->is_bp_monitoring_needed === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
+                        </select>
                     </div>
+                </div>
 
-                    {{--
-                    <hr class="my-3">
-                    <div class="text-secondary min-width-140px mb-1">ICDs</div>
-                    <table class="table table-sm table-striped table-bordered mb-3">
-                        <thead>
-                        <tr class="bg-light text-secondary">
-                            <th class="border-bottom-0 width-30px">#</th>
-                            <th class="border-bottom-0 w-25">Code</th>
-                            <th class="border-bottom-0">Description</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td class="p-0 align-middle text-center">1</td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd1', 'text', 'whyIsBpMonitoringNeededIcd1', $patient) ?></td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description1', 'text', 'whyIsBpMonitoringNeededDescription1', $patient) ?></td>
-                        </tr>
-                        <tr>
-                            <td class="p-0 align-middle text-center">2</td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd2', 'text', 'whyIsBpMonitoringNeededIcd2', $patient) ?></td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description2', 'text', 'whyIsBpMonitoringNeededDescription2', $patient) ?></td>
-                        </tr>
-                        <tr>
-                            <td class="p-0 align-middle text-center">3</td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd3', 'text', 'whyIsBpMonitoringNeededIcd3', $patient) ?></td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description3', 'text', 'whyIsBpMonitoringNeededDescription3', $patient) ?></td>
-                        </tr>
-                        <tr>
-                            <td class="p-0 align-middle text-center">4</td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd4', 'text', 'whyIsBpMonitoringNeededIcd4', $patient) ?></td>
-                            <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description4', 'text', 'whyIsBpMonitoringNeededDescription4', $patient) ?></td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    --}}
-                    <div class="text-secondary min-width-140px mb-1">Remarks on clinical need:</div>
-                    <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeeded" value="{{$patient->why_is_bp_monitoring_needed}}">
+                {{--
+                <hr class="my-3">
+                <div class="text-secondary min-width-140px mb-1">ICDs</div>
+                <table class="table table-sm table-striped table-bordered mb-3">
+                    <thead>
+                    <tr class="bg-light text-secondary">
+                        <th class="border-bottom-0 width-30px">#</th>
+                        <th class="border-bottom-0 w-25">Code</th>
+                        <th class="border-bottom-0">Description</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td class="p-0 align-middle text-center">1</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd1', 'text', 'whyIsBpMonitoringNeededIcd1', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description1', 'text', 'whyIsBpMonitoringNeededDescription1', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td class="p-0 align-middle text-center">2</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd2', 'text', 'whyIsBpMonitoringNeededIcd2', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description2', 'text', 'whyIsBpMonitoringNeededDescription2', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td class="p-0 align-middle text-center">3</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd3', 'text', 'whyIsBpMonitoringNeededIcd3', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description3', 'text', 'whyIsBpMonitoringNeededDescription3', $patient) ?></td>
+                    </tr>
+                    <tr>
+                        <td class="p-0 align-middle text-center">4</td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_icd4', 'text', 'whyIsBpMonitoringNeededIcd4', $patient) ?></td>
+                        <td class="p-0 align-middle text-center"><?= vsElement('why_is_bp_monitoring_needed_description4', 'text', 'whyIsBpMonitoringNeededDescription4', $patient) ?></td>
+                    </tr>
+                    </tbody>
+                </table>
+                --}}
+                <div class="text-secondary min-width-140px mb-1">Remarks on clinical need:</div>
+                <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsBpMonitoringNeeded" value="{{$patient->why_is_bp_monitoring_needed}}">
 
-                </div>
             </div>
+        </div>
 
-            <div class="pt-2">
-                <button class="btn btn-primary btn-sm dismiss" submit>Submit</button>
-                <button class="btn btn-default border btn-sm dismiss" cancel>Cancel</button>
-            </div>
-        </form>
-      </div>
-    </div>
-  </div>
+        <div class="pt-2">
+            <button class="btn btn-primary btn-sm" submit>Submit</button>
+            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
+        </div>
+    </form>
 </div>
 <script>
-    var doesUsualBpHaveAmPmVariation = <?= $patient->does_usual_bp_have_am_pm_variation ? 1:0 ?>;
-    var doesUsualBpHaveRange = <?= $patient->does_usual_bp_have_range ? 1:0 ?>;
+    var doesUsualBpHaveAmPmVariation = <?= $patient->does_usual_bp_have_am_pm_variation ? 1 : 0 ?>;
+    var doesUsualBpHaveRange = <?= $patient->does_usual_bp_have_range ? 1 : 0 ?>;
     // BP Management
     var BPManagementComponent = new Vue({
-        el:'#bpManagementComponent',
-        data:{
-            form:{
+        el: '#bpManagementComponent',
+        data: {
+            form: {
                 doesUsualBpHaveAmPmVariation: parseInt(doesUsualBpHaveAmPmVariation),
                 doesUsualBpHaveRange: parseInt(doesUsualBpHaveRange)
             }
+        },
+        methods: {
+
+            init: function() {
+                console.log({
+                    form: this.form
+                });
+            }
         }
     });
-    $('.dismiss').on('click', function(){
-      $('#bp-management-settings').modal('hide');
-    });
     (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);
+            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', {
@@ -292,7 +290,7 @@
             );
             window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
                 let acData = elem.autocomp.getSelectedItemData();
-                if(!acData[0] || !acData[0].data) return false;
+                if (!acData[0] || !acData[0].data) return false;
                 $(elem).val(acData[0].code);
                 $(descElem).val(acData[0].data.name);
                 return false;
@@ -310,4 +308,4 @@
         addMCInitializer('bp-management-settings', init, '#bp-management-settings');
 
     }).call(window);
-</script>
+</script>