<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test ExpressJS + MongoDB</title>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');

		body {
			width: 55em;
			margin: 0 auto;
			font-family: 'Nunito', sans-serif;
			background: #222;
		}

		div {
			padding: 30px;
			background: #FFFFFF;
			margin: 30px;
			border-radius: 5px;
			border: 1px solid #888888;
			text-align: center;
		}

		img {
			max-width: 100%;
			max-height: 250px;
			transition: all 0.2s ease-in-out;
		}

		img:hover {
			transform: scale(1.2);
		}

		table {
			width: 100%;
		}

		.online {
			font-weight: bold;
			color: #2e8141;
		}

		.offline {
			font-weight: bold;
			color: #812e2e;
		}

		a {
			font-weight: bold;
			text-decoration: none;
			color: #054262;
		}

		a:hover {
			color: #1295da;
		}

		input {
			display: block;
			padding: 5px;
			border-radius: 5px;
			border: 1px solid silver;
			margin: auto;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://terrylinooo.github.io/jquery.disableAutoFill/assets/js/jquery.disableAutoFill.min.js"></script>
</head>

<body>
	<div>
		<h1>ToDo Example</h1>
		<h4>ExpressJS + MongoDB + Body-Parser + Ejs</h4>
	</div>

	<div>
		<h1>Görev Ekle</h1>
		<form id="form" action="/todo" method="POST">
			<input type="text" placeholder="Ne yapılacak?" name="baslik">
			<input type="datetime-local" placeholder="Bitiş Tarihi" name="bitis">
			<button type="submit">Ekle</button>
		</form>
	</div>

	<div>
		<table>
			<thead>
				<tr>
					<th>Mission</th>
					<th>Due Date</th>
					<th>State</th>
					<th>#</th>
				</tr>
			</thead>

			<tbody>
				<% for(var i=0; i < data.length; i++) {%>
					<tr class="<%= data[i].durum==true ? 'online' : 'offline' %>">
						<td>
							<%= data[i].baslik %>
						</td>
						<td>
							<%= new Date(data[i].bitis).toLocaleString() %>
						</td>
						<td>
							<%= data[i].durum==false ? "Not Done" : "Done" %>
						</td>
						<td>
							<button onclick="update('<%= data[i]._id %>', <%= data[i].durum == true ? false : true %>)">
								<%= data[i].durum==true ? "Uncheck" : "Check" %>
							</button>
							<button onclick="remove('<%= data[i]._id %>')">Delete</button>
						</td>
					</tr>
					<% } %>

			</tbody>
		</table>

	</div>

	<div>
		<span><a href="https://utkuhalis.com">Utku Halis</a></span>
		-
		<span><a href="https://kodla.io">kodla.io</a></span>
	</div>

	<script>

		function update(id, state) {
			fetch('/todo', {
				method: 'put',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					id: id,
					durum: Boolean(state)
				})
			})
				.then(res => {
					if (res.ok) return res.json()
				})
				.then(response => {
					window.location.reload(true)
				})
		}

		function remove(id) {
			fetch('/todo', {
				method: 'delete',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					id: id,
				})
			})
				.then(res => {
					if (res.ok) return res.json()
				})
				.then(response => {
					window.location.reload(true)
				})
		}

		$(function () {
			$('#form').disableAutoFill();
		});
	</script>
</body>

</html>
