Jelajahi Sumber

Merge branch 'dev' of rav.triplestart.com:jmudaka/stagfe2 into dev

= 3 tahun lalu
induk
melakukan
9327263e06

+ 72 - 17
public/css/style.css

@@ -321,6 +321,9 @@ body>nav.navbar {
 .mcp-theme-1 .min-width-unset>.form-control.form-control-sm {
     min-width: unset !important;
 }
+.mcp-theme-1 .width-auto {
+  width: auto !important;
+}
 .mcp-theme-1 [large] .form-control.form-control-sm {
     min-width: unset;
 }
@@ -628,31 +631,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;
   }
 }
 
@@ -3218,3 +3215,61 @@ body.forced-masking #mask {
 .note-signed-by-hcp .show-if-note-signed {
     display: block !important;
 }
+.customized-form {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 0.9rem;
+}
+
+.customized-form .container {}
+
+.customized-form .form-control {
+    border: none;
+    border-bottom: 1px solid #333;
+    border-radius: 0;
+    height: 25px;
+    padding: 0;
+    background-color: transparent;
+}
+
+.customized-form .form-control:focus {
+    outline: none;
+    box-shadow: none;
+}
+
+.customized-form .form-control.inline {
+    width: auto;
+    padding: 0 10px;
+}
+.customized-form textarea.form-control {
+    width: 100% !important;    
+}
+
+.customized-form form .row .section.bg-light {
+    padding-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.customized-form .unified-checks {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.customized-form .unified-checks.flex-basis-20 > div {
+    flex-basis: 20%;
+}
+.customized-form .unified-checks.flex-basis-23>div.form-check {
+    flex-basis: 23%;
+}
+.customized-form .unified-checks.flex-basis-25>div.form-check {
+    flex-basis: 25%;
+}
+.customized-form .unified-checks.flex-basis-31>div.form-check {
+    flex-basis: 31%;
+}
+.customized-form .unified-checks.flex-basis-30 > div {
+    flex-basis: 30%;
+}
+.customized-form .form-check-inline .form-check-input[type="radio"] {
+    margin-top: -3px;
+}

+ 27 - 0
resources/views/app/patient/module-specific-summary-renderers/weight_loss_intake/subjective.blade.php

@@ -0,0 +1,27 @@
+@if($points && count($points))
+    <div class="d-flex border-bottom">
+        <a class="mr-2 min-width-110px hide-if-note-signed"
+            open-in-stag-popup
+           href="/module-view/{{$note->uid}}/weight_loss_intake/edit"
+           mc-initer="edit-weight_loss_intake-container-{{$note->id}}"
+           title="Weight Loss Intake"
+           popup-style="stag-popup-md overflow-visible">
+            Weight Loss
+        </a>
+        <span class="mr-2 min-width-110px font-weight-bold show-if-note-signed">
+            Weight Loss
+        </span>
+
+        <div class="flex-grow-1">
+            <table class="table table-bordered table-xs table-cage mb-0">
+                <?php $j = 0; foreach ($points as $point): $j++; ?>
+                    <tr>
+                        <td>
+                            @include('app.patient.module-specific-summary-renderers.data-dump', compact('point'))
+                        </td>
+                    </tr>
+                <?php endforeach; ?>
+            </table>
+        </div>
+    </div>
+@endif

+ 875 - 0
resources/views/app/patient/modules/weight_loss_intake/edit.blade.php

@@ -0,0 +1,875 @@
+<?php
+use App\Models\Client;
+use App\Models\Note;
+use App\Models\Point;
+/** @var Client $patient */
+/** @var Note $note */
+/** @var Point $point */
+
+if(!@$sessionKey) {
+    $sessionKey = request()->cookie('sessionKey');
+}
+
+$point = Point::getOrCreateOnlyTopLevelPointOfCategory($note, 'WEIGHT_LOSS_INTAKE', $sessionKey);
+
+// replace content data
+$contentData = [
+    "how_weight_affects_your_life" => "",
+    "first_notice_on_weight_gain" => "",
+    "first_notice_on_weight_gain" => "",
+    "first_notice_on_weight_gain" => "",
+    "first_notice_on_weight_gain" => "",
+    "first_notice_on_weight_gain" => "",
+    "gained_more_than_20_pounds" => "",
+    "gained_more_than_20_pounds" => "",
+    "gained_more_than_20_pounds_when" => "",
+    "weight_1_year_ago" => "",
+    "weight_5_years_ago" => "",
+    "weight_10_years_ago" => "",
+    "weight_gain_life_events" => [],
+    "weight_gain_life_events_medication_list" => "",
+    "previous_weight_loss_programs" => [],
+    "previous_weight_loss_programs_others_list" => "",
+    "max_weight_loss" => "",
+    "greatest_challenge" => "",
+    "weight_loss_medication" => [],
+    "weight_loss_medication_other" => "",
+    "wlm_what_worked" => "",
+    "wlm_what_didnt_work" => "",
+    "wlm_why_or_why_not" => "",
+    "breakfast_days_per_week" => "",
+    "breakfast_hour" => "",
+    "breakfast_min" => "",
+    "no_of_times_you_eat_per_day" => "",
+    "beverages_you_drink" => "",
+    "eats_at_night" => "",
+    "eats_at_night_when" => "",
+    "food_intolerances_list" => "",
+    "food_triggers" => [],
+    "food_triggers_other" => "",
+    "food_cravings" => [],
+    "food_cravings_favourites" => "",
+    "medical_history_exercise_type" => "",
+    "medical_history_hours" => "",
+    "medical_history_mins" => "",
+    "medical_history_no_of_times_per_week" => "",
+    "sleeping_hours_per_night" => "",
+    "feels_rested_in_morning" => "",
+    "past_medical_history" => [],
+    "past_medical_history_other" => "",
+    "eating_disorder" => "",
+    "eating_disorder_text" => "",
+    "past_surgical_history" => [],
+    "past_surgical_history_other" => "",
+    "medication_list" => "",
+    "alergies_medications" => "",
+    "alergies_food" => "",
+    "social_history_smoking" => [],
+    "current_smoker_packs_per_day" => "",
+    "past_smoker_quit_years_ago" => "",
+    "social_history_alcohol" => [],
+    "regular_drinks_per_day" => "",
+    "prior_alcoholism_treatment" => "",
+    "social_history_drugs" => [],
+    "social_history_drugs_text" => "",
+    "social_history_marijuana" => [],
+    "current_user_drinks_per_day" => "",
+    "family_history_obesity" => [],
+    "family_history_diabetes" => [],
+    "family_history_other" => [],
+    "family_history_other_text" => "",
+    "family_history_alcoholism" => "",
+    "fhdos" => "",    
+    "age_periods_started" => "",
+    "age_periods_ended" => "",
+    "periods_frequency" => "",
+    "periods_intensity" => "",
+    "no_of_pregnancies" => "",
+    "no_of_children" => "",
+    "age_of_first_pregnancy" => "",
+    "age_of_last_pregnancy" => "",
+    "system_review" => [],
+    "women_only" => [],
+    "comments" => "",
+];
+
+if ($point->lastChildReview && $point->lastChildReview->data) {
+    $point->lastChildReview->data = json_decode($point->lastChildReview->data, true);
+    $contentData = $point->lastChildReview->data;
+}
+?>
+<div class="p-3 mcp-theme-1">
+
+    <div visit-moe close-on-save close-on-cancel class="d-block">
+        <form show url="/api/visitPoint/upsertChildReview" class="mcp-theme-1">
+            <input type="hidden" name="uid" value="<?= $point->uid ?>">
+            <input type="hidden" name="noteUid" value="<?= $note->uid ?>">
+            <input type="hidden" name="segmentUid" value="<?= $note->coreSegment->uid ?>">
+            <input type="hidden" name="data" value="{{json_encode($contentData)}}">
+
+            <div id="edit-weight_loss_intake-container" class="customized-form">
+
+                @include('app.patient.modules._undo_changes', compact('point'))
+
+                <div class="row mb-1">
+					<div class="col-md-12 section">
+						<div class="form-group">
+                        <label>How does your weight affect your life and health?</label>
+						<textarea class="form-control inline flex-grow-1" v-model="data.how_weight_affects_your_life_1"></textarea>
+						</div>
+					</div>
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>Weight History</u></b></h6>
+					</div>
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<label>When did you first notice that you were gaining weight? </label>
+							<div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
+										id="wg-childhood" value="childhood">
+									<label class="form-check-label" for="wg-childhood">Childhood</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
+										id="wg-teens" value="teens">
+									<label class="form-check-label" for="wg-teens">Teens</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
+										id="wg-adulthood" value="adulthood">
+									<label class="form-check-label" for="wg-adulthood">Adulthood</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
+										id="wg-pregnancy" value="pregnancy">
+									<label class="form-check-label" for="wg-pregnancy">Pregnancy</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
+										id="wg-menopause" value="menopause">
+									<label class="form-check-label" for="wg-menopause">Menopause</label>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-12 section">
+						<div class="form-group">
+							<label>Did you ever gain more than 20 pounds in less than 3 months?</label>
+							<div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.gained_more_than_20_pounds"
+										id="gm-yes" value="yes">
+									<label class="form-check-label" for="gm-yes">Yes</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.gained_more_than_20_pounds"
+										id="gm-no" value="no">
+									<label class="form-check-label" for="gm-no">No</label>
+								</div>
+							</div>
+							<div class="d-flex mt-3">
+								<label>If so, when?</label>
+								<input type="text" class="form-control inline flex-grow-1"
+									v-model="data.gained_more_than_20_pounds_when" />
+							</div>
+						</div>
+					</div>
+					<div class="col-md-12 section">
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">How much did you weigh:</label>
+								<div class="d-flex mr-3">
+									<label>one year ago?</label>
+									<input type="text" class="form-control inline width-50px" v-model="data.weight_1_year_ago">
+								</div>
+								<div class="d-flex mr-3">
+									<label>Five years ago?</label>
+									<input type="text" class="form-control inline width-50px" v-model="data.weight_5_years_ago">
+								</div>
+								<div class="d-flex">
+									<label>10 years ago?</label>
+									<input type="text" class="form-control inline width-50px" v-model="data.weight_10_years_ago">
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<label>Life events associated with weight gain (check all that apply):</label>
+							<div class="unified-checks flex-basis-20">
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-marriage" value="marriage">
+									<label class="form-check-label" for="le-marriage">Marriage</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-divorce" value="divorce">
+									<label class="form-check-label" for="le-divorce">Divorce</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-pregnancy" value="pregnancy">
+									<label class="form-check-label" for="le-pregnancy">Pregnancy</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-abuse" value="abuse">
+									<label class="form-check-label" for="le-abuse">Abuse</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-illness" value="illness">
+									<label class="form-check-label" for="le-illness">Illness</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-travel" value="travel">
+									<label class="form-check-label" for="le-travel">Travel</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-injury" value="injury">
+									<label class="form-check-label" for="le-injury">Injury</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-nightshift_work"
+										value="nightshift_work">
+									<label class="form-check-label" for="le-nightshift_work">Nightshift Work</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-job_change"
+										value="job_change">
+									<label class="form-check-label" for="le-job_change">Job Change</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-quitting_smoking"
+										value="quitting_smoking">
+									<label class="form-check-label" for="le-quitting_smoking">Quitting Smoking</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-alcohol" value="alcohol">
+									<label class="form-check-label" for="le-alcohol">Alcohol</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-drugs" value="drugs">
+									<label class="form-check-label" for="le-drugs">Drugs</label>
+								</div>
+								<div class="d-flex flex-grow-1 align-items-end">
+									<div class="form-check form-check-inline mr-3">
+										<input class="form-check-input" type="checkbox" v-model="data.weight_gain_life_events" id="le-medication"
+											value="medication">
+										<label class="form-check-label" for="le-medication">Medication</label>
+									</div>
+									<div class="d-flex flex-grow-1 align-items-end">
+										<label class="text-nowrap mb-0 mr-3">please list:</label>
+										<input type="text" class="form-control d-inline flex-grow-1" v-model="data.weight_gain_life_events_medication_list" />
+									</div>
+								</div>
+
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-12 section">
+						<div class="form-group">
+							<label>Previous weight-loss programs (check all that apply):</label>
+							<div class="unified-checks flex-basis-20">
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-weight_watchers" value="weight_watchers">
+									<label class="form-check-label" for="pwl-weight_watchers">Weight Watchers</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-nutrisystem" value="nutrisystem">
+									<label class="form-check-label" for="pwl-nutrisystem">Nutrisystem</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-jenny_craig" value="jenny_craig">
+									<label class="form-check-label" for="pwl-jenny_craig">Jenny Craig</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-la_weight_loss" value="la_weight_loss">
+									<label class="form-check-label" for="pwl-la_weight_loss">LA Weight Loss</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-atkins" value="atkins">
+									<label class="form-check-label" for="pwl-atkins">Atkins</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-south_beach" value="south_beach">
+									<label class="form-check-label" for="pwl-south_beach">South Beach</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-zone_diet" value="zone_diet">
+									<label class="form-check-label" for="pwl-zone_diet">Zone diet</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-medifast" value="medifast">
+									<label class="form-check-label" for="pwl-medifast">Medifast</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-dash_diet" value="dash_diet">
+									<label class="form-check-label" for="pwl-dash_diet">Dash Diet</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-paleo_diet" value="paleo_diet">
+									<label class="form-check-label" for="pwl-paleo_diet">Paleo Diet</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-hcg_diet" value="hcg_diet">
+									<label class="form-check-label" for="pwl-hcg_diet">HCG diet</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-mediterranean_diet" value="mediterranean_diet">
+									<label class="form-check-label" for="pwl-mediterranean_diet">Mediterranean diet</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-ornish_diet" value="ornish_diet">
+									<label class="form-check-label" for="pwl-ornish_diet">Ornish diet</label>
+								</div>							
+								
+								<div class="d-flex flex-grow-1 align-items-end">
+									<div class="form-check form-check-inline mr-3">
+										<input class="form-check-input" type="checkbox" v-model="data.previous_weight_loss_programs" id="pwl-other"
+											value="other">
+										<label class="form-check-label" for="pwl-other">Other</label>
+									</div>
+									<div class="d-flex flex-grow-1 align-items-end">
+										<label class="text-nowrap mb-0 mr-3">please list:</label>
+										<input type="text" class="form-control d-inline flex-grow-1" v-model="data.previous_weight_loss_programs_others_list" />
+									</div>
+								</div>
+
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<div class="d-flex">
+								<label>What was your maximum weight loss?</label>
+								<input type="text" class="form-control inline flex-grow-1" v-model="data.max_weight_loss">
+							</div>
+							<div class="mt-3">
+								<div class="d-flex flex-column">
+									<label>What are your greatest challenges with dieting?</label>
+									<textarea class="form-control inline" v-model="data.greatest_challenge"></textarea>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-12 section">
+						<div class="form-group">
+							<label>Have you ever taken medication to lose weight? (check all that apply):</label>
+							<div class="unified-checks flex-basis-23">
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-phentermine" value="phentermine">
+									<label class="form-check-label" for="wlm-phentermine">Phentermine (Adipex)</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-meridia" value="meridia">
+									<label class="form-check-label" for="wlm-meridia">Meridia</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-xenecal" value="xenecal">
+									<label class="form-check-label" for="wlm-xenecal">Xenecal/Alli</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-phen" value="phen">
+									<label class="form-check-label" for="wlm-phen">Phen/Fen</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-phendimetrazine" value="phendimetrazine">
+									<label class="form-check-label" for="wlm-phendimetrazine">Phendimetrazine(Bontril)</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-topamax" value="topamax">
+									<label class="form-check-label" for="wlm-topamax">Topamax</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-saxenda" value="saxenda">
+									<label class="form-check-label" for="wlm-saxenda">Saxenda</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-diethylpropion" value="diethylpropion">
+									<label class="form-check-label" for="wlm-diethylpropion">Diethylpropion</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-bupropion" value="bupropion">
+									<label class="form-check-label" for="wlm-bupropion">Bupropion (Wellbutrin)</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-belviq" value="belviq">
+									<label class="form-check-label" for="wlm-belviq">Belviq</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-qsymia" value="qsymia">
+									<label class="form-check-label" for="wlm-qsymia">Qsymia</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-contrave" value="contrave">
+									<label class="form-check-label" for="wlm-contrave">Contrave</label>
+								</div>				
+								
+								<div class="d-flex flex-grow-1 align-items-end">
+									<div class="form-check form-check-inline mr-3">
+										<input class="form-check-input" type="checkbox" v-model="data.weight_loss_medication" id="wlm-other"
+											value="other">
+										<label class="form-check-label" for="wlm-other">Other</label>
+									</div>
+									<div class="d-flex flex-grow-1 align-items-end">
+										<label class="text-nowrap mb-0 mr-3">(including supplements):</label>
+										<input type="text" class="form-control d-inline flex-grow-1" v-model="data.weight_loss_medication_other" />
+									</div>
+								</div>
+							</div>
+							<div class="form-group mt-3">
+								<div class="d-flex">
+									<label>What worked?</label>
+									<input type="text" class="form-control inline flex-grow-1" v-model="data.wlm_what_worked" />
+								</div>
+							</div>
+							<div class="form-group">
+								<div class="d-flex">
+									<label>What didn't work?</label>
+									<input type="text" class="form-control inline flex-grow-1" v-model="data.wlm_what_didnt_work" />
+								</div>
+							</div>
+							<div class="form-group">
+								<div class="d-flex">
+									<label>Why or why not?</label>
+									<input type="text" class="form-control inline flex-grow-1" v-model="data.wlm_why_or_why_not" />
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>Nutritional History</u></b></h6>
+					</div>
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">How often do you eat breakfast?</label>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" v-model="data.breakfast_days_per_week">
+									<label>days per week at</label>
+								</div>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" style="width:50px" v-model="data.breakfast_hour">
+									<label>:</label>
+								</div>
+								<div class="d-flex mr-3">									
+									<input type="text" class="form-control inline" style="width:50px" v-model="data.breakfast_min">
+									<label>a.m</label>
+								</div>
+							</div>
+						</div>
+
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">Number of times you eat per day:</label>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" v-model="data.no_of_times_you_eat_per_day">
+								</div>
+								<div class="d-flex mr-3 flex-grow-1">
+									<label> What beverages do you drink?</label>
+									<input type="text" class="form-control inline flex-grow-1" v-model="data.beverages_you_drink">
+								</div>
+							</div>
+						</div>
+
+						<div class="form-group">
+							<label>Do you get up at night to eat?</label>
+							<div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.eats_at_night" id="eats-at-night-yes" value="yes">
+									<label class="form-check-label" for="eats-at-night-yes">Yes</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="radio" v-model="data.eats_at_night" id="eats-at-night-no" value="no">
+									<label class="form-check-label" for="eats-at-night-no">No</label>
+								</div>
+							</div>
+							<div class="d-flex mt-3">
+								<label>If so, how often?</label>
+								<input type="text" class="form-control inline" v-model="data.eats_at_night_when">
+								<label>times</label>
+							</div>
+						</div>
+
+						<div class="form-group">
+							<div class="d-flex">
+								<label>List any food intolerances/restrictions:</label>
+								<input type="text" class="form-control inline flex-grow-1" v-model="data.food_intolerances_list">
+							</div>
+						</div>
+						<div class="form-group">
+							<label>Food triggers (check all that apply):</label>
+							<div class="unified-checks flex-basis-20">
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-stress" value="stress">
+									<label class="form-check-label" for="ft-stress">Stress</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-boredom" value="boredom">
+									<label class="form-check-label" for="ft-boredom">Boredom</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-anger" value="anger">
+									<label class="form-check-label" for="ft-anger">Anger</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-insomnia" value="insomnia">
+									<label class="form-check-label" for="ft-insomnia">Insomnia</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-seeking_reward" value="seeking_reward">
+									<label class="form-check-label" for="ft-seeking_reward">Seeking reward</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-parties" value="parties">
+									<label class="form-check-label" for="ft-parties">Parties</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-eating_out" value="eating_out">
+									<label class="form-check-label" for="ft-eating_out">Eating out</label>
+								</div>								
+								<div class="d-flex flex-grow-1 align-items-end">
+									<div class="form-check form-check-inline mr-3">
+										<input class="form-check-input" type="checkbox" v-model="data.food_triggers" id="ft-other"
+											value="other">
+										<label class="form-check-label" for="ft-other">Other</label>
+									</div>
+									<div class="d-flex flex-grow-1 align-items-end">
+										<input type="text" class="form-control d-inline flex-grow-1" v-model="data.food_triggers_other" />
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="form-group">
+							<label>Food cravings:</label>
+							<div class="unified-checks flex-basis-20">
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-sugar" value="sugar">
+									<label class="form-check-label" for="fc-sugar">Sugar</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-chocolate" value="chocolate">
+									<label class="form-check-label" for="fc-chocolate">Chocolate</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-starches" value="starches">
+									<label class="form-check-label" for="fc-starches">Starches</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-salty" value="salty">
+									<label class="form-check-label" for="fc-salty">Salty</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-fast_food" value="fast_food">
+									<label class="form-check-label" for="fc-fast_food">Fast food</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-high_fat" value="high_fat">
+									<label class="form-check-label" for="fc-high_fat">High fat</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-largr_portions" value="largr_portions">
+									<label class="form-check-label" for="fc-largr_portions">Large portions</label>
+								</div>								
+								<div class="d-flex flex-grow-1 align-items-end">
+									<div class="form-check form-check-inline mr-3">
+										<input class="form-check-input" type="checkbox" v-model="data.food_cravings" id="fc-other"
+											value="other">
+										<label class="form-check-label" for="fc-other">Favorite foods</label>
+									</div>
+									<div class="d-flex flex-grow-1 align-items-end">
+										<input type="text" class="form-control d-inline flex-grow-1" v-model="data.food_cravings_favourites" />
+									</div>
+								</div>
+							</div>
+						</div>
+
+
+					</div>
+
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>Exercise & Sleep</u></b></h6>
+					</div>
+
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<div class="d-flex">
+								<label>Exercise type:</label>
+								<input type="text" class="form-control inline flex-grow-1" v-model="data.medical_history_exercise_type">
+							</div>
+						</div>
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">Duration:</label>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" v-model="data.medical_history_hours">
+									<label>hours</label>
+								</div>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" style="width:50px" v-model="data.medical_history_mins">
+									<label>minutes</label>
+								</div>
+								<div class="d-flex mr-3 flex-grow-1">	
+									<label>Number of times per week:</label>								
+									<input type="text" class="form-control inline flex-grow-1" v-model="data.medical_history_no_of_times_per_week">
+									
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-12">
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">How many hours do you sleep per night?</label>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" v-model="data.sleeping_hours_per_night">
+								</div>
+								<div class="d-flex mr-3 flex-grow-1">	
+									<label>Do you feel rested in the morning?</label>								
+									<input type="text" class="form-control inline flex-grow-1" v-model="data.feels_rested_in_morning">
+								</div>
+							</div>
+						</div>
+					</div>
+
+                    <div class="col-md-12">
+						<h6 class="my-3"><b><u>Past medical history (check all that apply)</u></b></h6>
+					</div>
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<div class="unified-checks flex-basis-20">
+								<!-- Medical history fields -->
+							</div>
+						</div>
+					</div>
+
+                    <div class="col-md-12">
+						<h6 class="my-3"><b><u>Medications</u></b></h6>
+					</div>
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<label>(list all current medications, including over-the-counter medications, supplements, and herbs):</label>
+							<textarea class="form-control"v-model="data.medication_list"></textarea>
+						</div>
+					</div>
+
+                    <div class="col-md-12">
+						<h6 class="my-3"><b><u>Alergies</u></b></h6>
+					</div>
+
+					<div class="col-md-12 section">
+						<!-- Alergies fields -->
+					</div>
+
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>Social History</u></b></h6>
+					</div>
+
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<!-- Social history fields -->
+					</div>
+
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>Family History</u></b></h6>
+					</div>
+
+					<div class="col-md-12 section">
+						<!-- Family history fields -->
+
+					</div>
+
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>Gynecologic History</u></b></h6>
+					</div>
+
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">Age periods started?</label>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" v-model="data.age_periods_started" style="width:50px">
+								</div>
+								<div class="d-flex mr-3">
+									<label>Age periods ended</label>
+									<input type="text" class="form-control inline" style="width:50px" v-model="data.age_periods_ended">
+								</div>
+							</div>
+						</div>
+						<div class="form-group">
+							<label>Periods are:</label>
+							<div class="d-flex">
+								<div class="mr-5">
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" v-model="data.periods_frequency" id="periods-frequency-regular" value="regular">
+										<label class="form-check-label" for="periods-frequency-regular">Regular</label>
+									</div>
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" v-model="data.periods_frequency" id="periods-frequency-irregular" value="irregular">
+										<label class="form-check-label" for="periods-frequency-irregular">Irregular</label>
+									</div>
+								</div>
+								<div>
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" v-model="data.periods_intensity" id="periods-intensity-heavy" value="heavy">
+										<label class="form-check-label" for="periods-intensity-heavy">Heavy</label>
+									</div>
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" v-model="data.periods_intensity" id="periods-intensity-normal" value="normal">
+										<label class="form-check-label" for="periods-intensity-normal">Normal</label>
+									</div>
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" v-model="data.periods_intensity" id="periods-intensity-light" value="light">
+										<label class="form-check-label" for="periods-intensity-light">Light</label>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">Number of pregnancies:</label>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" v-model="data.no_of_pregnancies" style="width:50px">
+								</div>
+								<div class="d-flex mr-3">
+									<label>Number of children:</label>
+									<input type="text" class="form-control inline" style="width:50px" v-model="data.no_of_children">
+								</div>
+							</div>
+						</div>
+						<div class="form-group">
+							<div class="d-flex flex-wrap">
+								<label class="mr-3">Age of first pregnancy:</label>
+								<div class="d-flex mr-3">
+									<input type="text" class="form-control inline" v-model="data.age_of_first_pregnancy" style="width:50px">
+								</div>
+								<div class="d-flex mr-3">
+									<label>Age of last pregnancy:</label>
+									<input type="text" class="form-control inline" style="width:50px" v-model="data.age_of_last_pregnancy">
+								</div>
+							</div>
+						</div>
+
+
+
+					</div>
+
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>System Review</u></b></h6>
+					</div>
+
+					<div class="col-md-12 section">
+						<!-- checkboxes for system review here -->
+					</div>
+
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>(Women only)</u></b></h6>
+					</div>
+
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="form-group">
+							<div class="unified-checks flex-basis-31">
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.women_only" id="wo-periods_absence" value="periods_absence">
+									<label class="form-check-label" for="wo-periods_absence">Absence of periods	</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.women_only" id="wo-hot_flashes" value="hot_flashes">
+									<label class="form-check-label" for="wo-hot_flashes">Hot flashes</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.women_only" id="wo-bladder_habits_change" value="bladder_habits_change">
+									<label class="form-check-label" for="wo-bladder_habits_change">Change in bladder habits</label>
+								</div>
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.women_only" id="wo-abnormal_menstruation" value="abnormal_menstruation">
+									<label class="form-check-label" for="wo-abnormal_menstruation">Abnormal/excessive menstruation</label>
+								</div>					
+								<div class="form-check form-check-inline">
+									<input class="form-check-input" type="checkbox" v-model="data.women_only" id="wo-facial_hair" value="facial_hair">
+									<label class="form-check-label" for="wo-facial_hair"> Facial hair</label>
+								</div>	
+								
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-12 section mt-2">
+						<div class="form-group">
+                            <label>Comments:</label>
+                            <textarea type="text" class="form-control inline flex-grow-1" v-model="data.comments"></textarea>
+						</div>
+					</div>
+
+
+				</div>
+
+                <div class="mt-3 pt-3 border-top text-center">
+                    <button type="button" v-on:click.prevent="saveForm()" class="btn btn-sm btn-primary mr-2">Submit</button>
+                    <button type="button" onclick="closeStagPopup()" class="btn btn-sm btn-default border">Cancel</button>
+                </div>
+
+            </div>
+
+            <div class="d-none">
+                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
+                <button cancel class="btn btn-sm btn-default border">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        function init() {
+
+            runMCInitializer('hide-moes');
+            // any JS can come here
+            // will be run on page-load as well as whenever this segment is refreshed
+            new Vue({
+                el: '#edit-weight_loss_intake-container',
+                delimiters: ["@{{","}}"],
+                data: {
+                    data: <?= json_encode($contentData) ?>
+                },
+                watch: {
+                    $data: {
+                        handler: function(val, oldVal) {
+                            let parent = $('#edit-weight_loss_intake-container').closest('form');
+                            parent.find('[name="data"]').val(JSON.stringify(this.data));
+
+                            // autosave on change
+                            autoSaveSegment(parent.find('[submit]').first());
+                        },
+                        deep: true
+                    }
+                },
+                methods: {
+                    saveForm: function() {
+                        let parent = $('#edit-weight_loss_intake-container').closest('form');
+                        parent.find('[name="data"]').val(JSON.stringify(this.data));
+                        autoSaveSegmentAndClose(parent.find('[submit]').first());
+                    },
+                    undoChanges: function() {
+                        $.post('/api/visitPoint/destroyCurrentChildReview', {
+                            uid: '{{$point->uid}}'
+                        }, _data => {
+                            if(!hasResponseError(_data)) {
+                                closeStagPopup();
+                                $('.visit-segment[data-segment-template-name="omega_subjective_system"]').find('.refresh-segment').trigger('click');
+                            }
+                        });
+                        return false;
+                    }
+                }
+            });
+        }
+
+        window.segmentInitializers.lifestyle_social = init;
+
+        addMCInitializer('edit-weight_loss_intake-container-{{$note->id}}', init, '#edit-weight_loss_intake-container');
+
+    })();
+</script>

