@extends('V3.layouts.onBoarding')

@section('content')
    <div class="content_wrapper onboardingv3-smoke-count">
        <div class="inner_title">
            @if ($bAlreadyQuit == '1')
                <h3>What did a typical day/week look like for you?</h3>
            @else
                <h3>What does a typical day/week look like for you?</h3>
            @endif

            <span class="error_msg"></span>
        </div>

        <form id="frmBasic" name="frmBasic">
            @if (in_array('Cigarettes', $setNicotineTypes))
                <div class="onboardingv3-consumption-row">
                    <span class="onboardingv3-consumption-label">Cigarettes</span>
                    <div class="onboardingv3-toggle-group">
                        <input type="radio" name="vMode" id="perDay" value="day" @checked((isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'day') || empty($smokingStatus['vMode']))>
                        <label class="onboardingv3-toggle-btn" for="perDay">per day</label>

                        <input type="radio" name="vMode" id="perWeek" value="week" @checked(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'week')>
                        <label class="onboardingv3-toggle-btn" for="perWeek">per week</label>
                    </div>
                </div>

                <!-- Count Display -->
                <div class="onboardingv3-count-display" id="iSmokingCigarettesDisplay">
                    {{ $smokingStatus['iSmokingCigarettes'] ?? '7' }}</div>

                <!-- Range Slider -->
                <div class="onboardingv3-slider-container">
                    <input type="range" class="onboardingv3-range-slider" id="iSmokingCigarettes"
                        name="iSmokingCigarettes" min="1" max="60"
                        value="{{ $smokingStatus['iSmokingCigarettes'] ?? '7' }}">
                </div>
            @elseif (in_array('Vaping', $setNicotineTypes))
                <div class="onboardingv3-consumption-row">
                    <span class="onboardingv3-consumption-label">Vape Pods/Refills</span>
                    <div class="onboardingv3-toggle-group">
                        <input type="radio" name="vMode" id="perDay" value="day" @checked(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'day')>
                        <label class="onboardingv3-toggle-btn" for="perDay">per day</label>

                        <input type="radio" name="vMode" id="perWeek" value="week" @checked((isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'week') || empty($smokingStatus['vMode']))>
                        <label class="onboardingv3-toggle-btn" for="perWeek">per week</label>
                    </div>
                </div>

                <!-- Count Display -->
                <div class="onboardingv3-count-display" id="iSmokingCigarettesDisplay">
                    {{ $smokingStatus['iSmokingCigarettes'] ?? '3' }}</div>

                <!-- Range Slider -->
                <div class="onboardingv3-slider-container">
                    <input type="range" class="onboardingv3-range-slider" id="iSmokingCigarettes"
                        name="iSmokingCigarettes" min="1" max="20"
                        value="{{ $smokingStatus['iSmokingCigarettes'] ?? '3' }}">
                </div>
            @elseif (in_array('Smokeless (chewing, inhalers, snusing, etc.)', $setNicotineTypes))
                <div class="onboardingv3-consumption-row">
                    <span class="onboardingv3-consumption-label">Packets/Pouches</span>
                    <div class="onboardingv3-toggle-group">
                        <input type="radio" name="vMode" id="perDay" value="day" @checked((isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'day') || empty($smokingStatus['vMode']))>
                        <label class="onboardingv3-toggle-btn" for="perDay">per day</label>

                        <input type="radio" name="vMode" id="perWeek" value="week" @checked(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'week')>
                        <label class="onboardingv3-toggle-btn" for="perWeek">per week</label>
                    </div>
                </div>

                <!-- Count Display -->
                <div class="onboardingv3-count-display" id="iSmokingCigarettesDisplay">
                    {{ $smokingStatus['iSmokingCigarettes'] ?? '5' }}</div>

                <!-- Range Slider -->
                <div class="onboardingv3-slider-container">
                    <input type="range" class="onboardingv3-range-slider" id="iSmokingCigarettes"
                        name="iSmokingCigarettes" min="1" max="40"
                        value="{{ $smokingStatus['iSmokingCigarettes'] ?? '5' }}">
                </div>
            @else
                <div class="onboardingv3-consumption-row">
                    <span class="onboardingv3-consumption-label">Cigarettes</span>
                    <div class="onboardingv3-toggle-group">
                        <input type="radio" name="vMode" id="perDay" value="day" @checked((isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'day') || empty($smokingStatus['vMode']))>
                        <label class="onboardingv3-toggle-btn" for="perDay">per day</label>

                        <input type="radio" name="vMode" id="perWeek" value="week" @checked(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'week')>
                        <label class="onboardingv3-toggle-btn" for="perWeek">per week</label>
                    </div>
                </div>

                <!-- Count Display -->
                <div class="onboardingv3-count-display" id="iSmokingCigarettesDisplay">
                    {{ $smokingStatus['iSmokingCigarettes'] ?? '7' }}</div>

                <!-- Range Slider -->
                <div class="onboardingv3-slider-container">
                    <input type="range" class="onboardingv3-range-slider" id="iSmokingCigarettes"
                        name="iSmokingCigarettes" min="1" max="60"
                        value="{{ $smokingStatus['iSmokingCigarettes'] ?? '7' }}">
                </div>
            @endif

            <!-- Average Cost Section -->
            <div class="onboardingv3-cost-section">
                <div class="onboardingv3-cost-label">Average Cost <span class="vModeLabel">(per day)</span></div>
                <div class="onboardingv3-cost-inputs">
                    <select class="onboardingv3-currency-select" id="vPayCurrency" name="vPayCurrency">
                        @if (isset($paidStatus['vCurrencyCode']))
                            @foreach ($Currency as $row)
                                <option value="{{ $row->iCurrencyId }}" data-symbol="{{ $row->vSymbol }}"
                                    @selected(strtoupper($paidStatus['vCurrencyCode']) == strtoupper($row->vCode))>
                                    {{ $row->vCode . '   ' . $row->vSymbol }}</option>
                            @endforeach
                        @else
                            @foreach ($Currency as $row)
                                <option value="{{ $row->iCurrencyId }}" data-symbol="{{ $row->vSymbol }}"
                                    @selected(strtoupper($vCountry) == strtoupper($row->vCountryName) || strtoupper($vCountry) == strtoupper($row->vCountryCode))>
                                    {{ $row->vCode . '   ' . $row->vSymbol }}</option>
                            @endforeach
                        @endif
                    </select>
                    <input type="text" class="onboardingv3-cost-input" name="decPayPrice" min="0"
                        pattern="^\d*(\.\d{0,2})?$"
                        value="{{ isset($paidStatus['decPayPrice']) ? $paidStatus['decPayPrice'] : '' }}"
                        onkeypress="return ((event.charCode >= 48 && event.charCode <= 57) || event.charCode==190 ||event.charCode==110 || event.charCode==46);"
                        inputmode="decimal">
                </div>
            </div>

            <!-- Total Spending Section -->
            <div class="onboardingv3-spending-section">
                @if (in_array('Cigarettes', $setNicotineTypes))
                    <div class="onboardingv3-spending-title">Your total spending on smoking:</div>
                @elseif (in_array('Vaping', $setNicotineTypes))
                    <div class="onboardingv3-spending-title">Your total spending on vaping:</div>
                @elseif (in_array('Smokeless (chewing, inhalers, snusing, etc.)', $setNicotineTypes))
                    <div class="onboardingv3-spending-title">Your total spending on chewing:</div>
                @else
                    <div class="onboardingv3-spending-title">Your total spending on smoking:</div>
                @endif

                <div class="onboardingv3-spending-values">
                    <div class="">
                        <div class="onboardingv3-spending-amount" id="monthlySpendingAmount"></div>
                        <div class="onboardingv3-spending-period">(per month)</div>
                    </div>
                    <div class="">
                        <div class="onboardingv3-spending-amount" id="yearlySpendingAmount"></div>
                        <div class="onboardingv3-spending-period">(per year)</div>
                    </div>
                </div>
            </div>

            <div class="form_field button_wrap">
                <button type="button" class="button onboardingv3-btn" name="btnSubmit" id="btnSubmit">Next</button>
            </div>
        </form>
    </div>
@endsection