@extends('home.template')
@section('head')
<script src="{{root('js/top.js')}}"></script>
<script src="{{asset('js/buy/_system.js')}}"></script>
<script src="{{asset('js/buy/system.js')}}"></script>
<script src="{{asset('js/buy/map.js')}}"></script>
<link rel="stylesheet" href="{{ root('css/index_map.css')}}">
@endsection

@section('content')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="top">
  <div class="top__main-visual">
      <img class="pc" src="{{root('img/top/top2.jpg')}}" alt="">
            <img class="sp" src="{{root('img/top/top-sp.jpg')}}" alt="">
      <div class="top__main-text">
      <img src="{{root('img/top/top-text.png')}}" alt="">
      <h1>横浜市の不動産のことなら、三春情報センターへ</h1>
      </div>
  </div>
  </div>


    <div class="wrapper">


        <div class="title">
            <h2 class="title__title">INFOMATION</h2>
        </div>

        <div class="top__lists">
            <div class="list">
                <div class="list__title">オープンハウス情報<a href="/buy/openhouse.html">一覧<i class="fas fa-chevron-right"></i></a></div>
                <div class="list__box">
@foreach($open as $row)
                    <a href="/buy/detail/{{$row->building_id}}">
                        <dl class="list__dloh">
                            <dt class="list__dtoh">
                            @if(!empty($row->open_file_path))
                            <img src="{{$row->open_file_path}}" width="150" />
                            @else
                            <img src="{{root('img/noimage2.jpg')}}" width="150" />
                            @endif
                            </dt>
                            <dd class="list__ddoh">
                                <div class="list__date">
                                @if($row->property == 1)
                                <span class="land__tag">土地</span>
                                @elseif($row->property == 2)
                                <span class="land__tag">土地（借地権）</span>
                                @elseif($row->property == 3)
                                <span class="land__tag">土地（底地権）</span>
                                @elseif($row->property == 4)
                                    @if($row->property_sub == 1)
                                    <span class="nhouse__tag">新築一戸建て</span>
                                    @else
                                    <span class="uhouse__tag">中古一戸建て</span>
                                    @endif
                                @elseif($row->property == 5)
                                @if($row->property_sub == 1)
                                    <span class="nhouse__tag">新築テラスハウス</span>
                                    @else
                                    <span class="uhouse__tag">中古テラスハウス</span>
                                    @endif
                                @elseif($row->property == 6)
                                <span class="recommend__tag">マンション</span>
                                @elseif($row->property == 7)
                                <span class="recommend__tag">タウンハウス</span>
                                @elseif($row->property == null)
                                <span class="recommend__tag">マンション</span>
                                @endif	
                                {{$row->updated_at->format('Y.m.d')}}</div>
                                <p class="list__text">
                                    「{{$row->article_name}}」
                                @if($row->event_category == 1)
                                現地見学会
                                @elseif($row->event_category == 2)
                                現地案内会
                                @elseif($row->event_category == 3)
                                現地販売会
                                @elseif($row->event_category == 4)
                                オープンハウス
                                @elseif($row->event_category == 5)
                                オープンルーム
                                @endif
                                </p>
                                <p class="list__text">
                                @if($row->event_schedule == 1)
                                期間：毎週土日祝
                                @elseif($row->event_schedule == 2)
                                期間：毎週土日
                                @elseif($row->event_schedule == 3)
                                @php
                                    $day_text = "";
                                    $event = explode(',', $row->event_day);
                                    foreach($event as $day) {
                                        if($day_text != "") {
                                            $day_text .= ',';
                                        }
                                        $day_text .= date('m/d',  strtotime($day));
                                    }
                                @endphp
                                開催日：{{$day_text}}
                                @elseif($row->event_schedule == 4)
                                期間：{{$row->from_event}}〜{{$row->to_event}}
                                @elseif($row->event_schedule == 5)
                                期間：公開中
                                @endif
                                <br />
                                時間：{{$row->from_hour}}:{{$row->from_minute}}〜{{$row->to_hour}}:{{$row->to_minute}}<br />
                                
                                場所：{{$row->pref_name}}{{$row->city_name}}{{$row->town_name}}{{$row->address}}</p>
                            </dd>
                        </dl>
                    </a>
