<?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: 5px;
	}

	.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;
		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;
	}

	/* ######################################################### */
	/*                        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>

<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; Portolio
		<a href="/admin/portfolio"><img src="/static/system/icons/scroll_hands.png" 
		style="height:30px;" alt="<>" /></a>
	</h1>     

    <form action="portfolio" method="post">
        <div class="row-item clearfix" style="text-align:left; padding-bottom:10px;">
            <label class="lbl" for="txt_name1"
			style="text-align:left; padding-bottom:7px; width:100%; display:block;">Upload Images</label>
			<div class="val" style="margin-left:0px;">
                <div>
                    <div class="fileUpload" rel="/portfolio/upload">
                        <span>Upload</span>
                        <input type="file" class="upload" data-type="image" />
                    </div>
                    <span class="maxsize">(max size: 10MB*)</span>
                    <div style="clear:both"></div>
                </div>
                <p class="rs description-input"></p>
            </div>
        </div>

        <p class="wrap-btn-submit rs ta-l" style="padding-top:0px;">
			<button class="btn btn-blue btn-submit-all">Save Pictures</button>
		</p>

        <h3>Preview of your Portfolio Gallery</h3>
        <?php
        foreach ($portfolio_entries as $entry) {
            echo "<div style='width:160px; height:130px; margin:0 22px 10px 0; text-align:center; display:inline-block; float:left;'><a href='/{$entry['image']}' class='loginpop' rel='group'><img src='/{$entry['image']}' style='margin:5px 0; margin-right:8px; width:160px' /></a><a href='?portfolioDeleteFile={$entry['upload_id']}'>delete</a></div>";
        }
        ?>
		<div class="clear"></div>
    </form>
	
	<style type="text/css">
	.fancybox-overlay {
		/*z-index: 8010;*/
		z-index: 999999999999999;
	}
	.fancybox-wrap, .fancybox-opened { overflow-y: hidden !important; }
	.fancybox-close {
		position: absolute;
		top: -18px;
		right: 0px;
		width: 36px;
		height: 36px;
		cursor: pointer;
		z-index: 8040;
	}
	 .fancybox-next span {
	  left: auto;
	  right: 20px;
	 }
	 .fancybox-prev span {
	  left: 20px;
	 }
	</style>
	
	<br /><br /><br />
</div>

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