<?php if(session_status()===PHP_SESSION_NONE){session_start();}if(!isset($_SESSION[base64_decode('bG9nZ2VkaW4=')])||$_SESSION[base64_decode('cm9sZQ==')]!=base64_decode('Y2FzaGllcg==')){header(base64_decode('TG9jYXRpb246IC4uL2NvbmZpZy9sb2dvdXQucGhw'));}$timeout_duration=7200000;if(isset($_SESSION[base64_decode('bGFzdF9hY3Rpdml0eQ==')])){$elapsed_time=time()-$_SESSION[base64_decode('bGFzdF9hY3Rpdml0eQ==')];if($elapsed_time>$timeout_duration){session_unset();session_destroy();header(base64_decode('TG9jYXRpb246IC4uL2Nhc2hpZXIvaW5kZXguaHRtbA=='));exit();}}$_SESSION[base64_decode('bGFzdF9hY3Rpdml0eQ==')]=time();include_once base64_decode('Li4vY29uZmlnL0RhdGFiYXNlLnBocA==');include_once base64_decode('Li4vY2FzaGllci9jcmVhdGVfYm9udXMucGhw');$db=Database::getInstance();$conn=$db->getConnection();$response=array(base64_decode('c3RhdHVz')=>base64_decode('ZXJyb3I='),base64_decode('bWVzc2FnZQ==')=>base64_decode('QW4gZXJyb3Igb2NjdXJyZWQu'));$cashier_id=isset($_SESSION[base64_decode('Y2FzaGllcl9pZA==')])?$_SESSION[base64_decode('Y2FzaGllcl9pZA==')]:'';$round_number=1;$cartela_number='';$speed_range=3;$pattern=1;$sound=1;$price=0;$sew=0;$birr=0;$bala=0;$profit=0;$bonus_eligiblity_starts_from=0;$start_get_mony_from=0;$lock_round_up_last_digit=0;unset($_SESSION[base64_decode('c2V3')]);unset($_SESSION[base64_decode('Ymlycg==')]);unset($_SESSION[base64_decode('YmFsYQ==')]);if($cashier_id){$query=base64_decode('DQoJCQkJU0VMRUNUIA0KCQkJCQlnYW1lLmByb3VuZF9udW1iZXJgLCANCgkJCQkJZ2FtZS5gY2FydGVsYV9udW1iZXJgLCANCgkJCQkJZ2FtZS5gaXNjb21wbGV0ZWRgLCANCgkJCQkJY2FzaGllci5gc3BlZWRfcmFuZ2VgLCANCgkJCQkJY2FzaGllci5gc291bmRgLA0KCQkJCQljYXNoaWVyLmBpc19hY3RpdmVgLA0KCQkJCQljYXNoaWVyLmBjYXNoaWVyX3BhY2thZ2VgLCANCgkJCQkJY2FzaGllci5jYXNoaWVyX2lkLA0KCQkJCQlnYW1lLmBwcmljZWAsIA0KCQkJCQlnYW1lLmBwYXR0ZXJuYCwgDQoJCQkJCXBhcnRuZXIuYGlzX2Jsb2NrZWRgLA0KCQkJCQlwYXJ0bmVyLmBwcm9maXRgLA0KCQkJCQlwYXJ0bmVyLmBib251c19lbGlnaWJsaXR5X3N0YXJ0c19mcm9tYCwNCgkJCQkJcGFydG5lci5gc3RhcnRfZ2V0X21vbnlfZnJvbWAsDQoJCQkJCXBhcnRuZXIuYGxvY2tfcm91bmRfdXBfbGFzdF9kaWdpdGANCgkJCQlGUk9NIGBnYW1lYCANCgkJCQlKT0lOIGBjYXNoaWVyYCBPTiBnYW1lLmBjYXNoaWVyX2lkYCA9IGNhc2hpZXIuYGNhc2hpZXJfaWRgDQoJCQkJSk9JTiBgcGFydG5lcmAgT04gY2FzaGllci5gcGFydG5lcl9pZGAgPSBwYXJ0bmVyLmBwYXJ0bmVyX2lkYA0KCQkJCVdIRVJFIA0KCQkJCQlnYW1lLmBjYXNoaWVyX2lkYCA9ID8NCgkJCQlPUkRFUiBCWSBnYW1lLmByb3VuZF9udW1iZXJgIERFU0MNCgkJCQlMSU1JVCAxOw0KDQoJCQk=');$stmt=$conn->prepare($query);$stmt->bind_param(base64_decode('cw=='),$cashier_id);$stmt->execute();$result=$stmt->get_result();if($row=$result->fetch_assoc()){if($row[base64_decode('aXNjb21wbGV0ZWQ=')]==0){$round_number=$row[base64_decode('cm91bmRfbnVtYmVy')];$cartela_number=str_replace(base64_decode('IA=='),'',$row[base64_decode('Y2FydGVsYV9udW1iZXI=')]);$price=$row[base64_decode('cHJpY2U=')];$numbersArray=array_filter(array_map(base64_decode('dHJpbQ=='),explode(base64_decode('LA=='),$row[base64_decode('Y2FydGVsYV9udW1iZXI=')])));$sew=count($numbersArray);$birr=$row[base64_decode('cHJpY2U=')];$bala=$row[base64_decode('Y2FzaGllcl9wYWNrYWdl')];$profit=$row[base64_decode('cHJvZml0')];$bonus_eligiblity_starts_from=$row[base64_decode('Ym9udXNfZWxpZ2libGl0eV9zdGFydHNfZnJvbQ==')];$start_get_mony_from=$row[base64_decode('c3RhcnRfZ2V0X21vbnlfZnJvbQ==')];$lock_round_up_last_digit=$row[base64_decode('bG9ja19yb3VuZF91cF9sYXN0X2RpZ2l0')];if($row[base64_decode('aXNfYmxvY2tlZA==')]==base64_decode('MQ==')){echo base64_decode('DQoJCQkJCQkJPGRpdiBpZD0ib3ZlcmxheSIgc3R5bGU9Ig0KCQkJCQkJCQlwb3NpdGlvbjogZml4ZWQ7IA0KCQkJCQkJCQl0b3A6IDA7IA0KCQkJCQkJCQlsZWZ0OiAwOyANCgkJCQkJCQkJd2lkdGg6IDEwMCU7IA0KCQkJCQkJCQloZWlnaHQ6IDEwMCU7IA0KCQkJCQkJCQliYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuNyk7IA0KCQkJCQkJCQljb2xvcjogd2hpdGU7IA0KCQkJCQkJCQlkaXNwbGF5OiBmbGV4OyANCgkJCQkJCQkJYWxpZ24taXRlbXM6IGNlbnRlcjsgDQoJCQkJCQkJCWp1c3RpZnktY29udGVudDogY2VudGVyOyANCgkJCQkJCQkJei1pbmRleDogOTk5OTsiPg0KCQkJCQkJCQk8ZGl2IHN0eWxlPSJ0ZXh0LWFsaWduOiBjZW50ZXI7Ij4NCgkJCQkJCQkJCTxoMj5CbG9ja2VkIFBhcnRubmVycyBBY2NvdW50PC9oMj4NCgkJCQkJCQkJCTxwPlBsZWFzZSBjb250YWN0IHlvdXIgYWRtaW4gdG8gY29udGludWUuPC9wPg0KCQkJCQkJCQk8L2Rpdj4NCgkJCQkJCQk8L2Rpdj4NCgkJCQkJCQ==');}if($row[base64_decode('aXNfYWN0aXZl')]==base64_decode('MQ==')){echo base64_decode('DQoJCQkJCQkJPGRpdiBpZD0ib3ZlcmxheSIgc3R5bGU9Ig0KCQkJCQkJCQlwb3NpdGlvbjogZml4ZWQ7IA0KCQkJCQkJCQl0b3A6IDA7IA0KCQkJCQkJCQlsZWZ0OiAwOyANCgkJCQkJCQkJd2lkdGg6IDEwMCU7IA0KCQkJCQkJCQloZWlnaHQ6IDEwMCU7IA0KCQkJCQkJCQliYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuNyk7IA0KCQkJCQkJCQljb2xvcjogd2hpdGU7IA0KCQkJCQkJCQlkaXNwbGF5OiBmbGV4OyANCgkJCQkJCQkJYWxpZ24taXRlbXM6IGNlbnRlcjsgDQoJCQkJCQkJCWp1c3RpZnktY29udGVudDogY2VudGVyOyANCgkJCQkJCQkJei1pbmRleDogOTk5OTsiPg0KCQkJCQkJCQk8ZGl2IHN0eWxlPSJ0ZXh0LWFsaWduOiBjZW50ZXI7Ij4NCgkJCQkJCQkJCTxoMj5Tb3JyeSwgeW91ciBhY2NvdW50IGlzIGxvY2tlZCBvdXQhPC9oMj4NCgkJCQkJCQkJCTxwPlBsZWFzZSBjb250YWN0IDxpIHN0eWxlPSJjb2xvcjojRUY2NzY5OyI+IDA5MTgxMDEwMzcgPC9pPiBmb3IgYXNzaXN0YW5jZS48L3A+DQoJCQkJCQkJCTwvZGl2Pg0KCQkJCQkJCTwvZGl2Pg0KCQkJCQkJ');}if($row[base64_decode('Y2FzaGllcl9wYWNrYWdl')]<=base64_decode('MTAw')){echo base64_decode('DQoJCQkJCQk8ZGl2IGlkPSJvdmVybGF5IiBzdHlsZT0iDQoJCQkJCQkJcG9zaXRpb246IGZpeGVkOyANCgkJCQkJCQl0b3A6IDA7IA0KCQkJCQkJCWxlZnQ6IDA7IA0KCQkJCQkJCXdpZHRoOiAxMDAlOyANCgkJCQkJCQloZWlnaHQ6IDEwMCU7IA0KCQkJCQkJCWJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC43KTsgDQoJCQkJCQkJY29sb3I6IHdoaXRlOyANCgkJCQkJCQlkaXNwbGF5OiBmbGV4OyANCgkJCQkJCQlhbGlnbi1pdGVtczogY2VudGVyOyANCgkJCQkJCQlqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsgDQoJCQkJCQkJei1pbmRleDogOTk5OTsNCgkJCQkJCSI+DQoJCQkJCQkJPGRpdiBzdHlsZT0idGV4dC1hbGlnbjogY2VudGVyOyI+DQoJCQkJCQkJCTxhIGhyZWY9Ii4uL2Nhc2hpZXIvcmVwb3J0LnBocCIgDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IHRleHQtZGVjb3JhdGlvbjogbm9uZTsgY29sb3I6IGJsYWNrOyBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsgcGFkZGluZzogMjBweDsgbWFyZ2luLWJvdHRvbTogMjBweDsgd2lkdGg6IDIwMHB4OyBmb250LXNpemU6IDMwcHg7IHRleHQtYWxpZ246IGNlbnRlcjsgYm9yZGVyOiAycHggc29saWQgYmxhY2s7IGJvcmRlci1yYWRpdXM6IDhweDsiPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBHbyB0byBSZXBvcnQNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9hPg0KDQoJCQkJCQkJCTxoMj5JbnN1ZmZpY2llbnQgQmFsYW5jZSB7').$row[base64_decode('Y2FzaGllcl9pZA==')].base64_decode('ID0g').$row[base64_decode('Y2FzaGllcl9wYWNrYWdl')].base64_decode('IOGJpeGIrX08L2gyPg0KCQkJCQkJCQk8cD5QbGVhc2UgcmVjaGFyZ2UgeW91ciBiYWxhbmNlIHRvIGNvbnRpbnVlLjwvcD4NCgkJCQkJCQk8L2Rpdj4NCgkJCQkJCTwvZGl2Pg0KCQkJCQkJ');}}else{$round_number=$row[base64_decode('cm91bmRfbnVtYmVy')]+1;if($row[base64_decode('aXNfYmxvY2tlZA==')]==base64_decode('MQ==')){echo base64_decode('DQoJCQkJCQk8ZGl2IGlkPSJvdmVybGF5IiBzdHlsZT0iDQoJCQkJCQkJcG9zaXRpb246IGZpeGVkOyANCgkJCQkJCQl0b3A6IDA7IA0KCQkJCQkJCWxlZnQ6IDA7IA0KCQkJCQkJCXdpZHRoOiAxMDAlOyANCgkJCQkJCQloZWlnaHQ6IDEwMCU7IA0KCQkJCQkJCWJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC43KTsgDQoJCQkJCQkJY29sb3I6IHdoaXRlOyANCgkJCQkJCQlkaXNwbGF5OiBmbGV4OyANCgkJCQkJCQlhbGlnbi1pdGVtczogY2VudGVyOyANCgkJCQkJCQlqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsgDQoJCQkJCQkJei1pbmRleDogOTk5OTsNCgkJCQkJCSI+DQoJCQkJCQkJPGRpdiBzdHlsZT0idGV4dC1hbGlnbjogY2VudGVyOyI+DQoJCQkJCQkJCTxoMj5CbG9ja2VkIFBhcnRubmVycyBBY2NvdW50PC9oMj4NCgkJCQkJCQkJPHA+UGxlYXNlIGNvbnRhY3QgeW91ciBhZG1pbiB0byBjb250aW51ZS48L3A+DQoJCQkJCQkJPC9kaXY+DQoJCQkJCQk8L2Rpdj4NCgkJCQkJCQ==');}if($row[base64_decode('aXNfYWN0aXZl')]==base64_decode('MQ==')){echo base64_decode('DQoJCQkJCQkJPGRpdiBpZD0ib3ZlcmxheSIgc3R5bGU9Ig0KCQkJCQkJCQlwb3NpdGlvbjogZml4ZWQ7IA0KCQkJCQkJCQl0b3A6IDA7IA0KCQkJCQkJCQlsZWZ0OiAwOyANCgkJCQkJCQkJd2lkdGg6IDEwMCU7IA0KCQkJCQkJCQloZWlnaHQ6IDEwMCU7IA0KCQkJCQkJCQliYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuNyk7IA0KCQkJCQkJCQljb2xvcjogd2hpdGU7IA0KCQkJCQkJCQlkaXNwbGF5OiBmbGV4OyANCgkJCQkJCQkJYWxpZ24taXRlbXM6IGNlbnRlcjsgDQoJCQkJCQkJCWp1c3RpZnktY29udGVudDogY2VudGVyOyANCgkJCQkJCQkJei1pbmRleDogOTk5OTsiPg0KCQkJCQkJCQk8ZGl2IHN0eWxlPSJ0ZXh0LWFsaWduOiBjZW50ZXI7Ij4NCgkJCQkJCQkJCTxoMj5Tb3JyeSwgeW91ciBhY2NvdW50IGlzIGxvY2tlZCBvdXQhPC9oMj4NCgkJCQkJCQkJCTxwPlBsZWFzZSBjb250YWN0IDxpIHN0eWxlPSJjb2xvcjpyZWQ7Ij4gMDkxODEwMTAzNyA8L2k+IGZvciBhc3Npc3RhbmNlLjwvcD4NCgkJCQkJCQkJPC9kaXY+DQoJCQkJCQkJPC9kaXY+DQoJCQkJCQk=');}if($row[base64_decode('Y2FzaGllcl9wYWNrYWdl')]<=base64_decode('MTAw')){echo base64_decode('DQoJCQkJCQk8ZGl2IGlkPSJvdmVybGF5IiBzdHlsZT0iDQoJCQkJCQkJcG9zaXRpb246IGZpeGVkOyANCgkJCQkJCQl0b3A6IDA7IA0KCQkJCQkJCWxlZnQ6IDA7IA0KCQkJCQkJCXdpZHRoOiAxMDAlOyANCgkJCQkJCQloZWlnaHQ6IDEwMCU7IA0KCQkJCQkJCWJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC43KTsgDQoJCQkJCQkJY29sb3I6IHdoaXRlOyANCgkJCQkJCQlkaXNwbGF5OiBmbGV4OyANCgkJCQkJCQlhbGlnbi1pdGVtczogY2VudGVyOyANCgkJCQkJCQlqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsgDQoJCQkJCQkJei1pbmRleDogOTk5OTsNCgkJCQkJCSI+DQoJCQkJCQkJPGRpdiBzdHlsZT0idGV4dC1hbGlnbjogY2VudGVyOyI+DQoJCQkJCQkJPGEgaHJlZj0iLi4vY2FzaGllci9yZXBvcnQucGhwIiANCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyB0ZXh0LWRlY29yYXRpb246IG5vbmU7IGNvbG9yOiBibGFjazsgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7IHBhZGRpbmc6IDIwcHg7IG1hcmdpbi1ib3R0b206IDIwcHg7IHdpZHRoOiAyMDBweDsgZm9udC1zaXplOiAzMHB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7IGJvcmRlcjogMnB4IHNvbGlkIGJsYWNrOyBib3JkZXItcmFkaXVzOiA4cHg7Ij4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBHbyB0byBSZXBvcnQNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2E+DQoNCgkJCQkJCQkJPGgyPkluc3VmZmljaWVudCBCYWxhbmNlIHs=').$row[base64_decode('Y2FzaGllcl9pZA==')].base64_decode('ID0g').$row[base64_decode('Y2FzaGllcl9wYWNrYWdl')].base64_decode('IOGJpeGIrX08L2gyPg0KCQkJCQkJCQk8cD5QbGVhc2UgcmVjaGFyZ2UgeW91ciBiYWxhbmNlIHRvIGNvbnRpbnVlLjwvcD4NCgkJCQkJCQk8L2Rpdj4NCgkJCQkJCTwvZGl2Pg0KCQkJCQkJ');}}$speed_range=$row[base64_decode('c3BlZWRfcmFuZ2U=')];$pattern=$row[base64_decode('cGF0dGVybg==')];$sound=$row[base64_decode('c291bmQ=')];}$_SESSION[base64_decode('c2V3')]=!empty($cartela_number)?count(explode(base64_decode('LA=='),$cartela_number)):0;$_SESSION[base64_decode('Ymlycg==')]=$price;$_SESSION[base64_decode('YmFsYQ==')]=10000;}?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethiomark Bingo</title>
	
	<script src="../config/inactivity_detector.js"></script>

	 <!-- Default Stylesheets -->
	 <link id="lightStyleSheet" rel="stylesheet" href="../bootstrap/css/style.css">
	<link id="modalStyleSheet" rel="stylesheet" href="../bootstrap/css/modal.css">
	<link id="giftStyleSheet" rel="stylesheet" href="../bootstrap/css/gift-unboxing.css">
	<link id="ballStyleSheet" rel="stylesheet" type="text/css" href="../bootstrap/css/ball.css">
	<link id="bingoStyleSheet" rel="stylesheet" type="text/css" href="../bootstrap/css/bingon.css">


	<link rel="stylesheet" type="text/css" href="../bootstrap//css/congura.css">
	<link rel="stylesheet" type="text/css" href="../bootstrap/css/reg_card.css">
	<!-- <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> -->
	<!-- <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"> -->
	<script src="../bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="../bootstrap//js/bootstrap.bundle.js"></script>
	<script src="../bootstrap//js/jquery.js"></script>
	<script src="../bootstrap/js/bootstrap.min.js"></script>
	<script src="../bootstrap/js/umd.js"></script>


	<link rel="stylesheet" type="text/css" href="../bootstrap/css/side-nav.css">
	<link rel="stylesheet" type="text/css" href="../bootstrap/css/container.css">

	

	<script>
			 // IndexedDB setup
				const dbPromise = idb.openDB('audio-cache-db', 1, {
					upgrade(db) {
						if (!db.objectStoreNames.contains('audios')) {
							db.createObjectStore('audios');
						}
					}
				});

			// Audio file directories for each folder with 75 files (1.wav to 75.wav)
			const directories = [
				'../assets/afall/sound/voice/',
				'../assets/afall/sound/nigus/',
				'../assets/afall/sound/modern-arada/',
				'../assets/afall/sound/modern-formal/',
				'../assets/afall/sound/fana/',
				'../assets/afall/sound/famharic/',
				'../assets/afall/sound/foromifa/',
				'../assets/afall/sound/gual/',
				'../assets/afall/sound/wedi/',
				'../assets/afall/sound/addis/'
			];

			// Dynamically generated file names (1.wav to 75.wav)
			const dynamicVoiceFiles = Array.from({ length: 75 }, (_, i) => `${i + 1}.wav`);

			// Special files with a fixed directory
			const specialFiles = {
				'good.wav': '../assets/afall/sound/',
				'lijemr_new.mp3': '../assets/afall/sound/',
				'locked_card.mp3': '../assets/afall/sound/',
				'notgood.wav': '../assets/afall/sound/',
				'notreg.wav': '../assets/afall/sound/',
				'shuffle.wav': '../assets/afall/sound/',
				'start.mp3': '../assets/afall/sound/',
				'StartupSound.opus': '../assets/afall/sound/',
				'stop.mp3': '../assets/afall/sound/',
				'clapping.mp3': '../assets/afall/sound/'
				
			};

			// Combine dynamically generated files with special files
			const voiceFiles = [
				...directories.map(directory =>
					dynamicVoiceFiles.map(file => ({ file, directory }))
				).flat(), // Flatten the nested array of dynamically generated files
				...Object.entries(specialFiles).map(([file, directory]) => ({ file, directory })) // Special files
			];

			let activeAudios = []; // Array to track active audio objects


			


			// Preload audio files when the window loads
			window.onload = () => {
				console.log("onload");
				
				preloadAudios()
					.then(() => console.log('All audios are preloaded and cached.'))
					.catch(err => console.error('Error during audio preloading:', err));
			};
				// Helper function to preload a single audio file
				// async function preloadAudios() 
				// {
				// 	const audioBlobs = [];
				// 	// console.log("preonload");

				// 	// Define priority directories (adjust this as necessary)
				// 	const priorityDirectories = [
				// 		'../assets/afall/sound/voice/', 
				// 		//'../assets/afall/sound/addis/',
				// 		//'../assets/afall/sound/foromifa/',
				// 		//'../assets/afall/sound/modern-arada/',
				// 		// Add more priority directories as needed
				// 	];

				// 	// Step 1: Load and store files from priority directories first
				// 	for (const { file, directory } of voiceFiles) {
				// 		if (priorityDirectories.includes(directory)) {
				// 			const audioUrl = `${directory}${file}`;
				// 			await preloadAudioFile(audioUrl, audioBlobs);
				// 		}
				// 	}

				// 	// Step 2: Store priority files in IndexedDB
				// 	if (audioBlobs.length > 0) {
				// 		await storeAudiosInBulk(audioBlobs);
				// 		console.log(`Preloaded and stored ${audioBlobs.length} priority audio files successfully.`);
				// 	} else {
				// 		console.warn("No valid priority audio files were fetched.");
				// 	}

				// 	// Step 3: Now, load and store files from remaining directories
				// 	const remainingAudioBlobs = [];
				// 	for (const { file, directory } of voiceFiles) {
				// 		if (!priorityDirectories.includes(directory)) {
				// 			const audioUrl = `${directory}${file}`;
				// 			await preloadAudioFile(audioUrl, remainingAudioBlobs);
				// 		}
				// 	}

				// 	// Store the remaining files in IndexedDB
				// 	if (remainingAudioBlobs.length > 0) {
				// 		await storeAudiosInBulk(remainingAudioBlobs);
				// 		console.log(`Preloaded and stored ${remainingAudioBlobs.length} remaining audio files successfully.`);
				// 	} else {
				// 		console.warn("No valid remaining audio files were fetched.");
				// 	}
				// }

				async function preloadAudios() {
					const audioBlobs = [];
					// console.log("preonload");

					// Define priority directories (adjust this as necessary)
					const selected_voice = document.getElementById("voiceselect").value;
					const priority_path = directories[selected_voice - 1];


					const priorityDirectories = [
						priority_path, 
						//'../assets/afall/sound/addis/',
						//'../assets/afall/sound/foromifa/',
						//'../assets/afall/sound/modern-arada/',
						// Add more priority directories as needed
					];					

					// Define special files to preload first
					const specialFiles = {
						'good.wav': '../assets/afall/sound/',
						'lijemr_new.mp3': '../assets/afall/sound/',
						'locked_card.mp3': '../assets/afall/sound/',
						'notgood.wav': '../assets/afall/sound/',
						'notreg.wav': '../assets/afall/sound/',
						'shuffle.wav': '../assets/afall/sound/',
						'start.mp3': '../assets/afall/sound/',
						'StartupSound.opus': '../assets/afall/sound/',
						'stop.mp3': '../assets/afall/sound/',
						'clapping.mp3': '../assets/afall/sound/'
					};

					// Combine special files with the priority directories (if not already included)
					const priorityFiles = Object.keys(specialFiles).map(file => {
						return {
							file,
							directory: specialFiles[file]
						};
					});

					// Step 1: Load and store special files first (if not already loaded in priority directories)
					for (const { file, directory } of priorityFiles) {
						const audioUrl = `${directory}${file}`;
						await preloadAudioFile(audioUrl, audioBlobs);
					}

					// Step 2: Load and store files from priority directories
					for (const { file, directory } of voiceFiles) {
						if (priorityDirectories.includes(directory)) {
							const audioUrl = `${directory}${file}`;
							await preloadAudioFile(audioUrl, audioBlobs);
						}
					}

					// Step 3: Store priority files in IndexedDB
					if (audioBlobs.length > 0) {
						await storeAudiosInBulk(audioBlobs);
						console.log(`Preloaded and stored ${audioBlobs.length} priority audio files successfully.`);
					} else {
						console.warn("No valid priority audio files were fetched.");
					}

					// Step 4: Now, load and store files from remaining directories
					const remainingAudioBlobs = [];
					for (const { file, directory } of voiceFiles) {
						if (!priorityDirectories.includes(directory)) {
							const audioUrl = `${directory}${file}`;
							await preloadAudioFile(audioUrl, remainingAudioBlobs);
						}
					}

					// Store the remaining files in IndexedDB
					if (remainingAudioBlobs.length > 0) {
						await storeAudiosInBulk(remainingAudioBlobs);
						console.log(`Preloaded and stored ${remainingAudioBlobs.length} remaining audio files successfully.`);
					} else {
						console.warn("No valid remaining audio files were fetched.");
					}
				}


				// Helper function to preload a single audio file
				async function preloadAudioFile(audioUrl, audioBlobs) {
					// Check if the file is already in IndexedDB before fetching
					const isCached = await checkIfFileCached(btoa(`${audioUrl}`));
					if (isCached) {
						// console.log(`File already cached: ${audioUrl}`);
						return; // Skip fetching if already cached
					}

					try {
							const response = await fetch(audioUrl);
							if (!response.ok) {
								// Suppress the URL entirely, log a generic message
								console.warn('Skipped a missing audio file.');
								return; // Skip this file if not found
							}
							const blob = await response.blob();
							audioBlobs.push({ url: btoa(audioUrl), blob }); // Store the encrypted URL
						} catch (error) {
							// Suppress the URL entirely, log a generic message
							console.error('Failed to fetch an audio file.');
						}

				}

				// Check if the file is already cached in IndexedDB
				async function checkIfFileCached(url) {
					const db = await dbPromise; // Assuming you have an IndexedDB instance 'dbPromise'
					const transaction = db.transaction('audios', 'readonly');
					const store = transaction.objectStore('audios');
					const cachedBlob = await store.get(url); // Try to get the file by URL

					return cachedBlob !== undefined; // Return true if cached file exists
				}

				// Helper function to store the fetched audio blobs in IndexedDB
				async function storeAudiosInBulk(audioBlobs) {
					if (audioBlobs.length === 0) return;

					const db = await dbPromise; // Assuming you have an IndexedDB instance 'dbPromise'
					const tx = db.transaction('audios', 'readwrite');

					for (const { url, blob } of audioBlobs) {
						tx.store.put(blob, url);
					}

					await tx.done;
					console.log(`Stored ${audioBlobs.length} audio files in IndexedDB.`);
				}













				




				// Get audio blob from IndexedDB
				async function getAudio(url) {
					const db = await dbPromise;
					try {
						return await db.get('audios', url);
					} catch (error) {
						console.error('Failed to retrieve audio from IndexedDB:', error);
						return null;
					}
				}

				// Play audio file from cache or direct
					async function playAudio(voicePath) {
						// Attempt to get the audio from IndexedDB
						const encryptedUrl = btoa(voicePath);
						const blob = await getAudio(encryptedUrl);

						if (blob) {
							// console.log(`Playing from cache: ${voicePath}`);
							const audio = new Audio(URL.createObjectURL(blob));
							audio.preload = 'auto';
							if (audio) { activeAudios.push(audio); }

							audio.play().catch(error => console.error('Error playing audio:', error));
						} else {
							// console.warn(`Audio not found in cache. Fetching directly: ${voicePath}`);
							try {
								// Fetch directly as fallback
								const response = await fetch(voicePath);
								if (!response.ok) {
									// console.error(`Failed to fetch audio directly: ${voicePath}`);
									return;
								}
								const fetchedBlob = await response.blob();
								console.log(`Playing directly fetched audio: ${btoa(voicePath)}`);
								const audio = new Audio(URL.createObjectURL(fetchedBlob));
								audio.preload = 'auto';

								if (audio) { activeAudios.push(audio); }
							
								audio.play().catch(error => console.error('Error playing audio:', error));
							} catch (error) {
								// console.error(`Error fetching audio directly: ${voicePath}`, error);
							}
						}
					}
					
					
					
					function voices(rb) {
							// Convert 'rb' to a string to safely check for file extension
							const rbString = String(rb);

							// Get the selected voice index from the dropdown
							const selectvoice = document.getElementById("voiceselect").value;
							
							// Check if 'rb' is a string and contains a file extension (e.g., .mp3, .wav)
							if (rbString.includes('.')) {
								// If rb has an extension, set the path to ../assets/sound/
								const voicePath = `../assets/afall/sound/${rbString}`;
								playAudio(voicePath); // Play the audio from the sound directory
							} else {
								// Otherwise, use the directories array and voiceFiles for dynamic sounds
								const path = directories[selectvoice - 1];
								
								// Ensure that voiceFiles[rb - 1] is an object and contains a valid filename
								const voiceFile = voiceFiles[rb - 1] && voiceFiles[rb - 1].file; // Assuming 'file' is the property holding the filename

								if (path && voiceFile) {
									// Play the audio from the selected directory
									const voicePath = `${path}${voiceFile}`;
									playAudio(voicePath);
								} else {
									console.error('Invalid voice selection or file index');
								}
							}
						}




