<?php
session_start();

if (isset($_SESSION["user_id"]) and isset($_SESSION["password"])) {
	?>
	<!DOCTYPE html>
	<html lang="zxx">
	<head>
		<title>SuperCryptEX | ToDo List</title>
		<meta charset="UTF-8">
		<meta name="description" content="SolMusic HTML Template">
		<meta name="keywords" content="music, html">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link href="img/favicon.ico" rel="shortcut icon"/>

		<!-- Google font -->
		<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">

		<!-- Stylesheets -->
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" href="css/font-awesome.min.css"/>
		<link rel="stylesheet" href="css/owl.carousel.min.css"/>
		<link rel="stylesheet" href="css/slicknav.min.css"/>

		<!-- Main Stylesheets -->
		<link rel="stylesheet" href="css/style.css"/>

	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<!--- Smooth Scrolling --->
	<style>html { scroll-behavior: smooth; }</style>
</head>
<body>
	<!-- Page Preloder -->
	<div id="preloder">
		<div class="loader"></div>
	</div>

	<!-- Header section -->
	<header class="header-section clearfix" id="home">
		<a href="#" class="site-logo">
			<h4 style="color: #fc0254;">SuperCrypt <span style="color: white;">EX</span></h4>
			<!---<img src="img/logo.png" alt="">--->
		</a>
		<div class="header-right">
			<a href="#" class="hr-btn">Help</a>
			<span>|</span>
			<div class="user-panel">
				<a href="./destroy_session.php" class="login">Logout</a>
				<a href="" class="register"><?= $_SESSION["fullname"]; ?></a>
			</div> 
		</div>
		<ul class="main-menu">
			<li><a href="./main.php#home">Home</a></li>
			<li><a href="./todo.php#">To-Do</a></li>
			<li><a href="./sendfile.php#">File Transfer</a></li>
			<li><a href="./inbox.php#">Inbox</a></li>
			<li><a href="./contact.php#">Contact Us</a></li>
		</ul>
	</header>
	<!-- Header section end -->

	<!-- Subscription section -->
	<section class="subscription-section spad" id="main">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="sub-text">
						<h2>To-Do List</h2>
						<h3>Write some notes here</h3>
						<p>What is To-Do List?<br>
							<strong>to‐do list (plural to-do lists)</strong><br>
							A list of errands and other tasks – often written on a piece of paper as a memory aid – that one needs or intends to accomplish.<br><br>
							<i>Mowing the lawn and chopping the weeds topped his <strong>to-do list of chores.</strong></i></p>
							<div style="color: white;">
								<a onclick="toggle('#todo_create','#card_parent', '#divider')" class="site-btn" style="background-color:#17A2B8;margin-right: 10px;">Create</a>
								<a onclick="toggle('#card_parent','#todo_create', '#divider')" class="site-btn" style="background-color:#FFC107">View</a>
							</div>
						</div>
					</div>
					<div class="col-lg-6">

						<img src="img/todo/todo.png" style="background-size: fill;">

					</div>
				</div>
				<hr style="border-color: white;" id="divider">
				<div class="row justify-content-md-center">
					<div id="show_hide_container">
						<button class="btn pull-right cardz" onclick="hs_toggle()" id="show_hide" style="background-color: #343A40;color: white;"><span class="fa fa-arrow-circle-down"></span></button>
					</div>
				</div>
				<br>

				<!--- Parent Card --->
				<div class="row" id="card_parent" style="display: none;">

				</div>
				<!--- End ParentCard --->

				<!--- To-Do Create New --->
				<div id="todo_create" style="display: none;">
					<ul class="sub-list" id="card_border">
						<form class="contact-form" method="post" action="./todo_processor.php">

							<!--- Title --->
							<li><h5 style="color: white;"><div class="fa fa-book" style="margin-right: 15px;margin-bottom: 15px;"></div>Title</h5>
								<div class="form-group">
									<input type="text" class="form-control form-control-user" name="todo_title" id="todo_title" placeholder="Title" required>
								</div></li>

								<!--- Description --->
								<li><h5 style="color: white;"><div class="fa fa-info-circle" style="margin-right: 15px;margin-bottom: 15px;"></div>Description</h5>
									<div class="form-group">
										<input type="text" class="form-control form-control-user" name="todo_desc" id="todo_desc" placeholder="Description">
									</div></li>

									<!--- To-Do --->
									<li><h5 style="color: white;"><div class="fa fa-bookmark" style="margin-right: 15px;margin-bottom: 15px;"></div>To-Do</h5>
										<div class="form-group">
											<textarea class="form-control form-control-user" style="height: 115px;" name="todo_todo" id="todo_todo" placeholder="To-Do" required></textarea>
										</div></li>
										<input id="todo_color" name="todo_color" value="#1C294A" hidden>
										<div id="reg_form">
											<button type="submit" class="site-btn" style="background-color: #5bc0de;">Add</button>
										</div>

									</form>
									<button class="btn btn-danger pull-right cardz" onclick="todo_color('danger')"><span class="fa fa-tint"></span></button>
									<button class="btn btn-warning pull-right cardz" onclick="todo_color('warning')"><span class="fa fa-tint"></span></button>
									<button class="btn btn-success pull-right cardz" onclick="todo_color('success')"><span class="fa fa-tint"></span></button>
									<button class="btn btn-info pull-right cardz" onclick="todo_color('info')"><span class="fa fa-tint"></span></button>
									<button class="btn btn-primary pull-right cardz" onclick="todo_color('primary')"><span class="fa fa-tint"></span></button>
									<button class="btn btn-dark pull-right cardz" onclick="todo_color('default')" style="background-color: #1c294a;"><span class="fa fa-tint"></span></button>
									<button class="btn btn-dark pull-right cardz" onclick="todo_color('dark')"><span class="fa fa-tint"></span></button>
									<button class="btn btn-secondary pull-right cardz" onclick="todo_color('secondary')"><span class="fa fa-tint"></span></button>

									<div class="pull-right"><p style="margin-top: 5px;color: white;">Choose Color : &emsp;</p></div>
								</ul>
							</div>
							<!--- End To-Do Create New --->
						</div>

					</section>
					<!-- Subscription section end -->


					<!-- Footer section -->
					<footer class="footer-section">
						<div class="container">
							<div class="row">
								<div class="col-xl-6 col-lg-7 order-lg-2">
									<div class="row">
										<div class="col-sm-4">
											<div class="footer-widget">
												<h2>Services</h2>
												<ul>
													<li><a href="./todo.php#">To-Do List</a></li>
													<li><a href="./sendfile.php#">File Transfer</a></li>
													<li><a href="./inbox.php#">Inbox</a></li>
												</ul>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="footer-widget">
												<h2>About us</h2>
												<ul>
													<li><a href="./admins.php#">IPFlare OP's</a></li>
													<li><a href="./contact.php#">Support</a></li>
												</ul>
											</div>
										</div>

									</div>
								</div>
								<div class="col-xl-6 col-lg-5 order-lg-1">
									<a href="#" class="">
										<h4 style="color: #fc0254;">CuperCrypt <span style="color: white;">EX</span></h4>
										<!---<img src="img/logo.png" alt="">--->
									</a>
									<div class="copyright">
										&copy;<script>document.write(new Date().getFullYear());</script> | SuperCryptEX - Secure Server
									</div>

									<div class="social-links">
										<a href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a>
										<a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
										<a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
										<a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
										<a href="https://www.youtube.com/"><i class="fa fa-youtube"></i></a>
									</div>

									<div class="copyright"><strong>Design by <br>[</strong>
										<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
										Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
										<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
										<strong> ]</strong></div>

									</div>
								</div>
							</div>
						</footer>
						<!-- Footer section end -->

						<!--====== Javascripts & Jquery ======-->
						<script src="js/jquery-3.2.1.min.js"></script>
						<script src="js/bootstrap.min.js"></script>
						<script src="js/jquery.slicknav.min.js"></script>
						<script src="js/owl.carousel.min.js"></script>
						<script src="js/mixitup.min.js"></script>
						<script src="js/main.js"></script>

						<!--- Fetch To-Do Data --->
						<script type="text/javascript">
							$(document).ready(function(){

										//AJAX to Get To-Do Data
										$.ajax({
											'url':'./fetch_todo.php',
											'success': function(data){
												
												for (var i in data.objectz) {
													$("#card_parent").append(
														'<div class=" col-lg-3 col-md-4 col-sm-6">'+
														//View Card
														'<div class="card text-white cardz" style="max-width: 18rem;margin: 5px;background-color: '+data.objectz[i].todo_color+';" id="card_view_'+i+'">'+
														'<div id="todo_id_'+i+'" hidden>'+data.objectz[i].todo_id+'</div>'+
														'<div class="card-header">'+
														'<button class="btn btn-danger pull-right cardz" onclick="todo_delete(\'todo_id_'+i+'\')"><span class="fa fa-times"></span></button>'+
														'<button class="btn btn-warning pull-right cardz" onclick="toggle(\'#card_edit_'+i+'\', \'#card_view_'+i+'\', \'#card_edit_'+i+'\')"><span class="fa fa-pencil"></span></button>'+
														'<h5 class="cardz-title">'+data.objectz[i].todo_title+'</h5></div>'+
														'<div class="card-body">'+
														'<h5 class="card-title">'+data.objectz[i].todo_desc+'</h5>'+
														'<p class="card-text" style="white-space: pre-wrap;">'+data.objectz[i].todo_todo+'</p>'+
														'</div></div>'+
														//Edit Card
														'<div class="card text-white bg-info cardz" style="max-width: 18rem;margin: 5px;display: none;" id="card_edit_'+i+'">'+
														'<form class="contact-from">'+
														'<div class="card-header">'+
														'<input type="text" placeholder="Title" id="e_title_'+i+'" name="e_title_'+i+'" value=\''+data.objectz[i].todo_title+'\'>'+
														'</div>'+
														'<div class="card-body">'+
														'<div class="row">'+
														'<div class="col-md-12">'+
														'<input type="text" placeholder="Info" id="e_desc_'+i+'" name="e_desc_'+i+'" value=\''+data.objectz[i].todo_desc+'\'>'+
														'<textarea placeholder="To-Do" style="margin-bottom: 5px;" id="e_todo_'+i+'" name="e_todo_'+i+'">'+data.objectz[i].todo_todo+'</textarea>'+
														'<button class="btn btn-success pull-right cardz" onclick="todo_edit(\'todo_id_'+i+'\',\'e_title_'+i+'\',\'e_desc_'+i+'\',\'e_todo_'+i+'\')"><span class="fa fa-check"></span></button>'+
														'<button class="btn btn-danger pull-right cardz" onclick="toggle(\'#card_view_'+i+'\', \'#card_edit_'+i+'\')"><span class="fa fa-times"></span></button>'+
														'</div></div></div></form></div></div>'
														);
												}
											}
										});
									});
								</script>
								<!--- End Fetch To-Do Data --->

								<!--- Toggle --->
								<script type="text/javascript">
									var card_color="#1c294a";
									var show_state=false;

									function hs_toggle(){
										$("#todo_create").hide();
										if(show_state==false){
											show_state=true;
											$("#card_parent").show();
											$("#show_hide").remove();
											$("#show_hide_container").append('<button class="btn pull-right cardz" onclick="hs_toggle()" id="show_hide" style="background-color: #343A40;color: white;"><span class="fa fa-arrow-circle-up"></span></button>');
											window.location.href = "#show_hide_container";
										}
										else{
											show_state=false;
											$("#card_parent").hide();
											$("#show_hide").remove();
											$("#show_hide_container").append('<button class="btn pull-right cardz" onclick="hs_toggle()" id="show_hide" style="background-color: #343A40;color: white;"><span class="fa fa-arrow-circle-down"></span></button>');
											window.location.href = "#main";
										}
									};
									function toggle(show, hide, hrefz='#'){
										if (show_state==false) {
											hs_toggle();
										}
										$(show).show();
										$(hide).hide();
										if (hrefz!='#') {
											window.location.href = hrefz;
										}
									}
									function todo_edit(x, title, desc, todo){
										var todo_id=document.getElementById(x).innerHTML;
										var e_title=document.getElementById(title).value;
										var e_desc=document.getElementById(desc).value;
										var e_todo=document.getElementById(todo).value;

										var conf = confirm("[Edit Data] Are You Sure?");
										if (conf == true) {
											$.ajax({
												'url':'./todo_edit.php',
												'method':'POST',
												'data' : {
													'todo_id':todo_id,
													'e_title':e_title,
													'e_desc':e_desc,
													'e_todo':e_todo
												},
												'success':function(data){
													//alert("Data Updated!");
													document.location.reload(true);
												}
											});
										}
									};
									function todo_delete(x){
										var todo_id=document.getElementById(x).innerHTML;
										var conf = confirm("[Delete Data] Are You Sure?");
										if (conf == true) {
											$.ajax({
												'url':'./todo_delete.php',
												'method':'POST',
												'data' : {'todo_id':todo_id},
												'success':function(data){
													//alert("Data Deleted!");
													document.location.reload(true);
												}
											});
										}
									};
									function todo_color(x){
										if (x=="danger") { card_color="#DC3545"; }
										if (x=="warning") { card_color="#FFC107"; }
										if (x=="success") { card_color="#28A745"; }
										if (x=="info") { card_color="#17A2B8"; }
										if (x=="primary") { card_color="#007BFF"; }
										if (x=="secondary") { card_color="#868E96"; }
										if (x=="dark") { card_color="#343A40"; }
										if (x=="default") { card_color="#1C294A"; }
										document.getElementById("card_border").style.backgroundColor = card_color;
										document.getElementById("todo_color").value = card_color;
									}
								</script>
								<!--- End Toggle --->

							</body>
							</html>
							<?php
						}
						else {
							header("Location: ./login.php");
						}
						?>