
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?php 

include "api.php";


?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ramadan Draw | Autozone Balubaid</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.min.css">

<style>


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}	

.mbl{
display:block;	
}
.pc{
display:none;	
}	
	
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:block;	
}
.pc{
display:none;	
}	
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:none;	
}
.pc{
display:block;	
}	
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

.drw_bg{
background: transparent url(bg-pc.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:none;	
}
.pc{
display:block;	
}	
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.drw_bg{
background: transparent url(bg-pc.jpg) top center no-repeat; 
background-size: cover;
}	

.mbl{
display:none;	
}
.pc{
display:block;	
}
	
}

@font-face {
  font-family: sansarabic;
  src: url(font.woff);
}

div {
  font-family: sansarabic;
}
a:hover{
    text-decoration: none;
}
input:hover{
    text-decoration: none;
}	
input{
outline: none !important;	
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: none;
}
*:focus {
    outline: none;
}

input:-internal-autofill-selected{
background-color:none;
}

</style>  
  
</head>
<body class="drw_bg">
<div style="height:20px;"></div>
<div style="margin-left:2%;margin-right:2%">
<img src="header_az_draw.png" class="img-fluid mbl" alt="Responsive image">
<img src="header_az_draw_pc.png" class="img-fluid pc" alt="Responsive image">
</div>
<div style="height:30px;"></div>
<div style="text-align:center;color:white;">
<h3>
<!-- Heading -->
</h3>
</div>

<div class="container">

<form method="POST" name=WebToLeads1729050000000212695 onsubmit="javascript:document.charset=&quot;UTF-8&quot;;return validateForm()" action="question-en.php">
<div style="height:30px;"></div>
<div style="margin-left:10%;margin-right:10%">
<div style="display:inline-block;width:100%;color:white;">
<div style="float:left;">Name</div><div style="float:right;">اسم</div>
</div>
<div style="text-align:center;background:#fff;color:#333333;border-radius:0px;padding:10px;font-size:20px;" >
<input type="text" style="width:100%;background:none;border:none;text-decoration:none;color:#333333;" name="name"></input>
</div>
<div style="color:white;text-align:center;" id="Name"></div>

</div>

<div style="height:30px;"></div>
<div style="margin-left:10%;margin-right:10%">
<div style="display:inline-block;width:100%;color:white;">
<div style="float:left;">Mobile Number</div><div style="float:right;">رقم الجوال</div>
</div>
<div style="text-align:center;background:#fff;color:#333333;border-radius:0px;padding:10px;font-size:20px;" >
<input type="text" style="width:100%;background:none;border:none;text-decoration:none;color:#333333;" name="mbl"></input>
</div>
<div style="color:white;text-align:center;" id="Mobile"></div>

</div>

<div style="height:30px;"></div>
<div style="margin-left:10%;margin-right:10%">
<div style="display:inline-block;width:100%;color:white;">
<div style="float:left;">National ID</div><div style="float:right;">رقم الهوية</div>
</div>
<div style="text-align:center;background:#fff;color:#333333;border-radius:0px;padding:10px;font-size:20px;" >
<input type="text" style="width:100%;background:none;border:none;text-decoration:none;color:#333333;" name="natid"></input>
</div>
<div style="color:white;text-align:center;" id="NATID"></div>

</div>

<div style="height:30px;"></div>
<div style="margin-left:10%;margin-right:10%">
<div style="display:inline-block;width:100%;color:white;">
<div style="float:left;">Date of Birth</div><div style="float:right;">تاريخ الميلاد</div>
</div>
<div style="text-align:center;background:#fff;color:#333333;border-radius:0px;padding:10px;font-size:20px;" >
<input type="text" style="width:100%;background:none;border:none;text-decoration:none;color:#333333;" name="dob" id='dob'></input>
</div>
<div style="color:white;text-align:center;" id="DOB"></div>

</div>

