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 - Explore</title>
@show

@section('extracss')
	@parent

@media (min-width: 1040px) {
            .search-wrapper {
                padding-left: 100px !important;
                padding-right: 100px !important;
            }
        }

.results-list {
			padding-bottom: 20px;
		}

.search-actual-results {
			padding-bottom: 70px;
		}

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

@media (max-width: 1040px) {
            .results-list {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }

.explore-image {
                height: 150px;
            }
        }

.actual-result {
			display: block;
			max-width: 400px;
            margin-bottom: 0;
		}

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

.actual-result .explore-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; 
			margin-top: 50px;
			margin-bottom: 50px;
		}

.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-wrapper {
                margin-top: 20px;
            }

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

.dropdown-toggle {
                padding: 0;
            }
		}

@media (max-width: 520px) {
            .list-padding {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

.results-list {
                grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
                grid-gap: 5px;
            }

.actual-result .explore-image {
                margin-bottom: 0;
				min-height: 115px;
                height: 115px;
				background-size: cover;
            }
        }

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

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

.search-filters button.active {
			background-color: #eee;
    		color: #222;
		}

.search-actual-results {
			margin-top: 0;
		}

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

.search-response {
			font-size: 1.2rem;
			margin-bottom: 20px;
		}

#footer.footer-five {
            margin-top: 20px;
            padding-top: 0;
        }

.fadein {
			animation: 500ms fadeIn ease-in-out;
		}
		.fadeout {
			animation: 500ms fadeOut ease-in-out;
		}

@keyframes fadeIn {
			0% {
				opacity: 0;
				transform: translateY(1.5rem);
			}
			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}

@keyframes fadeOut {
			0% {
				opacity: 1;
				transform: translateY(0);
			}
			100% {
				opacity: 0;
				transform: translateY(1.5rem);
			}
		}

.popup-container {
			display: block;
			position: absolute;
			top: 0;
			width: 100%;
		}

.vex-content {
			padding: 0;
		}
		
		.vex-close {
			position: absolute;
			right: 20px;
			font-size: 40px;
			cursor: pointer;
			color: #fff;
		}

.details-popup {
			display: flex; 
			/* gap: 20px; */
			height: 60vh;
			min-height: 240px;
			max-height: 450px;
			width: 750px;
			min-width: 300px;
			max-width: 80vw;
			border-radius: 12px;
		}

.explore-popup-image {
			background-position: center;
		}

.explore-popup-text {
			padding: 20px;
		}

.explore-popup-text img {
			width: 25px;
			/* object-fit: cover; */
		}

.explore-popup-text---detail {
			display: flex;
			gap: 10px;
		}

.explore-popup-text .text-title {
			font-family: 'Gilroy Medium', sans-serif;
		}

.explore-popup-image {
			flex: 2;
		}

.explore-popup-text {
			flex: 1;
		}

.explore-popup-image img {
			width: 100%;
			height: 100%;
		}

.place-address {
			font-size: 0.8rem;
			padding-left: 35px;
		}

.interactions {
			margin-top: 10px;
			display: flex;
			gap: 5px;
			padding-left: 30px;
		}

.interactions button {
			background: none;
			border: none;
			padding: 0 3px;
			cursor: pointer;
		}

.interactions .fa, .interactions .social-share .fa {
			/* display: none; */
			font-size: 20px;
		}

.social-share {
			display: flex;
			gap: 7px;
		}

.hide {
			display: none;
		}

@media (max-width: 700px) {
			.vex-content {
				margin: 0;
				border-radius: 0;
				border-bottom-left-radius: 10px;
    			border-bottom-right-radius: 10px;
				width: 100%;
			}

.details-popup {
				flex-direction: column;
				height: 100vh;
				width: 100%;
				max-width: 100%;
				border-radius: 0;
			}

.explore-popup-image {
				height: 200px;
				width: 100%;
			}

.gradient-top {
				width: 100%;
				height: 50px;
				/* background: linear-gradient(180deg,#000000b3,#0000004d 72.92%,#0000); */
			}

.interactions {
				margin-top: 5px;
			}
		}

