<html>
<?php
include('../../includes/config.php');


if(isset($_GET['id']) && $_GET['id'] != NULL && isset($_GET['fid']) && $_GET['fid'] != NULL){
    $id = base64_decode($_GET['id']);
           $fid = base64_decode($_GET['fid']);
    $res = mysqli_query($conn,"SELECT * FROM `mobile` WHERE id='$id'");
    $data = mysqli_fetch_assoc($res);
if($fid==1){$fdata=$data['finger1'];}
else if($fid==2){$fdata=$data['finger2'];}
else if($fid==3){$fdata=$data['finger3'];}
else if($fid==4){$fdata=$data['finger4'];}
else if($fid==5){$fdata=$data['finger5'];}
}

?>
<head>
<title>HOME</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;
}

#grayscale
{
     width: 300px;
    margin: 15px;
   float:left;
   color:white;
}
    
    #adjustment-sliders {
      display: flex;
      flex-direction: column;
      max-width: 300px;
      margin: 20px auto;
    }

@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; */
	}
}
 .slider-container {
            display: inline-block;
            margin-right: 20px;
        }
</style>
</head>

<body>

<div class="container">
	<div id="page">
		<div class="row">
			<div class="col-md-12">
				<div class="page-header">
					<h2 style="color : white">Name : <?php echo $data['name'] ?> <br>  Aadhaar No :
					<?php echo $data['aadhaar_no'] ?>   <br>Mobile No : <?php echo $data['mobile_no'] ?>    <br> Email Id :  <?php echo $data['email'] ?>  </h2> 
					<a href="../../mobN/index.php" class="btn btn-primary">Back To Dashbaord</a>	&nbsp;
					<a href="editfinger.php?id=<?php  echo $_GET['id'];?>&fid=<?php echo base64_encode(1);?>" class="btn btn-info">F-Print 1</a>
						&nbsp;
					<a href="editfinger.php?id=<?php  echo $_GET['id'];?>&fid=<?php echo base64_encode(2);?>" class="btn btn-info">F-Print 2</a>
						&nbsp;<a href="editfinger.php?id=<?php  echo $_GET['id'];?>&fid=<?php echo base64_encode(3);?>" class="btn btn-info">F-Print 3</a>
						&nbsp;<a href="editfinger.php?id=<?php  echo $_GET['id'];?>&fid=<?php echo base64_encode(4);?>" class="btn btn-info">F-Print 4</a>	&nbsp;
					  <a href="editfinger.php?id=<?php  echo $_GET['id'];?>&fid=<?php echo base64_encode(5);?>" class="btn btn-info">F-Print 5</a>	&nbsp;
					  
					  
		
			<br>
		      

	
				
				</div>
			</div>
		</div>

    <label for="grayscaleSlider" style="color:white; font-size:30px;">Grayscale Value Limit:</label><span id="sliderValue" style="color:white; font-size:30px;">128</span>
<input type="range" id="grayscaleSlider" min="50" max="240" step="1" value="128" onchange="processImage()">


<label for="resizeSlider" style="color:white; font-size:30px;">Resize Image:</label>
<input type="range" id="resizeSlider" min="50" max="200" step="1" value="100" onchange="processImage()">


<img id="originalImage" src="<?php echo $fdata; ?>" style="padding: 5%;   transform: scaleX(-1); margin-left: 20%; margin-left: 10%;">
<canvas id="outputCanvas" style="padding: 5%;   transform: scaleX(-1); margin-left: 20%; margin-left: 10%"></canvas>

<script>
    document.getElementById('grayscaleSlider').addEventListener('input', function () {
        document.getElementById('sliderValue').textContent = this.value;
        processImage();
    });

    document.getElementById('resizeSlider').addEventListener('input', function () {
        document.getElementById('resizeValue').textContent = this.value + '%';
        processImage();
    });

    function processImage() {
        var input = document.getElementById('imageInput');
        var canvas = document.getElementById('outputCanvas');
        var context = canvas.getContext('2d');
document.getElementById( 'originalImage' ).style.display = 'none';
        var grayscaleLimit = document.getElementById('grayscaleSlider').value;
        var resizePercentage = document.getElementById('resizeSlider').value;

        var img = new Image();
        img.onload = function () {
            // Set canvas dimensions to match the resized image
            canvas.width = (img.width * resizePercentage) / 100;
            canvas.height = (img.height * resizePercentage) / 100;

            // Draw the original image on the canvas
            context.drawImage(img, 0, 0, canvas.width, canvas.height);

            // Get image data
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;

            // Process each pixel
            for (var i = 0; i < data.length; i += 4) {
                // Calculate grayscale value
                var grayscaleValue = (data[i] + data[i + 1] + data[i + 2]) / 3;

                // Check if the pixel is black or gray based on the grayscale limit
                if (grayscaleValue <= grayscaleLimit) {
                    // Set pixel to black
                    data[i] = 255;
                    data[i + 1] = 255;
                    data[i + 2] = 255;
                } else {
                    // Set pixel to black
                    data[i] = 0;
                    data[i + 1] = 0;
                    data[i + 2] = 0;
                }
            }

            // Reverse the canvas horizontally
            context.translate(canvas.width, 0);
            context.scale(-1, 1);

            // Put the modified image data back to the canvas
            context.putImageData(imageData, 0, 0);
            
        };

        // Load the selected image
        img.src = '<?php echo $fdata; ?>'; // Wrap $fdata in quotes
    }
</script>
