<?php

include('views/_header_landing.tpl.php');

if (isset($_GET['reg_ok'])) {
	$msg = 'Registration Successful';
}

if (isset($msg)) {
	echo "<b>$msg</b><br /><br />";
}

?>

<style type="text/css">
	button {
		height: 32px;
	margin-top: -3px;
	}
	#footer {
		border-top: 0px solid #d4d4d4;
		background: #FFF;
		padding: 0px 0 0 0;
	}
	.main-footer, #mmen, div.bottomtray {
		display: none !important;
	}
	
	.copyright {
		padding-bottom: 5px !important; 
	}
	
	.btn {
		padding: 15px 16px;
		min-width:75px;
	}

	/* ##### IMAGE PORTFOLIO STUFF ##### */

	.half {
		float: left;
	width: 50%;
	overflow: hidden;
	max-width: 50%;
	}
	.rsDefaultInv .rsBullets {
		bottom: 35px !important;
	z-index: 999 !important;
	}
	.thumbcon {
		padding-bottom: 15px;
	}
	.thumb-wrapper {
		margin-top: 25px;
		width: 100%;
		height: auto;
		margin: auto;
	}
	.thumb-wrapper .thumb {
		float: left;
		margin-left: 1px;
		margin-bottom: 1px;
	}
	.thumb-wrapper .thumb img {
		width: 112px;
		height: 93px;
	}
	.fancybox-lock .fancybox-overlay {
	}
	.fancybox-overlay-fixed {
		z-index: 9999;
	}
	.fancybox-skin {
		padding: 0px !important;
	top: 3px !important;
	}

	/* ####################################### */
	/* ########## MOBILE STYLING ########## */
	/* ####################################### */

	@media screen and (max-device-width:  1024px), screen and (max-width:  1024px) {
		#profile-gallery-wrapper {
			position: relative;
			height: auto;
			min-height: 327px;
			max-height: 327px;
			max-width: 50%;
			float: left;
			padding: 0px !important;
		}
	}

	@media screen and (max-device-width:  979px), screen and (max-width:  979px) {

	}

	/******************************************************************************/
	@media screen and (max-device-width:  767px), screen and (max-width:  767px) {
		#profile-gallery-wrapper {
			position: relative;
			height: auto;
			min-height: 240px;
			max-height: 240px;
			max-width: 50%;
			float: left;
			padding: 0px !important;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.half {
			max-width: 100%;
	width: 100%;
		}
		#profile-gallery-wrapper {
			width: 100%;
	display: block;
	min-height: 240px;
	max-height: 240px;
			max-width: 100%;
	border: 0px;
	margin: 0 0 10px 0;
		}
		.thumb-wrapper .thumb img {
			width: 119px;
			height: 90px; /* was 88x70 */
		}
		ul.instagram-gallery img {
			width: 49.7%;
	height: auto;
	margin-right: 1px;
	margin-bottom: 1px;
		}
		ul.profile-gallery img {
			width: 49.7%;
	height: auto;
	margin-right: 1px;
	margin-bottom: 1px;
		}
		.fancybox-overlay-fixed {
			z-index: 999 !important;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 320px) {
		.thumb-wrapper .thumb img {
			width: 100px;
			height: 80px;
		}
	}

</style>

