// popup handling
    const buttons = document.querySelectorAll('.purchase-journey-showPopup');
    const bundle = document.getElementById("purchase-journey-bundle");
    const verify = document.getElementById("purchase-journey-verify");
    const verifyButton = document.getElementById("purchase-journey-verify-button");
    const success = document.getElementById("purchase-journey-success");
		const verifyBtn = document.getElementById('purchase-journey-verify-button');
		
		const loadingScreen = document.getElementById('purchase-journey-load');
    const successJourney = document.getElementById('purchase-journey-success');
    const bundleValueElement = document.getElementById('bundleValue');
    const purchaseJourneyInsufficient = document.getElementById('purchase-journey-insufficient');
    const purchaseJourneyUnavailable = document.getElementById('purchase-journey-unavailable');

    const purchaseButton = document.getElementById(
        "purchase-journey-purchase-button"
    );
    let bundleData = {
        title: '',
        value: '',
        period: '',
        dataLimit: '',
        youtubeLimit: '',
				ooredooNetworkLimit: '',
				otherNetworkLimit: '',
        code: '',
    };
		function removeHtmlTags(text) {
			// Create a regular expression to match HTML tags
			const regex = /<[^>]*>/g;

			// Replace all HTML tags with an empty string
			return text.replace(regex, '');
		}
    function openMainPopupWindow(data) {
	       //window.location.href = "https://my.ooredoo.dz/ODZ_Login/faces/login.jsp?contextType=external&username=string&enablePersistentLogin=true&password=secure_string&challenge_url=https%3A%2F%2Fmy.ooredoo.dz%2FODZ_Login%2Ffaces%2Flogin.jsp&request_id=-4287332604637802565&authn_try_count=0&locale=en_US&resource_url=https%253A%252F%252Fmy.ooredoo.dz%252FPortal%252FadfAuthentication%253Fsuccess_url%253D%25252FPortal%25252Ffaces%25252Foracle%25252Fwebcenter%25252Fportalapp%25252Fpages%25252Fhome.jspx%25253F_afrLoop%25253D13297495548784486&_adf.ctrl-state=tgz2gpyby_1&_afrLoop=13298101173822228&_afrWindowMode=0&_afrWindowId=null";
				  window.location.href = "https://choof.ooredoo.dz/";
					return;
        console.log("purchase-journey-button-openMainPopupWindow-click", data);
        const dataLimit = document.querySelector('.sub-offer-title-1-' + data.code).value;
				
				setCookie('code', data.code);
				setCookie('bundleValue', data.price.split('<br>')[0]);
        
        bundleData = {
            title: data.title,
            value: data.price.split('<br>')[0],
            period: removeHtmlTags(data.price.split('<br>')[1]),
            dataLimit: data.dataLimit && data.dataLimit != 'null' ? data.dataLimit : '-',
            creditLimit: data.creditLimit && data.creditLimit != 'null' ? data.creditLimit : '-',
            youtubeLimit: data.youtubeLimit && data.youtubeLimit != 'null' ? data.youtubeLimit : '-',
						ooredooNetworkLimit: data.ooredooNetworkLimit && data.ooredooNetworkLimit != 'null' ? data.ooredooNetworkLimit : '-',
						otherNetworkLimit: data.otherNetworkLimit && data.otherNetworkLimit != 'null' ? data.otherNetworkLimit : '-',
            code: data.code
        };
        const bundleTitle = document.querySelector('.bundle-title');
        const bundleValue = document.querySelector('.bundle-value');
        const bundlePeriod = document.querySelector('.bundle-period');
        const bundleDataLimit = document.querySelector('.bundle-data-limit');
        const bundleMoney = document.querySelector('.bundle-money');
        const bundleYoutubeLimit = document.querySelector('.bundle-youtube-limit');
        const bundleOALimit = document.querySelector('.bundle-oa-limit');
        const bundleONLimit = document.querySelector('.bundle-on-limit');

        if (bundleData.title !== '-') {
            bundleTitle.innerHTML = bundleData.title;
            bundleTitle?.parentNode?.style.setProperty('display', 'block', 'important');
            bundleTitle?.parentNode?.previousElementSibling?.style.setProperty('display', 'block', 'important');
        } else {
            bundleTitle?.parentNode?.style.setProperty('display', 'none', 'important');
            bundleTitle?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
            
        }

        if (bundleData.value !== '-') {
            bundleValue.innerHTML = bundleData.value;
            bundleValue?.parentNode?.style.setProperty('display', 'block', 'important');
            bundleValue?.parentNode?.previousElementSibling?.style.setProperty('display', 'block', 'important');
        } else {
            bundleValue?.parentNode?.style.setProperty('display', 'none', 'important');
            bundleValue?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
        }

        if (bundleData.period !== '-') {
            bundlePeriod.innerHTML = bundleData.period;
            bundlePeriod?.parentNode?.style.setProperty('display', 'block', 'important');
            bundlePeriod?.parentNode?.previousElementSibling?.style.setProperty('display', 'block', 'important');
        } else {
            bundlePeriod?.parentNode?.style.setProperty('display', 'none', 'important');
            bundlePeriod?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
        }

        if (bundleData.dataLimit !== '-') {
            bundleDataLimit.innerHTML = bundleData.dataLimit;
            bundleDataLimit?.parentNode?.style.setProperty('display', 'flex', 'important');
            bundleDataLimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'flex', 'important');
        } else {
            bundleDataLimit?.parentNode?.style.setProperty('display', 'none', 'important');
            bundleDataLimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
        }

        if (bundleData.creditLimit !== '-') {
            bundleMoney.innerHTML = bundleData.creditLimit;
            bundleMoney?.parentNode?.style.setProperty('display', 'flex', 'important');
            bundleMoney?.parentNode?.previousElementSibling?.style.setProperty('display', 'flex', 'important');
        } else {
            bundleMoney?.parentNode?.style.setProperty('display', 'none', 'important');
            bundleMoney?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
        }

        if (bundleData.youtubeLimit !== '-') {
            bundleYoutubeLimit.innerHTML = bundleData.youtubeLimit;
            bundleYoutubeLimit?.parentNode?.style.setProperty('display', 'flex', 'important');
            bundleYoutubeLimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'flex', 'important');
        } else {
            bundleYoutubeLimit?.parentNode?.style.setProperty('display', 'none', 'important');
            bundleYoutubeLimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
        }

        if (bundleData.ooredooNetworkLimit !== '-') {
            bundleOALimit.innerHTML = bundleData.ooredooNetworkLimit;
            bundleOALimit?.parentNode?.style.setProperty('display', 'flex', 'important');
            bundleOALimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'flex', 'important');
        } else {
            bundleOALimit?.parentNode?.style.setProperty('display', 'none', 'important');
            bundleOALimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
        }

        if (bundleData.otherNetworkLimit !== '-') {
            bundleONLimit.innerHTML = bundleData.otherNetworkLimit;
            bundleONLimit?.parentNode?.style.setProperty('display', 'flex', 'important');
            bundleONLimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'flex', 'important');
        } else {
            bundleONLimit?.parentNode?.style.setProperty('display', 'none', 'important');
            bundleONLimit?.parentNode?.previousElementSibling?.style.setProperty('display', 'none', 'important');
        }




        console.log("purchase-journey-bundleData", bundleData);
				
        let otherLimitHTML = '';
        let count = 1;
        data?.otherLimits?.forEach(otherLimit =>{
				    if(otherLimit.otherLimitIcon != '' && otherLimit.otherLimitLabel != '' && otherLimit.otherLimitValue != ''){
						    otherLimitHTML+='<hr class="my-6"/><div class="flex flex-row justify-between"><div class="flex flex-row items-center justify-center gap-5"><img src="'+otherLimit.otherLimitIcon+'" alt="icon"/><p class="font-sans text-base font-normal md:text-xl">'+otherLimit.otherLimitLabel+'</p></div><p class="font-sans text-base font-semibold md:text-xl bundle-youtube-limit">'+otherLimit.otherLimitValue+'</p></div>';
						}            
            if (count == data?.otherLimits?.length) {
                document.querySelector('.other-limit-wrapper').innerHTML = otherLimitHTML;
            }
            count++;        
        });
        const popup = document.getElementById("purchase-journey-popup");
        popup.style.display = "block";
				
				successJourney.setAttribute('style', 'display:none !important');
        purchaseJourneyInsufficient.setAttribute('style', 'display:none !important');
        purchaseJourneyUnavailable.setAttribute('style', 'display:none !important');
        loadingScreen.setAttribute('style', 'display:none !important');
				purchaseButton.disabled = true;
        purchaseButton.setAttribute(
	       'style',
	       'color:#AAAAAA !important; background: #EEEEEE !important'
        );
				verifyBtn.disabled = true;
			  verifyBtn.setAttribute(
				'style',
				'color:#aaaaaa !important; background: #eee !important'
			);
    }
		
		
		
    const inputField = document.getElementById('purchase-journey-phone-number');
    const closeButton = document.getElementById("purchase-journey-close");
    closeButton.addEventListener("click", () => {
        const popup = document.getElementById("purchase-journey-popup");
				inputField.value = '';
				purchaseButton.disabled = true;
        purchaseButton.setAttribute(
	       'style',
	       'color:#AAAAAA !important; background: #EEEEEE !important'
        );
        popup.style.display = "none";

        verify.style.display = "none";
        bundle.style.display = "block";
        verify.style.display = "none";
        success.style.display = "none";
    });

    
    // bundle screen

    purchaseButton.addEventListener("click", () => {
        verify.style.display = "block";
        bundle.style.display = "none";
				inputField.value = '';
    });

    // veriry screen
    const codes = document.querySelectorAll(".code");

    codes[0].focus();

    codes.forEach((code, idx) => {
        code.addEventListener("keydown", (e) => {
            if (e.key >= 0 && e.key <= 9) {
                codes[idx].value = "";
                setTimeout(() => codes[idx + 1].focus(), 10);
            } else if (e.key === "Backspace") {
                setTimeout(() => codes[idx - 1].focus(), 10);
            }
        });
    });




