<?php

use App\Models\Point;

$category = 'PHYSICAL_EXAM';

if (!@$sessionKey) {
  $sessionKey = request()->cookie('sessionKey');
}

$point = Point::getOrCreateOnlyTopLevelPointOfCategory($note, $category, $sessionKey, true);

$contentData = [
  "PE_Eyes_Normal" => "Extraocular muscles are intact, pupils are equally round and reactive to light and accommodation.",
  "PE_Ears_Normal" => "Tympanic membranes and canals are clear.",
  "PE_Nose_Normal" => "Mucous membranes within normal limits. No discharge, nasal turbinates within normal limits and septum is midline.",
  "PE_Mouth_Throat_Normal" => "Posterior pharynx is clear. Teeth are without dental caries. Tongue and mucosa are moist, soft, and pink. No lesions or inflammations noted on hard or soft palate, buccal areas, or gingiva.",
  "PE_Neck_Normal" => "Neck is supple. No palpable masses or thyromegaly.",
  "PE_Lymph_Normal" => "No adenopathy with bilateral palpation of lymph nodes in the cervical, supraclavicular, axilla, or inguinal regions.",
  "PE_Resp_Normal" => "Clear to auscultation, no wheezes, rales, or rhonchi.",
  "PE_Cardio_Normal" => "Regular rate and rhythm, no murmurs, ectopy, or rubs. No jugular venous distention.",
  "PE_Skin_Normal" => "Tone, turgor, texture, and temperature&#160;within normal limits. Hair growth within normal limits.",
  "PE_Extremities_Normal" => "Inspection and palpation of digits and nails reveal no clubbing, cyanosis, or edema. Muscle strength 5 / 5.",
  "PE_Neuro_Normal" => "Cranial nerves I - XII are grossly intact. Bilateral reflexes are 2+ throughout. Intact sensations of fine touch, pain, and temperature.",
  "PE_Psych_Normal" => "Oriented to time, place, and person. Appropriate mood and affect."
];

if ($point->lastChildReview && $point->lastChildReview->data) {
  $point->lastChildReview->data = json_decode($point->lastChildReview->data, true);
  $contentData = $point->lastChildReview->data;
}

$containerID = 'edit-omega-pe-' . time();

