<?php include('../config.php');
checkSession();
checkuser($sdata['usertype']);

        if (isset($_GET['key'])) {
//$searchid =$_GET['searchid'];
            $searchid = mysqli_real_escape_string($conn, base64_decode($_GET['key']));

            mysqli_set_charset($conn, "utf8");
            $a = mysqli_query($conn, "SELECT * FROM customers Where id='$searchid'");
            $b = mysqli_fetch_array($a);
			$c_nm=$b['name'];
			$nm_string = str_replace(' ', '', $c_nm);
        }
        ?>

<html>
<head>
<title>Finger Prints</title>
<link rel="icon" href="https://privacymode.in/assets/images/favicon-32x32.png" type="image/png" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- <script src="jquery.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mousewheel/1.0.5/mousewheel.js"></script>
<style>
body
{
    background-color : black;
}
    .container{
	/* background-color: #fad109 !important; */
}
#imgdiv
{
    
    height: auto;
    width: 500px;
    padding: 23px;
    margin-left: 20%;
}
.page-header{
	/* box-shadow: 10px 10px 5px #888888; */
}
div#page {
    margin-left: 1em;
    margin-right: 1em;
}
#options{
	margin: 1em 1em 0em 1em;
}
.carousel-control.left,.carousel-control.right{
	background:none !important;
}
#myCarousel img{
	width:100%;
}
.optionBox,#optionHead1,#optionHead2{
	text-align:center;
}
.carousel-inner {
    background-color: black;
}
.buttons{
	width: 6%;
    position: absolute;
    top: 2%;
    left: 4%;
    z-index: 99;
}
.buttons button{
	display:block;
	margin-bottom: 3px;

}
/* CSS REQUIRED */
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}

/* DEMO ONLY - REMOVES UNWANTED MARGIN */
.well .list-group {
    margin-bottom: 0px;
}

#brightness,#grayscale
{
     width: 300px;
    margin: 15px;
   float:left;
   color:white;
}

@media screen and (min-width: 768px)
{
	.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
		margin-left: -45px !important;
	}
	.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
		margin-right: -45px !important;
	}
	#options .row:nth-child(1){
		/* margin-bottom:4em; */
	}
}
</style>
</head>
<body>

<div class="container">
	<div id="page">
		<div class="row">
			<div class="col-md-12">
				<div class="page-header">
					<h1 style="color : white"> <?php echo $b['name'] ?>'s Finger Prints</h1>
					<h1 style="color : white"><?php echo $b['aadhaar_no'] ?> Aadhar Number</h1>
					<h1 style="color : white"><?php echo $b['name'] ?> ( Name )</h1>
					<h1 style="color : white"><?php echo $b['mobile_no'] ?> Mobile Number</h1>
					<h1 style="color : white"><?php echo $b['dob'] ?> Date of Birth</h1>
					<!--<h1 style="color : white"><?php echo $b['gender'] ?> ( Gender )</h1>-->
				</div>
			</div>
		</div>
		<div class="row">
		    <div class="col-6">
		        <a href="../all-customers-data.php" class="btn btn-primary">Back To Dashbaord</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		        <button type="button" class ="btn btn-outline-info btn-sm increase-brightness">
						<span class="glyphicon glyphicon-plus"></span> Increase Brightness
				</button>
				<button type="button" class ="btn btn-outline-info btn-sm decrease-brightness">
					<span class="glyphicon glyphicon-minus"></span> Decrease Brightness
				</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button onclick="downloadAll()" class="btn btn-success"> Download Images </button>
											    		    </div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div id="imgDiv">
						<div class="buttons">
							<button type="button" class =" zoom-out btn btn-default">
								<span class="glyphicon glyphicon-minus"></span>
							</button>
							<button type="button" class =" zoom-in btn btn-default">
								<span class="glyphicon glyphicon-plus"></span>
							</button>
						 </div>
					
					<div id="myCarousel" class="carousel slide" data-ride="carousel">
					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox" id="allImages">
							<div class="item active panzoom">
								<img src="/uploads/img/<?php echo $b['finger1'] ?>" class="img-responsive" alt="Dicom" style="padding : 26%; filter: grayscale(-48%);filter: invert(1);--value: 100%;transform: scaleX(-1);" id="<?php echo$nm_string;?>-fingerprint1">
							</div>
							<div class="item panzoom">
								<img src="/uploads/img/<?php echo $b['finger2'] ?>" class="img-responsive" alt="Dicom" style="padding : 26%; filter: grayscale(-48%);filter: invert(1);--value: 100%;transform: scaleX(-1);" id="<?php echo$nm_string;?>-fingerprint2">
							</div>
							<div class="item panzoom">
								<img src="/uploads/img/<?php echo $b['finger3'] ?>" class="img-responsive" alt="Dicom" style="padding : 26%; filter: grayscale(-48%);filter: invert(1);--value: 100%;transform: scaleX(-1);" id="<?php echo$nm_string;?>-fingerprint3">
							</div>
							<div class="item panzoom">
								<img src="/uploads/img/<?php echo $b['finger4'] ?>" class="img-responsive" alt="Dicom" style="padding : 26%; filter: grayscale(-48%);filter: invert(1);--value: 100%;transform: scaleX(-1);" id="<?php echo$nm_string;?>-fingerprint4">
							</div>
							<div class="item panzoom">
								<img src="/uploads/img/<?php echo $b['finger5'] ?>" class="img-responsive" alt="Dicom" style="padding : 26%; filter: grayscale(-48%);filter: invert(1);--value: 100%;transform: scaleX(-1);" id="<?php echo$nm_string;?>-fingerprint5">
							</div>
						</div>

						<!-- Left and right controls -->
						<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>
				</div>		
				<div class="col-md-12" style="text-align:center;margin-top: 1em;margin-bottom: 1em;">
					<button class="reset btn btn-primary">Reset Zoom</button>
				</div>
				
			</div>
		</div>
	</div>	
