@extends('V3.layouts.onBoarding')

@section('content')
    <div class="content_wrapper onboardingv3-multiselect">
        <div class="inner_title">
            <h3>Why do you want to change your smoking/vaping habits?</h3>
            <p>(Select up to three)</p>
            <span class="error_msg"></span>
        </div>

        <form id="frmBasic" name="frmBasic">
            <div class="_content_wrap">
                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk1"
                        value="Improve my health" @checked(!empty($setQuittingReasons) && in_array('Improve my health', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk1">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Improve my health</span>
                    </label>
                </div>


                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk2" value="For my family"
                        @checked(!empty($setQuittingReasons) && in_array('For my family', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk2">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">For my family</span>
                    </label>
                </div>


                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk3" value="Save money"
                        @checked(!empty($setQuittingReasons) && in_array('Save money', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk3">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Save money</span>
                    </label>
                </div>


                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk4"
                        value="Enhance appearance" @checked(!empty($setQuittingReasons) && in_array('Enhance appearance', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk4">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Enhance appearance</span>
                    </label>
                </div>


                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk5"
                        value="More energy for daily life" @checked(!empty($setQuittingReasons) && in_array('More energy for daily life', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk5">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">More energy for daily life</span>
                    </label>
                </div>


                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk6" value="Mental peace"
                        @checked(!empty($setQuittingReasons) && in_array('Mental peace', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk6">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Mental peace</span>
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk7"
                        value="More time in the day" @checked(!empty($setQuittingReasons) && in_array('More time in the day', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk7">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">More time in the day</span>
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk8"
                        value="Feel better about myself" @checked(!empty($setQuittingReasons) && in_array('Feel better about myself', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk8">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Feel better about myself</span>
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingReasons[]" id="chk9" value="Other"
                        @checked(!empty($setQuittingReasons) && in_array('Other', $setQuittingReasons))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk9">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Other</span>
                    </label>
                </div>
            </div>

            <div class="form_field button_wrap">
                <button type="button" class="button onboardingv3-btn" name="btnSubmit" id="btnSubmit">Next</button>

                <a href="javascript:void(0);" class="onboardingv3-info-link" id="whyWeAskLink">
                    Why do we ask?
                </a>
            </div>
        </form>
    </div>
    <!-- Why We Ask Modal -->
    <div id="whyWeAskModal" class="onboardingv3-modal-overlay" style="display: none;">
        <div class="onboardingv3-modal-dialog">
            <div class="onboardingv3-modal-content">
                <div class="onboardingv3-modal-header">
                    <h3 class="onboardingv3-modal-title">Why we ask</h3>
                    {{-- <button type="button" class="onboardingv3-modal-close" id="modalClose">
                        <span>&times;</span>
                    </button> --}}
                </div>
                <div class="onboardingv3-modal-body">
                    <p>We will keep your underlying goals in mind while building your program.
                    </p>
                </div>
                <div class="onboardingv3-modal-footer">
                    <button type="button" class="onboardingv3-modal-btn" id="modalGotIt">Got it</button>
                </div>
            </div>
        </div>
    </div>
@endsection