@extends('V3.layouts.onBoarding')

@section('content')
    <div class="content_wrapper onboardingv3-radio">
        <div class="inner_title">
            <h3>What is your age?</h3>
            <span class="error_msg"></span>
        </div>
        <form id="frmBasic" name="frmBasic">
            <div class="_content_wrap">
                <div class="form_field">
                    <input class="radio" type="radio" name="vAge" id="age1" value="< 18 years"
                        @checked($vAge == '< 18 years')>
                    <label class="radio_btn onboardingv3-radio-btn" for="age1">
                        < 18 years old </label>
                </div>
                <div class="form_field">
                    <input class="radio" type="radio" name="vAge" id="age2" value="18-24"
                        @checked($vAge == '18-24')>
                    <label class="radio_btn onboardingv3-radio-btn" for="age2"> 18-24 </label>
                </div>
                <div class="form_field">
                    <input class="radio" type="radio" name="vAge" id="age3" value="25-34"
                        @checked($vAge == '25-34')>
                    <label class="radio_btn onboardingv3-radio-btn" for="age3"> 25-34 </label>
                </div>

                <div class="form_field">
                    <input class="radio" type="radio" name="vAge" id="age4" value="35-44"
                        @checked($vAge == '35-44')>
                    <label class="radio_btn onboardingv3-radio-btn" for="age4"> 35-44 </label>
                </div>

                <div class="form_field">
                    <input class="radio" type="radio" name="vAge" id="age5" value="45-59"
                        @checked($vAge == '45-59')>
                    <label class="radio_btn onboardingv3-radio-btn" for="age5"> 45-59 </label>
                </div>

                <div class="form_field">
                    <input class="radio" type="radio" name="vAge" id="age6" value="60-74"
                        @checked($vAge == '60-74')>
                    <label class="radio_btn onboardingv3-radio-btn" for="age6"> 60-74 </label>
                </div>

                <div class="form_field">
                    <input class="radio" type="radio" name="vAge" id="age7" value="> 75 years"
                        @checked($vAge == '> 75 years')>
                    <label class="radio_btn onboardingv3-radio-btn" for="age7"> > 75 years old </label>
                </div>
            </div>
            <div class="button_wrap">
                <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>Your age impacts how your brain handles nicotine. It also determines the extent to which
                        smoking/vaping can increase your risk of various health issues.
                    </p>
                </div>
                <div class="onboardingv3-modal-footer">
                    <button type="button" class="onboardingv3-modal-btn" id="modalGotIt">Got it</button>
                </div>
            </div>
        </div>
    </div>
@endsection