// 					function voices(rb) {
//     // Get the selected voice index from the dropdown
//     const selectvoice = parseInt(document.getElementById("voiceselect").value, 10); // Ensure numeric value
//     console.log(`Dropdown raw value: ${document.getElementById("voiceselect").value}`);
//     console.log(`Parsed selectvoice: ${selectvoice}`);

//     // Validate the selected voice index
//     if (isNaN(selectvoice) || selectvoice < 1 || selectvoice > directories.length) {
//         console.error(`Invalid voice selection: ${selectvoice}`);
//         return;
//     }

//     // Log the directories array to verify its contents
//     console.log(`Directories array:`, directories);

//     // Check if the rb corresponds to a special file or dynamic file
//     let fileInfo = {};
//     if (specialFiles.hasOwnProperty(rb)) {
//         // It's a special file, use its directory from specialFiles
//         fileInfo = { file: rb, directory: specialFiles[rb] };
//     } else if (voiceFiles[rb - 1]) {
//         // Otherwise, it's a dynamic file, fetch from voiceFiles
//         fileInfo = voiceFiles[rb - 1]; // Ensure the index is correct for your setup
//     } else {
//         console.error('Invalid file reference');
//         return;
//     }

//     // Ensure we have valid fileInfo
//     if (fileInfo) {
//         const { file } = fileInfo;

