@extends('V3.layouts.onBoarding')
@php
    $setSmokingTriggersArray = [
        'First thing in the morning',
        'After meals',
        'With coffee/tea',
        'During work breaks',
        'In the evenings, to unwind',
        'While socializing',
        'When drinking alcohol',
        'Other',
    ];
@endphp

@section('content')
    <div class="content_wrapper onboardingv3-multiselect">
        <div class="inner_title">
            <h3>When do you typically {{ $nicotineTypeLabel }}?</h3>
            <p>(Select all that apply)</p>
            <span class="error_msg"></span>
        </div>

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

            <div class="_content_wrap">
                @foreach ($setSmokingTriggersArray as $idx => $val)
                    <div class="form_field">
                        <input class="checkbox" type="checkbox" name="setSmokingTriggers[]" id="chk{{ $idx }}"
                            value="{{ $val }}" @checked(!empty($setSmokingTriggers) && in_array($val, $setSmokingTriggers))>
                        <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>We ask this to better understand your routine and tailor suggestions that fit your lifestyle</p>
                </div>
                <div class="onboardingv3-modal-footer">
                    <button type="button" class="onboardingv3-modal-btn" id="modalGotIt">Got it</button>
                </div>
            </div>
        </div>
    </div>
@endsection