<?php 
require('../config/connection.php');
$query = "select screenwidth from width_mst";
$rs = mysqli_query($con, $query) or die("Cannot execute query: $query\n");
while ($row = mysqli_fetch_assoc($rs)) {
	$width = $row['screenwidth'];
}
$width = $width . "px";
require_once "../main/controllerUserData.php";
$email = $_SESSION['email'];
$password = $_SESSION['password'];
if($email != false && $password != false){
    $sql = "SELECT * FROM usertable WHERE email = '$email'";
    $run_Sql = mysqli_query($con, $sql);
    if($run_Sql){
        $fetch_info = mysqli_fetch_assoc($run_Sql);
        $status = $fetch_info['status'];
        $code = $fetch_info['code'];
        if($status == "verified"){
            if($code != 0){
                header('Location: ../main/reset-code');
            }
        }else{
            header('Location: ../main/user-otp');
        }
    }
}else{
    header('Location: ../main/login-user');
}
?>
<html>
<head>
    <title>Profile</title>
    <link rel = "icon" href = "https:../image/ims.png" type = "image/x-icon">
</head>
<script src='../js/jquery-3.1.1.min.js' type='text/javascript'></script>
<script src='../js/jquery-ui.min.js' type='text/javascript'></script>
<link href="../css/style.css" rel="stylesheet" />
<link href="../css/style1.css" rel="stylesheet" />
<link href='../css/jquery-ui.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/all.css">
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/styleg.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery.placeholder.label.js"></script>
<style>
    label {
        font-size: 15px;
        top: 11px;
        margin-bottom: .5rem;
        margin-left: 5px;
        font-weight:bold;
        display: inline-transparent;
    }
</style>
<body style="min-width: <?php echo $width; ?>; width: auto;">
<div style="min-width: <?php echo $width; ?>; width: auto;">
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="height: 55px; min-width: <?php echo $width; ?>; width:  auto; background-color: #007bff; font-size:24px;">
        <input style = "background-color: #007bff; font-size:24px; width:160px; height : 47px; margin-top : px;" type="button" onclick="location.href='../main/index';" value="Home">
        <input style = "background-color: #007bff; font-size:24px; width:170px; height : 47px; margin-top : px;" type="button" onclick="location.href='../booking/index';" value="Book a Ticket">
        <input style = "background-color: #007bff; font-size:24px; width:160px; height : 47px; margin-top : px;" type="button" onclick="location.href='../main/logout-user';" value="Logout">
        <h1 style="color:white; font-size:24px; margin-top: -40px;" class="text-primary" align="center">Your Profile (  <?php echo $email; ?> )</h1>
        <h1 style="color:white; font-size:24px; margin-top : -35px;margin-right :20px;" class="text-primary" id="demo2" align="right"></h1>
    </nav>
	<div class="container" style = "min-width: <?php echo $width; ?>; width: auto; margin-top:-10px;">
	    <center>
			<tr>
				<div class="col-xs-2">
					<label style="font-size:18px;" class="col-sm-2 control-label">Name</label>
					<input type="text" id="pilgrim_name" class="roundedCategory" style="font-size:18px; width:100%; height: 35px; font-weight:bold; color: #000066;" value="" oninput="this.value = this.value.toUpperCase()" autocomplete="off" required autofocus>
				</div>
				<div class="col-xs-1">
					<label style="font-size:18px;" class="col-sm-2 control-label">Age</label>
					<input type="text" id="age" class="roundedCategory" style="font-size:18px; width:100%; height: 35px; font-weight:bold; color: #000066;" onkeypress="return isNumberKey(event)" maxlength="10" oninput="this.value = this.value.toUpperCase()" autocomplete="off" required>
				</div>
				<div class="col-xs-1">
					<label style="font-size:18px;" class="col-sm-2 control-label">Gender</label>
					<input type="text" id="gender" class="roundedCategory" style="font-size:18px; width:100%; height: 35px; font-weight:bold; color: #000066;" placeholder="Select" maxlength="20" autocomplete="off" required>
				</div>
				<!--div class="col-xs-1">
					<label style="font-size:18px; margin-top:5px;" class="col-sm-2 control-label">Gender</label>
                    <select style="font-size:18px; font-weight:bold; width:100%; border-radius: 30px; height: 30px;" name="gender" class="selectBox" id="gender">
                        <option value="" disabled hidden selected>Select Gender</option>
                        <option value="Male">Male </option>
                        <option value="Female">Female </option>
                        <option value="Transgender">Transgender </option>
                    </select>
				</div-->
				<div class="col-xs-2">
					<label style="font-size:18px;" class="col-sm-2 control-label">Email</label>
					<input type="text" readonly id="email" class="roundedCategory" style="font-size:18px; width:100%; height: 35px; font-weight:bold; color: #000066;" value="<?php echo $email; ?>" oninput="this.value = this.value.toLowerCase()" autocomplete="off" required>
				</div>
				<div class="col-xs-2">
					<label style="font-size:18px;" class="col-sm-2 control-label">Mobile_Number</label>
					<input type="text" id="mobile_number" class="roundedCategory" style="font-size:18px; width:100%; height: 35px; font-weight:bold; color: #000066;" onkeypress="return isNumberKey(event)" maxlength="10" oninput="this.value = this.value.toUpperCase()" autocomplete="off" required>
				</div>
				<div class="col-xs-2">
					<label style="font-size:18px;" class="col-sm-2 control-label">ID_Proof</label>
					<input type="text" id="aadhaar_number" class="roundedCategory" style="font-size:18px; width:100%; height: 35px; font-weight:bold; color: #000066;" onkeypress="return isNumberKey(event)" maxlength="12" oninput="this.value = this.value.toUpperCase()" autocomplete="off" required>
				</div>
				<div class="col-xs-2">
					<label style="font-size:18px;" class="col-sm-2 control-label">Place</label>
					<input type="text" id="place" class="roundedCategory" style="font-size:18px; width:100%; height: 35px; font-weight:bold; color: #000066;" oninput="this.value = this.value.toUpperCase()" autocomplete="off" required>
				</div>
			</tr>
		</center>
		<br><br><br><br>
    	<div style="margin-top : 10px;min-width: <?php echo $width; ?>; width: auto;" align="center">
    		<input type="hidden" name="user_id" id="user_id" />
    		<button type="button" name="action" id="action" style="width : 200px; height: 45px;" class="btn btn-primary">Add</button>
    	</div>
	</div>
	<div class="container" style = "min-width: <?php echo $width; ?>; width: auto;">
	    <center>
			<tr>
			    <input style ="margin-left : 0px; width : 90%; height:40px; font-size:20px; font-weight:bold;" name="search_text" id="search_text" type="text" placeholder="Search......" alt="search">
			<tr>
		</center>
	</div>
	<div style="margin-top : 0px; margin-left : 0px;min-width: <?php echo $width; ?>; width: auto; height:50%; margin-left: 0px; margin-top: 0px; overflow:auto;" id="result" class="table-responsive"  align="center"></div>
	<div style="height: 60px; margin-left:0px; margin-top:0px; font-size:30px;" class="success"></div>
	<div style="height: 60px; margin-left:0px; margin-top:0px; font-size:30px;" class="error"></div>
