{% if oct_byoneclick_status is defined and oct_byoneclick_status %}
<link rel="stylesheet" href="catalog/view/theme/oct_promo/stylesheet/intlTelInput.css" />
<script src="catalog/view/theme/oct_promo/js/intlTelInput.min.js"></script>
<div class="pr-buyoneclick p-0">
    <span class="dark-text fsz-14 fw-700">{{ oct_product_oneclick }}</span>
    <form action="javascript:;" id="oct_purchase_byoneclick_form{{ oct_byoneclick_page }}" method="post" class="d-flex flex-column flex-lg-row align-items-stretch gap-3 mt-2">
        <div class="input-group">
            <input type="tel" inputmode="numeric" name="mask_telephone_display" placeholder="{{ oct_product_oneclick_placeholder }}" id="one_click_input_{{ oct_byoneclick_page }}" class="one_click_input form-control" value="{{ user_telephone|default('') }}" />
            <input type="hidden" id="one_click_telephone_{{ oct_byoneclick_page }}" name="telephone" value="{{ user_telephone|default('') }}" />
            {% if oct_byoneclick_product_id is defined and oct_byoneclick_product_id %}
                <input type="hidden" name="product_id" value="{{ oct_byoneclick_product_id }}" />
            {% endif %}
            <input type="hidden" name="oct_byoneclick" value="1" />
            <input type="hidden" name="popup_csrf_token" value="{{ popup_csrf_token }}" />
            {% if oct_cart_in is defined and oct_cart_in %}
                <input type="hidden" name="oct_cart_in" value="1" />
            {% endif %}
            <button class="button button-light pr-buy-one-click-btn pr-product-one-click-btn" type="button" aria-label="Send">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                    <path d="M15.8332 4.66663L14.1665 6.33329M11.2498 2.99996V5.08329M17.4998 9.24996H15.4165M12.2917 14.2397L13.5675 12.9638C14.092 12.4393 14.8933 12.3093 15.5567 12.641L17.3803 13.5528C18.1632 13.9443 18.5283 14.8605 18.2291 15.6831L17.4864 17.7257C17.2181 18.4635 16.4817 18.9337 15.7056 18.815C7.87071 17.6173 2.88254 12.6291 1.68478 4.79415C1.56614 4.01808 2.03626 3.28174 2.77408 3.01344L4.81671 2.27067C5.63934 1.97153 6.55554 2.33662 6.947 3.11953L7.85877 4.94308C8.19049 5.60652 8.06046 6.40781 7.53596 6.93231L6.26013 8.20814C7.12177 10.7931 9.70671 13.378 12.2917 14.2397Z" stroke="#0C296A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="button-text">{{ oct_product_oneclickbuy }}</span>
            </button>
        </div>
    </form>