<!-- FULL WIDTH CONTAINER -->
<div class="home-feature-category" style="background:#fff; padding:0px; border:none; margin-bottom:0px;">

	<!-- PAGE CONTAINER WITH MARGINS -->
	<div class="container_12 clearfix" style="background:#fff;">
		<div class="grid_12 marked-category" style="padding-top:50px; text-align:center;">
			<div style="position:absolute !important; top:20; right:20 !important; float:right;">
				 <a title="Close" href="javascript:history.go(-1)"><img src="/static/images/icons/close_x_black.png" alt="X"
					style="height:30px; width:30px; margin:10px;" /></a>
			</div>
			<br /><br />
			<?php
			if ($user['image']) {
				echo "<div style='width:194px; height:194px; padding:2px; border:1px solid #ccc; overflow:hidden;
				margin:0 auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow:hidden;
				'>
				<div style='background:#ccc; height:194px; width:194px; background-size:cover; overflow:hidden;
					-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; 
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;'>
					<img style='display:nonex; height:194px; width:auto !important; max-width:560px;' src='{$user['image']}' />
					</div>
				</div>";
			}

			// create average rating stars list
			$avg_rating_stars = "<ul class='average-rating-stars' style='display:none'>";
			for ($i = 0, $m = 0; $m < 5; ++$i, $m++) {
				$on_or_off = $i < (int) $user['proposals_avg_rating_received'] ? "on" : "off";
				$avg_rating_stars .= "<li class='" . $on_or_off . "'>&nbsp;</li>";
			}
			$avg_rating_stars .= "</ul><div class='clear'></div>";
			?>
			
			<br /><br />

			<span style="font-size:36px; font-family:'Open Sans',Montserrat-Light,sans-serif; font-weight:300;">
				<?= $user['name'] ?>
				<a href="javascript:top.frames.location.reload();" style="color:#ddd;"><img 
				src="/static/system/refresh_arrows.png" alt="R" style="height:15px; margin-bottom:3px" /></a>
			</span>
			<br /><br />
			<i class="fa fa-check-square-o"></i> <span style="color:#00C416;"><b>Verified:</b></span> <?= $user['is_activated'] ? "Yes" : "No" ?><br />
			<i class="fa fa-map-marker"></i> <?= $user['location'] ?><br />
			<i class="fa fa-link"></i> <?= $user['website'] ?><br />
			<i class="fa fa-user"></i> <b>Bio:</b> <?= nl2br(strip_tags($user['biography'])) ?><br />

			<?php
			if (!empty($user['linkedin_account']))
				: ?>
			<i class="fa fa-linkedin-square"></i> <b>LinkedIn:</b>
			<a target="_blank" href="<?= $user['linkedin_account'] ?>">View LinkedIn Profile</a><br />
			<?php endif; ?><br />

			<!-- START OF ACTION BUTTONS -->
			<div class="actions" style="">
				<?php
				// Only show Hire Candidate button if the logged in user
				// has created projects already.
				if ($website_options['enable_proposals'] && !empty($current_user_projects))
					: ?>

				<button class="btn btn-blue btn-buck-project hire-user load-popin"
				href="/project/selectCandidate?uid=<?= $user['id'] ?>"><span class="lbl">Hire Now &raquo;</span></button>

				<?php
				else
					:
				// The current logged in user has no open projects.
				?>

				<!--<br />-->

				<?php
				endif; ?>

				
				<a href="#" class="btn btn-blue payNow" style="width:125px;">
					<i class="fa fa-dollar"></i> Pay</a>
				
				<a href="#" class="btn btn-blue requestNow" style="width:125px;">
					<i class="fa fa-send"></i> Request</a>	
					
				<br /><br />	
				
				<!-- ############################################################################ -->
				<!-- #######################   PAY FUNCTIONS START HERE   ####################### -->
				<!-- ############################################################################ -->
				
				<div id="payNow" style="display:none; padding:10px; background:none; border:3px solid #f0f0f0; max-width:300px; margin:0 auto;
					-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-bottom:25px; font-size:17px">
					<form id="pay_form">
						<span style="font-size:15px;">Pay <?= $user['name'] ?></span><br />
						<input type="hidden" name="to" value="<?= $user['id'] ?>" />
						
						<input name="message" id="msgText" placeholder="-"
						style="-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align:center; font-size:22px;
						border:3px solid #00b500; width:100px; height:50px; margin-top:10px; margin-bottom:5px;" />
						
						<br /><br />
						<input type="submit" class="btn btn-blue" value="Pay Now" style="font-size:15px; padding:5px 25px;" />
					</form>
					<br />
				</div>

				<script>
				$('.payNow').click(function () {
					$('#payNow').slideToggle(1000);
					//$('.actions').slideUp(700, function () {
					//$('#sendMsg').slideDown();
					//$('#sendMsg').slideToggle();
					//});

					$('#pay_form').submit(function () {
						$.ajax({
							url: '/messages/send',
							type: 'post',
							data: $(this).serialize(),
							success: function (d) {
								if (d == 'ok') {
									$('#payNow').html("E-Stars Sent!");
								}
							}
						});
						return false;
					});
					//sendmsg.preventDefault();
					return false;
				});
				</script>
				
				<!-- ############################################################################ -->
				<!-- #######################    PAY FUNCTIONS END HERE    ####################### -->
				<!-- ############################################################################ -->					
				

				<div id="requestNow" style="display:none; padding:10px; background:none; border:3px solid #f0f0f0; max-width:300px; margin:0 auto;
					-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-bottom:25px; font-size:17px">
					<form id="request_form">
						<span style="font-size:15px;">Request from <?= $user['name'] ?></span><br />
						<input type="hidden" name="to" value="<?= $user['id'] ?>" />
						
						<input name="message" id="msgText" placeholder="-"
						style="-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align:center; font-size:22px;
						border:3px solid #00b500; width:100px; height:50px; margin-top:10px; margin-bottom:5px;" />
						
						<br /><br />
						<input type="submit" class="btn btn-blue" value="Request Now" style="font-size:15px; padding:5px 25px;" />
					</form>
					<br />
				</div>

				<script>
				$('.requestNow').click(function () {
					$('#requestNow').slideToggle(1000);
					//$('.actions').slideUp(700, function () {
					//$('#sendMsg').slideDown();
					//$('#sendMsg').slideToggle();
					//});

					$('#request_form').submit(function () {
						$.ajax({
							url: '/messages/send',
							type: 'post',
							data: $(this).serialize(),
							success: function (d) {
								if (d == 'ok') {
									$('#requestNow').html("Request Sent!");
								}
							}
						});
						return false;
					});
					//sendmsg.preventDefault();
					return false;
				});
				</script>
				
				<!-- ############################################################################ -->
				<!-- #######################    PAY FUNCTIONS END HERE    ####################### -->
				<!-- ############################################################################ -->					
				
				
				<a href="#" class="btn btn-blue sendmsg">
					<i class="fa fa-envelope"></i> Message</a>

				<?php
				if ($isFollowed) {
				?>
				<a href="?unfollow" class="btn btn-blue">Unfollow</a>
				<?php
				} else {
				?>
				<a href="?follow" class="btn btn-blue">Follow</a>
				<!--&nbsp;&nbsp;Get updates <?= $user['name'] ?>&rsquo;s activity-->
				<?php
				}
				?>

				<?php if ($_SESSION['user']['is_admin'] == 2) : ?>
				
					<br><br>
					<form method="POST" action="/auth/loginas">
						<input type="hidden" name="log_as" value="<?= $user['id'] ?>">
						<button class="btn btn-red">Login as this user</button>
					</form>

				<?php endif ?>
			</div>

			<div id="sendMsg" style="display:none; padding-top:10px;">
				<form id="pm_form">
					Send a private message to <?= $user['name'] ?>:<br />
					<input type="hidden" name="to" value="<?= $user['id'] ?>" />
					<textarea name="message" id="msgText"
					style="border-radius:0; border:1px solid #ddd; width:98%; height:90px; margin-bottom:5px;"></textarea>
					<br />
					<input type="submit" class="btn btn-blue" value="Send" />
				</form>
			</div>

			<script>
				$('.sendmsg').click(function () {
					$('#sendMsg').slideToggle(1000);
					//$('.actions').slideUp(700, function () {
					//$('#sendMsg').slideDown();
					//$('#sendMsg').slideToggle();
					//});

					$('#pm_form').submit(function () {
						$.ajax({
							url: '/messages/send',
							type: 'post',
							data: $(this).serialize(),
							success: function (d) {
								if (d == 'ok') {
									$('#sendMsg').html("Message Sent");
								}
							}
						});
						return false;
					});
					//sendmsg.preventDefault();
					return false;
				});
			</script>
			<br />
			<!-- END OF ACTION BUTTONS -->

			<?php
			if ($user['account_type'] == 'Model') : ?>
			Member Type 1 (ie. User)
			<?php endif; ?>

			<b>Ave Rating:</b> <?= $user['proposals_avg_rating_received'] ?> 5.0 / 5.0<br />
			<span style="float:left;"><?= $avg_rating_stars ?></span>
			
			
			<a class="load-popin" href="/project/summary?uid=<?= $user['id'] ?>">View More on Paying/Requesting</a><br />

			<?php if ($user['account_type'] == 'Company') : ?>
			<?php else : ?>
			<?php endif; ?>

			<i class="fa fa-map-marker"></i> <?= $user['location'] ?><br />
			
			<br />
			<center><a href="/shop">&laquo; Back to Shop</a> | <a href="/messages">My Inbox &raquo;</a></center>
			

			<?php if (!empty($user['category_name'])) : ?>
				<b>Category:</b> <?= $user['category_name'] ?><br />
			<?php endif; ?>

			<!--<b>Name:</b> <?= $user['contact_name'] ?><br />
			<b>E-Mail:</b> <?= $user['contact_email'] ?><br />-->

			<div class="clear"></div>
		</div><!-- END OF 12 COLUMNS GRID  -->

		<!-- END OF 12 COLUMNS GRID -->
	</div><!-- END OF 12 COLUMN CONTAINER -->

</div><!-- FULL WIDTH CONTAINER -->

<script type="text/javascript">

	$(".load-popin").each(function() {
		var href = $(this).attr("href");
		$(this).fancybox({
			'hideOnContentClick': true,
			'width': 1000,
			'height': 550,
			'autoDimensions': false,
			'autoSize': true,
			'transitionIn': 'elastic',
			'transitionOut': 'elastic',
			'speedIn': 500,
			'speedOut': 300,
			'centerOnScroll': true,
			'type': 'ajax',
			'href': href
		});
	});
</script>

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