@extends('layouts.public')

@section('title') {{trans('seo.title.index')}} @endsection
@section('description') {{trans('seo.description.index')}} @endsection

@section('content')
<div class="banner">
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			@foreach($objects as $key => $object)
			<div class="item item-100vh {{$key ? '': 'active'}}" style="background: url({{asset($object->image)}}) center/cover;">
				<div class="container">
					<div class="carousel-caption banner-slider-inner">
						<div class="banner-content banner-content-left">
							<div class="banner-detail-box text-left">
								<h3 data-animation="animated fadeInDown delay-05s"><span>{{$object->title}}</span></h3>
								<p data-animation="animated fadeInUp delay-1s">{{$object->address}}</p>
								<a href="{{route('public.object', $object)}}" class="btn button-sm button-theme" data-animation="animated fadeInUp delay-15s">{!!trans('global.more')!!}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			@endforeach
		</div>
	</div>
</div>

<div class="about-city-estate">
	<div class="container">
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
				<div class="about-text">
					<h3>{!!trans('index.about.title')!!}</h3>
					{!!trans('index.about.text')!!}
					<a href="{{route('public.about-us')}}" class=" btn button-sm button-theme">{!!trans('index.about.button')!!}</a>
				</div>
			</div>
			<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
				<div class="properties-detail-slider simple-slider">
					<img src="/img/about-us.png" class="img-preview img-responsive" alt="Kongrad Zadar">
				</div>
			</div>
		</div>
	</div>
</div>

<div class="content-area featured-properties" style="background: #ececec;">
	<div class="container">
		<div class="main-title">
			<h1>{!!trans('index.references.title')!!}</h1>
		</div>
		@foreach($posts->chunk(3) as $chunk)
		<div class="row">
			<div class="filtr-container">
				@foreach($chunk as $post)
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
					<div class="property">
						<div class="property-img">
							<img src="{{asset($post->thumbnail)}}" alt="{{$post->title}}" class="img-responsive">
							<div class="property-overlay">
								<a href="{{route('public.post', $post)}}" class="overlay-link">
									<i class="fa fa-link"></i>
								</a>
							</div>
						</div>
						<div class="property-content">
							<h1 class="title">
								<a href="{{route('public.post', $post)}}">{{$post->title}}</a>
							</h1>
							<h3 class="property-address">
								<a href="{{route('public.post', $post)}}">
									<i class="fa fa-map-marker"></i>{{$post->location}}
								</a>
							</h3>
						</div>
					</div>
				</div>
				@endforeach
			</div>
		</div>
		@endforeach
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    // Banner slider
    (function ($) {

		$.fn.carousel.Constructor.TRANSITION_DURATION = 1500;

        //Function to animate slider captions
        function doAnimations(elems) {
            //Cache the animationend event in a variable
            var animEndEv = 'webkitAnimationEnd animationend';
            elems.each(function () {
            	var $this = $(this),
            	$animationType = $this.data('animation');
            	$this.addClass($animationType).one(animEndEv, function () {
            		$this.removeClass($animationType);
            	});
            });
        }

        //Variables on page load
        var $myCarousel = $('#carousel-example-generic')
        var $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
        //Initialize carousel
        $myCarousel.carousel({
        	interval: 4000,
        	pause: "false"
        });

        //Animate captions in first slide on page load
        doAnimations($firstAnimatingElems);
        //Pause carousel
        $myCarousel.carousel('pause');
        //Other slides to be animated on carousel slide event
        $myCarousel.on('slide.bs.carousel', function (e) {
        	var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
        	doAnimations($animatingElems);
        });
        $('#carousel-example-generic').carousel({
        	interval: 4000,
        	pause: "false"
        });
    })(jQuery);
</script>
@endsection