</div>

</body>
</html>
<script>
    $(document).ready(function(){
        
        var bLevel = 1;
        $('.increase-brightness').click(function() {
            bLevel += 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter" : "brightness("+bLevel+")"})
        });
        
        $('.decrease-brightness').click(function() {
            bLevel -= 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter" : "brightness("+bLevel+")"})
        });
        
        var cLevel = 1;
        $('.increase-contrast').click(function() {
            cLevel += 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter" : "contrast("+bLevel+")"})
        });
        
        $('.decrease-contrast').click(function() {
            cLevel -= 0.01;
            $(document).find(".img-responsive").css({"-webkit-filter" : "contrast("+bLevel+")"})
        });
    });
    
    
	(function() {
		var $section = $('div').first();
		$section.find('.panzoom').panzoom({
			$zoomIn: $section.find(".zoom-in"),
			$zoomOut: $section.find(".zoom-out"),
			$zoomRange: $section.find(".zoom-range"),
			$reset: $section.find(".reset")
		});

		$('#myCarousel').carousel({
			pause: true,
			interval: false
		});	

	})();
</script>
<script>
function downloadAll(){
    var div = document.getElementById("allImages");
    console.log(div);
    var images = div.getElementsByTagName("img");
    console.log(images)
	
    for(i=0; i<images.length ; i++){
        console.log(images[i]);
        downloadWithName(images[i].src,images[i].src,images[i].id);
    }
}

function downloadWithName(uri, name, id) {
    function eventFire(el, etype){
        if (el.fireEvent) {
            (el.fireEvent('on' + etype));
        } else {
            var evObj = document.createEvent('MouseEvent');
            evObj.initMouseEvent(etype, true, false, 
                 window, 0, 0, 0, 0, 0,
                 false, false, false, false,
                 0, null);
            el.dispatchEvent(evObj);
        }
    }
			var previewImg = document.querySelector("#" + id);
					const canvas = document.createElement("canvas");
					const ctx = canvas.getContext("2d");
					var flipHorizontal = -1;
					var flipVertical = 1;
					canvas.width = previewImg.naturalWidth;
					canvas.height = previewImg.naturalHeight;
					ctx.translate(canvas.width / 2, canvas.height / 2);
					
					ctx.filter = 'invert(1)';
					ctx.scale(flipHorizontal, flipVertical);
					
					ctx.drawImage(previewImg, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
    var link = document.createElement("a");
    link.download = id;
    link.href = canvas.toDataURL();
    link.click();
}
</script>