stagfe2/resources/views/app/new-patient.blade.php

@extends ('layouts.template')

@section('content')

    <?php
    $patients = [1,2,3,4]; 
    $medicaidStates = Config::get('constants.medicaid_states');
    ?>

    <div class="p-3 mcp-theme-1" id="newPatientContainer" v-cloak>
        <div class="col-12 col-lg-7 px-0">
            <div class="card d-block mb-3" moe="">

                <div class="card-header">
                    <strong>
                        <i class="fas fa-user-plus"></i>
                        New Patient
                    </strong>
                </div>
                <div class="card-body">
                    <form show url="/api/client/create" class="px-3 pt-3 pb-1 primary-form" redir="patients/view/[data]">
                        @if (session('message'))
                            <div class="alert alert-danger">{{ session('message') }}</div>
                        @endif
                        <div class='form-group mb-3'>
                            <label class='control-label'>First Name *</label>
                            <input class='form-control' type='text' name='nameFirst' required>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Last Name *</label>
                            <input class='form-control' type='text' name='nameLast' value='' required>
                        </div>


                        @if($pro->pro_type === 'ADMIN')
                            <div class='form-group mb-3'>
                                <label class='control-label'>MCP Pro</label>
                                <select name="mcpProUid" class="form-control" provider-search provider-type="hcp">
                                    <option value="">--select--</option>
                                </select>
                            </div>
                            <div class='form-group mb-3'>
                                <label class='control-label'>Default NA Pro</label>
                                <select name="defaultNaProUid" class="form-control" provider-search provider-type="default-na">
                                    <option value="">--select--</option>
                                </select>
                            </div>
                        @elseif($pro->is_hcp === true)
                            <div class='form-group mb-3'>
                                <label class='control-label'>MCP Pro</label>
                                <input type="text" class="form-control" readonly value="{{$pro->displayName()}}">
                                <input type="hidden" name="mcpProUid" value="{{$pro->uid}}">
                            </div>
                        @elseif($pro->isDefaultNA())
                            <div class='form-group mb-3'>
                                <label class='control-label'>MCP Pro</label>
                                <?php $teams = $pro->teamsWhereAssistant; ?>
                                <select name="mcpProUid" class="form-control">
                                    <option value="">--select--</option>
                                    @foreach($teams as $team)
                                        <option value="{{$team->mcp->uid}}">{{$team->mcp->displayName()}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class='form-group mb-3'>
                                <label class='control-label'>Default NA Pro</label>
                                <input type="text" class="form-control" readonly value="{{$pro->displayName()}}">
                                <input type="hidden" name="defaultNaProUid" value="{{$pro->uid}}">
                            </div>
                        @endif

                        <div class='form-group mb-3'>
                            <label class='control-label'>Sex</label>
                            <select class='form-control' name='sex' value='' >
                                <option value=''>-- Select --</option>
                                <option value='M'>M</option>
                                <option value='F'>F</option>
                            </select>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Date Of Birth *</label>
                            <input class='form-control' type='date' name='dateOfBirth' max="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label d-flex align-items-center'>
                                <span>Home Phone Number</span>
                                <a href="#"
                                   class="ml-2 px-1 on-hover-opaque hpn-to-cpn">
                                    <i class="fa fa-arrow-down"></i>
                                </a>
                                <a href="#"
                                   class="ml-2 px-1 on-hover-opaque swap-pns">
                                    <i class="fa fa-retweet"></i>
                                </a>
                            </label>
                            <input class='form-control' stag-input-phone type='tel' name='homeNumber'>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label d-flex align-items-center'>
                                <span>Cell Phone Number</span>
                                <a href="#"
                                   class="ml-2 px-1 on-hover-opaque cpn-to-hpn">
                                    <i class="fa fa-arrow-up"></i>
                                </a>
                            </label>
                            <input class='form-control' stag-input-phone type='tel' name='cellNumber'>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Email Address </label>
                            <input class='form-control' type='email' name='emailAddress'>
                        </div>
                        <hr class="m-neg-4">
                        <div class='form-group mb-3'>
                            <label class='mb-3 control-label'>Type of Insurance Card </label>
                            <div class="d-inline-flex align-items-center">
                                <label class="my-0 mr-4 d-inline-flex align-items-center">
                                    <input class='insurance' type='radio' name='insurance' v-model="insuranceType" value="MEDICARE">
                                    <span class="ml-1">Medicare Part B (Primary)</span>
                                </label>
                                <label class="my-0 mr-4 d-inline-flex align-items-center">
                                    <input class='insurance' type='radio' name='insurance' v-model="insuranceType" value="MEDICAID">
                                    <span class="ml-1">Medicaid (Primary)</span>
                                </label>
                                <label class="my-0 mr-4 d-inline-flex align-items-center">
                                    <input class='insurance' type='radio' name='insurance' v-model="insuranceType" value="COMMERCIAL">
                                    <span class="ml-1">Commercial / Third Party (Primary)</span>
                                </label>
                            </div>
                        </div>
                        <div v-show="insuranceType == 'COMMERCIAL'">
                            <div class='form-group mb-3'>
                                <label class='control-label d-block'>Commercial Payer</label>
                                <input name="commercialPayerUidSuggest" class="form-control input-sm" value="" stag-suggest stag-suggest-ep="/search-payer/json" />
						        <input type="hidden" name="commercialPayerUid" />
                            </div>
                            <div class="row">
                              <div class='form-group col-md-6 mb-3'>
                                  <label class='control-label'>Patient Member ID</label>
                                  <input class='form-control' type='text' name='commercialMemberIdentifier'>
                              </div>
                              <div class='form-group col-md-6 mb-3'>
                                  <label class='control-label'>Patient Group Number</label>
                                  <input class='form-control' type='text' name='commercialGroupNumber'>
                              </div>
                            </div>
                            <p>Does the patient also have either a Medicare or Medicaid #? (optional)</p>
                        </div>
                        <div v-if="insuranceType == 'MEDICARE' || insuranceType == 'COMMERCIAL'">
                            <div class="mb-3 p-2 bg-light">
                              <h6 class="font-weight-bold m-0">Medicare Information</h6>
                            </div>
                            <div class='form-group mb-3'>
                                <label class='control-label'>Medicare Number</label>
                                <input class='form-control' type='text' name='medicareNumber'>
                            </div>
                        </div>
                        <div v-if="insuranceType == 'MEDICAID' || insuranceType == 'COMMERCIAL'">
                          <div class="mb-3 p-2 bg-light">
                            <h6 class="font-weight-bold m-0">Medicaid Information</h6>
                          </div>
                          <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="mcdPayer" name="mcdPayerUid" id="mcdPayerUid">
                              <datalist id="mcdPayer">
                                <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="mcdNumber" class="form-control input-sm">
                            </div>

                          </div>
                        </div>

                        <hr class="m-neg-4">
        			           <div class='form-group mb-3'>
                            <label class='control-label'>How did you hear about us?</label>
                            <textarea class='form-control' type='text' required="" name='initiative'></textarea>
                        </div>
                    </form>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary" submit>Create New Patient</button>
                </div>
            </div>
        </div>
    </div>

    <link href="/select2/select2.min.css" rel="stylesheet" />
    <script src="/select2/select2.min.js"></script>
    <script src="/inputmask-5.x/dist/inputmask.js"></script>
    <script>
        (function() {
            function init() {
                let im = new Inputmask("(999) 999-9999").mask('[stag-input-phone]');
                $(document)
                    .off('click.hpn-to-cpn', '.hpn-to-cpn')
                    .on('click.hpn-to-cpn', '.hpn-to-cpn', function() {
                        $('[name="cellNumber"]').val($('[name="homeNumber"]').val());
                        $('[name="homeNumber"]').val('');
                        return false;
                    });
                $(document)
                    .off('click.cpn-to-hpn', '.cpn-to-hpn')
                    .on('click.cpn-to-hpn', '.cpn-to-hpn', function() {
                        $('[name="homeNumber"]').val($('[name="cellNumber"]').val());
                        $('[name="cellNumber"]').val('');
                        return false;
                    });
                $(document)
                    .off('click.swap-pns', '.swap-pns')
                    .on('click.swap-pns', '.swap-pns', function() {
                        let hpn = $('[name="homeNumber"]').val();
                        $('[name="homeNumber"]').val($('[name="cellNumber"]').val());
                        $('[name="cellNumber"]').val(hpn);
                        return false;
                    });
                $(document)
                    .off('change.insurance', '.insurance')
                    .on('change.insurance', '.insurance', function() {
                        $('[data-insurance]').addClass('d-none');
                        $('[data-insurance="' + $(this).val() + '"]').removeClass('d-none');
                        $(this).closest('form').attr('url', '/api/client/' + ($(this).val() === 'medicare' ? 'create' : 'createNonMcn'))
                        $(this).closest('[moe]').removeAttr('initialized');
                        initMoes();
                        return false;
                    });
                $('.select2').select2({
                    width: '100%'
                });
            }
            addMCInitializer('new-patient', init, '#newPatientContainer');
        }).call(window);

        var newPatientContainer = new Vue({
          el: '#newPatientContainer',
          data: {
            insuranceType: 'MEDICARE'
          },
          methods:{
            onCommercialPayerChange:function() {
                var input = $('input[name=commercialPayerUidSuggest]');
                var hiddenInput = $('input[name=commercialPayerUid]');
                input
                    .off('stag-suggest-selected')
                    .on('stag-suggest-selected', (e, input, _data) => {
                        hiddenInput.val(_data.uid);
                    });

            }
          },
          mounted: function(){
            this.onCommercialPayerChange();
          }
        })
    </script>

@endsection