/*verifyButton.addEventListener("click", () => {
	verify.style.display = "none";
	success.style.display = "block";
});*/

const baseURL = 'https://myooredoo-ppd.ooredoo.dz';
//apis not working dev env => const baseURL = $('selfcare-base-url').val();
const realm = 'myooredoo';
const countryCode = '213';

//Get access token by OTP

verifyBtn.disabled = true;
const verificationErrorMsg = document.getElementById(
	'verification-error-message'
);
const loadingVerificationSpinner = document.getElementById(
	'verification-loader'
);
const resendText = document.getElementById('resend-code-with-text');
const resendNumber = document.getElementById('resend-code-with-number');
const resendIcon = document.getElementById('resend-icon');
const codeInputs = document.querySelectorAll('.code');
const noErrorMessage = document.getElementById('number-error-message');
const loadingSpinner = document.getElementById('purchase-journey-load-number');
const webPortalBtn = document.getElementById('web-portal');

const codeValues = [];
let countdown = 30;
let timerInterval;

//hide 
successJourney.setAttribute('style', 'display:none !important');
purchaseJourneyInsufficient.setAttribute('style', 'display:none !important');
purchaseJourneyUnavailable.setAttribute('style', 'display:none !important');
loadingScreen.setAttribute('style', 'display:none !important');

