<?php

use App\Models\Point;

$category = 'STOPBANG_QUESTIONNAIRE';
$endPoint = 'upsertNoteSingleton';

$point = Point::getOrCreateOnlyTopLevelPointOfCategory($note, 'STOPBANG_QUESTIONNAIRE', $sessionKey, true);
$contentData = [
    "snore_loudly" => null,
    "often_feel_tired_sleepy" => null,
    "observed_stop_breathing_during_sleep" => null,
    "treated_for_hbp" => null,

    "weight_in_pounds" => null,
    "height_in_inches" => null,
    "calculated__bmi" => null,
    "calculated__bmi_gt_35" => null,

    "age_gt_50" => null,
    "neck_size_gt_40cm" => null,
    "gender_is_male" => null,
];
if (!!@$point->data) {
    $contentData = $point->data;
}
?>
<div visit-moe close-on-save close-on-cancel class="d-block pb-2">
    <form show url="/api/visitPoint/<?= $endPoint ?>" class="mcp-theme-1 sbq-container">
        <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
        <input type="hidden" name="category" value="<?= $category ?>">
        <input type="hidden" name="data" value="{{json_encode($contentData)}}">

        <table class="table table-sm table-bordered mb-2">
            <tbody>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div class="mb-1">Do you snore loudly?</div>
                    <div class="text-sm text-secondary">Louder than talking or loud enough to be heard through closed doors</div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_snore_loudly" data-name="snore_loudly" value="Yes" class="my-0 mr-1" {{@$contentData['snore_loudly'] && $contentData['snore_loudly'] === 'Yes' ? 'checked' : ''}}>
                            <span>Yes</span>
                        </label>
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_snore_loudly" data-name="snore_loudly" value="No" class="my-0 mr-1" {{@$contentData['snore_loudly'] && $contentData['snore_loudly'] === 'No' ? 'checked' : ''}}>
                            <span>No</span>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div>Do you often feel tired, fatigued, or sleepy during the daytime?</div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_often_feel_tired_sleepy" data-name="often_feel_tired_sleepy" value="Yes" class="my-0 mr-1" {{@$contentData['often_feel_tired_sleepy'] && $contentData['often_feel_tired_sleepy'] === 'Yes' ? 'checked' : ''}}>
                            <span>Yes</span>
                        </label>
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_often_feel_tired_sleepy" data-name="often_feel_tired_sleepy" value="No" class="my-0 mr-1" {{@$contentData['often_feel_tired_sleepy'] && $contentData['often_feel_tired_sleepy'] === 'No' ? 'checked' : ''}}>
                            <span>No</span>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div>Has anyone observed you stop breathing during sleep?</div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_observed_stop_breathing_during_sleep" data-name="observed_stop_breathing_during_sleep" value="Yes" class="my-0 mr-1" {{@$contentData['observed_stop_breathing_during_sleep'] && $contentData['observed_stop_breathing_during_sleep'] === 'Yes' ? 'checked' : ''}}>
                            <span>Yes</span>
                        </label>
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_observed_stop_breathing_during_sleep" data-name="observed_stop_breathing_during_sleep" value="No" class="my-0 mr-1" {{@$contentData['observed_stop_breathing_during_sleep'] && $contentData['observed_stop_breathing_during_sleep'] === 'No' ? 'checked' : ''}}>
                            <span>No</span>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div>Do you have (or are you being treated for) high blood pressure?</div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_treated_for_hbp" data-name="treated_for_hbp" value="Yes" class="my-0 mr-1" {{@$contentData['treated_for_hbp'] && $contentData['treated_for_hbp'] === 'Yes' ? 'checked' : ''}}>
                            <span>Yes</span>
                        </label>
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_treated_for_hbp" data-name="treated_for_hbp" value="No" class="my-0 mr-1" {{@$contentData['treated_for_hbp'] && $contentData['treated_for_hbp'] === 'No' ? 'checked' : ''}}>
                            <span>No</span>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div>Is your BMI &gt;= 35?</div>
                </td>
                <td>
                    <div class="d-flex align-items-baseline">
                        <label class="d-flex align-items-center my-0 mr-2">Height (in.)</label>
                        <input type="text" class="form-control form-control-sm width-100px mr-3" data-name="height_in_inches"
                               onkeyup="updateSbqBMI()"
                               oninput="updateSbqBMI()"
                               onpaste="updateSbqBMI()"
                               value="{{@$contentData['height_in_inches'] ?: ''}}">
                        <label class="d-flex align-items-center my-0 mr-2">Weight (lbs.)</label>
                        <input type="text" class="form-control form-control-sm width-100px mr-3" data-name="weight_in_pounds"
                               onkeyup="updateSbqBMI()"
                               oninput="updateSbqBMI()"
                               onpaste="updateSbqBMI()"
                               value="{{@$contentData['weight_in_pounds'] ?: ''}}">
                        <span class="mr-2">BMI:</span>
                        <span class="font-weight-bold text-secondary sbq_bmi_badge"></span>
                    </div>
                    <input type="hidden" data-name="calculated__bmi" value="{{@$contentData['calculated__bmi'] ?: ''}}">
                    <input type="hidden" data-name="calculated__bmi_gt_35" value="{{@$contentData['calculated__bmi_gt_35'] ?: ''}}">
                </td>
            </tr>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div>Is your age &gt;= 50?</div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_age_gt_50" data-name="age_gt_50" value="Yes" class="my-0 mr-1" {{@$contentData['age_gt_50'] && $contentData['age_gt_50'] === 'Yes' ? 'checked' : ''}}>
                            <span>Yes</span>
                        </label>
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_age_gt_50" data-name="age_gt_50" value="No" class="my-0 mr-1" {{@$contentData['age_gt_50'] && $contentData['age_gt_50'] === 'No' ? 'checked' : ''}}>
                            <span>No</span>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div>Is your neck circumference &gt;= 40cm/16in?</div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_neck_size_gt_40cm" data-name="neck_size_gt_40cm" value="Yes" class="my-0 mr-1" {{@$contentData['neck_size_gt_40cm'] && $contentData['neck_size_gt_40cm'] === 'Yes' ? 'checked' : ''}}>
                            <span>Yes</span>
                        </label>
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_neck_size_gt_40cm" data-name="neck_size_gt_40cm" value="No" class="my-0 mr-1" {{@$contentData['neck_size_gt_40cm'] && $contentData['neck_size_gt_40cm'] === 'No' ? 'checked' : ''}}>
                            <span>No</span>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="pl-1 align-middle bg-light width-250px">
                    <div>Is your gender male?</div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_gender_is_male" data-name="gender_is_male" value="Yes" class="my-0 mr-1" {{@$contentData['gender_is_male'] && $contentData['gender_is_male'] === 'Yes' ? 'checked' : ''}}>
                            <span>Yes</span>
                        </label>
                        <label class="d-flex align-items-center mr-3">
                            <input type="radio" name="ui_gender_is_male" data-name="gender_is_male" value="No" class="my-0 mr-1" {{@$contentData['gender_is_male'] && $contentData['gender_is_male'] === 'No' ? 'checked' : ''}}>
                            <span>No</span>
                        </label>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

        <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>
<script>
    function updateSbqBMI() {
        let container = $('.sbq-container').first(),
            h = container.find('[data-name="height_in_inches"]').val(),
            w = container.find('[data-name="weight_in_pounds"]').val(),
            bmi = null,
            bmiElem = container.find()
        try {
            h = +h;
            w = +w;
            bmi = (w / (h * h)) * 703;
            $('.sbq_bmi_badge').text(bmi.toFixed(1));
            $('[data-name="calculated__bmi"]').val(bmi.toFixed(1));
            $('[data-name="calculated__bmi_gt_35"]').val(bmi > 35 ? 'Yes' : 'No').trigger('change');
        } catch (e) {
            return false;
        }
    }
    window.segmentInitializers.stopbang_questionnaire = function() {
        updateSbqBMI();
    };
</script>

