Elep

@extends('layouts.lists')

@section('meta')
    <meta content="Cravvings - Find restaurants, explore menus" property="og:title">
    <meta content="https://www.cravvings.com/" property="og:url">
    <meta content="Food and restaurant discovery at your fingertips." property="og:description">
    <meta content="https://www.cravvings.com/images/brand/cravvings_logo_white_bg.jpg" property="og:image">
    <meta content="1250" property="og:image:width">
    <meta content="750" property="og:image:height">
    <meta name="twitter:title" content="Cravvings - Explore Restaurants">
    <meta name="twitter:description" content="Food and restaurant discovery at your fingertips">
    <meta name="twitter:image" content="https://www.cravvings.com/images/brand/card_1.jpg">
    <meta name="twitter:image:width" content="1200">
    <meta name="twitter:image:height" content="630">
    <title>Cravvings - Find a place</title>
@show

@section('extracss')
	@parent
	<style>
		.search-wrapper {
			overflow-y: auto;
		}

.query-input {
			flex: 1;
			display: flex;
			box-shadow: 0 1px 18px rgb(0 0 0 / 15%);
			border-radius: 8px;
		}

.input-prepend {
			height: 48px;
		}

.input-prepend img {
			width: 20px;
		}

.search-page-form .query-input .place-search {
			padding: 0.5rem 0;
			border-left: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

.place-load {
			display: none;
		}

.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;
			max-width: 400px;
		}

.actual-result .search-place-image {
			width: 100%;
			min-height: 170px;
		}

.actual-result .search-place-image {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			background-repeat: no-repeat; 
			background-color: #f9f9f9; 
			background-position: center;
		}

.actual-result .place-title a {
			font-size: 1.1em;
		}

.actual-result .search-place-details p {
			font-size: 0.9em;
		}

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

.no-search-result {
			width: 80%;
			margin: 0 auto;
			text-align: center;
			font-size: 1.5rem !important; 
		}

.no-search-result a {
			color: var(--red);
			font-family: 'Gilroy Bold';
			font-size: 1.5rem !important; 
		}

@media (min-width: 900px) {
			.search-bar {
				width: 60%;
			}
		}

@media (max-width: 767px){
			.search-bar .place-search, .input-prepend {
				border-radius: 8px;
				height: 40px;
			}

.prepend-text {
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
			}

.outer-button {
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			}

.results-title h3 {
				margin-top: 10px;
			}
		}

.search-filters {
			white-space: nowrap;
			overflow-x: auto;
			-ms-overflow-style: none;
			scrollbar-width: none;
		}

.search-filters::-webkit-scrollbar {
			display: none;
		}

.like-place {
			background-color: transparent; 
			padding: 0; 
			padding-bottom: 8px; 
			border: 0;
		}

.search-response {
			font-size: 1.2rem;
			margin-bottom: 20px;
		}
	</style>
@endsection

@section('searchbar')
	@include('places.place_search_input', ['search_value' => false])
@endsection

@section('content')
    <div class="search-wrapper list-padding">
		{{-- <div class="search-filters">
			@foreach ($attrs as $name => $attr)
				<button type="button" class="button btn-circle place-attr" data-attr="{{ $attr }}">
					<span class="filter-text">{{ $name }}</span>
				</button>
			@endforeach
		</div> --}}
		<div class="search-list">
				
				<section class="search-actual-results">
					<div class="results-title" style="display: block">
						@if ($response)
							<p class="search-response">{{ $response }}</p>
						@endif
					    <h3 id="search-title">{{ !$response ? $search : 'Popular' }}</h3>
					</div>
					<div class="results-list" id="places-list">
						@if (count($places))
							@foreach($places as $place)
								@php
									$image_exists = isset($place['image']) && count($place['image']);
									$bg_size = $image_exists ? 'cover' : 'contain';
									$bg_image = $image_exists ? $place['image'][0] : '/images/resized/default.png';
								@endphp
								<div class="actual-result">
									<a href="/places/{{ $place['slug'] }}" data-slug="{{ $place['slug'] }}">
										<div class="search-place-image" style="background-size: {{ $bg_size }}; background-image: url({{ $bg_image }})">
										</div>
									</a>
									<div class="search-place-details">
										<div style="display: flex; justify-content: space-between; align-items: flex-start;">
											<a href="/places/{{ $place['slug'] }}" class="place-title" data-slug="{{$place['slug']}}" style="max-width: 90%;">{{$place->name}}</a>
											<button type="button" data-slug="{{ $place['slug'] }}" class="like-place"><i class="fa fa-heart{{ $place['liked'] ? '' : '-o'}}"></i></button>
										</div>
										<p class="place-address">{{$place['address']}}</p>
									</div>
								</div>
							@endforeach
						@else
							<h3 class="no-search-result">No places found. Search again or <a href="/place/suggest">suggest a place</a> we might not have listed.</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; 2023 Cravvings. All Rights Reserved.</p>
				</div>
			</div>
		</div>
	</footer>
@endsection
@section('gmap')
    
@endsection
   	@section('javascript')
		@parent
		<script>
			let getPlace = (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: 'cover'; background-image: url(${place['image'].length ? $place['image'][0] : '/images/resized/default.png'})">
						</div>
					</a>
					<div class="search-place-details">
						<div style="display: flex; justify-content: space-between; align-items: flex-start;">
							<a href="/places/${place['slug']}" class="place-title" data-slug="${place['slug']}" style="max-width: 90%;">${place['name']}</a>
							<button type="button" data-slug="${place['slug']}" class="like-place" style="background-color: transparent; padding: 0; padding-bottom: 8px; border: 0;"><i class="fa fa-heart${place['liked'] ? '' : '-o'}"></i></button>
						</div>
						<p class="place-address">${place['address']}</p>
					</div>
				</div>
			`;

var searchPlaces = (query) => {
				var url = `/api/place/search/${query}`;
				return doGet(url).then(places => places);
			};

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