@extends('layouts.app')

@section('content')
<!-- Properties 3-Grid Listing -->
<div class="container mt-5 property-detail">
    <h2 class="sec_head">@lang('strings.details')</h2>
	<!-- Banner -->
	<div id="propertyCarousel" class="carousel slide" data-ride="carousel">
		<div class="carousel-inner">
			@if($property->images)
				@foreach($property->images as $image)
				<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
					<img src="{{ asset('storage/properties/' . $image->image) }}" class="img-fluid" alt="Image">
				</div>
				@endforeach
			@else
			<div class="carousel-item active">
				<img class="img-fluid" src="{{ asset('storage/properties/no-image.png') }}"  class="card-img-top" alt="{{ $property->title }}">
			</div>
			@endif
		</div>
		<a class="carousel-control-prev" href="#propertyCarousel" role="button" data-slide="prev">
			<span class="" aria-hidden="true">
				<img src="{{ asset('images/arrow.png') }}" alt="Previous">
			</span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#propertyCarousel" role="button" data-slide="next">
			<span class="" aria-hidden="true">
				<img src="{{ asset('images/arrow.png') }}" alt="Next">
			</span>
			<span class="sr-only">Next</span>
		</a>
		<div class="slide_num">
		
		</div>
	</div>
    <div class="row">
        <div class="col-md-12 property_desc">
            <h5 class="prop_name">{{ app()->getLocale() == 'en' ? $property->title_en : $property->title_jp }}</h5>
			<p class="prop_desc">{{ app()->getLocale() == 'en' ? $property->description_en : $property->description_jp }}</p>
			<p class="prop_location"><span>@lang('strings.location') : </span>{{ app()->getLocale() == 'en' ? $property->location->name_en : $property->location->name_jp }}</p>
			<!--<p class="prop_pub">
			@if($property->repost_date)
                    {{ \Carbon\Carbon::parse($property->repost_date)->diffForHumans() }} </p>
                    @else
                    {{ \Carbon\Carbon::parse($property->published_date)->diffForHumans() }} </p> 
                    @endif-->
			</p>
			<a href="{{ url('contact') }}" class="prop_but">@lang('strings.interested')</a>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
	var totalItems = $('.carousel-item').length;
	var currentIndex = $('div.active').index() + 1;
	$('.slide_num').html('' + currentIndex + ' of ' + totalItems + ' @lang("strings.images")');

	$("#propertyCarousel").on('slid.bs.carousel', function (){
		currentIndex = $('div.active').index() + 1;
		 $('.slide_num').html('' + currentIndex + ' of ' + totalItems + ' @lang("strings.images")');
	});

</script>
@endsection