@extends('layouts.public')

@section('title') {{trans('seo.title.apartment2')}} @endsection
@section('image', asset('images/studio-3-1.jpg'))

@section('content')

<section class="banner-tems text-center">
	<div class="container">
		<div class="banner-content">
			<h1>{!!trans('apartment2.title')!!}</h1>
			<p>{!!trans('apartment2.subtitle')!!}</p>
		</div>
	</div>
</section>

<section class="section-product-detail">
	<div class="container">
		<div class="product-detail margin">
			<div class="row">
				<div class="col-lg-9">
					<div class="wrapper">
						<div id="gallery" style="display: none;">
							<img src="/images/apartments/studio3/studio3-1.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/apartments/studio3/studio3-1.jpg" data-description="">
							<img src="/images/apartments/studio3/studio3-2.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/apartments/studio3/studio3-2.jpg" data-description="">
							<img src="/images/apartments/studio3/studio3-4.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/apartments/studio3/studio3-4.jpg" data-description="">
							<img src="/images/apartments/studio3/studio3-3.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/apartments/studio3/studio3-3.jpg" data-description="">
							<img src="/images/apartments/studio3/studio3-5.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/apartments/studio3/studio3-5.jpg" data-description="">
							<img src="/images/terrace-1.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/terrace-1.jpg" data-description="">
							<img src="/images/terrace-2.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/terrace-2.jpg" data-description="">
							<img src="/images/terrace-3.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/terrace-3.jpg" data-description="">
							<img src="/images/terrace-4.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/terrace-4.jpg" data-description="">
							<img src="/images/terrace-5.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/terrace-5.jpg" data-description="">
							<img src="/images/terrace-6.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/terrace-6.jpg" data-description="">
							<img src="/images/rostilj.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/rostilj.jpg" data-description="">
							<img src="/images/peka.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/peka.jpg" data-description="">
							<img src="/images/harbor-1.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/harbor-1.jpg" data-description="">
							<img src="/images/harbor-2.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/harbor-2.jpg" data-description="">
							<img src="/images/harbor-3.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/harbor-3.jpg" data-description="">
							<img src="/images/harbor-4.jpg" alt="Apartmani Šoštarić - Sali, Dugi otok" data-image="/images/harbor-4.jpg" data-description="">
						</div>
					</div>
				</div>
				<div class="col-lg-3">
					@include('include.aside-apartments', ['accommodation' => trans('apartment2.title')])
				</div>
			</div>
		</div>

		
		<div class="product-detail_tab">
			<div class="row">
				<div class="col-md-3">
					<ul class="product-detail_tab-header">
						<li class="active"><a href="#overview" data-toggle="tab">{!!trans('apartment2.label.description')!!}</a></li>
						<li><a href="#amenities" data-toggle="tab">{!!trans('apartment2.label.details')!!}</a></li>
					</ul>
				</div>
				<div class="col-md-9">
					<div class="product-detail_tab-content tab-content">
						<div class="tab-pane fade  active in" id="overview">
							<div class="product-detail_overview">
								<p>{!!trans('apartment2.apartment.text')!!}</p>
								<div class="row">
									<div class="col-xs-6 col-md-6">
										{!!trans('apartment2.apartment.features')!!}
									</div>
									<div class="col-xs-6 col-md-6">
										{!!trans('apartment2.apartment.position')!!}
									</div>
								</div>
							</div>
						</div>

						<div class="tab-pane fade" id="amenities">
							<div class="product-detail_amenities">
								<div class="row">
									<div class="col-xs-6 col-lg-6">
										{!!trans('apartment2.apartment.additional-details')!!}
									</div>
									<div class="col-xs-6 col-lg-6">
										{!!trans('apartment2.apartment.kitchen')!!}
									</div>
								</div>
								<div class="row">
									<div class="col-xs-6 col-lg-6">
										{!!trans('apartment2.apartment.bathroom')!!}
									</div>
									<div class="col-xs-6 col-lg-6">
										{!!trans('apartment2.apartment.additional-services')!!}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
@endsection

@section('styles')
<link rel='stylesheet' href='/unitegallery/css/unite-gallery.css' type='text/css' />
@endsection

@section('scripts')
<script type='text/javascript' src='/unitegallery/js/jquery-11.0.min.js'></script>   
<script type='text/javascript' src='/unitegallery/js/unitegallery.min.js'></script>  
<script type='text/javascript' src='/unitegallery/themes/compact/ug-theme-compact.js'></script>
<script type="text/javascript">

	jQuery.noConflict();
	
	jQuery(document).ready(function(){

		jQuery("#gallery").unitegallery({
			gallery_theme: "compact",
			gallery_height: 670, 
			slider_scale_mode: "fit",
			slider_control_zoom: false,
			slider_fullscreen_button_align_hor: "right",
			slider_enable_play_button: false,
			slider_enable_zoom_panel: false,
		});

	});

</script>
@endsection