<?php include ("../../controller/session/session-checker-teacher-student-admin-parents.php"); ?>


<?php


    @$langold = $_GET['lang'];
    
    if ($langold == '' || $langold == NULL || $langold == 'undefined') {
    	$lang = 'english';
    } else {
    	$lang = $_GET['lang'];
    }
    include('../../lang/' . $lang . '.php');

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="EduMESS" />
    <meta name="description" content="EduMESS (Education Management and E-Learning Software Solution) 
        is a leading school management, automation and elearning solution. Since its 
        launch, EduMESS has grown to become a leader. Our clients say that the simplicity 
        of our interface, ease of use, cost effectiveness and excellent customer care is 
        the reason they prefare EduMESS. We have watched schools move from softwares they 
        are using to EduMESS." />
    <meta name="keywords" content="Best, School, Management, Best School, Best School Management, 
        Best School Management Software, Free School Management Software, Portal, 
        School Owner, Group of School Owner, Consultants, Brand Promoters | School Portal Generator ">
  
    
    <!-- SITE TITLE -->
	<title>
		<?php echo $website_title; ?>
	</title>
    <!-- FAVICON AND TOUCH ICONS -->
    <link rel="shortcut icon" href="../../assets/images/website_images/favicon.png" type="image/x-icon">
    <link rel="icon" href="../../assets/images/website_images/favicon.png" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="152x152" href="../../assets/images/website_images/favicon.png">
    <link rel="apple-touch-icon" sizes="120x120" href="../../assets/images/website_images/favicon.png">
    <link rel="apple-touch-icon" sizes="76x76" href="../../assets/images/website_images/favicon.png">
    <link rel="apple-touch-icon" href="../../assets/images/website_images/favicon.png">
    <link rel="icon" href="../../assets/images/website_images/favicon.png" type="image/x-icon">

    <link href="../../assets/plugins/bootstrap5/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">
    <script src="../../assets/plugins/jquery/code.jquery.com_jquery-3.5.1.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>

 	<!-- Boxi Cons -->
	<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

	<link href="../../css/user_css/teacher_css/bootstrap.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
     <link href="../../assets/plugins/notify/wnoty.css" rel="stylesheet">

	<!--CALENDER UI CSS -->
	<link href="../../js/website_js/Charts/morris.css" rel="stylesheet">

	<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js" integrity="sha256-6HSLgn6Ao3PKc5ci8rwZfb//5QUu3ge2/Sw9KfLuvr8=" crossorigin="anonymous"></script>
	
	<!-- font awesome cn -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	<!-- Phone Number CDN -->
	<link href="../../css/website_css/cdnjs/intlTelInput.min.css" rel="stylesheet" />
    <script src="../../css/website_css/cdnjs/intlTelInput.min.js"></script>

	 <!--This - Morris Chart CSS -->
	 <link href="../../assets/plugins/morrisjs/morris.css" rel="stylesheet">

	<!-- style sheet -->
    <link rel="stylesheet" href="../../css/user_css/teacher_css/staffStyle.css">
    <link rel="stylesheet" href="../../css/admin_css/appStyle.css">
    
  

