resources/views/app/patient/insurance-cards.blade.php

@@ -21,8 +21,8 @@
             <tr>
                 <th class="border-0">Created At</th>
                 <th class="border-0">Coverage Order</th>
-                <th class="border-0">Plan Type</th>
-                <th class="border-0">Plan Name</th>
+                <th class="border-0">Member ID</th>
+                <th class="border-0">Group ID</th>
                 <th class="border-0">Carrier Category</th>
                 <th class="border-0">Carrier Name</th>
                 <th class="border-0"></th>
@@ -33,8 +33,8 @@
             <tr>
                 <td><a href="{{ route('patients.view.insurance-card', ['patient' => $patient, 'card' => $card]) }}">{{ friendly_date($card->created_at) }}</a></td>
                 <td>{{ $card->coverage_order }}</td>
-                <td>{{ $card->plan_type }}</td>
-                <td>{{ $card->plan_name }}</td>
+                <td>{{ $card->member_id }}</td>
+                <td>{{ $card->group_id }}</td>
                 <td>{{ $card->carrier_category }}</td>
                 <td>{{ $card->carrier_name }}</td>
                 <td>

resources/views/app/patient/partials/insurance-cards/forms/create.blade.php

@@ -1,217 +1,246 @@
+@php
+$medicaidStates = Config::get('constants.medicaid_states');
+@endphp
 <div moe>
     <a class="text-nowrap" href="" show start>+Create</a>
-    <form url="/api/insuranceCard/create" style="min-width: 600px;">
+    <form url="/api/insuranceCard/create" style="min-width: 600px;" id="createInsuranceCardForm">
         <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-        <div class="bg-light">
-            <div class="col-md-12">
-                <div class="row border rounded pt-3 mb-3 bg-white">
+        <div id="createInsuranceCardContainer" class="row mx-0 my-2">
+            <div class="col-md-12 px-2">
+                {{--<div class="row border rounded pt-3 mb-3 bg-white">
                     <div class="col-md-12">
                         <div class="form-group">
                             <label>Coverage Order</label>
-                            <select name="coverageOrder" class="form-control">
+                            <select name="coverageOrder" class="form-control" v-model="coverageOrder">
                                 <option value="PRIMARY">PRIMARY</option>
                                 <option value="SECONDARY">SECONDARY</option>
                                 <option value="TERTIARY">TERTIARY</option>
                             </select>
                         </div>
                     </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Payer Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Carrier Category</label>
-                            <select name="carrierCategory" class="form-control">
-                                <option value="MEDICARE">MEDICARE</option>
-                                <option value="MEDICAID">MEDICAID</option>
-                                <option value="COMMERCIAL">COMMERCIAL</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Carrier Name</label>
-                            <input name="carrierName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div class="form-group">
-                            <label>Carrier Memo</label>
-                            <input name="carrierMemo" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Contact Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Phone Number For Provider</label>
-                            <input name="phoneNumberForProvider" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Phone Number For Members</label>
-                            <input name="phoneNumberForMembers" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Patient Informtion</h6>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient First Name</label>
-                            <input name="patientFirstName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Middle Name</label>
-                            <input name="patientMiddleName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Last Name</label>
-                            <input name="patientLastName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Suffix</label>
-                            <input name="patientSuffix" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Sex</label>
-                            <select name="patientSex" class="form-control">
-                                <option value="MALE">MALE</option>
-                                <option value="FEMALE">FEMALE</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Birth Date</label>
-                            <input type="date" name="patientBirthDate" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div class="">
-                            <label><input type="checkbox" name="isPatientSubscriber" class="" /> Is Patient
-                                Subscriber?</label>
+                </div>--}}
+                <div>
+                    <div class="px-0">
 
