@extends('V3.layouts.B2C')

@push('styles')
    @vite('resources/assets/slick/slick.css')
    @vite('resources/assets/slick/slick-theme.css')
@endpush

@php
    $vGoalLabel = '';
    if ($vGoal == 'I want to quit smoking' || $vGoal == 'I’m not sure yet') {
        $tmp = getNicotineTypeLabel($setNicotineTypes, 'present', true);
        $vGoalLabel = 'Our complete transformation program to become happily ' . $tmp . '-free';
    } elseif ($vGoal == 'I want to reduce how much I smoke') {
        $tmp = getNicotineTypeLabel($setNicotineTypes, 'present-continue');
        $vGoalLabel = 'Our complete transformation program to cut back your ' . $tmp;
    } else {
        $tmp = getNicotineTypeLabel($setNicotineTypes, 'present', true);
        $vGoalLabel = 'Our complete transformation program to stay happily ' . $tmp . '-free';
    }

    //$btnClass = $vCurrency == 'INR' ? 'btn-razor' : 'btn-stripe';

    $allSubscribed = collect($programs)->every(fn($p) => !empty($p['subStatus']));
    $btnClass = $allSubscribed ? 'btn-account' : 'btn-checkout';
    //$btnLabel = $btnClass == 'btn-account' ? __('messages.view_details') : __('messages.start_my_custom_plan');
    $btnLabel = __('messages.start_my_custom_plan');
