<?php session_start();
require_once 'config.php';
$PageName = "OTP Verify";
$UserId = $_SESSION['User']['id'];
if(!isset($_SESSION['otp'])){
    echo "<script>window.location.href='profile.php';</script>";exit();
}
?>
<!doctype html>
<html lang="en" class="h-100">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="generator" content="">
    <title><?php echo $Proj_Title; ?></title>

    <!-- manifest meta -->
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="img/favicon180.png" sizes="180x180">
    <link rel="icon" href="img/favicon32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="img/favicon16.png" sizes="16x16" type="image/png">

    <!-- Material icons-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet">

    <!-- swiper CSS -->
    <link href="vendor/swiper/css/swiper.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet" id="style">
    <link href="css/toastr.min.css" rel="stylesheet">
      <script src="js/jquery.min3.5.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/toastr.min.js"></script>
</head>

<body class="body-scroll d-flex flex-column h-100 menu-overlay">
   


    <!-- Begin page content -->
    <main class="flex-shrink-0 main">
        <!-- Fixed navbar -->
        <?php include_once 'back-header.php'; ?> 
   
   <?php     
   //echo $_SESSION['otp'];
  if(isset($_POST['submit'])){
$CreatedDate = date('Y-m-d');
$YourOtp = addslashes(trim($_POST['YourOtp']));
$oldotp = $_SESSION['otp'];
$userid = $_GET['userid'];
$pageid = $_GET['pageid'];
$roll = $_GET['roll'];
if($YourOtp == $oldotp){
    $successmessage = "OTP Matched Successfully!";
    unset($_SESSION['otp']);      
    echo "<script>window.location.href='profile.php';</script>";
}
else{
    $errormessage = "OTP Not Matched!";
    
}
 } ?>        
        <div class="main-container">
            <div class="container">
               
                <div class="">
                  
                    <div class="card-body">
<input type="hidden" id="Roll" name="Roll" value="7">
                 <div class="container h-100 text-white">
            <div class="row h-100">
                <div class="col-12 align-self-center mb-4">
                    <div class="row justify-content-center">
                        <div class="col-11 col-sm-7 col-md-6 col-lg-5 col-xl-4" align="center">
                             <img src="The_Yash-logo.png" style="width: 150px;"><br><br>
                            <h2 class="font-weight-normal " style="color:#000;font-size:20px;text-align:center;">OTP Verification</h2>
                            <p style="color:#737373;padding-top:5px;">Enter the OTP send to </p>
                            
                            <h2 class="font-weight-normal " style="color:#000;font-size:15px;text-align:center;">+91 <?php echo $_REQUEST['phone'];?></h2>
                            
                            <div class="alert alert-danger" role="alert" id="danger_message" style="display: none;"></div>
                           <div class="alert alert-success" role="alert" id="success_message" style="display: none;"></div>
                          <div class="form-group float-label active">
                              
                            <input type="tel" name="YourOtp" id="YourOtp" class="form-control" placeholder="----" autofocus required value="<?php echo $_SESSION['otp'];?>" maxlength="4" style="text-align: center;">
                        </div>
                        
                         <input class="form-control" type="hidden" autocomplete="off" name="GetOtp" placeholder="Phone No" id="GetOtp" value="<?php echo $_SESSION['otp'];?>">
                        
                    <input class="form-control" type="hidden" autocomplete="off" name="Phone" placeholder="Phone No" id="Phone" value="<?php echo $_REQUEST['phone'];?>">
                  
                          
                
                    </div>
     
                     
                    <div class="">
                        <button class="btn btn-block btn-default rounded" type="button" id="login">Verify</button>
                       
                    </div>
            
                </div>
            </div>
        </div>
    </main>

    <!-- footer-->
    


    <!-- Required jquery and libraries -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- cookie js -->
    <script src="js/jquery.cookie.js"></script>

    <!-- Swiper slider  js-->
    <script src="vendor/swiper/js/swiper.min.js"></script>

    <!-- Customized jquery file  -->
    <script src="js/main.js"></script>
    <script src="js/color-scheme-demo.js"></script>


    <!-- page level custom script -->
    <script src="js/app.js"></script>

    <script type="text/javascript">
         $(document).ready(function(){
           
         $(document).on("click", "#login", function(event){
            var action = "VerifyOtp";
            var YourOtp = $('#YourOtp').val();
            var GetOtp = $('#GetOtp').val();
            var Phone = $('#Phone').val();
            var page = $('#page').val();
            if(YourOtp.trim() == ''){
                    $('#danger_message').css('display','block').html("Please Enter OTP");
                    $('#YourOtp').focus();
                      setTimeout(function(){  
                        $('#danger_message').fadeOut("Slow"); 
                    }, 2000); 
                }
          /*  else if(Password.trim() == ''){
                     $('#danger_message').css('display','block').html("Please Enter Password");
                    $('#Password').focus();
                      setTimeout(function(){  
                        $('#danger_message').fadeOut("Slow"); 
                    }, 2000); 
                }*/
                else{
                    $.ajax({  
                url :"ajax_files/ajax_students.php",  
                method:"POST",  
                data:{action:action,Phone:Phone,YourOtp:YourOtp,GetOtp:GetOtp},
                 beforeSend:function(){
     $('#login').attr('disabled','disabled');
     $('#login').text('Please Wait...');
    },
                success:function(data){ 
                    console.log(data);
                     var res = JSON.parse(data);
                    var status = res.status;
                    var roll = res.roll;
                    var Username = res.Username;
                    var uid = res.uid;
                     if(status == 0){
                         $('#danger_message').css('display','block').html("Invalid OTP");
                      setTimeout(function(){  
                        $('#danger_message').fadeOut("Slow"); 
                    }, 2000); 
                     }
                     else{
                         Android.loginUser(Username,uid);
                        $('#success_message').css('display','block').html("OTP Verified!");
                      setTimeout(function(){
                        $('#success_message').fadeOut("Slow"); 
                        window.location.href="choose-department.php";
                    }, 2000); 
                }
                $('#login').attr('disabled',false);
                    $('#login').text('Login');
                }
                });
                }
            }); 
         }); 
</script>   
    
</body>

</html>
