<?php $__env->startSection('content'); ?>
<div id="cover" class="jumbotron" style="background-image: url('/uploads/galleries/<?php echo $neighborhood->neighborhood_id; ?>/cover.jpg')">
	<div class="heading">
		<div class="container">
			<h1><?php echo $neighborhood->tagline; ?></h1>
		</div>
	</div>
	<div class="description">
	
	</div>
</div>

<div class="neighborhoods">
	<div id="neighborhood-nav" style="display:none">
		<ul class="nav">			
			<li><a href="#demographics">DEMOGRAPHICS</a></li>
			<li><a href="#vibes">VIBES</a></li>
			<li><a href="#photo-gallery">GALLERY</a></li>
			<li><a href="#events">EVENTS</a></li>
			<li><a href="#listings">LISTINGS</a></li>
		</ul>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-2">
				<h2><?php echo $neighborhood->name; ?></h2>
			</div>
			<div class="col-xs-10">
				<p><?php echo $neighborhood->description; ?></p>
				
				<div class="buttons">
					<a href="<?php echo URL::to('events', array($neighborhood->alias)); ?>" class="btn btn-green"><?php echo $neighborhood->name; ?> Events</a>
					<a href="<?php echo URL::to('apartments', array($neighborhood->alias)); ?>" class="btn btn-blue"><?php echo $neighborhood->name; ?> Apartments</a>
					<a href="<?php echo URL::to('questions', array($neighborhood->alias)); ?>" class="btn btn-red"><?php echo $neighborhood->name; ?> Q&amp;A</a>
				</div>
			</div>
			
		</div>
	</div>	
	<div class="demographics" id="demographics">
		<div class="container">
			<h3>Demographics</h3>
			
			<div class="statistics row">
				<div class="rates col-xs-6">
					<div class="rate">
						<h4 class="pull-left">Rental Rates</h4>
						<div class="scale">
							<div class="progress progress-striped">
			  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="<?php echo $rent_percent; ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $rent_percent; ?>%">
			    					<span class="sr-only"><?php echo $rent_percent; ?>% Complete (success)</span>
			  					</div>
							</div>
							<div class="scale-left pull-left"><div class="horline"></div> $<?php echo number_format($rent_min_price); ?></div>
							<div class="scale-current" style="left: <?php echo $rent_percent; ?>%"><div class="horline"></div> <div class="text">$<?php echo number_format($neighborhood->rental); ?></div></div>
							<div class="scale-right pull-right"><div class="horline"></div> $<?php echo number_format($rent_max_price); ?></div>
						</div>
					</div>
				</div>
				<div class="rates col-xs-6">
					<div class="rate">
						<h4 class="pull-left">Event Tickets</h4>
						<div class="scale">
							<div class="progress progress-striped">
			  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="<?php echo $ticket_percent; ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $ticket_percent; ?>%">
			    					<span class="sr-only"><?php echo $ticket_percent; ?>% Complete (success)</span>
			  					</div>
							</div>
							<div class="scale-left pull-left"><div class="horline"></div> $<?php echo number_format($ticket_min_price); ?></div>
							<div class="scale-current" style="left: <?php echo $ticket_percent; ?>%"><div class="horline"></div> <div class="text">$<?php echo number_format($neighborhood->events); ?></div></div>
							<div class="scale-right pull-right"><div class="horline"></div> $<?php echo number_format($ticket_max_price); ?></div>
						</div>
					</div>
				</div>
				
				<div class="item col-xs-6">
					<h4>Demographics</h4>
					<p class="clearfix">Total Population <b><?php echo number_format($neighborhood->population_total); ?></b></p>
					<p class="clearfix">Male Population <b><?php echo number_format($neighborhood->population_male); ?></b></p>
					<p class="clearfix">Female Population <b><?php echo number_format($neighborhood->population_female); ?></b></p>
					<p class="clearfix">Median Age (years old) <b><?php echo number_format($neighborhood->age_median); ?></b></p>
					<p class="clearfix">Average Income <b>$<?php echo number_format($neighborhood->income_average); ?></b></p>
					<p class="clearfix">Median Income <b>$<?php echo number_format($neighborhood->income_median); ?></b></p>				
				</div>
				<div class="item col-xs-6">
					<h4>Household Income</h4>		
					<div id="incomes" class="chart"><span class="loading">loading...</span></div>					
				</div>
				<div class="item col-xs-6 charts">
					<h4>Marital Status</h4>					
					<div id="marital-status" class="chart"><span class="loading">loading...</span></div>
				</div>
				<div class="item col-xs-6">
					<h4>Education</h4>	
					<div id="education" class="chart"><span class="loading">loading...</span></div>				
				</div>	
				<div class="clearfix"></div>
				<div class="rates full col-xs-12">
					<div class="rate">
						<h4 class="pull-left">Crime Rate</h4>
						<div class="scale">
							<div class="progress progress-striped">
			  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="<?php echo $neighborhood->crime; ?>" aria-valuemin="0" aria-valuemax="10" style="width: <?php echo $neighborhood->crime*10; ?>%">
			    					<span class="sr-only"><?php echo $neighborhood->crime; ?> / 10</span>
			  					</div>
							</div>
							<div class="scale-left pull-left"><div class="horline"></div> 0</div>
							<div class="scale-current" style="left: <?php echo $neighborhood->crime*10; ?>%"><div class="horline"></div> <div class="text"><?php echo $neighborhood->crime; ?></div></div>
							<div class="scale-right pull-right"><div class="horline"></div> 10</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
		
	<div class="vibes" id="vibes">
		<div class="container">
			<h3>Vibes</h3>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus varius faucibus. Aenean suscipit faucibus tellus, eu ornare turpis iaculis posuere. Fusce fringilla dapibus risus, sed volutpat ligula auctor quis. Vivamus laoreet molestie enim non tincidunt. Mauris nec cursus odio.</p>
			
			<div class="vibes-content">
			<?php if($vibes): ?>
				<?php foreach($vibes as $vibe): ?>
				<div class="item scale">
					<div class="heading"><?php echo $vibe->name; ?></div>
					<div class="progress">
	  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="<?php echo $vibe->percent; ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $vibe->percent; ?>%">
	    					<span class="sr-only"><?php echo $vibe->percent; ?>% Complete (success)</span>
	  					</div>
					</div>
					<div class="scale-current" style="left: <?php echo $vibe->percent-1; ?>%"><div class="text"><?php echo $vibe->percent; ?>%</div></div>
				</div>
				<?php endforeach; ?>
				<div class="item all"><a href="javascript:;" data-href="<?php echo URL::to('vibes/view', $neighborhood->neighborhood_id); ?>" class="btn btn-blue popup">View all <?php echo $neighborhood->name; ?> Vibes</a></div>
			<?php endif; ?>
			</div>
			
			<a href="javascript:;" data-href="<?php echo URL::to('vibes/vote', $neighborhood->neighborhood_id); ?>" class="btn btn-green btn-lg popup">VOTE NOW</a>
		</div>		
	</div>
		
	<div class="galleries" id="photo-gallery">
		<div class="container">
			<h3>Photo Gallery</h3>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus varius faucibus. Aenean suscipit faucibus tellus, eu ornare turpis iaculis posuere. Fusce fringilla dapibus risus, sed volutpat ligula auctor quis. Vivamus laoreet molestie enim non tincidunt. Mauris nec cursus odio.</p>
		</div>
		
		<div id="ib-main-wrapper" class="ib-main-wrapper">               
			<?php if($gallery): ?>
			 <div class="ib-main">
				<?php foreach($gallery as $row): ?>

				<a href="javascript:;" title="<?php echo $row->title; ?>">
					<img src="<?php echo Image::url($row->file_name, $row->file_path, 'gallery'); ?>" data-largesrc="<?php echo Image::url($row->file_name, $row->file_path); ?>" alt="<?php echo $row->title; ?>" />
					<span><?php echo $row->title; ?></span>
				</a>

				<?php endforeach; ?>
			</div>
			<?php else: ?>
			<strong>There are no gallery yet. Please check back later.</strong>
			<?php endif; ?>
		</div>
	</div>
	<div class="events" id="events">
		<div class="container">
			<h3>UPCOMING EVENTS</h3>			
			<?php if(! $events->isEmpty()): ?>	
			<a href="<?php echo URL::to('events', array($neighborhood->alias)); ?>" class="btn green viewall">View All <?php echo $neighborhood->name; ?> Events &raquo;</a>	
				<?php foreach($events as $event): ?>			
				<div class="item col-xs-4">
					<div class="inner clearfix">
						<div class="image">
							<a href="<?php echo Link::to('event', $event->event_id); ?>"><img src="<?php echo Image::link($event->cover_image); ?>" alt="<?php echo $event->title; ?>" /></a>
						</div>
						<div class="content">					
							<h4><a href="<?php echo Link::to('event', $event->event_id); ?>"><?php echo Str::limit($event->title, 40); ?></a></h4>
							<div class="date"><?php echo date('M j - g:i A', strtotime($event->start_time)); ?></div>
							<div class="desc"><?php echo Str::limit($event->place_name, 32); ?></div>
							<a href="<?php echo Link::to('event', $event->event_id); ?>" class="btn btn-details">Details</a>
						</div>
					</div>
				</div>
				<?php endforeach; ?>	
			<?php else: ?>
				No events on this neighborhood yet.
			<?php endif; ?>
		</div>
	</div>
	
	<div id="listings" class="rentals">
		<div class="container">
			<h3>LISTINGS</h3>
			<?php if(! $rentals->isEmpty()): ?>		
			<a href="<?php echo URL::to('apartments', array($neighborhood->alias)); ?>" class="btn green viewall">View All <?php echo $neighborhood->name; ?> Listings &raquo;</a>
				<?php foreach($rentals as $rental): ?>
				<div class="item col-xs-3">
					<div class="inner clearfix">
						<div class="image">
							<a href="<?php echo Link::to('apartment', $rental->rental_id); ?>">
							<?php if($rental->pictures->count()>0): ?>					
								<img src="<?php echo Image::url($rental->pictures->first()->file, '/listings/'.$rental->rental_id, 'gallery'); ?>" alt="<?php echo $rental->title; ?>" />
							<?php else: ?>
								<img src="<?php echo Image::url('nopic.png', 'galleries', 'gallery'); ?>" alt="<?php echo $rental->title; ?>" />
							<?php endif; ?>
							</a>
						</div>
						<div class="rental-body">					
							<a href="<?php echo Link::to('apartment', $rental->rental_id); ?>">
								<?php echo $rental->address; ?>, <?php echo $rental->address2; ?> <br />
								<?php echo $rental->beds; ?> Bedrooms, <?php echo $rental->baths; ?> Bathrooms
							</a>
							<div class="price">$<?php echo number_format($rental->price); ?> month</div>
						</div>
					</div>
				</div>
				<?php endforeach; ?>		
			<?php else: ?>
				No events on this neighborhood yet.
			<?php endif; ?>
		</div>
	</div>	
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<?php echo HTML::script('/js/neighborhoods.js'); ?>  
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawCharts);
	function drawCharts() {      
        var options = {
          is3D: true, fontSize: '12', fontName: 'Montserrat, ​sans-serif', 'width': '95%', 'height': '300px', backgroundColor: '#f8f8f8', padding: 0,
          chartArea: { left: 30, top: 0, width: "100%", height: "100%"}
        };
        
        var marital_data = google.visualization.arrayToDataTable([
				['Marital Status', 'Percent'],
                ['Never Married', <?php echo $neighborhood->never_married; ?>],
                ['Married', <?php echo $neighborhood->married; ?>],
                ['Separated', <?php echo $neighborhood->separated; ?>],
                ['Widowed', <?php echo $neighborhood->widowed; ?>],
                ['Divorced', <?php echo $neighborhood->divorced; ?>]
		]);
		
        var marital_chart = new google.visualization.PieChart(document.getElementById('marital-status'));
        marital_chart.draw(marital_data, options);

        var edu_data = google.visualization.arrayToDataTable([
				['Education', 'Percent'],
                ['No High School', <?php echo $neighborhood->edu_no_high; ?>],
                ['Some High School', <?php echo $neighborhood->edu_some_high; ?>],
                ['Some College', <?php echo $neighborhood->edu_some_college; ?>],
                ['Associated Degree', <?php echo $neighborhood->edu_assoc; ?>],
                ['Bachelors Degree', <?php echo $neighborhood->edu_bachelor; ?>],
                ['Graduate Degree', <?php echo $neighborhood->edu_graduate; ?>]
		]);
                                                  		
        var edu_chart = new google.visualization.PieChart(document.getElementById('education'));
        edu_chart.draw(edu_data, options);

        var data = google.visualization.arrayToDataTable([
			['Income', 'Average Income', 'Median Income'],
            ['Average and Median Income', <?php echo $neighborhood->income_average; ?>, <?php echo $neighborhood->income_median; ?>]                                                          
        ]);

        var options = {        	
            fontSize: '12', fontName: 'Montserrat, ​sans-serif', 'width': '95%', 'height': '300px', backgroundColor: '#f8f8f8', padding: 0,
            legend: {position: 'top'}, vAxis: {format: '$#,###', minValue: 80000}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('incomes'));
        chart.draw(data, options);                                                        
	}
</script>
<?php echo HTML::script('/js/plugins/jquery.easing.1.3.js'); ?> 
<?php echo HTML::script('/js/plugins/jquery.gallery.js'); ?> 

<script id="previewTmpl" type="text/x-jquery-tmpl">
	<div id="ib-img-preview" class="ib-preview">
		<div class="ib-top" style="display:none"><h3><?php echo $neighborhood->name; ?></h3></div>
    	<img src="${src}" alt="" class="ib-preview-img"/>
        <span class="ib-preview-descr" style="display:none;">${description}</span>
        <div class="ib-nav" style="display:none;">
        	<span class="ib-nav-prev">Previous</span>
            <span class="ib-nav-next">Next</span>
		</div>
        <span class="ib-close" style="display:none;">Close Preview</span>
        <div class="ib-loading-large" style="display:none;">Loading...</div>
	</div>		
</script>
<?php $__env->stopSection(); ?>