<div style="height:30px;"></div>
<div style="margin-left:10%;margin-right:10%">
<div style="display:inline-block;width:100%;color:white;">
<div style="float:left;">Monthly Salary</div><div style="float:right;">الدخل الشهري</div>
</div>
<div style="text-align:center;background:#fff;color:#333333;border-radius:0px;padding:10px;font-size:20px;" >
<input type="text" style="width:100%;background:none;border:none;text-decoration:none;color:#333333;" name="salary"></input>
</div>
<div style="color:white;text-align:center;" id="SALARY"></div>

</div>

<div style="height:30px;"></div>
<div style="margin-left:10%;margin-right:10%">
<div style="display:inline-block;width:100%;color:white;">
<div style="float:left;">Email Address</div><div style="float:right;">البريد الالكترونى</div>
</div>
<div style="text-align:center;background:#fff;color:#333333;border-radius:0px;padding:10px;font-size:20px;" >
<input type="text" style="width:100%;background:none;border:none;text-decoration:none;color:#333333;" name="email"></input>
</div>
<div style="color:white;text-align:center;" id="EMAIL"></div>

</div>

<div class="container">
    <div class="container">
<div style="height:30px;"></div>
<div style="margin-left:10%;margin-right:10%;text-align:center;">
<div style="text-align:center;background:#fbb715;color:#333333;border-radius:25px;padding:10px;font-size:20px;width:50%;margin: auto;" >
<input type="submit" value="اشترك في السحب" style="width:100%;background:none;border:none;text-decoration:none;color:#333333;margin:auto;" ></input>
</div>
</div>
</div>

</div>
</div>

<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
</body>

<script>