@endphp
@section('content')
    <div class="wrapper_subscribe_b2b wrapper_subscribe_v3">
        @if ($bOnBoardComplete && isset($showPercentage) && $showPercentage > 0)
            <div class="wrap_exclusive_discount">
                <div class="wrap_flex">
                    <span>Buy now to get our exclusive {{ $showPercentage }}% web discount</span>
                    <h2 id="timer"></h2>
                </div>
            </div>
        @endif
        <div class="wrapper_partner_header">
            <header class="header">
                <div class="header_logo">
                    <a class="disable_redirecting" href="javascript:void(0);">
                        <img loading="lazy" src="{{ Vite::asset('resources/images/logo-loading-page.png') }}"
                            alt="image" />
                    </a>
                </div>
            </header>
        </div>

        <div class="program_selection_wrap_txt">
            <section class="coupon_wrap" id="coupon_success">
                <div class="wrap_coupon_success">
                    <div class="oops_text">
                        <p id="coupon_message"></p>
                    </div>
                    <button class="error__btn_cancel" onclick="$('#coupon_success').fadeOut()">
                        <figure>
                            <img loading="lazy" src="{{ Vite::asset('resources/images/web/error_cross.png') }}"
                                alt="image" />
                        </figure>
                    </button>
                </div>
            </section>

            <section class="coupon_wrap payment_failed" id="coupon_failed">
                <div class="wrap_coupon_success">
                    <div class="oops_text" id="error_failed"></div>
                    <button class="error__btn_cancel" onclick="$('#coupon_failed').fadeOut()">
                        <figure>
                            <img loading="lazy" src="{{ Vite::asset('resources/images/web/error_cross.png') }}"
                                alt="image" />
                        </figure>
                    </button>
                </div>
            </section>

            <section class="pt-0">
                <div class="container">
                    <div class="wrap_centered_image">
                        <img loading="lazy" class="header-image"
                            src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/subscribe-lungs-header.jpg"
                            alt="image" />
                    </div>
                </div>
            </section>

            <section class="wrap_programe_ready">
                <div class="container">
                    <div class="wrap_flex">
                        <div class="wrap_left">
                            <h3 class="text-center mb-3">Your Personalized Program is Ready!</h3>
                            <p>What you will get </p>
                            <ul>
                                <li>
                                    <img loading="lazy" src="{{ Vite::asset('resources/images/chekmark.svg') }}"
                                        alt="image" />
                                    <span>{{ $vGoalLabel }}</span>
                                </li>
                                <li>
                                    <img loading="lazy" src="{{ Vite::asset('resources/images/chekmark.svg') }}"
                                        alt="image" />
                                    <span>Interactive daily modules and exercises to remove cravings and gain control over
                                        nicotine</span>
                                </li>
                                <li>
                                    <img loading="lazy" src="{{ Vite::asset('resources/images/chekmark.svg') }}"
                                        alt="image" />
                                    <span>1:1 chat-based expert support and access to our vibrant peer community </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section class="wrap_programe_ready">
                <div class="container">
                    <div class="">
                        <div class="wrap_right">
                            <section class="wrap_chose_right_program" id="programSelection1">
                                <div class="wrap_txt text-center">
                                    <p>Choose the plan that’s right for you</p>
                                </div>

                                <div class="select_program" id="programSection1">
                                    @foreach($programs as $index => $program)
                                        <div class="_card {{ $index==0 ? 'selected_program' : '' }}"
                                            data-program="{{ $program['iProgramID'] }}"
                                            data-use-razorpay="{{ $program['useRazorpay'] ? '1' : '0' }}"
                                            data-programnum="{{ $program['iProgramNum'] }}" data-discount="{{ $program['iDiscount'] }}"
                                            data-currency="{{ $program['currency'] }}" data-amount="{{ $program['price'] }}"
                                            data-auto_renew_text="{{ $program['autoRenewText'] }}"
                                            data-sub_status="{{ $program['subStatus'] }}" data-fb_event_id="{{ $fb_event_id }}"
                                            data-fb_event_email="{{ $fb_event_email }}"
                                            data-fb_external_id="{{ $fb_external_id }}">

                                            @if($index==1)
                                                <div class="badge-overlay">
                                                    <div class="badge badge-pill badge-primary badge-custom">
                                                        Most Popular
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="d-flex justify-content-between align-items-center">
                                                <p class="head">{{ $program['vProductName'] }}</p>
                                                <div class="rounded-check">
                                                    <i class="fa fa-check"></i>
                                                </div>
                                            </div>
                                            @if (!$program['subStatus'])
                                                <div class="mt-2 mb-4">
                                                    <div class="badge badge-pill badge-success badge-discount {{$index==1?'badge-discount-selected':''}}">
                                                        Save {{ $program['discount'] }}%
                                                    </div>
                                                </div>
                                                <span>
                                                    billed &nbsp;
                                                    <del>{{ $program['currencySymbol'] . $program['firstCrossPrice'] }}</del>
                                                    <i class="fa fa-arrow-right mx-2"></i>
                                                    <span class="second_cross_price showPrice">
                                                        {{ $program['currencySymbol'] . $program['price'] }}
                                                    </span>
                                                    {{ '/' . $program['unit'] }}
                                                </span>
                                                <p class="d-flex align-items-baseline">
                                                    {{ $program['currencySymbol'] . $program['perDayPrice'] }}
                                                    <span class="ml-1">/day</span>
                                                </p>
                                            @else
                                                <div class="wrap_inner_card2">
                                                    <span>You already have an active subscription to this program</span>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>

                                <span class="borders">
                                    Offer Applied:
                                    <span class="effectiveDiscount">SIGNUPOFFER</span>
                                </span>

                                <div class="d-flex justify-content-center">
                                    <div class="w-75">
                                        <div
                                            class="d-flex gap-2 justify-content-center align-items-center my-3 security_text">
                                            <i class="fa fa-lock light_primary mr-2" aria-hidden="true"></i>
                                            Guaranteed safe checkout. All transactions are secure and encrypted.
                                        </div>
                                        <button
                                            class="button buy_now_btn {{ $btnClass }}">{{ $btnLabel }}</button>
                                        <div class="d-flex justify-content-center mt-3 cancel_text">
                                            No commitment. Cancel anytime.
                                        </div>
                                    </div>
                                </div>

                            </section>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div class="container">
                    <div class="wrap_centered_image">
                        <img loading="lazy" class="rating-image"
                            src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/subscribe-rating.jpg"
                            alt="image" />
                    </div>
                </div>
            </section>

            <section class="section_7 wrap_program_crousal">
                <div class="container">
                    <div class="wrap_section_7">
                        <h3><b>Why Users Love QuitSure</b></h3>
                    </div>
                    <div class="custom_class_slick">
                        <figure>
                            <img loading="lazy"
                                src="{{ config('services.bucket_url') . 'web/subscription_review_1.png' }}"
                                alt="image" />
                        </figure>
                        <figure>
                            <img loading="lazy"
                                src="{{ config('services.bucket_url') . 'web/subscription_review_2.png' }}"
                                alt="image" />
                        </figure>
                        <figure>
                            <img loading="lazy"
                                src="{{ config('services.bucket_url') . 'web/subscription_review_3.png' }}"
                                alt="image" />
                        </figure>
                        <figure>
                            <img loading="lazy"
                                src="{{ config('services.bucket_url') . 'web/subscription_review_1.png' }}"
                                alt="image" />
                        </figure>
                        <figure>
                            <img loading="lazy"
                                src="{{ config('services.bucket_url') . 'web/subscription_review_2.png' }}"
                                alt="image" />
                        </figure>
                        <figure>
                            <img loading="lazy"
                                src="{{ config('services.bucket_url') . 'web/subscription_review_3.png' }}"
                                alt="image" />
                        </figure>
                    </div>
                </div>
            </section>

            <section class="smoker_profile_report">
                <div class="container d-flex justify-content-center flex-column align-items-center">
                    <div>
                        <h3 class="text-center">60,000+ smokers with your profile report:</h3>
                    </div>

                    <div>
                        <div class="pill">92% <span>reduced cravings</span></div>
                        <div class="pill">85% <span>fewer withdrawal symptoms</span></div>
                        <div class="pill"><span>Negligible mood swings and irritability</span></div>
                    </div>
                </div>
            </section>

            <section class="d-flex justify-content-center achive_goals_section mt-4">
                <div class="mini_wrapper_section">
                    <div class="d-flex justify-content-center">
                        {{--<div class="round-badge">
                            95%
                        </div>--}}
                        <img loading="lazy"
                             src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/subscribe-95-percent.png"
                             alt="image" />
                    </div>
                    <div>
                        <div class="mt-3 text-center px-5">
                            <p>
                                QuitSure users noted that they were able to achieve their goals within 3 months
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="wrap_programe_ready">
                <div class="container">
                    <div class="">
                        <div class="wrap_right">
                            <section class="wrap_chose_right_program" id="programSelection2">

                                <div class="wrap_txt">
                                    <h3>Start now before your mind tricks you into doing it ‘later’.</h3>
                                </div>
                                <div class="select_program" id="programSection2">
                                    @foreach($programs as $index => $program)
                                        <div class="_card {{ $index==0 ? 'selected_program' : '' }}"
                                            data-program="{{ $program['iProgramID'] }}"
                                            data-use-razorpay="{{ $program['useRazorpay'] ? '1' : '0' }}"
                                            data-programnum="{{ $program['iProgramNum'] }}" data-discount="{{ $program['iDiscount'] }}"
                                            data-currency="{{ $program['currency'] }}" data-amount="{{ $program['price'] }}"
                                            data-auto_renew_text="{{ $program['autoRenewText'] }}"
                                            data-sub_status="{{ $program['subStatus'] }}" data-fb_event_id="{{ $fb_event_id }}"
                                            data-fb_event_email="{{ $fb_event_email }}"
                                            data-fb_external_id="{{ $fb_external_id }}">

                                            @if($index==1)
                                                <div class="badge-overlay">
                                                    <div class="badge badge-pill badge-primary badge-custom">
                                                        Most Popular
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="d-flex justify-content-between align-items-center">
                                                <p class="head">{{ $program['vProductName'] }}</p>
                                                <div class="rounded-check">
                                                    <i class="fa fa-check"></i>
                                                </div>
                                            </div>
                                            @if (!$program['subStatus'])
                                                <div class="mt-2 mb-4">
                                                    <div class="badge badge-pill badge-success badge-discount {{$index==1?'badge-discount-selected':''}}">
                                                        Save {{ $program['discount'] }}%
                                                    </div>
                                                </div>
                                                <span>
                                                    billed &nbsp;
                                                    <del>{{ $program['currencySymbol'] . $program['firstCrossPrice'] }}</del>
                                                    <i class="fa fa-arrow-right mx-2"></i>
                                                    <span class="second_cross_price showPrice">
                                                        {{ $program['currencySymbol'] . $program['price'] }}
                                                    </span>
                                                    {{ '/' . $program['unit'] }}
                                                </span>
                                                <p class="d-flex align-items-baseline">
                                                    {{ $program['currencySymbol'] . $program['perDayPrice'] }}
                                                    <span class="ml-1">/day</span>
                                                </p>
                                            @else
                                                <div class="wrap_inner_card2">
                                                    <span>You already have an active subscription to this program</span>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>

                                <span class="borders">
                                    Offer Applied:
                                    <span class="effectiveDiscount">SIGNUPOFFER</span>
                                </span>

                                <div class="d-flex justify-content-center">
                                    <div class="w-75">
                                        <div
                                            class="d-flex gap-2 justify-content-center align-items-center my-3 security_text">
                                            <i class="fa fa-lock light_primary mr-2" aria-hidden="true"></i>
                                            All transactions are secure and encrypted.
                                        </div>
                                        <button
                                            class="button buy_now_btn {{ $btnClass }}">{{ $btnLabel }}</button>
                                        <div class="d-flex justify-content-center mt-3 cancel_text">
                                            No commitment. Cancel anytime.
                                        </div>
                                    </div>
                                </div>

                            </section>
                        </div>
                    </div>
                </div>
            </section>

            <section class="why_work_section">
                <div class="container d-flex justify-content-center">
                    <div class="mini_wrapper_section">
                        <div class="wrap_txt mb-4">
                            <h3>Why QuitSure Works</h3>
                        </div>

                        <div class="proven_CBT">
                            <div class="mb-3 d-flex">
                                <img loading="lazy" alt="icon" class="mr-2 mt-1" width="25" height="25"
                                    src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/subscribe-works-1.png">
                                <div>
                                    <h4>
                                        Proven CBT and mindfulness techniques
                                    </h4>
                                    <p>To transform your relationship with nicotine</p>
                                </div>
                            </div>
                            <div class="mb-3 d-flex">
                                <img loading="lazy" alt="icon" class="mr-2 mt-1" width="25" height="25"
                                    src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/subscribe-works-2.png">
                                <div>
                                    <h4>We make success simple</h4>
                                    <p>No cravings. No weight gain. No lifestyle changes.</p>
                                </div>
                            </div>
                            <div class="mb-3 d-flex">
                                <img loading="lazy" alt="icon" class="mr-2 mt-1" width="25" height="25"
                                    src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/subscribe-works-3.png">
                                <div>
                                    <h4>Built with compassion and experience</h4>
                                    <p>Designed by ex-smokers who understand you and have done this journey themselves</p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-5">
                            <h5>Built and endorsed by scientists from</h5>
                            <div class="d-flex justify-content-center">
                                <div class="mr-2">
                                    <img loading="lazy" class="img-fluid"
                                        src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/p7.2.1-stanford.png"
                                        alt="image" />
                                </div>
                                <div>
                                    <img loading="lazy" class="img-fluid"
                                        src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/other-assets/p7.2.1-ucsf.png"
                                        alt="image" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="wrapper_faq">
                <div class="container">
                    <div class="d-flex justify-content-center">
                        <ul class="mini_wrapper_section">
                            <li>Enjoy the freedom to cancel anytime via your account on the QuitSure app</li>
                            <li>If you choose not to cancel, your subscription will autorenew in <span
                                    class="auto_renew_text">{{ $programs[0]['autoRenewText'] }}</span></li>
                            <li>
                                By completing your purchase, you agree to our
                                <a href="https://www.quitsure.app/terms" target="_blank">terms of service</a>.
                            </li>
                            <li>
                                The terms for our money-back guarantee refund policy can be found
                                <a href="https://www.quitsure.app/refunds" target="_blank">here</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <section class="wrappper_money_back">
                <div class="container">
                    <div class="cstm_flex">
                        <div class="wrap_left">
                            <img loading="lazy" src="{{ Vite::asset('resources/images/moneyback.png') }}"
                                alt="image" />
                        </div>
                        <div class="wrap_right">
                            <p>Worried you won’t stick to quitting? <br> QuitSure is so effective, we guarantee you’ll
                                love the results—or your money back!</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="copy_write_txt">
                <span>Copyright © QuitSure Private Limited, 2025</span>
            </section>
        </div>
    </div>
@endsection

@include('V3.B2C.partials.js.subscribeJsEnglish')