@extends('template')
@section('head')
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
@section('content')
<div class="grey-back" id='buy'>

<div class="wrapper">

<h2 class="page-title"><span>住まいを探す</span><strong><img src="{{root('img/buy/icon_search.png')}}" alt="">沿線・駅から探す</strong></h2>
<p>沿線・駅にチェックを入れてください。（複数選択できます） ※駅名クリックで、各駅の物件一覧ページをご覧いただけます。</p>
<div class="line-wrap">
<form>
  <h3><input type="checkbox" class="ca1" onclick="action_search();" />京浜東北線</h3>
  <div class="line-box">
    <ul class="line-box-name">
      <li><span><input type="checkbox" name="" class="cb1" value="10" id="" onclick="action_search();" /></span><a href="">山手（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb1"value="20" id="" onclick="action_search();" /></span><a href="">根岸（20）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb1" value="40" id="" onclick="action_search();" /></span><a href="">磯子（30）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb1" value="40" id="" onclick="action_search();" /></span><a href="">新杉田（40）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb1" value="10"  id="" onclick="action_search();" /></span><a href="">洋光台（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb1" value="20"  id="" onclick="action_search();" /></span><a href="">港南台（20）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb1" value="10"  id="" onclick="action_search();" /></span><a href="">本郷台（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb1" value="10"  id="" onclick="action_search();" /></span><a href="">大船（10）<i class="fas fa-chevron-right"></i></a></li>
    </ul>
  </div>

  <h3><input type="checkbox" onclick="action_search();" class="ca2" />JR根岸線</h3>
  <div class="line-box">
    <ul class="line-box-name">
      <li><span><input type="checkbox" name="" class="cb2" value="10"  id="" onclick="action_search();" /></span><a href="">山手（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb2" value="50"  id="" onclick="action_search();" /></span><a href="">根岸（50）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb2" value="10"  id="" onclick="action_search();" /></span><a href="">磯子（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb2" value="10"  id="" onclick="action_search();" /></span><a href="">新杉田（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb2" value="10"  id="" onclick="action_search();" /></span><a href="">洋光台（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb2" value="20"  id="" onclick="action_search();" /></span><a href="">港南台（20）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb2" value="10"  id="" onclick="action_search();" /></span><a href="">本郷台（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb2" value="30"  id="" onclick="action_search();" /></span><a href="">大船（30）<i class="fas fa-chevron-right"></i></a></li>
    </ul>
  </div>

  <h3><input type="checkbox" onclick="action_search();" class="ca3"/>京急本線（000）</h3>
  <div class="line-box">
    <ul class="line-box-name">
      <li><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">日ノ出町（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb3" value="60"  id="" onclick="action_search();" /></span><a href="">黄金町（60）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">南太田（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">井土ヶ谷（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">弘明寺（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">上大岡（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb3" value="40"  id="" onclick="action_search();" /></span><a href="">屏風浦（40）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">杉田（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb3" value="50"  id="" onclick="action_search();" /></span><a href="">京急富岡（50）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">能見台（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb3" value="20"  id="" onclick="action_search();" /></span><a href="">金沢文庫（20）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb3" value="10"  id="" onclick="action_search();" /></span><a href="">金沢八景（10）<i class="fas fa-chevron-right"></i></a></li>
    </ul>
  </div>

  <h3><input type="checkbox" onclick="action_search();" class="ca4"/>横浜市営地下鉄ブルーライン（000）</h3>
  <div class="line-box">
    <ul class="line-box-name">
      <li><span><input type="checkbox" name="" class="cb4" value="20"  id="" onclick="action_search();" /></span><a href="">伊勢佐木長者町（20）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb4" value="10"  id="" onclick="action_search();" /></span><a href="">板東橋（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb4" value="20"  id="" onclick="action_search();" /></span><a href="">吉野町（20）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb4" value="10"  id="" onclick="action_search();" /></span><a href="">蒔田（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb4" value="40"  id="" onclick="action_search();" /></span><a href="">弘明寺（40）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb4" value="10"  id="" onclick="action_search();" /></span><a href="">上大岡（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb4" value="10"  id="" onclick="action_search();" /></span><a href="">港南中央（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb4" value="10"  id="" onclick="action_search();" /></span><a href="">上永谷（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb4" value="50"  id="" onclick="action_search();" /></span><a href="">下永谷（50）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb4" value="70"  id="" onclick="action_search();" /></span><a href="">舞岡（70）<i class="fas fa-chevron-right"></i></a></li>
    </ul>
  </div>

  <h3><input type="checkbox" onclick="action_search();" class="ca5"/>横浜新都市交通シーサイドライン（000）</h3>
  <div class="line-box">
    <ul class="line-box-name">
      <li><span><input type="checkbox" name="" class="cb5" value="100"  id="" onclick="action_search();" /></span><a href="">新杉田（100）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">南部市場（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb5" value="20"  id="" onclick="action_search();" /></span><a href="">鳥浜（20）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">並木北（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb5" value="90"  id="" onclick="action_search();" /></span><a href="">並木中央（90）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">幸浦（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">産業振興センター（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">福浦（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">市大医学部（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb5" value="30"  id="" onclick="action_search();" /></span><a href="">八景島（30）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">海の公園柴口（10）<i class="fas fa-chevron-right"></i></a></li>
      <li><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">海の公園南口（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb5" value="10"  id="" onclick="action_search();" /></span><a href="">野島公園（10）<i class="fas fa-chevron-right"></i></a></li>
      <li class="line"><span><input type="checkbox" name="" class="cb5" value="20"  id="" onclick="action_search();" /></span><a href="">金沢八景（20）<i class="fas fa-chevron-right"></i></a></li>
    </ul>
  </div>
