<?php 
$result = "";
if(isset($_POST['name'])){
	$servername = "localhost";
	$username = "lurkdev_tester";
	$password = "Lurk123!";
	$dbname = "lurkdev_testchamber";

	// Create connection
	$conn = new mysqli($servername, $username, $password, $dbname);
	// Check connection
	if ($conn->connect_error) {
	  die("Connection failed: " . $conn->connect_error);
	}
	//echo "Connected successfully";

	$name = $_POST['name'];
	$signature = $_POST['signature'];
	if($name !=="" && $signature !==""){
		$sql = "INSERT INTO `tbl_drawing` (`id`, `name`, `signature`) VALUES (NULL, '$name', '$signature')";
		if ($conn->query($sql) === TRUE) {
		  $result = "New record created successfully";
		} else {
		  $result = "Error: " . $sql . "<br>" . $conn->error;
		}
	}else{
		$result = "Please Provide Name & Signeture";
	}
	

	$conn->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawing</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<style type="text/css">
		body {
			padding-top: 20px;
			padding-bottom: 20px;
		}

		#sig-canvas {
			border: 2px dotted #CCCCCC;
			border-radius: 5px;
			cursor: crosshair;
		}

		#sig-dataUrl {
			width: 100%;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1>E-Signature</h1>
				<p>Sign in the canvas below and save your signature as an image!</p>
			</div>
		</div>
		<form action="" method="post">
		<div class="row">
			<div class="col-md-12">
		 		<canvas id="sig-canvas" width="620" height="160">
		 			Get a better browser, bro.
		 		</canvas>
		 		
		 		<div class="form-group">
		 			<label for="name">Name</label>
		 		    <input type="text" class="form-control" name="name" required>
		 		</div>
		 		<div class="form-group">
					<textarea id="sig-dataUrl" class="form-control d-none" rows="5" name="signature"></textarea>
				</div>	
		 	</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<button class="btn btn-primary" type="submit">Submit Signed Form</button>
				<button class="btn btn-light" id="sig-clearBtn">Clear Signature</button>
			</div>
		</div>
		</form>
		<?php if($result!==""){ ?>
		<div class="row">
			<div class="col-md-12">
				<br><br>
				<div class="alert alert-success" role="alert">
				 <?php echo $result;?>
				</div>
			</div>
		</div>
	<?php } ?>
		
	</div>



	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	<script src="js/signature.js"></script>
</body>
</html>