@extends('layouts.list')

@section('extracss')
	<style>
		.page-item.disabled .page-link {
			height: 100%;
			font-size: 1.2rem;
		}

		.search-wrapper {
			display: block;
		}

		.search-list {
			max-height: 100%;
		}

		.results-list {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
			grid-gap: 15px;
		}

		.actual-result {
			display: block;
			/* margin-bottom: 30px; */
		}

		.actual-result .search-place-image {
			margin-bottom: 15px;
		}

		.actual-result .search-place-image {
			height: 200px;
			border-radius: 7px;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.search-input .search-inner {
			max-width: 100%;
			width: 100%;
		}

		.search-top .search-inner > .find-place-input-search {
			margin-top: 0;
		}

		.no-search-result {
			width: 80%;
			margin: 0 auto;
			text-align: center;
		}

		@media (max-width: 767px){
			.search-top {
				box-shadow: none;
			}	
		}

		@media (min-width: 767px) {
            .navbar {
                width: 90%;
            }
        }

		@media (max-width: 400px){
			.suggest-content > h3 {
				font-size: 20px;
			}

			.actual-result {
				margin-bottom: 0;
			}

			.actual-result .search-place-image {
				height: 160px;
			}
		}
	</style>
@endsection

@section('content')
    <div class="search-wrapper">
		<div class="search-list">
			<section class="search-top">
			    <form action="/places" class="search-input search-page-form" id="nearby">
			        <div class="address-input">
			            <input type="text" name="q" data-type="food" class="form-control place-search" id="food" autocomplete="off" placeholder="Enter restaurant name" value="{{ $query }}" />
			        </div>
			        <button class="button button-primary inline-button" style="padding: 10px 30px;">Find</button>
			    </form>
			</section>
				
				<section class="search-actual-results" style="margin: 0 auto; width: 95%">
					<div class="results-title" style="padding-top:22px;">
					    <h3 id="search-title">{{ $query ?: 'Popular' }}</h3>
					</div>
					<div class="results-list" id="places-list">
						@if (count($places))
							@foreach($places as $place)
								<div class="actual-result">
									<a href="/places/{{ $place['slug'] }}" data-slug="{{ $place['slug'] }}">
										<div class="search-place-image" style="background-repeat: no-repeat; background-color: #f9f9f9; background-position: center; background-size: {{ isset($place['image']) && count($place['image']) ? 'cover' : 'contain'  }}; background-image: url({{ isset($place['image']) && count($place['image']) ? $place['image'][0] : '/images/resized/default.png' }})">
										</div>
									</a>
									<div class="search-place-details">
										<div class="place-title">
											<h3><a href="/places/{{ $place['slug'] }}" data-slug="{{$place['slug']}}">{{$place->name}}</a></h3>
										</div>
										<p class="place-address">{{$place['address']}}</p>
									</div>
								</div>
							@endforeach
						@else
							<h3 class="no-search-result">No places found. Search again or suggest a place we might not have in our database.</h3>
						@endif
					</div>
				</section>
				
		</div>
	</div>
	<footer id="footer" class="footer-five">
		<div class="suggest-wrapper">
			<div class="suggest">
				<div class="suggest-image">
					<img src="/images/hanburg.svg" alt="Suggest a place">
				</div>
				<div class="suggest-content">
					<h3>Can't find a restaurant?</h3>
					<p class="suggest-text">Did we miss out your favourite restaurant? Our apologies! Suggest a place and we will make sure you see it the next time you search.</p>
					<a href="/place/suggest" class="button button-warning suggest-a-place">SUGGEST A PLACE</a>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="footer-inner wow pixFadeUp">
				<div class="row">
					<div class="col-sm-3 col-md-6">
						<img src="/images/icon.png" alt="" class="logo">
					</div>
				</div>
				<div class="row">
					<div class="col-lg-3 col-md-6">
						<div class="widget footer-widget">
							<ul class="footer-menu">
								<li><a href="/business/register">Register/Claim your business</a></li>
								<li><a href="#">How does Cravvings work?</a></li>
								<li><a href="#">About Us</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-3 col-md-6">
						<div class="widget footer-widget">
							<ul class="footer-menu">
								<li><a href="#">Privacy Policy</a></li>
								<li><a href="#">Terms of use</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-3 col-md-6">
						<div class="widget footer-widget">
							<ul class="footer-menu">
								<li><a href="https://instagram.com/cravvingsapp" rel="noreferrer" target="_blank"><i class="fa fa-instagram"></i> Instagram</a></li>
								<li><a href="https://twitter.com/cravvingsapp" rel="noreferrer" target="_blank"><i class="fa fa-twitter"></i> Twitter</a></li>
								<li><a href="https://facebook.com/cravvingsapp" rel="noreferrer" target="_blank"><i class="fa fa-facebook"></i> Facebook</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="site-info">
				<div class="copyright">
					<p>&copy; 2020 Cravvings. All Rights Reserved.</p>
				</div>
			</div>
		</div>
	</footer>
@endsection
   	@section('javascript')
		@parent
		<script>
			console.log('hello')
			document.addEventListener('DOMContentLoaded', function(){
				const placeSearch = document.querySelector('.place-search');
				autoComplete({
					input: placeSearch,
					fetch: async function(text, update) {
						text = text.toLowerCase();
						var response = await $.get(`/api/place/search/${text}`)
						console.log(response)
						var suggestions = response.filter(n => n.name.toLowerCase().includes(text))
						update(suggestions);
					},
					onSelect: function(item) {
						placeSearch.value = item.name;
					}
				});
			});
	    </script>
   	@endsection