<div class="row mb-1">
    <div class="col-md-12 section bg-light pt-2 mb-3">
        <div class="mb-4 d-flex align-items-start">
            <label class="mb-0 mr-5">
                <input @change="onInputChange" type="checkbox" name="functional_status" :checked='data.functional_status == "YES"' />
                <b>Functional Status Assessed</b>
            </label>
            <div>
                <div>
                    <label class="mb-0 mr-3">
                        <input @change="onInputChange" type="radio" name="functional_impairments" value="NO" v-model="data.functional_impairments" />
                        <span>No Impairments</span>
                    </label>
                    <label class="mb-0 mr-3">
                        <input @change="onInputChange" type="radio" name="functional_impairments" value="YES" v-model="data.functional_impairments" />
                        <span>Functional Impairments Present</span>
                    </label>
                    <label class="mb-0 mr-3">
                        <input @change="onInputChange" type="radio" name="functional_impairments" value="" v-model="data.functional_impairments" />
                        <span>--</span>
                    </label>
                </div>
                <b v-if="data.functional_impairments == 'YES'" class="mt-1">Insert Impairments Subnote to Document Details</b>
            </div>
        </div>
        <div class="mb-4 d-flex align-items-start">
            <label class="mb-0 mr-5">
                <input @change="onInputChange" type="checkbox" name="cognitive_status" v-model="data.cognitive_status" />
                <b>Cognitive Status Assessed</b>
            </label>
            <div>
                <div>
                    <label class="mb-0 mr-3">
                        <input @change="onInputChange" type="radio" name="cognitive_impairments" value="NO" v-model="data.cognitive_impairments" />
                        <span>No Impairments</span>
                    </label>
                    <label class="mb-0 mr-3">
                        <input @change="onInputChange" type="radio" name="cognitive_impairments" value="YES" v-model="data.cognitive_impairments" />
                        <span>Functional Impairments Present</span>
                    </label>
                    <label class="mb-0 mr-3">
                        <input @change="onInputChange" type="radio" name="cognitive_impairments" value="" v-model="data.cognitive_impairments" />
                        <span>--</span>
                    </label>
                </div>
                <b v-if="data.cognitive_impairments == 'YES'" class="mt-1">Insert Impairments Subnote to Document Details</b>
            </div>
        </div>
        <div class="form-group textarea">
            <label class="m-0">History of Present Illness:</label>
            <div class="d-flex align-items-end">
                <select name="HPI_description" multiple="multiple" class="select2" v-model="data.HPI_description"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="m-0">Symptoms</label>
            <div class="d-flex align-items-end">
                <select name="HPI_symptoms" multiple="multiple" class="select2" v-model="data.HPI_symptoms">
                  <option value=""></option>
                  <option>change in bowels</option>
                  <option>chronic or persistent cough</option>
                  <option>clumsiness</option>
                  <option>edema of lower extremities</option>
                  <option>episodes of chest tightness</option>
                  <option>episodes of wheezing</option>
                  <option>excessive phlegm</option>
                  <option>excessively dry skin</option>
                  <option>High blood pressure</option>
                  <option>impotency</option>
                  <option>loss of muscle strength</option>
                  <option>loss of sensation</option>
                  <option>occasional sleep disturbance</option>
                  <option>persistent joint pain</option>
                  <option>problems breathing through nose</option>
                  <option>shortness of breath with exercise</option>
                  <option>urinary discomfort</option>
                  <option>weight gain</option>
                  <option>weight loss</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="m-0">Severity</label>
            <div class="d-flex align-items-end">
                <select name="HPI_severity" multiple="multiple" class="select2" v-model="data.HPI_severity">
                  <option value=""></option>
                  <option>Mild</option>
                  <option>Moderate</option>
                  <option>Severe</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="m-0">Duration</label>
            <div class="d-flex align-items-end">
                <select name="HPI_duration" multiple="multiple" class="select2" v-model="data.HPI_duration">
                  <option value=""></option>
                  <option>Less than 1 week</option>
                  <option>1 week</option>
                  <option>2 weeks</option>
                  <option>3 weeks</option>
                  <option>1 month</option>
                  <option>2 months</option>
                  <option>3 months</option>
                  <option>4 months</option>
                  <option>5 months</option>
                  <option>6 months</option>
                  <option>1 year</option>
                  <option>Unknown</option>
                  <option>2-3 years</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="m-0">Timing</label>
            <div class="d-flex align-items-end">
                <select name="HPI_timing" multiple="multiple" class="select2" v-model="data.HPI_timing">
                  <option value=""></option>
                  <option>constant</option>
                  <option>intermittent</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="m-0">Context</label>
            <div class="d-flex align-items-end">
                <select name="HPI_context" multiple="multiple" class="select2" v-model="data.HPI_context"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="m-0">Aggravating Factors:</label>
            <div class="d-flex align-items-end">
                <select name="HPI_aggravating_factors" multiple="multiple" class="select2" v-model="data.HPI_aggravating_factors">
                  <option value=""></option>
                  <option>exercise</option>
                  <option>exertion</option>
                  <option>rest</option>
                  <option>stress</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="m-0">Alleviating Factors:</label>
            <div class="d-flex align-items-end">
                <select name="HPI_alleviating_factors" multiple="multiple" class="select2" v-model="data.HPI_alleviating_factors">
                  <option value=""></option>
                  <option>cold</option>
                  <option>heat</option>
                  <option>rest</option>
                </select>
            </div>
        </div>
        <div class="form-group textarea">
            <label class="m-0">Sleep Summary:</label>
            <div class="d-flex align-items-end">
                <select data-name="sleep_exam_sleep_summary" name="sleep_exam_sleep_summary" multiple="multiple" class="select2" v-model="data.sleep_exam_sleep_summary">
                  <option value=""></option>
                  <option>awakens due to extremity jerks</option>
                  <option>awakens due to snoring</option>
                  <option>awakens with chest pain or palpitations</option>
                  <option>awakens with dry throat</option>
                  <option>delayed sleep due to pain</option>
                  <option>disturbed sleep</option>
                  <option>fatigued from lack of sleep</option>
                  <option>leg restlessness with aching or twitching</option>
                  <option>sleep walks</option>
                  <option>sleeps primarily on back</option>
                  <option>sleeps primarily on side</option>
                  <option>sleeps primarily on stomach</option>
                  <option>takes over 45 mintues to fall asleep</option>
                  <option>talks in sleep</option>
                  <option>wakes gasping</option>
                </select>
            </div>
        </div>
        <div class="form-group textarea">
            <label class="m-0">Previous Treatments:</label>
            <div class="d-flex align-items-end">
                <select data-name="PH_previous_treatment" name="PH_previous_treatment" multiple="multiple" class="select2" v-model="data.PH_previous_treatment">
                  <option value=""></option>
                  <option>BiPAP</option>
                  <option>CPAP</option>
                  <option>elevating head of bed</option>
                  <option>oxygen therapy</option>
                  <option>sleep aids</option>
                  <option>soft pallet injection</option>
                  <option>stimulants for daytime sleepiness</option>
                  <option>tonsils and adeniod surgery</option>
                  <option>Uvulopalatopharyngoplasty</option>
                  <option>weight loss</option>
                </select>
            </div>
        </div>
        <div class="form-group textarea">
            <label class="m-0">Current Treatments:</label>
            <div class="d-flex align-items-end">
                <select data-name="PH_current_treatment" name="PH_current_treatment" multiple="multiple" class="select2" v-model="data.PH_current_treatment">
                  <option value=""></option>
                  <option>BiPAP</option>
                  <option>CPAP</option>
                  <option>elevating head of bed</option>
                  <option>oxygen therapy</option>
                  <option>sleep aids</option>
                  <option>soft pallet injection</option>
                  <option>stimulants for daytime sleepiness</option>
                  <option>tonsils and adeniod surgery</option>
                  <option>Uvulopalatopharyngoplasty</option>
                  <option>weight loss</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <h6 class="my-3"><b><u>Epworth Sleepiness Scale</u></b></h6>
    </div>
    <div class="col-md-12 section bg-light pt-2 mb-3">
        <div class="mb-2">
            <label class="mb-1">How likely are you to doze off or fall asleep in the following situations, in contrast to feeling just tired? This refers to your usual way of life in recent times. Use the following scale (0, 1, 2, and 3) to choose
                the most appropriate number for each situation.</label>
            <div class="d-flex align-items-center">
                <select data-name="dozing" class="form-control form-control-sm select-esc-option" style="max-width:200px;" @change="onInputChange" v-model="data.dozing">
                    <option value=""></option>
                    <option value="Never Chance of Doze">Never Chance of Doze</option>
                    <option value="Slight Chance of Dozing">Slight Chance of Dozing</option>
                    <option value="Moderate Chance of Dozing">Moderate Chance of Dozing</option>
                    <option value="High Chance of Dozing">High Chance of Dozing</option>
                </select>
            </div>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">Sitting and reading</label>
            <select data-name="sitting" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.sitting">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">Watching TV</label>
            <select data-name="watching" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.watching">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">Sitting inactive in a public place (e.g. a theatre or a meeting)</label>
            <select data-name="sitting_inactive" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.sitting_inactive">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">As a passenger in a car for an hour without a break</label>
            <select data-name="passenger_car" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.passenger_car">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">Sitting quietly after a lunch without alcohol</label>
            <select data-name="sitting_quietly" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.sitting_quietly">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">Lying down to rest in the afternoon when circumstances permit</label>
            <select data-name="lying_down" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.lying_down">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">Sitting and talking to someone</label>
            <select data-name="sitting_and_talking" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.sitting_and_talking">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="d-flex align-items-center flex-wrap mb-2">
            <label class="mb-0 mr-2">In a car, while stopped for a few minutes in traffic</label>
            <select data-name="traffic" class="form-control form-control-sm select-esc-option calc-select" score-input v-model="data.traffic">
                <option value=""></option>
                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
            </select>
        </div>
        <div class="my-2">
            <div class="d-flex align-items-center">
                <span class="font-weight-bold">Score:</span>
                <div class="border p-2 mx-1" style="width:50px;">
                    <input type="hidden" data-name="Score" name="score" @change="onInputChange" v-model="data.score">
                    <span id="scoreValue">@{{ data.Score }}</span>
                </div>
                <div class="">
                    <span class="mr-1 text-primary c-pointer" @click="calculateScore">Calculate</span>
                    <span class="text-danger c-pointer" @click="clearScore">Clear</span>
                </div>
            </div>
        </div>
    </div>
</div>
