vitals

public/js/stag-collapsible-card0.js

@@ -0,0 +1,49 @@
+(function() {
+    function init() {
+        $('.card[stag-collapsible-card]:not([stag-collapsible-card-initialized])').each(function() {
+            let header = $(this).find('>.card-header').first();
+            if(header.length) {
+                let html = header.html();
+                let newHeader = $('<div class="d-flex align-items-center"></div>');
+                newHeader.append(html);
+                let collapseTrigger = $('<a href="#" class="stag-collapse-trigger ml-auto" />');
+                collapseTrigger.append('<i class="fa fa-chevron-up if-not-collapsed"/>');
+                collapseTrigger.append('<i class="fa fa-chevron-down if-collapsed"/>');
+                newHeader.append(collapseTrigger);
+                header
+                    .empty()
+                    .append(newHeader);
+            }
+            if(!!$(this).attr('stag-collapsible-card')) {
+                let state = localStorage['collapseState_' + $(this).attr('stag-collapsible-card')];
+                if(state === 'collapsed') {
+                    $(this).attr('collapsed', 1);
+                }
+                else if(state === 'not-collapsed') {
+                    $(this).removeAttr('collapsed');
+                }
+            }
+            $(this).attr('stag-collapsible-card-initialized', 1);
+        });
+
+        $(document)
+            .off('click.stag-collapse-toggle', '.card[stag-collapsible-card][stag-collapsible-card-initialized] .stag-collapse-trigger')
+            .on('click.stag-collapse-toggle', '.card[stag-collapsible-card][stag-collapsible-card-initialized] .stag-collapse-trigger', function() {
+                let card = $(this).closest('.card');
+                if(card.is('[collapsed]')) {
+                    card.removeAttr('collapsed');
+                    if(!!card.attr('stag-collapsible-card')) {
+                        localStorage['collapseState_' + card.attr('stag-collapsible-card')] = 'not-collapsed';
+                    }
+                }
+                else {
+                    card.attr('collapsed', 1);
+                    if(!!card.attr('stag-collapsible-card')) {
+                        localStorage['collapseState_' + card.attr('stag-collapsible-card')] = 'collapsed';
+                    }
+                }
+                return false;
+            });
+    }
+    addMCInitializer('stag-collapsible-card', init);
+}).call(window);

public/js/stag-table-filter0.js

@@ -0,0 +1,66 @@
+(function () {
+    window.initStagTableFilters = function () {
+
+        const debounce = (func, wait) => {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        };
+
+        var returnedFunction = debounce(function (_elem) {
+            let term = $.trim(_elem.val()).toLowerCase(),
+                columnIndex = _elem.closest('td, th').index(),
+                trs = _elem.closest('table').find('tbody').find('tr');
+            trs.removeClass('stag-filter-hide');
+            trs.find('.stag-filter-highlight').replaceWith(function() {
+                return $(this).text();
+            });
+            _elem.closest('td, th').siblings().find('input[stag-table-filter]').val('');
+            if(!!term) {
+                trs.each(function () {
+                    let td = $(this).find('td:eq(' + columnIndex + ')'),
+                        text = td.text();
+                    if (text.toLowerCase().indexOf(term) === -1) {
+                        $(this).addClass('stag-filter-hide');
+                    }
+                    /*else {
+                        let re = new RegExp('(' + term + ')', 'ig');
+                        text = text.replace(re, '<span class="stag-filter-highlight">$&</span>');
+                        td.html(text);
+                    }*/
+                });
+            }
+        }, 100);
+
+        function applyFilter(_elem) {
+            returnedFunction(_elem);
+        }
+
+        $(document)
+            .off('input.stag-table-filter').on('input.stag-table-filter', 'input[stag-table-filter]', function() { applyFilter($(this)); })
+            .off('change.stag-table-filter').on('change.stag-table-filter', 'input[stag-table-filter]', function() { applyFilter($(this)); })
+            .off('paste.stag-table-filter').on('paste.stag-table-filter', 'input[stag-table-filter]', function() { applyFilter($(this)); })
+
+        $(document)
+            .off('keyup.stag-table-filter')
+            .on('keyup.stag-table-filter', 'input[stag-table-filter]', function(_e) {
+                if(_e.which === 27) {
+                    if(!isEventConsumed(e)) {
+                        if ($(this).val() !== '') {
+                            $(this).val('');
+                            applyFilter($(this));
+                            markEventAsConsumed(_e);
+                            return false;
+                        }
+                    }
+                }
+            })
+    }
+    addMCInitializer('stag-table-filter', window.initStagTableFilters);
+})();