#loaders {
			width: 48px;
			height: 48px;
			margin: 0 auto;
			border: 5px solid #FFF;
			border-bottom-color: var(--red);
			border-radius: 50%;
			display: flex;
			box-sizing: border-box;
			animation: rotation 1s linear infinite;
		}

@keyframes rotation {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}

.add-explore {
			position: fixed;
			bottom: 30px;
			right: 30px;
		}

.add-explore img {
			width: 40px;
			height: 40px;
		}

@media (max-width: 767px) {
			.add-explore {
				bottom: 70px;
			}
		}
	</style>
@endsection

@section('searchbar')
	@include('places.place_search_input', ['search_value' => true, 'search' => $query, 'route' => 'explore'])
@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 tag" 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> --}}
					@if (!$results)
					{{-- @dump($pictures) --}}
						<h3 class="no-search-result">No results found matching <span style="font-style:italic">{{ $query }}</span>. Search again or <a href="/explore/add">contribute by sharing an experience</a>.</h3>
						
					@endif
					<div class="results-list" id="places-list">
						@foreach($pictures as $picture)
							<div class="actual-result">
								<a href="#" data-slug="#">
									<div class="explore-image" style="background-size: cover; background-image: url({{ $picture['resized'] }})" 
										data-id="{{$picture['_id']}}" 
										data-food="{{$picture['food'] ?? ''}}" 
										data-food_id="{{$picture['food_id'] ?? ''}}" 
										data-place="{{$picture['place_name']}}" 
										data-place_slug="{{$picture['place_slug']}}" 
										data-place_address="{{$picture['place_address'] ?? ''}}" 
										data-liked="{{$picture['liked'] ?? ''}}" 
										data-image="{{$picture['image']}}">
									</div>
								</a>
							</div>
						@endforeach
					</div>
					@if ($results)
					{{-- @dump($pictures) --}}
						<div id="loaders"></div>
						
					@endif
					
					
				</section>
		</div>
		<div class="add-explore">
			<a href="{{ route('add_explore_food') }}" target="_blank"><img src="/images/icons/plus-bold-icon.svg" alt="Add Icon"></a>
		</div>
	</div>
@endsection
@section('gmap')
    
@endsection
@section('javascript')
	@parent
	<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
	<script src="/js/vex.min.js"></script>
	<script>
		var state = deserialize(location.search);
		var loadMore = document.querySelector('.load-more');
		var placeListContainer = document.getElementById('places-list');
		let getPlace = (picture) => `
			<div class="actual-result">
				<a href="#" data-slug="#">
					<div class="explore-image" style="background-size: cover; background-image: url(${ picture['resized'] })"
						data-id="${ picture['_id'] }" 
						data-food="${ picture['food'] ? picture['food'] : ''}" 
						data-food_id="${ picture['food_id'] ? picture['food_id'] : ''}" 
						data-place="${ picture['place_name']}" 
						data-place_slug="${ picture['place_slug']}" 
						data-liked="${ picture['liked']}" 
						data-place_address="${ picture['place_address'] ? picture['place_address'] : ''}" 
						data-image="${ picture['image']}">
					</div>
				</a>
			</div>
		`;

let page = 1;
		
		let perPage = 24;

var controller = new ScrollMagic.Controller();

return `
				<div class="social-share hide">
					<a href="${twitter}" style="color: #1DA1F2;" target="_blank"><i class="fa fa-twitter"></i></a>
					<a href="${whatsapp}" style="color: #25D366;" target="_blank"><i class="fa fa-whatsapp"></i></a>
					<a href="${facebook}" style="color: #4267B2;" target="_blank"><i class="fa fa-facebook-official"></i></a>
				</div>
			`
		}

const foodDetail = (food) => `
			<div class="explore-popup-text---detail">
				<img src="/images/icons/food-icon.png"/>
				<a href="/review/${food.place_slug}/${food.food_id}" class="text-title">${food.food}</a>
			</div>
		`

// const likeExplore = (e) => {
		// 	console.log(e.target)
		// }

function toggleShareOptions(target) {
			target.closest('.interactions').querySelector('.social-share').classList.toggle('hide')
		}

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

if (res.payload.length) {
						document.querySelector('#places-list').innerHTML = res.payload.map(picture => getPlace(picture)).join('');
					}
				})
				
			});
		});
    </script>
@endsection