@extends('layouts.list')

@section('meta')
	<meta content="Cravvings - {{ $searchTitle }}" property="og:title">
	<meta content="{!! $url !!}" property="og:url">
    <meta content="Find and review food from your favourite places" property="og:description">
    <meta content="{{ $image }}" property="og:image">
    <meta content="480" property="og:image:width">
    <meta content="360" property="og:image:height">
    <meta name="twitter:title" content="Cravvings - {{ $searchTitle }}">
    <meta name="twitter:description" content="Find and review food from your favourite places.">
    <meta name="twitter:image" content="{{ $image }}">
    <meta name="twitter:image:width" content="1200">
	<meta name="twitter:image:height" content="630">
	<meta name="search_token" value="{{ $token }}">
	<title>Cravvings - {{ $searchTitle }}</title>
@endsection

@section('extracss')

	<style>
		html, .search-list {
			scroll-behavior: smooth;
		}

		.search-top {
			width: 100%;
			z-index: 1000;
		}

		.search-options {
			display: flex;
			align-items: center;
			padding-right: 20px;
			justify-content: flex-end;
			padding: 5px;
		}

		.form-check {
			display: flex;
			padding-right: 5px;
			align-items: center;
		}

		.form-check {
			padding-left: 0;
		}

		.enter-location {
			color: var(--red);
		}

		.search-wrapper {
			display: grid;
		}

		.search-list {
			flex: 0 0 50%;
			padding: 0;
		}

		@media (max-width: 860px) {
			.search-wrapper {
				display: block;
			}
		}

		@media (min-width: 700px) {
			.search-top {
				padding: 0 2.5% 0;
			}

			.suggest {
				width: 80%;
			}

			.option .form-check-label {
				padding-left: 10px;
				padding-right: 10px;
			}
		}

		@media (min-width: 561px) {
			.search-list {
				max-height: 100vh;
				overflow-y: scroll;
				overflow-y: scroll;
				/* scrollbar-width: none; */
				/* -ms-overflow-style: none; */
			}
		}



		@media (min-width: 520px){
			.search-options {
				justify-content: flex-start;
				/*width: 100%;*/
				margin: 0 auto;
				border-top: 0;
				padding-left: 10px;
			}

			.enter-location {
				/* padding-left: 15px; */
			}
		}

		.search-options label {
			margin-bottom: 0;
			padding-left: 5px;
		}

		.vex, .vex-overlay {
			z-index: 1000;
		}

		.customVex .vex-content {
			border-radius: 0;
		}

		.fa.fa-times {
			color: red;
			padding-left: 10px;
		}

		#footer {
			display: none;
		}

		@media (max-width: 520px){

			.search-top {
                width: 100%;
                z-index: 1000;
                padding-right: 2.5%;
                padding-left: 2.5%;
                padding-top: 10px;
            }
		}

		@media (min-width: 500px){
			.actual-result hr {
				display: none;
			}
		}

		.top-of-page {
			position: fixed;
			right: 20px;
			bottom: 50px;
			border: none;
			display: none;
			z-index: 10000;
		}

		.button.top-of-page {
			background-color: var(--red);
			color: #fff;
			border-radius: 30px;
		}

		@media (min-width: 850px) {
			.top-of-page {
				right: 51%;
			}
		}
	</style>
@endsection