?>
<hr class="hide-outside-popup mt-3 mb-0">
<div class="p-3 mcp-theme-1">
  <div {{!!$segment ? 'visit-moe' : 'moe'}} close-on-save close-on-cancel class="d-block">
    <form show url="/api/visitPoint/upsertChildReview" class="mcp-theme-1" {{ !$segment ? 'hook=onHxPopupClosure' : '' }}>
      @if(!!@$segment)
      <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
      @else
      <input type="hidden" name="segmentUid" value="<?= $note->coreSegment->uid ?>">
      @endif
      <input type="hidden" name="uid" value="<?= $point->uid ?>">
      <input type="hidden" name="noteUid" value="<?= $note->uid ?>">
      <input type="hidden" name="data">

      <div id="{{ $containerID }}">
        <div class="form-group">
            <label class="m-0">General:</label>
            <div class="d-flex align-items-end">
                <select data-name="PE_general" name="PE_general" multiple="multiple" class="select2PE" v-model="data.PE_general">
                  <option value=""></option>
                  <option>Patient well nourished and well groomed</option>
                  <option>No deformities or obvious deficiencies</option>
                  <option>acutely ill</option>
                  <option>cachectic</option>
                  <option>chronically ill</option>
                  <option>frail and elderly</option>
                  <option>healthy and in no apparent distress</option>
                  <option>lethargic</option>
                  <option>overweight</option>
                  <option>overweight and in no apparent distress</option>
                  <option>restless</option>
                  <option>malnourished</option>
                </select>
            </div>
        </div>
        <div class="form-group d-flex align-items-start">
          <label class="mb-0 mr-3">
            <b>Depression</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_General_Depression" value="Admits" v-model="data.PE_General_Depression" />
                <span>Admits</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_General_Depression" value="Denies" v-model="data.PE_General_Depression" />
                <span>Denies</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_General_Depression" value="" v-model="data.PE_General_Depression" />
                <span>--</span>
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Eyes</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Eyes" value="Normal" v-model="data.PE_Eyes" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Eyes" value="Abnormal" v-model="data.PE_Eyes" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Eyes" value="" v-model="data.PE_Eyes" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Eyes == 'Normal'" data-name="PE_Eyes_Normal" v-model="data.PE_Eyes_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Eyes == 'Abnormal'" data-name="PE_Eyes_Abnormal" v-model="data.PE_Eyes_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Ears</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Ears" value="Normal" v-model="data.PE_Ears" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Ears" value="Abnormal" v-model="data.PE_Ears" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Ears" value="" v-model="data.PE_Ears" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Ears == 'Normal'" data-name="PE_Ears_Normal" v-model="data.PE_Ears_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Ears == 'Abnormal'" data-name="PE_Ears_Abnormal" v-model="data.PE_Ears_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Nose</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Nose" value="Normal" v-model="data.PE_Nose" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Nose" value="Abnormal" v-model="data.PE_Nose" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Nose" value="" v-model="data.PE_Nose" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Nose == 'Normal'" data-name="PE_Nose_Normal" v-model="data.PE_Nose_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Nose == 'Abnormal'" data-name="PE_Nose_Abnormal" v-model="data.PE_Nose_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Mouth / Throat</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Mouth_Throat" value="Normal" v-model="data.PE_Mouth_Throat" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Mouth_Throat" value="Abnormal" v-model="data.PE_Mouth_Throat" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Mouth_Throat" value="" v-model="data.PE_Mouth_Throat" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Mouth_Throat == 'Normal'" data-name="PE_Mouth_Throat_Normal" v-model="data.PE_Mouth_Throat_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Mouth_Throat == 'Abnormal'" data-name="PE_Mouth_Throat_Abnormal" v-model="data.PE_Mouth_Throat_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Neck</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Neck" value="Normal" v-model="data.PE_Neck" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Neck" value="Abnormal" v-model="data.PE_Neck" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Neck" value="" v-model="data.PE_Neck" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Neck == 'Normal'" data-name="PE_Neck_Normal" v-model="data.PE_Neck_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Neck == 'Abnormal'" data-name="PE_Neck_Abnormal" v-model="data.PE_Neck_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Lymphatic</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Lymph" value="Normal" v-model="data.PE_Lymph" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Lymph" value="Abnormal" v-model="data.PE_Lymph" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Lymph" value="" v-model="data.PE_Lymph" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Lymph == 'Normal'" data-name="PE_Lymph_Normal" v-model="data.PE_Lymph_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Lymph == 'Abnormal'" data-name="PE_Lymph_Abnormal" v-model="data.PE_Lymph_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Respiratory</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Resp" value="Normal" v-model="data.PE_Resp" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Resp" value="Abnormal" v-model="data.PE_Resp" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Resp" value="" v-model="data.PE_Resp" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Resp == 'Normal'" data-name="PE_Resp_Normal" v-model="data.PE_Resp_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Resp == 'Abnormal'" data-name="PE_Resp_Abnormal" v-model="data.PE_Resp_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Cardiovascular</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Cardio" value="Normal" v-model="data.PE_Cardio" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Cardio" value="Abnormal" v-model="data.PE_Cardio" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Cardio" value="" v-model="data.PE_Cardio" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Cardio == 'Normal'" data-name="PE_Cardio_Normal" v-model="data.PE_Cardio_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Cardio == 'Abnormal'" data-name="PE_Cardio_Abnormal" v-model="data.PE_Cardio_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Skin</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Skin" value="Normal" v-model="data.PE_Skin" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Skin" value="Abnormal" v-model="data.PE_Skin" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Skin" value="" v-model="data.PE_Skin" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Skin == 'Normal'" data-name="PE_Skin_Normal" v-model="data.PE_Skin_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Skin == 'Abnormal'" data-name="PE_Skin_Abnormal" v-model="data.PE_Skin_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Extremities</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Extremities" value="Normal" v-model="data.PE_Extremities" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Extremities" value="Abnormal" v-model="data.PE_Extremities" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Extremities" value="" v-model="data.PE_Extremities" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Extremities == 'Normal'" data-name="PE_Extremities_Normal" v-model="data.PE_Extremities_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Extremities == 'Abnormal'" data-name="PE_Extremities_Abnormal" v-model="data.PE_Extremities_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Neurological</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Neuro" value="Normal" v-model="data.PE_Neuro" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Neuro" value="Abnormal" v-model="data.PE_Neuro" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Neuro" value="" v-model="data.PE_Neuro" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Neuro == 'Normal'" data-name="PE_Neuro_Normal" v-model="data.PE_Neuro_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Neuro == 'Abnormal'" data-name="PE_Neuro_Abnormal" v-model="data.PE_Neuro_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="form-group">
          <label class="mb-0">
            <b>Psychiatric</b>
          </label>
          <div class="bg-light p-1">
            <div>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Psych" value="Normal" v-model="data.PE_Psych" />
                <span>Normal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Psych" value="Abnormal" v-model="data.PE_Psych" />
                <span>Abnormal</span>
              </label>
              <label class="mb-0 mr-3">
                <input @change.prevent="onInputChange" type="radio" data-name="PE_Psych" value="" v-model="data.PE_Psych" />
                <span>--</span>
              </label>
            </div>
            <input @change.prevent="onInputChange" v-if="data.PE_Psych == 'Normal'" data-name="PE_Psych_Normal" v-model="data.PE_Psych_Normal" class="form-control form-control-sm" />
            <input @change.prevent="onInputChange" v-if="data.PE_Psych == 'Abnormal'" data-name="PE_Psych_Abnormal" v-model="data.PE_Psych_Abnormal" class="form-control form-control-sm" />
          </div>
        </div>
      </div>


      <div class="pt-2">
        <button submit class="btn btn-sm btn-primary mr-2"><i class="fa fa-save"></i></button>
        <div class="d-inline-flex align-self-stretch align-items-center">
          <span class="autosave-indicator saving text-sm text-secondary">Saving changes &hellip;</span>
          <span class="autosave-indicator saved text-sm text-secondary">
            <i class="fa fa-check"></i>
            Saved
          </span>
        </div>
      </div>
    </form>
  </div>
