@extends('layouts.app')

@section('content')

	@include('script.googleMap')

	{{--지도 동작 스크립트--}}
	<script>
		@foreach ($hosts as $host)
			locations.push(['The {{$host->user->lastname}}\'s Family',{{$host->map_lat}},{{$host->map_lng}},'','{{ $host->inputFile_HomeExterior }}','H','{{ $host->inputZipCode }}, {{ $host->inputCity }}, {{ $host->selectAddrState }}' ]);
		@endforeach
		@foreach ($schools as $school)
			locations.push(['{{ $school->school_name }}',{{$school->map_lat}},{{$school->map_lng}},'{{ $school->type }}','{{ $school->image1_file }}','S','{{ $school->address }}' ]);
		@endforeach
		$(document).ready(function() {
			mapInitialize();
		});
	</script>

	<div id="mapDefault" style="width:100%; height:400px;"></div>
	
	
	
	<!--start-->
<div class="main-panel-1">
		<div class="container">
			<p class="mt10" style="font-size:26px; font-weight: bold;">@lang('menu.featuredHost')</p>

						@foreach ($hosts as $host)
				@if ($i==0 || $i==4)
					<div class="row @if($i==4) mt20 @endif">
				@endif
						<div class="panel col-md-3">
							{{--<div class="panel-heading">--}}
								{{--<span class="panel-title"></span>--}}
							{{--</div>--}}

							<div class="panel-body">
								<a href="/host/{{$host->user_id}}">
									<img style="max-width:100%; height:auto;" class="" src="{{ $host->inputFile_HomeExterior }}" onerror="this.src='/assets/img/userimg/house-default.jpg'">
								</a>
						
							</div>

						</div>
				@if ($i==3 || $i==7)
					</div>
				@endif
						@endforeach
		</div>
	</div>
	
<!--end-->
	<div class="main-panel-2">
		<div class="container">
			<p class="mt10" style="font-size:26px; font-weight: bold;">@lang('menu.featuredSchool')</p>

						@foreach ($schools as $school)
				@if ($i == 0 || $i == 3) <div class="row mt20"> @endif
				<div class="panel col-lg-4">
					<div class="panel-body">
						<a href="/school/{{$school->id}}">
							<div class="col-md-6">
								<img style="width:100%; height:auto;" class="" src="{{ $school->image1_file }}" onerror="this.src='/assets/img/userimg/house-default.jpg'">
							</div>
						</a>
						<div class="col-md-6">
							<h3>{{ $school->school_name }}</h3>
							@if ( $school->type != 'public')
								<span class="btn btn-xs btn-alert">{{ $school->type }}</span>
							@else
								<span class="btn btn-xs btn-info">{{ $school->type }}</span>
							@endif
							<p> {{ $school->address }} </p>
						</div>
					</div>
				</div>
				@if ($i == 2 || $i == 5) </div> @endif
						@endforeach

		</div>
	</div>

	<div class="searchBar">
		<div class="col-lg-12 searchContent">
			<div class="input-group">
				<input id="searchKeyword" type="text" class="form-control" placeholder="@lang('menu.searchPlaceholder')">
				<span class="input-group-btn">
					<button id="btnSearch" class="btn btn-default" type="button">@lang('menu.searchBtn')</button>
				</span>
				{{--<span class="input-group-btn">--}}
					{{--<button class="btn btn-default" type="button" onclick="location.href='/search?detail=yes'" >Detail</button>--}}
				{{--</span>--}}
			</div>
		</div>
	</div>

	<!-- search -->
	<script>
		$("#btnSearch").on('click', function() {
			if ($("#searchKeyword").val() == '') {
				alert('@lang('menu.searchAlert')');
			}
			else {
				location.href='/search?keyword='+$('#searchKeyword').val()
			}
		});
	</script>

@endsection