+                        <div class="row">
+                            <div class="form-group col-md-12">
+                                <p class="mb-1 font-weight-bold">Coverage Type:</p>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label" :class="hasPrimary ? 'text-muted' : ''">
+                                        <input class="form-check-input" type="radio" name="coverageOrder" v-model="coverageOrder" value="PRIMARY" :disabled="hasPrimary">
+                                        Primary
+                                    </label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label" :class="hasSecondary ? 'text-muted' : ''">
+                                        <input class="form-check-input" type="radio" name="coverageOrder" v-model="coverageOrder" value="SECONDARY" :disabled="hasSecondary">
+                                        Secondary
+                                    </label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label" :class="hasTertiary ? 'text-muted' : ''">
+                                        <input class="form-check-input" type="radio" name="coverageOrder" v-model="coverageOrder" value="TERTIARY" :disabled="hasTertiary">
+                                        Tertiary
+                                    </label>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div class="form-group">
-                            <label>Relationship To Subscriber</label>
-                            <input type="text" name="relationshipToSubscriber" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Subscriber Informtion</h6>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber First Name</label>
-                            <input name="subscriberFirstName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Middle Name</label>
-                            <input name="subscriberMiddleName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Last Name</label>
-                            <input name="subscriberLastName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Suffix</label>
-                            <input name="subscriberSuffix" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Sex</label>
-                            <select name="subscriberSex" class="form-control">
-                                <option value="MALE">MALE</option>
-                                <option value="FEMALE">FEMALE</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Birth Date</label>
-                            <input type="date" name="subscriberBirthDate" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Identifier Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Member ID</label>
-                            <input name="memberId" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Group ID</label>
-                            <input name="groupId" class="form-control" />
-                        </div>
-                    </div>
 
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Plan Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Plan Name</label>
-                            <input name="planName" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Plan Type</label>
-                            <select name="planType" class="form-control">
-                                <option value="HMO">HMO</option>
-                                <option value="PPO">PPO</option>
-                                <option value="EPO">EPO</option>
-                                <option value="POS">POS</option>
-                                <option value="HDHP">HDHP</option>
-                                <option value="MCO">MCO</option>
-                                <option value="FFS">FFS</option>
-                                <option value="OTHER">OTHER</option>
-                            </select>
+                        <div class="row" v-if="!!coverageOrder">
+                            <div class="form-group col-md-12">
+                                <p class="mb-1 font-weight-bold">Type of Insurance Card:</p>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label"><input class="form-check-input" type="radio" v-on:change="setCarrierCategory(event, 'MEDICARE')" v-model="carrierCategoryInternal" value="MEDICARE">Medicare Part B</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label"><input class="form-check-input" type="radio" v-on:change="setCarrierCategory(event, 'MEDICAID')" v-model="carrierCategoryInternal" value="MEDICAID">Medicaid</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label"><input class="form-check-input" type="radio" v-on:change="setCarrierCategory(event, 'COMMERCIAL')" v-model="carrierCategoryInternal" value="COMMERCIAL">Commercial</label>
+                                </div>
+                                <input v-if="!!carrierCategory" type="hidden" name="carrierCategory" v-model="carrierCategory">
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Plan Effective Date</label>
-                            <input type="date" name="planEffectiveDate" class="form-control" />
+
+                        <div class="px-0" v-if="!!carrierCategory">
+
+                            {{-- commercial --}}
+                            <div class="row" v-if="carrierCategory == 'COMMERCIAL'">
+                                <div class="col-md-12">
+                                    <div class="px-0 pb-2 mb-2 border-bottom">
+                                        <h5 class="m-0 font-weight-bold">Commercial Insurance Information:</h5>
+                                    </div>
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Carrier Name</label>
+                                    <input type="text" name="carrierName"  class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Carrier Memo</label>
+                                    <input type="text" name="carrierMemo"  class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Member/Subscriber ID</label>
+                                    <input type="text" name="memberId" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Group Number</label>
+                                    <input type="text" name="groupId" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Phone Number for Providers</label>
+                                    <input type="text" name="phoneNumberForProvider" class="form-control input-sm phone">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Phone Number for Subscribers</label>
+                                    <input type="text" name="phoneNumberForMembers" class="form-control input-sm phone">
+                                </div>
+                            </div>
+
+                            {{--<div class="row" v-if="carrierCategory">
+                              <div class="col-12">
+                                <hr class="mt-0 mb-2">
+                              </div>
+                              <div class="form-group col-md-6">
+                                <p class="mb-1 font-weight-bold">RPM covered (if medically needed)?</p>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="YES">Yes</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="NO">No</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="UNKNOWN">Unknown</label>
+                                </div>
+                              </div>
+                              <div class="form-group col-md-6">
+                                <p class="mb-1 font-weight-bold">Televisits covered (if medically needed)?</p>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="YES">Yes</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="NO">No</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="UNKNOWN">Unknown</label>
+                                </div>
+                              </div>
+                            </div>--}}
+
+                            {{-- medicaid --}}
+                            <div class="row" v-if="carrierCategory == 'MEDICAID'{{-- || carrierCategory == 'COMMERCIAL'--}}">
+                                <div class="col-md-12">
+                                    <div class="px-0 pb-2 mb-2 border-bottom">
+                                        <h5 class="m-0 font-weight-bold">Medicaid Information:</h5>
+                                    </div>
+                                </div>
+                                <div class="col-12">
+                                    <div class="row">
+
+                                        <div class="form-group col-md-6">
+                                            <label for="" class="control-label">Medicaid State</label>
+                                            <input class="form-control input-sm" list="mcdPayerOptions" name="carrierName" id="carrierName">
+                                            <datalist id="mcdPayerOptions">
+                                                <option value="">--</option>
+                                                @foreach($medicaidStates as $state)
+                                                    <option>{{ $state }}</option>
+                                                @endforeach
+                                            </datalist>
+                                        </div>
+
+                                        <div class="form-group col-md-6">
+                                            <label class="control-label">Medicaid Number</label>
+                                            <input type="text" name="memberId" class="form-control input-sm" oninput="this.value = this.value.toUpperCase()">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {{-- medicare --}}
+                            <div class="row" v-if="carrierCategory == 'MEDICARE'{{-- || carrierCategory == 'COMMERCIAL'--}}">
+                                <div class="col-md-12">
+                                    <div class="px-0 pb-2 mb-2 border-bottom">
+                                        <h5 class="m-0 font-weight-bold">Medicare Information:</h5>
+                                    </div>
+                                </div>
+                                <div class="col-12">
+                                    <div class="row">
+                                        <div class="form-group col-md-6">
+                                            <label class="control-label">Medicare Number </label>
+                                            <input type="text" name="memberId" class="form-control input-sm" oninput="this.value = this.value.toUpperCase()">
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            {{-- is subcr == patient? application only for medicaid and commercial --}}
+                            <div class="row" v-if="carrierCategory == 'MEDICAID' || carrierCategory == 'COMMERCIAL'">
+                                <div class="form-group col-md-12">
+                                    <div class="form-check form-check-inline">
+                                        <label class="form-check-label"><input class="form-check-input" type="checkbox" name="isPatientSubscriber" v-model="isPatientSubscriber">Is Patient The Subscriber?</label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {{-- if subcr != patient. application only for medicaid and commercial --}}
+                            <div v-if="!isPatientSubscriber && (carrierCategory == 'MEDICAID' || carrierCategory == 'COMMERCIAL')" class="row">
+                                <div class="col-md-12 bg-light p-3 mb-2">
+                                    <h5 class="m-0 font-weight-bold">Subscriber Details:</h5>
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber First Name</label>
+                                    <input type="text" name="subscriberFirstName" value="" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Middle Name / MI</label>
+                                    <input type="text" name="subscriberMiddleName" value="" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Last Name</label>
+                                    <input type="text" name="subscriberLastName" value="" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Suffix</label>
+                                    <input type="text" name="subscriberSuffix" value="" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Sex</label>
+                                    <select class="form-control input-sm" name="subscriberSex">
+                                        <option value="">--</option>
+                                        <option value="M">Male</option>
+                                        <option value="F">Female</option>
+                                        <option value="UNKNOWN">Unknown</option>
+                                    </select>
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Dob</label>
+                                    <input type="date" name="subscriberBirthDate" value="" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-12">
+                                    <label class="control-label">What is the patient's relationship to the subscriber?</label>
+                                    <select name="relationshipToSubscriber" class="form-control input-sm">
+                                        <option value="">--</option>
+                                        <option value="SPOUSE">Spouse</option>
+                                        <option value="CHILD">Child</option>
+                                        <option value="EMPLOYEE">Employee</option>
+                                        <option value="ORGAN_DONOR">Organ Donor</option>
+                                        <option value="CADAVER_DONOR">Cadaver Donor</option>
+                                        <option value="LIFE_PARTNER">Life Partner</option>
+                                        <option value="OTHER_RELATIONSHIP">Other Relationship</option>
+                                        <option value="UNKNOWN">Unknown</option>
+                                    </select>
+                                </div>
+                            </div>
+                            {{--<div class="mb-1" v-if="carrierCategory == 'COMMERCIAL'">
+                              <h6 class="font-weight-bold">Does the patient also have either a Medicare or Medicaid #? (optional)</h6>
+                            </div>--}}
+
                         </div>
                     </div>
                 </div>
             </div>