//         // Always resolve the directory based on dropdown selection
//         const resolvedDirectory = directories[selectvoice - 1];
//         const voicePath = `${resolvedDirectory}${file}`;

//         console.log(`Resolved Directory: ${resolvedDirectory}`);
//         console.log(`Resolved Voice Path: ${voicePath}`);

//         // Play the audio
//         playAudio(voicePath);
//     } else {
//         console.error('Invalid voice selection or file index');
//     }
// }






			var hasBeenCalled = false; // Flag to track if function has been called
			function startbingo() 
			{
				if (hasBeenCalled) {
					return; // Exit if a request is already in progress or the function has been called
				}

				
				
				hasBeenCalled = true;
				
				var btn=document.getElementById('mybtn');
					btn.disabled=true;
				
				var n=document.getElementById('sew').innerText;
				var s=document.getElementById('birr').innerText;
				var b=document.getElementById('bala').innerText;
				var profit=document.getElementById('profit').innerText;
				var round_number= document.getElementById("round").innerText;
				
				var bonus_amount=0;

				document.getElementById("round_number_bellow_5").innerHTML="Round "+round_number;
				
				var bonus_eligiblity_starts_from = document.getElementById("bonus_eligiblity_starts_from").innerText;
				var start_get_mony_from = document.getElementById("start_get_mony_from").innerText;
				var lock_round_up_last_digit = document.getElementById("lock_round_up_last_digit").innerText;
				
				
				
				//means auto
				if(profit==0)
				{
					 if(n!=0 && s!=0 && b>0)
					{
						btn.disabled=false;
					}
					else
					{
						btn.disabled=true;
					}
					// Calculate the total amount
					var total = n * s * 0.2; // Initial calculation assuming dr < 320

					// Determine the discount rate based on the total sale (dr)
					var dr = n * s; // Total sale
					if (dr >120 && dr < 320) {
						total = n * s * 0.2;
					} else if (dr >= 320 && dr < 800) {
						total = n * s * 0.22;
					} else if (dr >= 800 && dr < 1000) {
						total = n * s * 0.25;
					} else if (dr >= 1000) {
						total = n * s * 0.3;
					}

					if(n!=0 && s!=0 && b>0)
					{
						var roundedTotal = 0;
					    if(lock_round_up_last_digit==0)
					    {
					        	// Get the last digit
        						var lastDigit = total % 10;
        
        						// Round the last digit based on the rule
        						let roundedLastDigit;
        						if (lastDigit > 5) {
        							roundedLastDigit = 10;
        						} else {
        							roundedLastDigit = 0;
        						}
        						// Calculate the new rounded total
        						roundedTotal = total - lastDigit + roundedLastDigit;
					    }
					    else
					    {
					        roundedTotal = total;
					    }
					    //==================================
                        if (roundedTotal < 10 && total<=10) {
    						roundedTotal = 10;
    					}
    					
    					
    					
    					
					}
				}
				else
				{
					if(n!=0 && s!=0 && b>0){
							btn.disabled=false;
						}
					else{
						btn.disabled=true;
					}
					// Calculate the total amount
					var total = n * s * profit/100; // Initial calculation assuming dr < 320


					if(n!=0 && s!=0 && b>0)
					{
						var roundedTotal = 0;
					    if(lock_round_up_last_digit==0)
					    {
					        	// Get the last digit
        						var lastDigit = total % 10;
        
        						// Round the last digit based on the rule
        						let roundedLastDigit;
        						if (lastDigit > 5) {
        							roundedLastDigit = 10;
        						} else {
        							roundedLastDigit = 0;
        						}
        						// Calculate the new rounded total
        						roundedTotal = total - lastDigit + roundedLastDigit;
					    }
					    else
					    {
					        roundedTotal = total;
					    }
					    //==================================
                        if (roundedTotal < 10 && total<=10) {
    						roundedTotal = 10;
    					}
    					//===================================
					}
				}
				
				
				var cashier_id = localStorage.getItem("cashier_id");
				// $.ajax(
				// {
				// 	type:'POST',
				// 	url:'backend/insert_play_big.php',
				// 	data:'sew='+s+'&birr='+n+'&income='+roundedTotal+'&cashier_id='+cashier_id,
				// 	 dataType: "json",
				// }); 
				// console.log("s"+s,"n"+n,roundedTotal,cashier_id)

				//bonnnnnnnneeeeeeeeeeeeeeeeeeessssssssssssssssssss
				$.ajax({
							type: 'POST',
							url: '../config/DbFunction.php',
							data: {
								get_bonus_data: "true",
							},
							dataType: "json",
							success: function(response) 
							{
								
								if (response.status === 'success') 
								{
									console.log((n * s) ,   bonus_eligiblity_starts_from);
									
									if (response.bonus_amount > 0 && (n * s) >= bonus_eligiblity_starts_from) 
									{
										bonus_amount= response.bonus_amount;
										document.getElementById("gift-bonus").innerHTML="+ ቦነስ "+ response.bonus_amount + " ብር";
										document.getElementById("bonusNotification").style.display = "block";
									}
									else
									{
										bonus_amount=0;
										document.getElementById('gift-bonus').innerHTML = "+ ቦነስ " + bonus_amount + " ብር";
										document.getElementById("bonusNotification").style.display = "none";
									}
								} 
								else 
								{
									console.error('Error saving transaction:', response.message);
								}
								// save transaction
								if (n * s >= start_get_mony_from)
								{
										$.ajax({
												type: 'POST',
												url: '../config/DbFunction.php',
												data: {
													round_number: round_number,
													santim: s,
													sew: n,
													income: roundedTotal,
													bonus_amount: bonus_amount,
													cashier_id: cashier_id
												},
												dataType: "json",
												success: function(response) 
												{
													if (response.status === 'success') {
														// Handle success case
														console.log('Transaction saved successfully:', response.message);
														// You can also update the UI or reset form fields if needed
													} else {
														// Handle error case
														console.error('Error saving transaction:', response.message);
													}
												},
												error: function(jqXHR, textStatus, errorThrown) {
													// Log detailed error information
													console.error('Error Details:');
													console.error('Status: ' + textStatus);
													console.error('Error Thrown: ' + errorThrown);
													console.error('Response Text: ' + jqXHR.responseText);
													showAlert( "An error occurred while updating the partner. Check console for details.'","danger");
												}
											});
								}else {
									console.log("Small incom  ==> s X birr", start_get_mony_from, '>', n * s);
								}

										
							},
								error: function(jqXHR, textStatus, errorThrown) {
									// Log detailed error information
									console.error('Error Details:');
									console.error('Status: ' + textStatus);
									console.error('Error Thrown: ' + errorThrown);
									console.error('Response Text: ' + jqXHR.responseText);
									showAlert( "An error occurred while updating the partner. Check console for details.'","danger");
								}
						});
			}	
			
			
			</script>
	<style>
	




		/* Notification bag styling for bonus */
		.bonus-notification {
			position: fixed;
			top: 18%;
			right: 50px;
			margin-right: 10px;
			width: 250px;
			padding: 15px;
			background-color: #fff;
			border-radius: 20px;
			border: 3px solid green;
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			z-index: 9999;
			text-align: center;
			animation: slideIn 1s ease-out forwards, shake 0.5s infinite;
		}
		/* Close button styling */
		.close-btn {
			position: absolute;
			top: -10px;
			right: -10px;
			font-size: 24px;
			font-weight: bold;
			color: white;
			background-color: #ff8c00;
			border-radius: 50%;
			padding: 5px 10px;
			cursor: pointer;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
			transition: background-color 0.3s, transform 0.2s;
			z-index: 10000; /* Ensure it's above other elements */
		}

		.close-btn:hover {
			background-color: #ff4500;
			transform: scale(1.2); /* Makes it easier to click by enlarging slightly */
		}

		/* Gift/Bonus styling */
		.bonus-text {
			font-weight: bold;
			letter-spacing: 2px;
			font-size: 30px;
			color: green;
			background: linear-gradient(to right, #ffcc33, #ff8c00);
			-webkit-background-clip: text;
			/* color: transparent; */
			border: 3px solid #ffb400;
			padding: 10px;
			border-radius: 10px;
			box-shadow: 0 0 10px #ffb400, 0 0 15px #ff8c00, 0 0 20px #ff8c00;
			position: relative;
		}

		/* Confetti animation */
		.confetti {
			position: absolute;
			top: -50px;
			left: 0;
			right: 0;
			height: 100px;
			pointer-events: none;
			overflow: hidden;
		}

		.confetti::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			/*background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/confetti.png');*/
			background-size: cover;
			animation: confetti 3s ease-out infinite;
		}

		/* Slide-in and shake animations */
		@keyframes slideIn {
			0% {
				transform: translateX(100%);
				opacity: 0;
			}
			100% {
				transform: translateX(0);
				opacity: 1;
			}
		}

		@keyframes shake {
			0%, 100% {
				transform: translateX(0);
			}
			25% {
				transform: translateX(-5px);
			}
			50% {
				transform: translateX(5px);
			}
			75% {
				transform: translateX(-5px);
			}
		}
		.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}









/* modallllllllllll */
/* Styling for the bingo number buttons */
.bingo-button {
    display: inline-block;
    width: 85px; /* Fixed width for each button */
    margin: 5px; /* Spacing between buttons */
    font-size: 40px; /* Adjust font size */
    background-color: #007bff; /* Button background */
    color: white; /* Button text color */
    border: none;
    padding: 15px;
    border-radius: 5px; /* Rounded corners */
    opacity: 1;
    visibility: visible;
    text-align: center; /* Center-align text */
    vertical-align: middle;
    box-sizing: border-box; /* Include padding in width */
	font-weight: 700;
}
/* Media query for screens smaller than 768px (tablets and below) */
@media screen and (max-width: 768px) {
    .bingo-button {
        width: 50px; /* Reduce button width */
        font-size: 24px; /* Smaller font size */
        padding: 8px; /* Smaller padding */
    }
}

