<?php
use App\Models\Client;
use App\Models\Note;
use App\Models\Point;
/** @var Client $patient */
/** @var Note $note */
/** @var Point $point */

// replace content data
$contentData = [
    "nicotine_i_use_any_of_listed_items_above" => '',
    "nicotine_do_you_want_to_quit_nicotine" => '',
    "nicotine_how_soon_in_mins" => '',
    "nicotine_how_many_cigarettes_per_day" => '',
    "nicotine_age_started_smoking" => '',
    "nicotine_longest_time_stayed_quit" => '',
    "nicotine_why_started_smoking_again" => '',
    "smokes_around_me" => [],
    "nicotine_other_smoke_around_me_description" => '',
    "nicotine_times_seriously_tried_to_quit" => '',
    "nicotine_recent_quit_duration" => '',
    "nicotine_who_is_supporting_you_to_quit" => '',
    "nicotine_most_important_reason_to_quit" => '',
    "nicotine_ever_used_medication_to_quit" => '',
    "nicotine_medication_used" => [],
    "nicotine_medication_used_other_description" => '',
    "nicotine_medication_did_they_help" => '',
    "nicotine_medication_list_helpful_ones" => '',
    "nicotine_used_any_other_methods_to_quit" => '',
    "nicotine_other_methods_used" => [],
    "nicotine_other_methods_other_description" => '',
    "alcohol_do_you_drink_alcohol" => '',
    "alcohol_prefered_type_of_alcohol" => '',
    "alcohol_how_many_servings_per_day" => '',
    "alcohol_felt_like_cutting_down" => '',
    "alcohol_have_people_criticized_you" => '',
    "alcohol_felt_guilty" => '',
    "alcohol_drank_in_morning_to_get_rid_of_hangover" => '',
    "alcohol_do_you_binge_drink" => '',
    "recreational_have_you_ever_used_any" => '',
    "recreational_level_of_concern" => '',
    "recreational_how_much_used" => '',
    "marijuana_have_you_ever_used_marijuana" => '',
    "marijuana_level_of_concern" => '',
    "marijuana_how_much_used" => '',
    "mental_health_ever_received_treatment" => '',
    "drug_or_alcohol_have_you_ever_received_treatment" => ''
];

$point = Point::getGlobalSingletonOfCategory($patient, 'LIFESTYLE_SUBSTANCE_USE', true);