</div>

<script>
  var containerID = "{{ $containerID }}";
  (function() {
    function initPE() {
      let model = <?= $contentData ? json_encode($contentData) : '{}' ?>;
      let form = $('#' + containerID).closest('form');
      new Vue({
        el: '#' + containerID,
        delimiters: ["@{{", "}}"],
        data: {
          data: model,
          defaultDropdownOptions: {}
        },
        watch: {
          $data: {
            handler: function(val, oldVal) {
              this.autoSaveForm();
            },
            deep: true
          }
        },
        mounted: function() {
          this.initSelect2();
          $('#' + containerID + ' [moe][initialized]').removeAttr('initialized');
          initMoes();
        },
        methods: {
          initSelect2: function() {
            var self = this;
						var arr = $('.select2PE');
						for (var i = 0; i < arr.length; i++) {
							var loadedData = self.data[arr[i].name] || [];

							$(arr[i]).select2({
								data: loadedData,
								tags: true,
								allowClear: true,
								placeholder: 'Press "Enter" to create a new entry',
							}).on('change', function(e) {
								var name = $(e.target)[0].name;
								var value = $(e.target).val();
								self.data[name] = value;
                self.autoSaveForm();
							}).val(loadedData);

						};
          },
          onInputChange: function(evt) {
            var self = this;
            var input = evt.target;
            var name = input.name || $(input).data('name');
            value = input.value;
            if ($(input).is(':radio')) {
              if (!input.checked) {
                value = null;
              }
            }
            self.data[name] = value;
            self.autoSaveForm();
          },
          autoSaveForm: function() {

            var self = this;
            var url = form.attr('url');
            form.find('input[name=data]').val(JSON.stringify(self.data));
            // autosave on change
            var dataArray = form.serializeArray();
            $.post(url, dataArray, function(response) {}, 'json');
            refreshSegment('omega_pe');
          },
          _autoSaveForm: function() {
            let parent = form;
            parent.find('[name="data"]').val(JSON.stringify(this.data));

            // autosave on change
            autoSaveSegment(parent.find('[submit]').first());
          },
          saveForm: function() {
            this.autoSaveForm();
            closeStagPopup();
            refreshSegment('omega_pe');
          },
        },
      });
      // if in popup (omega template), add provision to toggle relevance
      @include('app.patient.segment-templates._common_actions.toggle-relevance', ['container' => '#'.$containerID, 'segmentName' => 'omega_pe'])
    }
    window.segmentInitializers.omega_pe = initPE;
    addMCInitializer('init-pe-{{$note->id}}', initPE, '#' + containerID);

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