+            {{--<button type="button" v-on:click="console.log($('#createInsuranceCardForm').serialize().replaceAll('&', '\n'));">Test Payload</button>--}}
         </div>
         <div class="mb-0">
             <button class="btn btn-primary btn-sm" submit>Submit</button>
@@ -219,3 +248,45 @@
         </div>
     </form>
 </div>
+<?php
+$hasPrimary = false;
+$hasSecondary = false;
+$hasTertiary = false;
+foreach ($insuranceCards as $card) {
+    if(!$hasPrimary && $card->coverage_order == 'PRIMARY') $hasPrimary = true;
+    if(!$hasSecondary && $card->coverage_order == 'SECONDARY') $hasSecondary = true;
+    if(!$hasTertiary && $card->coverage_order == 'TERTIARY') $hasTertiary = true;
+}
+?>
+<script>
+    (function() {
+        function init() {
+            new Vue({
+                el: '#createInsuranceCardContainer',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    hasPrimary: {{ $hasPrimary ? 'true' : 'false' }},
+                    hasSecondary: {{ $hasSecondary ? 'true' : 'false' }},
+                    hasTertiary: {{ $hasTertiary ? 'true' : 'false' }},
+                    coverageOrder: '',
+                    carrierCategory: '',
+                    carrierCategoryInternal: '',
+                    isPatientSubscriber: true,
+                },
+                methods: {
+                    setCarrierCategory: function(_event, _carrierCategory) {
+                        if(!$(_event.target).prop('checked')) return;
+                        this.carrierCategory = _carrierCategory;
+                    },
+                    init: function() {
+
+                    }
+                },
+                mounted: function() {
+                    this.init();
+                },
+            });
+        }
+        addMCInitializer('createInsuranceCard', init, '#createInsuranceCardContainer');
+    })();
+</script>