@endforeach
                    </div>
            </div>
            <div class="list">
                <div class="list__title">トピックス<a href="topics">一覧<i class="fas fa-chevron-right"></i></a></div>
                <div class="list__box">
@foreach($topics as $row)
                    <dl class="list__dl">
                        <dt class="list__dt">
    @if(strtotime($row['news_date']) >= strtotime($new_target))
                        <span class="list__new">NEW</span>
    @endif
                        <span class="list__dt-tag{{$row->tag}}">{{$row->name}}</span>{{$row->news_date}}</dt>
                        <dd class="list__dd">
    @if($row->news_link == 1)
                            <a href="{{$row->news_link_target_url}}">{{$row->news_title}}</a>
    @else
                            {{$row->news_title}}
    @endif
                        </dd>
                    </dl>
@endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div class="map">
    <div class="map__tab-wrap">
        <div class="map__tab"><i class="fas fa-search"></i>物件を探す</div>
        <span>ご希望の区名・物件種別を一つお選びください。</span>
    </div>
	<script type="text/javascript">
		function map_hover_group(id){
			//console.log("hover group : " + id);
			MAP.over(id);
			if (id != 0){
				$('.town-link' + id).css('text-decoration', 'underline');
			}
			else {
				$('.town-link').css('text-decoration', 'none');
			}
		}

		function map_hover_item(id){
			MAP.over(id);
			if(id == 0) {
				$('.town-link').css('text-decoration', 'none');
			}
			else {
				$('.town-link-'+ id).css('text-decoration', 'none');
			}
		}
		</script>
    <div class="map-search">
    <div class="map-search__left">
		<div id="MAP" class="MAP">
			<div class="MAP_BOX">
				<map name="IMGMAP" id="IMGMAP">
				<img src="{{root('img/buy/map_top.png')}}" alt="">
				<area href="/buy/minami" alt="南区" onmouseover="MAP.over(14105);" onmouseout="MAP.over(0);" shape="poly"coords="163,101 190,121 228,114 251,144 264,98 310,91 299,42 211,47 171,69" />
				<area href="/buy/isogo" alt="磯子区" onmouseover="MAP.over(14107);" onmouseout="MAP.over(0);" shape="poly" coords="211,206 216,277 212,296 322,201 347,125 310,91 246,98 251,144 257,158 219,166 250,200" />
				<area href="/buy/kanazawa" alt="金沢区" onmouseover="MAP.over(14108);" onmouseout="MAP.over(0);" shape="poly" coords="212,296 260,420 388,323 376,190 322,201" />
				<area href="/buy/konan" alt="港南区" onmouseover="MAP.over(14111);" onmouseout="MAP.over(0);" shape="poly" coords="118,214 216,277 211,206 250,200 219,166 257,158 251,144 228,144 190,121 163,101 119,116" />
				<area href="/buy/sakae" alt="栄区" onmouseover="MAP.over(14115);" onmouseout="MAP.over(0);"	shape="poly" coords="22,271 201,356 212,296 216,277 135,246 118,214 63,209" />
				</map>
				<img class="MAPLAYER" src="{{root('img/buy/0.png')}}" alt="MOUSE OVER ACTION" usemap="#IMGMAP" />
				<img class="MAPLAYER" src="{{root('img/buy/0.png')}}" alt="" />
				<img class="MAPLAYER" src="{{root('img/buy/0.png')}}" alt="" />
				<img class="MAPLAYER" src="{{root('img/buy/0.png')}}" alt="" />
				<img class="MAPLAYER" src="{{root('img/buy/0.png')}}" alt="" />
				<img class="MAPLAYER" src="{{root('img/buy/0.png')}}" alt="" />

			</div>
		</div>
	</div>
    <div class="map-search__right">
        @foreach($common_list as $row)
        <div class="town town-{{$row['area_id']}}" >
            <dl class="town-name">
                <dt><img src="{{root('img/buy/'.$row['icon'])}}" alt=""></dt>
                <dd>
                    <a href="/buy/{{$row['url']}}" class="town-link town-link{{$row['area_id']}}" onmouseover="map_hover_group({{$row['area_id']}});" onmouseout="map_hover_group(0);">
                        <em>{{$row['name']}}の</em><br>
                        <em>不動産（{{$row['count']}}）</em>
                    </a>
                </dd>
            </dl>
            <div class="town-bukken">
                @foreach($row['sub_list'] as $item)
                <a href="/buy/{{$row['url']}}/{{$item['url']}}" onmouseover="map_hover_item({{$row['area_id']}});" onmouseout="map_hover_item(0);"><i class="fas fa-chevron-right"></i> {{$item['name']}}（{{$item['count']}}）</a>
                @endforeach
            </div>
        </div><!--town-->
        @endforeach
    </div><!--map-search__right-->
  </div>

  <div class="key">
    <span><img src="{{root('img/buy/icon_search_white.png')}}" alt="">物件名・マンション名・住所のキーワードから探す</span>
    <form action="{{url('/buy/bukkenlist')}}" name="FMfrm" method="get" onsubmit="return cbCheck();">
      <input class="INPUT" type="text" name="key" value="キーワードを入力してください" onfocus="if(this.value == this.defaultValue) { this.value = ''; }" onblur="if(this.value == '') { this.value = this.defaultValue; }" />
      <input class="SUBMIT" type="submit" value="検　索"  />
    </form>
  </div><!--KEY-->

