<?php
	include('views/_header.tpl.php');
?>

<style>
	body { background:#f9f9f9; }
	.spacer { padding-top:45px; }
	#mmen { display:none; }
    .form-profile { padding:20px; }
    table { background:#fff; }
    p, td { font-weight:200; }
    table td { padding: 10px 5px; height:90px; } 
    
	.admintable td,
	.admintable th {
		padding: 10px;
		border: solid #eee 1px;
		text-align: center;
		font-size:17px;
	}
	
	.btn,
	.btn a,
	.btn a:active,
	.btn a:visited {
		background:#aaa; 
		color:#fff;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		font-size: 14px !important;
		font-weight: 300 !important;
		height: 30px !important;
		line-height: 30px !important;
		min-width: 60px;
		width:auto;
		padding: 5px 20px !important;
	}

	a.btn:hover {
		background:#006ab7;
	}	
	
	input.btn-small { 
		background:#aaa; 
		color:#fff;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		font-size: 12px !important;
		font-weight: 300 !important;
		height: 30px !important;
		min-width: 60px;
		width:auto;
		padding:0 15px;
	 }
	input.btn-small:hover { 
		background:#bbb;
	}
	
	input[type="submit"], .submit { border:0px; }
	input[type="submit"]:hover { background:#006ab7; }
	
	/* label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"]	*/

	.btn-red {
		font-size: 14px; 
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}

	.btn-blue {
		background: #005493;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	
	.delete-admin {
		background: #cd1000;
	}

	.adminred {
		background: #cd1000;
		color: #fff;
	}

	.nonadmin {
		background: #ddd;
		color: #aaa;
	}

	.pagination {
		list-style-type: none;
		padding: 10px 0;
		display: inline-flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.pagination li {
		box-sizing: border-box;
		padding-right: 10px;
	}

	.pagination li a {
		box-sizing: border-box;
		background-color: #e2e6e6;
		padding: 8px;
		text-decoration: none;
		font-size: 12px;
		font-weight: bold;
		color: #616872;
		background: #005493;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;		
	}

	.pagination li a:hover {
		background-color: #d4dada;
	}

	.pagination .next a,
	.pagination .prev a {
		text-transform: uppercase;
		font-size: 12px;
	}

	.pagination .currentpage a {
		background-color: #518acb;
		color: #fff;
	}

	.pagination .currentpage a:hover {
		background-color: #518acb;
	}

	.searching {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		justify-content: start;
		gap: 10px;
		align-items: center;
	}

	.search {
		padding: 10px;
	}

	.submit {
		background-color: #005493;
	}
	.ut-header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}	
	
	.blockit, .blockithalf, .blockitlabel { float:left; display:inline-block; width: 200px; padding-right:10px; }
	.viewall { margin-left:15px; }
	
	a.lilbtn {
		background: #eee; 
		padding:4px 10px;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;		
		min-width:81px !important;
		width:81px !important;
	}
	
/* ######################################################### */
/*                        MOBILE STYLES                      */
/* ######################################################### */

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
        .form-profile {
            padding: 20px 0px;
            width: 85%;
        }        
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 586px) {
	.spacer { padding-top:55px; }
	.form-profile { padding-top:0px; }	
	.tablescroll { height: 500px; overflow-x:scroll; }
	.blockit { width:100%; display:block; background:none;  text-align:center; margin-bottom:10px; }
	.blockithalf { float:left; width:50%; display:inline-block; background:none; text-align:center; margin-bottom:10px; 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }	
	.right { padding-right:0px; }
	.viewall { margin-left:0px; }
}

/* Landscape phones and down */
@media (max-width: 480px) {
	.spacer { padding-top:15px; }
	.form-profile { padding-top:0px; }
	.tablescroll { height: 500px; overflow-x:scroll; }
	.blockit { width:100%; display:block; background:none; text-align:center; margin-bottom:10px; }	
	.blockithalf { float:left; width:50%; display:inline-block; background:none; text-align:center; margin-bottom:10px; 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.right { padding-right:0px; }
	.viewall { margin-left:0px; }
}    

@media (max-width: 320px) {
	.tablescroll { height: 300px; overflow-x:scroll; }
}    
</style>

<!-- ########################## -->
<!--    MANAGE NOTIFICATIONS    -->
<!-- ########################## -->

<div class="form form-profile aif" style='width:auto'>

	<h1 style="text-align:center;">
		<a href="/admin/dash"><i class="fa fa-sliders" aria-hidden="true" style=""></i></a>&nbsp; Notifications
		<a href="/admin/notifications"><img src="/static/client/scroll_hands.png" style="height:30px;" alt="<>" /></a>		
	</h1>

	<!--<div class="tab-pane accordion-content<?= $active_tickets ?>" style="padding:10px;">-->
	<div class="tablescroll" style="background:#fff;">

		<table class="admintable" style="margin:0px; width:98%;">
			<tr>
				<th width="25" style="text-align: left;">&nbsp;ID#</th>
				<th width="75" style="text-align: left;">Notification ID</th>
				<th width="150" style="text-align: left;">Message</th>
				<th width="100">Date Created</th>
				<th width="100">Date Sent</th>
				<th width="100">Status</th>
				<!--<th width="50">Image</th>-->
				<th width="70">Actions</th>
			</tr>
			
			<?php
			foreach ($notifications as $sub) {
				if ($sub['sent'] == "0") {
					$test_style = "#999999";
					$verified_text = "New Notification";
					$status_style = "background:#999999;";
				} else if ($sub['sent'] == "1") {
					$test_style = "#00c000";
					$verified_text = "Notification Sent";
					$status_style = "background:#00c000;";
				} else {
					$test_style = "#dd1000"; // 00b600
					$verified_text = "Error";
					$status_style = "background:#cd1000;";
				}
				$msg_snippet = strip_tags(substr($sub['message'],0,80));
				$pretty_date = date("h:iA m/d/Y",strtotime($sub['date']));
				if ($sub['date_sent'] == "0000-00-00 00:00:00" || is_null($sub['date_sent'])) {
					$pretty_date_sent = "Not sent yet";
					$bg_not_sent = "background:#f0bcc9;";
				} else {
					$pretty_date_sent = date("h:iA m/d/Y",strtotime($sub['date_sent']));
					$bg_not_sent = "";
				}


				// IMG https://ihp.sqdash.co/api/webservices/api/{$sub['main_img']}
				echo "<tr>
				<td style='padding:10px; max-width:50px; overflow:hidden; text-align:left;'>{$sub['id']}</td>
				<td style='padding:10px; max-width:150px; overflow:hidden; text-align:left;'>{$sub['webinar']}</td>
				<td style='padding:10px; max-width:150px; overflow:hidden; text-align:left;'>{$msg_snippet}</td>
				<td style='padding:10px; text-align:center;'>{$pretty_date}</td>
				<td style='padding:10px; text-align:center; {$bg_not_sent}'>{$pretty_date_sent}</td>
						<td style='padding:10px; text-align:center; color:#fff; {$status_style}'>{$verified_text}</td>

						<td style='display:none; padding:10px; text-align:center;'><img src='/static/images/placeholder.jpg' 
						alt='Img'
						style='height:50px; width:auto;' /></td>

						<td style='padding:10px; text-align:center; min-width:100px;'>
							<a href='/admin/?notification&edit={$sub['id']}' class='lilbtn' 
							style='font-size:15px; margin-top:10px; margin-bottom:15px'>edit now</a> 
							<br /><br />
							<a href='/admin/?notification&del={$sub['id']}' class='confirm lilbtn' style='font-size:15px;'><img src='/static/images/icons/delete_icon.png' alt='Delete!' style='height:15px; width:15px; margin-bottom:3px'> delete</a>
						</td>
					</tr>";
			}
			?>

		</table>
		<br />
		<div style="margin:10px;">
			<a href='/admin/?notification&add' class="btn btn-blue">+ Add New Notification &raquo;</a>
		</div>
		<br />
	</div><!--end: .tab-pane (Support Tickets) -->
	<br /><br /><br /><br /><br /><br />
	
</div><!-- SUPPORT TICKETS TAB ENDS HERE --> 

<style>
	.admintable td,
	.admintable th {
		padding: 3px;
		border: solid #eee 1px;
	}
</style>

<?php
	include 'views/_footer.tpl.php';
?>