<?php

include('php/database.php');
include('php/security.php');
session_start();
if(logged_in())
{
	header('location:../login.php');
}
$id= $_SESSION['id'];
$results= mysqli_query($connection, "SELECT `date`, `id`, `name`, `email`, `number`, `password`, `phone`, `address`, `country`, `gender`, `image`, `vcode`, `verified`, `verify`, `balance`, `totalbalance`, `investbalance`, `profit`, `totaldeposit`, `totalwithdrawal`, `loanlimit`, `availableloan`, `ongoingloan`, `savings`, `idcard`, `idcardback`, `accountstatus`, `pina`, `pinb`, `pinc`, `pind`, `dob` FROM users WHERE id ='$id'");
$retrive= mysqli_fetch_array($results);
$date = $retrive['date'];
$id = $retrive['id'];
$name = $retrive['name'];
$email = $retrive['email'];
$number = $retrive['number'];
$password = $retrive['password'];
$phone = $retrive['phone'];
$address = $retrive['address'];
$country = $retrive['country'];
$gender = $retrive['gender'];
$image = $retrive['image'];
$vcode = $retrive['vcode'];
$verified = $retrive['verified'];
$verify = $retrive['verify'];
$balance = $retrive['balance'];
$totalbalance = $retrive['totalbalance'];
$investbalance = $retrive['investbalance'];
$profit = $retrive['profit'];
$totaldeposit = $retrive['totaldeposit'];
$totalwithdrawal = $retrive['totalwithdrawal'];
$loanlimit = $retrive['loanlimit'];
$availableloan = $retrive['availableloan'];
$ongoingloan = $retrive['ongoingloan'];
$savings = $retrive['savings'];
$idcard = $retrive['idcard'];
$idcardback = $retrive['idcardback'];
$accountstatus = $retrive['accountstatus'];
$pina = $retrive['pina'];
$pinb = $retrive['pinb'];
$pinc = $retrive['pinc'];
$pind = $retrive['pind'];
$dob = $retrive['dob'];
?>


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


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile Specific Metas -->
     <meta name="viewport" content="width=device-width, initial-scale=0.7, viewport-fit=cover">
    <title>Change Code</title>
    <!-- Favicon and Touch Icons  -->
    <link rel="shortcut icon" href="images/logo.png" />
    <link rel="apple-touch-icon-precomposed" href="images/logo.png" />
    <!-- Font -->
    <link rel="stylesheet" href="fonts/fonts.css" />
    <!-- Icons -->
    <link rel="stylesheet" href="fonts/icons-alipay.css">
    <link rel="stylesheet" href="styles/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="styles/styles.css" />
    <link rel="manifest" href="_manifest.json" data-pwa-version="set_in_manifest_and_pwa_js">
    <link rel="apple-touch-icon" sizes="192x192" href="app/icons/icon-192x192.png">

    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="font-sans text-[12px] leading-[20px] font-medium text-textGray bg-white w-full m-auto overflow-hidden">
       <!-- preloade -->
       <div class="preload preload-container">
        <div class="preload-logo">
          <div class="spinner"></div>
        </div>
      </div>
    <!-- /preload -->
    <div class="header">
        <div class="tf-container">
            <div class="tf-statusbar d-flex justify-content-center align-items-center">
                <a href="#" class="back-btn"> <i class="icon-left"></i> </a>
                <h3>Change PIN  </h3>&nbsp; &nbsp; <div  class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/dropdown.js" defer></script>
            </div>
            <div class="tf-spacing-20"></div>
        </div>
    </div>
    
    <div class="wrap-transfer">
            <form class="tf-form-verify" action="php/pin.php" method="POST" onsubmit="return validation()" >
                     <div class="d-flex group-input-verify">
                                <input type="tel" maxlength="1" name="pina" id="pina" pattern="[0-9]" onkeypress="return isNumberKey(event,this.id)" class="input-verify" value="">
                                <input type="tel" maxlength="1" name="pinb" id="pinb" pattern="[0-9]" onkeypress="return isNumberKey(event,this.id)" class="input-verify" value="">
                                <input type="tel" maxlength="1" name="pinc" id="pinc" pattern="[0-9]" onkeypress="return isNumberKey(event,this.id)" class="input-verify" value="">
                                <input type="tel" maxlength="1" name="pind" id="pind" pattern="[0-9]" onkeypress="return isNumberKey(event,this.id)" class="input-verify" value="">
                        </div>
						  <div class="error1"></div>
					 
                    <div class="text-send-code">
                        <p class="fw_4">Enter new PIN to proceed</p>
                    </div>
					<br>
					<br>
					  <div class="group-input align-items-center d-flex justify-content-center">
                    <input type="text" name="password" style="width:50%;" required placeholder="Enter Password">
               </div>
					
					
                <div class="bottom-navigation-bar">
                    <div class="tf-container">
                        <button type="submit" name="submit" class="tf-btn accent">Continue</button>
                    </div>
                </div>
            </form>

    </div>

<script>
function isNumberKey(evt,id)
{
	try{
        var charCode = (evt.which) ? evt.which : event.keyCode;
  
        if(charCode==46){
            var txt=document.getElementById(id).value;
            if(!(txt.indexOf(".") > -1)){
	
                return true;
            }
        }
        if (charCode > 31 && (charCode < 48 || charCode > 57) )
            return false;

        return true;
	}catch(w){
		alert(w);
	}
}

</script>

<script>
	function validation(){
	let id = (id) => document.getElementById(id);

    let classes = (classes) => document.getElementsByClassName(classes);

    let  pina = id("pina"),
	   pinb = id("pinb"),
	    pinc = id("pinc"),
		 pind = id("pind"),
        errorMsg = classes("error1");
		
	
	if(pina.value.trim() ==="") {
    errorMsg[0].innerHTML = '<p style="font-size:12px;" class="  text-danger text-center">Enter Pin</p>';
    pina.style.borderBottom = "2px solid red";
      return false;
  } else {
    errorMsg[0].innerHTML = "";
   pina.style.borderBottom = "";
  }

if(pinb.value.trim() ==="") {
    errorMsg[0].innerHTML = '<p style="font-size:12px;" class="  text-danger text-center">Enter Pin</p>';
    pinb.style.borderBottom = "2px solid red";
      return false;
  } else {
    errorMsg[0].innerHTML = "";
   pinb.style.borderBottom = "";
  } 
 
  
if(pinc.value.trim() ==="") {
    errorMsg[0].innerHTML = '<p style="font-size:12px;" class="  text-danger text-center">Enter Pin</p>';
    pinc.style.borderBottom = "2px solid red";
      return false;
  } else {
    errorMsg[0].innerHTML = "";
   pinc.style.borderBottom = "";
  } 
 
if(pind.value.trim() ==="") {
    errorMsg[0].innerHTML = '<p style="font-size:12px;" class="  text-danger text-center">Enter Pin</p>';
    pind.style.borderBottom = "2px solid red";
      return false;
  } else {
    errorMsg[0].innerHTML = "";
   pind.style.borderBottom = "";
  } 

 

	return true;
	};
	
  
	</script>


    <script type="text/javascript" src="javascript/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/bootstrap.min.js"></script>
    <script type="text/javascript" src="javascript/count-down.js"></script>
    <script type="text/javascript" src="javascript/verify-input.js"></script>
    <script type="text/javascript" src="javascript/main.js"></script>

</body>


</html>