<style>
	.detail-sheet__img img {
		border: 1px solid #EDB35D;
	}

	#slide.swiper-wrapper.swiper-slide-active {
		border: none;
	}
</style>
<section class="detail-sheet" data-id="1">
	<div class="detail-sheet__title">
			@if(is_null($article->property))
			<div class="detail-sheet__tag-mansion">マンション</div>
			@elseif($article->property == 1 || $article->property == 2 || $article->property == 3)
			<div class="detail-sheet__tag-land">{{$article->property_name}}</div>
			@elseif($article->property == 4 || $article->property == 5)
				@if($article->property_sub == 1)
					<div class="detail-sheet__tag-nhouse">{{$article->property_name}}</div>
				@else
					<div class="detail-sheet__tag-uhouse">{{$article->property_name}}</div>
				@endif
			@elseif($article->property == 6 || $article->property == 7)
			<div class="detail-sheet__tag-mansion">{{$article->property_name}}</div>
			@elseif($article->property != 99)
			@endif

		<h1 class="detail-sheet__name">{{$article->article_name}}@if($article->main_traffic_station != null)（{{$article->main_traffic_station}})@endif {{$article->property_name}}</h1>
		
	</div>
	<div class="detail-sheet__title">
		<p style="color:#FF310F; margin: 5px 0px;">{{$article->open_text}}</p>
	</div>
	<div class="detail-sheet__info">
		<div class="detail-sheet__price">
			物件価格 <span><strong data-price="{{$article->price}}">{{$article->price??'-'}}</strong>万円@if($article->tax == 1)(税抜)@else(税込)@endif</span>
		</div>
		<a href="/buy/loan/{{$article->building_id}}" class="detail-sheet__link" target="_blank">
			<i class="fas fa-calculator"></i> ローンシミュレーション
		</a>
		<a href="/buy/print/{{$article->building_id}}" class="detail-sheet__link detail-sheet__link-print">
			<i class="fas fa-print"></i> このページを印刷する
		</a>
	</div>
	<div class="detail-sheet__address">
		所在地：<span data-location="{{$article->pref_name}}{{$article->city_name}}{{$article->town_name}}">{{$article->pref_name}}{{$article->city_name}}{{$article->town_name}}</span>
	</div>
	<div class="detail-sheet__address">
		交通：<span data-intro="{{$article->main_traffic_line}}「{{$article->main_traffic_station}}」駅　徒歩{{$article->main_traffic_time}}分">{{$article->main_traffic_line}}「{{$article->main_traffic_station}}」駅　徒歩{{$article->main_traffic_time}}分</span>
	</div>
	@if(isset($article->land_area_val) || isset($article->total_area_val) || isset($article->floor_plan) || isset($article->age_year) || isset($article->whereabouts) || isset($article->land_condition))
	<ul class="detail-sheet__outline">
	@if(isset($article->land_area_val))<li><span>土地面積：</span><span data-landArea="{{$article->land_area_val}}">{{$article->land_area_val}}㎡</span></li>@endif
	@if(isset($article->total_area_val))<li><span>建物面積：</span><span data-buildingArea="{{$article->total_area_val}}">{{$article->total_area_val}}㎡</span></li>@endif
	@if(isset($article->floor_plan))<li><span>間取り：</span><span data-floorplan="{{$article->floor_plan}}{{$article->floor_plan_name}}">{{$article->floor_plan}}{{$article->floor_plan_name}}</span></li>@endif
	@if(isset($article->age_year))<li><span>築年月：</span><span data-timetostation="{{$article->age_year}}年{{$article->age_month}}月築">{{$article->age_year}}年{{$article->age_month}}月築</span></li>@endif
	@if(isset($article->whereabouts))<li><span>階数：</span>{{$article->whereabouts}}階／{{$article->floor}}階建</li>@endif
	@if(isset($article->land_condition))<li><span>建築条件：</span> @if($article->land_condition == 1) 付 @else - @endif</li>@endif
	</ul>
	@endif
	<div class="detail-sheet__copy" data-title="{{$article->catchcopy}}">
		{{$article->catchcopy}}
	</div>

	<div id="myCarousel" class="carousel slide detail-sheet__img" data-ride="carousel">
		<!-- Indicators -->
		<!--<ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
	  <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>-->

		<!-- Wrapper for slides -->
		<!--<div class="row">
		<div class="col-md-12" id="slider">
			<div class="col-md-12" id="carousel-bounding-box">
			  <div id="my" class="carousel slide"> 
				<div class="carousel-inner">
				  <div class="active item" data-slide-number="1">
					
					<img src="{{root('img/buy/kukaku.jpg')}}" class="img-responsive" style="height:400px"> 
				  </div>
				  <div class="item" data-slide-number="2"> 
					
					<img src="{{root('img/top/bukken.jpg')}}" class="img-responsive" style="height:400px"> 
				  </div>
				  <div class="item" data-slide-number="3"> 
					
					<img src="{{root('img/buy/search-school.jpg')}}" class="img-responsive" style="height:400px"> 
				  </div>
				  <div class="item" data-slide-number="4"> 
					
					<img src="{{root('img/buy/search-favo.jpg')}}" class="img-responsive" style="height:400px"> 
				  </div>
				</div>
				
				<a class="carousel-control left" style="padding: 200px 0;" href="#myCarousel" data-slide="prev">‹</a> 
				<a class="carousel-control right" style="padding: 200px 0;" href="#myCarousel" data-slide="next">›</a> 
			  </div>
			</div>
		</div>
	</div> -->


		<!--<div class="detail-sheet__img">
        <div class="detail-sheet__prev"><i class="fas fa-chevron-left"></i></div>
        <div class="detail-sheet__next"><i class="fas fa-chevron-right"></i></div>
				
				<img src="{{root('img/buy/kukaku.jpg')}}" alt="">
    </div>-->

		<!--<div class="clear" /> &nbsp;</div>
	<div class="clear" /> &nbsp;</div>
	<div class="clear" /> &nbsp;</div>
	
	<div class="row slide-thumb" style="padding-top: 40px; text-align:center">
		<div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs"> 
		  <ul class="list-inline">
			<li> 
				<a id="carousel-selector-1" class="carousel-selector selected" onclick="clickThumbSlide(this)">
				
					
				<img src="{{root('img/top/list1.jpg')}}" class="img-responsive" style="width:120px;height:120px;overflow:hidden"> 
				
				</a>
			</li>
			<li> <a id="carousel-selector-2" class="carousel-selector" onclick="clickThumbSlide(this)">
			  
				
			<img src="{{root('img/top/list1.jpg')}}" height="120px" class="img-responsive" style="width:120px;height:120px;overflow:hidden"> 
			  </a></li>
			<li> <a id="carousel-selector-3" class="carousel-selector" onclick="clickThumbSlide(this)">
				
			<img src="{{root('img/top/list1.jpg')}}" class="img-responsive" style="width:120px;height:120px;overflow:hidden"> 
			  </a></li>
			<li> <a id="carousel-selector-4" class="carousel-selector" onclick="clickThumbSlide(this)">
			 
			<img src="{{root('img/top/list1.jpg')}}" class="img-responsive" style="width:120px;height:120px;overflow:hidden"> 
			  </a></li>
		  </ul>
		</div>
	</div>-->


		<!-- NEW SLIDER-->

		<div id="slider" class="swiper-container">
			<div class="swiper-wrapper" style="border: none;">
			@if(count($photos) > 0)
			@foreach($photos as $photo)
				<div class="swiper-slide">
					<div class="swiper-img-wrap">
						<img data-thumbnail="{{$photo->disp_file_path}}" src="{{$photo->disp_file_path}}" alt="">
					</div>
					<span class="caption">{{$photo->memo}}</span>
				</div>
			@endforeach
			@else
				<div class="swiper-slide">
					<div class="swiper-img-wrap">
						<img src="{{root('img/noimage2.jpg')}}"/>
					</div>
				</div>
			@endif
			</div>
			<div class="swiper-button-prev swiper-button-white"></div>
			<div class="swiper-button-next swiper-button-white"></div>
		</div>

		<div id="thumbs" class="swiper-container mb60">
			<div class="swiper-wrapper">
			@if(count($photos) > 0)
			@foreach($photos as $photo)
				<div class="swiper-slide">
					<img src="{{$photo->disp_file_path}}" alt="">
				</div>
			@endforeach
			@else
				<div class="swiper-slide">
					<img src="{{root('img/noimage2.jpg')}}"/>
				</div>
			@endif
			</div>
		</div>
	</div>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
	<!--<script src="{{root('js/swiper.js')}}"></script>-->
	<script>
		var galleryThumbs = new Swiper('#thumbs', {
			spaceBetween: 10,
			slidesPerView: 8,
			loop: false,
			freeMode: true,
			loopedSlides: 5, //looped slides should be the same
			watchSlidesVisibility: true,
			watchSlidesProgress: true,
			slideToClickedSlide: true,
			touchRatio: 0.2,
			autoplay: 2000,
			speed: 200
		});
		var galleryTop = new Swiper('#slider', {
			spaceBetween: 10,
			loop: false,
			autoplay: {
				delay: 5000,
			},
			loopedSlides: 5, //looped slides should be the same
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
			thumbs: {
				swiper: galleryThumbs,
			},
			slideChange: function(swiper){
				console.log(swiper.activeIndex)
			}
		});
		// var slider = new Swiper('#slider', {
		// 	nextButton: '.swiper-button-next',
		// 	prevButton: '.swiper-button-prev'
		// })
		// var thumbs = new Swiper('#thumbs', {
		// 	centeredSlides: false,
		// 	spaceBetween: 10,
		// 	slidesPerView: "auto",
		// 	touchRatio: 0.2,
		// 	slideToClickedSlide: true,
		// 	autoplay: 2000,
		// 	speed: 200,
		// 	on: {
		// 		progress: function() {
		// 			var swiper = this;
		// 			for (var i = 0; i < swiper.slides.length; i++) {
		// 				var slideProgress = swiper.slides[i].progress;
		// 				var innerOffset = swiper.width * interleaveOffset;
		// 				var innerTranslate = slideProgress * innerOffset;
		// 				swiper.slides[i].querySelector(".slide-inner").style.transform =
		// 					"translate3d(" + innerTranslate + "px, 0, 0)";
		// 			}
		// 		},
		// 	}
		// });
		// slider.params.control = thumbs;
		// thumbs.params.control = slider;
	</script>


	<!--<div class="detail-sheet__comment">
        コメント。コメント。コメント。コメント。コメント。
    </div>-->
	<div class="detail-sheet__points">
		<h2 class="detail-sheet__staff">	スタッフのおすすめポイント</h2>
		{!! nl2br(e($article->point)) !!}
	</div>
	<!--<div class="detail-sheet__flow">
        物件概要を見る<i class="fas fa-caret-down"></i>
    </div>-->
	<div class="detail-sheet__overviews">
		<div class="hidden_box">
			<label for="label1">地図を見る<i class="fas fa-caret-down"></i></label>
			<input type="checkbox" id="label1" />
			<div class="hidden_show">
				<!--非表示ここから-->
				@include('home.buy.map')
				<!--ここまで-->
			</div>
		</div>

	</div>
</section>