//btn hover
webPortalBtn.setAttribute(
	'style',
	'color:#FFF !important; background: rgb(214 0 28/var(--tw-bg-opacity)) !important'
);
webPortalBtn.addEventListener('mouseover', function () {
	this.setAttribute(
		'style',
		'background: #B20017 !important; color: #FFF !important'
	);
});
webPortalBtn.addEventListener('mouseout', function () {
	this.setAttribute(
		'style',
		'background: rgb(214 0 28/var(--tw-bg-opacity)) !important; color: #FFF !important'
	);
});


purchaseButton.disabled = true;

function setCookie(name, value) {
	const cookieString = name + '=' + value + '; path=/';
	document.cookie = cookieString;
}

function getCookie(name) {
	const cookies = document.cookie.split(';');
	for (const cookie of cookies) {
		const parts = cookie.split('=');
		if (parts[0].trim() === name) {
			return parts[1].trim();
		}
	}
	return null;
}

function RequestOTPByMSISDNAPI(username) {
  loadingSpinner.setAttribute('style', 'display:block !important');
	const apiEndpoint =
		baseURL + '/auth/realms/' + realm + '/protocol/openid-connect/token';

	const headers = {
		'x-msisdn': '2135',
		'Content-Type': 'application/x-www-form-urlencoded',
	};

	const formData = new URLSearchParams({
		client_id: 'myooredoo-app',
		username: countryCode + username,
		grant_type: 'password',
	});

	return fetch(apiEndpoint, {
		method: 'POST',
		headers: headers,
		body: formData,
	});
}

