<?php 
    include ("../../controller/session/session-checker-teacher-student-admin-parents.php");
    
    // Display all errors
    error_reporting(E_ALL);
    ini_set('display_errors', 1);

?>

    <?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'>

    <!-- fontawesome cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

    <!-- Animate.css CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-..." crossorigin="anonymous" />

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

    <!-- phone number country code -->
    <link href="../../assets/plugins/intlTelInput.min.css" rel="stylesheet"/>
    <script src="../../assets/plugins/intlTelInput.min.js"></script>
    
    <script src="../../assets/plugins/dselect.js"></script>

    <!-- notification css-->
    <link href="../../assets/plugins/notify/wnoty.css" rel="stylesheet">
    
    

    <link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">

    <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'>

    <!-- image Croppie -->
    <link rel="stylesheet" href="../../assets/plugins/Croppie/croppie.css"></link>
    
    <!-- Bootstrap Tagsinput CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">

     <!-- Bootstrap Tagsinput JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
    
    <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>
    
    
    <style>
        .countdown {
            display: flex;
            justify-content: center;
            gap: 25px;
            position: relative;
        }
        .box{
            width: 10vmin;
            height: 10vmin;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            position: relative;
            box-shadow: 15px 15px 30px #cacbcc;
            border-radius: 10px 10px 10px 10px;
        }
        .box:after{
            content: "";
            position: absolute;
            background-color: rgba(255,255,255,0.12);
            height: 100%;
            width: 50%;
            left: 0;
            border-radius: 10px 10px 10px 10px;
        }
        span.num{
            background-color: #f5f5f5;
            height: 100%;
            width: 100%;
            display: grid;
            place-items: center;
            font-weight: 600;
            font-size: 20px;
            border-radius: 10px 10px 0 0;
        }
        span.text{
            font-size: 10px;
            background-color: #007ffb;
            display: block;
            width: 100%;
            text-align: center;
            padding: 0.5em 0;
            font-weight: 400;
            color: #fff;
            border-radius: 0px 0px 10px 10px;
        }
    </style>
    
    
</head>