resources/views/app/patient/partials/insurance-cards/forms/put-benefit-meter.blade.php

@@ -1,12 +1,12 @@
 <div moe>
-    <a class="text-nowrap" href="" show start>Put Card Info</a>
+    <a class="text-nowrap" href="" show start>Put Benefit Meter</a>
     <form url="/api/insuranceCard/putBenefitMeter" style="min-width: 600px;">
         <input type="hidden" name="uid" value="{{ $card->uid }}">
         <div class="bg-light">
             <div class="col-md-12">
                 <div class="row border rounded pt-3 mb-3 bg-white">
                     <div class="col-md-12">
-                        <h6 class="font-weight-bold">Plan Informtion</h6>
+                        <h6 class="font-weight-bold">Plan Information</h6>
                     </div>
                     <div class="col-md-6">
                         <div class="form-group">

resources/views/app/patient/partials/insurance-cards/forms/put-card-info.blade.php

@@ -1,217 +1,214 @@
+@php
+    $medicaidStates = Config::get('constants.medicaid_states');
+@endphp
 <div moe>
     <a class="text-nowrap" href="" show start>Put Card Info</a>
-    <form url="/api/insuranceCard/putCardInfo" style="min-width: 600px;">
+    <form url="/api/insuranceCard/putCardInfo" style="min-width: 600px;"  id="editInsuranceCardForm">
         <input type="hidden" name="uid" value="{{ $card->uid }}">
