@extends('V3.layouts.onBoarding')

@section('content')
    <div class="content_wrapper onboardingv3-multiselect">
        <div class="inner_title">
            @if ($bAlreadyQuit == '1')
                <h3>How did you usually consume nicotine?</h3>
            @else
                <h3>How do you consume nicotine?</h3>
            @endif
            <p>(Select all that apply)</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="setNicotineTypes[]" id="chk1" value="Cigarettes"
                        @checked(!empty($setNicotineTypes) && in_array('Cigarettes', $setNicotineTypes))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk1">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Cigarettes</span>
                    </label>
                </div>


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


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


                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setNicotineTypes[]" id="chk4"
                        value="Smokeless (chewing, inhalers, snusing, etc.)" @checked(!empty($setNicotineTypes) && in_array('Smokeless (chewing, inhalers, snusing, etc.)', $setNicotineTypes))>
                    <label class="checkbox_btn onboardingv3-checkbox" for="chk4">
                        <span class="checkbox-icon">
                            <i class="fas fa-check"></i>
                        </span>
                        <span class="checkbox-text">Smokeless (chewing, inhalers, snusing, etc.)</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>Different forms of nicotine affect your physical and mental health differently. You’ll learn more
                        about this during 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