</head>
<style>

		/* language container */
		.centerlangues {
			margin: auto;
			width: 90%;
			background-color: white;
			padding-bottom: 10px;
			padding-top: 10px;
			box-shadow: 0 2px 5px 0 #D3D3D3, 0 3px 11px 0 #D3D3D3;
			border-radius: 9px;
			outline: 1px solid #2e5ca2;
			margin-top: 9%;
    	}
		
		/* Modal CSS */
		/* .grid-container, .modal-open > :not(.modal) {
			filter: blur(3px);
		} */


		.tari_modal{
			border-radius: 25px 25px 0px 0px;
		}

		.pros-flexi-input-affix-wrapper-campus  {
			margin: auto;
			width: 100%;
			background-color: white;
			padding-bottom: 6px;
			padding-top: 6px;
			box-shadow: 0 2px 5px 0 #D3D3D3, 0 3px 11px 0 #D3D3D3;
			border-radius:80px;
			outline: 1px solid #007bff;
			/* align-content: center; */
        }

		.pros-flexi-input{
            outline: none;
            border: none;
            font-family: poppins, sans-serif;
            font-size: 11px;
            user-select: none;
            color:#363949;
        }
		.pasteitems:focus{
			outline: none;
			font-size:29px;
			font-weight:bold;
			top: -20px;
		}
		
		.pasteitems {
			font-size:29px;
			font-weight:bold;
			text-align: center;
		}

		.tari-topBanner {
			background-image: url('../../css/user_css/teacher_css/banners/7.png');
		}

		/* Header Profile */
		.avatar {
			cursor: pointer;
			height: 2.375rem;
			position: relative;
			width: 2.375rem;
		}
		.avatar img {
			height: 100%;
			width: 100%;
			border-radius: 5px;
		}
		.avatar .avatar-initial {
			-ms-flex-align: center;
			-ms-flex-pack: center;
			align-items: center;
			background-color: #8592a3;
			bottom: 0;
			color: #fff;
			display: -ms-flexbox;
			display: flex;
			font-weight: 700;
			justify-content: center;
			left: 0;
			position: absolute;
			right: 0;
			text-transform: uppercase;
			top: 0;
		}
		.avatar.avatar-away:after,
		.avatar.avatar-busy:after,
		.avatar.avatar-offline:after,
		.avatar.avatar-online:after {
			border-radius: 100%;
			bottom: 0;
			box-shadow: 0 0 0 2px #fff;
			content: "";
			height: 8px;
			position: absolute;
			right: 3px;
			width: 8px;
		}
		.avatar.avatar-online:after {
			background-color: #71dd37;
		}
		.avatar.avatar-offline:after {
			background-color: #8592a3;
		}
		.avatar.avatar-away:after {
			background-color: #ffab00;
		}
		.avatar.avatar-busy:after {
			background-color: #ff3e1d;
		}
		.w-px-400 {
			width: 400px !important;
		}
		.dropdown-toggle-hide-arrow > .dropdown-toggle:after,
		.dropdown-toggle-hide-arrow > .dropdown-toggle:before,
		.dropdown-toggle.hide-arrow:after,
		.dropdown-toggle.hide-arrow:before {
			display: none;
		}

		.badge.badge-notifications {
			display: inline-block;
			margin: 0;
			position: absolute;
			top: auto;
			-webkit-transform: translate(-50%, -30%);
			transform: translate(-50%, -30%);
		}
		
		.badge.badge-notifications:not(.badge-dot) {
			font-size: 0.582rem;
			line-height: 0.75rem;
			padding: 0.05rem 0.2rem;
		}
		
	</style>
	
	  <style>
        .coming_soon {
            position: relative;
        }
        
        .coming_soon::after {
            content: "Coming Soon...";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7); /* White with transparency */
            backdrop-filter: blur(1px); /* Apply blur effect */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
        }

    </style>

