@extends('layouts.topnav')

@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-wrapper {
			display: grid;
		}

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

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

		@media (min-width: 561px) {
			.search-list {
				max-height: 100vh;
				overflow-y: scroll;
				overflow-y: scroll;
			}
		}

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

		#footer {
			display: none;
		}

		@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%;
			}
		}

		.prepend-text span {
            font-family: 'Gilroy Semi Bold', sans-serif;
        }

        .prepend-text img {
            display: none;
        }

		@media (min-width: 900px) {
            .food-input > .input-control {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .input-control {
                font-size: 1rem !important;
            }

            .prepend-text {
                font-size: 1.0rem;
            }

            .address-input .prepend-text {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-left: 0;
            }
		}

		@media (max-width: 1100px) {
			.search-bar .input-control, .submit-button, .prepend-text {
                height: 40px !important;
                font-size: 0.9rem !important;
            }

            .prepend-text {
                padding: 0.5rem 0.5rem;
            }

            .prepend-text span {
                display: none;
            }

            .prepend-text img {
                display: flex;
                width: 20px;
            }
		}

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

            .food-input, .address-input, .submit-button {
                border-radius: 8px;
                box-shadow: 0 1px 18px rgb(0 0 0 / 15%);
            }

            .food-input {
                margin-bottom: 5px;
            }

            .search-bar .input-control, .submit-button, .prepend-text {
                border: none;
                height: 40px !important;
                font-size: 0.9rem !important;
            }

            .prepend-text {
                border-right: none;
            }

            .search-bar .input-control {
                border-bottom-left-radius: 8px;
                border-top-left-radius: 8px;
            }

            .search-bar .address-input {
                display: none;
            }

            .search-bar .address-input .input-control {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .outer-button {
                display: none;
            }

            #address.input-control {
                padding-right: 10px;
            }

            .search-bar .address-input .inner-button {
                display: flex;
                position: relative;
            }
		}

		.search-highlight .badge {
			font-size: 0.9rem;
		}

		.search-bar {
			margin-bottom: 10px;
			margin-top: 10px;
		}
	</style>
@endsection

@section('searchbar')
	<form action="/search" class="location-form search-input search-page-form search-form">
		<div class="food-input">
			<div class="input-prepend">
				<span class="prepend-text">
					<span>Food</span>
					<img src="/images/icons/search-food.png" alt="search food">
				</span>
			</div>
			<input type="text" name="food" class="input-control" id="food" value="{{ $food }}" placeholder="what to eat" autocorrect="off" />
		</div>
		<div class="address-input">
			<div class="input-prepend">
				<span class="prepend-text">
					<span>Where</span>
					<img src="/images/icons/search-location.png" alt="search location">
				</span>
			</div>
			<input type="text" name="address" class="input-control" id="address" value="{{ $location }}" placeholder="Yaba, Opebi, Lekki..." />
			<button class="button button-primary inline-button inner-button submit-button btn-circle">
				<i class="fa fa-search"></i>
			</button>
		</div>
		<input type="hidden" id="longitude" name="longitude"><input type="hidden" id="latitude" name="latitude">
		<button class="button button-primary inline-button outer-button submit-button btn-circle">
			<i class="fa fa-search"></i>
		</button>
	</form>
@endsection

@section('content')
		<div class="search-wrapper">
				<div class="search-list list-padding">
					{{-- <div class="search-filters">
						<button class="button button-secondary btn-circle"><span class="filter-text">Delivery</span></button>
						<button class="button button-secondary btn-circle"><span class="filter-text">Delivery</span></button>
						<button class="button button-secondary btn-circle"><span class="filter-text">Delivery</span></button>
					</div> --}}

					<div class="search-actual-results" style="position: relative;">
						<div class="results-title">
						    <div id="search-title"></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>
								        <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">
											<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">
											<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/vex.min.js"></script>
			<script src="/js/mainsearch.js"></script>
			{{-- <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 class="search-place-details---title" 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 class="place-rating">${starred(place.avg_rate)}</div>
								<div class="place-phones">
									${place.phones && place.phones.length ? getPhones(place.phones) : ''}
								</div>

								<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>
								
		        		    </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();

				// 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);
					}
				}

				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>
				`;

				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;
				};

				document.querySelector('.food-input>.input-control').addEventListener('focus', function(e) {
					document.querySelector('.address-input').style.display = 'flex';
				})

				// document.querySelector('.food-input>.input-control').addEventListener('blur', toggleAddressInput);
				// document.querySelector('.address-input>.input-control').addEventListener('blur', toggleAddressInput);

				function toggleAddressInput(e) {
					let address_container = document.querySelector('.address-input');
					let food_container = document.querySelector('.food-input');
					setTimeout(function() {
						if (address_container.querySelector('input') != document.activeElement && 
							address_container.querySelector('.submit-button') != document.activeElement &&
							food_container.querySelector('input') != document.activeElement) 
						{
							document.querySelector('.address-input').style.display = 'none';
						}
					}, 0)
				}

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