<body>
    <div id="gx-overlay">
		<div class="gx-ellipsis">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</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">
            
            
            
             <?php 
            
                
                        $prosselectschoolplanconetentnew = mysqli_query($link,"SELECT * FROM `institution` WHERE InstitutionID='$GroupOfSchoolID'");
                        $prosselectschoolplanconetentcntnew = mysqli_num_rows($prosselectschoolplanconetentnew);
                        
                        $prosselectschoolplanconetentcntrownew = mysqli_fetch_assoc($prosselectschoolplanconetentnew);
                        
                        $NoDaysToCountnew = $prosselectschoolplanconetentcntrownew['NoDaysToCount'];
                        $SubscriptionStatusnew = $prosselectschoolplanconetentcntrownew['SubscriptionStatus'];
                        
                        $StartCountDatenew = $prosselectschoolplanconetentcntrownew['StartCountDate'];
                        
                        
                        $currentDate = date('Y-m-d');
    
                        $startCountingDate = date("Y-m-d", strtotime("$StartCountDatenew + $NoDaysToCountnew day"));
                        
                        
                        
                                         
                     if ($startCountingDate >= $currentDate) {
                        
                       
                        if($SubscriptionStatusnew == '0')
                        {
                            
                            
                            
                           $styleContent =   '';
                            
                            
                            
                        }else
                        {
                             $styleContent =   'style="border-radius: 14px;display:none;"';
                        }
                        
                        
                       
                        
                    } else {
                        
                       $styleContent =   'style="border-radius: 14px;display:none;"';
                    }
                         
                    
                    
                    
                    
                    
            
            ?>
            
            
                 
            
            
            
                 <div class="row prosloadcountdowncontentcontent">
                     
                        <input type="hidden" id="prosloadstartdate" value="<?php echo $currentDate; ?>">
                        <input type="hidden" id="prossubscriptionstatus" value="<?php echo $SubscriptionStatusnew; ?>">
                        <input type="hidden" id="prosloadenddate" value="<?php echo $startCountingDate; ?>"> 
                    <div class="col-12">
                        <div class="card" id="prosloadcountdowncontent"  <?php echo $styleContent; ?> >
                              <div class="card-body" >
                                      <button type="button" class="btn-close float-end prosclionhidetimmercontentbtn" data-bs-dismiss="modal" aria-label="Close"></button>
                                    <h5 class="card-title">EDUMESS Subscription Alert</h5>
                                        <div class="row">
                                            <div class="col-md-4">
                                               <h6 class="card-subtitle" style="font-size:14px;">Hello, <b class="prosloadnamecountdown"><?php echo $SchoolGeneralName; ?></b> <br> <span class="prosloadcoundes">your subscription plan with EDUMES Software is due <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#profeepaymentmodal">Click to pay</a></span></h6>
                                            </div>
        
                                                  <input type="hidden" class="prosloadstartcoundown">
                                                  <input type="hidden" class="prosloadendcoundown"> 
                                            <div  class="col-md-5">
        
                                                    <div class="countdown pt-3">
                                                        <div class="box">
                                                            <span class="num" id="day-box">00</span>
                                                            <span class="text">D</span>
                                                        </div>
                                                        <div class="box">
                                                            <span class="num" id="hr-box">00</span>
                                                            <span class="text">H</span>
                                                        </div>
                                                        <div class="box">
                                                            <span class="num" id="min-box">00</span>
                                                            <span class="text">M</span>
                                                        </div>
                                                        <div class="box">
                                                            <span class="num" id="sec-box">00</span>
                                                            <span class="text">S</span>
                                                        </div>
                                                    </div>
                                            </div>  
                                                 
        
        
                                           
        
                                            <div  class="col-md-3">
        
                                            
                                                <div class="col-sm-12">
                                                    <!--<a href="" style="font-size: 23px; font-weight: 500; text-decoration: none; color: #666666;">-->
                                                    <!--    Fee: ₦<span  id="prosloadtotalamountchargefee"></span>-->
                                                    <!--</a>-->
                                                </div>
                                           
                                                     
                                                <button type="button "
                                                        class="btn waves-effect waves-light  btn-rounded btn-danger  mt-2" data-bs-toggle="modal" data-bs-target="#profeepaymentmodal">
                                                        Pay Now
                                                </button><p></p>
        
                                            </div>
                                        </div>
                                </div>
                            </div>
                       </div>
                </div>
                <p></p>
            
            

            <div class="main-title">
                <span class="font-weight-bold">Hello <?php echo $StaffFirstName; ?> </span>
                <br>
                <small style="font-size: 12px;">Welcome Back !!!</small>
            </div>

            <div id="hold_dashboard_data"></div>
            <div class="main-cards" style="margin-top: 10px;">

                <div class="row g-3">

                    <div class="col-sm-3 col-md-3">

                        <div class="topSecCards" style="height: 110px; background: #0066FF; ">

                            <div style="display: flex;">
                                <div>
                                    <h6 style="padding-left: 10px; padding-top: 10px; font-size: 13px; color: #fff;">
                                        Total Students</h6>

                                    <h6
                                        style="color: #fff; padding-left: 10px; padding-top: 10px;font-size: 15px; font-weight: 600;" id="get_total_students">
                                        </h6>

                                    <div style="color: #fff; padding-left: 10px; font-size: 10px;" id="abba_display_stud_increase">
                                        
                                    </div>
                                </div>
                                <div class="chartLight" style="margin-top: 53px; margin-left: 13px;">
                                    <img src="../../assets/images/adminImg/chart-white.png" style="width: 70px;" alt="">
                                </div>
                            </div>


                        </div>

                        <br>

                        <div class="row g-3">
                            <div class="col-sm-12">
                                <div class="topSecCards" style="padding-bottom: 10px;">
                                    <h6 style="padding: 30px 10px 5px 20px; font-weight: 600;">Analytics</h6>

                                    <div style="padding-top: 20px; padding-left: 15px;">

                                        <div class="row g-3">
                                            <div class="col-9">
                                                <small style="font-weight: 500; font-size: 12px;">Total Income This Term</small>
                                                <h6 style="color: #000000; font-weight: 600;" id="total_income"></h6>
                                            </div>
                                            <div class="col-3">
                                                <div
                                                    style="height: 40px; width: 40px; border-radius: 50%; background-color: rgb(206, 255, 255);">
                                                    <span style="font-size: 25px; padding-left: 8px; color: #2a7df8;">
                                                        <i class='bx bx-dollar-circle'></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row g-3 pt-2">
                                            <div class="col-9">
                                                <small style="font-weight: 500; font-size: 12px;">Total Expected Income</small>
                                                <h6 style="color: #000000; font-weight: 600;" id="total_expected_income"></h6>
                                            </div>
                                            <div class="col-3">
                                                <div
                                                    style="height: 40px; width: 40px; border-radius: 50%; background-color: rgb(206, 255, 255);">
                                                    <span style="font-size: 25px; padding-left: 8px;  color: #2a7df8;">
                                                        <i class='bx bx-sync'></i> </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row g-3 pt-2">
                                            <div class="col-9">
                                                <small style="font-weight: 500; font-size: 12px;">Total Debt</small>
                                                <h6 style="color: #000000; font-weight: 600;" id="total_dept"></h6>
                                            </div>
                                            <div class="col-3">
                                                <div
                                                    style="height: 40px; width: 40px; border-radius: 50%; background-color: rgb(206, 255, 255);">
                                                    <span style="font-size: 25px; padding-left: 8px; color: #2a7df8;">
                                                        <i class='bx bx-sync'></i> </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row g-3 pt-2">
                                            <div class="col-9">
                                                <small style="font-weight: 500; font-size: 12px;">Wallet Balance</small>
                                                <h6 style="color: #000000; font-weight: 600;" id="wallet_balance"></h6>
                                            </div>
                                            <div class="col-3">
                                                <div
                                                    style="height: 40px; width: 40px; border-radius: 50%; background-color: rgb(206, 255, 255);">
                                                    <span
                                                        style="font-size: 23px; font-weight: 600; padding-left: 10px; color: #2a7df8;">
                                                        % </span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div style="margin-left: 10px; width: 90%; border: 1px solid grey; "></div>

                                    <div style="padding-top: 10px; padding-left: 20px;">
                                        <a href="<?php echo $defaultUrl;?>app/finance" style="font-weight: 500; font-size: 12px;">More Insights
                                            <i class='fa fa-chevron-right' style="font-size: 12px;"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6 col-md-6">
                        <div class="row g-3">

                            <div class="col-sm-6">
                                <div class="topSecCards" style="height: 110px;">

                                    <div style="display: flex;">
                                        <div>
                                            <h6 style="padding-left: 10px; padding-top: 10px; font-size: 13px;">Students
                                                Owning</h6>

                                            <h6
                                                style="padding-left: 10px; padding-top: 10px; font-size: 15px; font-weight: 600;" id="student_owing">
                                            </h6>

                                            <div style="padding-left: 10px; font-size: 10px;" id="student_owing_percent">
                                                
                                            </div>
                                        </div>
                                        <div class="chartLight" style="margin-top: 53px; margin-left: 13px;">
                                            <img src="../../assets/images/adminImg/chart-orange.png" style="width: 70px;"
                                                alt="">
                                        </div>
                                    </div>


                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="topSecCards" style="height: 110px;">

                                    <div style="display: flex;">
                                        <div>
                                            <h6 style="padding-left: 10px; padding-top: 10px; font-size: 13px;">Students
                                                Payed</h6>

                                            <h6
                                                style="padding-left: 10px; padding-top: 10px; font-size: 15; font-weight: 600;" id="student_payed">
                                                </h6>

                                            <div style="padding-left: 10px; font-size: 10px;" id="student_payed_percent">
                                               
                                            </div>
                                        </div>
                                        <div class="chartLight" style="margin-top: 48px; margin-left: 13px;">
                                            <img src="../../assets/images/adminImg/chart-blue.png" style="width: 70px;"
                                                alt="">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <br>

                        <div class="row g-3" style="padding-top: 16px;">
                            <div class="col-sm-12">
                                <div class="topSecCards coming_soon">

                                    <div class="row g-3">
                                        <div class="col-sm-5">
                                            <h6 style="padding: 10px 10px 5px 20px; font-weight: 600;">
                                                SMS Breakdown By Unit Used</h6>

                                            <div id="gauge-chart" style="padding-top: 100px; width: 100%;"></div>

                                        </div>
                                        <div class="col-sm-7" style="border-left: 1px solid #9c9a9a;">

                                            <div style="padding-right: 10px;">
                                                <table class="table" style="font-size: 12px; ">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col" style="font-weight: 700;">All</th>
                                                            <th scope="col" style="color: #666666; font-weight: 700;">
                                                                SMS</th>
                                                            <th scope="col" style="color: #666666; font-weight: 700;">
                                                                Email</th>
                                                        </tr>

                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <th scope="row">Student</th>
                                                            <td>Fees Payment </td>
                                                            <td>3d ago</td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row">Parent</th>
                                                            <td>Fees Payment</td>
                                                            <td>4d ago</td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row">Staff</th>
                                                            <td>Recruitment Notice</td>
                                                            <td>3m ago</td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row">Accountant</th>
                                                            <td>Acceptances of Remita</td>
                                                            <td>5m ago</td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row">Teacher</th>
                                                            <td>Submission of Result</td>
                                                            <td>1y ago</td>
                                                        </tr>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3 col-md-3">
                        <div class="topSecCards">
                            <!-- 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 class="mt-4" style="padding: 30px 10px 10px 10px;">
                                <div class="">
                                      <div class="prosloadcalendforadmin"></div>
                                    
                                   
    
                                    <div align="right">
                                        <a href="../calender" style="font-weight: 500; font-size: 12px;">View More.. 
                                            <i class='fa fa-chevron-right' style="font-size: 12px;"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <div class="main-title" style="margin-top: 30px;">
                <span class="font-weight-bold" style="font-size:18px;">Performance Overview </span>
            </div>


            <div class="main-cards" style="margin-top: 10px;">

                <div class="row g-4">

                    <div class="col-sm-6 col-md-6">

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

                            <h6 style="padding: 5px 10px 5px 0px; font-weight: 600;">Top Performing Students</h6>

                            <div class="row g-3">

                                <div class="col-8">
                                    <div style="display: flex; padding-top: 20px;" id="best_student">

                                    </div>
                                </div>

                                <div class="col-2">
                                    <div style="margin-top: 20px;" id="abba_student_average">
                                        
                                    </div>
                                </div>

                                <div class="col-2">
                                    <div style="margin-top: 20px;">
                                        <span style="font-size: 22px;"><i class='bx bx-envelope'></i></span>
                                        <span style="font-size: 22px; margin-left: 10px;"><i
                                                class='bx bx-dots-horizontal-rounded'></i></span>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="col-sm-6 col-md-6">

                        <div class="topSecCards coming_soon" style="padding: 20px;">

                            <h6 style="padding: 5px 10px 5px 0px; font-weight: 700;">Top Performing Staff</h6>

                            <div class="row g-3">

                                <div class="col-8">
                                    <div style="display: flex; padding-top: 20px;">

                                        <div style="margin-top: -10px;">
                                            <img src="../../assets/images/adminImg/profile-1.jpg"
                                                style="height: 50px; width: 50px; border-radius: 100%;" alt="">
                                        </div>
                                        <div style="margin-left: 10px;">
                                            <span style="font-weight: 600; color: #292929;">Chima Lawrence</span>
                                            <br>
                                            <!-- <small style="color: #292929;">SS 3B</small> -->
                                        </div>

                                    </div>
                                </div>

                                <div class="col-2">
                                    <div style="margin-top: 20px;">
                                        <h6 style="font-weight: 700; color: #292929;">4,234</h6>
                                    </div>
                                </div>

                                <div class="col-2">
                                    <div style="margin-top: 20px;">
                                        <span style="font-size: 22px;"><i class='bx bx-envelope'></i></span>
                                        <span style="font-size: 22px; margin-left: 10px;"><i
                                                class='bx bx-dots-horizontal-rounded'></i></span>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!--<div class="main-cards" style="margin-top: 25px;">-->

            <!--    <div class="row g-3">-->

            <!--        <div class="col-sm-4 col-md-4">-->

            <!--            <div class="topSecCards" style="padding: 20px;">-->

            <!--                <h6 style="padding: 5px 10px 5px 0px; font-weight: 700;">Students Attendance</h6>-->

            <!--                <div id="attendance-chart" style="width: 50px; padding-top: 80px;"></div>-->

            <!--                <div style="margin-left: 10px; margin-top: 30px; width: 90%; border: 1px solid grey; ">-->
            <!--                </div>-->

            <!--                <div style="padding-top: 30px; padding-bottom: 17px; padding-left: 20px;">-->
            <!--                    <a href="" style="font-weight: 600; font-size: 14px;">More Insights-->
            <!--                        <i class='fa fa-chevron-right' style="font-size: 13px;"></i>-->
            <!--                    </a>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--        </div>-->

            <!--        <div class="col-sm-8 col-md-8 topSecCards">-->

            <!--            <div class="row g-3">-->

            <!--                <div class="col-sm-4">-->
            <!--                    <div>-->
            <!--                        <h6 style="padding: 20px 10px 20px 10px; font-weight: 700;">Quiz</h6>-->

            <!--                        <div style="padding: 50px 10px 20px 10px;">-->

            <!--                            <table class="table table-borderless">-->
            <!--                                <thead class="table-secondary"-->
            <!--                                    style="font-weight: bolder; font-size: 14px; color: #292929;">-->
            <!--                                    <tr>-->
            <!--                                        <th scope="col">CLASS</th>-->
            <!--                                        <th scope="col">ATT.</th>-->
            <!--                                        <th scope="col"> </th>-->
            <!--                                    </tr>-->

            <!--                                </thead>-->
            <!--                                <tbody>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">SS 3B</th>-->
            <!--                                        <td>25 </td>-->
            <!--                                        <td>-->
            <!--                                            <span-->
            <!--                                                style="color: #9c9a9a; font-weight: 800; font-size: 12px;">49.2%</span>-->
            <!--                                            <div class="progress" style="height: 8px;">-->
            <!--                                                <div class="progress-bar" role="progressbar"-->
            <!--                                                    style="width: 49.2%;" aria-valuenow="49.2%"-->
            <!--                                                    aria-valuemin="0" aria-valuemax="100"></div>-->
            <!--                                            </div>-->
            <!--                                        </td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">SS 2A</th>-->
            <!--                                        <td>15</td>-->
            <!--                                        <td>-->
            <!--                                            <span-->
            <!--                                                style="color: #9c9a9a; font-weight: 800; font-size: 12px;">49.2%</span>-->
            <!--                                            <div class="progress" style="height: 8px;">-->
            <!--                                                <div class="progress-bar" role="progressbar"-->
            <!--                                                    style="width: 49.2%;" aria-valuenow="49.2%"-->
            <!--                                                    aria-valuemin="0" aria-valuemax="100"></div>-->
            <!--                                            </div>-->
            <!--                                        </td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">Pri 1 Gold</th>-->
            <!--                                        <td>35</td>-->
            <!--                                        <td>-->
            <!--                                            <span-->
            <!--                                                style="color: #9c9a9a; font-weight: 800; font-size: 12px;">9.3%</span>-->
            <!--                                            <div class="progress" style="height: 8px;">-->
            <!--                                                <div class="progress-bar" role="progressbar"-->
            <!--                                                    style="width: 9.3%" aria-valuenow="9.3%"-->
            <!--                                                    aria-valuemin="0" aria-valuemax="100"></div>-->
            <!--                                            </div>-->
            <!--                                        </td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">Pri 1 Gold</th>-->
            <!--                                        <td>35</td>-->
            <!--                                        <td>-->
            <!--                                            <span-->
            <!--                                                style="color: #9c9a9a; font-weight: 800; font-size: 12px;">37.2%</span>-->
            <!--                                            <div class="progress" style="height: 8px;">-->
            <!--                                                <div class="progress-bar" role="progressbar"-->
            <!--                                                    style="width: 37.2%" aria-valuenow="37.2%"-->
            <!--                                                    aria-valuemin="0" aria-valuemax="100"></div>-->
            <!--                                            </div>-->
            <!--                                        </td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">Pri 1 Gold</th>-->
            <!--                                        <td>35</td>-->
            <!--                                        <td>-->
            <!--                                            <span-->
            <!--                                                style="color: #9c9a9a; font-weight: 800; font-size: 12px;">49.2%</span>-->
            <!--                                            <div class="progress" style="height: 8px;">-->
            <!--                                                <div class="progress-bar" role="progressbar"-->
            <!--                                                    style="width: 49.2%;" aria-valuenow="49.2%"-->
            <!--                                                    aria-valuemin="0" aria-valuemax="100"></div>-->
            <!--                                            </div>-->
            <!--                                        </td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">Pri 1 Gold</th>-->
            <!--                                        <td>35</td>-->
            <!--                                        <td>-->
            <!--                                            <span-->
            <!--                                                style="color: #9c9a9a; font-weight: 800; font-size: 12px;">46.2%</span>-->
            <!--                                            <div class="progress" style="height: 8px;">-->
            <!--                                                <div class="progress-bar" role="progressbar"-->
            <!--                                                    style="width: 46.2%;" aria-valuenow="46.2%"-->
            <!--                                                    aria-valuemin="0" aria-valuemax="100"></div>-->
            <!--                                            </div>-->
            <!--                                        </td>-->
            <!--                                    </tr>-->


            <!--                                </tbody>-->
            <!--                            </table>-->

            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->

            <!--                <div class="col-sm-4">-->

            <!--                    <h6 style="padding: 20px 10px 0px 10px; font-weight: 700;">Overall Performance</h6>-->

            <!--                    <div style="margin-top: 170px;">-->
            <!--                        <div id="performance-chart"></div>-->
            <!--                    </div>-->
            <!--                </div>-->

            <!--                <div class="col-sm-4">-->
            <!--                    <div>-->

            <!--                        <div style="padding: 110px 10px 20px 10px;">-->

            <!--                            <table class="table" style="font-size: 11px;">-->
            <!--                                <thead style="font-weight: bolder; color: gray">-->
            <!--                                    <tr>-->
            <!--                                        <th scope="col" style="font-size: 14px;">Subject</th>-->
            <!--                                        <th scope="col" style="font-size: 14px;">Quiz</th>-->
            <!--                                        <th scope="col" style="font-size: 14px;">Class</th>-->
            <!--                                    </tr>-->

            <!--                                </thead>-->
            <!--                                <tbody>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">Mathes</th>-->
            <!--                                        <td>Class Work </td>-->
            <!--                                        <td>Pri 3 Gold</td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">English Lan.</th>-->
            <!--                                        <td>Test</td>-->
            <!--                                        <td>Pri 4 Pink</td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">Computer Sci.</th>-->
            <!--                                        <td>Assignment</td>-->
            <!--                                        <td>Pri 2 Pink</td>-->
            <!--                                    </tr>-->
            <!--                                    <tr>-->
            <!--                                        <th scope="row">Physics</th>-->
            <!--                                        <td>35</td>-->
            <!--                                        <td>SS3A</td>-->
            <!--                                    </tr>-->

            <!--                                    <tr>-->
            <!--                                        <th scope="row">Government</th>-->
            <!--                                        <td>Test</td>-->
            <!--                                        <td>SS1B</td>-->
            <!--                                    </tr>-->


            <!--                                </tbody>-->
            <!--                            </table>-->

            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->

            <!--            </div>-->

            <!--        </div>-->

            <!--    </div>-->

            <!--</div>-->

            <!--<div class="main-cards" style="margin-top: 25px;">-->

            <!--    <div class="row g-3">-->

            <!--        <div class="col-sm-8 col-md-8">-->

            <!--            <div class="topSecCardsPrimary" style="padding-bottom: 10px;">-->
            <!--                <div class="row">-->
            <!--                    <div class="col-sm-7 col-md-7">-->
            <!--                        <h3 style="padding: 40px 0px 0px 20px; font-weight: 700; color: white;">-->
            <!--                            Download the app to enjoy <br> simple home payment-->
            <!--                        </h3>-->

            <!--                        <div style="padding: 65px 0px 0px 30px">-->
            <!--                            <span>-->
            <!--                                <img src="../../assets/images/adminImg/app_store.png" style="width: 30%;"-->
            <!--                                    alt="">-->
            <!--                                <img src="../../assets/images/adminImg/play_store.png"-->
            <!--                                    style="width: 30%; margin-left: 10px;" alt="">-->
            <!--                            </span>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                    <div class="col-sm-5 col-md-5">-->
            <!--                        <div style="padding: 20px 0px 0px 0px;">-->
            <!--                            <span>-->
            <!--                                <img src="../../assets/images/adminImg/mobilePh.png" style="width: 100%;"-->
            <!--                                    alt="">-->
            <!--                            </span>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--        </div>-->

            <!--        <div class="col-sm-4 col-md-4">-->

            <!--            <div class="topSecCards">-->

            <!--                <h6 style="padding: 15px 10px 5px 10px; font-weight: 700; color: #292929;">Upcoming-->
            <!--                    Birthdays</h6>-->

            <!--                <div style="padding: 10px;">-->
            <!--                    <table class="table" style="font-size: 13px;">-->
            <!--                        <thead style="font-weight: bolder; color: gray">-->
            <!--                            <tr>-->
            <!--                                <th scope="col" style="font-size: 12px;">Profile</th>-->
            <!--                                <th scope="col" style="font-size: 12px;">Type</th>-->
            <!--                                <th scope="col" style="font-size: 12px;">Year</th>-->
            <!--                            </tr>-->

            <!--                        </thead>-->
            <!--                        <tbody id="upcoming_birthdays">-->
                                        
            <!--                        </tbody>-->
            <!--                    </table>-->
            <!--                    <a href="" style="font-weight: 600; font-size: 13px; text-decoration: none;">More-->
            <!--                        Insights-->
            <!--                        <i class='fa fa-chevron-right' style="font-size: 12px;"></i>-->
            <!--                    </a>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--        </div>-->

            <!--    </div>-->

            <!--</div>-->

            <div class="main-cards" style="margin-top: 25px;">

                <div class="row g-3">
                    <div class="col-sm-6 col-md-6">
                        <div class="topSecCards coming_soon" style="padding-bottom: 10px;">

                            <div style="width: 100px; float: right; margin-right: 10px; margin-top: 20px;">
                                <select class="form-select" style="font-size: 12px;"
                                    aria-label="Default select example">
                                    <option selected>Last 12 Month</option>
                                </select>
                            </div>

                            <div>
                                <h6 style="font-weight: 700; color: #292929; margin-left: 20px; padding-top: 20px;">
                                    Total Stock</h6>
                            </div>

                            <div id="area-chart"></div>

                        </div>
                    </div>

                    <div class="col-sm-6 col-md-6">
                        <div class="topSecCards" style="padding-bottom: 10px;">


                            <div id="bar-chart"></div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="emmaloadinstitutionforpolicy"></div>
        </main>


    </div>
    
    
    
    <!-- SUBSCRIPTION MODAL CONTENT HERE -->
          <div class="modal fade" id="profeepaymentmodal" tabindex="-1" aria-labelledby="profeepaymentmodalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md">
                <div class="modal-content ">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">EDUMES Subscription Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
        
                        <div class="modal-body">
                            
                            
                            <div class="alert alert-primary d-flex align-items-center" role="alert">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
                                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                              </svg>
                              <div>
                                      <h6 class="text-info"><i class="fa fa-info"></i> Payment can only be made by the School Owner </h6>Please Kindly Contact the School owner For Payment
                              </div>
                            </div>
                            
                           
                          
                        </div>
        
                        <div class="modal-footer">
                                
                        </div>
                </div>
            </div>
            </div>
         <!-- SUBSCRIPTION MODAL CONTENT HERE -->

    
    <!---====Side Modal Start Here====-->
    <div class="modal fade modalshow modalfade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog dialogcontent" style="border-top-left-radius: 20px; width: 300px;">
                <div class="modal-content modalcontent" style="background-color:#ffffff; ">   
                
                    <div class="modal-body modalbodycontent">
    
                        <div style="position: fixed; margin-left: 0.9rem; padding-top: 20px; display: flex;">
                            <img src="../../assets/images/favicon.png" style="width: 80%" data-dismiss="modal" aria-label="Close">
                        </div>
                        
                        
                        <div width="300px" height="30vh" class="sc-UpCWa ezuGy flexi-sheet-body" open="">
                            <button type="button"  data-bs-dismiss="modal" aria-label="Close" style="float: right; margin-right: 20px; background: #ffffff; border: none;">
                                <span style="color: #525252; font-size: 30px; cursor: pointer;">×</span>
                            </button>
                            
                            <p style="margin-left: 0.9rem; padding-top: 60px; margin-left: 40px; font-weight: 700; color: #525252;">Settings</p>
    
                            <div width="100%" height="100%" style="margin-top: 50px;" class="sc-pyfCe gtGxgb">
    
                                <ul  class="rightModalItems">
                                    
                                    <li class="chiTag">RESULT</li>
                                    <li class="chiTagLine"> </li>
    
                                    <li>
                                        <a href="/school-information">
                                            <i class="fa fa-file-text menuicons"></i> CA Setting
                                        </a>
                                    </li>
    
                                    <li>
                                        <a href="/other-configs">
                                            <i class="fa  fa-certificate menuicons"></i> Grading Structure
                                        </a>
                                    </li>
    
                                    <li class="chiTag">FEES</li>
                                    <li class="chiTagLine"> </li>
    
                                    <li>
                                        <a href="/bank-accounts">
                                            <i class="fa fa-bank menuicons"></i>School Bank accounts
                                        </a>
                                    </li>
    
                                    <li>
                                        <a href="/fees-configuration">
                                            <i class="fa  fa-money menuicons"></i> Fees Configuration
                                        </a>
                                    </li>
    
                                    <li class="chiTag">ACADEMICS</li>
                                    <li class="chiTagLine"> </li>
    
                                    <li>
                                        <a href="/subjects">
                                            <i class="fa fa-calendar menuicons"></i> Calendar
                                        </a>
                                    </li>
    
                                    <li>
                                        <a href="/early-years-grading">
                                            <i class="fa fa-clock-o menuicons"></i>Time Table</a>
                                        </a>
                                    </li>
    
                                    <li>
                                        <a href="/grading-format">
                                            <i class="fa fa-address-book menuicons"></i> Scheme of work
                                        </a>
                                    </li>
    
                                    <li>
                                        <a href="/grading-format">
                                            <i class="fa fa-cogs menuicons"></i> Website Setting
                                        </a>
                                    </li>
    
                                    
                                </ul>
                            </div>
                        </div>
    
                    </div>
                </div>
        </div>
    </div>
    <!---====Side Modal End Here====-->
    
    
    
    
    <!-- modal for policy  -->
	<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>
     <!-- modal for policy  -->
    
    
    
    <!-- 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>
        </div>
    </div>
    <!--Script-->

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

    <!--Custom JS--->
    <script src="../../assets/plugins/bootstrap5/js/bootstrap.bundle.min.js"></script>

    <!-- header js -->
    <?php //include('../../controller/js/app/header.php'); ?>

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

    <!-- notification js -->
    <script src="../../assets/plugins/notify/wnoty.js"></script>

    <!-- image cropper js -->
    <script src="../../assets/plugins/Croppie/croppie.js"></script>
    <script src="../../assets/plugins/Croppie/croppie.min.js"></script>

    <script src="../../js/admin_js/adminScript.js"></script> 

    
    <!-- current page js -->
    <?php include('../../js/current_page.php'); ?>
    
    <!-- Complete Setup JS -->
    <?php include('../../controller/js/admin/completeSetup.php'); ?>
    
    
        <!-- 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 src="../../controller/js/admin/dashboard-data.js"></script>
     <script src="../../controller/js/admin/emma_policy.js"></script>
      
      
      <?php include('../../controller/js/admin/edumesssubscription.php'); ?>
    
</body>

</html>