<body>

    <!-- Preloader HTML structure -->
    <!-- <div class="preloader">
        <span class="smooth spinner"></span>
    </div> -->

    <div class="grid-container">

        <!-- Header -->
        <?php include('../../includes/app-header.php'); ?>
        <!--End Header -->


        <!-- Sidebar -->
        <?php include('../../includes/app-menu.php'); ?>
        <!-- End Sidebar -->


        <!--======Floating Button=========-->
        <!-- Buttons -->
        <?php include('../../includes/floating-btn.php'); ?>
        <!-- End - Buttons -->
        <!--======Floating Button=========-->


        <!---====Side Modal Start Here====-->
        <?php include('../../includes/setting-menu.php'); ?>
        <!---====Side Modal End Here====-->

        <!----Main----->
        <main class="main-container">
                        
                                    <!-------Dashboard Content ------------->
			<div class="main-cards" style="margin-top: 30px;">
				<div class="row g-3">
					<div class="col-sm-8 col-md-8">
						<div class="row g-2">
							<div class="col-sm-12 col-md-12">
								<div class="tari-topBanner">
									<div class="row g-2">
										<div class="col-8">
											<h3 style="color: #ffffff;">Hi, <?php echo $StaffFirstName;?> <?php echo $StaffLastName;?></h3>
											<p style="color: #ffffff;">Welcome Back!</p>
											<small style="color: #ffffff; font-size: 11px;">A teacher dashboard is a powerful tool that empowers educators with valuable insights</small>
											
											<div class="card-text tari_image_row">
											    
												<div class="card-image tari_image-container prosloadstudentimageinclasscontenthere">
												    
												   
														
												</div>
												
												
												
												
											</div> 
										</div>
										<div class="col-4">
											<img class="tari_img-card" src="vi.png" alt="">
										</div>
									</div>
									
								</div>

							</div>
						</div>

						<!-- Course you are taking table -->
							<div class="row" style="margin-top: 20px;">
								<div class="col-sm-12 col-md-12 " >
									<h5 style="font-weight: 600;">Progress Report
										<!--<span class="badge bg-primary" style="font-weight: 300; font-size: 11px; border-radius: 7px;">14</span>-->
									</h5>
									<div class="chiCourseCard " style="height: 95%;">

										<div class="row" style="padding: 10px;">
											<div class="col-9">
											
											</div>
											<div class="col-3">
											    
												<select class="lang prosselectclassforgressreport" style="border: 1px solid #d3d3d3; border-radius: 5px; cursor:pointer;color:gray; margin-right: 10px;" >
													<option value="english">Active</option>
													
												</select> 
												
												<span style="float: right; margin-right: 10px;">
													<span style="font-size: 15px; margin-right: 10px;"><i class="fa fa-search"></i></span>
													<!--<span style="font-size: 15px; margin-left: 5px;"><i class="fa fa-plus-circle" style="color:#0e8aff"></i></span>-->
												</span>
											</div>
											
										</div>

										<div class="prosloadprogressreportcontent" style="padding: 20px;">
											
										</div>
										
									</div>
								</div>

							</div>
						<!-- End Course you are taking table -->

					</div>

					<div class="col-sm-4 col-md-4">
						<div class="topSecCards" style="border-radius: 20px; height: 500px;">
							<h6 style="padding: 15px 10px 0px 20px; font-weight: 700;">Notifications</h6>

								<!-- Calender -->
								<div class="twobase">
								<div class="twocentering">
									<div class="twocalender">
										<div class="twoheader">
											<button type="button" class="twonav" id="twoprevButton">
												<i class='bx bx-left-arrow-alt' style="font-size: 20px;"></i></button>
											<button class="twoheaderName" id="twoheaderName"></button>
											<button type="button" class="twonav" id="twonextButton">
												<i class='bx bx-right-arrow-alt' style="font-size: 20px;"></i>
											</button>
										</div>
										<div class="twocontent">
											<div class="twodayNames" id="twodayNames"></div>
											<div class="twodayDates" id="twodayDates"></div>
											<div class="twomonthSection twoselect" id="twomonthSection"></div>
											<div class="twoyearSection twoselect" id="twoyearSection"></div>
										</div>
									</div>
								</div>
							</div>
							<!-- Calender -->
							
							
							  <div id="carouselExampleSlidesOnly" style="padding: 10px 20px 0px 20px;" class="carousel slide" data-bs-ride="carousel">
                                    
                                    <!--<div class="carousel-inner prosloadcalendarevent">-->
                                     
                                    <!--</div>-->
                                </div>
							
						

							<!--<a href="" style="font-weight: 600; float: right; margin-right: 30px; margin-top: 20px; text-decoration: none; ">-->
							<!--	View all-->
							<!--</a>-->
						</div>

					</div>

				</div>
			</div>

			<div class="main-cards" style="margin-top: 30px;">
				<div class="row g-3">
					
					<div class="col-sm-4 col-md-4" style="padding-top: 30px;">
						
						
						    <h5 style="font-weight: 600;">Communication Book</h5>
						    
						    <div class="chiCourseCard coming_soon">
							<div class="row" style="padding: 15px;">
								<div class="col-9">
								
								</div>
								<div class="col-3">
									<a href="" style="font-weight: 600; text-decoration: none;">View all</a>
								</div>
							</div>

							<div style="padding: 10px;">
								<div class="card chiPerCardLeft">
									<div class="card-body">
										<div class="row g-2">
											<div class="col-2">
												<div class="chiBadgeCardOrange">
													<span class="chiBadgeCardTextOrange">W</span>
												</div>
											</div>
											<div class="col-10">
												<a href="" style="color: #666666; text-decoration: none;">
													<strong style="font-size: 13px;">Writing Skills</strong>
													<br>
													<small style="color: #d8d8d8; font-weight: 600;"><i class='bx bx-time-five'></i>1hrs 20min</small>
												</a>
											</div>
										</div>
									</div>
								</div>

								<div class="card chiPerCardLeft">
									<div class="card-body">
										<div class="row g-2">
											<div class="col-2">
												<div class="chiBadgeCardOrange">
													<span class="chiBadgeCardTextOrange">W</span>
												</div>
											</div>
											<div class="col-10">
												<a href="" style="color: #666666; text-decoration: none;">
													<strong style="font-size: 13px;">Writing Skills</strong>
													<br>
													<small style="color: #d8d8d8; font-weight: 600;"><i class='bx bx-time-five'></i>1hrs 20min</small>
												</a>
											</div>
										</div>
									</div>
								</div>

								<div class="card chiPerCardLeft">
									<div class="card-body">
										<div class="row g-2">
											<div class="col-2">
												<div class="chiBadgeCardOrange">
													<span class="chiBadgeCardTextOrange">W</span>
												</div>
											</div>
											<div class="col-10">
												<a href="" style="color: #666666; text-decoration: none;">
													<strong style="font-size: 13px;">Writing Skills</strong>
													<br>
													<small style="color: #d8d8d8; font-weight: 600;"><i class='bx bx-time-five'></i>1hrs 20min</small>
												</a>
											</div>
										</div>
									</div>
								</div>
								

							</div>
						</div>

						
					</div>

					<div class="col-sm-4 col-md-4 " style="padding-top: 30px;">
						<h5 style="font-weight: 600;">Attendance Summary</h5>
						<div class="chiCourseCard coming_soon">
							

							<div class="row" style="padding: 15px;">
								<div class="col-8">
									<p style="font-weight: 500;">Total Hours Spent</p>
								</div>
								<div class="col-4">
									<select class="lang" style="border: 1px solid #d3d3d3; border-radius: 5px; cursor:pointer;color:gray; margin-right: 10px;" id="changelanguage">
										<option value="english">June 2023</option>
									</select> 
								</div>
							</div>

							<div id="attendance-chart" style="padding-top: 20px;"></div>
						</div>
					</div>

					<div class="col-sm-4 col-md-4 " style="padding-top: 30px;">
						<h5 style="font-weight: 600;">Notice Board</h5>
						<div class="chiCourseCard coming_soon">
							<div class="row" style="padding: 15px;">
								<div class="col-9">
								
								</div>
								<div class="col-3">
									<a href="" style="font-weight: 600; text-decoration: none;">View all</a>
								</div>
							</div>

							<div style="padding: 15px;">
								<div class="card chiPerCardLeft">
									<div class="card-body">
										<div class="row g-2">
											<div class="col-2">
												<div class="chiBadgeCardOrange">
													<span class="chiBadgeCardTextOrange">W</span>
												</div>
											</div>
											<div class="col-8">
											    
												<a href="" style="color: #666666; text-decoration: none;">
													<strong style="font-size: 13px;"> Writing Skills</strong>
													<br>
													<small> Michael has imporoved in his Writing skills over the week...</small>
												</a>
												
											</div>
											<div class="col-2">
												<div style="padding-top: 20px;">
													<small style="font-size: 8px;">10min ago</small>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="card chiPerCardLeft">
									<div class="card-body ">
										<div class="row g-2">
											<div class="col-2">
												<div class="chiBadgeCardOrange">
													<span class="chiBadgeCardTextOrange">W</span>
												</div>
											</div>
											<div class="col-8">
												<a href="" style="color: #666666; text-decoration: none;">
													<strong style="font-size: 13px;"> Writing Skills</strong>
													<br>
													<small> Michael has imporoved in his Writing skills over the week...</small>
												</a>
												
											</div>
											<div class="col-2">
												<div style="padding-top: 20px;">
													<small style="font-size: 8px;">10min ago</small>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="main-cards" style="margin-top: 30px; padding-bottom: 50px;">
				<div class="row g-3">
					
					<div class="col-sm-8 col-md-8" style="padding-top: 28px;">
						<h5 style="font-weight: 600; padding: 5px;">Assignment</h5>

						<div class="chiCourseCard">

							<div class="row g-2" style="padding: 15px;">
								<div class="col-9">
								
								</div>
								<div class="col-3">
									<div style="display: inline;">
										<select class="lang prosloadassignmentdropdown" style="border: 1px solid #d3d3d3; border-radius: 5px; cursor:pointer;color:gray; margin-right: 10px;" >
											<option value="class">Class</option>
											  
										</select> 

										<select class="lang prosloadsubjectforassignmentdash" style="border: 1px solid #d3d3d3; border-radius: 5px; cursor:pointer;color:gray;" >
											<option value="subject">Subject</option>
										</select> 
									</div>
								</div>
							</div>
						
							<div id="assignment-chart" style="padding-top: 10px; padding-left: 35px;"></div>
						</div>
					</div>

					<div class="col-sm-4 col-md-4 " style="padding-top: 30px;">
						
					</div>

				</div>
			</div>
			<!-------End Dashboard Content ------------->
			<div class="emmaloadinstitutionforpolicy"></div>
        </main>
    </div>

                <!--EMMA LOAD POLICY HERE-->
            <div class="modal fade" id="staticBackdropforteacherprivacypolicy" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        		<div class="modal-dialog">
        			<div class="modal-content">
        
        				<div class="modal-header">
        					<h5 class="modal-title" id="staticBackdropLabel"><i class="fas fa-file-contract text-primary"> Privacy Policy </i></h5>
        				</div>
        
        				<div class="modal-body">
        				<input type="hidden" class="keepinstitution">
        
        					<div class="emmapolicycard mt-2"></div>
        				</div>
        
        				<div class="modal-footer">
        					<button type="button" class="btn btn-primary emma_accept_policy_button"><i class="fas fa-check-circle"></i> Accept </button>
        				</div>
        				
        			</div>
        		</div>
        	</div>
        <!--EMMA LOAD POLICY HERE-->