</div><!--map-->



<div class="service">
    <div class="wrapper">
        <div class="title">
            <h2 class="title__title">SERVICE</h2>
            <div class="title__top">
                <h3 class="title__headline">すべては、お客様の「真の幸せ」を<br class="sp">実現するために</h3>
                <p>不動産という枠にとらわれず、お客様のすべてのニーズにお応えできるようなサービスを展開します。</p>
            </div>
        </div>
        <div class="service__column">
            <div class="service__image">
                <img src="{{root('img/top/column1.jpg')}}" alt="">
            </div>
            <div class="service__text">
                <i class="fas fa-caret-right"></i>
                <div class="service__wrapper">
                    <div class="service__number">01</div>
                    <div class="service__mini-title">
                        住まいを探す
                    </div>
                    <div class="service__mini-text">
                        横浜市港南区、南区、磯子区、金沢区、栄区、鎌倉 市を中心とした不動産情報。リフォーム、注文住宅の相談もワンストップでご対応いたします。
                    </div>
                    <a href="buy/" class="service__button">
                        詳細を見る
                    </a>
                </div>
            </div>
        </div>

        <div class="service__column">
            <div class="service__image">
                <img src="{{root('img/top/column2.jpg')}}" alt="">
            </div>
            <div class="service__text">
                <i class="fas fa-caret-right"></i>
                <div class="service__wrapper">
                    <div class="service__number">02</div>
                    <div class="service__mini-title">
                        住まいを売る
                    </div>
                    <div class="service__mini-text">
                        わたしたち三春情報センターは地元の横浜・横須賀・湘南エリアで常時活発な販売活動を行っています。お客様のご要望に叶うご提案で、不動産売却を全力でお手伝いします。 </div>
                    <a href="sell/" class="service__button">
                        詳細を見る
                    </a>
                </div>
            </div>
        </div>

        <div class="service__column">
            <div class="service__image">
                <img src="{{root('img/top/column3.jpg')}}" alt="">
            </div>
            <div class="service__text">
                <i class="fas fa-caret-right"></i>
                <div class="service__wrapper">
                    <div class="service__number">03</div>
                    <div class="service__mini-title">
                        中古＋リフォーム
                    </div>
                    <div class="service__mini-text">
                        購入がしやすい中古マンションや一戸建て物件を、家族の夢を叶える、細部まで丁寧につくりこまれた“オーダーメイド住空間”へ造り替えます。 </div>
                    <a href="reform/" class="service__button">
                        詳細を見る
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="recommend">
    <div class="wrapper">
        <div class="title">
            <h2 class="title__title">RECOMMEND</h2>
            <div class="title__top">
                <h3 class="title__headline">三春情報センターのおすすめ物件</h3>
                <p>三春情報センターのおすすめ物件をご紹介いたします。クリックで詳細をご覧いただけます。</p>
            </div>
        </div>
        @include('home.parts.recommend');
    </div>
