{extends $layout}

{block content}

<article id="post-{$post->id}" class="{$post->htmlClasses} clear">

	<header class="entry-header clear">

		<div class="category-breadcrumb clearfix">
			<span class="here">{__ 'You are here'}</span>
			<span class="home"><a href="{!$homeUrl}">{__ 'Home'}</a></span>
			{foreach $ancestors as $anc}
				{first}<span class="ancestors">{/first}
				<a href="{!$anc->link}">{!$anc->name}</a>
				{last}</span>{/last}
			{/foreach}
			{ifset $term}<span class="name"><a href="{!$term->link}">{!$term->name}</a></span>{/ifset}
			<span class="title">{$post->title}</span>
		</div>

		<div id="item-title-info">
			<div class="title-right">
				
				{var $lp = getTourPrice($post->id)}
				{if $lp}<div class="item-price"><span><span>{$lp}</span></span></div>{/if}

				{if $rating}
				<span class="rating">
					{for $i = 1; $i <= $rating['max']; $i++}
						<span class="star{if $i <= $rating['val']} active{/if}"></span>
					{/for}
				</span>
				{/if}

			</div>
			<div class="title-left">
				<h1 class="entry-title">
					<a href="{$post->permalink}" title="Permalink to {$post->title}" rel="bookmark">{$post->title}</a>
				</h1>
				<div class="item-title-detail">
					{foreach wp_get_post_terms($post->id, 'ait-dir-item-location', array("fields" => "names")) as $cat}
					{$cat}{if !$iterator->last},{/if}
					{/foreach}
				</div>
			</div>	
		</div>

	</header>

	<div class="item-image">
		
		{if $post->thumbnailSrc}
			{ifset $fullwidth}
			<img class="item-gallery-large fullwidth" src="{thumbnailResize $post->thumbnailSrc, w => 986, h => 555}" alt="{__ 'Item image'}">
			{else}
			<img class="item-gallery-large" src="{thumbnailResize $post->thumbnailSrc, w => 726, h => 404}" alt="{__ 'Item image'}">
			{/ifset}
		{/if}
		
		{ifset $options['galleryEnable']}
		<ul class="item-image-gallery">
			{if $post->thumbnailSrc}
				<li class="image image-0" data-large-url="{ifset $fullwidth}{thumbnailResize $post->thumbnailSrc, w => 986, h => 555}{else}{thumbnailResize $post->thumbnailSrc, w => 726, h => 404}{/ifset}">
					<img src="{thumbnailResize $post->thumbnailSrc, w => 96, h => 55}" alt="{__ 'Gallery image'}">
				</li>
			{/if}
			{for $i = 1; $i <= 20; $i++}
				{if !empty($options['gallery'.$i])}
				<li class="image image-{$i}" data-large-url="{ifset $fullwidth}{thumbnailResize $options['gallery'.$i], w => 986, h => 555}{else}{thumbnailResize $options['gallery'.$i], w => 726, h => 404}{/ifset}">
					<img src="{thumbnailResize $options['gallery'.$i], w => 96, h => 55}" alt="{__ 'Gallery image'}">
				</li>
				{/if}
			{/for}
		</ul>
		{/ifset}
		
	</div>