/* Animation for wave effect */
@keyframes wave {
    0% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(-10px); }
}

.bingo-button.wave-animation {
    animation: wave 1s ;
}

/* Container layout for the buttons */
#selected-numbers {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to new lines */
    justify-content: flex-start; /* Align to the left */
    gap: 10px; /* Add space between buttons */
    padding: 10px; /* Optional padding */
}



	</style>
</head><body>


<div id="customAlert" class="custom-alert" style="display: none; position: fixed; top: 20px; right: 20px; z-index: 2000;"></div>
<div id="overlay" class="hidden"></div>

<div style="display:none;" class="bonus-notification" id="bonusNotification">
	<span class="close-btn" onclick="closeNotification()">×</span>
	<h1 id="gift-bonus" class="bonus-text">
		
	</h1>
	<div class="confetti"></div>
</div>
<script>
function closeNotification() {
	document.getElementById("bonusNotification").style.display = "none";
}

</script>
			
			<!-- ========================================================================== -->
					<p id="ran_voice" hidden><?php echo $sound;?></p>
					<p id="patt" hidden><?php echo $pattern;?></p>
					<p id="start_get_mony_from" hidden><?php echo $start_get_mony_from;?></p>
					<p id="bonus_eligiblity_starts_from" hidden><?php echo $bonus_eligiblity_starts_from;?></p>
					<p id="lock_round_up_last_digit" hidden><?php echo $lock_round_up_last_digit;?></p>
					<p id="round" hidden><?php echo $round_number;?></p>
					<p id="sew" hidden><?php echo $sew;?></p>
					<p id="birr" hidden><?php echo $birr;?></p>
					<p id="bala" hidden><?php echo $bala;?></p>
					<p id="profit" hidden><?php echo $profit;?></p>
			<!-- ========================================================================== -->

	<div id="user-content" style="display: block;" >


	


				<!-- Container for buttons aligned in a column -->
				<div id="buttonContainer" style="position: absolute; top: 0px; right: 2px; z-index: 9999; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; width: 50px;">

						<!-- Button with embedded toggle switch -->
						<button id="toggleBTN" style="display: flex; align-items: center; justify-content: center; padding: 15px 0; background-color: transparent; color: white; border: 2px solid #28a745; border-radius: 5px; cursor: pointer; width: 100%; text-align: center;">
							<!-- Toggle Switch Icon -->
							<div id="toggleIcon" style="display: flex; align-items: center; justify-content: center; width: 30px; height: 20px; background-color: white; border-radius: 10px; margin-right: 10px; position: relative;">
								<!-- The toggle circle inside the icon -->
								<div id="toggleCircle" style="width: 14px; height: 14px; background-color: #28a745; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: left 0.3s;"></div>
							</div>
						</button>

						<!-- Fullscreen Button -->
						<button id="fullscreenBtn" style="display: flex; align-items: center; justify-content: center; padding: 10px 0; background-color: transparent; color: white; border: 2px solid #28a745; border-radius: 5px; cursor: pointer; width: 100%; text-align: center;">
							<svg width="14" height="14" fill="#ffffff" class="bi bi-fullscreen" viewBox="0 0 16 16">
								<path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>
							</svg>
						</button>

						<!-- Help Button -->
						<button id="helps" style="display: flex; align-items: center; justify-content: center; padding: 10px 0; background-color: transparent; color: white; border: 2px solid #28a745; border-radius: 5px; cursor: pointer; width: 100%; text-align: center;">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
								<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
								<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
							</svg>
						</button>
				</div>


                
                

				<script>
						const fullscreenBtn = document.getElementById('fullscreenBtn');

					// Function to update the SVG icon based on fullscreen state
					function updateFullscreenIcon(isFullscreen) {
						fullscreenBtn.innerHTML = isFullscreen ? `
							<svg width="16" height="16" fill="#ffffff" class="bi bi-fullscreen-exit" viewBox="0 0 16 16">
								<path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z"/>
							</svg>
						` : `
							<svg width="16" height="16" fill="#ffffff" class="bi bi-fullscreen" viewBox="0 0 16 16">
								<path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>
						`;
					}

					// Check if the page is already in fullscreen mode on load
					if (document.fullscreenElement) {
						updateFullscreenIcon(true); // Set icon to exit fullscreen
					}

					// Event listener for the fullscreen button
					fullscreenBtn.addEventListener('click', function() {
						if (!document.fullscreenElement) {
							document.documentElement.requestFullscreen().then(() => {
								updateFullscreenIcon(true); // Update icon to exit fullscreen
							}).catch((err) => {
								alert(`Error attempting to enable fullscreen mode: ${err.message}`);
							});
						} else {
							document.exitFullscreen().then(() => {
								updateFullscreenIcon(false); // Update icon to enter fullscreen
							});
						}
					});

					// Update the button icon on exiting fullscreen mode
					document.addEventListener('fullscreenchange', () => {
						const isFullscreen = !!document.fullscreenElement;
						updateFullscreenIcon(isFullscreen); // Update icon based on fullscreen state
					});

			    </script>





				<div id="main-content" class="main-content">
											
				
											<div id="myModal" class="modal fade" data-keyboard="false" data-backdrop="static" style="display:none;overflow-y:auto;">
												<div class="modal-dialog">
													<div class="modal-content" style="width: 600px; height: 400px; opacity: 0.9;">
													
													
													
													<div class="modal-header">
														<h2 id="modal-round-number">Round <?php echo $round_number;?></h2>
														<div class="hidden-info">
															
														</div>
														<div class="button-group">
															<button class="modal-button" id="report_button" >Report</button> &nbsp;
															<button class="modal-button" id="logoutbtn">Logout</button>
															<button id="register_game_button" class="modal-button-register"><h3>Register Card</h3></button>
														</div>

														<script>
															document.getElementById('report_button').onclick = function() {
																setTimeout(function() {
																	window.location.href = "../cashier/report.php";
																}, 100);
															};

															document.getElementById('register_game_button').onclick = function() {
																setTimeout(function() {
																	window.location.href = "../cashier/reg_new_game.php";
																}, 100);
															};

															

														</script>
													</div>

														<div class="modal-body" style="background-color: #f6f7f9;" >
															<br>
															<h2 id="amount">
															
																ethiomark.com
															</h2>
															<br>
															<div style="min-height:300px">
																
																<img id="selected-numbers-container-img" src="../assets/images/card1.png" id="img" style="width: 70%; max-height: 450px; display:none; ">
																
																<!-- Container for selected numbers -->
																<div id="selected-numbers-container" 
																	style="background: rgba(255, 255, 255, 0.8); padding: 10px; border-radius: 5px; display:none; max-height:300px;overflow-y:auto; ">
																	<h2>የተመዘገቡ ካርድ ቁጥሮች</h2>
																	<div id="selected-numbers" style="font-size: 24px; color: #000;" ></div>
																</div>



																<script>
																	$(document).ready(function() {
																		// Get the round number from an element with id "round"
																		var round_number = parseInt(document.getElementById('round').innerText);

																		// Get the cashier_id from localStorage
																		var cashier_id = localStorage.getItem("cashier_id");

																		// Function to fetch numbers from the backend
																		function fetchNumbers() {
																			$.ajax({
																				url: '../config/DbFunction.php',
																				type: 'POST',
																				data: {
																					cashier_id: cashier_id,
																					get_onload_selected_cartela_data: round_number
																				},
																				success: function(response) {
																					// Hide both the image and the numbers container initially
																					$('#selected-numbers-container-img').hide();
																					$('#selected-numbers-container').hide();

																					// Do not clear the previous numbers, keep them displayed
																					// $('#selected-numbers').empty(); <-- Remove this line

																					if (response.numbers && response.numbers.length > 0) 
																					{
																						var delay = 0; // Start with no delay
																						
																						// Loop through each "cartela" (set of numbers)
																						response.numbers.forEach((cartela, cartelaIndex) => {
																							// Loop through each number in the cartela
																							cartela.forEach((number, index) => {
																								// Use setTimeout to delay the display of each number
																								setTimeout(function() {
																									// Create a button for each number
																									const numberButton = $('<button></button>')
																										.text(number)
																										.addClass('bingo-button')
																										.addClass('wave-animation') // Add animation class for wave effect
																										.css('opacity', 1); // Ensure opacity is set to 1 (fully visible)

																									// Append the button to the container
																									$('#selected-numbers').append(numberButton);
																								}, delay);

																								// Increase the delay for the next number (e.g., 500ms between numbers)
																								delay += 200; // Adjust the delay (in milliseconds) as needed
																							});
																						});

					 																	// Show the selected numbers container
                                                                                        $('#selected-numbers-container').show();
																						
																					} else {
																						// If no numbers, show the image
																						$('#selected-numbers-container-img').show();  // Show the image
																					}
																				},
																				error: function(jqXHR, textStatus, errorThrown) {
																					// Log detailed error information
																					console.error('Error Details:');
																					console.error('Status: ' + textStatus);
																					console.error('Error Thrown: ' + errorThrown);
																					console.error('Response Text: ' + jqXHR.responseText);
																					showAlert("An error occurred. Check console for details.", "danger");
																				}
																			});
																		}

																		// Automatically fetch numbers when the page loads
																		fetchNumbers();
																	});


																	</script>
															</div>
															<br>
															
															<!-- <h1 id="amount" style="font-weight: bold; letter-spacing: 2px; font-size: 60px; text-align: center; color: #828282;">ቦነስ 200 ብር </h1>
															<h1 id="amount" style="font-weight: bold; letter-spacing: 2px; font-size: 60px; text-align: center; color: #828282;">
																ቦነስ 200 ብር
															</h1> -->
																<style>
																	@keyframes blink {
																		0% { opacity: 1; }
																		50% { opacity: 0; }
																		100% { opacity: 1; }
																	}
																</style>
																<p id="bala_alert" style="color:red; animation: blink 2s infinite;">
																	<?php if($bala<=500){echo base64_decode('4YiS4Yiz4Ymg4YuOIOGKpeGLq+GIiOGJgCDhipDhi40hIDxpIHN0eWxlPSJjb2xvcjpncmVlbjsiPg==').$bala.base64_decode('IOGJpeGIrTwvaT4=');};?>
																</p>

																 <button  type="submit" class="exe modal-start-btn snake-border" id="mybtn" onclick="return startbingo();">Start</button>

														</div>
													</div>
												</div>
											</div> <!--mymodal -->
							
							
							<div class="container" style="margin-left:5px;">
								<div class="row">
								     <div id="col-11"></div>
								     <div id="col-2" class="col-2">
												<div class="contains">
													<div class="ball2">
														<div class="ball3">
															<div class="ball4">
																<div class="ball5">
																	<!-- Bewzew -->
																	<p class="num" id="rand"></p>
																</div>
															</div>
														</div>
													</div>
												</div> <!--contains -->
									 </div>
									
									

									
									<div  id="col-4" class="col-4">
											<p class="lastcall">Recent Results for (<a  href="#" style="color: red;text-align:center;font-size:25px;font-weight: 900;" id="round_number_bellow_5">yyyyy</a>)</p>
											
											<div class="tgable-container">
												<table id="bingo-table">
													<tr>
														<td class='bingo-call' style="color:red;" t='0'></td>
														<td class='bingo-call' t='1'></td>
														<td class='bingo-call' t='2'></td>
														<td class='bingo-call' t='3'></td>
														<td class='bingo-call' t='4'></td>
													</tr>
												</table>
											</div>  <!--table container -->
									</div>
									
									<div class="col-3">
										<div class="derash-box">
											<!-- Content -->
											<div class="derash-content">
												<span class="amount">
													<span id="amount1"></span> <span>&nbsp;ደራሽ</span>
												</span>
											</div>

											<!-- Line -->
											<span class="derash-line">-</span>

											<br><br>

											<!-- Details List -->
											<div class="derash-details">
												<span class="total-card">ብዛት : <?php echo $sew;?> </span> &nbsp;&nbsp;&nbsp;&nbsp;
												<span class="total-calls">ጥሪ : <span id="drawn_number_counter">0</span></span>
											</div>
										</div>
									</div>




								</div>

										<br><br>

								<div class="row" >
									<div class="col-12" >
										<div class="brow">
											<div class="callb">
												<p class="txtbox" style='background-color: #ff0404;'>B</p>
												<div class='numrow'><p class='numbox' numb='1'>1</p></div>
												<div class='numrow'><p class='numbox' numb='2'>2</p></div>
												<div class='numrow'><p class='numbox' numb='3'>3</p></div>
												<div class='numrow'><p class='numbox' numb='4'>4</p></div>
												<div class='numrow'><p class='numbox' numb='5'>5</p></div>
												<div class='numrow'><p class='numbox' numb='6'>6</p></div>
												<div class='numrow'><p class='numbox' numb='7'>7</p></div>
												<div class='numrow'><p class='numbox' numb='8'>8</p></div>
												<div class='numrow'><p class='numbox' numb='9'>9</p></div>
												<div class='numrow'><p class='numbox' numb='10'>10</p></div>
												<div class='numrow'><p class='numbox' numb='11'>11</p></div>
												<div class='numrow'><p class='numbox' numb='12'>12</p></div>
												<div class='numrow'><p class='numbox' numb='13'>13</p></div>
												<div class='numrow'><p class='numbox' numb='14'>14</p></div>
												<div class='numrow'><p class='numbox' numb='15'>15</p></div>
											</div>
										</div>
										
										<div class="irow">
											<div class="callb">
												<p class="txtbox" style='background-color: #0c3d75;'>I</p>
												<div class='numrow'><p class='numbox' numi='16'>16</p></div>
												<div class='numrow'><p class='numbox' numi='17'>17</p></div>
												<div class='numrow'><p class='numbox' numi='18'>18</p></div>
												<div class='numrow'><p class='numbox' numi='19'>19</p></div>
												<div class='numrow'><p class='numbox' numi='20'>20</p></div>
												<div class='numrow'><p class='numbox' numi='21'>21</p></div>
												<div class='numrow'><p class='numbox' numi='22'>22</p></div>
												<div class='numrow'><p class='numbox' numi='23'>23</p></div>
												<div class='numrow'><p class='numbox' numi='24'>24</p></div>
												<div class='numrow'><p class='numbox' numi='25'>25</p></div>
												<div class='numrow'><p class='numbox' numi='26'>26</p></div>
												<div class='numrow'><p class='numbox' numi='27'>27</p></div>
												<div class='numrow'><p class='numbox' numi='28'>28</p></div>
												<div class='numrow'><p class='numbox' numi='29'>29</p></div>
												<div class='numrow'><p class='numbox' numi='30'>30</p></div>
											</div>
										</div>
									
										<div class="irow">
											<div class="callb">
												<p class="txtbox" style='background-color: #ffffff; color: rgb(15, 185, 0);'>N</p>
												<div class='numrow'><p class='numbox' numn='31'>31</p></div>
												<div class='numrow'><p class='numbox' numn='32'>32</p></div>
												<div class='numrow'><p class='numbox' numn='33'>33</p></div>
												<div class='numrow'><p class='numbox' numn='34'>34</p></div>
												<div class='numrow'><p class='numbox' numn='35'>35</p></div>
												<div class='numrow'><p class='numbox' numn='36'>36</p></div>
												<div class='numrow'><p class='numbox' numn='37'>37</p></div>
												<div class='numrow'><p class='numbox' numn='38'>38</p></div>
												<div class='numrow'><p class='numbox' numn='39'>39</p></div>
												<div class='numrow'><p class='numbox' numn='40'>40</p></div>
												<div class='numrow'><p class='numbox' numn='41'>41</p></div>
												<div class='numrow'><p class='numbox' numn='42'>42</p></div>
												<div class='numrow'><p class='numbox' numn='43'>43</p></div>
												<div class='numrow'><p class='numbox' numn='44'>44</p></div>
												<div class='numrow'><p class='numbox' numn='45'>45</p></div>
											</div>
										</div>
									
										<div class="irow">
											<div class="callb">
												<p class="txtbox" style='background-color: #dab71c; color: black;'>G</p>										
												<div class='numrow'><p class='numbox' numg='46'>46</p></div>
												<div class='numrow'><p class='numbox' numg='47'>47</p></div>
												<div class='numrow'><p class='numbox' numg='48'>48</p></div>
												<div class='numrow'><p class='numbox' numg='49'>49</p></div>
												<div class='numrow'><p class='numbox' numg='50'>50</p></div>
												<div class='numrow'><p class='numbox' numg='51'>51</p></div>
												<div class='numrow'><p class='numbox' numg='52'>52</p></div>
												<div class='numrow'><p class='numbox' numg='53'>53</p></div>
												<div class='numrow'><p class='numbox' numg='54'>54</p></div>
												<div class='numrow'><p class='numbox' numg='55'>55</p></div>
												<div class='numrow'><p class='numbox' numg='56'>56</p></div>
												<div class='numrow'><p class='numbox' numg='57'>57</p></div>
												<div class='numrow'><p class='numbox' numg='58'>58</p></div>
												<div class='numrow'><p class='numbox' numg='59'>59</p></div>
												<div class='numrow'><p class='numbox' numg='60'>60</p></div>
											</div>
										</div>
									
										<div class="irow">
											<div class="callb">
												<p class="txtbox" style='background-color: rgb(10, 89, 31); color: white;'>O</p>
												<div class='numrow'><p class='numbox' numo='61'>61</p></div>
												<div class='numrow'><p class='numbox' numo='62'>62</p></div>
												<div class='numrow'><p class='numbox' numo='63'>63</p></div>
												<div class='numrow'><p class='numbox' numo='64'>64</p></div>
												<div class='numrow'><p class='numbox' numo='65'>65</p></div>
												<div class='numrow'><p class='numbox' numo='66'>66</p></div>
												<div class='numrow'><p class='numbox' numo='67'>67</p></div>
												<div class='numrow'><p class='numbox' numo='68'>68</p></div>
												<div class='numrow'><p class='numbox' numo='69'>69</p></div>
												<div class='numrow'><p class='numbox' numo='70'>70</p></div>
												<div class='numrow'><p class='numbox' numo='71'>71</p></div>
												<div class='numrow'><p class='numbox' numo='72'>72</p></div>
												<div class='numrow'><p class='numbox' numo='73'>73</p></div>
												<div class='numrow'><p class='numbox' numo='74'>74</p></div>
												<div class='numrow'><p class='numbox' numo='75'>75</p></div>
											</div>
										</div>
									</div><!--col-12 -->
								</div><!--row -->

								<div class= "row">
									<div class = "col-12">
											<!--bingo, bweze , language selection, playsound speed selection -->
													<div class="setting_box" style="display: flex; justify-content: center; align-items: center; width: 80%; margin: 20px auto;">
													
													
											        <button  style="border: 5px solid white;max-width:150px;" onclick="change()" id="bingoo" class="btnbingo">Bingo</button>
													
													<button  style="border: 5px solid white;max-width:150px;" id="shuffle" class="btnshuffle">Shuffle</button>
													<button  style="border: 5px solid red;max-width:150px;" id="finsh_game" class="btnbingo">Finsh</button>
													<div class="sound-input-text">
														<select id="voiceselect" class="voiceselect" onchange="change_language()">
															<option value="10" <?php echo $sound==10?base64_decode('c2VsZWN0ZWQ='):'';?>>Addis</option>
															<option value="1" <?php echo $sound==1?base64_decode('c2VsZWN0ZWQ='):'';?>>Bereket</option>
															<option value="2" <?php echo $sound==2?base64_decode('c2VsZWN0ZWQ='):'';?>>Nigus</option>
															<option value="3" <?php echo $sound==3?base64_decode('c2VsZWN0ZWQ='):'';?>>Amharic Arada</option>
															<option value="4" <?php echo $sound==4?base64_decode('c2VsZWN0ZWQ='):'';?>>Amharic formal</option>
															<option value="5" <?php echo $sound==5?base64_decode('c2VsZWN0ZWQ='):'';?>>Amharic yordi</option>
															<option value="6" <?php echo $sound==6?base64_decode('c2VsZWN0ZWQ='):'';?>>Amharic Beti</option>
															<option value="7" <?php echo $sound==7?base64_decode('c2VsZWN0ZWQ='):'';?>>Oromifa Female</option>
															<option value="8" <?php echo $sound==8?base64_decode('c2VsZWN0ZWQ='):'';?>>Tigrigna Female</option>
															<option value="9" <?php echo $sound==9?base64_decode('c2VsZWN0ZWQ='):'';?>>Tigrigna Male</option>
														</select>
													</div>

											
													<div class="check_card">
														<input type="text" placeholder="Card Number..." id="Ecard_no" class="card-input" required>
													</div>

													<button  style="border: 5px solid white;max-width:150px;"  type="submit" class="btnbingo" style="margin-left: 0px" id="mycheck">Check</button>
												</div><!--bingo, bweze , language selection, playsound speed selection -->


													<div class="row">
															<div class="col-1"> </div>
															<div class="col-3">
																

															</div>

															<div class="slidecontainer col-4" style="display:inline-block;">
																<p style="margin-bottom: -1.0rem; font-size: 32px; font-weight: 600;text-align:center;">
																	Play speed: <span id="demo"><?php echo $speed_range;?></span>
																</p>
																<input type="range" min="1" max="15" value="<?php echo $speed_range;?>" class="slider" id="myRange" style="height: 60px; letter-spacing: 1px; margin-top:-2.0rem;">
																
															</div>

															
															<div class="col-4"></div>
													</div>


												<canvas id="canvas" style="display:none;"></canvas>
											
												<div id="myModalcard" class="modal fade" data-keyboard="false" data-backdrop="static">
													<div class="modal-dialog">
														<div class="modal-content" >
															<div class="modal-header">
																<h1 class="modal-title"><span style="font-size: 20px;">Round <?php echo $round_number;?></span> </h1>
																
																<button class="modal-button" style="padding: 10px 15px; " id="addbingo">Close</button>
															</div>
															<div class="modal-body">
																<div id="modal-body"></div>

																
																<div style=" width: 100%;margin-top: 0px;">
																	<button class="modal-button" style="padding: 10px 15px; background: green; color:white;" id="goodbingo">GOOD BINGO</button>
																	<button class="modal-button" style="padding: 10px 15px; background-color: red;color:white;" id="notbingo">NOT BINGO</button>
																	
																	<button class="modal-button" style="padding: 10px 15px; margin-left: 5px; background-color: yellow; color: black;" id="lock_card">Lock?</button>
																</div>
															</div><!--modal body -->
														</div><!--modal content -->
													</div><!--modal dialog -->
												</div><!--modal -->




												<div id="helpmodal" class="modal fade" style="overflow-y: scroll;" data-keyboard="false" data-backdrop="static">
													<div class="modal-dialog">
														<div class="modal-content" >
															<div class="modal-header">
																<h1 class="modal-title"><span style="font-size: 20px;">Ethiomark - ኢትዮ ማርክ </span> </h1>
																
																<button class="modal-button" style="padding: 10px 15px; " id="helpmodals">Close</button>
															</div>
															<div class="modal-body" >
																<div style="min-height:500px;">
																	<div class="box1f">
																	<h1>Sample Pattern</h1>
																	<table id="bingoTable">
																		<thead>
																			<tr>
																				<th>B</th>
																				<th>I</th>
																				<th>N</th>
																				<th>G</th>
																				<th>O</th>
																			</tr>
																		</thead>
																		<tbody>
																			<tr>
																				<td>1</td>
																				<td>16</td>
																				<td>31</td>
																				<td>46</td>
																				<td>61</td>
																			</tr>
																			<tr>
																				<td>2</td>
																				<td>17</td>
																				<td>32</td>
																				<td>47</td>
																				<td>62</td>
																			</tr>
																			<tr>
																				<td>3</td>
																				<td>18</td>
																				<td class="free-cell">★</td>
																				<td>48</td>
																				<td>63</td>
																			</tr>
																			<tr>
																				<td>4</td>
																				<td>19</td>
																				<td>34</td>
																				<td>49</td>
																				<td>64</td>
																			</tr>
																			<tr>
																				<td>5</td>
																				<td>20</td>
																				<td>35</td>
																				<td>50</td>
																				<td>65</td>
																			</tr>
																		</tbody>
																	</table>


																	<br><br>
																	<h1>New Pattern [ center corner ]</h1>
																	<img style="min-height:500px" src="../assets/images/new_pattern.png" alt="">

																	</div>  <!--box1 -->
															</div>
															</div><!--modal body -->
														</div><!--modal content -->
													</div><!--modal dialog -->
												</div><!--modal -->


									</div>
								</div>

							</div>













				</div><!--main content body -->
		</div><!--user content body -->
		
	
























