Elep

@extends('layouts.base')

@section('nav')
	
@endsection

@section('stylesheets')
{{-- @parent --}}
<link href="/css/bootstrap44.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
	<link rel="stylesheet" href="/css/feed.css">
@endsection

@section('content')
	<div class="review-wrapper">
		<div class="review-filters">
			<div class="review-filters__inner">
				
				<ul class="filter-list">
					<li><h3><a href="/"><i class="fa fa-home"></i> Home</a></h3></li>
					<li><h3><a href="#"><i class="fa fa-heart"></i> Likes</a></h3></li>
					<li><h3><a href="#"><i class="fa fa-user"></i> Profile</a></h3></li>
					<li><h3><a href="#"><i class="fa fa-gear"></i> Settings</a></h3></li>
					<li><h3><a href="#"></a></h3></li>
				</ul>
			</div>
		</div>
	    <div class="review-feed">
	        <div class="review-list">
	            <div class="review-item">
	                <div class="review-image">
	                    
	                </div>
	                <div class="review-comment">
	                    <h4 class="review-item__name"><div class="skeleton-background"></div></h4>
	                    <p class="review-item__place">
	                        <i class="fa fa-map-marker"></i>
	                        <span class="review-item__place__name"><div class="skeleton-background"></div></span>
	                    </p>
	                    <div class="review-item__rating">
	                        <div class="skeleton-background"></div>
	                    </div>
	                    <hr />
	                    <p class="review-item__text">
	                        <div class="skeleton-background"></div>
	                        <div class="skeleton-background"></div>
	                        <div class="skeleton-background"></div>
	                    </p>
	                    <div class="review-item__user">
	                        <div class="skeleton-background" class="review-item__user__img"></div>
	                        <h5 class="review-item__user__name"><div class="skeleton-background"></div></h5>
	                    </div>

</div>
	            </div>
	        </div>
	    </div>
	    <div class="right-side">
	    	<div class="review-filters__inner">
	    		<div class="user-profile">
			    	<div class="profile-side">
			    		<div class="profile-details">
			    			@auth
			    				<div class="profile-pic">
			    					<img src="{{ Auth::user()->avatar ?: '/images/logged-in.png' }}" alt="User profile">
			    				</div>
								<div class="profile-content">
									<h5 class="user-name">{{ Auth::user()->name }}</h5>
								</div>
								<a href="/logout">Logout</a>
							@else
								<div class="profile-pic">
			    					<img src="/images/user.png" alt="User profile">
			    				</div>
			    				<div class="profile-content">
			    					<h5 class="user-name">Log in/Register</h5>
			    				</div>
			    				<div class="login">
			    					<div class="social-icon">
			    					    <a href="{{ route('socialLogin', ['provider' => 'facebook']) }}"><img src="{{ asset('images/facebook.svg') }}" alt="Facebook"></a>
			    					</div>
			    					<div class="social-icon">
			    					    <a href="{{ route('socialLogin', ['provider' => 'twitter']) }}"><img src="{{ asset('images/twitter.svg') }}" alt="Twitter"></a>
			    					</div>
			    					<div class="social-icon">
			    					    <a href="{{ route('app_login') }}"><img src="{{ asset('images/mail.svg') }}" alt="Email"></a>
			    					</div>
			    				</div>
			    			@endauth
			    		</div>
			    	</div>
			    </div>
			    <div class="place-search">
			    	<div class="place-search__inner">
			    		<h5>Leave a review?</h5>
			    		<form action="/places" class="search-input wow pixFadeUp" data-wow-delay="0.7s" data-pixsaas="search-subscribe">
			    		    <div class="search-inner home-place-search">
			    		        <div class="inputs">
			    		            <div class="row">
			    		                <div class="col-sm-12 food-cont">
			    		                    <input type="text" name="query" class="form-control full-search-rad" data-type="place" id="place-search" placeholder="Chicken Republic, The Place">
			    		                </div>
			    		            </div>
			    		        </div>
			    		        <button type="submit" id="search-submit" class="search-submit"><span>Look up</span> <i class="fas fa-spinner fa-spin"></i></button>
			    		    </div>
			    		    <div class="clearfix"></div>
			    		    <div class="form-result alert" style="display: none;">
			    		        <div class="content"></div>
			    		    </div>
			    		</form>
			    	</div>
			    </div>
	    	</div>
	    </div>
		
	</div>
	<div class="footers" style="position: fixed; bottom: 0; right: 0; left: 0;display: flex;">
        <div class="footers-link"><span></span></div>
        <div class="footers-link"><a style="width: 100%; height: 100%;" href="/place/new"><span class="plus">Leave a review</span></a></div>
          <div class="footers-link"><a style="width: 100%; height: 100%;" href="/admin/login"></a></div>
      </div>
@endsection

@section('javascript')
	@parent
	<script src="/js/search.js"></script>
	<script>
		const feed = {
			feedData: [],
			page: 1,
			init: function(){
				fetchApi({page: this.page}).then(feed => {
					console.log(feed)
					this.feedData = feed;
					this.loadFeed();

}).catch(error => console.log(error));
			},
			loadFeed: function(){
				$('.review-list').html(this.feedData.map(data => reviewTemplate(data)).join(""))
			}
		}

// const reviewTemplate = (review) => `
		// 	<div class="review-item">
		// 		<div class="review-item__user">
		// 			<div class="reviewer-name">
		// 				<p class="review-item__user__name">${review.rating[0].nickname}</p>
		// 				<p><i class="fa fa-map-marker"></i> ${review.rating[0].place_name}</p>
		// 			</div>
		// 		    <img src="${review.rating[0].avatar ? review.rating[0].avatar : '/images/user.png'}" alt="User" class="review-item__user__img">
		// 		</div>
		// 	    <div class="review-image">
		// 	        <img src="${review.rating[0].image}" alt="">
		// 	    </div>
		// 	    <div class="review-comment">
		// 	        <h5 class="review-item__name"><a href="/places/${review.place_slug}?q=${review.name}">${review.name}</a></h5>
			        
		// 	        <div class="review-item__rating">
		// 	            ${starTemp(review.rating[0].rate)}
		// 	        </div>
			        
		// 	        <p class="review-item__text">
		// 	            ${review.rating[0].comment}
		// 	        </p>

// 	    </div>
		// 	</div>
		// `;

const reviewTemplate = review => `
			<div class="review-main">
				<div class="review-header">
					<div class="profile-dp">
						<img src="${review.rating[0].avatar ? review.rating[0].avatar : '/images/user.png'}" alt="Profile photo">
					</div>
					<div class="profile-info">
						<h5 class="profile-name">James Lucas</h5>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
				<div class="review-text">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sed, eum quia?
				</div>
				<div class="review-image" style="background-image: url(${review.rating[0].image})">
					
				</div>
				<div class="review-footer">
					<div class="left-side">
						<a href="#">
							<i class="fa fa-thumbs-up"></i>
						</a>
						<a href="#">
							<i class="fa fa-heart"></i>
						</a>
					</div>
					<div class="right-side">
						<a href="#">
							20 comments
						</a>
					</div>
				</div>
			</div>
		`

feed.init();

$('#place-search').on('keyup', function(e){
          const target = $(e.currentTarget);
          const query = target.val();
          if(query.length > 3){
            // target.autocomplete({
            //   source: Object.keys(searchlist).filter(results => results.toLowerCase().includes(query.toLowerCase()))
            // })
            search(e, function(results){
              console.log(results)
            });
          }
        })
	</script>
@endsection