@extends('V3.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <div class="inner_title">
            <h3>What name would you like us to call you?</h3>
            <span class="error_msg"></span>
        </div>

        <form id="frmBasic" name="frmBasic">
            <div class="_content_wrap">
                <div class="form_field">
                    <input class="input" type="text" placeholder="Your name here" name="vName" id="vName"
                        value="{{ $vName ?? '' }}" maxlength="30">
                </div>
            </div>
            <div class="button_wrap">
                <button type="button" class="button onboardingv3-btn" name="btnSubmit" id="btnSubmit">Next</button>
            </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>Understanding your smoking habits and spending helps us personalize your quit smoking journey. This
                        information allows us to show you the potential savings and health benefits you'll gain by quitting.
                    </p>
                </div>
                <div class="onboardingv3-modal-footer">
                    <button type="button" class="onboardingv3-modal-btn" id="modalGotIt">Got it</button>
                </div>
            </div>
        </div>
    </div>
@endsection