<hr />
</div>

<div class="search__result">
       <div class="search__number">該当物件数：<span id="num_total">000</span>件</div>
       <button class="search__button"><i class="fas fa-search"></i>この条件で検索</button>
</div>
<script type="application/javascript">
	function action_search(){
		var total = 0;		
		$('.cb1:checked').each(function(i, obj) {
			
				total += parseInt($(this).val());
			
		});
		$('.cb2:checked').each(function(i, obj) {
			
				total += parseInt($(this).val());
			
		});
		$('.cb3:checked').each(function(i, obj) {
			
				total += parseInt($(this).val());
			
		});
		$('.cb4:checked').each(function(i, obj) {
			
				total += parseInt($(this).val());
			
		});
		$('.cb5:checked').each(function(i, obj) {
			
				total += parseInt($(this).val());
			
		});
		//total = $('.cb1:checked').length + $('.cb2:checked').length + $('.cb3:checked').length + $('.cb4:checked').length + $('.cb5:checked').length;
		$("#num_total").html(total);
		$("#total").html(total);
		if (total == 0) {
			$('#bottom_bar').hide();
		}
		else {
			$('#bottom_bar').show();
		}
	}	
	
	$('.ca1').click(function(){
		$('.cb1').prop('checked', this.checked);
		action_search();
	})

	//".checkbox" change 
	$('.cb1').change(function(){ 
		if(false == $(this).prop("checked")){ 
			$(".ca1").prop('checked', false); 
		}
		if ($('.cb1:checked').length == $('.cb1').length ){
			$(".ca1").prop('checked', true);
		}
		
		
	});
	//
	$('.ca2').click(function(){
		$('.cb2').prop('checked', this.checked);
		action_search();
	})

	//".checkbox" change 
	$('.cb2').change(function(){ 
		if(false == $(this).prop("checked")){ 
			$(".ca2").prop('checked', false); 
		}
		if ($('.cb2:checked').length == $('.cb2').length ){
			$(".ca2").prop('checked', true);
		}
		
		
	});
	//
	$('.ca3').click(function(){
		$('.cb3').prop('checked', this.checked);
		action_search();
	})

	//".checkbox" change 
	$('.cb3').change(function(){ 
		if(false == $(this).prop("checked")){ 
			$(".ca3").prop('checked', false); 
		}
		if ($('.cb3:checked').length == $('.cb3').length ){
			$(".ca3").prop('checked', true);
		}
		
		
	});
	//
	$('.ca4').click(function(){
		$('.cb4').prop('checked', this.checked);
		action_search();		
	})

	//".checkbox" change 
	$('.cb4').change(function(){ 
		if(false == $(this).prop("checked")){ 
			$(".ca4").prop('checked', false); 
		}
		if ($('.cb4:checked').length == $('.cb4').length ){
			$(".ca4").prop('checked', true);
		}
		
		
	});
	
	//
	$('.ca5').click(function(){
		$('.cb5').prop('checked', this.checked);
		action_search();
	})

	//".checkbox" change 
	$('.cb5').change(function(){ 
		if(false == $(this).prop("checked")){ 
			$(".ca5").prop('checked', false); 
		}
		if ($('.cb5:checked').length == $('.cb5').length ){
			$(".ca5").prop('checked', true);
		}
	});
		
