Elep

@extends('layouts.base')

@section('stylesheets')
	@parent
	<link rel="stylesheet" href="/css2/main.css">
@endsection

@section('content')
    <div class="row place-list">
		<div class="col-sm-12 col-md-5 places-list-side">
			<form action="{{ route('placeSearch') }}" class="search-form nearby-form" id="nearby">
			    <div class="input-group">
			    	{{-- <div class="input-group-prepend">
			    		<select name="type" class="custom-select" style="width: 100%; border-radius: 0; margin: 0;">
			    			<option value="food">Food</option>
			    			<option value="place">Place</option>
			    		</select>
			    	</div> --}}
			        <input type="text" name="name" id="place" data-type="place" class="form-control place-find query" placeholder="Find place..." value="{{ $place ?? ''}}">
			        <div class="input-group-addon" style="padding: 0;">
			            <button class="btn btn-primary" style="border-radius: 0;">Find</button>
					</div>
				</div>
				{{-- <div id="optional-address">
					
					@isset ($add)
						<div class="option">
							<input type="hidden" class="lnglat" value="{{ $lnglat }}">
							<div class="form-check" style="margin-left: 25px; margin-top: 6px;">
								<input class="form-check-input location" id="location" type="checkbox" name="location" checked="true" value="{{ $add }}">
								
								<label class="form-check-label" for="location" style="padding-left: 10px;">
									{{ $add }}
								</label>
								<a href="#" class="enter-location">Change location</a>
							</div>
						</div>
					@else 
						<a href="#" class="enter-location">Enter location</a>
					@endisset
				</div> --}}
			</form>
			<table class="table table-striped">	
				<thead>
			        <tr>
			            {{-- <td>Img</td> --}}
			            <td>Name</td>
			            <td>Location</td>
			        </tr>
			    </thead>
			    <tbody>
			        @foreach ($places as $place)
			        {{-- @dump($place) --}}
						<tr>
							<td><a href="{{ route('places.show', ['id' => $place->slug]) }}" data-slug="{{ $place->slug }}" class="title-link">{{ $place->name }}</a></td>
							<td>
								{{ $place->address }}
							</td>
						</tr>
			        @endforeach
			        <tr>
			            <td colspan="3" class="text-center">
			                {{ $places->appends($_GET)->links() }}
			            </td>
			        </tr>
			    </tbody>
			</table>
		</div>
		<div class="col-sm-12 col-md-7 places-map">
			<div id="map"></div>
		</div>
	</div>
@endsection

@section('javascript')
	@parent
	<script src="{{ asset('js/vex.min.js') }}"></script>
	<script>vex.defaultOptions.className = 'vex-theme-plain';</script>
    <script>
    	var places = JSON.parse("{{ json_encode($places->items()) }}".replace(/&quot;/g, '"'));
	</script>
    <script src="{{ asset('js/initMap.js') }}"></script>
	<script>
		$(document).ready(function(){
			initMap(places);
			$(window).on('scroll', function(e){
				var win = $(this).scrollTop(),
					elemTop = $('#nearby').offset().top,
					elem = $('#nearby');
				if((elemTop-win) <= 0 && win > 25){
					if(!elem.hasClass('stick-top')){
						elem.addClass('stick-top')
					}else return;
				}else if(win < 25) {
					if(elem.hasClass('stick-top')){
						elem.removeClass('stick-top')
					}else {
						return;
					}
				}
			})

$('#place').on('keyup', function(e){
				search(e, function(name){
					setTimeout(function(){
						$('#nearby').submit();
					}, 0);
				})
			});
		})
	</script>
@endsection