Elep

@extends('layouts.base')

@section('stylesheets')
    @parent
    <link rel="stylesheet" href="/css/place-list.css">
    
@endsection

@section('content')
    <div class="row place-list">
		<div class="col-sm-12 col-md-5 places-list-side">
			<div class="row light-bg detail-options-wrap" id="food-list">
				@for($i=0; $i<12; $i++)
					<div class="col-sm-12 col-lg-12 col-xl-6 featured-responsive">
						<div class="featured-place-wrap">
							<div class="featured-title-box">
								<div class="skeleton-background"></div>
								<div class="skeleton-background"></div>
								<div class="skeleton-background"></div>
								<ul>
									<li><span class="icon-location-pin"></span>
										<div class="skeleton-background"></div>
									</li>
									<li><span class="icon-screen-smartphone"></span>
										<div class="skeleton-background"></div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				@endfor
            </div>
            <div class="load-more" style="margin: 10px 0; text-align: center;">
                <button class="btn btn-warning" id="paginate">Load More</button>
            </div>
		</div>
		<div class="col-sm-12 col-md-7 places-map">
			<div id="map"></div>
        </div>
    </div>
    <div class="footer" style="position: fixed; bottom: 0; right: 0; left: 0;display: flex;">
        <div class="footer-link"><span>s</span></div>
        <div class="footer-link"><a href="#" class="plus">+</a></div>
        <div class="footer-link"><span class="ta ta-target get-location"></span></div>
    </div>
@endsection

@section('javascript')
    @parent
    <script src="/js/places-list.js"></script>
    <script>
        $(document).ready(function(){
            var state = {page: 1, ...deserialize(location.search)};

const foodTemplate = (food) => `
                <div class="col-sm-12 col-lg-12 col-xl-6 featured-responsive">
					<div class="featured-place-wrap">
                        <a href="/food/${food.place_id}" data-slug="${food.place_id}">
                            ${food.image ? `<img src="${food.image}" class="img-fluid">` : ""}
							${food.rating && food.rating.length ? `<span class="featured-rating-orange ">${(food.rating.reduce((acc, cur) => acc + cur.rate, 0)/food.rating.length).toFixed(1)}</span>` : ''}
							<div class="featured-title-box">
								<h6>${food.name}</h6>
								
								<p>${food.type ? food.type.charAt(0).toUpperCase() + food.type.slice(1) : ""}</p>
								<p class="list-address">${food.description}</p>
							</div>
						</a>
					</div>
				</div>
            `;

var cleared;

$("#paginate").on("click", function() {
                state = {...state, page: parseInt(state.page)+1};
                pullstuff(state, foodTemplate, fn);
            })

function fn(places, next, prev){
                if(!cleared){
                    document.getElementById('food-list').innerHTML = places;
                    cleared = true;
                }else document.getElementById('food-list').innerHTML += places;

if(!next) document.querySelector('.load-more').innerHTML = ""
            }

pullstuff(state, foodTemplate, fn);
        })
    </script>
@endsection