+ 19 - 8
resources/views/app/patient/note/dashboard.blade.php

@@ -410,7 +410,7 @@ use App\Models\Handout;
             <div class="px-2 border-left screen-only">
                 <a href="{{route('print-note', ['patient' => $patient, 'note' => $note])}}" native target="_blank" class=""><i class="fa fa-print"></i> Print</a>
             </div>
-            
+
             @if($pro->pro_type === 'ADMIN' || $pro->is_enrolled_as_mcp)
             <div class="px-2 border-left screen-only">
                 <a native target="_blank"
@@ -510,6 +510,13 @@ use App\Models\Handout;
                     "href" => "/module-view/{$note->uid}/lifestyle_substances/edit",
                     "initer" => "edit-univ_sub_substance_use_assessment-container-{$note->id}"
                 ],
+                [
+                    "name" => 'Weight Loss Intake',
+                    "title" => 'Weight Loss Intake',
+                    "style" => 'stag-popup-md',
+                    "href" => "/module-view/{$note->uid}/weight_loss_intake/edit",
+                    "initer" => "edit-weight_loss_intake-container-{$note->id}"
+                ],
             ];
             ?>
             <div moe relative class="px-2 border-left screen-only">
@@ -534,16 +541,16 @@ use App\Models\Handout;
 
 
             @if($note->is_signed_by_hcp)