</div>
{% if phone_masks is defined and phone_masks %}
    <script>
        (function() {
            const pageId = '{{ oct_byoneclick_page }}';
            const defaultCountry = '{{ default_phone_country|default("ua") }}';
            const phoneMasksData = (() => {
                try {
                    return {{ phone_masks|raw }};
                } catch (e) {
                    console.warn('Failed to parse phone masks:', e);
                    return {};
                }
            })();
            
            const allowedCountriesData = (() => {
                try {
                    return {{ allowed_countries|raw }};
                } catch (e) {
                    console.warn('Failed to parse allowed countries:', e);
                    return [];
                }
            })();

            if (!window.byoneclickConfigs) {
                window.byoneclickConfigs = {};
            }
            
            window.byoneclickConfigs[pageId] = {
                defaultCountry: defaultCountry,
                phoneMasksData: phoneMasksData,
                allowedCountriesData: allowedCountriesData,
                itiInstance: null
            };

            function updatePhoneField(pageId) {
                const config = window.byoneclickConfigs[pageId];
                if (!config || !config.itiInstance) return '';
                
                const telInput = document.querySelector('#one_click_input_' + pageId);
                if (!telInput) return '';
                
                const selectedCountryData = config.itiInstance.getSelectedCountryData();
                const dialCode = selectedCountryData.dialCode || '';
                let rawValue = telInput.value.replace(/\D/g, '');
                
                if (rawValue.length > 15) {
                    rawValue = rawValue.substring(0, 15);
                }
                
                const fullNumber = rawValue ? '+' + dialCode + rawValue : '';
                const hiddenField = document.querySelector('#one_click_telephone_' + pageId);
                if (hiddenField) {
                    hiddenField.value = fullNumber;
                }
                return fullNumber;
            }

            function applyInputMask(pageId) {
                const config = window.byoneclickConfigs[pageId];
                if (!config || !config.itiInstance) return;
                
                const telInput = document.querySelector('#one_click_input_' + pageId);
                if (!telInput) return;

                const countryData = config.itiInstance.getSelectedCountryData();
                const countryCode = countryData.iso2 || 'ua';
                let maskData = config.phoneMasksData[countryCode];
                let mask = null;
                
                if (maskData && typeof maskData === 'object' && maskData.mask) {
                    mask = maskData.mask;
                } else if (typeof maskData === 'string') {
                    mask = maskData;
                }
                
                if (!mask) {
                    const defaultMasks = {
                        'ua': '99 999 99 99',
                        'pl': '999 999 999',
                        'us': '(999) 999-9999',
                        'ca': '(999) 999-9999',
                        'gb': '99999 999999',
                        'de': '9999 99999999',
                        'fr': '9 99 99 99 99',
                        'it': '999 999 9999',
                        'es': '999 99 99 99',
                        'ru': '(999) 999-99-99',
                        'by': '(99) 999-99-99',
                    };
                    mask = defaultMasks[countryCode];
                }
                
                if (!mask) {
                    const dialCodeLength = countryData.dialCode.length;
                    if (dialCodeLength === 1) {
                        mask = '(999) 999-9999';
                    } else if (dialCodeLength === 2) {
                        mask = '99 999 99 99';
                    } else {
                        mask = '999 999 9999';
                    }
                }

                $(telInput).inputmask('remove');
                $(telInput).inputmask({
                    mask: mask,
                    clearMaskOnLostFocus: false,
                    onincomplete: function() {
                        updatePhoneField(pageId);
                    },
                    oncomplete: function() {
                        updatePhoneField(pageId);
                    },
                    oncleared: function() {
                        updatePhoneField(pageId);
                    }
                });

                const placeholderText = mask.replace(/9/g, '_');
                telInput.setAttribute('placeholder', placeholderText);
            }

            function initIntlTelInput(pageId) {
                const config = window.byoneclickConfigs[pageId];
                if (!config) return;
                
                const telInput = document.querySelector('#one_click_input_' + pageId);
                if (!telInput) return;
                
                if (telInput.classList.contains('iti__tel-input')) {
                    return;
                }

                if (config.itiInstance) {
                    config.itiInstance.destroy();
                }

                const itiOptions = {
                    initialCountry: config.defaultCountry,
                    separateDialCode: true,
                    useFullscreenPopup: pageId === '_product'
                };

                if (config.allowedCountriesData && config.allowedCountriesData.length > 0) {
                    itiOptions.onlyCountries = config.allowedCountriesData;
                    
                    if (config.allowedCountriesData.length === 1) {
                        itiOptions.allowDropdown = false;
                    }
                }

                config.itiInstance = window.intlTelInput(telInput, itiOptions);
                applyInputMask(pageId);

                const hiddenField = document.querySelector('#one_click_telephone_' + pageId);
                if (hiddenField && hiddenField.value) {
                    const phoneNumber = hiddenField.value;
                    if (config.itiInstance.isValidNumber()) {
                        config.itiInstance.setNumber(phoneNumber);
                        applyInputMask(pageId);
                        updatePhoneField(pageId);
                    }
                }

                telInput.addEventListener('input', function(e) {
                    updatePhoneField(pageId);
                });

                telInput.addEventListener('paste', function(e) {
                    setTimeout(function() {
                        updatePhoneField(pageId);
                    }, 10);
                });

                telInput.addEventListener('countrychange', function() {
                    applyInputMask(pageId);
                    updatePhoneField(pageId);
                });

                telInput.addEventListener('blur', function() {
                    updatePhoneField(pageId);
                });
            }

            if (!window.initializePhoneMask) {
                window.initializePhoneMask = function() {
                    if (window.byoneclickConfigs) {
                        Object.keys(window.byoneclickConfigs).forEach(function(configPageId) {
                            setTimeout(function() {
                                initIntlTelInput(configPageId);
                            }, 100);
                        });
                    }
                };
            }

            $(document).ready(function() {
                setTimeout(function() {
                    initIntlTelInput(pageId);
                }, 100);
            });
        })();
    </script>
{% endif %}