resources/views/app/patient/note/rhs-sidebar.blade.php

@@ -4,13 +4,7 @@
     $cmStartDate = date('Y-m-01', strtotime($note->effective_dateest));
     $careMonth = \App\Models\CareMonth::where('client_id', $patient->id)->where('start_date', $cmStartDate)->first();
     ?>
-    <div id="recent-measurements"
-         class="p-2 border-bottom c-pointer on-hover-aliceblue {{$note->is_signed_by_hcp ? 'events-none' : ''}}"
-         open-in-stag-popup
-         mc-initer="care-month-dashboard-{{$patient->uid}}"
-         title="Care Month: {{friendly_month($careMonth->start_date)}}"
-         popup-style="overflow-visible"
-         href="/patients/view/{{ $note->client->uid }}/care-months/view/{{$careMonth->uid}}">
+
         <div class="font-weight-bold">
             Recent Measurements
         </div>

resources/views/app/patient/vitals-settings.blade.php

@@ -6,7 +6,7 @@
     <hr class="m-neg-4">
 
     <div class="row" id="vitals-settings-{{$patient->uid}}">
-        <div class="col-5 border-right">
+        <div class="col-6 border-right">
             <div class="d-flex align-items-baseline">
                 <b>BMI/Weight Management</b>
                 <span class="mx-2 text-secondary">|</span>
@@ -16,7 +16,7 @@
                 @include('app.patient.vitals-settings.bmi-management-summary')
             </div>
         </div>
-        <div class="col-7">
+        <div class="col-6">
             <div class="d-flex align-items-baseline">
                 <b>BP Management</b>
                 <span class="mx-2 text-secondary">|</span>

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

@@ -1,256 +1,265 @@
-<div moe extra-huge id="bp-management-settings">
-    <a href="#" start show>Update</a>
-    <form url="/api/client/updateBpManagementSettingsValue">
-        <input type="hidden" name="uid" value="{{$patient->uid}}">
-        <p class="text-secondary font-weight-bold font-size-14">BP Management</p>
+<button type="button" class="p-0 m-0 btn btn-link" data-toggle="modal" data-target="#bp-management-settings">
+  Update
+</button>
 
-        <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 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 v-if="form.doesUsualBpHaveAmPmVariation">
-                                <!-- Moon -->
-                                <div class="text-secondary font-weight-bold mb-2">
-                                    <i class="fa fa-moon mr-2"></i>PM
+            <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>
                                 <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 }}" />
+                                    <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="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
+                                    <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="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" />
+                                    <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="usualPmRestingSbpMax" value="{{ $patient->usual_pm_resting_sbp_max }}" />
+                                    <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="usualPmRestingDbpMax" value="{{ $patient->usual_pm_resting_dbp_max }}" />
+                                    <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="usualPmRestingPulseMax" value="{{ $patient->usual_pm_resting_pulse_max }}" />
+                                    <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" />
                                     <span>BPM</span>
                                 </div>
 
-                            </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 class="form-check mb-2">
-                                    <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
-                                    <label class="form-check-label" for="amPmVariation">AM/PM Variation</label>
                                 </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input" id="bpRange" name="doesUsualBpHaveRange" v-model="form.doesUsualBpHaveRange">