-                @php 
+                @php
                     $suggestionMode = request()->get('suggestion_mode');
-                @endphp 
+                @endphp
                 @if($suggestionMode == 'on')
                     <a class="ml-3 native font-weight-normal refresh-segment c-pointer screen-only"
                         href="/patients/view/{{$note->client->uid}}/notes/view/{{$note->uid}}?suggestion_mode=off"
                         title="Update with latest patient data">
                         Toggle Suggestion Mode Off
                     </a>
-                @else 
+                @else
                     <a class="ml-3 native font-weight-normal refresh-segment c-pointer screen-only"
                         href="/patients/view/{{$note->client->uid}}/notes/view/{{$note->uid}}?suggestion_mode=on"
                         title="Update with latest patient data">
@@ -577,7 +584,7 @@ use App\Models\Handout;
                                         </div>
                                     </div>
                                 @endif
-                                @if($pro->pro_type === 'ADMIN' || ($note->hcpPro && $pro->id === $note->hcpPro->id)) 
+                                @if($pro->pro_type === 'ADMIN' || ($note->hcpPro && $pro->id === $note->hcpPro->id))
                                     <div class="ml-3 screen-only">
                                         @include('app/patient/note/_create-bill-only')
                                     </div>
@@ -771,7 +778,7 @@ use App\Models\Handout;
                                 @elseif($isVisitTemplateBased && !$doesVisitTemplateUiConfigExist)
                                     @if($note->visitTemplate->is_slim)
                                         @include('app.patient.note.note-segment-list-slim')