<!-- Modal container it includes the overlay -->
	<div class="modal fade" id="exampleModal" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg tari_modal_dialog">
			<div class="modal-content tari_modal">
			<div class="modal-header border-0">
				<!-- <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> -->
				<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
			</div>
			<div class="modal-body">
				<!-- =======default language start here====== -->
				<div id="changelang"  style="display:none; background-color:white;border-radius:21px; padding-top:20px; padding-bottom:20px;">
					<center>
						<img src="vi.png" style="width:15%;">
					</center>
					<center>
						<h4>
							<b>
							<?php echo $portal_prelanguagequestion; ?>
							</b>
						</h4>
					</center>
					<center>
						<p class="" style="color:#5A5A5A;font-size:15px;margin-left:5%;">
							<?php echo $portal_hi; ?>
							<b>
								<?php echo  ucwords($StaffFirstName); ?>
							</b>,
							<?php echo $portal_sellang_info; ?>
							<br>
							<?php echo $portal_sellang_des; ?>
						</p>
					</center>
					<div class="card-body">
						<div class="row" align="center">
							<div class="col-sm-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang english with-gap englishclick"  value="english" id="radio-btn" name="radio-btn">
									<label style="margin-left:15px;font-size:13px;" for="radio-btn">English</label>
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-us"></i></span> -->
								</div>
							</div>
							<div class="col-sm-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang french with-gap frenchclick" value="french" id="radio-btnone" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="radio-btnone">français</label>
										
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-fr"></i></span> -->
								</div>
							</div>
							<div class="col-sm-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang spanish with-gap spanishclick"  value="spanish" id="spanish" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="spanish">español</label>	
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-es"></i></span> -->
								</div>
							</div>
							<div class="col-sm-4">

								<div class="centerlangues">

									<input type="radio" class="defaultlang chinese with-gap chineseclick"  value="chinese" id="chinese" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="chinese">中文</label>
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-ch"></i></span> -->
								</div>

							</div>
							<div class="col-sm-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang arabic with-gap arabicclick"  value="arabic" id="arabic" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="arabic">العربية</label>
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-eh"></i></span> -->
								</div>
							</div>
							<div class="col-sm-4 col-lg-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang hindi with-gap hindicclick"  value="hindi" id="hindi" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="hindi">हिंदी</label>
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-ci"></i></span> -->
								</div>
							</div>
							<div class="col-sm-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang yoruba with-gap yorubaclick"  value="yoruba" id="yoruba" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="yoruba">Yoruba</label>
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-ch"></i></span> -->
								</div>
							</div>
							<div class="col-sm-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang hausa with-gap hausaclick"  value="hausa" id="hausa" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="hausa">Hausa</label>
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-eh"></i></span> -->
								</div>
							</div>
							<div class="col-sm-4 col-lg-4">
								<div class="centerlangues">
									<input type="radio" class="defaultlang igbo with-gap igboclick"  value="igbo" id="igbo" name="radio-btn" style="cursor:pointer;">
									<label style="margin-left:15px;font-size:13px;" for="igbo">Igbo</label>
									<!-- <span style="float:right;margin-right:5%;"><i
											class="flag-icon flag-icon-ci"></i></span> -->
								</div>
							</div>
							<br>
							<button type="button" id="defaultlangbtn" data-id="11" style="background-color:#007bff;cursor:pointer;margin-top:2%;margin-left:2%;width:96%;" class="btn btn-block btn-lg text-light">
								<?php echo $portal_proceed; ?> 
								<i class="fa fa-long-arrow-right" style="font-size: 13px;"></i>
							</button>
						</div>
					</div>

				</div>
				<!-- =======default language end here====== -->

				 <!-- =======ai welcoming  start here====== -->
				 <div id="displayaiwelcome" style="background-color:white;padding:8px;padding-bottom:15px;margin-top:5%;border-radius:10px;display:none;"> 
					<div class="row">
						<div class="col-sm-12">
						<u style="cursor:pointer;float:right;margin-right:3%;" class="" id="previoutAI">
								<i class="fa fa-long-arrow-left" style="font-size:11px;"></i>
								<?php echo $portal_back; ?>
						</u>
						</div>
					</div>    
					<div class="row">
						<div class="col-sm-7" align="left" style="margin-top:8%;">
							<p> <strong><?php echo $portal_welcometo; ?>
									<div style="font-size:14px;">
										<?php echo $portal_AI_onboarding_introduction; ?>
									</div>
								</strong>
							</p>
							<button type="button" id="ai-btn" data-id="10"
								style="background-color:#007bff;cursor:pointer;margin-top:5%;width:93%;font-size:15px;"
								class="btn btn-block btn-lg text-light"><?php echo $portal_proceed; ?>
								<i  class="fa fa-long-arrow-right" style="font-size: 13px;float:right;"></i>
							</button>
						</div>
						<div class="col-sm-5 d-none d-sm-block  d-xm-block text-right" id="aimessageimagediv">
							<img src="../../assets/images/users/aiimage.jpg" id="aiimage">
						</div>
					</div>
				</div>
				<!-- =======ai welcoming  end here====== -->

				<!-- ======Verify Phone Number===== -->
				<div class="row" id="verifyphone" style="display:none;padding-left:5px; padding-right:5px;">
					<div class="col-sm-12" align="center">
						<u style="cursor:pointer;float:right;margin-right:3%;" class="" id="previousdisplay">
							<i class="fa fa-long-arrow-left" style="font-size:11px;"></i>
							<?php echo $portal_back; ?>
						</u>
						<div class="row">
							<h4 class="schoolheading"  style="line-height: 35px; color:black;" >Verify Phone Number</h4><br>
							<span class="">How do you wish yo be verified, Kindly select an option below</span><br>
							<span class=""></span><br>
						</div>
					</div>
					<div class="col-sm-12">
						<a href="" id="pros-watchtutorial" style="color:blue;font-size:13px;cursor:pointer;float:right;"><i class=" fa fa-play-circle" style="font-size:20px;"></i> Watch tutorial</a> 
					</div>
					<div class="col-md-6 mb-3">
                    	<div class="card stafflink-card bringformlink" data-id="1" style="cursor:pointer;">
						<!-- Card content for box 1 -->
                            <div class="card-body" style="border:none;border:1px solid #007bff;border-radius:5px;height:100px;">
							<div class="radio-group">
									<input type="radio" style="cursor:pointer;float:right;" class="with-gap inviteuser-create  bringformlink" id="invitelink" value="Invite Staff" name="inviteuser-link">
									<label class="ml-1 mb-2" for="invitelink" style="font-weight:600;cursor:pointer;">
										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="green" class="bi bi-whatsapp" viewBox="0 0 16 16">
										<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
										</svg> WhatsApp 
									</label>
								</div>
								<p style="font-size: 12px;">You will recieve an OTP Code on your Whatsapp.</p>
							</div>
						</div>
					</div>  
					<div class="col-md-6 mb-3">
						<div class="card stafflink-card bringformlink" data-id="2" style="cursor:pointer;">
							<div class="card-body" style="border:none;border:1px solid #007bff;border-radius:5px;;height:100px;">
								<div class="radio-group">
									<input type="radio" style="cursor:pointer;float:right;" class="with-gap inviteuser-create bringformlink" id="createstaff" value="Create staff" name="inviteuser-link">
									<label class="ml-1 mb-2" for="createstaff" style="font-weight:600;cursor:pointer;">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-envelope" viewBox="0 0 16 16">
										<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
										</svg> SMS
									</label>
								</div>
								<p style="font-size: 12px;">You will recieve an OTP Code on your Phone</p>
							</div>
						</div><br>
					</div>
					<div class="row">
						<div class="col-sm-12"  id="displaystaffemail" style="display:none; margin-left:10px;">
							<div class="row">
								<div class="col-sm-12 mb-3">
									<div class="pros-geneclass-label"  style="width: 100%; text-transform: uppercase;position: relative; font-weight: 700; display: block; font-size: 11px; font-family: poppins, sans-serif;"><label for="schoolName"></label></div>
										<div class="pros-flexi-input-affix-wrapper-campus">
											<input name="WhatsappNumber[main]" class="pros-flexi-input WhatsappNumber" placeholder="e.g XXXX-XXX-XXXX" id="WhatsappNumber" type="text" spacebottom="10px" required="" value ="<?php echo $StaffWhatsappNumber; ?>" style="width: 95%;margin-left:4%;">
										</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<div class="form-group">
										<button type="button" id="whatsapp_send" class="btn btn-primary form-control" style="font-size:14px; border-radius: 20px;">Send OTP</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-12" id="displaystaffemail2" style="display:none;">
						<div class="row">
								<div class="col-sm-12 mb-3">
									<div class="pros-geneclass-label"  style="width: 100%; text-transform: uppercase;position: relative; font-weight: 700; display: block; font-size: 11px; font-family: poppins, sans-serif;"><label for="schoolName"></label></div>
										<div class="pros-flexi-input-affix-wrapper-campus">
											<input name="WhatsappNumber2[main]" class="pros-flexi-input WhatsappNumber2" placeholder="e.g XXXX-XXX-XXXX" id="WhatsappNumber2" type="text" spacebottom="10px" required="" value ="<?php echo $StaffWhatsappNumber; ?>" style="width: 95%;margin-left:4%;">
										</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<div class="form-group">
										<button type="button" id="sms_send" class="btn btn-primary form-control" style="font-size:14px; border-radius: 20px;">Send OTP</button>
									</div>
								</div>
							</div>
						</div>           
					</div>
				</div>
				<!-- ====== End Verify Phone Number===== -->

				<!-- Verification Code -->
				<div class="row" align="center" id="verifysms" style="display:none;">
					<div class="col-md-12">
						<img id="edumessblue" width="150" class="img-fluid" src="../../assets/images/website_images/edumes-blue.png" style="margin-top:2.5%;">
						<div  id="" class="" style="box-shadow:0 0px 0px 0 #D3D3D3; border-radius:10px; margin-top:2%;">
							<h3 style="padding-top:40px; padding:20px;" id="verificatitle"><?php echo $website_signup_verication_title; ?></h3>
							<!-- <p style="color:#92929D;font-size:15px;font-family: Arial, Helvetica, sans-serif;padding-top:40px;"><?php echo $website_signup_verication_title_des;?> <?php echo $email;?></p>
							<p style="color:#92929D;font-size:15px;padding-top:40px;padding-bottom:40px;" ><?php echo $website_signup_verication_title_dessub;?></p>
								<span id="pwmatcherr"></span> -->
								<div class="centerverification pin">
									<input type="text"  id="areaCode" value="" size = "1" maxlength="1"  autocomplete="off" required pattern="\d{1}" autofocus class="pasteitems" style="width:40px;border:none;background-color:#F1F5F9;border-bottom:2px solid #00008B;">&nbsp&nbsp
									<input type="text" id="firstNum" value=""  size = "1" maxlength="1" autocomplete="off" required pattern="\d{1}" class="pasteitems"  style="width:40px;border:none;background-color:#F1F5F9;border-bottom:2px solid #00008B;">&nbsp&nbsp
									<input type="text" id="secondNum" value=""  size = "1" maxlength="1" autocomplete="off" required pattern="\d{1}" class="pasteitems"  style="width:40px;border:none;background-color:#F1F5F9;border-bottom:2px solid #00008B;">&nbsp&nbsp
									<input type="text" id="thirdNum" value=""  size = "1" maxlength="1" autocomplete="off" required pattern="\d{1}" class="pasteitems" style="width:40px;border:none;background-color:#F1F5F9;border-bottom:2px solid #00008B;">&nbsp&nbsp
									<input type="text" id="fourthNum" value=""  size = "1" maxlength="1" autocomplete="off" required pattern="\d{1}" class="pasteitems" style="width:40px;border:none;background-color:#F1F5F9;border-bottom:2px solid #00008B;">&nbsp&nbsp
									<input type="text" id="fifthNum" value=""  size = "1" maxlength="1" autocomplete="off" required pattern="\d{1}" class="pasteitems" style="width:40px;border:none;background-color:#F1F5F9;border-bottom:2px solid #00008B;">&nbsp&nbsp
								</div> 
								<br>

								<!-- Timer display -->
								<span id="timer">00:00</span>
								<br>

								<span id="timer2"></span>

								<span id="timer3"></span>
								
								
								<!--w-10 h-[100px] border-b-2 border-[#35977F] !bg-[#F1F5F9] undefined focus:outline-none focus:border-[#35977F] focus:border-b-4 text-center text-2xl font-semibold -->
								<div class="row" id="hide_resend">
									<span style="margin-top:50px;color:#92929D;font-size:17px;">
										<?php echo $website_signup_verication_title_didrecicecode; ?>
									</span><br>
									<span class="button" id="sms_send" style="color: #0066ff;cursor: pointer; font-size:17px;">
										<?php echo $website_signup_verication_title_resendcode; ?>
									</span>
									<br>
								</div>

								<div class="row col-6 mt-2">
									<button type="button" id="verifyotp" class="btn waves-effect waves-light text-light"  style="background-color:#0047AB;"><?php echo $website_signup_verication_title_btntitle;?></button><br><br>
								</div>
					</div>    
						<!-- <p style="padding-top:40px;color:#92929D;" id="signin"><?php echo $website_signup_verication_title_alreadyhavacc;?> <a href="../sign-in?lang=<?php echo $lang; ?>"><?php echo $website_signup_verication_title_havacclink;?></a></p> -->
						</div> 
				</div>
				<!-- End of Verification Code -->
		</div>
			<!-- <div class="modal-footer border-0">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div> -->
			</div>
		</div>
	</div>


    

    <!--Script-->
    <!--jquery knob -->
    <script src="../../assets/plugins/knob/jquery.knob.js"></script>

    <script>
        $(function () {
            $('[data-plugin="knob"]').knob();
        });

        // $(window).on('load', function() {
        //     // When the window finishes loading, hide the preloader
        //     $('.preloader').fadeOut('slow');
        // });



    </script>
    
    
    <!-- Chima JS- -->
	 <script src="../../js/user_js/teacher_js/staffScript.js"></script>
    <script src="../../js/user_js/bootstrap.bundle.min.js"></script>

    <!--CALENDER UI JS -->
	<script src="../../js/website_js/Calender UI/cal.js"></script>
    
    <!--Chart UI JS -->
    <script src="../../js/website_js/Charts/morris.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
    <!--google chart-->

    <!--Apexcharts-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.40.0/apexcharts.min.js"></script>

	<!-- Complete Setup JS -->
	<?php include('../../controller/js/teacher/completeSetup.php'); ?>

	 <!--Notifier UI -->
	 <script src="../../assets/plugins/notify/wnoty.js"></script>
	 <script src="../../controller/js/teacher/emma_policy.js"></script>
	  <script src='../../controller/js/student/prosloadstudentcalendarcontenthere.js'></script>
	  
	  <script src='../../controller/js/teacher/prosloadteachersdasborad.js'></script>
    
   <!-- Language Translate -->
	<script>
		$('body').on('change', '#changelanguage', function () {

			var lang = $(this).val();
			

			localStorage.setItem('lang', lang);

			location.href = '<?php echo $defaultUrl; ?>/home/?lang=' + lang;
		});

		$(document).ready(function () {
			$('#changelanguage').val('<?php echo $lang; ?>');

		});
	</script>

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

			var elts = document.getElementsByClassName('pasteitems')
				Array.from(elts).forEach(function(elt){
				elt.addEventListener("keyup", function(event) {
					// Number 13 is the "Enter" key on the keyboard
					if (event.keyCode === 13 || elt.value.length == 1) {
					// Focus on the next sibling
					elt.nextElementSibling.focus()
					}
				});
			})

			// Listen to paste on the document
			document.addEventListener("paste", function(e) {
				// if the target is a text input
				if (e.target.type === "text") {
				var data = e.clipboardData.getData('Text');
				// split clipboard text into single characters
				data = data.split('');
				// find all other text inputs
				[].forEach.call(document.querySelectorAll("input[class=pasteitems]"), (node, index) => {
					// And set input value to the relative character
					node.value = data[index];
					});
				}
			});

		


		/// Simple Dounut for Attendance
		var attendanceOptions = {
			series: [41, 17, 15],
			labels: ['Yealy', 'Monthly', 'Daily',],
			chart: {
			width: 350,
			type: 'donut',
		},
		plotOptions: {
			pie: {
			startAngle: -90,
			endAngle: 270
			}
		},
		dataLabels: {
			enabled: false
		},
		fill: {
			type: 'gradient',
		},
	
		legend: {
			formatter: function(val, opts) {
			return val + " - " + opts.w.globals.series[opts.seriesIndex]
			}
		},
			responsive: [{
			breakpoint: 480,
			options: {
				chart: {
					width: 200
				},
				legend: {
					position: 'bottom'
				}
			}
			}]
		};

		var attendanceChart = new ApexCharts(document.querySelector("#attendance-chart"), attendanceOptions);
		attendanceChart.render();

	});
	
	</script>
    
    
</body>

</html>