<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/congura.js"></script>



<script type="text/javascript" > 


                    // JavaScript to toggle the switch state
                    const toggleButton = document.getElementById('toggleBTN');
                    const toggleCircle = document.getElementById('toggleCircle');
                
                    // Retrieve the initial state from localStorage, or set it to "off" if not found
                    let isOn = localStorage.getItem('toggleState') === 'true';
					const col11 = document.getElementById("col-11");
					const col2 = document.getElementById("col-2");
					// const col3 = document.getElementById("col-3");
					const col4 = document.getElementById("col-4");
					// Check if the elements exist in the DOM before accessing their content
					if (!col2  || !col4) {
						console.error("One or more elements are not found in the DOM.");
					}
					 function updateToggleAppearance() 
					 {
							if (isOn) 
							{
								// Move the circle to the "on" position
								toggleCircle.style.left = '16px';
								
								// Dynamically change the stylesheets
								document.getElementById("lightStyleSheet").setAttribute("href", "../bootstrap/css/light/style.css");
								document.getElementById("modalStyleSheet").setAttribute("href", "../bootstrap/css/light/modal.css");
								document.getElementById("giftStyleSheet").setAttribute("href", "../bootstrap/css/light/gift-unboxing.css");
								document.getElementById("ballStyleSheet").setAttribute("href", "../bootstrap/css/light/ball.css");
								document.getElementById("bingoStyleSheet").setAttribute("href", "../bootstrap/css/light/bingon.css");
							
								col11.classList.add('col-1');

								col2.classList.remove('col-2');
								col2.classList.add('col-3');

								// col3.style.display = 'none'; 
								col4.classList.remove('col-4');
								col4.classList.add('col-5');
							
							} else {
								// Move the circle to the "off" position
								toggleCircle.style.left = '3px';

								// Revert to the default stylesheets
								document.getElementById("lightStyleSheet").setAttribute("href", "../bootstrap/css/style.css");
								document.getElementById("modalStyleSheet").setAttribute("href", "../bootstrap/css/modal.css");
								document.getElementById("giftStyleSheet").setAttribute("href", "../bootstrap/css/gift-unboxing.css");
								document.getElementById("ballStyleSheet").setAttribute("href", "../bootstrap/css/ball.css");
								document.getElementById("bingoStyleSheet").setAttribute("href", "../bootstrap/css/bingon.css");
								

								// col11.classList.remove('col-1');

								// col2.classList.remove('col-3');
								// col2.classList.add('col-2');

								// // col3.style.display = 'block'; 
								// col4.classList.remove('col-5');
								// col4.classList.add('col-4');
								col11.classList.add('col-1');

								col2.classList.remove('col-2');
								col2.classList.add('col-3');

								// col3.style.display = 'none'; 
								col4.classList.remove('col-4');
								col4.classList.add('col-5');
							
							
							}
					 }
                    // Initial update based on the stored state
                    updateToggleAppearance();
                
                    // Attach the event listener to the entire button
                    toggleButton.addEventListener('click', () => {
                        // Toggle the state
                        isOn = !isOn;
                
                        // Update the button appearance
                        updateToggleAppearance();
                
                        // Store the updated state in localStorage
                        localStorage.setItem('toggleState', isOn);
                    });
                