-                                    @else 
+                                    @else
                                         @include('app.patient.note.note-segment-list')
                                     @endif
                                 @elseif($isVisitTemplateBased && $doesVisitTemplateUiConfigExist)
@@ -800,9 +807,9 @@ use App\Models\Handout;
 
                 <!-- handouts -->
                 <div class="p-3 border-bottom screen-only" data-non-segment-section="Handouts">
-                    <?php 
+                    <?php
                         $handouts = Handout::where('is_active', true)->get();
-                        $clientHandouts = $patient->handouts($note); 
+                        $clientHandouts = $patient->handouts($note);
                     ?>
                     @include('app.patient.handouts-list', compact('patient', 'clientHandouts', 'handouts', 'note'))
                 </div>
@@ -1016,6 +1023,10 @@ use App\Models\Handout;
                                     if (bmi >= 30) {
                                         bmiCategory = '(Obese)';
                                     }
+                                    bmiCategoryElem.show();
+                                    if (bmiCategory == '') {
+                                      bmiCategoryElem.hide();
+                                    }
                                     bmiCategoryElem.val(bmiCategory);
                                 } catch (e) {
                                     return false;

+ 1 - 0
resources/views/app/patient/segment-templates/omega_subjective_system/summary.blade.php

@@ -134,6 +134,7 @@ $topLevelPointToRendererMap = [
     'LIFESTYLE_SOCIAL_RELATIONSHIPS' => 'lifestyle_social_relationships',
     'LIFESTYLE_STRESS' => 'lifestyle_stress',
     'LIFESTYLE_SUBSTANCE_USE' => 'lifestyle_substance_use',
+    'WEIGHT_LOSS_INTAKE' => 'weight_loss_intake',
 ];
 
 $pointMap = [];

+ 4 - 0
resources/views/app/patient/vitals-settings.blade.php

@@ -72,6 +72,10 @@
                     if (bmi >= 30) {
                         bmiCategory = '(Obese)';
                     }
+                    bmiCategoryElem.show();
+                    if (bmiCategory == '') {
+                      bmiCategoryElem.hide();
+                    }
                     bmiCategoryElem.val(bmiCategory);
                 } catch (e) {
                     return false;

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

@@ -5,7 +5,7 @@
         <p class="text-secondary font-weight-bold font-size-14">BMI/Weight Management</p>
 
         <div class="mb-3 d-flex align-items-center">
-            <span class="text-secondary min-width-140px">Current Height:</span>
+            <span class="text-secondary mr-2">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
@@ -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-70px"><?= vsElement('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="width-70px"><?= vsRoElement('usual_bmi_min', 'number', 'usualBmiMin', $patient) ?></div>
+                    <span class="text-secondary">
+                      <input type="text" readonly=""
+                      class="border-0 bg-transparent width-90px ml-2"
+                      name="usualBmiMinCategory"
+                      value="{{$patient->usual_bmi_min_category ?? ''}}">
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Target</td>
+                <td>
+                  <div class="width-70px"><?= vsElement('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                  <div class="width-70px"><?= vsRoElement('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
+                  <span class="text-secondary">
+                      <input type="text" readonly=""
+                             class="border-0 bg-transparent width-90px ml-2"
+                             name="idealBmiCategory"
+                             value="{{$patient->ideal_bmi_category ?? ''}}">
+                  </span>
+                </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
 
         <hr class="my-3">

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

@@ -1,70 +1,201 @@
-<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 mr-2">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-70px"><?= vsElement('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                    <div class="width-70px"><?= vsRoElement('usual_bmi_min', 'number', 'usualBmiMin', $patient) ?></div>
+                    <span class="text-secondary">
+                      @if($patient->usual_bmi_min_category)
+                        <input type="text" readonly=""
+                        class="border-0 bg-transparent width-90px ml-1"
+                        name="usualBmiMinCategory"
+                        value="{{$patient->usual_bmi_min_category ?? ''}}">
+                      @endif
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Target</td>
+                <td>
+                  <div class="width-70px"><?= vsElement('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $patient) ?></div>
+                </td>
+                <td>
+                  <div class="d-flex align-items-center">
+                  <div class="width-70px"><?= vsRoElement('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
+                  <span class="text-secondary">
+                    @if($patient->ideal_bmi_category)
+                      <input type="text" readonly=""
+                             class="border-0 bg-transparent width-90px ml-1"
+                             name="idealBmiCategory"
+                             value="{{$patient->ideal_bmi_category ?: ''}}">
+                    @endif
+                  </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>

+ 160 - 201
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,169 +6,23 @@
 
         <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="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>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>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 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>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>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="d-flex align-items-start">
-                                <div class="form-check mr-2">
-                                    <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
-                                    <label class="form-check-label" for="amPmVariation">AM/PM Variation</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input" id="bpRange" name="doesUsualBpHaveRange" v-model="form.doesUsualBpHaveRange">
-                                    <label class="form-check-label" for="bpRange">Range</label>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-
-                    <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>Pulse:</span>
-                            <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">
-                        <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>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>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>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>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-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 class="mb-2 d-flex align-items-start">
-                    <span class="text-secondary min-width-140px w-50">Reports HTN?</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="hasHypertensionDx">
+                        <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_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>
+                            <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">
+                <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>
@@ -176,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>
@@ -187,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">
@@ -205,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,6 +204,7 @@
         </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 ?>;
@@ -261,7 +214,13 @@
         data: {
             form: {
                 doesUsualBpHaveAmPmVariation: parseInt(doesUsualBpHaveAmPmVariation),
-                doesUsualBpHaveRange: parseInt(doesUsualBpHaveRange)
+                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: {

+ 250 - 213
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>
-                @endif
-                @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
-            </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>