@extends('layouts.base')

@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="/css2/place.css">
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Tangerine&display=swap" rel="stylesheet"> 
@endsection

@section('content')
    <div class="hero">
		<h1>{{ $place->name }}</h1>
	</div>
	<div class="place-map" id="map"></div>
	<section class="reserve-block" id="place-details">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>{{ $place->name }}</h5>
                    <p class="reserve-description">{{ $place->address }}</p>
                </div>
                <div class="col-md-6 review-wrapper">
                    <div class="reserve-seat-block">
                        <div class="reserve-rating">
							<span class="rating-num {{ isset($place->stars) ? '' : 'no-display' }}">{{ $place->stars }}</span>
						</div>
                        <div class="review-btn">
                            <a href="#" class="btn btn-outline-danger rate-place">WRITE A REVIEW</a>
							<span>{{ $place->rating ? count($place->rating) : 0 }} reviews</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
	<div class="menu-container">
		<div class="inner-container">
			<div class="menu-title">
				{{-- <span class="menu-title---main">{{ $place->name }}</span> --}}
				<h1 class="menu-title--sub">Menu</h1>
				<p style="color: #e9b947; font-style: italic;">Click on a food item to leave a review</p>
			</div>
			<div id="modal">
			</div>
	        <div class="place-foods containers">
				@if ($place->food)
					@foreach ($place->food as $food)
						@isset ($food['name'])
							@php
								if ($food['rating'] && $reviewCount = count($food['rating'])) {
									$total = array_reduce($food['rating'], function($cum, $review){
										return $cum + intval($review['rate']);
									}, 0);
									$rating = number_format($total/$reviewCount, 1);
								}else {
									$reviewCount = 0;
								}
							@endphp
						    <div class="food-item review-wrapper" data-name="{{ $food['name'] }}" data-place="{{ $place->name }}">
						    	<span class="title">
									<span class="food-name-rating">
										<span class="food-name "><a data-name="{{ $food['name'] }}" class="rate-food" href="#modal">{{ $food['name'] }}</a></span>
										<span class="rating-num {{ $reviewCount ? '' : 'no-display' }}">{{ $rating ?? "" }}</span>
										@auth('admin')
											<a href="#modal" class="edit-food" data-id="{{ $food["name"] }}">Edit</a>
										@endauth
									</span>
						    		<span class="price">
						    			{{ $food['price'] }} 
						    		</span>
						    	</span>	
						    	<span class="tags">	
						    		 <div class="comments">
						    		 	<span class="food-description">
											{{ isset($food['description']) && strlen($food['description'])>2 ? $food['description'] : "" }}
										</span>
						    		 	@if ($reviewCount)
										 	<a href="#modal" class="pull-right open-comments">{{ $reviewCount }} reviews</a>
										@endif
						    		 </div>
						    	</span>
						    </div>
						@endisset
						{{-- @dump($food) --}}
					@endforeach
				@endif
			</div>
		</div>
	</div>
@endsection

@section('javascript')
	<script src="/js/jquery.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyAJsPhI-fGmDBIUh9yLu_MiUj4hZ2nlWU8"></script>
	<script src="{{ asset('js/utility.js') }}"></script>
	<script src="{{ asset('js/vex.min.js')}}"></script>
	<script>vex.defaultOptions.className = 'vex-theme-plain';</script>
	<script>
		const {location: loc, name, slug, address} = JSON.parse("{{ $place }}".replace(/&quot;/g,'"'));
		// console.log(loc, name, slug, address)
		var lat = loc.coordinates[1]
		var lng = loc.coordinates[0]
		var options = {
			zoom: 16,
			center: { lat, lng }
		}

		var vexInstance;

		var map = new google.maps.Map(document.getElementById('map'), options)

		var infoWindow = new google.maps.InfoWindow()
		var html = `<b><a href='https://www.google.com/maps/search/${plusEncode(address)}'>${name}</a> </b> <br/>${address}`;
		var marker = new google.maps.Marker({
			map: map,
			position: {lat, lng}
		});

		google.maps.event.addListener(marker, 'click', function() {
			infoWindow.setContent(html);	
			infoWindow.open(map, marker);
		});

		const getRating = async (link) => {
			var temp = await doFetch(link, {redirect: 'follow', headers: { 'Content-Type': 'text/plain'}});
			vexInstance = vex.open({ 
				unsafeContent: temp,
				showCloseButton: false
			});
		}

		var food_wrapper;

		$('.rate-food').on('click', e => {
			e.preventDefault();
			var $target = $(e.currentTarget);
			food_wrapper = $target.closest('.review-wrapper');
			var foodname = $target.data('name').split(" ").join("+");
			
			getRating(`/food/${slug}/${foodname}/rate`);
		})

		$('.rate-place').on('click', e => {
			e.preventDefault();
			food_wrapper = $(e.currentTarget).closest('.review-wrapper');
			getRating(`/place/${slug}/rate`);
		})

		$(document).on('change', '.rate input', function(e){
			$('.comment-box').focus();
		})

		$('.open-comments').on('click', function(e){
			e.preventDefault();
			var $targ = $(e.currentTarget);
			var food = $targ.closest('.food-item').data('name');
			getRating(`/rating/${slug}/${food}`);
		});

		var editFood = (name, price, description) => `
			<form action="#" class="edit-form">
				<div class="item">
					<div class="form-group suggest">
						<input type="hidden" name="oldname" value="${name}">
						<input type="text" data-type="food" name="name" class="form-control food-name" value="${name}" autocomplete="off">
					</div>
					<div class="form-group suggest price-check">
						<input type="text" name="price" class="form-control price" value="${price}" autocomplete="off">
					</div>
					<div class="form-group suggest">
						<textarea class="form-control" name="description">${description}</textarea>
					</div>
					<div>
						<button class="btn btn-primary remove-current-item">Update</button>
					</div>
				</div>	
			</form>
        `;

		$('.edit-food').on('click', function(e){
			e.preventDefault();
			food_wrapper = $(e.currentTarget).closest('.food-item');
			var foodName = food_wrapper.find('.food-name').text()
			var foodPrice = food_wrapper.find('.price').text()
			var description = food_wrapper.find('.food-description').text()
			vexInstance = vex.open({ 
				unsafeContent: editFood(foodName.trim(), foodPrice.trim(), description.trim()),
				showCloseButton: false
			});
		})

		$(document).on('submit', '.edit-form', function(e){
			var form = serializeForm(e);
			doFetch(`/api/food/${encodeURIComponent(slug)}`, {method: 'PUT', body: form})
				.then(response => {
					if(response && response.count){
						food_wrapper.find('.food-name').text(response.name)
						food_wrapper.find('.price').text(response.price)
						food_wrapper.find('.food-description').text(response.description)
						vex.close(vexInstance)
					}
				})
		})

		$(document).on('submit', '.ratings', function(e){
			const $target = $(e.currentTarget)
			const link = $target.attr('action');
			var rating = serializeForm(e);
			doFetch(link, {
			  method: 'POST',
			  body: rating
			}).then(response => {
				console.log({response})
				if (response.length) {
					var total = response.reduce((cum, cur) => {
						return cum + parseInt(cur.rate);
					}, 0)
					console.log(total)
					food_wrapper.find('.rating-num').html(Math.round((total/response.length)*10)/10).removeClass('no-display')
				}
				$target[0].reset()
				$target.find('button').attr('disabled', false).html('Rate');
				vex.close(vexInstance)
			})
		})
	</script>
@endsection