@extends('V3.layouts.B2C')

@section('content')
    <div class="direct-page">
        <div class="logo-wrap">
            <img loading="lazy" src="{{ Vite::asset('resources/images/logo-loading-page.png') }}"
                 alt="image" />
        </div>

        <h1 class="main-heading">Subscribe now at our special {{ $maxDiscount }}% discounted rate to receive:</h1>

        <ul class="benefits-list">
            <li>
                <img loading="lazy" class="mr-2" src="{{ Vite::asset('resources/images/chekmark.svg') }}"
                     alt="image" />
                <span>Our complete <strong>transformation program</strong> to become happily smoke-free</span>
            </li>
            <li>
                <img loading="lazy" class="mr-2" src="{{ Vite::asset('resources/images/chekmark.svg') }}"
                     alt="image" />
                <span>Interactive daily modules and exercises to <strong>remove cravings</strong> and gain control over nicotine</span>
            </li>
            <li>
                <img loading="lazy" class="mr-2" src="{{ Vite::asset('resources/images/chekmark.svg') }}"
                     alt="image" />
                <span>1:1 chat-based <strong>expert support</strong> and access to our vibrant peer community</span>
            </li>
        </ul>

        @foreach ($products as $idx => $product)
            @php
                $priceParts = explode('.', number_format($product['perDayPrice'], 2));
                $priceWhole = $priceParts[0];
                $priceDecimal = $priceParts[1] ?? '00';
                $unitLabel = match($product['unit']) {
                    'mo' => 'mo', 'qtr' => 'qtr', '6mo' => '6mo', 'yr' => 'yr', 'wk' => 'wk',
                    default => 'mo'
                };
            @endphp
            <div class="product-card {{ $idx === 0 ? 'selected' : '' }} js-product-card"
                 data-program-num="{{ $product['iProgramNum'] }}"
                 data-discount="{{ $product['iDiscount'] }}"
                 data-auto-renew-text="{{ $product['autoRenewText'] }}">
                <div class="product-left">
                    <div class="d-flex align-items-center">
                        <span class="product-title">{{ $product['vProductName'] }}</span>
                        <span class="save-badge">Save {{ $product['discount'] }}%</span>
                    </div>
                    <div class="billed-text">
                        billed at <del>{{ $currencySymbol }}{{ $product['firstCrossPrice'] }}</del>
                        &rarr;
                        <span class="discounted-price">{{ $currencySymbol }}{{ $product['price'] }}</span>
                        /{{ $unitLabel }}
                    </div>
                </div>
                <div class="product-right">
                    <span class="currency-symbol">{{ $currencySymbol }}</span>
                        <span class="price-whole">{{ $priceWhole }}</span>
                    <span class="price-decimal">
                        .{{ $priceDecimal }} <br>
                        <span class="per-day-label">/day</span>
                    </span>
                </div>
            </div>
        @endforeach

        <div class="security-text">
            <i class="fa fa-lock lock-icon" aria-hidden="true"></i>
            Guaranteed safe checkout. All transactions are secure and encrypted.
        </div>

        <button class="btn-primary-cta js-razorpay-btn">Get my Custom Program</button>

        <div class="cancel-link">
            No commitment. Cancel anytime.
        </div>

        <div class="act-now-box">
            <strong>Act now:</strong> Every second matters when creating positive change.
        </div>

        <p class="note-text">
            <strong>Note:</strong> the program itself can only be accessed via our app. You will
            receive the link to the app after purchase.
        </p>

        <h2 class="motivational-heading">
            The QuitSure program is more than a solution; it's a pathway to
            a healthier, smoke-free life.
        </h2>

        <div class="motivational-box">
            <ul>
                <li><strong>100% money-back guarantee</strong>: Enjoy a full refund if the program doesn't work for you</li>
                <li>Built by experts from <strong>Stanford University</strong></li>
                <li><strong>Clinically proven</strong> with an independently reviewed 80.1% success rate (<strong>10x</strong> of traditional methods like Nicotine patches and gums)</li>
                <li>Trusted by <strong>3 million+</strong> happy customers with a 95% satisfaction score (based on app reviews)</li>
            </ul>
        </div>

        <button class="btn-buy-now js-razorpay-btn">Buy Now</button>
    </div>

    <div class="direct-footer">
        Copyright &copy; QuitSure Private Limited, {{ '2025' }}
    </div>
@endsection

@push('scripts')
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            var isProcessing = false;
            var cards = document.querySelectorAll('.js-product-card');

            // Card selection
            cards.forEach(function(card) {
                card.addEventListener('click', function() {
                    cards.forEach(function(c) { c.classList.remove('selected'); });
                    card.classList.add('selected');
                });
            });

            dispatchFacebookTracking({
                type: "custom",
                eventName: "SubScreenSeen",
                params: {
                    Stage: "4.1",
                    section: "onboarding"
                }
            });

            function getSelectedCard() {
                return document.querySelector('.js-product-card.selected');
            }

            function initiateCheckout() {
                if (isProcessing) return;

                // FB Pixel: InitiateCheckout on payment button click
                dispatchFacebookTracking({
                    type: "custom",
                    eventName: "WebPaymentInitiated",
                    params: {
                        Stage: "5",
                        section: "onboarding"
                    }
                });

                dispatchFacebookTracking({
                    type: "checkout",
                    eventId: "{{ $fb_event_id }}"
                });

                var selected = getSelectedCard();
                if (!selected) {
                    alert('Please select a plan.');
                    return;
                }

                isProcessing = true;

                var buttons = document.querySelectorAll('.js-razorpay-btn');
                buttons.forEach(function(btn) {
                    btn.disabled = true;
                });

                $.ajax({
                    url: '{{ url("v3/eng/direct/checkout") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        program: '{{ $programId }}',
                        product_num: selected.dataset.programNum,
                        discount: selected.dataset.discount,
                        'link-source': '{{ $linkSource ?? '' }}'
                    },
                    success: function(response) {
                        if (response.status && response.gateway === 'razorpay_subscription') {
                            var options = response.options;
                            options.handler = function(paymentResponse) {
                                var form = document.createElement('form');
                                form.method = 'POST';
                                form.action = '{{ url("v3/eng/direct/success") }}';

                                var fields = {
                                    '_token': '{{ csrf_token() }}',
                                    'razorpay_payment_id': paymentResponse.razorpay_payment_id,
                                    'razorpay_subscription_id': paymentResponse.razorpay_subscription_id,
                                    'razorpay_signature': paymentResponse.razorpay_signature
                                };

                                for (var key in fields) {
                                    var input = document.createElement('input');
                                    input.type = 'hidden';
                                    input.name = key;
                                    input.value = fields[key];
                                    form.appendChild(input);
                                }

                                document.body.appendChild(form);
                                form.submit();
                            };

                            options.modal = {
                                ondismiss: function() {
                                    resetButtons();
                                }
                            };

                            var rzp = new Razorpay(options);
                            rzp.open();
                        } else {
                            alert(response.message || 'Something went wrong. Please try again.');
                            resetButtons();
                        }
                    },
                    error: function() {
                        alert('Something went wrong. Please try again.');
                        resetButtons();
                    }
                });
            }

            function resetButtons() {
                isProcessing = false;
                document.querySelectorAll('.js-razorpay-btn').forEach(function(btn) {
                    btn.disabled = false;
                });
            }

            document.querySelectorAll('.js-razorpay-btn').forEach(function(btn) {
                btn.addEventListener('click', initiateCheckout);
            });
        });
    </script>
@endpush