// Simulate login check (replace this with real check)
const isLoggedIn = localStorage.getItem('loggedin') === 'true';
		// DOM elements
		const userContent = document.getElementById('user-content');

		// If the user is not logged in, show overly
		if (isLoggedIn) {
			userContent.style.display = 'block';
		}else
		{
			window.location.href = '../config/logout.php'
		}
		// Handle logout
		const logoutBtn = document.getElementById('logoutbtn');
		logoutBtn.addEventListener('click', function() {

			localStorage.removeItem('loggedin');
			localStorage.removeItem('cashier_id');
			showAlert('Successfully loggedout!', 'success');
			setTimeout(function() {
				window.location.href = '../config/logout.php'
			}, 1000);
		});

		$(document).ready(function() 
		{
					var form_data = {
							get_cashier_data: localStorage.getItem('cashier_id'),
						};
						$.ajax({
							url: "../config/DbFunction.php",
							method: "POST",
							data: form_data,
							dataType: "JSON",
							success: function(resp) {
								// Check if the response contains data
								if (resp.length > 0) {
									// Assuming the first record contains the cashier data
									var cashier = resp[0]; // If there's at least one record
									
									// Set the cashier profile name from the fetched data
									// document.getElementById("cashier_profile_name").innerHTML = cashier.cashier_id;
								} else {
									// If no data found, you can handle the case accordingly
									console.log("No cashier data found.");
									showAlert('No data found for this cashier!', 'danger');
								}
							},
							error: function(xhr, status, error) {
								// Log the error for debugging
								console.error("AJAX Error: ", status, error);
								showAlert('Internal error occurred!', 'danger');
							}
						});

					
					
		});
	
		$("#finsh_game").on('click', function(event) 
		{
			//complet game
			var round_number = parseInt(document.getElementById('round').innerText);
			var cashier_id = localStorage.getItem("cashier_id");
			$.ajax({
					type: 'POST',
					url: '../config/DbFunction.php',
					data: {
						game_completed:"true",
						round_number: round_number,
						cashier_id: cashier_id
					},
					dataType: "json",
					success: function(response) 
					{
						if (response.status === 'success') {
							// Handle success case
							showAlert( "Game has finshed ","success");
							setTimeout(function() {
								window.location.href = "../cashier/reg_new_game.php";
							}, 1000);
						} else {
							showAlert( response.message,"danger");
							// Handle error case
							console.error('Error Game completed:', response.message);
						}
					},
					error: function(jqXHR, textStatus, errorThrown) {
						// Log detailed error information
						console.error('Error Details:');
						console.error('Status: ' + textStatus);
						console.error('Error Thrown: ' + errorThrown);
						console.error('Response Text: ' + jqXHR.responseText);
						showAlert( "An error occurred. Check console for details.'","danger");
					}
				});

		});





		$("#lock_card").on('click', function(event) 
		{
			
			//lock or remove user cartela
			var round_number = parseInt(document.getElementById('round').innerText);
			var cartela_number= document.getElementById('Ecard_no').value;
			var cashier_id = localStorage.getItem("cashier_id");

			$.ajax({
					type: 'POST',
					url: '../config/DbFunction.php',
					data: 
					{
						block_user_cartela: cartela_number,
						round_number: round_number,
						cashier_id: cashier_id
					},
					dataType: "json",
					success: function(response) 
					{
						if (response.status === 'success') {
							// Handle success case
							showAlert("Successfully blocked!", "success");
						}
 						else {
							showAlert( response.message,"danger");
							// Handle error case
							// console.error('Error to blocked user !:', response.message);
						}
					},
					error: function(jqXHR, textStatus, errorThrown) {
						// Log detailed error information
						console.error('Error Details:');
						console.error('Status: ' + textStatus);
						console.error('Error Thrown: ' + errorThrown);
						console.error('Response Text: ' + jqXHR.responseText);
						showAlert( "An error occurred. Check console for details.'","danger");
					}
				});

		});





    var btn=document.getElementById('mybtn');/* start button id */
	var n=document.getElementById('sew').innerText;
	var s=document.getElementById('birr').innerText;
	var b=document.getElementById('bala').innerText;

	var profit=document.getElementById('profit').innerText;
	var start_get_mony_from = document.getElementById("start_get_mony_from").innerText;
	var lock_round_up_last_digit = document.getElementById("lock_round_up_last_digit").innerText;
	
	//==0 means auto
	if(profit==0)
	{
		
		 if(n!=0 && s!=0 && b>0){
			btn.disabled=false;
		}
		else{
			btn.disabled=true;
		}

			// Calculate the total amount
		var total = n * s * 0.2; // Initial calculation assuming dr < 320
		var income=n*s;
		// Determine the discount rate based on the total sale (dr)
		var dr = n * s; // Total sale

		if (dr >120 && dr < 320) {
			total = n * s * 0.2;
		} else if (dr >= 320 && dr < 800) {
			total = n * s * 0.22;
		} else if (dr >= 800 && dr < 1000) {
			total = n * s * 0.25;
		} else if (dr >= 1000) {
			total = n * s * 0.3;
		}
		if(n!=0 && s!=0 && b>0)
		{

			            var roundedTotal = 0;
					    if(lock_round_up_last_digit==0)
					    {
					        	// Get the last digit
        						var lastDigit = total % 10;
        
        						// Round the last digit based on the rule
        						let roundedLastDigit;
        						if (lastDigit > 5) {
        							roundedLastDigit = 10;
        						} else {
        							roundedLastDigit = 0;
        						}
        						// Calculate the new rounded total
        						roundedTotal = total - lastDigit + roundedLastDigit;
					    }
					    else
					    {
					        roundedTotal = total;
					    }
					    //==================================
                        if (roundedTotal < 10 && total<=10) {
    						roundedTotal = 10;
    					}
    					//===================================

			
			
			if (income< start_get_mony_from) {
				document.getElementById('amount').innerText=(income)+" ብር ወሳጅ";
				document.getElementById('amount1').innerText=(income);
			}
			else{
				document.getElementById('amount').innerText=(income-roundedTotal)+" ብር ወሳጅ";
				document.getElementById('amount1').innerText=(income-roundedTotal);
				// console.log(n*s+"    ",start_get_mony_from);
			}
			
		}

	 }
	else
	{
		if(n!=0 && s!=0 && b>0){
				btn.disabled=false;
			}
		else{
			btn.disabled=true;
		}
		var total = n * s * profit/100; // Initial calculation assuming dr < 320
		var income=n*s;
		if(n!=0 && s!=0 && b>0)
		{
			// Get the last digit
			// Calculate the total amount


			// var lastDigit = total % 10;

			// // Round the last digit based on the rule
			// let roundedLastDigit=0;
			// if (lastDigit > 5) {
			// 	roundedLastDigit = 10;
			// } else {
			// 	roundedLastDigit = 0;
			// }

			// // Calculate the new rounded total
			// var roundedTotal = total - lastDigit + roundedLastDigit;
			// if (roundedTotal < 10) {
			// 	roundedTotal = 10;
			// }

			// var roundedTotal = total - lastDigit + roundedLastDigit;
			            var roundedTotal = 0; 
					    if(lock_round_up_last_digit==0)
					    {
					        	// Get the last digit
        						var lastDigit = total % 10;
        
        						// Round the last digit based on the rule
        						let roundedLastDigit;
        						if (lastDigit > 5) {
        							roundedLastDigit = 10;
        						} else {
        							roundedLastDigit = 0;
        						}
        						// Calculate the new rounded total
        						roundedTotal = total - lastDigit + roundedLastDigit;
					    }
					    else
					    {
					        roundedTotal = total;
					    }
					    //==================================
                        if (roundedTotal < 10 && total<=10) {
    						roundedTotal = 10;
    					}
    					//===================================




			var start_get_mony_from = document.getElementById("start_get_mony_from").innerText;
			if (income< start_get_mony_from) {
				document.getElementById('amount').innerText=(income)+" ብር ወሳጅ";
				document.getElementById('amount1').innerText=(income);
			}
			else{
				document.getElementById('amount').innerText=(income-roundedTotal)+" ብር ወሳጅ";
				document.getElementById('amount1').innerText=(income-roundedTotal);
				// console.log(n*s+"    ",start_get_mony_from);
			}
		}
 
	 }
	







	 
    $("#mycheck").on('click', function(event) 
	{
		var cardNumber = parseInt(document.getElementById('Ecard_no').value);
		var round = parseInt(document.getElementById('round').innerText);
		var cashier_id = localStorage.getItem("cashier_id");

		checkCardLockedStatus(cardNumber,round,cashier_id);
     });
	
	 function checkCardLockedStatus(cardNumber,round_num,cashier_id) 
	 {
		$.ajax({
			type: 'POST',
			url: '../config/DbFunction.php', // New PHP file to handle this
			data: { 
				checkCardLockedStatus: cardNumber,
				round_num: round_num,
				cashier_id: cashier_id
			 },
			success: function(response) {
				if (response.status=="notlocked") 
				{
					fetchResultData(cardNumber, round_num, cashier_id) ;
				} else 
				{
					showAlert(response.message, "danger");
					// audio = new Audio("../assets/sound/locked_card.mp3");
					// audio.preload = "auto";
					// audio.play();
					voices("locked_card.mp3");
				}
			},
			error: function(jqXHR, textStatus, errorThrown) {
				console.error('Error checking locked status:');
				console.error('Status: ' + textStatus);
				console.error('Error Thrown: ' + errorThrown);
				console.error('Response Text: ' + jqXHR.responseText);
			}
		});
	}
	


	// Function to fetch result data
	function fetchResultData(cardNumber, round_num, cashier_id) 
	{
			$.ajax({
				type: 'POST',
				url: '../cashier/fetch_result_data.php',
				   data: {
						chack_card:"true",
						card_no: cardNumber,
						round: round_num,
						cashier_id: cashier_id
					 },
				success: function(resp) 
				{
						if(resp.message=="No data found.")
						{
							var selectvoice=document.getElementById("voiceselect").value;

							// audio = new Audio('../assets/sound/notreg.wav');
							// audio.preload = 'auto'; // Preload the audio
							// audio.play();  
							voices("notreg.wav");
							// audio.addEventListener('ended', function() { 
							// 	$('#myModalcard').modal('hide');
							// });
						}
						else
						{
							// console.log(resp);
							
							event.preventDefault();
							$('#modal-body').html(resp.message);
							$('#myModalcard').modal('show', {backdrop: 'static', keyboard: false});
							// if (resp.win_status==1) 
							// {
							// 	// Show the canvas and disable pointer events
							// 	var element = document.getElementById('canvas');
							// 	element.style.display = 'block';
							// 	element.style.pointerEvents = 'none';
							// 	element.style.zIndex = '9999'; // Ensure it appears on top of everything
							// 	element.style.position = 'absolute'; // Ensure z-index works properly

							// 	// Get the selected voice
							// 	var selectvoice = document.getElementById("voiceselect").value;
							// 	// Determine the audio file to play
							// 	var audioFile = (selectvoice == 4) ? "good.wav" : "good.wav";

							// 	// Play the selected voice
							// 	voices(audioFile);

							// 	// Hide the canvas after 2 seconds
							// 	setTimeout(() => {
							// 		element.style.display = 'none';
							// 	}, 3000);
							// } else {
							// 	voices("notgood.wav");
							// }
						}
						
				},
				error: function(jqXHR, textStatus, errorThrown) {
					// Log detailed error information
					console.error('Error Details:');
					console.error('Status: ' + textStatus);
					console.error('Error Thrown: ' + errorThrown);
					console.error('Response Text: ' + jqXHR.responseText);
					showAlert( "An error occurred while updating the partner. Check console for details.'","danger");
				}
				
			});

	}









		//
		$(document).ready(function(){
		
			var closeButtonClicked = false;
			
			$("#goodbingo").on('click', function(event) {
			// Show the canvas and disable pointer events
			var element = document.getElementById('canvas');
			element.style.display = 'block';
			element.style.pointerEvents = 'none';

			element.style.zIndex = '9999'; // Ensure it appears on top of everything
			element.style.position = 'absolute'; // Ensure z-index works properly

			// Get the selected voice
			var selectvoice = document.getElementById("voiceselect").value;

			// Determine the audio file to play
			var audioFile = (selectvoice == 4) ? "clapping.wav" : "clapping.mp3";

			// Play the selected voice
			voices(audioFile);

			// Hide the canvas after 2 seconds
			setTimeout(() => {
				element.style.display = 'none';
			}, 6000);
		});

			


			$("#notbingo").on('click', function (event) {

					event.preventDefault();
					closeButtonClicked = true;
					var selectvoice=document.getElementById("voiceselect").value;
				  if(selectvoice==4){
						// audio = new Audio('../assets/sound/notgood.wav');
						// audio.preload = 'auto'; // Preload the audio
						// audio.play();  
						voices("notgood.wav");
						
				  }else{
						// audio = new Audio('../assets/sound/notgood.wav');
						// audio.preload = 'auto'; // Preload the audio
						// audio.play();  
						voices("notgood.wav");
						
				  }
			});
			
			$("#helps").on('click', function (event) {
				event.preventDefault();
				updatePattern();
				$('#helpmodal').modal('show', {backdrop: 'static', keyboard: false});

			});

			// Close modal with custom button
			$("#helpmodals").on('click', function () {
				$('#helpmodal').modal('hide');
			});


			$("#addbingo").on('click', function (event) {
				event.preventDefault();
				closeButtonClicked = true;
				$('#myModalcard').modal('hide');

			});

			$('#myModalcard').on('hide.bs.modal', function (e) {
				if (!closeButtonClicked) {
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				closeButtonClicked = true;
			});


			$('#myModal').modal('show', {backdrop: 'static', keyboard: false});

			
			
			var closeButtonClicked = false;
			$("#mybtn").on('click', function (event) {
			   
				    // audio = new Audio('../assets/sound/lijemr_new.mp3');
					// audio.preload = 'auto'; // Preload the audio
					// audio.play();  
					voices("lijemr_new.mp3");

				event.preventDefault();
				closeButtonClicked = true;
				$('#myModal').modal('hide');
			 });

			$('#myModal').on('hide.bs.modal', function (e) {
				if (!closeButtonClicked) {
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				closeButtonClicked = false;
			});


	 });
	
	
	 let shuffleInterval;
		let shuffle_status = null;
		let audioCache = {}; // Object to store cached audio objects
		let isAudio1Playing = false;
		let isAudio2Playing = false;


		
		$("#shuffle").on("click", function () {
			if (shuffle_status === null) {
				// Start shuffling
				clearInterval(shuffleInterval);
				shuffleInterval = setInterval(shuffle, 100);

				shuffle_status = "true";
				$(this).prop("disabled", false).text("STOP");

				// Play startup sound and track it
				const startupSound = voices("StartupSound.opus");
				if (startupSound) activeAudios.push(startupSound);

				// Play shuffle sound and track it
				const shuffleSound = voices("shuffle.wav");
				if (shuffleSound) activeAudios.push(shuffleSound);

				// Stop sounds and shuffling after 8 seconds
				setTimeout(() => stopShuffleSounds(), 8000);
			} else {
				stopShuffleSounds(); // Stop immediately
			}
		});

		function stopShuffleSounds() {
			clearInterval(shuffleInterval);
			shuffle_status = null;
			$("#shuffle").prop("disabled", false).text("Shuffle");

			activeAudios.forEach((audio) => {
				if (audio instanceof Audio) {
					audio.pause();
					audio.currentTime = 0; // Reset playback position
				} else {
					console.warn("Invalid audio object in activeAudios:", audio);
				}
			});

			activeAudios = []; // Clear the active audio list
		}
















	function shuffle() 
	{
		  const randomNumber = getRandomNumber1();
		  let letter;
		  let selector;

		  // Determine the letter and selector based on the range
		  if (randomNumber <= 15) {
			letter = 'B';
			selector = 'numb';
		  } else if (randomNumber <= 30) {
			letter = 'I';
			selector = 'numi';
		  } else if (randomNumber <= 45) {
			letter = 'N';
			selector = 'numn';
		  } else if (randomNumber <= 60) {
			letter = 'G';
			selector = 'numg';
		  } else {
			letter = 'O';
			selector = 'numo';
		  }

		  // Update the display and class
		  const element = document.querySelector(`[${selector}="${randomNumber}"]`);
		if (element)
		{
			document.getElementById('rand').innerText = `${letter}-${randomNumber}`;
			element.classList.add("callnum1");

			// Remove the class after 300ms
			setTimeout(() => {
			  element.classList.remove("callnum1");
			}, 500);
		}

		  // Allow stopping the shuffle with a double-click
		  $("#shuffle").on('dblclick', function() {
			clearInterval(shuffleInterval);
			$(this).prop('disabled', false); // Re-enable the button
		  });
	}

	// Function to get a random number
	function getRandomNumber1() {
	  return Math.floor(Math.random() * 75) + 1; // Range from 1 to 75
	}

	function change_language() 
	{
		
		const selectvoice = document.getElementById("voiceselect").value;
		const cashier_id=localStorage.getItem("cashier_id");		
		$.ajax({
				type: 'POST',
				url: '../config/DbFunction.php',
				data: { selectvoice:selectvoice,cashier_id:cashier_id},
				dataType: 'JSON',
				success: function(resp) {
					if(resp.status=="success")
					{
						//console.log(resp.message, "success")
					}
					else{
						console.log(resp.message, "danger")
					}
				},
				error: function(xhr, status, error) {
					// Handle errors if the AJAX request fails
					console.error("AJAX Error: ", xhr.responseText);
					showAlert(error.message, "danger")
				}
				
			});
		}

	//audio============
	// const dbPromise = idb.openDB('audio-cache-db', 1, {
	// 	upgrade(db) {
	// 		db.createObjectStore('audios');
	// 	}
	// });


	// async function storeAudio(url, blob) {
	// 	const db = await dbPromise;
	// 	const tx = db.transaction('audios', 'readwrite');
	// 	tx.store.put(blob, url);
	// 	await tx.done;
	// }


	// async function getAudio(url) {
	// 	const db = await dbPromise;
	// 	return db.get('audios', url);
	// }
	
	
	// async function playAudio(voicePath) {
	// 	const audioUrl =voicePath;
	// 	let blob = await getAudio(audioUrl);

	// 	if (!blob) {
	// 		try {
	// 			const response = await fetch(audioUrl);
	// 			if (!response.ok) throw new Error('Network response was not ok');
	// 			blob = await response.blob();
	// 			await storeAudio(audioUrl, blob);
	// 		} catch (error) {
	// 			console.error('Failed to fetch audio file:', error);
	// 			return;
	// 		}
	// 	}

	// 	const audio = new Audio(URL.createObjectURL(blob));
	// 	audio.preload = 'auto';
	// 	audio.play().catch(error => console.error('Error playing audio:', error));
	// }

	// function voices(rb) 
	// {
		
	// 	const selectvoice = document.getElementById("voiceselect").value;
	// 	const cashier_id=localStorage.getItem("cashier_id");
	// 	console.log("CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc");
		
	// 	$.ajax({
	// 			type: 'POST',
	// 			url: '../config/DbFunction.php',
	// 			data: { selectvoice:selectvoice,cashier_id:cashier_id},
	// 			dataType: 'JSON',
	// 			success: function(resp) {
	// 				if(resp.status=="success")
	// 				{
	// 					//console.log(resp.message, "success")
	// 				}
	// 				else{
	// 					console.log(resp.message, "danger")
	// 				}
	// 			},
	// 			error: function(xhr, status, error) {
	// 				// Handle errors if the AJAX request fails
	// 				console.error("AJAX Error: ", xhr.responseText);
	// 				showAlert(error.message, "danger")
	// 			}
				
	// 		});
	// 	// $.ajax({
	// 	// 	type: 'POST',
	// 	// 	url: 'backend/play_lang.php',
	// 	// 	data: { selectvoice:selectvoice},
	// 	// 	success: function(html) { }
	// 	// });
	// 	const voiceFiles = [
	// 		'1.wav', '2.wav', '3.wav', '4.wav', '5.wav', '6.wav', '7.wav', '8.wav', '9.wav', '10.wav', 
	// 		'11.wav', '12.wav', '13.wav', '14.wav', '15.wav', '16.wav', '17.wav', '18.wav', '19.wav', 
	// 		'20.wav', '21.wav', '22.wav', '23.wav', '24.wav', '25.wav', '26.wav', '27.wav', '28.wav', 
	// 		'29.wav', '30.wav', '31.wav', '32.wav', '33.wav', '34.wav', '35.wav', '36.wav', '37.wav', 
	// 		'38.wav', '39.wav', '40.wav', '41.wav', '42.wav', '43.wav', '44.wav', '45.wav', '46.wav', 
	// 		'47.wav', '48.wav', '49.wav', '50.wav', '51.wav', '52.wav', '53.wav', '54.wav', '55.wav', 
	// 		'56.wav', '57.wav', '58.wav', '59.wav', '60.wav', '61.wav', '62.wav', '63.wav', '64.wav', 
	// 		'65.wav', '66.wav', '67.wav', '68.wav', '69.wav', '70.wav', '71.wav', '72.wav', '73.wav', 
	// 		'74.wav', '75.wav'
	// 	];
	// 	const directories = [
	// 		'../assets/sound/voice/','../assets/sound/nigus/', '../assets/sound/modern-arada/', '../assets/sound/modern-formal/', '../assets/sound/fana/', '../assets/sound/famharic/', '../assets/sound/foromifa/', '../assets/sound/gual/', '../assets/sound/wedi/', '../assets/sound/addis/'
	// 	];
		
	// 	const path = directories[selectvoice - 1];
	// 	const voiceFile = voiceFiles[rb - 1];

	// 	if (path && voiceFile) {
	// 		playAudio(path + voiceFile);
	// 	} else {
	// 		console.error('Invalid voice selection or file index');
	// 	}
	// }




	var randomNumber;
	var uniqueRandoms = [];
	var max = 75;

	// Function to shuffle an array
	function shuffleArray(array) {
		for (var i = array.length - 1; i > 0; i--) {
			var j = Math.floor(Math.random() * (i + 1));
			var temp = array[i];
			array[i] = array[j];
			array[j] = temp;
		}
	}

	// Populate uniqueRandoms array if it's empty
	if (!uniqueRandoms.length) {
		for (var i = 1; i <= max; i++) {
			uniqueRandoms.push(i);
		}
		shuffleArray(uniqueRandoms); // Shuffle the array initially
	}

	// Function to get a random number from the shuffled array
	function getRandomNumber() {
		if (uniqueRandoms.length === 0) {
			// If all numbers are used up, refill and shuffle the array
			for (var i = 1; i <= max; i++) {
				uniqueRandoms.push(i);
			}
			shuffleArray(uniqueRandoms);
		}
		return uniqueRandoms.pop(); // Get the last element of the array (which is random) and remove it
	}



	var randomstring="";
	function randomnuber() 
	{
			// Split the string into an array
			let randomstringArray = randomstring.split(',').filter(value => value !== 'undefined');
			// Join the filtered array back into a string
			let validRandomstring = randomstringArray.join(',');
			let is_last_drawn = validRandomstring.slice(0, -1).split(',').filter(Boolean).length;
			
			// Calculate the count of drawn numbers
			let drawnCount = randomstringArray.length;
    
			// Update the `drawn_number_counter` element with the new count
			let counterElement = document.getElementById("drawn_number_counter");
			if (counterElement) {
				counterElement.innerText = drawnCount;
			} else {
				console.error("Element with ID 'drawn_number_counter' not found.");
			}

			if (is_last_drawn == 75) {
					//console.log(is_last_drawn); // Output: 80 (or whatever value you set)
					change(); // Call the change function
			}
		
					
			randomNumber =  getRandomNumber();
			voices( randomNumber);
			
			updateTable(randomNumber);
			randomstring=randomstring+randomNumber+","
			document.getElementById('ran_voice').innerText= randomNumber;
			
			if(randomNumber<=15)
			 {
				  document.getElementById('rand').innerText='B-'+ randomNumber;
				 document.querySelector('[numb="'+randomNumber+'"]').className += " callnum";
			 }
			 if (randomNumber<=30 && randomNumber>15) {
				  document.getElementById('rand').innerText='I-'+ randomNumber;
			document.querySelector('[numi="'+randomNumber+'"]').className += " callnum";	
			  }
			   if (randomNumber>30 && randomNumber<=45) {
				  document.getElementById('rand').innerText='N-'+ randomNumber;
			document.querySelector('[numn="'+randomNumber+'"]').className += " callnum";

			  } if (randomNumber>45 && randomNumber<=60) {
				  document.getElementById('rand').innerText='G-'+ randomNumber;
			document.querySelector('[numg="'+randomNumber+'"]').className += " callnum";

			  } if (randomNumber>60 && randomNumber<=75) {
				  document.getElementById('rand').innerText='O-'+ randomNumber;
			document.querySelector('[numo="'+randomNumber+'"]').className += " callnum";
			  }
		

	 }
	function functionC() {


	 randomnuber();

	  max=max-1;

	}
	var slider = document.getElementById("myRange");
	var output = document.getElementById("demo");
	
	output.innerHTML = slider.value;
	var cashier_sound_range_value;
	cashier_id= localStorage.getItem('cashier_id');

	slider.oninput = function() {
	output.innerHTML = this.value;
	cashier_sound_range_value=this.value;
		   $.ajax({
				type: 'POST',
				url: '../config/DbFunction.php',
				data: { cashier_sound_range_value:cashier_sound_range_value,cashier_id:cashier_id},
				dataType: 'JSON',
				success: function(resp) {
					if(resp.status=="success")
					{
						showAlert(resp.message, "success")
					}
					else{
						showAlert(resp.message, "danger")
					}
				},
				error: function(xhr, status, error) {
					// Handle errors if the AJAX request fails
					console.error("AJAX Error: ", xhr.responseText);
					showAlert(error.message, "danger")
				}
				
			});
	 }

	var light = null;
	var btn=document.getElementById('bingoo');

	//clicked bingo and stop
	function change() 
	{
			var slider = document.getElementById("myRange").value;
			
			if (light === null) {
				// audio = new Audio('../assets/sound/nigus/start.wav');
				// audio.preload = 'auto'; // Preload the audio
				// audio.play();  
				voices("start.mp3");

				 btn.style.backgroundColor = '#4CAF50';
				 btn.innerHTML="STOP";
				 light = setInterval(functionC,slider*1000);

				document.getElementById("shuffle").disabled=true;
				document.getElementById("shuffle").style.color = "#888888";
				document.getElementById("shuffle").style.background = "#444";
				
				document.getElementById("finsh_game").disabled=true;
				document.getElementById("finsh_game").style.color = "#888888";
				document.getElementById("finsh_game").style.background = "#444";

				document.getElementById("mycheck").disabled=true;
				document.getElementById("mycheck").style.color = "#888888";
				document.getElementById("mycheck").style.background = "#444";
			} else 
			{
				document.getElementById("finsh_game").disabled=false;
				document.getElementById("finsh_game").style.color = "";
				document.getElementById("finsh_game").style.background = "";

				document.getElementById("mycheck").disabled=false;
				document.getElementById("mycheck").style.color = "";
				document.getElementById("mycheck").style.background = "";



				// audio = new Audio('../assets/sound/nigus/stop.wav');
				// audio.preload = 'auto'; // Preload the audio
				// audio.play();  
				voices("stop.mp3");

				btn.style.backgroundColor = '#1976D2';
				btn.innerHTML="Bingo";
				window.clearInterval(light);
				light = null;


				// Split the string into an array
				let randomstringArray = randomstring.split(',').filter(value => value !== 'undefined');

				// Join the filtered array back into a string
				let validRandomstring = randomstringArray.join(',');
				
				if (validRandomstring !== "" && /\d/.test(validRandomstring)) 
				{

					var round = document.getElementById('round').innerText;
					var cashier_id =localStorage.getItem("cashier_id");

					// console.log(randomstring)
					// console.log(round)
					

					$.ajax({
						type: 'POST',
						url: '../config/DbFunction.php',
						data:{
							result:validRandomstring,
							round:round,
							cashier_id: cashier_id,
						},
						dataType: 'JSON',
						success: function(resp) {
							if(resp.status=="success")
							{
								
							}
							else{
								console.log(resp.message, "danger")
							}
						},
						error: function(xhr, status, error) {
							// Handle errors if the AJAX request fails
							console.error("AJAX Error: ", xhr.responseText);
						}
					});
			  }
			}
	}

	// Function to update the interval dynamically when the slider value changes
	document.getElementById("myRange").addEventListener("input", function() {
		if (light !== null) {
			// Clear the current interval
			window.clearInterval(light);

			// Restart the interval with the new slider value
			let slider = this.value;
			console.log("Updated slider value:", slider);
			light = setInterval(functionC, slider * 1000);
		}
	});
	function updateTable(a) 
	{
			const table = document.getElementById('bingo-table');
			const cells = table.getElementsByClassName('bingo-call');
			
			// Shift the numbers in the top row to the right
			for (let i = cells.length - 1; i > 0; i--) {
				cells[i].textContent = cells[i - 1].textContent;
				cells[i].setAttribute('t', cells[i - 1].getAttribute('t'));
			}
			
			// Place the most recent number in cell (0,0)
	  
			cells[0].textContent = a;
			cells[0].setAttribute('t', a);
	}
   /* var myImage = document.getElementById("img");
var mypattern = document.getElementById("img1");
var i =  document.getElementById("patt").innerText;

var imageArray=["full.png","none.png","B and O.png","broken frame.png","checkmark.png","L.png","T.png","crazy arrow.png","crazy L.png","crazy T.png","cross.png","diamond.png","dog bone.png","double x.png","GO.png","ladder.png","mark.png","right.png","small square.png","t cross.png","x.png"];

    myImage.setAttribute("src","pattern/"+imageArray[i]);
    mypattern.setAttribute("src","pattern/"+imageArray[i]);
var myImage = document.getElementById("img");
var mypattern = document.getElementById("img1");

var imageArray=["B and O.png","broken frame.png","checkmark.png","L.png","T.png","crazy arrow.png","crazy L.png","crazy T.png","cross.png","diamond.png","dog bone.png","double x.png","GO.png","ladder.png","mark.png","right.png","right.png","small square.png","t cross.png","x.png"];
var i =  Math.floor(Math.random() * (19-1+1))+1 ;
    myImage.setAttribute("src","pattern/"+imageArray[i]);
    mypattern.setAttribute("src","pattern/"+imageArray[i]);
  
      var imageUrls = [ "h1.png", "v1.png", "h2.png", "v2.png", "4p.png", "digonal.png", "digonal1.png", "horizental.png", "vertical.png"];

    let currentIndex = 0;

   // clearInterval(patternInterval); // Clear the previous interval
   var myImage = document.getElementById("img");
   var mypattern = document.getElementById("img1");
    function rotateImages() {
      currentIndex = (currentIndex + 1) % imageUrls.length;
      myImage.src = "pattern/" + imageUrls[currentIndex];
      mypattern.src = "pattern/" + imageUrls[currentIndex];
    }

    // Start rotating images every 1 second
    const intervalId = setInterval(rotateImages, 1000);
    */
      const allPatterns = {
            '1': [[1], [2], [3], [4], [5],
                [6], [7], [8], [9], [10],[13]],
           // Updated pattern for "Any Two Lines" (pattern 2) including various combinations
'2': [
    // Diagonal lines
    [1, 3], [2, 4], [3, 5], // Diagonal from top-left to bottom-right
    [1, 5], [2, 4], [3, 3], [4, 2], [5, 1], // Diagonal from top-right to bottom-left

    // Diagonal with Vertical
    [1, 6], [1, 8], [1, 9], [1, 10], // B Column with Diagonals
    [2, 7], [2, 9], [2, 10], // I Column with Diagonals
    [3, 8], [3, 10], // N Column with Diagonals
    [4, 9], // G Column with Diagonals
    [5, 10], // O Column with Diagonals

    // Diagonal with Four Corners
    [1, 10], // B Column with Four Corners
    [2, 9], [2, 7], // I Column with Four Corners
    [3, 8], [3, 10], // N Column with Four Corners
    [4, 9], // G Column with Four Corners
    [5, 6] // O Column with Four Corners

    // Horizontal lines
    [1, 2], [1, 3], [1, 4], [1, 5], // Row 1
    [2, 3], [2, 4], [2, 5], // Row 2
    [3, 4], [3, 5], // Row 3
    [4, 5], // Row 4

    // Vertical lines
    [1, 6], [2, 7], [3, 8], [4, 9], [5, 10], // Column B
    [1, 7], [2, 8], [3, 9], [4, 10], // Column I
    [1, 8], [2, 9], [3, 10], // Column N
    [1, 9], [2, 10], // Column G
    [1, 10], // Column O

    
    // Add more combinations as needed
],

            '3': [[1], [2], [3], [4], [5]],
            '4': [[6], [7], [8], [9], [10]],
            '5': [[11]],
            '6': [[12]],
            '7': [[13]],
            '8': [[14]],
            '9': [[15]],
            '10': [[16]],
            '11': [[17]],
            '12': [[18]]
        };
        
        let currentPatternSet = 0;
        let patternGroup = '1'; // Default to 'any line' initially
        let patternIndex = 0;
        let intervalId;
		
		

		// Global object to store the cell values once set
			const bingoContent = {};

			function clearCircles() {
				const tableBody = document.querySelector('#bingoTable tbody');
				for (let rowIndex = 0; rowIndex < tableBody.rows.length; rowIndex++) {
					for (let cellIndex = 0; cellIndex < tableBody.rows[rowIndex].cells.length; cellIndex++) {
						const cell = tableBody.rows[rowIndex].cells[cellIndex];
						const cellId = `${rowIndex}-${cellIndex}`; // Unique ID for each cell

						// Clear the highlight class and reset any styles
						cell.classList.remove('highlighted');
						cell.removeAttribute('style');
						
						// Check if the content has already been set
						if (!bingoContent[cellId]) {
							// If not set, set the content
							if (rowIndex === 2 && cellIndex === 2) {
								// Center cell: set star
								cell.innerHTML = '★';
								bingoContent[cellId] = '★'; // Save to prevent future change
							} else {
								// Random content for other cells (numbers in this case)
								const randomContent = Math.floor(Math.random() * 100); // Random number between 0-99
								cell.innerHTML = randomContent;
								bingoContent[cellId] = randomContent; // Save the random number
							}
						} else {
							// If content is already set, just use the stored value
							cell.innerHTML = bingoContent[cellId];
						}
					}
				}
			}




			function drawPattern(patterns) {
				const table = document.getElementById('bingoTable');
				const tableBody = table.querySelector('tbody'); // Target tbody to avoid affecting the thead
				clearCircles();

				patterns.forEach(pattern => {
					switch (pattern) {
						case 1:
						case 2:
						case 3:
						case 4:
						case 5:
							let columnIndex = pattern - 1;
							for (let i = 0; i < 5; i++) {
								const cell = tableBody.rows[i].cells[columnIndex];
								cell.innerHTML = '<div class="circle"></div>';
								cell.classList.add('highlighted'); // Highlight cell
							}
							break;
						case 6: // Horizontal lines
						case 7:
						case 8:
						case 9:
						case 10:
							let rowIndex = pattern - 6;
							for (let i = 0; i < 5; i++) {
								const cell = tableBody.rows[rowIndex].cells[i];
								cell.innerHTML = '<div class="circle"></div>';
								cell.classList.add('highlighted'); // Highlight cell
							}
							break;
						case 11: // T pattern
							for (let i = 0; i < 5; i++) {
								tableBody.rows[1].cells[i].innerHTML = '<div class="circle"></div>'; // Horizontal line in middle row
								tableBody.rows[1].cells[i].classList.add('highlighted');
								tableBody.rows[i].cells[2].innerHTML = '<div class="circle"></div>'; // Vertical line in middle column
								tableBody.rows[i].cells[2].classList.add('highlighted');
							}
							break;
						case 12: // Reverse T pattern
							for (let i = 0; i < 5; i++) {
								tableBody.rows[4].cells[i].innerHTML = '<div class="circle"></div>'; // Horizontal line in last row
								tableBody.rows[4].cells[i].classList.add('highlighted');
								tableBody.rows[i].cells[2].innerHTML = '<div class="circle"></div>'; // Vertical line in middle column
								tableBody.rows[i].cells[2].classList.add('highlighted');
							}
							break;
						case 13: // X pattern
							for (let i = 0; i < 5; i++) {
								tableBody.rows[i].cells[i].innerHTML = '<div class="circle"></div>'; // Diagonal from top-left to bottom-right
								tableBody.rows[i].cells[i].classList.add('highlighted');
								tableBody.rows[i].cells[4 - i].innerHTML = '<div class="circle"></div>'; // Diagonal from top-right to bottom-left
								tableBody.rows[i].cells[4 - i].classList.add('highlighted');
							}
							break;
						case 14: // L pattern
							for (let i = 0; i < 5; i++) {
								tableBody.rows[i].cells[0].innerHTML = '<div class="circle"></div>'; // Vertical line in first column
								tableBody.rows[i].cells[0].classList.add('highlighted');
							}
							for (let i = 0; i < 5; i++) {
								tableBody.rows[4].cells[i].innerHTML = '<div class="circle"></div>'; // Horizontal line in last row
								tableBody.rows[4].cells[i].classList.add('highlighted');
							}
							break;
						case 15: // Reverse L pattern
							for (let i = 0; i < 5; i++) {
								tableBody.rows[i].cells[4].innerHTML = '<div class="circle"></div>'; // Vertical line in last column
								tableBody.rows[i].cells[4].classList.add('highlighted');
							}
							for (let i = 0; i < 5; i++) {
								tableBody.rows[4].cells[i].innerHTML = '<div class="circle"></div>'; // Horizontal line in last row
								tableBody.rows[4].cells[i].classList.add('highlighted');
							}
							break;
						case 16: // Half above pattern
							for (let i = 0; i < 3; i++) {
								for (let j = 0; j < 5; j++) {
									tableBody.rows[i].cells[j].innerHTML = '<div class="circle"></div>';
									tableBody.rows[i].cells[j].classList.add('highlighted');
								}
							}
							break;
						case 17: // Half below pattern
							for (let i = 2; i < 5; i++) {
								for (let j = 0; j < 5; j++) {
									tableBody.rows[i].cells[j].innerHTML = '<div class="circle"></div>';
									tableBody.rows[i].cells[j].classList.add('highlighted');
								}
							}
							break;
						case 18: // Full pattern
							for (let i = 0; i < 5; i++) {
								for (let j = 0; j < 5; j++) {
									tableBody.rows[i].cells[j].innerHTML = '<div class="circle"></div>';
									tableBody.rows[i].cells[j].classList.add('highlighted');
								}
							}
							break;
						default:
							console.error('Pattern not recognized:', pattern);
							break;
					}
				});
			}



			function updatePattern() {
				patternGroup = document.getElementById("patt").innerText;
				patternIndex = 0;
				clearInterval(intervalId);
				drawPattern(allPatterns[patternGroup][patternIndex]);
				if (allPatterns[patternGroup].length > 1) {
					intervalId = setInterval(() => {
						patternIndex = (patternIndex + 1) % allPatterns[patternGroup].length;
						drawPattern(allPatterns[patternGroup][patternIndex]);
					}, 2000);
				}
			}
			
        
                    // Function to show alert in the top right corner
                    function showAlert(message, type) {
                        const alertDiv = $('#customAlert');
                        alertDiv.html(message);
                        alertDiv.removeClass('custom-alert-success custom-alert-danger slide-out'); // Clear previous alert classes
                        alertDiv.addClass('custom-alert-' + type + ' slide-in'); // Add the appropriate class and slide-in

                        alertDiv.show(); // Show the alert

                        // Animate the alert by adding the slide-in class
                        setTimeout(function() {
                            alertDiv.removeClass('slide-in'); // Remove slide-in for smooth transition
                        }, 50); // Delay to allow for CSS transition to kick in

                        // Hide the alert after 3 seconds
                        setTimeout(function() {
                            alertDiv.addClass('slide-out'); // Add slide-out class for hiding animation
                            setTimeout(function() {
                                alertDiv.fadeOut(); // Fade out after the slide-out animation
                            }, 300); // Wait for the slide-out transition to complete
                        }, 3000);
                    }
     
</script>


<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <p>&copy; <?php echo date(base64_decode('WQ=='));?> ethiomark. All rights reserved.</p>
        </div>
    </div>
</footer>


</body>
</html>