-        <div class="bg-light">
-            <div class="col-md-12">
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <div class="form-group">
-                            <label>Coverage Order</label>
-                            <select name="coverageOrder" class="form-control">
-                                <option value="PRIMARY" {{ $card->coverage_order === 'PRIMARY' ? 'selected':'' }}>PRIMARY</option>
-                                <option value="SECONDARY" {{ $card->coverage_order === 'SECONDARY' ? 'selected':'' }}>SECONDARY</option>
-                                <option value="TERTIARY" {{ $card->coverage_order === 'TERTIARY' ? 'selected':'' }}>TERTIARY</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Payer Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Carrier Category</label>
-                            <select name="carrierCategory" class="form-control">
-                                <option value="MEDICARE" {{ $card->carrier_category === 'MEDICARE' ? 'selected':'' }}>MEDICARE</option>
-                                <option value="MEDICAID" {{ $card->carrier_category === 'MEDICAID' ? 'selected':'' }}>MEDICAID</option>
-                                <option value="COMMERCIAL" {{ $card->carrier_category === 'COMMERCIAL' ? 'selected':'' }}>COMMERCIAL</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Carrier Name</label>
-                            <input name="carrierName" value="{{ $card->carrier_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div class="form-group">
-                            <label>Carrier Memo</label>
-                            <input name="carrierMemo" value="{{ $card->carrier_memo }}" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Contact Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Phone Number For Provider</label>
-                            <input name="phoneNumberForProvider" value="{{ $card->phone_number_for_provider }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Phone Number For Members</label>
-                            <input name="phoneNumberForMembers" value="{{ $card->phone_number_for_members }}" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Patient Informtion</h6>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient First Name</label>
-                            <input name="patientFirstName" value="{{ $card->patient_first_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Middle Name</label>
-                            <input name="patientMiddleName" value="{{ $card->patient_middle_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Last Name</label>
-                            <input name="patientLastName" value="{{ $card->patient_last_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Suffix</label>
-                            <input name="patientSuffix" value="{{ $card->patient_suffix }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Sex</label>
-                            <select name="patientSex" class="form-control">
-                                <option value="MALE" {{ $card->patient_sex === 'MALE' ? 'selected':'' }}>MALE</option>
-                                <option value="FEMALE" {{ $card->patient_sex === 'FEMALE' ? 'selected':'' }}>FEMALE</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Patient Birth Date</label>
-                            <input type="date" name="patientBirthDate" value="{{ $card->patient_birth_date }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div class="">
-                            <label><input type="checkbox" name="isPatientSubscriber" class="" {{ $card->is_patient_subscriber ? 'checked':'' }} /> Is Patient
-                                Subscriber?</label>
+        <div id="editInsuranceCardContainer" class="row mx-0 my-2">
+            <div class="col-md-12 px-2">
+                <div>
+                    <div class="px-0">
 