<script>
(function() {
	if (!window.byoneclickSmsTimerInterval) {
		window.byoneclickSmsTimerInterval = null;
	}

	function startSmsTimer(seconds, isBlocking = false) {
		clearInterval(window.byoneclickSmsTimerInterval);
		let remaining = seconds;

		if (isBlocking) {
			$('#sms-timer-byoneclick').hide();
			$('#btn-verify-sms-byoneclick').prop('disabled', true);
			$('#btn-resend-sms-byoneclick').prop('disabled', true);
			$('#sms-code-input-byoneclick').prop('disabled', true).val('');
			$('#sms-error-byoneclick').removeClass('d-none alert-danger').addClass('alert-warning');
		}

		window.byoneclickSmsTimerInterval = setInterval(function() {
			if (isBlocking) {
				$('#sms-error-byoneclick').html('{{ error_sms_max_attempts|escape('js') }}'.replace('%s', '<strong>' + remaining + '</strong>'));
			} else {
				$('#timer-seconds-byoneclick').text(remaining);
			}
			
			remaining--;

			if (remaining <= 0) {
				clearInterval(window.byoneclickSmsTimerInterval);
				window.byoneclickSmsTimerInterval = null;
				
				if (isBlocking) {
					$('#sms-error-byoneclick').addClass('d-none');
				} else {
					$('#sms-timer-byoneclick').hide();
					$('#sms-error-byoneclick').addClass('d-none');
				}
				
				$('#btn-resend-sms-byoneclick').prop('disabled', false);
				$('#btn-verify-sms-byoneclick').prop('disabled', false);
				$('#sms-code-input-byoneclick').prop('disabled', false).val('').focus();
			}
		}, 1000);
	}

	$('#smsVerificationModalByoneclick').on('shown.bs.modal', function() {
		$('#sms-code-input-byoneclick').val('').prop('disabled', false);
		$('#btn-verify-sms-byoneclick').prop('disabled', false);
		$('#sms-error-byoneclick').addClass('d-none');
		
		setTimeout(function() {
			const input = document.getElementById('sms-code-input-byoneclick');
			if (input) {
				input.focus();
				if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
					input.setSelectionRange(0, 0);
				}
			}
		}, 400);
	});

	$('#smsVerificationModalByoneclick').on('hidden.bs.modal', function () {
		clearInterval(window.byoneclickSmsTimerInterval);
		window.byoneclickSmsTimerInterval = null;
	});

	$(document).on('click', '#btn-verify-sms-byoneclick', function() {
		const code = $('#sms-code-input-byoneclick').val().trim();
		
		if (code.length !== 4) {
			$('#sms-error-byoneclick').removeClass('d-none alert-warning').addClass('alert-danger').text('{{ error_sms_code_length|escape('js') }}');
			return;
		}
		
		$.ajax({
			url: 'index.php?route=octemplates/module/oct_popup_purchase/verifySmsCode',
			type: 'post',
			data: {
				sms_code: code,
				popup_csrf_token: $('input[name="popup_csrf_token"]').val()
			},
			dataType: 'json',
			beforeSend: function() {
				$('#btn-verify-sms-byoneclick').prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
			},
			success: function(json) {
				$('#btn-verify-sms-byoneclick').html('{{ button_verify|escape('js') }}');
				
				if (json.error) {
					if (json.attempts_exceeded && json.retry_after) {
						startSmsTimer(json.retry_after, true);
					} else {
						$('#btn-verify-sms-byoneclick').prop('disabled', false);
						$('#sms-error-byoneclick').removeClass('d-none alert-warning').addClass('alert-danger').text(json.error);
					}
					return;
				}
				
				if (json.success) {
                	$('#btn-verify-sms-byoneclick').prop('disabled', false);
					$('#smsVerificationModalByoneclick').modal('hide');
					
					let successOption = `<div class="pr-popup-success d-flex flex-column align-items-center text-center p-4">
						<div class="mb-3">${json.success}</div>
						<div class="d-flex align-items-center justify-content-center mb-4">
							<svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" viewBox="0 0 164 164" fill="none" class="oct-success-svg">
								<rect class="oct-outer-circle" width="164" height="164" rx="82" fill="#E0FFE5"/>
								<rect class="oct-inner-circle" x="32" y="32" width="100" height="100" rx="50" fill="#4CD964"/>
								<path class="oct-checkmark" d="M100.04 68.6039L97.6421 66.6739C96.4601 65.7239 95.7731 65.7349 94.7611 66.9849L77.3321 88.4939L69.2211 81.7549C68.1021 80.8149 67.4021 80.8649 66.4821 82.0149L64.6311 84.4249C63.6921 85.6069 63.8121 86.2779 64.9221 87.2049L76.4821 96.7669C77.6721 97.7669 78.3421 97.6639 79.2621 96.5449L100.341 71.4839C101.331 70.2939 101.271 69.5829 100.04 68.6039Z" fill="white"/>
							</svg>
						</div>
					</div>`;

					$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} #one_click_input').val('');
					$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} #one_click_input').removeClass('error_style');
					$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn').prop('disabled', true);

					{% if oct_cart_in is defined and oct_cart_in %}
						setTimeout(function () {
							$('.pr-header-buttons-item-count-cart').html(0).removeClass('active');
						}, 100);

						{% if oct_cart_page is defined and oct_cart_page %}
							setTimeout(function () {
								document.location.reload(true);
							}, 3000);
						{% endif %}
					{% endif %}

					{% if oct_analytics_google_ecommerce is defined and oct_analytics_google_ecommerce is not empty %}
					if (typeof gtag != 'undefined' && json.ecommerce) {
						gtag('event', 'purchase', json.ecommerce);
					}
					{% endif %}

					let cartIdsHolder = document.querySelector("[data-cart-ids]");
					if (cartIdsHolder) {
						if (window.interactiveButtonsManager && window.interactiveButtonsManager.initialized) {
							{% if oct_cart_in is defined and oct_cart_in %}
								const currentCartIds = cartIdsHolder.dataset.cartIds ? cartIdsHolder.dataset.cartIds.split(',').filter(id => id.trim()) : [];
								currentCartIds.forEach(function(productId) {
									window.interactiveButtonsManager.remove(productId, 'cart');
								});
							{% elseif oct_byoneclick_product_id is defined and oct_byoneclick_product_id %}
								window.interactiveButtonsManager.remove('{{ oct_byoneclick_product_id }}', 'cart');
							{% endif %}
						}
						cartIdsHolder.dataset.cartIds = '';
					}

					{% if isPopup is defined and isPopup %}
						$('#modalCartBody').html(successOption);
						$('#cartSidebar .pr-sidebar-cart-top').attr('style', 'display: none !important');
					{% else %}
						let successModal = `
							<div class="modal fade" id="oct-modal" tabindex="-1" aria-labelledby="oct-modal" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered">
									<div class="modal-content">
										<div class="modal-header p-4 bg-grey">
											<h5 class="modal-title fsz-20 fw-700 d-flex align-items-center justify-content-between dark-text" id="oct-modal">{{ oct_product_oneclickbuy_success_title|escape('js') }}</h5>
											<button type="button" class="btn-close br-8 bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
										</div>
										<div class="modal-body p-4">
											${successOption}
										</div>
									</div>
								</div>
							</div>
						`;

						$('body').append(successModal);

						let $modal = $('#oct-modal');
						let $quickViewModal = $('#quickViewModal');

						if ($quickViewModal.length) {
							$quickViewModal.modal('hide');
						}

						$modal.modal('show');

						setTimeout(function () {
							$modal.modal('hide');
							setTimeout(function() {
								$('#oct-modal').remove();
							}, 300);
						}, 5000);

						$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }}').trigger('reset');
					{% endif %}
				}
			}
		});
	});

	$(document).on('click', '#btn-resend-sms-byoneclick', function() {
		$.ajax({
			url: 'index.php?route=octemplates/module/oct_popup_purchase/resendSmsCode',
			type: 'post',
			data: {
				popup_csrf_token: $('input[name="popup_csrf_token"]').val()
			},
			dataType: 'json',
			beforeSend: function() {
				$('#btn-resend-sms-byoneclick').prop('disabled', true);
			},
			success: function(json) {
				if (json.error) {
					$('#sms-error-byoneclick').removeClass('d-none').addClass('alert-danger').text(json.error);
					$('#btn-resend-sms-byoneclick').prop('disabled', false);
					return;
				}
				
				if (json.success) {
					$('#sms-error-byoneclick').addClass('d-none');
					$('#sms-code-input-byoneclick').val('').focus();
					prNotify('success', json.success);
					startSmsTimer(60, false);
				}
			}
		});
	});

	$(document).on('input', '#sms-code-input-byoneclick', function() {
		this.value = this.value.replace(/[^0-9]/g, '');
		
		if (this.value.length === 4) {
			setTimeout(function() {
				$('#btn-verify-sms-byoneclick').trigger('click');
			}, 300);
		}
	});

	$(document).on("change paste keyup", "#one_click_input_{{ oct_byoneclick_page }}", function() {
		$(this).removeClass('error_style');
	});

	$(document).off('click.byoneclick{{ oct_byoneclick_page }}').on('click.byoneclick{{ oct_byoneclick_page }}', '#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn', function(e) {
		e.preventDefault();
		e.stopImmediatePropagation();
		
		$.ajax({
			type: 'post',
			dataType: 'json',
			url: 'index.php?route=octemplates/module/oct_popup_purchase/makeorder',
			cache: false,
			data: $('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }}').serialize(),
			beforeSend: function() {
				masked('body', true);

				$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn').data('original-content', $('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn').html());
				$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').prop('disabled', true);
			},
			complete: function() {
				masked('body', false);

				setTimeout(function () {
					$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn').html($('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn').data('original-content')).prop('disabled', false);
				}, 600);
			},
			success: function(json) {
				if (json.sms_required || json.show_sms_modal) {
					$('.modal').not('#smsVerificationModalByoneclick').modal('hide');
					$('.pr-sidebar-cart').removeClass('active');
					$('header').removeClass('sidebar-opened');
					$('#overlay').removeClass('active');
					$('body').removeClass('overflow-hidden');
					
					const timerValue = json.timer || 60;
					
					$('#timer-seconds-byoneclick').text(timerValue);
					$('#sms-timer-byoneclick').show();
					$('#sms-code-input-byoneclick').val('').prop('disabled', false);
					$('#btn-verify-sms-byoneclick').prop('disabled', false);
					$('#btn-resend-sms-byoneclick').prop('disabled', true);
					$('#sms-error-byoneclick').addClass('d-none');
					
					startSmsTimer(timerValue, false);
					
					if (json.message) {
						prNotify('success', json.message);
					}
					
					$('#smsVerificationModalByoneclick').modal('show');
					
					setTimeout(function() {
						const input = document.getElementById('sms-code-input-byoneclick');
						if (input) {
							input.focus();
							if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
								input.setSelectionRange(0, 0);
							}
						}
					}, 400);
					
					return;
				}

				if (json.error) {
					let errorOption = '';

					$.each(json.error, function(i, val) {
						if (val) {
							$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} [name="' + i + '"]').addClass('error_style');
							errorOption += '<div class="alert-text-item">' + val + '</div>';
						}
					});

					prNotify('danger', errorOption);
				} else {
					if (json.success) {
						$(this).attr( "disabled", "disabled" );
						successOption = `<div class="pr-popup-success d-flex flex-column align-items-center text-center p-4">
							<div class="mb-3">${json.success}</div>
							<div class="d-flex align-items-center justify-content-center mb-4">
								<svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" viewBox="0 0 164 164" fill="none" class="oct-success-svg">
									<rect class="oct-outer-circle" width="164" height="164" rx="82" fill="#E0FFE5"/>
									<rect class="oct-inner-circle" x="32" y="32" width="100" height="100" rx="50" fill="#4CD964"/>
									<path class="oct-checkmark" d="M100.04 68.6039L97.6421 66.6739C96.4601 65.7239 95.7731 65.7349 94.7611 66.9849L77.3321 88.4939L69.2211 81.7549C68.1021 80.8149 67.4021 80.8649 66.4821 82.0149L64.6311 84.4249C63.6921 85.6069 63.8121 86.2779 64.9221 87.2049L76.4821 96.7669C77.6721 97.7669 78.3421 97.6639 79.2621 96.5449L100.341 71.4839C101.331 70.2939 101.271 69.5829 100.04 68.6039Z" fill="white"/>
								</svg>
							</div>
						</div>`;

						$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} #one_click_input').val('');
						$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} #one_click_input').removeClass('error_style');
						$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }} .pr-product-one-click-btn').prop('disabled', true);

						{% if oct_cart_in is defined and oct_cart_in %}
							setTimeout(function () {
								$('.pr-header-buttons-item-count-cart').html(0).removeClass('active');
							}, 100);

							{% if oct_cart_page is defined and oct_cart_page %}
								setTimeout(function () {
									document.location.reload(true);
								}, 3000);
							{% endif %}
						{% endif %}

						{% if oct_analytics_google_ecommerce is defined and oct_analytics_google_ecommerce is not empty %}
						if (typeof gtag != 'undefined' && json.ecommerce) {
							gtag('event', 'purchase', json.ecommerce);
						}
						{% endif %}

						let cartIdsHolder = document.querySelector("[data-cart-ids]");

						if (cartIdsHolder) {
							if (window.interactiveButtonsManager && window.interactiveButtonsManager.initialized) {
								{% if oct_cart_in is defined and oct_cart_in %}
									const currentCartIds = cartIdsHolder.dataset.cartIds ? cartIdsHolder.dataset.cartIds.split(',').filter(id => id.trim()) : [];
									currentCartIds.forEach(function(productId) {
										window.interactiveButtonsManager.remove(productId, 'cart');
									});
								{% elseif oct_byoneclick_product_id is defined and oct_byoneclick_product_id %}
									window.interactiveButtonsManager.remove('{{ oct_byoneclick_product_id }}', 'cart');
								{% endif %}
							}
							cartIdsHolder.dataset.cartIds = '';
						}

						{% if isPopup is defined and isPopup %}
							$('#modalCartBody').html(successOption);
							$('#cartSidebar .pr-sidebar-cart-top').attr('style', 'display: none !important');
						{% else %}
							let successModal = `
								<div class="modal fade" id="oct-modal" tabindex="-1" aria-labelledby="oct-modal" aria-hidden="true">
									<div class="modal-dialog modal-dialog-centered">
										<div class="modal-content">
											<div class="modal-header p-4 bg-grey">
												<h5 class="modal-title fsz-20 fw-700 d-flex align-items-center justify-content-between dark-text" id="oct-modal">{{ oct_product_oneclickbuy_success_title|escape('js') }}</h5>
												<button type="button" class="btn-close br-8 bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
											</div>
											<div class="modal-body p-4">
												${successOption}
											</div>
										</div>
									</div>
								</div>
							`;

							$('body').append(successModal);

							let $modal = $('#oct-modal');
							let $quickViewModal = $('#quickViewModal');

							if ($quickViewModal.length) {
								$quickViewModal.modal('hide');
							}

							$modal.modal('show');

							setTimeout(function () {
								$modal.modal('hide');
								setTimeout(function() {
									$('#oct-modal').remove();
								}, 300);
							}, 5000);

							$('#oct_purchase_byoneclick_form{{ oct_byoneclick_page }}').trigger('reset');
						{% endif %}
					}
				}
			}
		});
	});
})();
</script>
{% endif %}