inputField.addEventListener('input', function () {
  noErrorMessage.setAttribute('style', 'display:none !important');
	loadingSpinner.setAttribute('style', 'display:none !important');
  purchaseButton.disabled = true;
  purchaseButton.setAttribute(
	'style',
	'color:#AAAAAA !important; background: #EEEEEE !important'
  );

	const username = inputField.value;
	const verifyDescription = 'Nous avons envoyé un SMS avec un code à 6 chiffres au';
	
	

	if (username && username.length === 9) {
		setCookie('username', username);

		RequestOTPByMSISDNAPI(username)
			.then((response) => {
				if (response.status === 403) {
					purchaseButton.disabled = false;
					loadingSpinner.setAttribute(
						'style',
						'display:none !important'
					);
					noErrorMessage.setAttribute(
						'style',
						'display:none !important'
					);
					purchaseButton.setAttribute(
						'style',
						'color:#FFF !important; background: rgb(214 0 28/var(--tw-bg-opacity)) !important'
					);
					
					 if(Liferay.ThemeDisplay.getLanguageId() == 'ar_SA'){
						document.getElementById('entered-mobile-number').innerHTML = verifyDescription+' 213'+username+'+ ';
					} else {
						// If not, then display the country code first, then the number
						document.getElementById('entered-mobile-number').innerHTML = verifyDescription + " " + "+213" + username + ".";
					}
					
purchaseButton.addEventListener('mouseover', function() {
    if (!this.disabled) {
        this.setAttribute('style', 'background: #B20017 !important; color: #FFF !important');
    }
});

purchaseButton.addEventListener('mouseout', function() {
    if (!this.disabled) {
        this.setAttribute('style', 'background: rgb(214 0 28/var(--tw-bg-opacity)) !important; color: #FFF !important');
    }
});
				} else {
					console.error('API request failed');
					noErrorMessage.setAttribute(
						'style',
						'display:block !important'
					);
					loadingSpinner.setAttribute(
						'style',
						'display:block !important'
					);
				}
			})
			.catch((error) => {
				console.error('API request failed:', error);
			});
	}
});

codeInputs.forEach((input, index) => {
	input.addEventListener('input', function () {
		const value = parseInt(input.value) || 0;
		codeValues[index] = value;
		const allInputsFilled = Array.from(codeInputs).every(
			(input) => input.value !== ''
		);

		if (allInputsFilled) {
			verifyBtn.disabled = false;
			verifyBtn.setAttribute(
				'style',
				'color:#FFF !important; background: rgb(214 0 28/var(--tw-bg-opacity)) !important'
			);
			verifyBtn.addEventListener('mouseover', function() {
			if (!this.disabled) {
               this.setAttribute('style', 'background: #B20017 !important; color: #FFF !important');
							 }
      });
      verifyBtn.addEventListener('mouseout', function() {
			if (!this.disabled) {
                this.setAttribute('style', 'background: rgb(214 0 28/var(--tw-bg-opacity)) !important; color: #FFF !important');
								}
      });
			verificationErrorMsg.setAttribute(
				'style',
				'display:none !important'
			);
			loadingVerificationSpinner.setAttribute(
				'style',
				'display:none !important'
			);
		} else {
			verifyBtn.disabled = true;
			verifyBtn.setAttribute(
				'style',
				'color:#aaaaaa !important; background: #eee !important'
			);
			verificationErrorMsg.setAttribute(
				'style',
				'display:none !important'
			);
			loadingVerificationSpinner.setAttribute(
				'style',
				'display:none !important'
			);
		}
	});
});

verifyBtn.addEventListener('click', function () {
	loadingVerificationSpinner.setAttribute(
		'style',
		'display:block !important'
	);
	getAccessTokenByOTPAPI(codeValues);
});

const doneButton= document.getElementById("done-btn");
closeButton.addEventListener("click", () => {
        const popup = document.getElementById("purchase-journey-popup");
        popup.style.display = "none";

        verify.style.display = "none";
        bundle.style.display = "block";
        verify.style.display = "none";
        success.style.display = "none";
});

doneButton.addEventListener("click", () => {
        const popup = document.getElementById("purchase-journey-popup");
        popup.style.display = "none";

        verify.style.display = "none";
        bundle.style.display = "block";
        verify.style.display = "none";
        success.style.display = "none";
});

function updateTimer() {
	if (countdown > 0) {
		resendNumber.textContent = 'Resend Code in ' + countdown + ' seconds';
		countdown--;
	} else {
		resendText.style.display = 'block';
		resendIcon.style.display = 'block';
		resendNumber.style.display = 'none';
		resendNumber.style.display = 'none';
		clearInterval(timerInterval);
	}
}

resendText.addEventListener('click', function () {
	RequestOTPByMSISDNAPI(getCookie('username'));

	resendText.style.display = 'none';
	resendIcon.style.display = 'none';
	resendNumber.style.display = 'block';

	resendNumber.textContent =
		'Code has been re-sent to +' + countryCode + getCookie('username');
	setTimeout(function () {
		updateTimer();
		// Start a timer to update the countdown
		timerInterval = setInterval(updateTimer, 1000);
	}, 3000);

	countdown = 30;
});

