<div moe wide center id="bp-management-settings">
    <a href="#" start show>{{@$label ?: 'Update'}}</a>
    <form url="/api/client/updateBpManagementSettingsValue">
        <input type="hidden" name="uid" value="{{$patient->uid}}">
        <p class="text-secondary font-weight-bold font-size-14">BP Management</p>

        <div id="bpManagementComponent" class="row mx-0" v-cloak>
            <div class="col-6 border-right">
                <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>
                <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>
                </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>
                </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>
                </div>

                <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="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" name="usualAmRestingDbpMin" v-model="form.usualAmRestingDbpMin" />
                                    </td>
                                    <td>
                                        <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" v-model="form.usualAmRestingPulseMin" /> <span class="ml-1">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" 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" 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" 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 class="mx-1">/</span>
                            <input type="text" class="inline-input-underlined width-50 mr-2" 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 class="ml-1">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 class="mx-1">/</span>
                                <input type="text" class="inline-input-underlined width-50 mr-2" 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 class="ml-1">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 class="mx-1">/</span>
                                <input type="text" class="inline-input-underlined width-50 mr-2" 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 class="ml-1">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 class="mx-1">/</span>
                                <input type="text" class="inline-input-underlined width-50 mr-2" 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 class="ml-1">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 class="mx-1">/</span>
                                <input type="text" class="inline-input-underlined width-50 mr-2" 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 class="ml-1">BPM</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="border mt-2 px-2 py-1 bg-aliceblue border border-info">
            <label class="d-flex align-items-center m-0">
                <input type="checkbox" name="isBpAndPulseUpdated" {{$patient->is_bp_and_pulse_updated ? 'checked' : ''}}>
                <span class="ml-2">I confirm that the above settings are correct.</span>
            </label>
        </div>

        <div class="pt-2">
            <button class="btn btn-primary btn-sm" submit>Submit</button>
            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
        </div>
    </form>
</div>

<script>
    var doesUsualBpHaveAmPmVariation = <?= $patient->does_usual_bp_have_am_pm_variation ? 1 : 0 ?>;
    var doesUsualBpHaveRange = <?= $patient->does_usual_bp_have_range ? 1 : 0 ?>;
    // BP Management
    var BPManagementComponent = new Vue({
        el: '#bpManagementComponent',
        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', init, '#bp-management-settings');

    }).call(window);
</script>