+                        <div class="row">
+                            <div class="form-group col-md-12">
+                                <p class="mb-1 font-weight-bold">Type of Insurance Card:</p>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label"><input class="form-check-input" type="radio" v-on:change="setCarrierCategory(event, 'MEDICARE')" v-model="carrierCategoryInternal" value="MEDICARE">Medicare Part B</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label"><input class="form-check-input" type="radio" v-on:change="setCarrierCategory(event, 'MEDICAID')" v-model="carrierCategoryInternal" value="MEDICAID">Medicaid</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <label class="form-check-label"><input class="form-check-input" type="radio" v-on:change="setCarrierCategory(event, 'COMMERCIAL')" v-model="carrierCategoryInternal" value="COMMERCIAL">Commercial</label>
+                                </div>
+                                <input v-if="!!carrierCategory" type="hidden" name="carrierCategory" v-model="carrierCategory">
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div class="form-group">
-                            <label>Relationship To Subscriber</label>
-                            <input type="text" name="relationshipToSubscriber" value="{{ $card->relationship_to_subscriber }}" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Subscriber Informtion</h6>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber First Name</label>
-                            <input name="subscriberFirstName" value="{{ $card->subscriber_first_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Middle Name</label>
-                            <input name="subscriberMiddleName" value="{{ $card->subscriber_middle_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Last Name</label>
-                            <input name="subscriberLastName" value="{{ $card->subscriber_last_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Suffix</label>
-                            <input name="subscriberSuffix" value="{{ $card->subscriber_suffix }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Sex</label>
-                            <select name="subscriberSex" class="form-control">
-                                <option value="MALE" {{ $card->subscriber_sex === 'MALE' ? 'selected':'' }}>MALE</option>
-                                <option value="FEMALE" {{ $card->subscriber_sex === 'FEMALE' ? 'selected':'' }}>FEMALE</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label>Subscriber Birth Date</label>
-                            <input type="date" name="subscriberBirthDate" value="{{ $card->subscriber_birth_date }}" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Identifier Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Member ID</label>
-                            <input name="memberId" value="{{ $card->member_id }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Group ID</label>
-                            <input name="groupId" value="{{ $card->group_id }}" class="form-control" />
-                        </div>
-                    </div>
 
