Elep

@extends('layouts.plain')

@section('stylesheets')
    <style>
        .page-wrapper {

}

.review {
            width: 30%;
            margin-left: 20px;
        }

.review-main {
            padding: 10px;
            border-radius: 15px;
            background: #fff;
            /*display: grid;*/
            /*grid-template-rows: 150px 150px */
        }

.review-header {
            display: grid;
            width: 100%;
            grid-template-columns: 20% auto 15px;
            align-items: center;
            margin-bottom: 10px;
            /*height: 70px;*/
        }

.profile-dp img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

.profile-info p {
            font-size: 80%;
        }

.review-image {
            width: 100%;
            height: 250px;
            background-image: url('bg.jpg');
            background-position: center;
            background-size: cover;
            border-radius: 15px;
            margin-top: 10px;
        }

.review-footer {
            display: flex;
            
        }
    </style>
@endsection

@section('content')
    {{-- <div id="root"></div> --}}
    <div class="page-wrapper">
        <div class="reviews">
            @php
                $reviews = [1,2,3,4,5,6,7,8,9];
            @endphp
            @foreach ($reviews as $review)
                <div class="review">
                    <div class="review-main">
                        <div class="review-header">
                            <div class="profile-dp">
                                <img src="bg.jpg" 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">
                            
                        </div>
                        <div class="review-footer">
                            <a href="#">
                                <span class="fa fa-heart"></span>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </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>
		`;

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