function getAccessTokenByOTPAPI(codeValues) {
	const apiEndpoint =
		baseURL +
		'/api/auth/realms/' +
		realm +
		'/protocol/openid-connect/token';

	const headers = {
		'x-msisdn': '2135',
		'Content-Type': 'application/x-www-form-urlencoded',
	};

	const formData = new URLSearchParams({
		client_id: 'myooredoo-app',
		username: countryCode + getCookie('username'),
		grant_type: 'password',
		otp: codeValues.join(''),
	});

	fetch(apiEndpoint, {
		method: 'POST',
		headers: headers,
		body: formData,
	})
		.then((response) => {
			if (response.status === 200) {
				codeInputs.forEach((input) => {
					input.value = '';
				});
				verify.style.display = 'none';
				loadingVerificationSpinner.setAttribute(
					'style',
					'display:none !important'
				);
				verificationErrorMsg.setAttribute(
					'style',
					'display:none !important'
				);

				const loadingScreen = document.getElementById(
					'purchase-journey-load'
				);
				loadingScreen.setAttribute('style', 'display:block !important');


				successJourney.setAttribute('style', 'display:none !important');

				return response.json();
			} else {
				verificationErrorMsg.setAttribute(
					'style',
					'display:block !important'
				);
				console.error('Get access token failed');
				return null;
			}
		})
		.then((data) => {
			if (data) {
				const accessToken = data.access_token;
				const refreshToken = data.refresh_token;

				setCookie('access_token', accessToken);
				setCookie('refresh_token', refreshToken);

				bundlePurchase();
			}
		})
		.catch((error) => {
			console.error('Get access token request failed:', error);
		});
}

	
async function bundlePurchase() {
	const apiEndpoint = baseURL + '/api/ooredoo-bff/bundle/bundlePurchase/v2';
	const headers = {
		'Content-Type': 'application/json',
		Authorization: 'Bearer ' + getCookie('access_token'),
		platform: 'apple',
		
	};

	const data = JSON.stringify({
		bundleCode: getCookie('code'),
	});

	try {
		const response = await fetch(apiEndpoint, {
			method: 'POST',
			headers: headers,
			body: data,
		});

		if (response.status === 200) {
		/*const bundleVal = getCookie('bundleValue');
    const message = 'You have successfully purchased Bundle ' + bundleVal + '  for ' + bundleVal + ' using your recharged credit.';
      const bundleValueElement = document.getElementById('bundleValue');
      bundleValueElement.textContent = message;

			const loadingScreen = document.getElementById(
				'purchase-journey-load'
			);
			loadingScreen.setAttribute('style', 'display:none !important');


			successJourney.setAttribute('style', 'display:block !important');

			//purchase - journey - insufficient;
			return response.json();*/
			
			if (response.status === 200) {

	loadingScreen.setAttribute('style', 'display:none !important');

	const bundleVal = getCookie('bundleValue');
	const message =
		'You have successfully purchased Bundle ' +
		bundleVal +
		'  for ' +
		bundleVal +
		' using your recharged credit.';

	bundleValueElement.textContent = message;
 console.log("response.message",response);
 const responseData = await response.json(); 
	if (responseData.message === 'Success') {
		successJourney.setAttribute('style', 'display:block !important');
	} else if (responseData.message === 'CreditLimitException') {
		purchaseJourneyInsufficient.setAttribute(
			'style',
			'display:block !important'
		);
	} else {

		purchaseJourneyUnavailable.setAttribute(
			'style',
			'display:block !important'
		);
	}

	//purchase - journey - insufficient;
	return response.json();
}
		} else {
			loadingScreen.setAttribute('style', 'display:none !important');
			purchaseJourneyUnavailable.setAttribute(
			'style',
			'display:block !important'
		);

			successJourney.setAttribute('style', 'display:none !important');
			return null;
		}
	} catch (error) {
		purchaseJourneyUnavailable.setAttribute(
			'style',
			'display:block !important'
		);
		return null;
	}
}
//
const inputs = document.getElementById("inputs"); 
  
inputs.addEventListener("input", function (e) { 
    const target = e.target; 
    const val = target.value; 
  
    if (isNaN(val)) { 
        target.value = ""; 
        return; 
    } 
  
    if (val != "") { 
        const next = target.nextElementSibling; 
        if (next) { 
            next.focus(); 
        } 
    } 
}); 
  
inputs.addEventListener("keyup", function (e) { 
    const target = e.target; 
    const key = e.key.toLowerCase(); 
  
    if (key == "backspace" || key == "delete") { 
        target.value = ""; 
        const prev = target.previousElementSibling; 
        if (prev) { 
            prev.focus(); 
        } 
        return; 
    } 
});