</div>
</body>
</html>
<script>
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
</script>
<?php
	$date = new DateTime();
	$current_timestamp = $date->getTimestamp();
?>
<script>
    $(document).on('keyup', function(e) {
        if (e.key == "Escape"){
          window.location.href = "../main/index"
        }
    });
</script>
<script>
	$(document).keydown(function(objEvent) {
		if (objEvent.keyCode == 9) {
			objEvent.preventDefault();
		}
	})
	flag_time = true;
	timer = '';
	setInterval(function(){phpJavascriptClock();},1000);
	
	function phpJavascriptClock()
	{
		if ( flag_time ) {
		timer = <?php echo $current_timestamp;?>*1000;
		}
		var d = new Date(timer);
		months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
		month_array = new Array('January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'Augest', 'September', 'October', 'November', 'December');
		day_array = new Array( 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
		currentYear = d.getFullYear();
		month = d.getMonth();
		var currentMonth = months[month];
		var currentMonth1 = month_array[month];
		var currentDate = d.getDate();
		currentDate = currentDate < 10 ? '0'+currentDate : currentDate;
		var day = d.getDay();
		current_day = day_array[day];
		var hours = d.getHours();
		var minutes = d.getMinutes();
		var seconds = d.getSeconds();
		var ampm = hours >= 12 ? 'PM' : 'AM';
		hours = hours % 12;
		hours = hours ? hours : 12; // the hour ’0′ should be ’12′
		minutes = minutes < 10 ? '0'+minutes : minutes;
		seconds = seconds < 10 ? '0'+seconds : seconds;
		var strTime = hours + ':' + minutes+ ':' + seconds + ' ' + ampm;
		timer = timer + 1000;
		document.getElementById("demo2").innerHTML='Date : ' + currentDate+'-' +(month+1)+'-' +currentYear + ' Time : ' + strTime ;
		flag_time = false;
	}
</script>
<script>
	$(document).ready(function() {
		load_data();
		function load_data(query) {
		    var email = $('#email').val();
			$.ajax({
				url: "search.php",
				method: "post",
				data: {
					query: query,
					email:email
				},
				success: function(data) {
					$('#result').html(data);
					$('#pilgrim_name').val('');
					$('#age').val('');
					$('#gender').val('');
					$('#email').val('<?php echo $email; ?>');
					$('#mobile_number').val('');
					$('#aadhaar_number').val('');
					$('#place').val('');
					//$('#pilgrim_name').focus();
					$('#action').text("Add");
				}
			});
		}
		function load_data1(query){
		    var email = $('#email').val();
			$.ajax({
				url:"search.php",
				method:"post",
				data:{
				    query:query,
				    email:email
				},
				success:function(data)
				{
					$('#result').html(data);
					$('#pilgrim_name').val('');
					$('#age').val('');
					$('#gender').val('');
					$('#email').val('<?php echo $email; ?>');
					$('#mobile_number').val('');
					$('#aadhaar_number').val('');
					$('#place').val('');
					//$('#pilgrim_name').focus();
					$('#action').text("Add");
				}
			});
		}
		$('#search_text').keyup(function() {
			var search = $(this).val();
			if (search !== '') {
				load_data1(search);
			} else {
				load_data();
			}
		});
		$('#action').click(function() {
			var pilgrim_name = $('#pilgrim_name').val();
			var age = $('#age').val();
			var gender = $('#gender').val();
			var email = $('#email').val();
			var mobile_number = $('#mobile_number').val();
			var aadhaar_number = $('#aadhaar_number').val();
			var place = $('#place').val();
			var id = $('#user_id').val();
			var action = $('#action').text();
			$actiontext = $('#action').text();
			if (pilgrim_name != '') {
				$.ajax({
					url: "action.php",
					method: "POST",
					data: {
						pilgrim_name: pilgrim_name,
						age: age,
						gender: gender,
						email: email,
						mobile_number: mobile_number,
						aadhaar_number: aadhaar_number,
						place: place,
						id: id,
						action: action
					},
					success: function(data) {
						$('.success').show(1000).html("Record Saved Successfully.").delay(1000).fadeOut(1000);
						load_data();
					}
				});
			} else {
				$('.success').show(1000).html("All Fields are Required").delay(1000).fadeOut(1000);
			}
		});

		$(document).on('click', '.update', function() {
		    var pilgrim_name = $('#pilgrim_name').val();
			var age = $('#age').val();
			var gender = $('#gender').val();
			var email = $('#email').val();
			var mobile_number = $('#mobile_number').val();
			var aadhaar_number = $('#aadhaar_number').val();
			var place = $('#place').val();
			var id = $(this).attr("id");
			$.ajax({
				url: "fetch.php",
				method: "POST",
				data: {
					id: id
				},
				dataType: "json",
				success: function(data) {
					$('#action').text("Update");
					$('#user_id').val(id);
					$('#pilgrim_name').val(data.pilgrim_name);
					$('#age').val(data.age);
					$('#gender').val(data.gender);
					$('#email').val(data.email);
					$('#mobile_number').val(data.mobile_number);
					$('#aadhaar_number').val(data.aadhaar_number);
					$('#place').val(data.place);
				}
			})
		});
		$(document).on('click', '.delete', function() {
			var id = $(this).attr("id");
			if (confirm("Are you sure you want to remove this data?")) {
				var action = "Delete";
				$.ajax({
					url: "action.php",
					method: "POST",
					data: {
						id: id,
						action: action
					},
					success: function(data) {
						$('.success').show(1000).html("Record Deleted Successfully.").delay(1000).fadeOut(1000);
						load_data();
					}
				})
			} else {
				return false;
			}
		});
		$(function() {
			$("#gender").autocomplete({
				source: function(request, response) {
					$.ajax({
						url: "fetchcustomer.php",
						type: 'post',
						dataType: "json",
						data: {
							search: request.term
						},
						success: function(data) {
							response(data);
						}
					});
				},
				select: function(event, ui) {
					$('#gender').val(ui.item.label);
					document.getElementById("mobile_number").focus();
					return false;
				}
			});
		});
		$(document).ready(function() {
			$('input').on('keypress', function(e) {
				if (e.which == 13) {
					switch ($(this).attr('id')) {
						case 'pilgrim_name':
							if (!document.getElementById("pilgrim_name").value.length == 0) {
								$('#age').focus();
								e.preventDefault();
								break;
							}
						case 'age':
							if (!document.getElementById("age").value.length == 0) {
								$('#gender').focus();
								e.preventDefault();
								break;
							}
						case 'gender':
							if (!document.getElementById("gender").value.length == 0) {
								$('#mobile_number').focus();
								e.preventDefault();
								break;
							}
						case 'email':
							if (!document.getElementById("email").value.length == 0) {
								$('#mobile_number').focus();
								e.preventDefault();
								break;
							}
						case 'mobile_number':
							if (!document.getElementById("mobile_number").value.length == 0) {
								$('#aadhaar_number').focus();
								e.preventDefault();
								break;
							}
						case 'aadhaar_number':
							if (!document.getElementById("aadhaar_number").value.length == 0) {
								$('#place').focus();
								e.preventDefault();
								break;
							}
						case 'place':
							if (!document.getElementById("place").value.length == 0) {
								$('#action').focus();
								e.preventDefault();
								break;
							}
					}
				}
			});
		});
	});
</script>
<script type="text/javascript">
	function exportToExcel(tableID, filename = '') {
		var downloadurl;
		var dataFileType = 'application/vnd.ms-excel';
		var tableSelect = document.getElementById(tableID);
		var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
		filename = filename ? filename + '.xls' : 'export_excel_data.xls';
		downloadurl = document.createElement("a");
		document.body.appendChild(downloadurl);
		if (navigator.msSaveOrOpenBlob) {
			var blob = new Blob(['\ufeff', tableHTMLData], {
				type: dataFileType
			});
			navigator.msSaveOrOpenBlob(blob, filename);
		} else {
			downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
			downloadurl.download = filename;
			downloadurl.click();
		}
	}
</script>