</div>

<div class="reason">
    <div class="wrapper">
      <div class="title">
          <h2 class="title__title">MERIT</h2>
          <div class="title__top">
              <h3 class="title__headline">三春情報センターが喜ばれる理由</h3>
              <p>わたしたち三春情報センターはお客様の真の幸せを実現することを使命としています。</p>
          </div>
      </div>

        <div class="reason__contents">
          <dl>
            <dt><strong>1<br /><span>総合生活産業</span></strong><span class="num_sp">01</span></dt>
            <dd><span class="sp">総合生活産業</span>お客様の生活シーンにおけるさまざまな幸せをサポートするための総合的なサービスの構築を続けます。</dd>
          </dl>

          <dl>
            <dt><strong>2<br /><span>地域土着</span></strong><span class="num_sp">02</span</dt>
            <dd><span class="sp">地域土着</span>昭和52年横浜市栄区で創業。これからもこの地の「住まいと暮らしの第一人者」としてあり続けます。</dd>
          </dl>

          <dl>
            <dt><strong>3<br /><span>暮らしにあった<br />住まい方のご提案</span></strong><span class="num_sp">03</span</dt>
            <dd><span class="sp">暮らしにあった住まい方のご提案</span>一つひとつの「暮らし」にあった住まいを、お客様とともにつくりあげます。</dd>
          </dl>

          <dl style="border-bottom:0;">
            <dt><strong>4<br /><span>親子３代の<br />お付き合い</span></strong><span class="num_sp">04</span</dt>
            <dd><span class="sp">親子３代のお付き合い</span>アフターサービスではなく、一生涯のサービス提案。お子様、お孫様の代までお付き合いいたします。</dd>
          </dl>
        </div>
      <img class="reason__illust"src="{{root('img/top/reason_illust.png')}}" alt="三春情報センターが喜ばれる理由">
    </div>
</div>

<style type="text/css">
 .title__title::after {
	background-color: #333333;
 }
 
 @media (max-device-width: 1024px) {
	.wrapper {
		width: 100% !important;
		margin: 10px auto;
	}
	.top__lists {
		width: 100%
	}
	.map-search__left {
		display: none;
	}
	.map-search {
		width: auto;
	}

	.key {
		width:auto;
	}
	.reason__contents {
		width: auto;
		margin-left: 10px;
	}
	
	.reason__contents dl {
		width: 185px;
	}
 }
@media (max-width: 780px){
	
	.top__lists {
		width: 100%
	}
	.map-search__left {
		display: none;
	}
	.map-search {
		width: auto;
	}

	.key {
		width:auto;
	}
	.reason__contents {
		width: auto;
		margin-left: 10px;
	}
	.reason__contents dl {
		width: auto;
	}
	
	.reason__contents dl dt span.num_sp {
		width: 100px;
		height: 100px;
		color: #E9BB00;
		background: #fff;
		border-radius: 50%;
		display: block;
		font-size: 40px;
		line-height: 80px;
		margin: 0;
		text-align: center;
		margin-left: 40px;
		padding: 10px;
	}
	.recommend__component figure {	
		width: auto;
		height: auto;
	}
	
   
	.recommend__component {
		width: 50%;
	}
	
}
@media (max-width: 480px) {
	.reason__contents dl dt span.num_sp {
		width: 80px;
		height: 80px;
		color: #E9BB00;
		background: #fff;
		border-radius: 50%;
		display: block;
		font-size: 40px;
		line-height: 80px;
		margin: 0;
		text-align: center;
		margin-left: 10px;
		padding: 6px;
	}
	.recommend__component figure {	
		width: auto;
	}
}

 

</style>
@endsection