<div class="item-info-share">

	<div class="item-info">
		
		{if (!empty($options['address'])) || (!empty($options['gpsLatitude'])) || (!empty($options['telephone'])) || (!empty($options['email'])) || (!empty($options['web']))}
		<dl class="item-address">
			
			<dt class="title"><h4>{__ 'Our address'}</h4></dt> 
			
			{if (!empty($options['address']))}
			<dt class="address">{__ 'Address:'}</dt>
			<dd class="data">{!$options['address']}</dd>
			{/if}
			 
			{if (!empty($options['gpsLatitude']))}
			<dt class="gps">{__ 'GPS:'}</dt>
			<dd class="data">{$options['gpsLatitude']}, {$options['gpsLongitude']}</dd>
			{/if}
			
			{if (!empty($options['telephone']))}
			<dt class="phone">{__ 'Telephone:'}</dt>
			<dd class="data">{$options['telephone']}</dd>
			{/if}
			
			{if (!empty($options['email']))}
			<dt class="email">{__ 'Email:'} </dt>
			<dd class="data"><a href="mailto:{!$options['email']}">{!$options['email']}</a></dd>
			{/if}

			{if (!empty($options['web']))} 
			<dt class="web">{__ 'Web:'} </dt>
			<dd class="data"><a href="{!$options['web']}">{!$options['web']}</a></dd>
			{/if}
			
		</dl>
		{/if}

	</div>

	{ifset $themeOptions->directory->showShareButtons}
	<div class="item-share">
		<!-- facebook -->
		<div class="social-item fb">
			<iframe src="//www.facebook.com/plugins/like.php?href={$post->permalink}&amp;send=false&amp;layout=button_count&amp;width=113&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:113px; height:21px;" allowTransparency="true"></iframe>
		</div>
		<!-- twitter -->
		<div class="social-item">
			<a href="https://twitter.com/share" class="twitter-share-button" data-url="{$post->permalink}" data-text="{$themeOptions->directory->shareText}" data-lang="en">Tweet</a>
			<script>!function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){ js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		</div>
		<!-- google plus -->
		<div class="social-item">
			<div class="g-plusone"></div>
			<!-- Place this tag after the last +1 button tag. -->
			<script type="text/javascript">
			  (function() {
				var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
				po.src = 'https://apis.google.com/js/plusone.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
			  })();
			</script>
		</div>

	</div>
	{/ifset}
</div>
	<div class="entry-content clearfix">		
		{!$post->content}
	</div>

	<!-- tabs -->
	<div class="ait-tabs" id="item-tour-details">
		<ul></ul>
		<div id="tab-tour-details-1" class="ait-tab tab-content" data-ait-tab-title="{_ 'Availability'}">
			{if count($offers) > 0}
			<!-- item offers -->
			<table id="table-tour-offers" class="style2" data-currency="{ifset $themeOptions->directory->currency}{$themeOptions->directory->currency}{/ifset}" data-total-title="{_ 'Total price:'}" data-item-id="{$post->id}">
				<thead>
					<tr>
						<th>{_ "Name"}</th>
						<th>{_ "Date"}</th>
						<th>{_ "Description"}</th>
						<th>{_ "Price"}</th>
						<th>{_ "Capacity"}</th>
						<th class="res-amount">{_ "Choose amount"}</th>
					</tr>
				</thead>
				<tbody>
					{foreach $offers as $offer}
					<tr data-offer-id="{$offer->ID}" {ifset $offer->options['special']} class="special"{/ifset}>
						<td class="o-title">{$offer->post_title}</td>
						<td class="o-date">{$offer->from} - {$offer->to}</td>
						<td class="o-content">{!$offer->post_content}</td>
						<td class="o-price" data-value="{$offer->options['price']}">{$offer->price}</td>
						<td class="o-capacity">{$offer->capacity}</td>
						<td class="o-amount">
							{if $offer->capacity > 0}
							<select>
							{for $i = 0; $i <= $offer->capacity; $i++}
								<option value="{$i}">{$i}</option>
							{/for}
							</select>
							{/if}
						</td>
					</tr>
					{/foreach}
				</tbody>
			</table>
			<button id="button-tour-prepare-reservation" class="button-prepare-reservation trip-order">{_ 'Select'}</button>
			{else}
				{_ "No offers available"}
			{/if}
		</div>
		<!-- item amenities -->
		<div id="tab-tour-details-2" class="ait-tab tab-content" data-ait-tab-title="{_ 'Amenities'}">
		{foreach $amenities as $a}
			<div class="ame {if $a->in}yes{else}no{/if}">{$a->name}</div>
		{/foreach}
		</div>
		<!-- other tabs -->
		{for $i = 1; $i <=5; $i++}
			{ifset $options['tab'.$i]}
			<div id="tab-tour-details-{$i+2}" class="ait-tab tab-content" data-ait-tab-title="{$options['tab'.$i.'Title']}">
				{!$options['tab'.$i.'Content']}
			</div>
			{/ifset}
		{/for}
	</div>
	<script type="text/javascript">
	jQuery(document).ready(function($) {
		var $tabsDetail = $("#item-tour-details" ),
			$tabsListDetail = $tabsDetail.find("> ul"),
			$tabDivsDetail = $tabsDetail.find(".ait-tab.tab-content"),
			tabId = 0;
			$tabDivsDetail.each(function(){
				tabId++;
				var tabName = $(this).attr("id");
				var tabTitle = $(this).data("ait-tab-title");
				$('<li><a class="tab-link" href="#'+tabName+'">'+tabTitle+'</a></li>').appendTo($tabsListDetail);
			});
			$tabsDetail.tabs();
			if(typeof Cufon !== "undefined")
				Cufon.refresh();
	});
	</script>
	<!-- end of tabs -->

	<!-- reservation form -->
	<div id="ait-tour-reservation-form" class="ait-tour-reservation-form clear">
		
		<h2>{_ "Your reservation"}</h2>
		
		<!-- data generated with javascript -->
		<table class="reservation-data style2" data-table-title="{_ 'Summary'}"></table>

		<h5>{_ "Personal details"}</h5>
		
		<div class="input">
			<label for="title">{_ 'Title'}</label>
			<input type="text" name="title">
		</div>

		<div class="input required">
			<label for="name">{_ 'Name *'}</label>
			<input type="text" name="name">
		</div>

		<div class="input required">
			<label for="surname">{_ 'Surname *'}</label>
			<input type="text" name="surname">
		</div>
		
		<div class="input">
			<label for="company">{_ 'Company name'}</label>
			<input type="text" name="company">
		</div>
		
		<div class="input required">
			<label for="address">{_ 'Address *'}</label>
			<input type="text" name="address">
		</div>

		<div class="input required">
			<label for="city">{_ 'City *'}</label>
			<input type="text" name="city">
		</div>

		<div class="input required">
			<label for="zipcode">{_ 'Post/Zip Code *'}</label>
			<input type="text" name="zipcode">
		</div>

		<div class="input">
			<label for="state">{_ 'State'}</label>
			<input type="text" name="state">
		</div>

		<div class="input required">
			<label for="country">{_ 'Country *'}</label>
			<input type="text" name="country">
		</div>

		<div class="input">
			<label for="phone">{_ 'Phone'}</label>
			<input type="text" name="phone">
		</div>

		<div class="input required">
			<label for="email">{_ 'Email *'}</label>
			<input type="text" name="email">
		</div>

		{_ "(*) Required"}

		<br>
		
		<div class="input message">
			<label for="message">{_ 'Message'}</label>
			<textarea name="message" rows="4" cols="50"></textarea>
		</div>

		<button id="button-tour-send-reservation" class="button-send-reservation">{_ 'Send reservation'}</button>

	</div>

	<div class="tour-reservation-form messages">
		<div class="success">{_ "Your reservation has been successfully sent"}</div>
		<div class="error validator">{_ "Please fill out all required personal details"}</div>
		<div class="error server"></div>
	</div>

	<!-- end of reservation form -->

	<hr>
	
	<h2>{_ "Location"}</h2>
	
	{if isset($options['gpsLatitude'], $options['gpsLongitude']) && !(empty($options['gpsLatitude']) && empty($options['gpsLongitude']))}
	<div class="item-map clearfix">
	</div>
	{/if}

	<hr>
	
	{if (!empty($options['alternativeContent']))}
	<div class="item-alternative-content">
		{!do_shortcode($options['alternativeContent'])}
	</div>
	{/if}

</article><!-- /#post-{$post->id} -->

{ifset $themeOptions->rating->enableRating}
	{!getAitRatingElement($post->id)}
{/ifset}

{include comments.php, closeable => (isset($themeOptions->general->closeComments)) ? true : false, defaultState => $themeOptions->general->defaultPosition}

{ifset $themeOptions->advertising->showBox4}
<div id="advertising-box-4" class="advertising-box">
	{!$themeOptions->advertising->box4Content}
</div>
{/ifset}

{/block}