-                                    <label class="form-check-label" for="bpRange">Range</label>
+
+                                <div 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>
-                            </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>
+
+                        <hr class="my-3">
+                        <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
+                        <div class="pl-3 mb-3">
+                            <div class="d-flex align-items-center mb-3">
+                                <h6 class="mb-0 mr-3">Target:</h6>
+                                <h6 class="mb-0 mr-3">BP:</h6>
+                                <input type="text" class="inline-input-underlined width-50" name="idealAmRestingSbpMin" value="{{ $patient->ideal_am_resting_sbp_min }}" />
+                                <span>/</span>
+                                <input type="text" class="inline-input-underlined width-50 mr-3" name="idealAmRestingDbpMin" value="{{ $patient->ideal_am_resting_dbp_min }}" />
+                                <span>mm Hg Pulse:</span>
+                                <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" />
+                                <span>BPM</span>
+                            </div>
                         </div>
-                    </div>
-                    <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>
+                        <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>
-                        <div class="d-flex align-items-center mb-3">
-                            <h6 class="mb-0 mr-3">Below:</h6>
-                            <h6 class="mb-0 mr-3">BP:</h6>
-                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpBelow" value="{{ $patient->red_alert_when_sbp_below }}" />
-                            <span>/</span>
-                            <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpBelow" value="{{ $patient->red_alert_when_dbp_below }}" />
-                            <span>mm Hg Pulse:</span>
-                            <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
-                            <span>BPM</span>
-                        </div> 
-                    </div>
-                    <div class="pl-3 mb-3">
-                        <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-warning-mellow mr-2"></i>Yellow</div>
-                        <div class="d-flex align-items-center mb-3">
-                            <h6 class="mb-0 mr-3">Above:</h6>
-                            <h6 class="mb-0 mr-3">BP:</h6>
-                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpAbove" value="{{ $patient->yellow_alert_when_sbp_above }}" />
-                            <span>/</span>
-                            <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpAbove" value="{{ $patient->yellow_alert_when_dbp_above }}" />
-                            <span>mm Hg Pulse:</span>
-                            <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseAbove" value="{{ $patient->yellow_alert_when_pulse_above }}" />
-                            <span>BPM</span>
+                        <div class="pl-3 mb-3">
+                            <div class="text-secondary font-weight-bold mb-2"><i class="fa fa-circle text-warning-mellow mr-2"></i>Yellow</div>
+                            <div class="d-flex align-items-center mb-3">
+                                <h6 class="mb-0 mr-3">Above:</h6>
+                                <h6 class="mb-0 mr-3">BP:</h6>
+                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpAbove" value="{{ $patient->yellow_alert_when_sbp_above }}" />
+                                <span>/</span>
+                                <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpAbove" value="{{ $patient->yellow_alert_when_dbp_above }}" />
+                                <span>mm Hg Pulse:</span>
+                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseAbove" value="{{ $patient->yellow_alert_when_pulse_above }}" />
+                                <span>BPM</span>
+                            </div>
+                            <div class="d-flex align-items-center mb-3">
+                                <h6 class="mb-0 mr-3">Below:</h6>
+                                <h6 class="mb-0 mr-3">BP:</h6>
+                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpBelow" value="{{ $patient->yellow_alert_when_sbp_below }}" />
+                                <span>/</span>
+                                <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpBelow" value="{{ $patient->yellow_alert_when_dbp_below }}" />
+                                <span>mm Hg Pulse:</span>
+                                <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
+                                <span>BPM</span>
+                            </div>
                         </div>
-                        <div 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>
-            </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 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>
                     </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="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>
-                <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 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="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 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>
 
-                <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 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>
-                </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" submit>Submit</button>
-            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
-        </div>
-    </form>
+            <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>
 <script>
     var doesUsualBpHaveAmPmVariation = <?= $patient->does_usual_bp_have_am_pm_variation ? 1:0 ?>;
@@ -263,14 +272,11 @@
                 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) {