Elep

@extends('layouts.base')

@section('nav')
	<nav class="navbar navbar-light bg-light">
		<a class="navbar-brand go-back" href="#"><i class="fa fa-arrow-left"></i> Home</a>
	</nav>
@endsection

@section('stylesheets')
@parent
<link rel="stylesheet" href="{{ asset('css2/vex.min.css') }}">
<link rel="stylesheet" href="{{ asset('css2/vex-theme-plain.css') }}">
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
<link rel="stylesheet" href="/css/place-list.css">
<style>
	.vex {
		z-index: 99;
	}

.vex-overlay {
		z-index: 98;
	}

.form-control {
		display: block;
		width: 100%;
		padding: .5rem .75rem;
		font-size: 1rem;
		line-height: 1.25;
		color: #495057;
		background-color: #fff;
		background-image: none;
		background-clip: padding-box;
		border: 1px solid rgba(0,0,0,.15);
		border-radius: 0;
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}

.btn-primary, .btn-primary:hover, .btn-primary:focus {
		font-weight: 700;
		color: white;
		border-color: #fed136;
		background-color: #fed136;
		font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		cursor: pointer;
		border-radius: 0;
	}
	
	.input-group .input-group-prepend, .place-find, .search-form .input-group-addon, .search-form button {
    	height: 50px;
    }

/* Main.css */
    
    .input-group-addon {
        border-radius: 0;
    }

/* End */

#optional-address {
		background: #fff;
		padding: 7px;
	}

a {
		color: #fed136;
	}
    
    .p-10 {
        padding: 10px;
	}

.home-address {
		position: relative;
	}
	
	.home-address > span {
        position: absolute;
        right: 15px;
		top: 30%;
		cursor: pointer;
	} 
	
	.featured-title-box span.tags {
		color: #9fa9b9;
		padding: 0;
	}

@media (max-width: 600px){
		.input-group-append {
			width: 25%;
			padding: 0;
		}

.input-group-append button {
			font-size: 14px;
		}

.btn-group2 {
			border-radius: 0;
		}
	}

.option {
		padding: 5px;
		padding-top: 0;
		/* padding-right: 3px; */
		/* border: 1px solid #ccc; */
		/* border-radius: 5px; */
		white-space: normal;
		display: inline-flex;
		overflow: auto;
		margin-right: 5px;
	}

.option-close {
		float: right;
		padding: 3px;
		cursor: pointer;
		color: red;
		margin: auto;
	}

</style>
	
@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="places-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>
		<div class="col-sm-12 col-md-7 places-map">
			<div id="map"></div>
		</div>
		@if (Auth::user() && Auth::user()->role === 'admin')
			<div class="footer" style="position: fixed; bottom: 0; right: 0; left: 0;display: flex;">
				<div class="footer-link"><span></span></div>
				<div class="footer-link"><a style="width: 100%; height: 100%;" href="/place/new"><span class="plus">+</span></a></div>
			<div class="footer-link"></div>
		@endif
		{{-- <div class="footer" style="position: fixed; bottom: 0; right: 0; left: 0;display: flex;">
			<div class="footer-link"><span></span></div>
			<div class="footer-link"><a style="width: 100%; height: 100%;" href="/place/new"><span class="plus">+</span></a></div>
			<div class="footer-link"></div>
		</div> --}}
@endsection

@section('javascript')
	@parent
	<script src="{{ asset('js/vex.min.js') }}"></script>
    <script>vex.defaultOptions.className = 'vex-theme-plain';</script>
    <script src="/js/searchInput.js"></script>
    <script>
		$(document).ready(function(){
			var state = {...deserialize(location.search)};

const placeTemplate = (place) => `
                <div class="col-sm-12 col-lg-12 col-xl-6 featured-responsive">
					<div class="featured-place-wrap">
						<a href="/places/${place.slug}" data-slug="${place.slug}">
							<div class="featured-title-box">
								<h6>${place.name}</h6>
								
								<p>${place.type ? place.type.charAt(0).toUpperCase() + place.type.slice(1) : ""}</p>
								<p class="list-address">${place.address}</p>
                                <div>
                                    ${place.food ? place.food
                                        .filter(
                                            food => {
                                                return true
                                            }).map(food => `<span class="badge badge-warning spaced">${food.name} - ${food.price}</span>`
                                    ).join(" ") : ''}
								</div>
								<span class="tags"><small>${place.tags && Array.isArray(place.tags) ? place.tags.map(tag => tag && "#" + tag.toLowerCase()).join(" ") : ""}</small></span>
								<ul>
									<li><span class="icon-location-pin"></span>
										<p>${place.address}</p>
									</li>
									<li><span class="icon-screen-smartphone"></span>
										<p>${place.telephone}</p>
									</li>
								</ul>
							</div>
						</a>
					</div>
				</div>
            `;

// placesList(document.getElementById('places-list'), placeTemplate, document.getElementById('paginate'), state);

var cleared;
			
			// Set up next page click listener
            $("#paginate").on("click", function(e) {
				const $target = $(e.currentTarget);
				$target.attr('disabled', true);
                state = {...state, page: parseInt(state.page)+1};
				pullstuff(state, loadPlaces);
				
			})
			
			// A utility function that takes 
			function pullstuff(state, fn){
				const load = document.getElementById('loading');
				load.style.display = "flex";
				fetchApi({...state})
				.then(places => {
					// console.log(places)
					fn(places)
				})
				.catch(error => console.log({error}))
				.finally(() => {
					load.style.display = "none";
				})
			}

function loadPlaces(places){
				const placesToAdd = places.map(place => placeTemplate(place)).join("")
				if (/Mobi|Android/i.test(navigator.userAgent)) {
					// mobile!
				}else {
					initMap(places)
				}

document.getElementById('places-list').innerHTML = placesToAdd;
            }

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