@extends('V3.layouts.onBoarding')
@php
    $setSmokingDeceptionsArray = [
        'To relax',
        'To remove boredom',
        'To escape stress or worry',
        'When I’m angry',
        'To have fun / socialize',
        'To help concentrate',
        'When I am sad / upset',
        'To maintain / lose weight',
        'I feel addicted and can’t stop',
        'Other',
    ];
@endphp

@section('content')
    <div class="content_wrapper onboardingv3-multiselect">
        <div class="inner_title">
            <h3>What are your reasons to {{ $nicotineTypeLabel }}?</h3>
            <p>(Select all that apply)</p>
            <span class="error_msg"></span>
        </div>

        <form id="frmBasic" name="frmBasic">

            <div class="_content_wrap">
                @foreach ($setSmokingDeceptionsArray as $idx => $val)
                    <div class="form_field">
                        <input class="checkbox" type="checkbox" name="setSmokingDeceptions[]" id="chk{{ $idx }}"
                            value="{{ $val }}" @checked(!empty($setSmokingDeceptions) && in_array($val, $setSmokingDeceptions))>
                        <label class="checkbox_btn onboardingv3-checkbox" for="chk{{ $idx }}">
                            <span class="checkbox-icon">
                                <i class="fas fa-check"></i>
                            </span>
                            <span class="checkbox-text">{{ $val }}</span>
                        </label>
                    </div>
                @endforeach
            </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>Understanding your triggers is an essential part of changing your relationship with nicotine. We’ll
                        use this to help you build healthier coping mechanisms.</p>
                </div>
                <div class="onboardingv3-modal-footer">
                    <button type="button" class="onboardingv3-modal-btn" id="modalGotIt">Got it</button>
                </div>
            </div>
        </div>
    </div>
@endsection