<?php

    include 'date.php';
    $query = "SELECT sl_no,subject,Upload_date,Location,Filename FROM `school_info`";
    $search_result = filterTable($query);
	// function to connect and execute the query
	function filterTable($query)
	{
    	include 'connection.php';
    	$filter_Result = mysqli_query($con, $query);
    	return $filter_Result;
	}
 
?>
<!DOCTYPE html>
<html>
<head>
	
	<meta content="initial-scale=1, maximum-scale=1,
		user-scalable=0" name="viewport" />
	<meta name="viewport" content="width=device-width" />
<!-----------Regarding pagination section ----------------------------------------->	
	<!-- Datatable plugin CSS file -->
	<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />

	<!-- jQuery library file -->
	<script type="text/javascript"
	src="https://code.jquery.com/jquery-3.5.1.js">
	</script>

	<!-- Datatable plugin JS library file -->
	<script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
	</script>


<script>
//$(document).ready(function() {
//
//	/* To hide column 2 and 3 */
//	$('#tableID').DataTable( {
//		"columnDefs": [
//			{
//				"targets": [ 2 ],
//				"visible": false,
//				"searchable": false
//			},
//			{
//				"targets": [ 3 ],
//				"visible": false
//			}
//		]
//	} );
//} );
</script>
<script>
//	$(document).ready(function() {
//				
//	/* marksscored is sorted in descending */
//	$('#tableID').DataTable({
//		order: [[ 1, 'desc' ]]
//	});
//});
</script>
<!-----------Regarding pagination section ----------------------------------------->
	
<!--------------------------Page element body style ------------------------------->
<style>
	body{background-color: #f2f2f2; color: #333;}
	.main{box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; margin-top: 10px;}
	h3{background-color: #4294D1; color: #f7f7f7; padding: 15px; border-radius: 4px; box-shadow: 0 1px 6px rgba(57,73,76,0.35);}
	.img-box{margin-top: 10px;}
	.img-block{float: none;margin-left: 0px; margin-right: 0px; text-align: center;}
	p{margin-top: 0;}
	<!--img{width: 375px; min-height: 250px; margin-bottom: 10px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; border:6px solid #f7f7f7;}-->
	img{width: 120px; min-height: 170px; margin-bottom: 0px; margin-right:0px;  box-shadow: 0 .125rem .25rem rgba(0,0,0,0)!important; border:2px solid #f7f7f7;}
	input[type=text], [type=number],select, textarea {
	width: 50%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
	}
	
	label {
	padding: 12px 12px 12px 0;
	display: inline-block;
	}
	
	input[type=submit] {
	background-color: #04AA6D;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
	}
	
	input[type=submit]:hover {
	background-color: #45a049;
	}
	
	.container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 5px;
	font-weight:bold;
	
	}
	
	.col-25 {
	float: left;
	width: 25%;
	margin-top: 6px;
	}
	
	.col-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
	}
	
	/* Clear floats after the columns */
	.row:after {
	content: "";
	display: table;
	clear: both;
	
	}
	
	/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	.col-25, .col-75, input[type=submit] {
	width: 100%;
	margin-top: 0;
	}
	}
	img.center{
	display: block;
	
	margin-left: auto;
	
	margin-right: auto;
	}
	.important:after{
	content:"*";
	color:red;
	font-weight:bold;
	}
	.style2 {color: #CCCCCC}
	.style3 {color: #000099}
	.style6 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; }
    </style>
<!--------------------------Page element body style ------------------------------->	

<!-----------css for image enlarge --------------------->
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.apartmentImage {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.apartmentImage:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  margin-bottom: 200px; /* Location of the box */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.closeMyModal {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closeMyModal:hover,
.closeMyModal:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
<!-----------css for image enlarge --------------------->
</head>

<body>
	<h2>Pagination using jQuery Datatables </h2>

	<!--HTML table with student data-->
	

<!------------------------------------------------->
<table id="tableID" class="display" style="width:100%" border="1" >
      <thead>
        <tr>
        <tr>
          <th  bgcolor="#6FA4E3" style="text-align:center" ><span class="style6">Slno</span></th>
          <th  bgcolor="#6FA4E3"  style="text-align:center"><span class="style6">subject </span></th>
          <th  bgcolor="#6FA4E3" style="text-align:center"><span class="style6">Upload Date </span></th>
          <th  bgcolor="#6FA4E3" style="text-align:center" ><span class="style6">File Name</span></th>
          <th  bgcolor="#6FA4E3" style="text-align:center" ><span class="style6">Download File</span></th>
         
        </tr>
      </thead>
      <tbody>
        <?php 
			$intX=1;
			while($row = mysqli_fetch_array($search_result)):
			echo "<div id='img_div'>";
			$myColor1="#FFFF00";
			if($intX % 2 == 0)
			{
				$myColor="#9CBDE4";
				//echo $intX;
				//echo $myColor;
			}else
			{
				$myColor="#FFFFFF";
				///echo $intX;
				//echo $myColor;
			}
			
			
			
		?>
        <!--<tr bgcolor="<?php echo "asdaA" . $myColor; ?>" onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)" >-->
        <tr>
          <td  style="text-align:center"><?php echo $intX; ?></td>
          <td  style="text-align:center"><?php echo $row['subject'];?></td>
          <td  style="text-align:center"><?php echo $row['Upload_date'];?></td>
          <td  style="text-align:center"><?php echo $row['Filename'];?></td>
          <td  style="text-align:center"><a href='<?php echo $row['Location'];?>' target='_blank'> &darr; Download</a></td>
        </tr>
        <?php 
				$intX++;
				$myColor="";
			 	echo "</div>";
			 	endwhile;
			?>
      </tbody>
    </table>
<!--------------pagination_script------------------------------------>
<script>

		/* Initialization of datatable */
		$(document).ready(function() {
			$('#tableID').DataTable({ });
		});
</script>
<!--------------pagination_script------------------------------------>
<!--------div for modal image enlarge----->
		<div id="myModal" class="modal">
		<span class="closeMyModal">&times;</span>
		<img class="modal-content" id="myModalImg">
		<div id="myModalImgCaption"></div>
		</div>
<!--------div for modal image enlarge----->

	<p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
<!--------------------------------------------->
	
	
	<!------script for image enlarge------------->
	<script>
		// Get the modal
		var modal = document.getElementById("myModal");
		
		// Get the image and insert it inside the modal - use its "alt" text as a caption
		var apartmentImage = document.getElementsByClassName("apartmentImage");
		var myModalImg = document.getElementById("myModalImg");
		var myModalImgCaptionText = document.getElementById("myModalImgCaption");
		
		document.body.onclick = function(e) {
		var clickedEl = window.event ? event.srcElement : e.target;
		while (clickedEl != null) {
		if (clickedEl.className && (" " + clickedEl.className + " ").indexOf("apartmentImage") != -1) {
		modal.style.display = "block";
		myModalImg.src = clickedEl.src;
		myModalImgCaptionText.innerHTML = clickedEl.alt;
		return;
		}
		clickedEl = clickedEl.parentNode;
		}
		}
		
		// Get the <span> element that closes the modal
		var closeMyModal = document.getElementsByClassName("closeMyModal")[0];
		
		// When the user clicks on <span> (x), close the modal
		closeMyModal.onclick = function() { 
		modal.style.display = "none";
		}
	</script>
</body>

</html>