</script>

</form>

</div>

</div><!--#wrapper-->

</div><!--#buy-->

<div id="bottom_bar" class="change__bar" style="display:none">
	<div class="wrapper">
		<span class="change__bar-count">該当物件数<strong><span id="total">000<span></strong>件</span>
		<input class="change__bar-clear" type="button" value="条件をクリア" />
		<input class="change__bar-button fas" type="button" value="&#xf002 この条件で検索" />
		
	</div><!--wrapper-->
	
</div><!--change__bar-->

<style>
change__box{
	position:fixed;
	top:20%;
	left:50%;
	margin:0 -540px;
	width:1080px;
	padding:50px;
	box-sizing:border-box;
	background:#fff;
	border:1px solid #EDB35D;
}
.change__box input	{
	width:20px;
	height:20px;
	margin-right:10px;
}
.change__box-all	{
	width:100%;
	background:#F0F0F0;
	padding:10px 30px;
	box-sizing:border-box;
}
.change__box-list	{
	width:100%;
	padding:10px 30px;
	box-sizing:border-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.change__box-list li	{
  	margin: 0;
	display:block;
}
.change__bar	{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	padding:20px 0;
	background:#333;
	color:#fff;
}
.change__bar-count	{
	margin:0 0 0 100px;
	color:#fff;
}
.change__bar-count strong	{
	margin:0 5px 0 15px;
	font-weight:bold;
	font-size:28px;
	color:#f54;
}
.change__bar-button	{
	margin-right:50px;
	padding:10px 30px;
	background:#f54;
	border:none;
	border-radius:5px;
	color:#fff;
	float:right;
	cursor:pointer;
}
.change__bar-button	:hover{
	opacity:0.7;
}
.change__bar-clear	{
	margin:10px 100px 0 0;
	padding:0;
	background:none;
	border:none;
	color:#fff;
	float:right;
	cursor:pointer;
}
.change__bar-clear	:hover{
	text-decoration:underline;
}
@media (max-width: 740px) {
	.change	{
		position:relative;
		background:none;
	}
	.change__box{
		position:relative;
		top:0;
		left:0;
		margin:0;
		width:100%;
		padding:20px;
		border:none;
	}
	.change__box-list	{
		width:100%;
		margin:10px 0 0 0;
		padding:0;
		box-sizing:border-box;
		display:block;
	}
	.change__box-list li	{
  		width:100%;
  		margin: 0;
		display:block;
	}
	.change__box-list li	 label{
  		width:100%;
  		margin: 0;
		display:block;
		line-height:30px;
	}
	.change__bar-count	{
		margin:0;
		color:#fff;
	}
	.change__bar-button	{
		width:100%;
		margin:10px 0 0 0;
		padding:15px 30px;
	}
	.change__bar-clear	{
		margin:5px 0 0 0;
	}
</style>
@endsection
