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

<style>
	div.spacer {
		padding-top: 55px;
	}

	#mmen {
		display: none;
	}

	.btn,
	.btn a,
	.btn a:active,
	.btn a:visited {
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		margin: 10px;
		font-size: 14px !important;
		font-weight: 300 !important;
		height: 20px !important;
		line-height: 20px !important;
		width: 110px;
		padding: 10px 15px !important;
	}

	.btn-red {
		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;
		display:inline-block;
	}

	.delete-admin {
		background: #cd1000;
	}

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

	.nonadmin {
		background: #ddd;
		color: #aaa;
	}
</style>

<style>
	.dash_digits {
		font-size: 48px;
		color: #00b100;
		font-weight: 800;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}

	.dash_total {
		display: inline-block;
	}

	.dash_totaldiv {
		display: inline-block;
		height: 77px;
		margin: 0 20px;
		border-left: 1.5px solid;
		border-top: 0;
		border-bottom: 0;
		border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 48%, rgba(255, 255, 255, 0) 100%);
		border-image-slice: 1;
	}

	.state_sub {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap:250px;
		justify-content: center;
		margin-top: 50px;
	}

	@media only screen and (min-width:878px) {
		.state_sub {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap:initial;
			justify-content: center;
		}
	}
	.divline { width:1px; display:inline-block; background:#ccc; margin:0 10px; }
	
/* ################################### */
/*                        MOBILE STYLES                      */
/* ################################### */

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	.divline { display:none; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.divline { display:none; }
}

/* Landscape phones and down */
@media (max-width: 586px) {
	.divline { display:none; }
}

/* Landscape phones and down */
@media (max-width: 480px) {
	.divline { display:none; }
}    

@media (max-width: 320px) {
	.divline { display:none; }
}    	
</style>

<div class="form form-profile aif" style='padding:5px 20px 10px;'>
	<br />
	<h2 style="font-size:33px; font-weight:300; color:#000; text-align:center; margin:15px auto;">
		&#923;dmin Dash
		<div style="display:inline-block; height:30px; width:30px; margin-left:-30px; position:relative; padding-left:20px;">
			<a href="/admin/dash" title="Refresh"><i class="fa fa-refresh" style="font-size:17px; 
			position:relative; height:30px; width:30px; margin-bottom:10px !important;"></i></a>
		</div>
	</h2>
	
<!--	<div style="font-size:17px; line-height:27px; font-weight:300; padding:0 20px; text-align:center; 
		max-width:1200px; margin:0 auto; width:90%;">
	
	</div>
	<div class="clear"></div>-->
	<!--<br />-->
	
	<div style="text-align: center;">
	
		<a href="/admin/subscribers" class="btn btn-blue" title="Click to Edit" 
		style="font-weight:600;">Subscribers</a>
		
		<a href="/admin/faqs" class="btn btn-blue" title="Click to Edit" 
		style="font-weight:600;">FAQs</a>
		
		<a href="/admin/portfolio" class="btn btn-blue" title="Click to Edit"
		style="font-weight:600;">Portfolio</a>
		
		<br />
		
		<br />
		<a class="btn btn-blue" href="/auth/logout" title="Logout" class="logout" 
		style="background:#cd1000;">
			<i class="fa fa-power-off"></i> LOGOUT</a>
		<br /><br />
		
		<div style="font-size:17px; line-height:23px; font-weight:300;">
			<a href="/admin/">Tabbed Admin &raquo;</a>
		</div>
		
	</div>
	<div class="clear"></div>

	<center>

		<br /><br />
		<hr style="border-top:1px solid #ddd; max-width:500px; margin:0 auto; width:70%;" />
		<br />

		<h1 style="font-size:33px; font-weight:800; color:#ccc; line-height:40px; margin-bottom:0px;">
			LOAD SUMMARY
		</h1>
		<div style="font-size:15px; font-weight:600; letter-spacing: 2px; color:#ccc">SNAPSHOT TODAY</div>

		<div style="width:200px; display:inline-block; background:none;">
			<div class="animatednumber" style="font-size:80px; font-weight:800; text-align:center; 
			line-height:105px; border-bottom:1px solid #ccc; padding:5px 25px 0; background:none; 
			color:#0096ff">
				115<!--<?= $total_positive ?>-->
			</div>
			<div class="clear"></div>
			<div style="font-size:17px; font-weight:300; text-align:center; padding:5px; 
			text-transform: uppercase;">
				Loads Fulfilled
			</div>
		</div>

		<div class="divline" style="">
			<div style="font-size:80px; font-weight:800; text-align:center; line-height:105px;
			padding:5px 25px 0; background:none; color:#dd1000">
				&nbsp;
			</div>
			<div class="clear"></div>
			<div style="font-size:17px; font-weight:300; text-align:center; padding:5px; 
			text-transform: uppercase;">
				&nbsp;
			</div>
		</div>

		<div style="width:200px; display:inline-block; background:none;">
			<div class="animatednumber2" style="font-size:80px; font-weight:800; text-align:center; 
			line-height:105px;
			border-bottom:1px solid #ccc; padding:5px 25px 0; background:none; color:#dd1000">
				4<!--<?= $total_negative ?>-->
			</div>
			<div class="clear"></div>
			<div style="font-size:17px; font-weight:300; text-align:center; padding:5px; 
			text-transform: uppercase;">
				Loads Pending
			</div>
		</div>
		
		<div class="divline" style="">
			<div style="font-size:80px; font-weight:800; text-align:center; line-height:105px;
			padding:5px 25px 0; background:none; color:#dd1000">
				&nbsp;
			</div>
			<div class="clear"></div>
			<div style="font-size:17px; font-weight:300; text-align:center; padding:5px; 
			text-transform: uppercase;">
				&nbsp;
			</div>
		</div>
		
		<div style="min-width:300px; width:auto; display:inline-block; background:none;">
			<div style="float:left; width:auto; font-size:100px; font-weight:800; text-align:left; 
			line-height:105px; 
			border-bottom:1px solid #ccc; padding:5px 5px 0; background:none; color:#00b800">
				$
			</div>
			<div class="animatednumber3" style="float:left; font-size:80px; font-weight:800; 
			text-align:left; line-height:105px;
			border-bottom:1px solid #ccc; padding:5px 5px 0; background:none; color:#00b800">
				1297.23
			</div>
			<div class="clear"></div>
			<div style="font-size:17px; font-weight:300; text-align:center; padding:5px; 
			text-transform: uppercase;">
				Today&rsquo;s Earnings
			</div>
		</div>		
				
		<div class="clear"></div>

		<br /><br />
		
	</center>


	<br /><br /><br /><br /><br /><br /><br /><br /><br />

	<!-- #################################### -->
	<!-- #################################### -->

</div>

<script type="text/javascript" defer>
	setTimeout(function() {
		//do something special

	}, 5000);
	// END TIMEOUT

	$(document).ready(function() {
		// alert('hi alert');
	});
</script>

<script type="text/javascript" defer>
	// COUNTER FUNCTION  #1
	$({
		Counter: 0
	}).animate({
		Counter: $('.animatednumber').text().replace(/,/g, ''),
	}, {
		duration: 4000,
		easing: 'swing',
		step: function(now) {
			$('.animatednumber').text(commaSeparateNumber(Math.round(now * 1) / 1));
		}
	});

	// COUNTER FUNCTION  #2
	$({
		Counter: 0
	}).animate({
		Counter: $('.animatednumber2').text().replace(/,/g, ''),
	}, {
		duration: 4000,
		easing: 'swing',
		step: function(now) {
			$('.animatednumber2').text(commaSeparateNumber(Math.round(now * 1) / 1));
		}
	});
	
	// COUNTER FUNCTION  #3
	$({
		Counter: 0
	}).animate({
		Counter: $('.animatednumber3').text().replace(/,/g, ''),
	}, {
		duration: 4000,
		easing: 'swing',
		step: function(now) {
			$('.animatednumber3').text(commaSeparateNumber(Math.round(now * 1) / 1));
		}
	});	

	// COMMA SEPARATED FUNCTION
	function commaSeparateNumber(val) {
		while (/(\d+)(\d{3})/.test(val.toString())) {
			val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
		}
		return val;
	}
</script>

<style>
	.admintable td,
	.admintable th {
		padding: 3px;
		border: solid #eee 1px;
	}
</style>
<?php
include 'views/_footer_m.tpl.php';
?>