<!DOCTYPE html>
<html>
<head>
	<title>InfoDev Application Feedback Browser</title>
	<link rel="stylesheet" href="fb-records-style.php" media="screen">
	<link rel="icon" type="image/png" href="/resources/img/favicon.ico">

	<script type="text/javascript" src="/components/excellentexport/excellentexport.min.js"></script>
	<link rel="stylesheet" href="/resources/bootstrap/3.3.6/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/resources/font-awesome/css/font-awesome.min.css"/>
	<!-- <link rel="stylesheet" href="https://cdn.wolterskluwer.io/wk.css/0.13.x/with-bootstrap.min.css" type="text/css"/> -->
	<link rel="shortcut icon" href="/resources/img/favicon.ico" />

	<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
	<script type='text/javascript'>//<![CDATA[
		window.onload=function(){
		function download_csv(csv, filename) {
			var csvFile;
			var downloadLink;

			// CSV FILE
			csvFile = new Blob([csv], {type: "text/csv"});

			// Download link
			downloadLink = document.createElement("a");

			// File name
			downloadLink.download = filename;

			// We have to create a link to the file
			downloadLink.href = window.URL.createObjectURL(csvFile);

			// Make sure that the link is not displayed
			downloadLink.style.display = "none";

			// Add the link to your DOM
			document.body.appendChild(downloadLink);

			// Lanzamos
			downloadLink.click();
		}

		function export_table_to_csv(html, filename) {
			var csv = [];
			var rows = document.querySelectorAll("table tr");

			for (var i = 0; i < rows.length; i++) {
				var row = [], cols = rows[i].querySelectorAll("td, th");

				for (var j = 0; j < cols.length; j++)
					row.push(cols[j].innerText);

				csv.push(row.join(","));
			}

			// Download CSV
			download_csv(csv.join("\n"), filename);
		}

		document.querySelector("button").addEventListener("click", function () {
			var today = new Date();
			var y = today.getFullYear();
			var m = today.getMonth() + 1;
			var d = today.getDate();
			var t = today.toLocaleTimeString();  // -> "7:38:05 AM"
			var html = document.querySelector("table").outerHTML;
			export_table_to_csv(html, "InfoDev Application Feedback - " + y + "-" + m + "-" + d + "_" + t + ".csv");
		});

		}//]]>

</script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var $rows = $('#records tr.records');
$('#mySearch').keyup(function() {
	var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

	$rows.show().filter(function() {
			var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
			return !~text.indexOf(val);
	}).remove();
});
});//]]>

</script>


</head>
<body>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<div class="support-header">
					<img class="support-logo" />
					<h1 class="mainHeader_heading" style="font-size:32px; float:right;">InfoDev Feedback</h1>
				</div>
				<!-- <div>
					<header class="mainHeader mainHeader--products "
									style="background-image: url('https://wolterskluwer.com/binaries/content/gallery/wk/headers/wol050624_043-v11-v2.jpg');">
							<h1 class="mainHeader_heading">Support</h1>
					</header>
				</div> -->
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12 col-lg-12">
				<div class="article">
					<div class="article_body">
						<div class="article_div">
							<div class="article_content">


<?php

echo "<p>The following table displays all application feedback found within the database as of:<br /><span id='time'></span>.</p>";
echo "<div class='datagrid'>";
echo "<table id='records'>
				<div>
					<input type='text' id='mySearch' onkeyup='filterTable()' placeholder='Start typing...' title='Type in an application name'>
					<a href=#' onclick='reloadPage()' ><i style='vertical-align: middle' class='fa fa-refresh fa-2x'></i></a>
					<button style='vertical-align: middle' class='myButton'>Export to CSV</button>
				</div>
				<tr>
					<th>Id</th><th>Timestamp</th><th>Feedback Type</th><th>Full Name</th><th>Company</th><th>Client ID</th><th>Email Address</th>
					<th>Telephone</th><th>Application</th><th>Version</th><th>Reason for Comment</th><th>Comment</th><th>Url</th><th>Attachment</th><th>Status</th>
					<th>Sent To</th>
				</tr>";

	class TableRows extends RecursiveIteratorIterator {
	     function __construct($it) {
	         parent::__construct($it, self::LEAVES_ONLY);
	     }

	     function current() {
	         return "<td>" . parent::current(). "</td>";
	     }

	     function beginChildren() {
	         echo "<tr class='records'>";
	     }

	     function endChildren() {
	         echo "</tr>" . "\n";
	     }
	}


	$servername = 'localhost';
	$username = 'root';
	// $password = 'VsQ$vxK3'; //staging
	$password = 'nz2@z5Wv'; //prod
	$dbname = 'feedback';

try {
     $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
     $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     $stmt = $conn->prepare("SELECT id, timestamp, fbtype, full_name, company, clientid, email, telephone, application, version, reason, comments, url, attachment, status, sentto FROM tb_feedback");
     $stmt->execute();

     // set the resulting array to associative
     $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);

     foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
         echo $v;
     }
}
catch(PDOException $e) {
     echo "Error: " . $e->getMessage();
}
$conn = null;


echo "</table>	<script src='tablefilter/tablefilter.js'></script>
<script data-config>
var tf = new TableFilter(document.querySelector('records'), {
    base_path: 'tablefilter/'
});
tf.init();
</script></div>"

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

	<footer class="mainFooter" id="mainFooter">
			<div class="mainFooter_sections mainFooter_sections--logo">
					<!-- <a class="mainFooter_logo" href="#" title="Wolters Kluwer Corporate homepage">Wolters Kluwer Corporate</a> -->
					<div class="mainFooter_logoSection mainFooter_logoSection--note"></div>
			</div>
	</footer>


		<script>
			document.getElementById("time").innerHTML = Date();
		</script>
		<script>
			function reloadPage() {
			    location.reload();
			}
		</script>

</body>
</html>
