<?php
	require_once 'validate.php';
	require 'name.php';
?>
<?php 
include('header.php');
?>
<?php 
include('sidebar.php');
?>
<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/js/jquery.PrintArea.js"></script>

<script>
$(document).ready(function(){
    $("#printButton").click(function(){
        var mode = 'iframe'; //popup
        var close = mode == "popup";
        var options = { mode : mode, popClose : close};
        $("div.printableArea").printArea( options );
    });
});
</script>
<style>
@media screen
{
.srid
{
    top: 961px;
    position: absolute;
    font-size: 34px;
    left: 305px;
}

.photo
{
width: 216px !important;
    top: 689px;
    position: absolute;
    left: 1120px;
}
.name
{
    top: 1079px;
    position: absolute;
    font-size: 34px;
    left: 629px;
}
.fname
{
top: 1149px;
    position: absolute;
    font-size: 34px;
    left: 387px;
}

.dob
{
top: 1149px;
    position: absolute;
    font-size: 34px;
    left: 1009px;
}
.sport
{
top: 1363px;
    position: absolute;
    font-size: 34px;
    left: 1039px;
}
.result
{
top: 1363px;
    position: absolute;
    font-size: 34px;
    left: 453px;
}
.state
{
top: 1221px;
    position: absolute;
    font-size: 34px;
    left: 443px;
}	
}
@media print
{
.srid
{
    top: 961px;
    position: absolute;
    font-size: 34px;
    left: 305px;
}

.photo
{
width: 216px !important;
    top: 689px;
    position: absolute;
    left: 1120px;
}
.name
{
    top: 1079px;
    position: absolute;
    font-size: 34px;
    left: 629px;
}
.fname
{
top: 1149px;
    position: absolute;
    font-size: 34px;
    left: 387px;
}

.dob
{
top: 1149px;
    position: absolute;
    font-size: 34px;
    left: 1009px;
}
.sport
{
top: 1363px;
    position: absolute;
    font-size: 34px;
    left: 1039px;
}
.result
{
top: 1363px;
    position: absolute;
    font-size: 34px;
    left: 453px;
}
.state
{
top: 1221px;
    position: absolute;
    font-size: 34px;
    left: 443px;
}	
}
</style>
<!--app content-->
				<div class="app-content">
					<div class="side-app">
						
<div class = "panel panel-default">
			
			<div class = "panel-body">
				<a href="javascript:void(0);" id="printButton">Print</a>  
				<div class="card-body">
				  <?php 
								
require_once 'connect.php';
if (isset( $_POST['serial_id'] ))
{
$serial_id=$_POST['serial_id'];
$query = $conn->query("SELECT * FROM `registration` where status='Approved' AND serial_id='$serial_id'") or die(mysql_error());
//mysqli_query($conn,$query);

while($fetch = $query->fetch_array()){
?>

	  <div style="width:1500px; height:2122px; text-transform: uppercase;
    font-weight: 900; position:absolute; background-image: url(../assets/images/certificate.jpg);" class="printableArea">
								<div class="text-body"><h3 class="font-weight-semibold2 text-capitalize srid"><?php echo $fetch['serial_id']?></h3></div>
								<div class="item7-card-img mt-5 photo">
									<img src="../<?php echo $fetch['photo']?>" alt="img" class="w-100 br-5 shadow-lg">
								</div>
								<div class="item7-card-desc d-flex mb-2 mt-3">
									<div class="name"><?php echo $fetch['name']?></div>
									<p class="fname"><?php echo $fetch['father_name']?></p>
                                    <p class="dob"><?php echo $fetch['dob']?></p>
                                    <p class="sport"><?php echo $fetch['sport']?></p>
                                    <p class="result"><?php echo $fetch['result']?></p>
                                    <p class="state"><?php echo $fetch['state']?></p>
									
								</div>
								
								
								</div>
								
				
				<?php
					}
}
				?>
								
							</div>
				
	  </div>
		</div>
	</div>
	</div>

						
				<!--app content-->