<?php include("../db.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "https://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
	<title>JPEGCam Test Page</title>
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
    <script>
    function save_snapshot(){
		take_snapshot();
	}
    </script>
<style type="text/css">

	.btn{
		border-radius: 8px 8px;
		background: crimson;
		padding: 7px 10px 7px 10px;
		color: white;
		font-weight: bold;
	}
</style>

<style type="text/css">
.content{
	color: green;
	font-weight: bold;
}
.textbox{
	color: brown;
	font-weight: bold;
	}
	.btn{
		border-radius: 8px 8px;
		background: crimson;
		padding: 7px 10px 7px 10px;
		color: white;
		font-weight: bold;
	}
</style>

	<!-- Date: 2008-03-15 -->
</head>
<body>

	<center><table><tr><td valign=top>

	<br/>
    <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
        <div id="targetOuter">
			<div id="targetLayer"></div>
			<!--<div class="icon-choose-image" >-->

    			<div id="my_camera" style="margin-left:-30px;margin-top:-45px;"></div>
				<div id="results"></div>

			<p id="upload-res"></p>
			
                <input type=button value="Take Snapshot" onClick="take_snapshot()" class="btn btn-success" style="display:inline-block;">
                <input type="hidden" name="image" class="image-tag">

    			<input type="submit" value="Upload Photo" class="btn btn-success"  style="display:inline-block;"/>




		</div>
	</form>
	

	<script language="JavaScript">

    Webcam.set({
        width: 300,
        height: 250,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
  
    Webcam.attach( '#my_camera' );
  
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            $(".image-tag").val(data_uri);
            document.getElementById('my_camera').style.display = 'none';
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'" style="margin-top:-50px"/>';
        } );
    }
    
    $(document).ready(function (e) {
    	$("#uploadForm").on('submit',(function(e) {
    		e.preventDefault();
    		$.ajax({
            	url: "upload.php",
    			type: "POST",
    			data:  new FormData(this),
    			beforeSend: function(){$("#body-overlay").show();},
    			contentType: false,
        	    processData:false,
    			success: function(data)
    		    {
    // 			$("#targetLayer").html(data);
    // 			$("#targetLayer").css('opacity','1');
                if(data !=0){
                    $("#upload-res").html("<p style='color:green;font-size:20px;'>File Uploaded successfully.</p>");
                    $("#photo").val(data);
                } else {
                    $("#upload-res").html("<p style='color:red;font-size:20px;'>Please try again.</p>");
                }
    			setInterval(function() {$("#body-overlay").hide(); },500);
    			},
    		  	error: function() 
    	    	{
    	    	} 	        
    	   });
    	}));
    });
	
		function changeStudent(id){
			$.post( "ajax.php", { type: "student" ,cls: id } , function( data ) {
				$("#studentList").html(data);
			});
		}
	</script>
	
	</td><td width=50>&nbsp;</td><td valign=top>
		<!--<div id="upload_results" style="background-color: teal;padding: 2px 15px 0px 15px;"><h1 style="color:yellowgreen;">Please take a Photo..</h1></div>-->
        
        <form target="_blank" method="post" action="../print/gateentry.php">
<input type="hidden" name="photo" id="photo" />
<table>
	<tr>
    	<td class="content">Select Class</td>
        <td><select onchange="changeStudent($(this).val())" id="class">
                <option class="textbox" value="">Class</option>
                <?php 
                    $class=$db->getRows("select * from class  ");
                    foreach($class as $cla){
                        ?>
                        <option class="textbox" value="<?php echo $cla["class"] ?>">
                            <?php echo $cla["class"] ?>
                        </option>
                        <?php
                    }
                ?>
            </select></td>
    </tr>
    <tr>
    	<td class="content">School Stduents</td>
        <td><div id="studentList">
        <select name="idno">
        	<option class="textbox" value="">Select student name</option>
        </select>
        </div>
        </td>
    </tr>
    <tr>
    	<td class="content">Visitor name</td>
        <td><input class="textbox" type="text" name="name" /></td>
    </tr>
    <tr>
    	<td class="content">Visitor Relation</td>
        <td><input class="textbox" type="text" name="relation" /></td>
    </tr>
    <tr>
    	<td class="content">Visitor Contact no</td>
        <td><input class="textbox" type="text" name="contact" /></td>
    </tr>
    <tr>
    	<td></td>
        <td><input class="btn"  type="submit"  value="Create GATE Pass" /></td>
    </tr>
</table>
</form>
        
	</td></tr></table></center>
</body>



</html>