<div class="modal fade" id="smsVerificationModalByoneclick" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header p-4 bg-grey">
				<h5 class="modal-title fsz-20 fw-700 d-flex align-items-center justify-content-between dark-text" id="smsModalLabelByoneclick">{{ text_sms_verify_title }}</h5>
				<button type="button" class="btn-close br-8 bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<p class="mb-3 dark-text">{{ text_sms_verify_desc }}</p>
				<div class="mb-3">
					<input type="text" 
						id="sms-code-input-byoneclick" 
						class="form-control text-center fs-4" 
						maxlength="4" 
						placeholder="0000" 
						inputmode="numeric" 
						pattern="[0-9]*" 
						autocomplete="one-time-code"
						aria-label="{{ text_sms_code }}">
				</div>
				<div id="sms-error-byoneclick" class="alert alert-danger d-none"></div>
				<div id="sms-timer-byoneclick" class="text-center grey-text fsz-14 mb-3">
					{{ text_resend_in }} <span id="timer-seconds-byoneclick" class="fw-600 text-danger mx-1">60</span> {{ text_seconds }}
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="button button-primary button-large w-100 py-3 fsz-14" id="btn-verify-sms-byoneclick">{{ button_verify }}</button>
				<button type="button" class="button button-secondary w-100 mt-2" id="btn-resend-sms-byoneclick" disabled>{{ button_resend }}</button>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function() {
    $('body').children('#smsVerificationModalByoneclick').remove();
    $('#smsVerificationModalByoneclick').appendTo('body');
});
</script>