{% extends 'frontend/layouts/index.html.twig' %}
{% block stylesheets %}
    <style>
        {% include 'frontend/products/style.css' %}
    </style>
{% endblock %}
{% block publiccontent %}
    <div class="container-fluid">
{#        <div class="row justify-content-center mt-5">#}
{#            <div class="col-md-11">#}
{#                <div class="notice-box">#}
{#                    <img src="{{ asset('../assets/icons/info.png') }}" width="30" class="mr-2">  Do you have a voucher? <a href="#" class="text-left collapsed rounded-0" data-toggle="collapse" data-target="#voucherCode" aria-expanded="false" aria-controls="voucherCode">Click here to enter your voucher code.</a>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
        <div id="voucherCode" class="container-fluid ml-5 mt-2 collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <h5 class="form-label">If you have a coupon code, please apply it below.</h5>
            <div class="form-row">
                <div class="col-md-4">
                    <input type="text" name="coupon" class="form-control" placeholder="Enter coupon code">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary btn-block mt-2">Submit </button>
                </div>
            </div>
        </div>
        <div class= "errors-message"></div>
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="form-container">
                    {{ form_start(form, {'attr': {'id': 'checkoutForm', 'novalidate': 'novalidate'}}) }}
                    <div class="card">
                        <div class="card-body">
                            <h4>Billing Details</h4>
                            <hr>
                            <div class="form-group">
                                     <label for="email"><i class="fas fa-envelope"></i> {{ form_label(form.email) }}</label>
                                    {{ form_widget(form.email, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                    <div class="error-message" id="email-error-message"></div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md">
                                        <label for="firstName"><i class="fas fa-user"></i> {{ form_label(form.firstName) }}</label>
                                        {{ form_widget(form.firstName, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                        <div class="error-message"></div>
                                    </div>
                                    <div class="col-md">
                                        <label for="lastName"><i class="fas fa-user"></i> {{ form_label(form.lastName) }}</label>
                                        {{ form_widget(form.lastName, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                        <div class="error-message"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="companyName"><i class="fas fa-building"></i> {{ form_label(form.companyName) }}</label>
                                    {{ form_widget(form.companyName, {'attr': {'class': 'form-control'}}) }}
                                    <div class="error-message"></div>
                                </div>
                                <div class="form-group">
                                    <label for="country"><i class="fas fa-globe"></i> {{ form_label(form.country) }}</label>
                                    {{ form_widget(form.country, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                    <div class="error-message"></div>
                                </div>
                                <div class="form-group">
                                     <label for="address"><i class="fas fa-map-marker-alt"></i> {{ form_label(form.address) }}</label>
                                    {{ form_widget(form.address, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                    <div class="error-message"></div>
                                </div>
                                <div class="form-group">
                                   <label for="postalCode"><i class="fas fa-envelope-open-text"></i> {{ form_label(form.postalCode) }}</label>
                                    {{ form_widget(form.postalCode, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                    <div class="error-message"></div>
                                </div>
                                <div class="form-group">
                                    <label for="city"><i class="fas fa-city"></i> {{ form_label(form.city) }}</label>
                                    {{ form_widget(form.city, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                    <div class="error-message"></div>
                                </div>
                                <div class="form-group">
                                    <label for="state"><i class="fas fa-flag"></i> {{ form_label(form.state) }}</label>
                                    {{ form_widget(form.state, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
                                    <div class="error-message"></div>
                                </div>
                                <div class="form-group">
                                    <label for="mobileno"><i class="fas fa-phone"></i>  {{ form_label(form.mobileno) }}</label>
                                    {{ form_widget(form.mobileno) }}
                                    <div class="error-message" id="mobilenoError"></div>
                                </div>
                                <h4 class="mt-5">Additional Information</h4>
                                <hr>
                                <div class="form-group">
                                    <label for="notes"><i class="fas fa-sticky-note"></i> {{ form_label(form.notes) }}</label>
                                    {{ form_widget(form.notes, {'attr': {'class': 'form-control'}}) }}
                                    <div class="error-message"></div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-container">
                    <div class="card">
                        <div class="card-header">
                            <h4>Your Order</h4>
                            <hr>
                        </div>
                        <div class="card-body">
                            <div class="order-title list-group-item d-flex justify-content-between">
                                <span>Product</span>
                                <strong>Subtotal</strong>
                            </div>
                            <ul class="list-group mb-3">
                                <li class="list-group-item d-flex justify-content-between">
                                    <span><i class="fa fa-cube"></i>  {{ product.name }} - {{ duration }}
                                        {{ duration == 1 ? 'Month' : 'Months' }}
                                    </span>
                                    <strong>{{ price|number_format(2, ',', '.') }} €</strong>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span><i class="fa fa-percent"></i> Discount</span>
                                    <strong>{{ discount }} %</strong>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span><i class="fa fa-euro-sign"></i> Subtotal</span>
                                    <strong>{{ discountedPrice|number_format(2, ',', '.') }} €</strong>
                                </li>
                                <li class="list-group-item tax" id="taxRow" style="display: none">
                                    <span class="justify-content-start"><i class="fa fa-euro-sign"></i> Tax (19%)</span>
                                    <strong class="justify-content-end" id="taxAmount">0 %</strong>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span><i class="fa fa-credit-card"></i> Total</span>
                                    <strong id="totalPrice">{{ discountedPrice }} €</strong>
                                </li>
                                <input type="hidden" name="checkout['produtct_stripe_price_id']" value="{{product_stripe_price_id}}">
                                <input type="hidden" name="checkout['product_id']" value="{{product.id}}" id="product_id">
                            </ul>
                        </div>

                        {% if product.regularprice > 0 %}
                            <div class="card-header">
                                <h4>Payment Method</h4>
                                <hr>
                            </div>  
                        {% endif %}
                  
                        <div class="card-body">
                            <div class="col-md-12">
                                {% if product.regularprice > 0 %}
                                    <div class="accordion" id="accordionExample">
                                        <div class="error-message" id="paymentOptionError"></div>
                                        {# <div id="payment-element"></div> #}
                                        {% for choice in form.payment_option %}
                                            <div>
                                                <div class="payment-option">
                                                    {{ form_widget(choice) }}
                                                    <img src="{{ asset('/assets/images/logo/' ~ choice.vars.value ~ '.svg' ) }}" alt="{{ choice.vars.label }} logo" class="payment-icon">
                                                </div>
                                                <div id="{{ choice.vars.value }}" class="payment-method-form" style="display: none;">
                                                    {% if choice.vars.value == 'card' %}
                                                        <div class="card-body payment-card-body" id="card">
                                                            <div id="card-element"></div>
                                                        </div>
                                                    {% elseif choice.vars.value == 'sepa_debit' %}
                                                        <div class="card-body  payment-card-body">
                                                            <div id="sepa-element"></div>
                                                        </div>
                                                    {% elseif choice.vars.value == 'paypal' %}
                                                        <div id="paypal-button-container"></div>
                                                    {% elseif choice.vars.value == 'bancontact' %}
                                                        <div class="card-body  payment-card-body">
                                                            <div id="bancontact-element"></div>
                                                            <div class="row mt-3">
                                                                    <div class="icon col-md-2">
                                                                        <img src="{{ asset('/assets/images/logo/wallet.png') }}" alt="" class="payment-icon">
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <h6>After submitting, you will be redirected to securely complete the next steps.</h6>
                                                                    </div>
                                                                </div>
                                                                <p>
                                                                    By providing payment information and confirming the payment, you authorize (A) {{ app_name }} (Company HQ Commerce) and Stripe, our payment service providers and/or PPRO, the local service providers, to debit your account via direct debit. At the same time (B) you instruct your credit institution in accordance with these instructions to debit your account accordingly. You have the right to request a refund from your credit institution under the terms and conditions applicable to your agreement with your credit institution. Refund requests must be made within eight weeks starting from the date on which your account was debited.
                                                                </p>
                                                                <p>
                                                                    It is understood that the conditions agreed with your credit institution will apply. By providing your consent, you agree to receive the advance notice at least two days before the due date of the payment collection.
                                                                </p>
                                                            </div>
                                                    {% elseif choice.vars.value == 'eps' %}
                                                        <div class="card-body  payment-card-body">
                                                            <div id="eps-element"></div>
                                                        </div>
                                                    {% elseif choice.vars.value == 'giropay' %}
                                                        <div class="card-body  payment-card-body">
                                                            <div id="giropay-element"></div>
                                                            <div class="row mt-3">
                                                                    <div class="icon col-md-2">
                                                                        <img src="{{ asset('/assets/images/logo/wallet.png') }}" alt="" class="payment-icon">
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <h6>After submitting, you will be redirected to securely complete the next steps.</h6>
                                                                    </div>
                                                                </div>
                                                                <p>
                                                                    By providing payment information and confirming the payment, you authorize (A) {{ app_name }} (Company HQ Commerce) and Stripe, our payment service providers and/or PPRO, the local service providers, to debit your account via direct debit. At the same time (B) you instruct your credit institution in accordance with these instructions to debit your account accordingly. You have the right to request a refund from your credit institution under the terms and conditions applicable to your agreement with your credit institution. Refund requests must be made within eight weeks starting from the date on which your account was debited.
                                                                </p>
                                                                <p>
                                                                    It is understood that the conditions agreed with your credit institution will apply. By providing your consent, you agree to receive the advance notice at least two days before the due date of the payment collection.
                                                                </p>
                                                            </div>
                                                        </div>
                                                    {% elseif choice.vars.value == 'ideal' %}
                                                        <div class="card-body payment-card-body ideal">
                                                            <div class="ideal-container">
                                                                <div class="ideal-custom-select-container">
                                                                    <div id="ideal-bank-element"></div>
                                                                </div>
                                                                <div class="row mt-3">
                                                                    <div class="icon col-md-2">
                                                                        <img src="{{ asset('/assets/images/logo/wallet.png') }}" alt="" class="payment-icon">
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <h6>After submitting, you will be redirected to securely complete the next steps.</h6>
                                                                    </div>
                                                                </div>
                                                                <p>
                                                                    By providing payment information and confirming the payment, you authorize (A) {{ app_name }} (Company HQ Commerce) and Stripe, our payment service providers and/or PPRO, the local service providers, to debit your account via direct debit. At the same time (B) you instruct your credit institution in accordance with these instructions to debit your account accordingly. You have the right to request a refund from your credit institution under the terms and conditions applicable to your agreement with your credit institution. Refund requests must be made within eight weeks starting from the date on which your account was debited.
                                                                </p>
                                                                <p>
                                                                    It is understood that the conditions agreed with your credit institution will apply. By providing your consent, you agree to receive the advance notice at least two days before the due date of the payment collection.
                                                                </p>
                                                            </div>
                                                        </div>
                                                    {% elseif choice.vars.value == 'p24' %}
                                                        <div class="card-body  payment-card-body">
                                                            <div id="p24-bank-element"></div>
                                                        </div>
                                                    {% elseif choice.vars.value == 'sofort' %}
                                                        <div class="card-body  payment-card-body">
                                                            <div id="sofort-element"></div>
                                                            <div class="row mt-3">
                                                                    <div class="icon col-md-2">
                                                                        <img src="{{ asset('/assets/images/logo/wallet.png') }}" alt="" class="payment-icon">
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <h6>After submitting, you will be redirected to securely complete the next steps.</h6>
                                                                    </div>
                                                                </div>
                                                                <p>
                                                                    By providing payment information and confirming the payment, you authorize (A) {{ app_name }} (Company HQ Commerce) and Stripe, our payment service providers and/or PPRO, the local service providers, to debit your account via direct debit. At the same time (B) you instruct your credit institution in accordance with these instructions to debit your account accordingly. You have the right to request a refund from your credit institution under the terms and conditions applicable to your agreement with your credit institution. Refund requests must be made within eight weeks starting from the date on which your account was debited.
                                                                </p>
                                                                <p>
                                                                    It is understood that the conditions agreed with your credit institution will apply. By providing your consent, you agree to receive the advance notice at least two days before the due date of the payment collection.
                                                                </p>
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-group">
                                    {{ form_row(form.subscribeNews) }}
                                    <div class="error-message" id="subscribeError"></div>
                                </div>
                                <p class="info mt-3">We use your personal data to process your order, to provide the best possible user experience on this website, and for other purposes described in our 
                                {% for menuSetting in getMenuSettings() %}
                                {% if menuSetting.name == 'Privacy Policy' and menuSetting.isActive %}
                                    {% set privacyPolicyUrl = menuSetting.url is not empty ? menuSetting.url : '#' %}
                                      <a href="{{privacyPolicyUrl}}">privacy policy</a>.</p>
                                {% endif %}
                                {% endfor %}
                              

                                <div class="form-group">
                                    {{ form_label(form.agreeTerms) }}
                                    {{ form_widget(form.agreeTerms, {'attr': {'class': 'form-check-input'}}) }}
                                     {% for menuSetting in getMenuSettings() %}
                                        {% if menuSetting.name == 'Terms And Condition' and menuSetting.isActive %}
                                            {% set Url = menuSetting.url is not empty ? menuSetting.url : '#' %}
                                            <a href="{{Url}}">terms and conditions</a>
                                        {% endif %}
                                    {% endfor %}    
                                    <div class="error-message" id="termsError"></div>
                                </div>
                                {% if product.regularprice > 0 %}
                                    <div class="form-group">
                                        {{ form_row(form.auto_renewal) }}
                                        <div class="error-message" id="termsError"></div>
                                    </div>
                                {% endif %}
                                <input type="hidden" name="orderID" id="orderID">
                                <input type="hidden" name="payerID" id="payerID">
                                <button id="submit" class="btn btn-primary btn-block mt-3">Submit Payment</button>
                                <div id="error-message" class="text-denger mt-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://www.paypal.com/sdk/js?client-id={{ payment_setting_data.payple_client_id }}&vault=true&intent=subscription" data-namespace="paypal_sdk"></script>

    <script>
        $(document).ready(function() {

             // initilize the country Dropdown
            $('#checkout_country').select2({
                templateResult: formatCountryOption,
                minimumResultsForSearch: 1,
                templateSelection: formatCountrySelection,
                escapeMarkup: function(m) { return m; }
            });

            $('#checkout_state').select2({
                minimumResultsForSearch: 1
            });
            // Function to format dropdown options
            function formatCountryOption(option) {
                if (!option.id) {
                    return option.text;
                }
                // Extract flag code from the value
                const flagCode = option.id.toLowerCase(); // Assuming the value contains the country code
                const flagIcon = `<img src="https://flagcdn.com/w40/${flagCode}.png" class="flag-icon" style="width: 20px; height: 15px; margin-right: 10px;" />`;
                return $(`<span>${flagIcon} ${option.text}</span>`);
            }
            // Function to format the selected option
            function formatCountrySelection(option) {
                if (!option.id) {
                    return option.text;
                }
                // Extract flag code from the value
                const flagCode = option.id.toLowerCase(); // Assuming the value contains the country code
                const flagIcon = `<img src="https://flagcdn.com/w40/${flagCode}.png" class="flag-icon" style="width: 20px; height: 15px; margin-right: 10px;" />`;
                return $(`<span>${flagIcon} ${option.text}</span>`);
            }

            $('#checkout_country').change(function() {
                var countryId = $(this).val();
                var discountedPrice = parseFloat('{{ discountedPrice }}');
                var taxRate = 0.19;

                if (countryId === 'DE') {
                    var taxAmount = discountedPrice * taxRate;
                    var totalPrice = discountedPrice + taxAmount;
                    $('#taxAmount').text(taxAmount.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €');
                    $('#totalPrice').text(totalPrice.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €');
                    $('#totalPrice').val(totalPrice.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                    $('#taxRow').show();
                } else {
                    $('#taxRow').hide();
                    var totalPrice = discountedPrice;
                    $('#totalPrice').text(discountedPrice.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €');
                    $('#totalPrice').val(totalPrice);
                }

                if (countryId) {
                    // Fetch states for the selected country
                    let userStateUrl = "{{ path('get_states', {countryId: '_countryId'}) }}";
                    userStateUrl = userStateUrl.replace('_countryId', countryId);
                    $.ajax({
{#                        url: '/admin/users/get-states/' + countryId,#}
                        url: userStateUrl,
                        type: 'GET',
                        success: function (data) {
                            // Clear existing options and append placeholder
                            $('#checkout_state').empty();
                            $('#checkout_state').append($('<option>').text('Select State').attr('value', ''));

                            // Preselected state from the database
                            var preselectedState = "{{ formData['state'] is defined and formData['state'] is not empty ? formData['state'].id : ""}}"; // Replace with your actual server-side variable or dynamically fetch it.

                            // Populate state dropdown with the fetched data
                            $.each(data, function (key, value) {
                                var option = $('<option>').text(value).attr('value', key);
                                if (key === preselectedState) {
                                    option.attr('selected', 'selected'); // Mark the database state as selected
                                }
                                $('#checkout_state').append(option);
                            });

                            // Initialize or reinitialize select2
                            $('#checkout_state').select2({
                                minimumResultsForSearch: 1,
                                placeholder: "Select State"
                            });
                        },
                        error: function () {
                            console.error('Error fetching states.');
                        }
                    });
                } else {
                    // Reset the state dropdown if no country is selected
                    $('#checkout_state').select2('destroy'); // Destroy current select2 instance
                    $('#checkout_state').empty(); // Clear options
                    $('#checkout_state').append($('<option>').text('Select State').attr('value', '')); // Add placeholder option

                    // Reinitialize select2 with placeholder
                    $('#checkout_state').select2({
                        minimumResultsForSearch: 1,
                        placeholder: "Select State"
                    });
                }
            });

            // Override Noty defaults
            Noty.overrideDefaults({
                theme: 'limitless',
                layout: 'topRight',
                timeout: 3500
            });
            $('#checkout_country').trigger('change');
            
        });

        document.addEventListener('DOMContentLoaded', function() {
            let form = document.getElementById('checkoutForm');
            var subscribeCheckbox = document.getElementById("checkout_subscribeNews");
            var termsCheckbox = document.getElementById("checkout_agreeTerms");
            const paymentOptions = document.querySelectorAll('input[name="checkout[payment_option]"]');
            var paymentMethodDivs = document.querySelectorAll('.payment-method-form');
            const mobileInput = form.querySelector('.intl-tel-input');
            const mobileErrorMessageDiv = document.getElementById('mobilenoError');
            let productRegularPrice = "{{ product.regularprice }}";

            // Safely check for the country name and provide a fallback
            const initialCountry = "{{ formData['country'] is defined and formData['country'] is not empty ? formData['country'].slug|lower : 'de' }}";

            // Initialize intl-tel-input
            const iti = window.intlTelInput(mobileInput, {
                initialCountry: initialCountry,
                geoIpLookup: function(callback) {
                    fetch('https://ipinfo.io/json', { headers: { 'Accept': 'application/json' } })
                        .then(resp => resp.json())
                        .then(resp => {
                            const countryCode = (resp && resp.country) ? resp.country : 'de';
                            callback(countryCode);
                        })
                        .catch(() => {
                            callback('de');
                        });
                }
            });

            const errorMap = ["Invalid mobile number", "Invalid country of mobile number code.", "Mobile number is too short.", "Mobile number is too long.", "Invalid mobile number"];

            // Function to check if the input contains only valid characters
            function containsValidCharacters(input) {
                const regex = /^[+\d\s]+$/; // Allows only digits and the '+' symbol
                return regex.test(input);
            }

            // Function to clean up the mobile number and format it correctly
            function formatMobileNumber() {
                let mobileNumber = mobileInput.value.trim();

                // Remove any leading zero
                if (mobileNumber.startsWith('0')) {
                    mobileNumber = mobileNumber.substring(1);
                }

                // Get selected country code
                const countryData = iti.getSelectedCountryData();
                const dialCode = countryData.dialCode;

                // Add the country code if it's not already present
                if (!mobileNumber.startsWith(`+${dialCode}`)) {
                    mobileNumber = `+${dialCode} ${mobileNumber}`;
                }

                // Update the input field with the formatted number
                if(!mobileNumber){
                    mobileInput.value = mobileNumber;
                }
            }

            // When the form is loaded, format the mobile number if it's already populated
            if (!mobileInput.value) {
                formatMobileNumber();
            }

            // Set default country code for Germany (+49) if the field is empty or no country is selected
            if (!mobileInput.value) {
                mobileInput.value = "+49 "; // Default Germany dialing code
            }

            // Listen for country change events to update the dial code accordingly
            mobileInput.addEventListener('countrychange', function() {
                formatMobileNumber();
            });

            // set the auto Revenue value is true or false
            const autoRenewalCheckbox = document.querySelector('#checkout_auto_renewal');
            var auto_revenue = false;

            $("#checkout_auto_renewal").on("change",function() {
                if (this.checked) {
                    auto_revenue = true; // Set value to true when checked
                } else {
                    auto_revenue = false; // Set value to false when unchecked
                }
            })

            // Function to show/hide payment method divs based on selected option
            function showPaymentMethodDiv(selectedValue) {
                var paymentMethodDivs = document.querySelectorAll('.payment-method-form');
                paymentMethodDivs.forEach(function(div) {
                    div.style.display = 'none'; // Hide all divs
                });
                var selectedDiv = document.getElementById(selectedValue);
                if (selectedDiv) {
                    selectedDiv.style.display = 'block'; // Show the selected div
                }
            }

            // Function to validate fields in the currently visible payment method div
            function validatePaymentMethodFields() {
                var selectedElement = document.querySelector('input[name="checkout[payment_option]"]:checked');
                if (selectedElement) {
                    var selectedValue = selectedElement.value;
                }
                var selectedDiv = document.getElementById(selectedValue);
                var isValid = true;
                if (selectedDiv) {
                    var inputs = selectedDiv.querySelectorAll('input[required], select[required], textarea[required]');
                    inputs.forEach(function(input) {
                        // Remove previous error message if it exists
                        var errorElement = input.nextElementSibling;
                        if (errorElement && errorElement.classList.contains('error-message')) {
                            errorElement.remove();
                        }

                        if (!input.value.trim()) {
                            isValid = false;
                            // Create an error message element
                            var errorMessage = document.createElement('span');
                            errorMessage.classList.add('error-message');
                            errorMessage.style.color = 'red';
                            errorMessage.textContent = 'This field is required.';
                            // Insert the error message after the input
                            input.parentNode.insertBefore(errorMessage, input.nextSibling);
                        }
                    });
                }
                return isValid;
            }

            // Attach change event listener to payment option radio buttons
            paymentOptions.forEach(function(option) {
                option.addEventListener('change', function() {
                    // Get the value of the selected radio button
                    var selectedValue = this.value;
                    // Show the corresponding payment method div
                    showPaymentMethodDiv(selectedValue);
                });
            });

            // Function to validate a single input field
            function validateInput(input) {
                let errorMessageDiv = input.nextElementSibling;

                // Check if input is a select2 dropdown
                 if (input.tagName === 'SELECT' && $(input).hasClass('select2-hidden-accessible')) {
                    // Get the Select2 container
                    let select2Container = $(input).next('.select2').find('.select2-selection');

                    // Check if error message div exists, else create it
                    if (!select2Container.next('.error-message').length) {
                        errorMessageDiv = $('<span class="error-message" style="color: red; font-size: 12px;"></span>');
                        select2Container.after(errorMessageDiv);
                    } else {
                        errorMessageDiv = select2Container.next('.error-message');
                    }

                    // Validate the Select2 dropdown
                    if (!input.value.trim()) {
                        select2Container.addClass('is-invalid'); // Add error class to the container
                        select2Container.removeClass('is-valid');
                        
                        if(input.name === "checkout[country]"){
                            errorMessageDiv.html('<i class="fas fa-exclamation-circle text-denger"></i> Country is required');
        
                        }
                        
                        if(input.name === "checkout[state]"){
                            errorMessageDiv.html('<i class="fas fa-exclamation-circle text-denger"></i> State is required');
                        }
                        errorMessageDiv.css('color', 'red');
                    } else {
                        select2Container.removeClass('is-invalid'); // Remove error class
                        select2Container.addClass('is-valid'); // Add valid class
                        errorMessageDiv.html('<i class="fas fa-check-circle text-success"></i> Success');
                        errorMessageDiv.css('color', 'green');
                    }
                } else { // Regular input field validation
                    if (!input.value.trim()) {
                        input.classList.add('is-invalid');
                        input.classList.remove('is-valid');
                        errorMessageDiv.style.color = "red";
                        if (errorMessageDiv) {
                            switch (input.name) {
                                case "checkout[email]":
                                    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                                    if (!input.value.trim()) {
                                        errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> Email is required';
                                    } else {
                                        if (!emailRegex.test(input.value.trim())) {
                                            errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> Please enter a valid email address.';
                                        }
                                    }
                                    break;
                                case "checkout[firstName]":
                                    errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> First name is required';
                                    break;
                                case "checkout[lastName]":
                                    errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> Last name is required';
                                    break;
                                case "checkout[address]":
                                    errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> Address is required';
                                    break;
                                case "checkout[postalCode]":
                                    errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> Postal code is required';
                                    break;
                                case "checkout[city]":
                                    errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> City is required';
                                    break;
                                case "checkout[state]":
                                    errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> State is required';
                                    break;
                            }
                        }
                        isValid = false;
                    } else {
                        // Check if email is valid
                        if (input.name === "checkout[email]" && input.value.trim()) {
                            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                            if (!emailRegex.test(input.value.trim())) {
                                const emailErrorMessageDiv = document.getElementById('email-error-message');
                                emailErrorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> Please enter a valid email address.';
                                emailErrorMessageDiv.style.color = "red";
                                
                                input.classList.add('is-invalid');
                                input.classList.remove('is-valid');
                                isValid = false;
                            } else {
                                errorMessageDiv.innerHTML = '<i class="fas fa-check-circle text-success"></i> Success';
                                errorMessageDiv.style.color = "green";
                                input.classList.add('is-valid');
                                input.classList.remove('is-invalid');
                            }
                        } else {
                            if (errorMessageDiv) {
                                errorMessageDiv.innerHTML = '<i class="fas fa-check-circle text-success"></i> Success';
                                errorMessageDiv.style.color = "green";
                                input.classList.add('is-valid');
                                input.classList.remove('is-invalid');
                            }
                        }
                    }
                }
            }


            // Function to validate checkbox
            function validateCheckbox(checkbox, errorMessageDiv) {
                if (!checkbox.checked) {
                    errorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i> This checkbox must be checked.';
                    errorMessageDiv.style.color = "red";  
                    return false;
                } else {
                    errorMessageDiv.innerHTML = '<i class="fas fa-check-circle text-success"></i> Success';
                    errorMessageDiv.style.color = "green";  
                    return true;
                }
            }

            // Function to validate payment options
            function validatePaymentOption() {
                let isChecked = Array.from(paymentOptions).some(radio => radio.checked);
                if (!isChecked) {
                    document.getElementById('paymentOptionError').textContent = 'Please select a payment option.';
                    return false;
                } else {
                    document.getElementById('paymentOptionError').textContent = '';
                    return true;
                }
            }

            // Add input and blur event listeners to each required field
            form.querySelectorAll('[required]').forEach(function(input) {
                input.addEventListener('input', function() {
                    validateInput(input);
                });
                input.addEventListener('blur', function() {
                    validateInput(input);
                });
            });

            var StripePublicKey = "{{payment_setting_data.stripe_public_key}}";
            const stripe = Stripe(StripePublicKey);

            const elements = stripe.elements();
            
            const ibanElement = elements.create('iban', {
                supportedCountries: ['SEPA'],
                style: {
                    base: {
                        padding: '10px 12px',
                        color: '#fff',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#fff',
                        },
                        'option': {
                            color: '#32325d',
                        },
                    },
                },
            });
            const idealElement = elements.create('idealBank', {
                style: {
                    base: {
                        padding: '10px 12px',
                        color: '#fff',
                        backgroundColor: 'black',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#fff',
                        },
                        'option': {
                            color: '#32325d',
                        },
                    },
                },
            });
            const p24BankElement = elements.create('p24Bank', {
                style: {
                    base: {
                        padding: '10px 12px',
                        color: '#fff',
                        backgroundColor: 'black',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#fff',
                        },
                        'option': {
                            color: '#32325d',
                        },
                    },
                },
            });
            const epsElement = elements.create('epsBank', {
                style: {
                    base: {
                        padding: '10px 12px',
                        color: '#fff',
                        backgroundColor: 'black',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#fff',
                        },
                        'option': {
                            color: '#32325d',
                        },
                    },
                },
            });

            paymentOptions.forEach(function(option) {
                option.addEventListener('change', function() {
                    const selectedMethod = this.value;
                    document.querySelectorAll('.payment-method-form').forEach(function(form) {
                        form.style.display = 'none';
                    });
                    document.getElementById(selectedMethod).style.display = 'block';

                    function getAmount() {
                        var amountText = $("#totalPrice").text().trim();
                        var amount = parseFloat(amountText).toFixed(2);
                        return amount;
                    }

                    if (selectedMethod === 'card') {
                        // Recreate the Card Element
                        cardElement = elements.create('card', {
                            style: {
                                base: {
                                    padding: '10px 12px',
                                    color: '#fff',
                                    fontSize: '16px',
                                    '::placeholder': {
                                        color: '#fff',
                                    },
                                },
                            },
                            hidePostalCode: true
                        });
                        
                        cardElement.mount('#card-element');
                    } else if (selectedMethod === 'sepa_debit') {
                        ibanElement.mount('#sepa-element');
                    }else if (selectedMethod === 'eps') {
                        epsElement.mount('#eps-element');
                    } else if (selectedMethod === 'ideal') {
                        idealElement.mount('#ideal-bank-element');
                    } else if (selectedMethod === 'p24') {
                        p24BankElement.mount('#p24-bank-element');
                    } else if (selectedMethod === 'paypal') {
                        cardElement.unmount();
                        cardElement.destroy();
                    }else if (selectedMethod === 'coinpayments') {
                        cardElement.unmount();
                        cardElement.destroy();
                    }
                });
            });

            const errorMessage = document.getElementById('error-message');
            // Handle form submission
            form.addEventListener('submit', async function(event) {
                event.preventDefault(); // Prevent the form from submitting
                
                // Ensure the input is formatted correctly on load if it has a value
                if (mobileInput.value) {
                    formatMobileNumber();
                }

                let isValid = true;
                let errorMessages = []; // Store all error messages

                // Check all required fields
                form.querySelectorAll('[required]').forEach(function(input) {
                    validateInput(input);
                    if (!input.value.trim()) {
                        switch (input.name) {
                            case "checkout[email]":
                                errorMessages.push("Email is required.");
                                break;
                            case "checkout[firstName]":
                                errorMessages.push("First name is required.");
                                break;
                            case "checkout[lastName]":
                                errorMessages.push("Last name is required.");
                                break;
                            case "checkout[country]":
                                errorMessages.push("Country is required.");
                                break;
                            case "checkout[address]":
                                errorMessages.push("Address is required.");
                                break;
                            case "checkout[postalCode]":
                                errorMessages.push("Postal code is required.");
                                break;
                            case "checkout[city]":
                                errorMessages.push("City is required.");
                                break;
                            case "checkout[state]":
                                errorMessages.push("State is required.");
                                break;
                        }
                        isValid = false;
                    }

                    // Check if email is valid
                    if (input.name === "checkout[email]" && input.value.trim()) {
                        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                        if (!emailRegex.test(input.value.trim())) {
                            errorMessages.push("Please enter a valid email address.");
                            isValid = false;
                        }
                    }
                });


                if (!containsValidCharacters(mobileInput.value)) {
                    validationMessage = 'Phone number contains invalid characters. Please enter only digits and the "+" symbol.';
                    errorMessages.push(validationMessage); // Store the validation message

                    // Correct the innerHTML assignment
                    mobileErrorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i>  ' + validationMessage;
                    mobileErrorMessageDiv.style.color = 'red';
                    mobileErrorMessageDiv.style.display = 'block'; // Ensure the message is visible
                    isValid = false;

                    // Add invalid class and remove valid class if present
                    $('#checkout_mobileno').removeClass('is-valid').addClass('is-invalid');
                    
                }else if (!iti.isValidNumber()) {
                    // Check if there's a validation error code from intl-tel-input
                    const validationErrorCode = iti.getValidationError();

                    // Map the error code to a message, or fallback to "Invalid number"
                    const mobilenoErrorMessage = (validationErrorCode !== -1 && errorMap[validationErrorCode]) 
                        ? errorMap[validationErrorCode] 
                        : "Invalid mobile number";

                    errorMessages.push(mobilenoErrorMessage);
                    // Update the error message in the error div
                    mobileErrorMessageDiv.innerHTML = '<i class="fas fa-exclamation-circle text-denger"></i>  ' + mobilenoErrorMessage;
                    mobileErrorMessageDiv.style.color = 'red';
                    mobileErrorMessageDiv.style.display = 'block'; // Ensure the message is visible

                    // Add invalid class and remove valid class if present
                    $('#checkout_mobileno').removeClass('is-valid').addClass('is-invalid');
                    
                    isValid = false;

                }else{
                    // Clear the error message if the number is valid
                    mobileErrorMessageDiv.innerHTML = '<i class="fas fa-check-circle text-success"></i> Success';
                    mobileErrorMessageDiv.style.display = 'block'; // Show the success div
                    mobileErrorMessageDiv.style.color = 'green';
                    $('#checkout_mobileno').removeClass('is-invalid').addClass('is-valid');
                }

                if (!validateCheckbox(termsCheckbox, document.getElementById("termsError"))) {
                    errorMessages.push("You must agree to the terms and conditions.");
                    isValid = false;
                }

                // validation only for paid plan.
                if(productRegularPrice > 0){
                    // Validate payment options
                    if (!validatePaymentOption()) {
                        errorMessages.push("Please select a payment option.");
                        isValid = false;
                    }

                    if (!validatePaymentMethodFields()) {
                        errorMessages.push("Some payment fields are missing or incorrect.");
                        isValid = false;
                    }
                }
              

                {% if isRefUser is not null and isRefUser == false %}
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'You have using wrong ref link for purchase. This ref link user does not exist!',
                });
                {% endif %}


                if (isValid) {
                    $('.errors-message').html('');
                    const selectedDuration = '{{ duration }}';
                    mobileInput.value = iti.getNumber();
                    let paymentMethodId;

                    // Show a loading modal before sending the request
                    Swal.fire({
                        title: 'Processing...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    try {
                        if(productRegularPrice > 0){
                            const selectedPaymentMethod = document.querySelector('input[name="checkout[payment_option]"]:checked').value;
                            if (selectedPaymentMethod === 'paypal') { // This is for paypal
                                const planId = '{{ subscriptionPlanPaypalId }}';
                                const response = await fetch('{{ path("create_paypal_subscription") }}', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token('create_subscription') }}'
                                    },
                                    body: JSON.stringify({
                                        email: $("#checkout_email").val(),
                                        first_name: $("#checkout_firstName").val(),
                                        last_name: $("#checkout_lastName").val(),
                                        company_name: $("#checkout_companyName").val(),
                                        country: $("#checkout_country").val(),
                                        address: $("#checkout_address").val(),
                                        postal_code: $("#checkout_postalCode").val(),
                                        city: $("#checkout_city").val(),
                                        state: $("#checkout_state").val(),
                                        phone_no: $("#checkout_mobileno").val(),
                                        discount_price: "{{ discountedPrice }}",
                                        payment_method_id: paymentMethodId,
                                        product_paypal_price_id: '{{ product_paypal_price_id }}',
                                        duration: selectedDuration,
                                        product_sku: "{{ product.getSku }}",
                                        payment_method_type: selectedPaymentMethod,
                                        product_id: "{{ product.getId }}",
                                        notes: $("#checkout_notes").val(),
                                        payment_option: selectedPaymentMethod, // Assuming payment_option should be set to the selectedPaymentMethod
                                        auto_renewal: auto_revenue,
                                        payerID: document.getElementById('payerID').value,
                                        discount: "{{ discount }}"
                                    })
                                });

                                const data = await response.json();

                                if (data.approval_url) {
                                    window.location.href = data.approval_url;
                                } else {
                                    throw new Error('Failed to create PayPal subscription');
                                }
                                return;
                            } else {  // this is for stripe
                                let paymentMethodParams = {};
                                switch (selectedPaymentMethod) {
                                    case 'card':
                                        paymentMethodParams = {
                                            type: 'card',
                                            card: cardElement,
                                        };
                                        break;
                                    case 'sepa_debit':
                                        paymentMethodParams = {
                                            type: 'sepa_debit',
                                            sepa_debit: ibanElement,
                                            billing_details: {
                                                name: $("#checkout_firstName").val() + ' ' + $("#checkout_lastName").val(),
                                                email: $("#checkout_email").val(),
                                            },
                                        };
                                        break;
                                    case 'link':
                                        paymentMethodParams = {
                                            type: 'link',
                                            link: linkElement,
                                            billing_details: {
                                                email: $("#checkout_email").val(),
                                            },
                                        };
                                        break;
                                    case 'payple':
                                        const planId = '{{ subscriptionPlanPaypalId }}'; // Make sure this is available in your template
                                        fetch('/create-paypal-subscription', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json'
                                            },
                                            body: JSON.stringify({
                                                plan_id: planId
                                            })
                                        })
                                            .then(response => response.json())
                                            .then(data => {
                                                if (data.approval_url) {
                                                    window.location.href = data.approval_url;
                                                } else {
                                                    console.error('Error creating PayPal subscription:', data.error);
                                                }
                                            })
                                            .catch(error => console.error('Error creating PayPal subscription:', error));
                                        return;
                                    case 'bancontact':
                                    case 'eps':
                                    case 'giropay':
                                    case 'ideal':
                                    case 'p24':
                                    case 'sofort':
                                    case 'alipay':
                                        // Immediate confirmation methods
                                        paymentMethodParams = {
                                            type: selectedPaymentMethod,
                                            billing_details: {
                                                name: $("#checkout_firstName").val() + ' ' + $("#checkout_lastName").val(),
                                                email: $("#checkout_email").val(),
                                            },
                                        };
                                        break;
                                    default:
                                        // Handle unsupported payment method
                                        throw new Error('Unsupported payment method');
                                }
                                const { error, paymentMethod } = await stripe.createPaymentMethod(paymentMethodParams);

                                if (error) {
                                    // Hide loading modal on success
                                    Swal.close();

                                    cardErrorMessage = error.message;
                                    if(error.code = "invalid_number"){
                                        cardErrorMessage = 'The card number you entered is invalid. Please check the number and try again.';
                                    }
                                    // Create and show the notification
                                    Swal.fire({
                                        title: 'Error',
                                        text: cardErrorMessage,
                                        icon: 'error',
                                        confirmButtonText: 'OK',
                                      
                                    });

                                    return;
                                }
                                paymentMethodId = paymentMethod.id;

                                try {
                                    // Make a request to create the subscription
                                    const subscriptionResponse = await fetch('{{ path("create_subscription") }}', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token('create_subscription') }}'
                                        },
                                        body: JSON.stringify({
                                            // Include subscription data
                                            email: $("#checkout_email").val(),
                                            first_name: $("#checkout_firstName").val(),
                                            last_name: $("#checkout_lastName").val(),
                                            company_name: $("#checkout_companyName").val(),
                                            country: $("#checkout_country").val(),
                                            address: $("#checkout_address").val(),
                                            postal_code: $("#checkout_postalCode").val(),
                                            city: $("#checkout_city").val(),
                                            state: $("#checkout_state").val(),
                                            phone_no: $("#checkout_mobileno").val(),
                                            discount_price: "{{ discountedPrice }}",
                                            payment_method_id: paymentMethodId,
                                            product_stripe_price_id: '{{ product_stripe_price_id }}',
                                            duration: selectedDuration,
                                            product_sku: "{{ product.getSku }}",
                                            payment_method_type: '',
                                            product_id: "{{ product.getId }}",
                                            notes: $("#checkout_notes").val(),
                                            payment_option: selectedPaymentMethod, // Assuming payment_option should be set to the selectedPaymentMethod
                                            auto_renewal: auto_revenue,
                                            payerID: document.getElementById('payerID').value,
                                            discount: "{{ discount }}"
                                        })
                                    });

                                    // Process the response from the server
                                    const responseData = await subscriptionResponse.json();
                                    if (!subscriptionResponse.ok) {
                                        Swal.close();

                                        // Handle errors during subscription creation
                                        Swal.fire({
                                            title: 'Error',
                                            text: responseData.error,
                                            icon: 'error',
                                            confirmButtonText: 'OK',
                                        });
                                    }

                                    // Hide loading modal on success
                                    Swal.close();

                                    // Check if the subscription was successfully created
                                    if (responseData.status === 'success') {
                                        if (selectedPaymentMethod === 'card') {
                                            const clientSecret = responseData.clientSecret;
                                            const { error: confirmError, paymentIntent } = await stripe.confirmCardPayment(clientSecret);
                                            if (confirmError) {
                                                Swal.close();
                                                new Noty({ text: confirmError.message, type: 'error' }).show();
                                                return;
                                            }
                                            if (paymentIntent.status === 'succeeded') {
                                                new Noty({ text: responseData.message, type: 'success' }).show();
                                                window.location.href = responseData.redirct_url;
                                            } else if (paymentIntent.status === 'requires_action') {
                                                new Noty({ text: 'Authentication required. Please complete 3D Secure.', type: 'info' }).show();
                                                // 3D Secure step is needed (Stripe handles the authentication popup automatically)
                                            }
                                        } else if(selectedPaymentMethod === "sepa_debit"){
                                            const clientSecret = responseData.clientSecret;
                                            const confirmIntent = responseData.type === 'setup' ? stripe.confirmSepaDebitSetup : stripe.confirmSepaDebitPayment;

                                            const { error: confirmError } = await confirmIntent(clientSecret, {
                                                payment_method: {
                                                    sepa_debit: ibanElement,
                                                    billing_details: {
                                                        name: $("#checkout_firstName").val() + ' ' + $("#checkout_lastName").val(),
                                                        email: $("#checkout_email").val(),
                                                    },
                                                },
                                            });
                                        }

                                        // Show success notification
                                        new Noty({
                                            text: responseData.message,
                                            type: responseData.status
                                        }).show();

                                        window.location.href = responseData.redirct_url;
                                        // Redirect to the product view page
                                    } else {
                                        // Show error notification
                                        Swal.fire({
                                            title: 'Error',
                                            text: responseData.error || 'An unknown error occurred',
                                            icon: 'error',
                                            confirmButtonText: 'OK',
                                        });
                                    }
                                } catch (error) {
                                    // Hide loading modal on error
                                    Swal.close();

                                    // Handle errors during subscription creation
                                    console.error('Error creating subscription:', error.message);
                                    Swal.fire({
                                        title: 'Error',
                                        text: 'There was an error creating your subscription: ' + error.message,
                                        icon: 'error',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            }
                        }else{
                            // Handle the case when productRegularPrice <= 0
                            const subscriptionResponse = await fetch('{{ path("create_subscription") }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token('create_subscription') }}'
                                },
                                body: JSON.stringify({
                                    email: $("#checkout_email").val(),
                                    first_name: $("#checkout_firstName").val(),
                                    last_name: $("#checkout_lastName").val(),
                                    company_name: $("#checkout_companyName").val(),
                                    country: $("#checkout_country").val(),
                                    address: $("#checkout_address").val(),
                                    postal_code: $("#checkout_postalCode").val(),
                                    city: $("#checkout_city").val(),
                                    state: $("#checkout_state").val(),
                                    phone_no: $("#checkout_mobileno").val(),
                                    discount_price: "{{ discountedPrice }}",
                                    payment_method_id: '',
                                    product_stripe_price_id: '{{ product_stripe_price_id }}',
                                    duration: selectedDuration,
                                    product_sku: "{{ product.getSku }}",
                                    payment_method_type: '',
                                    product_id: "{{ product.getId }}",
                                    notes: $("#checkout_notes").val(),
                                    payment_option: '',
                                    auto_renewal: '',
                                    payerID: document.getElementById('payerID').value,
                                    discount: "{{ discount }}"
                                })
                            });

                            if (!subscriptionResponse.ok) {
                                throw new Error('Failed to create subscription');
                            }

                            const responseData = await subscriptionResponse.json();
                            Swal.close();
                            // Check if the subscription was successfully created
                            if (responseData.status === 'success') {
                                // Show success notification
                                new Noty({
                                    text: responseData.message,
                                    type: responseData.status
                                }).show();

                                window.location.href = responseData.redirct_url;
                                // Redirect to the product view page
                            } else {
                                Swal.close();
                                Swal.fire({
                                    title: 'Notice',
                                    html: `
                                        <div style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
                                            <p style="margin: 0; text-align: center;">You are not eligible to purchase the Free Plan as it has already been claimed once or you have previously purchased a Paid Plan.</p>
                                        </div>
                                    `,
                                    icon: 'warning',
                                    confirmButtonText: 'Got It',
                                });
                            }
                        }
                       
                    } catch (error) {
                        // Hide loading modal on error
                        Swal.close();
                        Swal.fire({
                            title: 'Error',
                            text: 'There was an error creating the payment method: ' + error.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                        return;
                    }
                }else {
                    // Show error notification with a list of issues
                    displayErrorNotification(errorMessages);
                }
            });
        });

    
        // Display the Validation message on the Top of the window.
        function displayErrorNotification(errors) {
            const errorIcons = {
                "Email is required.": '<i class="fas fa-envelope" style="color: #007bff;"></i>', // Blue
                "First name is required.": '<i class="fas fa-user" style="color: #28a745;"></i>', // Green
                "Last name is required.": '<i class="fas fa-user" style="color: #28a745;"></i>', // Green
                "Country is required.": '<i class="fas fa-globe" style="color: #17a2b8;"></i>', // Cyan
                "Address is required.": '<i class="fas fa-map-marker-alt" style="color: #ffc107;"></i>', // Yellow
                "Postal code is required.": '<i class="fas fa-envelope-open-text" style="color: #fd7e14;"></i>', // Orange
                "City is required.": '<i class="fas fa-city" style="color: #6f42c1;"></i>', // Purple
                "State is required.": '<i class="fas fa-flag" style="color: #20c997;"></i>', // Teal
                "Invalid mobile number": '<i class="fas fa-phone" style="color: #dc3545;"></i>', // Red
                "You must agree to the terms and conditions.": '<i class="fas fa-check-circle" style="color: #28a745;"></i>', // Green
                "Please select a payment option.": '<i class="fas fa-credit-card" style="color: #6610f2;"></i>', // Indigo
                'Phone number contains invalid characters. Please enter only digits and the "+" symbol.': '<i class="fas fa-phone" style="color: #dc3545;"></i>', // Indigo
                'Invalid country of mobile number code.': '<i class="fas fa-phone" style="color: #dc3545;"></i>', // Indigo
                'Mobile number is too short.': '<i class="fas fa-phone" style="color: #dc3545;"></i>', // Indigo
                'Mobile number is too long.': '<i class="fas fa-phone" style="color: #dc3545;"></i>', // Indigo
            };

            const notificationDiv = document.createElement('div');
            notificationDiv.classList.add('error-notification');
            notificationDiv.style.backgroundColor = '#2c2c2c'; // Dark gray for contrast
            notificationDiv.style.borderRadius = '8px'; // Rounded corners
            notificationDiv.style.padding = '15px';
            notificationDiv.style.color = '#ff0000'; // Red text for errors
            notificationDiv.style.fontWeight = 'bold';
            notificationDiv.style.margin = '15px';
            notificationDiv.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)'; // Subtle shadow
            notificationDiv.style.fontFamily = 'Arial, sans-serif'; // Clean font
            notificationDiv.innerHTML = `
                <strong style="color: #ff0000;">⚠️ Oops! There are some issues with your order:</strong>
                <ul style="margin-top: 10px; padding-left: 20px; color: #ff0000;">
                    ${errors.map(error => `
                        <li style="margin-bottom: 5px; display: flex; align-items: center;">
                            <span style="margin-right: 10px;">${errorIcons[error] || '<i class="fas fa-exclamation-circle" style="color: #ff0000;"></i>'}</span>
                            <span style="color: #ff0000;">${error}</span>
                        </li>`).join('')}
                </ul>
            `;

            // Append the notification to the errors-message container
            const errorContainer = document.querySelector('.errors-message');
            if (errorContainer) {
                errorContainer.innerHTML = ''; // Clear any previous errors
                errorContainer.appendChild(notificationDiv);
            }

            // Find the position of the error notification div
            const notificationTop = notificationDiv.offsetTop;

            if ($('.error-notification').length) {
                // Scroll to the error-notification element
                $('html, body').animate({
                    scrollTop: $('.error-notification').offset().top
                }, 500); // Adjust the scrolling speed (500ms in this example)

                // Optionally, highlight the error-notification for better visibility
                $('.error-notification').fadeOut(200).fadeIn(200);
            }
        }

    </script>
{% endblock %}