if ($point && @$point->data) {
    $contentData = $point->data;
}
?>
<div class="p-3 mcp-theme-1">
    <div visit-moe close-on-save close-on-cancel class="d-block">
        <form show url="/api/visitPoint/upsertGlobalSingleton" class="mcp-theme-1">
            <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
            <input type="hidden" name="category" value="LIFESTYLE_SUBSTANCE_USE">
            <input type="hidden" name="data">

            <div id="edit-univ_sub_substance_use_assessment-container">

                <div class="row">
                    <div class="col-md-12">
                        <h5 class="bg-light p-1 font-weight-bold">SMOKING AND SUBSTANCE HISTORY</h5>
                        <p><b>NICOTINE/TOBACCO</b> (i.e. cigarettes, e-cigarettes, e-cigarettes/vaping, cigars, chew, snuff)</p>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">a.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Do you use any of the nicotine products listed above?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.nicotine_i_use_any_of_listed_items_above">
                                            <option value="No">No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="data.nicotine_i_use_any_of_listed_items_above == 'Yes'" class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">&nbsp;</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        If yes, do you want to quit using the nicotine/tobacco products?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.nicotine_do_you_want_to_quit_nicotine">
                                            <option value="No">No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="data.nicotine_do_you_want_to_quit_nicotine == 'Yes'" class="col-md-12">
                        <p class="pl-2 font-weight-bold">If yes, answer the questions below:</p>
                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">b.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-12">
                                            <label>How soon after you wake up do you use nicotine/tobacco? </label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_soon_in_mins"
                                                           id="nicotine_how_soon_60_min" value="after_60_mins" v-model="data.nicotine_how_soon_in_mins">
                                                    <label class="form-check-label" for="nicotine_how_soon_60_min">After 60 minutes</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_soon_in_mins"
                                                           id="nicotine_how_soon_31_60_min" value="31_60_mins" v-model="data.nicotine_how_soon_in_mins">
                                                    <label class="form-check-label" for="nicotine_how_soon_31_60_min">31-60 minutes</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_soon_in_mins"
                                                           id="nicotine_how_soon_6_30_min" value="6_30_mins" v-model="data.nicotine_how_soon_in_mins">
                                                    <label class="form-check-label" for="nicotine_how_soon_6_30_min">6-30 minutes</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_soon_in_mins"
                                                           id="nicotine_how_soon_within_5_min" value="within_5_mins"
                                                           v-model="data.nicotine_how_soon_in_mins">
                                                    <label class="form-check-label" for="nicotine_how_soon_within_5_min">Within 5 minutes</label>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">c.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-12">
                                            <label>How many cigarettes do you smoke per day?</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_many_cigarettes_per_day"
                                                           id="nicotine_how_many_10_or_less" value="after_60_mins"
                                                           v-model="data.nicotine_how_many_cigarettes_per_day">
                                                    <label class="form-check-label" for="nicotine_how_many_10_or_less">10 or less</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_many_cigarettes_per_day"
                                                           id="nicotine_how_many_11_20" value="31_60_mins"
                                                           v-model="data.nicotine_how_many_cigarettes_per_day">
                                                    <label class="form-check-label" for="nicotine_how_many_11_20">11-20</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_many_cigarettes_per_day"
                                                           id="nicotine_how_many_21_30" value="6_30_mins"
                                                           v-model="data.nicotine_how_many_cigarettes_per_day">
                                                    <label class="form-check-label" for="nicotine_how_many_21_30">21-30</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="nicotine_how_many_cigarettes_per_day"
                                                           id="nicotine_how_many_31_plus" value="within_5_mins"
                                                           v-model="data.nicotine_how_many_cigarettes_per_day">
                                                    <label class="form-check-label" for="nicotine_how_many_31_plus">31+</label>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr />

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">d.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            What age did you start smoking?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control" name="nicotine_age_started_smoking"
                                                   v-model="data.nicotine_age_started_smoking" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">e.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            What is the longest time period you have stayed quit?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control" name="nicotine_longest_time_stayed_quit"
                                                   v-model="data.nicotine_longest_time_stayed_quit" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">f.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            What made you start smoking again?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control" name="nicotine_why_started_smoking_again"
                                                   v-model="data.nicotine_why_started_smoking_again" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">f.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                Which of the following people smoke around you? <small class="text-muted">Check all that
                                                    apply</small>
                                            </div>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_friends_smoke_around_me"
                                                           name="smokes_around_me" value="Friends"
                                                           v-model="data.smokes_around_me">
                                                    <label class="form-check-label" for="nicotine_friends_smoke_around_me">Friends</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_family_smoke_around_me"
                                                           name="smokes_around_me" value="Family" v-model="data.smokes_around_me">
                                                    <label class="form-check-label" for="nicotine_family_smoke_around_me">Family</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_partner_smoke_around_me"
                                                           name="smokes_around_me" value="Partner"
                                                           v-model="data.smokes_around_me">
                                                    <label class="form-check-label" for="nicotine_partner_smoke_around_me">Partner</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_co_workers_smoke_around_me"
                                                           name="smokes_around_me" value="Co-Workers"
                                                           v-model="data.smokes_around_me">
                                                    <label class="form-check-label" for="nicotine_co_workers_smoke_around_me">Co-Workers</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_smoke_around_me"
                                                           name="smokes_around_me" value="Other" v-model="data.smokes_around_me">
                                                    <label class="form-check-label" for="nicotine_other_smoke_around_me">Other</label>
                                                </div>
                                                <div v-if="data.smokes_around_me.indexOf('Other') !== -1" class="form-group mt-3">
                                                    <label>Other</label>
                                                    <input type="text" class="form-control" name="nicotine_other_smoke_around_me_description"
                                                           v-model="data.nicotine_other_smoke_around_me_description" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">h.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            How many times have you seriously tried to quit?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control" name="nicotine_times_seriously_tried_to_quit"
                                                   v-model="data.nicotine_times_seriously_tried_to_quit" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">i.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            For your most recent quit attempt, how long did it last?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control" name="nicotine_recent_quit_duration"
                                                   v-model="data.nicotine_recent_quit_duration" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">j.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Who is supporting you to quit smoking?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control" name="nicotine_who_is_supporting_you_to_quit"
                                                   v-model="data.nicotine_who_is_supporting_you_to_quit" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">k.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            What is your most important reason to quit smoking?
                                        </div>
                                        <div class="col-6">
                  <textarea type="text" class="form-control" name="nicotine_most_important_reason_to_quit"
                            v-model="data.nicotine_most_important_reason_to_quit"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">l.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Are you currently using or have used any medications to help you quit smoking?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control" name="nicotine_ever_used_medication_to_quit"
                                                    v-model="data.nicotine_ever_used_medication_to_quit">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">&nbsp;</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-12">
                                            If yes, check with of the following medications you have used:
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_medication_used_nicotine_patch"
                                                           name="nicotine_medication_used" value="Nicotine Patch"
                                                           v-model="data.nicotine_medication_used">
                                                    <label class="form-check-label" for="nicotine_medication_used_nicotine_patch">
                                                        Nicotine Patch
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_medication_used_nicotine_gum"
                                                           name="nicotine_medication_used" value="Nicotine Gum"
                                                           v-model="data.nicotine_medication_used">
                                                    <label class="form-check-label" for="nicotine_medication_used_nicotine_gum">
                                                        Nicotine Gum
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_medication_used_nicotine_lozenge"
                                                           name="nicotine_medication_used" value="Nicotine Lozenge"
                                                           v-model="data.nicotine_medication_used">
                                                    <label class="form-check-label" for="nicotine_medication_used_nicotine_lozenge">
                                                        Nicotine Lozenge
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_medication_used_wellbutrin"
                                                           name="nicotine_medication_used" value="Wellbutrin/Bupropion Pill"
                                                           v-model="data.nicotine_medication_used">
                                                    <label class="form-check-label" for="nicotine_medication_used_wellbutrin">
                                                        Wellbutrin/Bupropion Pill
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_medication_used_chantix"
                                                           name="nicotine_medication_used" value="Chantix/Varenicline Pill"
                                                           v-model="data.nicotine_medication_used">
                                                    <label class="form-check-label" for="nicotine_medication_used_chantix">
                                                        Chantix/ Varenicline Pill
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_medication_used_other"
                                                           name="nicotine_medication_used" value="Other" v-model="data.nicotine_medication_used">
                                                    <label class="form-check-label" for="nicotine_medication_used_other">
                                                        Other
                                                    </label>
                                                </div>
                                                <div class="form-group mt-3">
                                                    <label>Other:</label>
                                                    <input type="text" class="form-control" name="nicotine_medication_used_other_description"
                                                           v-model="data.nicotine_medication_used_other_description" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">m.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            If you used any of the medication listed above, did they help?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control" name="nicotine_medication_did_they_help"
                                                    v-model="data.nicotine_medication_did_they_help">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-if="data.nicotine_medication_did_they_help == 'Yes'">
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">l.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            If yes, list which ones helped:
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control" name="nicotine_medication_list_helpful_ones"
                                                   v-model="data.nicotine_medication_list_helpful_ones" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">n.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Have you used any methods in the past other than medications to try to quit?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control" name="nicotine_used_any_other_methods_to_quit"
                                                    v-model="data.nicotine_used_any_other_methods_to_quit">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-if="data.nicotine_used_any_other_methods_to_quit == 'Yes'">
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">l.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-12">
                                            If yes, check which of the following methods you have used:
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_self_help"
                                                           name="nicotine_other_methods_used" value="Self-help"
                                                           v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_self_help">Self-help</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_gradual_reduction"
                                                           name="nicotine_other_methods_used" value="Gradual reduction"
                                                           v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_gradual_reduction">Gradual reduction</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_cold_turkey"
                                                           name="nicotine_other_methods_used" value="Cold turkey"
                                                           v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_cold_turkey">Cold turkey</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_hypnosis"
                                                           name="nicotine_other_methods_used" value="Hypnosis" v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_hypnosis">Hypnosis</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_acupuncture"
                                                           name="nicotine_other_methods_used" value="Acupuncture"
                                                           v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_acupuncture">Acupuncture</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_special_filters"
                                                           name="nicotine_other_methods_used" value="Special filters"
                                                           v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_special_filters">Special filters</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_vapinge"
                                                           name="nicotine_other_methods_used" value="Vaping/e-cigarettes" v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_vapinge">Vaping/e-cigarettes</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="nicotine_other_methods_other"
                                                           name="nicotine_other_methods_used" value="Other" v-model="data.nicotine_other_methods_used">
                                                    <label class="form-check-label" for="nicotine_other_methods_other">Other</label>
                                                </div>

                                                <div v-if="data.nicotine_other_methods_used.indexOf('Other') !== -1" class="form-group mt-3">
                                                    <label>Other:</label>
                                                    <input type="text" class="form-control" name="nicotine_other_methods_other_description"
                                                           v-model="data.nicotine_other_methods_other_description">
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>

                    <div class="col-md-12">
                        <h6 class="font-weight-bold">ALCOHOL</h6>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="pr-2 text-secondary font-weight-bold width-30px">a.</div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Do you drink alcohol?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm" v-model="data.alcohol_do_you_drink_alcohol">
                                            <option value="No">No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="data.alcohol_do_you_drink_alcohol == 'Yes'" class="col-md-12">
                        <p class="pl-2 font-weight-bold">If yes, please answer the questions below:</p>
                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">b.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            What type of alcohol do you prefer?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control form-control-sm"
                                                   v-model="data.alcohol_prefered_type_of_alcohol" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">c.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            On average, how many servings do you drink per day/week/month/year on average?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control form-control-sm"
                                                   v-model="data.alcohol_how_many_servings_per_day" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">d.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Have you ever felt you should <b>“Cut down”</b> on your drinking?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control form-control-sm"
                                                    v-model="data.alcohol_felt_like_cutting_down">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">e.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Have people <b>Annoyed</b> you by criticizing your drinking?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control form-control-sm"
                                                    v-model="data.alcohol_have_people_criticized_you">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">f.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Have you ever felt <b>Guilty</b> about your drinking?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control form-control-sm" v-model="data.alcohol_felt_guilty">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">g.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Have you ever had a drink in the morning to steady your nerves or to get rid of a hangover (<b>eye
                                                opener</b>)?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control form-control-sm"
                                                    v-model="data.alcohol_drank_in_morning_to_get_rid_of_hangover">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="pr-2 text-secondary font-weight-bold width-30px">h.</div>
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            Do you binge drink (more than 5 drinks for men or 4 drinks for women within 2 hours)?
                                        </div>
                                        <div class="col-6">
                                            <select class="form-control form-control-sm" v-model="data.alcohol_do_you_binge_drink">
                                                <option value="No">No</option>
                                                <option value="Yes">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                    <hr>

                    <div class="col-md-12">
                        <h6 class="font-weight-bold">Have you used any of the following substances in the past year?</h6>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Recreational drugs (cocaine, heroin, meth, etc.)
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.recreational_have_you_ever_used_any">
                                            <option value="No">No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="data.recreational_have_you_ever_used_any == 'Yes'" class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        If yes, what level of concern do you have regarding use of the substances
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.recreational_level_of_concern">
                                            <option value="0">0 - No concern</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5 - High concern</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            If yes, how much substance do you usually use?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control form-control-sm"
                                                   v-model="data.recreational_how_much_used" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        <b>Marijuana</b>
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.marijuana_have_you_ever_used_marijuana">
                                            <option value="No">No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="data.marijuana_have_you_ever_used_marijuana == 'Yes'" class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        If yes, what level of concern do you have regarding use of the substances
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.marijuana_level_of_concern">
                                            <option value="0">0 - No concern</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5 - High concern</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="d-flex align-items-baseline mb-3">
                                <div class="flex-grow-1">
                                    <div class="row">
                                        <div class="col-6">
                                            If yes, how much substance do you usually use?
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control form-control-sm"
                                                   v-model="data.marijuana_how_much_used" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <hr>

                <div class="row">
                    <div class="col-md-12">
                        <h5 class="bg-light p-1 font-weight-bold">TREATMENT HISTORY</h5>
                    </div>
                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Have you ever received treatment for a mental health problem?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.mental_health_ever_received_treatment">
                                            <option value="No">No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="d-flex align-items-baseline mb-3">
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col-6">
                                        Have you ever received treatment for drug or alcohol use?
                                    </div>
                                    <div class="col-6">
                                        <select class="form-control form-control-sm"
                                                v-model="data.drug_or_alcohol_have_you_ever_received_treatment">
                                            <option value="No">No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-3 pt-3 border-top text-center">
                    <button type="button" v-on:click.prevent="saveForm()" class="btn btn-sm btn-primary mr-2">Submit</button>
                    <button type="button" onclick="closeStagPopup()" class="btn btn-sm btn-default border">Cancel</button>
                </div>

            </div>

            <div class="d-none">
                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
                <button cancel class="btn btn-sm btn-default border">Cancel</button>
            </div>
        </form>
    </div>
</div>
<script>
    (function() {
        window.segmentInitializers.<?= $segment->segmentTemplate->internal_name ?> = function() {
            // any JS can come here
            // will be run on page-load as well as whenever this segment is refreshed
            new Vue({
                el: '#edit-univ_sub_substance_use_assessment-container',
                delimiters: ["@{{","}}"],
                data: {
                    data: <?= json_encode($contentData) ?>
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            let parent = $('#edit-univ_sub_substance_use_assessment-container').closest('form');
                            parent.find('[name="data"]').val(JSON.stringify(this.data));

                            // autosave on change
                            autoSaveSegment(parent.find('[submit]').first());
                        },
                        deep: true
                    }
                },
                methods: {
                    saveForm: function() {
                        let parent = $('#edit-univ_sub_substance_use_assessment-container').closest('form');
                        parent.find('[name="data"]').val(JSON.stringify(this.data));
                        autoSaveSegmentAndClose(parent.find('[submit]').first());
                    }
                }
            });
        };
    })();
</script>