function validateForm() {
    
   var npattern = /[0-9!@#\$%\^\&*\)\(+=._-]/;
    var arnuminput = /[٠,١,٢,٣,٤,٥,٦,٧,٨,٩]/;
    var ennuminput = /[0-9]/;
    var mblpattern = /^05/;
    var armblpattern = /^٠٥/;
    var mblpattern2 = /[A-Za-z!@#\$%\^\&*\)\(+=._-]/;
    var mblpattern3 =/[^0-9]/;
    var armblpattern3 =/[^٠,١,٢,٣,٤,٥,٦,٧,٨,٩]/;
    var emailpattern = /\S+@\S+\.\S+/;
    //var npchk = str.match(npattern);

var arabic = /[\u0600-\u065F\u066A-\u06EF\u06FA-\u06FFa-zA-Z]/;
//result = arabic.test(text);
 

 
    
    var a = document.forms["WebToLeads1729050000000212695"]["name"].value;
    if (a == null || a == "" || a.trim() == "") {
        document.getElementById("Name").innerHTML = "Required";
        return false;
    }
else if (a.match(npattern)){
document.getElementById("Name").innerHTML = "Incorrect Name";
return false;
}    
    
else if (a !== null || a !== "" || a.trim() !== ""){
document.getElementById("Name").innerHTML = "";
}


    var d = document.forms["WebToLeads1729050000000212695"]["natid"].value;
    if (d == null || d == "" || d.trim() == "") {
        document.getElementById("NATID").innerHTML = "Required";
        return false;
    }
else if(arabic.test(d)){
    document.getElementById("NATID").innerHTML = "Incorrect National ID";
return false;
}
else{
if(d.match(arnuminput)){    
if (d.match(armblpattern3)){
document.getElementById("NATID").innerHTML = "Incorrect National ID";
return false;
}       
else if (d.length < '10'){
document.getElementById("NATID").innerHTML = "Incorrect National ID";
return false;
}     
else if (d !== null || d !== "" || d.trim() !== ""){
document.getElementById("NATID").innerHTML = "";
}
}
else if(d.match(ennuminput)){
if (d.match(mblpattern3)){
document.getElementById("NATID").innerHTML = "Incorrect National ID";
return false;
}       
else if (d.length < '10'){
document.getElementById("NATID").innerHTML = "Incorrect National ID";
return false;
}     
else if (d !== null || d !== "" || c.trim() !== ""){
document.getElementById("NATID").innerHTML = "";
}    
}
}




    var c = document.forms["WebToLeads1729050000000212695"]["mbl"].value;
    if (c == null || c == "" || c.trim() == "") {
        document.getElementById("Mobile").innerHTML = "Required";
        return false;
    }
else if(arabic.test(c)){
    document.getElementById("Mobile").innerHTML = "Incorrect Mobile Number";
return false;
}
else{
if(c.match(arnuminput)){    
if (!c.match(armblpattern)){
document.getElementById("Mobile").innerHTML = "Incorrect Mobile Number";
return false;
}
else if (c.match(armblpattern3)){
document.getElementById("Mobile").innerHTML = "Incorrect Mobile Number";
return false;
}       
else if (c.length < '10'){
document.getElementById("Mobile").innerHTML = "Incorrect Mobile Number";
return false;
}     
else if (c !== null || c !== "" || c.trim() !== ""){
document.getElementById("Mobile").innerHTML = "";
}
}
else if(c.match(ennuminput)){
if (!c.match(mblpattern)){
document.getElementById("Mobile").innerHTML = "Incorrect Mobile Number";
return false;
}
else if (c.match(mblpattern3)){
document.getElementById("Mobile").innerHTML = "Incorrect Mobile Number";
return false;
}       
else if (c.length < '10'){
document.getElementById("Mobile").innerHTML = "Incorrect Mobile Number";
return false;
}     
else if (c !== null || c !== "" || c.trim() !== ""){
document.getElementById("Mobile").innerHTML = "";
}    
}
}

   var ab = document.forms["WebToLeads1729050000000212695"]["dob"].value;
 var abz = getAge(ab);  
    if (ab == null || ab == "" || ab.trim() == "") {
        document.getElementById("DOB").innerHTML = "Required";
        return false;
    }
//else if (ab.match(npattern)){
//document.getElementById("DOB").innerHTML = "Incorrect dob";
//return false;
//}

else if (abz < "18"){
document.getElementById("DOB").innerHTML = "Age lower than 18 years are not allowed to enter into the draw";
return false;
} 
    
else if (ab !== null || ab !== "" || ab.trim() !== ""){
document.getElementById("DOB").innerHTML = "";
}

      var ac = document.forms["WebToLeads1729050000000212695"]["salary"].value;
    if (ac == null || ac == "" || ac.trim() == "") {
        document.getElementById("SALARY").innerHTML = "Required";
        return false;
    }
else if(arabic.test(ac)){
    document.getElementById("SALARY").innerHTML = "Incorrect Salary";
return false;
}
else{
if(ac.match(arnuminput)){    
if (ac.match(armblpattern3)){
document.getElementById("SALARY").innerHTML = "Incorrect Salary";
return false;
}       
else if (ac.length > '6'){
document.getElementById("SALARY").innerHTML = "Incorrect Salary";
return false;
}     
else if (ac !== null || ac !== "" || ac.trim() !== ""){
document.getElementById("SALARY").innerHTML = "";
}
}
else if(ac.match(ennuminput)){
if (ac.match(mblpattern3)){
document.getElementById("SALARY").innerHTML = "Incorrect Salary";
return false;
}       
else if (ac.length > '6'){
document.getElementById("SALARY").innerHTML = "Incorrect Salary";
return false;
}     
else if (ac !== null || ac !== "" || ac.trim() !== ""){
document.getElementById("SALARY").innerHTML = "";
}    
}
}

 var ad = document.forms["WebToLeads1729050000000212695"]["email"].value;
    if (ad == null || ad == "" || ad.trim() == "") {
        document.getElementById("EMAIL").innerHTML = "Required";
        return false;
    }
else if (!ad.match(emailpattern)){
document.getElementById("EMAIL").innerHTML = "Incorrect email";
return false;
}    
    
else if (ad !== null || ad !== "" || ad.trim() !== ""){
document.getElementById("EMAIL").innerHTML = "";
}


}

$( function() {
    $( "#dob" ).datepicker({
      changeMonth: true,
	  yearRange: '1940:2025',
      changeYear: true
    });
  } );
  
 function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}

function calcage(){
var DOBF = document.getElementById('DOBF').value;
console.log('age: ' + getAge(DOBF));
}   

</script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> 

</html>