<div class="w-100" id="bmi-management-settings-summary">
    <form>
      <fieldset disabled>
        <input type="hidden" name="uid" value="{{$patient->uid}}">
        <div class="mb-3 d-flex align-items-center">
            <span class="text-secondary mr-2">Current Height:</span>
            <div class="width-50px mr-1">
                <input type="text" name="current_height_FT" class="form-control form-control-sm min-width-unset rounded-0"
                       heightFeetInput
                       value="{{feetFromInches($patient->current_height_in_inches)}}">
            </div>
            <span class="text-secondary mr-2">ft.</span>
            <div class="width-50px mr-1">
                <input type="text" name="current_height_IN" class="form-control form-control-sm min-width-unset rounded-0"
                       heightInchesInput
                       value="{{inchesAfterFeetFromInches($patient->current_height_in_inches)}}">
            </div>
            <span class="text-secondary mr-2">in.</span>
            <?= vsElement('current_height_in_inches', 'hidden', 'currentHeightInInches', $patient) ?>
        </div>

        <hr class="my-3">

        <div class="table-responsive">
          <table class="table-condensed table-bordered table-sm">
            <thead>
              <tr>
                <th class="border-bottom-0"></th>
                <th class="border-bottom-0">Weight</th>
                <th class="border-bottom-0">BMI</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Usual</td>
                <td>
                  <div class="width-70px"><?= vsElement('usual_weight_in_pounds_min', 'number', 'usualWeightInPoundsMin', $patient) ?></div>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <div class="width-70px"><?= vsRoElement('usual_bmi_min', 'number', 'usualBmiMin', $patient) ?></div>
                    <span class="text-secondary">
                      @if($patient->usual_bmi_min_category)
                        <input type="text" readonly=""
                        class="border-0 bg-transparent width-90px ml-1"
                        name="usualBmiMinCategory"
                        value="{{$patient->usual_bmi_min_category ?? ''}}">
                      @endif
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td>Target</td>
                <td>
                  <div class="width-70px"><?= vsElement('ideal_weight_in_pounds', 'number', 'idealWeightInPounds', $patient) ?></div>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                  <div class="width-70px"><?= vsRoElement('ideal_bmi', 'number', 'idealBmi', $patient) ?></div>
                  <span class="text-secondary">
                    @if($patient->ideal_bmi_category)
                      <input type="text" readonly=""
                             class="border-0 bg-transparent width-90px ml-1"
                             name="idealBmiCategory"
                             value="{{$patient->ideal_bmi_category ?: ''}}">
                    @endif
                  </span>
                </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <hr class="my-3">

        <div class="mb-2 d-flex align-items-center">
            <span class="text-secondary min-width-140px">Goal:</span>
            <div class="width-150px">
                <select type="text" class="form-control form-control-sm min-width-unset" name="weightManagementGoalCategory">
                    <option value="">-- select --</option>
                    <option {{$patient->weight_management_goal_category === 'LOWER' ? 'selected' : ''}} value="LOWER">Lower</option>
                    <option {{$patient->weight_management_goal_category === 'INCREASE' ? 'selected' : ''}} value="INCREASE">Increase</option>
                    <option {{$patient->weight_management_goal_category === 'MAINTAIN' ? 'selected' : ''}} value="MAINTAIN">Maintain</option>
                </select>
            </div>
        </div>

        <div class="mb-3 d-flex align-items-center">
            <span class="text-secondary min-width-140px">Reports heart failure?</span>
            <div class="width-150px">
                <select type="text" class="form-control form-control-sm min-width-unset" name="hasHeartFailureDx">
                    <option value="">-- select --</option>
                    <option {{$patient->has_heart_failure_dx === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
                    <option {{$patient->has_heart_failure_dx === 'NO' ? 'selected' : ''}} value="NO">No</option>
                    <option {{$patient->has_heart_failure_dx === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
                </select>
            </div>
        </div>

        <hr class="my-3">

        <div class="mb-3 d-flex align-items-center">
            <span class="text-secondary min-width-140px mr-2"><b>Monitoring prescribed?</b> </span>
            <div class="width-150px">
                <select type="text" class="form-control form-control-sm min-width-unset" name="isWeightMonitoringNeeded">
                    <option value="">-- select --</option>
                    <option {{$patient->is_weight_monitoring_needed === 'YES' ? 'selected' : ''}} value="YES">Yes</option>
                    <option {{$patient->is_weight_monitoring_needed === 'NO' ? 'selected' : ''}} value="NO">No</option>
                    <option {{$patient->is_weight_monitoring_needed === 'UNKNOWN' ? 'selected' : ''}} value="UNKNOWN">Unknown</option>
                </select>
            </div>
        </div>

        {{--
        <hr class="my-3">
        <div class="text-secondary min-width-140px mb-1">ICDs</div>
        <table class="table table-sm table-striped table-bordered mb-3">
            <thead>
            <tr class="bg-light text-secondary">
                <th class="border-bottom-0 width-30px">#</th>
                <th class="border-bottom-0 w-25">Code</th>
                <th class="border-bottom-0">Description</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="p-0 align-middle text-center">1</td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd1', 'text', 'whyIsWeightMonitoringNeededIcd1', $patient) ?></td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description1', 'text', 'whyIsWeightMonitoringNeededDescription1', $patient) ?></td>
            </tr>
            <tr>
                <td class="p-0 align-middle text-center">2</td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd2', 'text', 'whyIsWeightMonitoringNeededIcd2', $patient) ?></td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description2', 'text', 'whyIsWeightMonitoringNeededDescription2', $patient) ?></td>
            </tr>
            <tr>
                <td class="p-0 align-middle text-center">3</td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd3', 'text', 'whyIsWeightMonitoringNeededIcd3', $patient) ?></td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description3', 'text', 'whyIsWeightMonitoringNeededDescription3', $patient) ?></td>
            </tr>
            <tr>
                <td class="p-0 align-middle text-center">4</td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_icd4', 'text', 'whyIsWeightMonitoringNeededIcd4', $patient) ?></td>
                <td class="p-0 align-middle text-center"><?= vsElement('why_is_weight_monitoring_needed_description4', 'text', 'whyIsWeightMonitoringNeededDescription4', $patient) ?></td>
            </tr>
            </tbody>
        </table>
        --}}

        <div class="text-secondary min-width-140px mb-1">Remarks on clinical need:</div>
        <input type="text" class="form-control form-control-sm min-width-unset" name="whyIsWeightMonitoringNeeded" value="{{$patient->why_is_weight_monitoring_needed}}">
      </fieldset>
    </form>
</div>

<script>
    (function() {

        function initICDAutoSuggest(_codeElem, _descElem) {
            if(_codeElem.is('[ac-initialized]')) return false;
            var elem = _codeElem[0], descElem = _descElem[0], dynID = 'icd-' + Math.ceil(Math.random() * 1000000);
            $(elem).attr('id', dynID);
            new window.Def.Autocompleter.Search(dynID,
                'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name', {
                    tableFormat: true,
                    valueCols: [0],
                    colHeaders: ['Code', 'Name'],
                }
            );
            window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
                let acData = elem.autocomp.getSelectedItemData();
                if(!acData[0] || !acData[0].data) return false;
                $(elem).val(acData[0].code);
                $(descElem).val(acData[0].data.name);
                return false;
            });
            $(elem).attr('ac-initialized', 1);
        }

        function init() {
            // for (let i = 1; i <= 4; i++) {
            //     initICDAutoSuggest($('[name="whyIsWeightMonitoringNeededIcd' + i + '"]'), $('[name="whyIsWeightMonitoringNeededDescription' + i + '"]'));
            // }

            let parentSegment = $('#bmi-management-settings-summary');
            parentSegment.find('[heightFeetInput], [heightInchesInput]').off('change input paste');
            parentSegment.find('[heightFeetInput], [heightInchesInput]').on('change input paste', function () {
                let inches = 0;
                let ft = +(parentSegment.find('[heightFeetInput]').val()),
                    inc = +(parentSegment.find('[heightInchesInput]').val());
                inches = Math.round(ft * 12 + inc);
                parentSegment.find('[name="currentHeightInInches"]').val(inches).trigger('change');
            });
        }

        addMCInitializer('bmi-management-settings-summary', init, '#bmi-management-settings-summary');

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