-                </div>
-                <div class="row border rounded pt-3 mb-3 bg-white">
-                    <div class="col-md-12">
-                        <h6 class="font-weight-bold">Plan Informtion</h6>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Plan Name</label>
-                            <input name="planName" value="{{ $card->plan_name }}" class="form-control" />
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Plan Type</label>
-                            <select name="planType" class="form-control">
-                                <option value="HMO" {{ $card->plan_type === 'HMO' ? 'selected':'' }}>HMO</option>
-                                <option value="PPO" {{ $card->plan_type === 'PPO' ? 'selected':'' }}>PPO</option>
-                                <option value="EPO" {{ $card->plan_type === 'EPO' ? 'selected':'' }}>EPO</option>
-                                <option value="POS" {{ $card->plan_type === 'POS' ? 'selected':'' }}>POS</option>
-                                <option value="HDHP" {{ $card->plan_type === 'HDHP' ? 'selected':'' }}>HDHP</option>
-                                <option value="MCO" {{ $card->plan_type === 'MCO' ? 'selected':'' }}>MCO</option>
-                                <option value="FFS" {{ $card->plan_type === 'FFS' ? 'selected':'' }}>FFS</option>
-                                <option value="OTHER" {{ $card->plan_type === 'OTHER' ? 'selected':'' }}>OTHER</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label>Plan Effective Date</label>
-                            <input type="date" name="planEffectiveDate" value="{{ $card->plan_effective_date }}" class="form-control" />
+                        <div class="px-0" v-if="!!carrierCategory">
+
+                            {{-- commercial --}}
+                            <div class="row" v-if="carrierCategory == 'COMMERCIAL'">
+                                <div class="col-md-12">
+                                    <div class="px-0 pb-2 mb-2 border-bottom">
+                                        <h5 class="m-0 font-weight-bold">Commercial Insurance Information:</h5>
+                                    </div>
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Carrier Name</label>
+                                    <input type="text" name="carrierName"  class="form-control input-sm" value="{{$card->carrier_name}}">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Carrier Memo</label>
+                                    <input type="text" name="carrierMemo"  class="form-control input-sm" value="{{$card->carrier_name}}">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Member/Subscriber ID</label>
+                                    <input type="text" name="memberId" class="form-control input-sm" value="{{$card->member_id}}">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Group Number</label>
+                                    <input type="text" name="groupId" class="form-control input-sm" value="{{$card->group_id}}">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Phone Number for Providers</label>
+                                    <input type="text" name="phoneNumberForProvider" class="form-control input-sm phone" value="{{$card->phone_number_for_provider}}">
+                                </div>
+                                <div class="form-group col-md-6">
+                                    <label class="control-label">Phone Number for Subscribers</label>
+                                    <input type="text" name="phoneNumberForMembers" class="form-control input-sm phone" value="{{$card->phone_number_for_members}}">
+                                </div>
+                            </div>
+
+                            {{--<div class="row" v-if="carrierCategory">
+                              <div class="col-12">
+                                <hr class="mt-0 mb-2">
+                              </div>
+                              <div class="form-group col-md-6">
+                                <p class="mb-1 font-weight-bold">RPM covered (if medically needed)?</p>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="YES">Yes</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="NO">No</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="UNKNOWN">Unknown</label>
+                                </div>
+                              </div>
+                              <div class="form-group col-md-6">
+                                <p class="mb-1 font-weight-bold">Televisits covered (if medically needed)?</p>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="YES">Yes</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="NO">No</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                  <label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="UNKNOWN">Unknown</label>
+                                </div>
+                              </div>
+                            </div>--}}
+
+                            {{-- medicaid --}}
+                            <div class="row" v-if="carrierCategory == 'MEDICAID'{{-- || carrierCategory == 'COMMERCIAL'--}}">
+                                <div class="col-md-12">
+                                    <div class="px-0 pb-2 mb-2 border-bottom">
+                                        <h5 class="m-0 font-weight-bold">Medicaid Information:</h5>
+                                    </div>
+                                </div>
+                                <div class="col-12">
+                                    <div class="row">
+
+                                        <div class="form-group col-md-6">
+                                            <label for="" class="control-label">Medicaid State</label>
+                                            <input class="form-control input-sm" list="mcdPayerOptions" name="carrierName" id="carrierName" value="{{$card->carrier_name}}">
+                                            <datalist id="mcdPayerOptions">
+                                                <option value="">--</option>
+                                                @foreach($medicaidStates as $state)
+                                                    <option {{$state == $card->carrier_name ? 'selected' : ''}} >{{ $state }}</option>
+                                                @endforeach
+                                            </datalist>
+                                        </div>
+
+                                        <div class="form-group col-md-6">
+                                            <label class="control-label">Medicaid Number</label>
+                                            <input type="text" name="memberId" class="form-control input-sm" oninput="this.value = this.value.toUpperCase()" value="{{$card->member_id}}">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {{-- medicare --}}
+                            <div class="row" v-if="carrierCategory == 'MEDICARE'{{-- || carrierCategory == 'COMMERCIAL'--}}">
+                                <div class="col-md-12">
+                                    <div class="px-0 pb-2 mb-2 border-bottom">
+                                        <h5 class="m-0 font-weight-bold">Medicare Information:</h5>
+                                    </div>
+                                </div>
+                                <div class="col-12">
+                                    <div class="row">
+                                        <div class="form-group col-md-6">
+                                            <label class="control-label">Medicare Number </label>
+                                            <input type="text" name="memberId" class="form-control input-sm" oninput="this.value = this.value.toUpperCase()">
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            {{-- is subcr == patient? application only for medicaid and commercial --}}
+                            <div class="row" v-if="carrierCategory == 'MEDICAID' || carrierCategory == 'COMMERCIAL'">
+                                <div class="form-group col-md-12">
+                                    <div class="form-check form-check-inline">
+                                        <label class="form-check-label">
+                                            <input type="hidden" name="isPatientSubscriber" :value="isPatientSubscriber ? 1 : 0">
+                                            <input class="form-check-input" type="checkbox" v-model="isPatientSubscriber">
+                                            Is Patient The Subscriber?
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {{-- if subcr != patient. application only for medicaid and commercial --}}
+                            <div v-if="!isPatientSubscriber && (carrierCategory == 'MEDICAID' || carrierCategory == 'COMMERCIAL')" class="row">
+                                <div class="col-md-12 bg-light p-3 mb-2">
+                                    <h5 class="m-0 font-weight-bold">Subscriber Details:</h5>
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber First Name</label>
+                                    <input type="text" name="subscriberFirstName" value="{{ $card->subscriber_first_name }}" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Middle Name / MI</label>
+                                    <input type="text" name="subscriberMiddleName" value="{{ $card->subscriber_middle_name }}" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Last Name</label>
+                                    <input type="text" name="subscriberLastName" value="{{ $card->subscriber_last_name }}" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Suffix</label>
+                                    <input type="text" name="subscriberSuffix" value="{{ $card->subscriber_suffix }}" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Sex</label>
+                                    <select class="form-control input-sm" name="subscriberSex">
+                                        <option value="">--</option>
+                                        <option value="M" {{ $card->subscriber_sex === 'MALE' ? 'selected':'' }}>MALE</option>
+                                        <option value="F" {{ $card->subscriber_sex === 'FEMALE' ? 'selected':'' }}>FEMALE</option>
+                                        <option value="UNKNOWN" {{ $card->subscriber_sex === 'FEMALE' ? 'selected':'' }}>UNKNOWN</option>
+                                    </select>
+                                </div>
+                                <div class="form-group col-md-4">
+                                    <label class="control-label">Subscriber Dob</label>
+                                    <input type="date" name="subscriberBirthDate" value="{{ $card->subscriber_birth_date }}" class="form-control input-sm">
+                                </div>
+                                <div class="form-group col-md-12">
+                                    <label class="control-label">What is the patient's relationship to the subscriber?</label>
+                                    <select name="relationshipToSubscriber" class="form-control input-sm">
+                                        <option value="">--</option>
+                                        <option {{ $card->relationship_to_subscriber == 'SPOUSE' ? 'selected' : '' }} value="SPOUSE">Spouse</option>
+                                        <option {{ $card->relationship_to_subscriber == 'CHILD' ? 'selected' : '' }} value="CHILD">Child</option>
+                                        <option {{ $card->relationship_to_subscriber == 'EMPLOYEE' ? 'selected' : '' }} value="EMPLOYEE">Employee</option>
+                                        <option {{ $card->relationship_to_subscriber == 'ORGAN_DONOR' ? 'selected' : '' }} value="ORGAN_DONOR">Organ Donor</option>
+                                        <option {{ $card->relationship_to_subscriber == 'CADAVER_DONOR' ? 'selected' : '' }} value="CADAVER_DONOR">Cadaver Donor</option>
+                                        <option {{ $card->relationship_to_subscriber == 'LIFE_PARTNER' ? 'selected' : '' }} value="LIFE_PARTNER">Life Partner</option>
+                                        <option {{ $card->relationship_to_subscriber == 'OTHER_RELATIONSHIP' ? 'selected' : '' }} value="OTHER_RELATIONSHIP">Other Relationship</option>
+                                        <option {{ $card->relationship_to_subscriber == 'UNKNOWN' ? 'selected' : '' }} value="UNKNOWN">Unknown</option>
+                                    </select>
+                                </div>
+                            </div>
+                            {{--<div class="mb-1" v-if="carrierCategory == 'COMMERCIAL'">
+                              <h6 class="font-weight-bold">Does the patient also have either a Medicare or Medicaid #? (optional)</h6>
+                            </div>--}}
+
                         </div>
                     </div>
                 </div>
             </div>
+            {{--<button type="button" v-on:click="console.log($('#createInsuranceCardForm').serialize().replaceAll('&', '\n'));">Test Payload</button>--}}
         </div>
         <div class="mb-0">
             <button class="btn btn-primary btn-sm" submit>Submit</button>
@@ -219,3 +216,31 @@
         </div>
     </form>
 </div>
+<script>
+    (function() {
+        function init() {
+            new Vue({
+                el: '#editInsuranceCardContainer',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    carrierCategory: {!! $card->carrier_category ? "'{$card->carrier_category}'" : 'null' !!},
+                    carrierCategoryInternal: {!! $card->carrier_category ? "'{$card->carrier_category}'" : 'null' !!},
+                    isPatientSubscriber: {!! $card->is_patient_subscriber ? 'true':'false' !!},
+                },
+                methods: {
+                    setCarrierCategory: function(_event, _carrierCategory) {
+                        if(!$(_event.target).prop('checked')) return;
+                        this.carrierCategory = _carrierCategory;
+                    },
+                    init: function() {
+
+                    }
+                },
+                mounted: function() {
+                    this.init();
+                },
+            });
+        }
+        addMCInitializer('editInsuranceCard', init, '#editInsuranceCardContainer');
+    })();
+</script>