@section('content')
		<div class="search-wrapper">
				<div class="search-list">
					<section class="search-top">
					    <form action="/search" class="search-input location-form search-input search-page-form search-form" id="nearby">
					        <div class="address-input">
					            <input type="text" name="food" data-type="food" class="form-control" autocomplete="off" id="food" placeholder="What do you feel like eating?" />
					        </div>
					        <button class="button button-primary inline-button" style="padding: 10px 30px;">
								<i class="fa fa-search"></i>
							</button>
					    </form>
					    <div class="search-address optional-address" id="opt-add">

						</div>
						{{-- <div class="search-filters">
							<button class="button button-secondary btn-circle">Delivery</button>
							<button class="button button-secondary btn-circle">Delivery</button>
							<button class="button button-secondary btn-circle">Delivery</button>
						</div> --}}
					</section>

					<div class="search-actual-results" style="position: relative;">
						<div class="results-title">
						    <div id="search-title"></div>
						    {{-- <div class="search-options">
						    	<input class="check-input" name="delivery" type="checkbox" id="deliveryCheck" value="delivery">
						    	<label class="check-label" for="deliveryCheck">
						    	  Delivery
						    	</label>
						    </div> --}}
						</div>
						<div class="results-list" id="places-list">
							@for($i=0; $i<12; $i++)
								<div class="actual-result">
								    <div class="search-place-image">
								        <div class="skeleton-background"></div>
								    </div>
								    <div class="search-place-details">
								        <div class="search-highlight">
								            <div class="skeleton-background"></div>
								            <div class="skeleton-background"></div>
								            <div class="skeleton-background"></div>
								        </div>
								        <div class="place-title">
								            <h3><div class="skeleton-background"></div></h3>
								        </div>
								        <p class="place-address"><div class="skeleton-background"></div></p>
								        <hr>
								    </div>
								</div>
							@endfor
						</div>
						<button class="button button-secondary top-of-page" onclick="goToTop();"><i class="fa fa-arrow-up"></i></button>
					</div>
			        <div class="load-more">
						<i class="fa fa-spinner fa-spin"></i>
					</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>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-4 col-md-6">
										<div class="widget footer-widget">
											<!-- <h3 class="widget-title">Cravvings</h3> -->
											<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> --}}
				                                <li><a href="/contact">Contact Us</a></li>
											</ul>
										</div>
									</div>
									<div class="col-lg-3 col-md-6">
										<div class="widget footer-widget">
											<!-- <h3 class="widget-title">Services</h3> -->
											<ul class="footer-menu">
												<li><a href="/privacy">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">
											<!-- <h3 class="widget-title">Our Address</h3> -->
											<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>
				</div>
				<div class="places-map search-map" id="map" style="max-height: 100vh;">

				</div>
			</div>
 		@endsection


   	@section('javascript')
		@parent

			<script src="/js/searchInput.js"></script>
			<script src="/js/cravvings.js"></script>

		    <script>
				var state = {page: 1, ...deserialize(location.search)};
				var loadMore = document.querySelector('.load-more');
				var placeListContainer = document.getElementById('places-list');

				const placePicture = (place) => `
					<a href="/places/${place.slug}?q=${state.food || ''}" data-slug="${place.slug}" class="place-image">
		        		<div class="search-place-image" style="background-image: url(${place.image || '/images/cravvings.png'}); background-color: #F9F9F9; background-position: center; background-size: ${place.image ? 'cover' : 'contain'}; background-repeat: no-repeat">
		        		</div>
		        	</a>
				`

				const placeTemplate = (place) => {
		        	const searched = state.food;
					const truncated_address = place.address.slice(0, 50);
					const shown_address = `${truncated_address}${place.address.length > truncated_address.length ? '...' : ''}`
		        	return `
		        		<div class="actual-result">
		        		    ${place.image ? placePicture(place) : ''}
		        		    <div class="search-place-details">
								<div style="display: flex; justify-content: space-between;">
									<a class="place-title" href="/places/${place.slug}?q=${state.food || ''}" data-slug="${place.slug}">${place.name}</a>
									<button type="button" data-slug="${place.slug}" class="like-place" style="background-color: transparent; padding: 0; border: 0;"><i class="fa fa-heart${place.liked ? '' : '-o'}"></i></button>
								</div>
								<div>${starred(place.avg_rate)}</div>
								${place.phones && place.phones.length ? getPhones(place.phones) : ''}

								<p class="place-address">${shown_address || ''}</p>
								<div class="search-highlight">
		        		        	${place.food && state.food ? place.food.map(
		        		        		food => `<span class="badge badge-warning">${capitalize(food.name)}</span>`
		        		        	).join(" ") : ''}
		        		        </div>
								${place.delivery && place.delivery.length ? getDelivery(place.delivery) : ''}
		        		    </div>
		        		</div>
			        `;
				}

				function loadMap(list) {
					if (/Mobi|Android/i.test(navigator.userAgent)) {
						// mobile!
					}else {
						list.length && list[0]['coords'] && initMap(list, document.getElementById('map'), [state.longitude, state.latitude, state.address])
					}
				}

				function Places(places){
					console.log('reduce')
					return places.length
						? places.reduce((all, one) => all + placeTemplate(one), '')
						: '';
				}

				// const placeList = loadPlaces();

				const optAdd = document.getElementById('opt-add');
				optAdd.innerHTML = state.address ? optionTemplate(state.address) : '<a href="#" class="enter-location">Enter location</a>';

				document.getElementById('food').value = state.food ? state.food : "";
				// document.getElementById('deliveryCheck').checked = state.delivery || false;
				const phones = (phone) => `<a href="tel:${phone}">${phone}</a>`;
				const delivery = (delivery) => {
					if (delivery && delivery.length) {
						return `<div class="place-delivery">
									<i class="fa fa-motorcycle"></i>
									<span class="deliveries">
										${delivery.map(area => area).join(", ")}
									</span>
								</div>`
							;
					}

					return '';
				}

				var loading;
				var next = true;

				const loadMoreItems = () => {
					if (!loading && next) {
						loading = true;
						state = {...state, page: parseInt(state.page)+1};
						loadMore.style.display = 'block';
						pullstuff(state, placeList);
					}else {
						const results = document.querySelectorAll('.actual-result');
						if(!state.longitude && results.length >= 15) {
							loading = true;
							enterLocation();
						}
						document.querySelector('#footer').style.display = 'block';
					}
				}

				const footerHeight = document.getElementById('footer').offsetHeight + document.querySelector('.suggest').offsetHeight;
				var searchList = document.querySelector('.search-list')
				searchList.onscroll = () => {

					const scrolltop = searchList.scrollTop
					const resultHeight = searchList.offsetHeight
					const results = document.querySelectorAll('.actual-result');

					const loadingFrom = results[results.length-2]

					if(scrolltop > window.innerHeight) {
						document.querySelector('.top-of-page').style.display = 'block';
					}else {
						document.querySelector('.top-of-page').style.display = 'none';
					}

					if ((scrolltop+resultHeight  >= loadingFrom.offsetTop) && !loading) {
						loadMoreItems();
					}
				}

				window.onscroll = () => {
					if (window.innerWidth <= 520) {
						if(((window.innerHeight + window.scrollY) >= (document.body.offsetHeight)) && !loading) {
							loadMoreItems();
							document.querySelector('.top-of-page').style.display = 'block';
						}
					}
				}

				const placeList = (function (placeTem, wrapper){
					let page = 1;

					return function(places){
						console.log({places})
						const placesToAdd = places.data.map(place => placeTemplate(place)).join("")

						loadMap(places.data)
						next = places.next;
						if(page == 1){
							wrapper.innerHTML = places.data.length ? Places(places.data) : `<h5>We couldn't find ${state.food || 'anything'} around ${state.address}. Why don't you find something else or change location</h5>`;
							if(next === false && places.others && places.others.length){
								wrapper.innerHTML += '<h3 class="others"> - Other places nearby</h3>'
								wrapper.innerHTML += Places(places.others)
							}
						}else {
							wrapper.innerHTML += placesToAdd
						}

						document.querySelectorAll('.actual-result .like-place').forEach(likeButton => {
							likeButton.addEventListener('click', likePlace)
						});

						page++;

                        let response = '';

                        if (places.other && places.other.length) {
                            response = `<h5>Couldn't find any places with <em>${places.query}</em> but here are some other places near you</h5>`;
                        }else if (places.query) {
                            response = `<h3>${places.query}</h3>`;
                        }else {
                            response = '';
                        }

						document.querySelector('#search-title').innerHTML = response;
					}
				})(placeTemplate, placeListContainer);

				// A utility function that takes search params and a callback function
				// and passes it the list of places
				function pullstuff(state, handlePlaceList){
					fetchApi({...state})
					.then(places => {
						handlePlaceList(places)
					})
					.catch(error => console.log(error))
					.finally(() => {
						loading = false;
						loadMore.style.display = 'none';
					})
				}

				pullstuff(state, placeList);

				const getPhones = (phones) => `
					<div class="place-phones">
						<svg stroke="currentColor" fill="#222222" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M426.666 330.667a250.385 250.385 0 0 1-75.729-11.729c-7.469-2.136-16-1.073-21.332 5.333l-46.939 46.928c-60.802-30.928-109.864-80-140.802-140.803l46.939-46.927c5.332-5.333 7.462-13.864 5.332-21.333-8.537-24.531-12.802-50.136-12.802-76.803C181.333 73.604 171.734 64 160 64H85.333C73.599 64 64 73.604 64 85.333 64 285.864 226.136 448 426.666 448c11.73 0 21.334-9.604 21.334-21.333V352c0-11.729-9.604-21.333-21.334-21.333z"></path></svg>
						<a href="tel:${phones[0]}">${phones[0]}</a>
					</div>
				`;

				const getDelivery = (delivery) => `
					<span class="deliveries">
						<i class="fa fa-motorcycle"></i>
						${delivery.map(area => area).join(", ")}
					</span>
				`;

				function optionTemplate(add) {
					const truncated = add.slice(0, 27);
					const shown = `${truncated}${add > truncated ? '...' : ''}`
					return `
						<div class="option">
							<div class="form-check">
								<label class="form-check-label" for="option-location">
									<i class="fa fa-map-marker"></i> <span class="actual-address">${shown}</span>
								</label>
								<a href="#" class="enter-location">Change</a>
							</div>
						</div>
					`;
				}

				const starred = (avgRating) => {
					if(!avgRating) return '';
					let rat = "";
					const avg = avgRating && avgRating.rate ? avgRating.rate : avgRating;
					for (var i = 0; i < Math.floor(avg); i++) {
						rat += `<i class="fa fa-star"></i>`;
					}

					return rat;
				};

				function enterLocation(e){
					e && e.preventDefault();
					searchInput(state.address, state.food).then(loc => {
						state = {...state, ...loc};
						submit();
					}).catch(error => console.log(error))
				}

				document.querySelector('.enter-location').addEventListener('click', enterLocation)

				function submit(){
					var foodInput = document.getElementById('food').value;
					state = {...state, food: foodInput ? foodInput : "", page: 1};
					window.location.href = `/search?${serialize(state)}`
				}

				document.querySelector('.search-form').addEventListener('submit', function (e) {
					e.preventDefault();
					submit();
				})

				function goToTop() {
					searchList.scrollTop = 0;
					window.scrollTo(0, 0);
					document.querySelector('.top-of-page').style.display = 'none';
				}

				document.querySelector('.page-title a').addEventListener('click', function(e){
					e.preventDefault();
					goToTop();
				});



				// var loading;
				// var next = true;

				// const loadMoreItems = () => {
				// 	if (!loading && next) {
				// 		loading = true;
				// 		state = {...state, page: parseInt(state.page)+1};
				// 		loadMore.style.display = 'block';
				// 		pullstuff(state, placeList);
				// 	}
				// }

				// const footerHeight = document.getElementById('footer').offsetHeight + document.querySelector('.suggest').offsetHeight;
				// var searchList = document.querySelector('.search-list')
				// searchList.onscroll = () => {

				// 	const scrolltop = searchList.scrollTop
				// 	const resultHeight = searchList.offsetHeight
				// 	const results = document.querySelectorAll('.actual-result');

				// 	const loadingFrom = results[results.length-2]

				// 	if(scrolltop > window.innerHeight) {
				// 		document.querySelector('.top-of-page').style.display = 'block';
				// 	}else {
				// 		document.querySelector('.top-of-page').style.display = 'none';
				// 	}

				// 	if ((scrolltop+resultHeight  >= loadingFrom.offsetTop) && !loading) {
				// 		loadMoreItems();
				// 	}
				// }

				// window.onscroll = () => {
				// 	if (window.innerWidth <= 520) {
				// 		if(((window.innerHeight + window.scrollY) >= (document.body.offsetHeight)) && !loading) {
				// 			loadMoreItems();
				// 			document.querySelector('.top-of-page').style.display = 'block';
				// 		}
				// 	}
				// }

				// const placeList = (function (placeTem, wrapper){
				// 	let page = 1;

				// 	return function(places){
				// 		const placesToAdd = places.data.map(place => placeTemplate(place)).join("")

				// 		loadMap(places.data)
				// 		next = places.next;
				// 		if(page == 1){
				// 			wrapper.innerHTML = places.data.length ? Places(places.data) : `<h5>We couldn't find <span class="not-found">${state.food || 'anything'}</span> around <span class="not-found">${state.address}</span>. Why don't you find something else or change location</h5>`;
				// 			if(next === false && places.others && places.others.length){
				// 				wrapper.innerHTML += '<h3 class="others"> - Other places nearby</h3>'
				// 				wrapper.innerHTML += Places(places.others)
				// 			}
				// 		}else {
				// 			wrapper.innerHTML += placesToAdd
				// 		}

				// 		document.querySelectorAll('.actual-result .like-place').forEach(likeButton => {
				// 			likeButton.addEventListener('click', likePlace)
				// 		});

				// 		page++;

                //         let response = '';

                //         if (places.other && places.other.length) {
                //             response = `<h5>Couldn't find any places with <em>${places.query}</em> but here are some other places near you</h5>`;
                //         }else if (places.query) {
                //             response = `<h3>${places.query}</h3>`;
                //         }else {
                //             response = '';
                //         }

				// 		document.querySelector('#search-title').innerHTML = response;
				// 	}
				// })(placeTemplate, placeListContainer);

				// // A utility function that takes search params and a callback function
				// // and passes it the list of places
				// function pullstuff(state, handlePlaceList){
				// 	fetchApi({...state})
				// 	.then(places => {
				// 		handlePlaceList(places)
				// 	})
				// 	.catch(error => console.log(error))
				// 	.finally(() => {
				// 		loading = false;
				// 		loadMore.style.display = 'none';
				// 	})
				// }

				// pullstuff(state, placeList);
		    </script>
   	@endsection