@extends('layouts.base')

@section('stylesheets')
	<link href="/css/bootstrap.min.css" rel="stylesheet">

	<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Chilanka|Nunito" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="/css2/layout.css">
	<link rel="stylesheet" href="/css/autocomplete.css">
	<link href="{{ asset('css2/vex.min.css') }}" rel="stylesheet">
	<link href="{{ asset('css/style.css') }}" rel="stylesheet">
	<link href="{{ asset('css2/suggest.css') }}" rel="stylesheet">
	<link rel="shortcut icon" href="/images/icon.png" type="image/png">
	<style>

		.input-close {
			position: relative;
		}

        #address {
            width: 100%;
            border-radius: 4px;
            border-right: 1px;
            font-family: Georgia, "Times New Roman", Times, serif;
        }
		
		@media (max-width: 767px){
			.wrapper {
				padding: 0;
			}

			form {
				width: 100%;
			}

			.close-addon {
				position: absolute;
				right: 15px;
				top: 33%;
				cursor: pointer;
			}
		}
		button {
			background-color: #c32026 !important;
			border-color: #c32026 !important;
			color: #fff !important;
		}

		@media (min-width: 576px){
			.row>.col-sm-6:first-of-type {
				padding-right: 10px !important;
			}

			.input-group {
				margin-bottom: 5px;
			}

			.btn-group2, #address {
				height: 50px;
			}

			#address {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}
		}

		.w-100 {
			width: 100%;
		}

		#img-source {
			/* display: flex; */
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.old-img {
			display: flex;
		}

		.old-img img {
			width: 100%;
			max-width: 200px;
		}

		.place-img {
			width: 50%;
			min-height: 100px;
			margin-bottom: 10px;
		}

		.place-img-w {
			text-align: center;
		}

		@media (max-width: 500px) {
			.place-img {
				width: 100%;
			}
		}

		.add-new {
			display: flex;
			width: 100%;
			height: 100%;
			text-align: center;
			border: 1px solid #ccc;
		}

		.add-icon {
			margin: auto;
		}

		.add-icon > * {
			color: #222;
		}

		.add-icon .fa {
			font-size: 20px;
		}

		.add-icon h4 {
			font-size: 1.2rem;
		}

		.delete-place-picture {
			cursor: pointer;
		}

		.add-food-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.badge {
			margin-bottom: 0;
		}

		.add-food-item .delete-food {

		}

		.badge.badge-warning {
			padding: 10px;
			margin-bottom: 5px;
			font-size: 16px;
		}

		.category-container {
			margin-bottom: 10px;
		}

		.category-container .badge {
			padding: 5px;
		}

		.remove-cat {
			cursor: pointer;
		}

		button {
            border: 1px solid transparent;
            border-radius: 3px;
        }
	</style>
@endsection

    @section('content')
		<div class="containers">
			<form action="{{ route('store_new_place') }}" method="POST" class="place-form" enctype="multipart/form-data">
				@csrf
				<input type="hidden" name="edit" id="edit" value="{{ $place['slug'] ?? ''}}">
				<input type="hidden" name="franchise" id="franinput" value="{{ $place['franchise'] ?? ''}}">
				
				<div class="card">
					<div class="card-body">
						<!-- <h4>Place</h4> -->
						<div class="form-group suggest input-close">
							<input type="text" data-type="place" id="place-name" name="name" class="form-control item-name" placeholder="Name" autocomplete="off" value="{{ $place['name'] ?? '' }}" required>
							{{-- <button type="button" class="check-fran btn btn-primary">Check</button> --}}

						</div>
						<div class="input-group">
							<input type="text" name="address" placeholder="Enter Location" class="form-control" value="{{ $place['address'] ?? '' }}" id="address" required>
							<!-- <div class="input-group-append btn-group2">
								<button style="white-space: normal; background-color: #e8eeef; color: #8a97a0" type="button" class="btn btn-primary get-location"><i class="ta ta-target"></i></button>
							</div> -->
						</div>
                        <input type="hidden" name="latitude" placeholder="Latitude" class="form-control" id="lats" value="{{ isset($place) ? $place['location'] ? $place['location']['coordinates'][1] : '' : '' }}">
                        <input type="hidden" name="longitude" placeholder="Longitude" class="form-control" id="lngs" value="{{ isset($place) ? $place['location'] ? $place['location']['coordinates'][0] : '' : '' }}">
						<!-- <div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<input type="text" name="latitude" placeholder="Latitude" class="form-control" id="lats" value="{{ isset($place) ? $place['location'] ? $place['location']['coordinates'][1] : '' : '' }}">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<input type="text" name="longitude" placeholder="Longitude" class="form-control" id="lngs" value="{{ isset($place) ? $place['location'] ? $place['location']['coordinates'][0] : '' : '' }}">
								</div>
							</div>
						</div> -->
						<div class="form-group suggest">
							<input type="text" id="phone" name="phone[]" class="form-control" value="{{ $place['phones'][0] ?? '' }}" placeholder="Telephone 1 (optional)" autocomplete="off">
						</div>
						<div class="row">
							<div class="form-group suggest col-sm-6" style="padding: 0">
								<input type="text" id="opening" name="opening" class="form-control timing" placeholder="Opening Time (e.g. 08:00)" value="{{ $place['opening'] ?? '' }}">
							</div>
							<div class="form-group suggest col-sm-6" style="padding: 0">
								<input type="text" id="closing" name="closing" class="form-control timing" placeholder="Closing Time (e.g. 22:00)" value="{{ $place['closing'] ?? '' }}">
							</div>
						</div>
						{{-- <div class="form-group suggest">
							<input type="text" id="whatsapp" name="whatsapp" class="form-control" value="{{ $place['whatsapp'] ?? '' }}" placeholder="WhatsApp" autocomplete="off">
						</div>
						<div class="form-group suggest">
							<input type="text" id="jumia" name="jumia" class="form-control" value="{{ $place['jumia'] ?? '' }}" placeholder="Jumia Link" autocomplete="off">
						</div>
						<div class="form-group suggest">
							<input type="text" id="info" name="info" class="form-control" value="{{ $place['info'] ?? '' }}" placeholder="Other information" autocomplete="off">
						</div> --}}
						{{-- <div class="form-check suggest form-check-inline">
							<input class="form-check-input" id="takeaway" name="takeaway" type="checkbox" checked="{{ $place['takeaway'] ?? ''}}">
							<label class="form-check-label" for="takeaway">Takeaway?</label>
						</div>
						<div class="form-check suggest form-check-inline">
							<input class="form-check-input" id="lockdown" name="lockdown" type="checkbox">
							<label class="form-check-label" for="lockdown">Open?</label>
						</div> --}}
						{{-- <button id="upload_widget" type="button" class="cloudinary-button">Add Images</button> --}}
						{{-- <input type="hidden" name="image" id="upload-image"> --}}
						<!-- <input type="hidden" role="uploadcare-uploader" name="image" data-crop="800x600" /><br><br> -->
						<div id="img-source">
							@if(isset($place) && isset($place['image']))
								@foreach($place['image'] as $image)
									<div class="place-img">
										<div class="place-img-w">
											<img src="{{ $image }}" class="w-100" />
											<a href="#" class="delete-place-picture" data-slug="{{ $place['slug'] }}" data-index="{{ $loop->index }}">
												<span class="fa fa-times"></span>
											</a>
										</div>
									</div>
									<input type="hidden" name="uploadimage[]" value="{{ $image }}">
								@endforeach
							@endif
							<div id="old-img"></div>
							<div class="place-img">
								
								<div class="form-group suggest img-input">
									<label for="images">Pictures</label>
									<input type="file" class="form-control" name="image[]">
									<input type="file" class="form-control" name="image[]">
									
								</div>
								{{-- <button type="button" class="add-image">Add Image</button> --}}
								{{-- <a href="#" class="add-new" id="upload_widget" type="button">
								    <div class="add-icon">
								        <i class="fa fa-plus"></i>
								        <h4>Add new</h4>
								    </div>
								</a> --}}
							</div>
						</div>
						{{-- <input type="hidden" id="latitude" name="latitude" value="{{ isset($place) ? $place['location'] ? $place['location']['coordinates'][1] : '' : '' }}"> --}}
						{{-- <input type="hidden" id="longitude" name="longitude" value="{{ isset($place) ? $place['location'] ? $place['location']['coordinates'][0] : '' : '' }}"> --}}
						<h5 class="text-center type-of-place" style="margin-top: 20px;">Type of Place</h5>

						@php
							$types = [
								'restaurant' => 'Restaurant',
								'mamaput' => 'Mama Put', 
								'bar' => 'Bar',
								'streetfood' => 'Street Food',
								'fastfood' => 'Fast Food',
								'hotel' => 'Hotel',
								'eatery' => 'Eatery',
								'cafe' => 'Cafe'
							]
						@endphp
						@foreach($types as $key => $type)
							@php
								$in = (isset($place) && isset($place['type'])) && $key === $place['type'] ? 'checked' : '';
							@endphp
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="{{ $key }}" name="type" {{ $in }} type="radio" value="{{ $key }}">
							  <label class="form-check-label" for="{{ $key }}">{{ $type }}</label>
							</div>
						@endforeach
						<hr>
						@php
							$cats = [
								'african' => 'African',
								'continental' => 'Continental', 
								'chinese' => 'Chinese',
								'indian' => 'Indian',
								'fast-food' => 'FastFood',
								'breakfast' => 'Breakfast',
								'seafood' => 'Seafood',
								'coffee' => 'Coffee',
								'vegetarian' => 'Vegetarian',
								'finedining' => 'FineDining',
								'healthy' => 'Healthy',
								'grill' => 'Grill',
								'parking' => 'Parking',
								'seating' => 'Seating',
								'delivery' => 'Delivery'
							]
						@endphp
						<div id="tags-list">
							<h5 class="text-center">Attributes <span style="font-size: 14px">(select all that fit)</span></h5>
							@foreach($cats as $key => $cat)
								@php
									$in = (isset($place) && isset($place['tags'])) && in_array($key, (array) $place['tags']) ? 'checked' : '';
								@endphp
								<div class="form-check suggest form-check-inline">
								  <input class="form-check-input" id="{{ $key }}" name="tags[]" {{ $in }} type="checkbox" value="{{ $key }}">
								  <label class="form-check-label" for="{{ $key }}">{{ $cat }}</label>
								</div>
							@endforeach
						</div>
						<!-- <div class="form-inline flexContainer">
							<div id="extra-tags">
								<input type="text" id="extra" class="form-control">
							</div>
							<button type="button" class="btn btn-primary" id="add-tag">Add Attribute</button>
						</div> -->
						<br>
						<!-- <p>Add categories one by one or separated by commas (starter, main, entree...)</p>
						<div class="category-container">
							@if (isset($place) && isset($place['category']))
								@foreach ($place['category'] as $cat)
									<span class="badge badge-warning category">
										{{ $cat }} <span class="fa fa-times remove-cat" data-index="{{ $loop->index }}"></span>
										<input type="hidden" name="category[]" value="{{ $cat }}" />
									</span>
								@endforeach
							@endif
						</div> -->
						
						
						<!-- <div class="flexContainer">
							
							<div id="categories">
								<input type="text" id="category" class="form-control">
							</div>
							<button type="button" class="btn btn-primary" id="add-category">Add Category</button>
						</div> -->
						
						
						<hr>
						@php
							$areas = ["Apapa", "Festac Town", "Gbagada", "Ikeja", "Ikoyi", "Ilupeju", "Lagos Island", "Ajah", "Lekki", "Magodo", "Isolo", "Satellite Town", "Surulere", "Victoria Island", "VGC", "Chevron", "Ikate", "Agungi", "Opebi", "Alausa", "Akoka", "Okota", "Ebute Metta", "Yaba", "Oregun", "Oshodi", "Maryland", "Mainland", "Island", "Lagos"]
						@endphp
						<div id="delivery-list" style="display: none;">
							<h5 class="text-center">Delivery Areas <span style="font-size: 14px">(select many)</span></h5>
							@foreach($areas as $key => $area)
								@php
									$in = (isset($place) && isset($place['delivery'])) && in_array($area, (array) $place['delivery']) ? 'checked' : '';
									$id = implode("-", explode(" ", $area));
								@endphp
								<div class="form-check suggest form-check-inline">
								  <input class="form-check-input" id="{{ $id }}" name="delivery[]" type="checkbox" {{ $in }} value="{{ $area }}">
								  <label class="form-check-label" for="{{ $id }}">{{ $area }}</label>
								</div>
							@endforeach
							<hr>
						</div>
						
						<div class="prev-food" id="prev-food" style="display: flex; flex-wrap: wrap;">
							@isset ($food)
								<h5 style="font-size: 18px; width: 100%; padding-bottom: 20px;">Click on a food item to edit it</h5><br>
								@foreach ($food as $f)
									<div class="add-food-item" style="text-align: center;">
										<a 
											href="#" 
											class="edit-prev-food preset" 
											data-id="{{ $f['_id'] ?? '' }}" 
											data-description="{{ $f['description'] ?? '' }}"
											data-name="{{ $f['name'] }}"
											data-price="{{ $f['price'] }}">
											<span class="badge badge-warning">
												{{ $f['name'] }} - {{ $f['price'] }}
											</span>
										</a>
										<a href="#" class="delete-food" data-id="{{ $f['_id'] ?? '' }}" data-name="{{ $f['name'] ?? '' }}">
                                            <i class="fa fa-times"></i>
                                        </a>
									</div>
								@endforeach
							@endisset
						</div>
						<div class="items">
							
						</div>
						<div class="add-more" style="margin-bottom: 20px;">
							<button type="button" class="btn btn-primary add-item">Add Food</button>
						</div> 
						<button class="btn btn-success form-control submit-place">Submit</button>
						
					</div>
				</div>
			</form>
		</div>
		<!-- <div class="top-of-page" style="position: fixed; bottom: 50%; right: 20px;">
			<button class="go-to-top" style="padding: 5px; background-color: #c32022; color: #fff; font-size: 15px;">
				Top
			</button>
			<button class="go-to-bottom" style="padding: 5px; background-color: #c32022; color: #fff; font-size: 15px;">
				Bottom
			</button>
		</div> -->
	@endsection
	@section('footer')
		
	@endsection

	@section('admin')
		
	@endsection

@section('javascript')
	@parent
	<script src="{{ asset('js/vex.min.js') }}"></script>
	<script>
		vex.defaultOptions.className = 'vex-theme-plain';
		// let cats = Array.from(document.querySelectorAll('.category')).map(catSpan => catSpan.textContent.trim())
		// const loadCategories = () => {

		// 	document.querySelectorAll('.item').forEach(foodinput => {
		// 		const catSelect = foodinput.querySelector('.food-category')
		// 		const currentCat = catSelect.value
		// 		catSelect.innerHTML = cats.map(cat => catOption(cat, currentCat || '')).join("")
		// 		// catSelect.value = 
		// 	})
		// 	document.querySelector('.category-container').innerHTML = cats.map((cat, i) => categoryTemplate(cat, i)).join("");
		// };
	</script>
	<script src="{{ asset('js/addfood.js') }}"></script>
	<script src="/js/search.js"></script>
	<script>

		function deleteFood(e){
			e.preventDefault();
            const target = e.currentTarget;
			const _id = target.dataset.id;
            // var con = confirm('Are you sure you want to delete ' + name);
            fetch(`/place/food/delete/${_id}`, {credentials: 'same-origin'})
                .then(response => response.json())
                .then(result => {
                    target.closest('.add-food-item').style.display = 'none';
                }).catch(error => console.log(error))
		}

		var areas = ["Amuwo Odofin", "Apapa", "Festac Town", "Gbagada", "Ikeja", "Ikoyi", "Ilupeju", "Lagos Island", "Ajah", "Lekki", "Magodo", "Ogba", "Ogudu", "Isolo", "Satellite Town", "Surulere", "VGC", "Victoria Island", "Ebute Metta", "Yaba"];

		// document.getElementById("upload_widget").addEventListener("click", function(){
		//     myWidget.open();
		// }, false);
		
		var long = document.getElementById('longitude');
		var lati = document.getElementById('latitude');

		(function addsEvent(){
			autocomplete(document.getElementById('address'))
				.then(response => {
					populate(response);
					addsEvent();
				});
		})();

		$('.get-location').on('click', function(e){
            e.preventDefault();
            const $target = $(e.currentTarget);
            $target.addClass('animated pulse infinite')
            startMap().then(locate => {
				console.log(locate);
                document.getElementById('address').value = locate.address
				long.value = locate.longitude
				lati.value = locate.latitude
                $target.removeClass('animated pulse infinite')
            }).catch(error => console.log(error))
		})
		
		// document.querySelector('.add-image').addEventListener('click', function(e){
		// 	e.preventDefault();
		// 	const el = document.createElement('input');
		// 	el.className = "form-control";
		// 	el.setAttribute('type', 'file');
		// 	el.setAttribute('name', 'image[]');
		// 	document.querySelector('.img-input').appendChild(el);
		// })

		// document.getElementById('add-tag').addEventListener('click', function(e){
		// 	e.preventDefault();
		// 	const extra = document.getElementById('extra');
		// 	const extraTag = extra.value.split(" ").join("")
		// 	const newTag = document.createElement('div');
		// 	newTag.classList.add("form-check", "suggest", "form-check-inline");
		// 	newTag.innerHTML = tagTemplate(extraTag);
		// 	document.getElementById('tags-list').appendChild(newTag);
		// 	extra.value = "";
		// });

		// const categoryTemplate = (category, index) => `
		// 	<span class="badge badge-warning">
		// 		${category} <span class="fa fa-times remove-cat" data-index="${index}"></span>
		// 		<input type="hidden" name="category[]" value="${category}" />
		// 	</span>
		// `;

		// document.querySelector('.category-container').addEventListener('click', function(e){
		// 	if(e.target.dataset.index !== 'undefined') {
		// 		cats.splice(e.target.dataset.index, 1)
		// 		e.target.closest('.badge').style.display = 'none';
		// 		loadCategories();
		// 	}
		// })

		// document.getElementById('add-category').addEventListener('click', function(e){
		// 	const cat = document.getElementById('category');
		// 	const cats_entered = cat.value.split(",").map(c => c.trim())
		// 	cats.push(...cats_entered);
		// 	cat.value = "";
		// 	cat.focus()
		// 	loadCategories();
		// });
		
		// const catOption = (cat, opt) => `
		// 	<option ${opt === cat && 'selected'} value="${cat}">${cat}</option>
		// `;

		var newFood = (food = {}) => {
			const foodNode = document.createElement('div')
			foodNode.classList.add('item');
			foodNode.innerHTML = `
				<div class="item">
					<input type="hidden" class="food-id" name="food[id][]" value="${food.id || ''}" />
					<div class="form-group suggest">
						<input type="text" data-type="food" name="food[food][]" class="form-control food-name" value="${food.name || ''}" placeholder="Food name" autocomplete="off">
					</div>
					<div class="form-group suggest price-check">
						<input type="text" name="food[price][]" class="form-control price" value="${food.price || ''}" placeholder="Price" autocomplete="off">
					</div>
					<div class="form-group suggest">
						<textarea class="form-control description" name="food[description][]" placeholder="Description">${food.description || ""}</textarea>
					</div>
					<div>
						<button class="btn btn-danger remove-current-item">Remove <i class="fa fa-times"></i></button>
					</div>
				</div>
			`;
			return foodNode;
		}

		var foodsToAdd = {};
		
		function editFood(e){
			e.preventDefault();
			const target = e.currentTarget;
			const _id = target.dataset.id;
			
			if(!foodsToAdd[_id]){
				foodsToAdd[_id] = target.dataset;
				const foodItems = document.querySelectorAll('.item');
				if(!foodItems.length){
					document.querySelector('.items').appendChild(newFood(target.dataset));
				}else {
					document.querySelector('.items').insertBefore(newFood(target.dataset), foodItems[0]);
				}

				// document.querySelector('.items').innerHTML =  + .innerHTML;
				document.querySelector('.food-name').select();
			}
			
			target.closest('.add-food-item').style.display = 'none';
		}

		$(document).on('click', '.add-current-item', function(e){
			e.preventDefault();
			const $target = $(e.currentTarget);
			const $container = $target.closest('.item');
			const _id = $container.find('.food-id').val();
			const name = $container.find('.food-name').val();
			const price = $container.find('.price').val();
			const description = $container.find('.description').val();
			// console.log(name);
			$container.remove()
			$('#prev-food').append(prevFood({_id, name, price, description}))
		});

		// $(document).on('keyup', '.food-name', function(e){
		// 	let slug = document.querySelector('#edit').value;
		// 	console.log(e.target, e.currentTarget)
		// 	if(slug){
		// 		console.log('hhh')
		// 		autoC(e.currentTarget, function(text){
		// 			text = text.toLowerCase();
		// 			console.log(text)
		// 			return $.get(`/place/food/search/${slug}/${e.currentTarget.value}`)
		// 		}, function(foodDetails){
		// 			e.currentTarget.value = foodDetails.name;
		// 			let container = e.currentTarget.closest('.item');
		// 			container.querySelector('.price').value = foodDetails.price;
		// 			container.querySelector('.description').value = foodDetails.description;
		// 			const idInput = document.createElement('input');
		// 			idInput.setAttribute('type', 'hidden');
		// 			idInput.value = foodDetails.key;
		// 			container.appendChild(idInput);
		// 		})
		// 	}
		// });

		document.querySelectorAll('.edit-prev-food.preset').forEach(editButton => {
			editButton.addEventListener('click', editFood)
		})

		$(document).on('click', '.remove-current-item', function(e){
			e.preventDefault();
			const $target = $(e.currentTarget);
			const $container = $target.closest('.item');
			// console.log(name);
			$container.remove();
		});

		const imgTemp = (img) => `
			<div class="place-img">
				<div class="place-img-w">
					<img src="${img}" class="w-100" />
				</div>
			</div>
		`

		function appendImage(img){
			$('#img-source').prepend(imgTemp(img))
		}

		function oldPlace(slug) {
			const el = document.createElement('input');
			el.setAttribute('type', 'hidden');
			el.setAttribute('name', 'oldplace');
			el.setAttribute('value', slug);
			document.querySelector('.place-form').appendChild(el);
		}

		

		// const placeSearch = document.querySelector('#place-name');
        
		// autoComplete({
		// 	input: placeSearch,
		// 	fetch: async function(text, update) {
		// 		text = text.toLowerCase();
		// 		var suggestions = await $.get(`/api/place/search/${text}`)
		// 		console.log(suggestions)
		// 		update(suggestions)
		// 	},
		// 	onSelect: async function({name, slug}) {
		// 		placeSearch.value = name;
		// 		oldPlace(slug)
		// 		const placeDetails = await getPrevFood(name);
		// 		resets(placeDetails.place, placeDetails.food);
		// 	}
		// });
		// document.querySelector('.check-fran').addEventListener('click', function(e){
		// 	// check 
		// 	e.preventDefault();
		// 	const placeName = document.querySelector('#place-name').value;
		// 	if(placeName.length){
		// 		doFetch(`/api/place/franchise/food/${placeName}`)
		// 		.then(places => {
		// 			franchisePlaces = places;
		// 			newFranCon(places)
		// 		})
		// 	}
		// 	// document.getElementById('prev-food').innerHTML = food && food.length ? populateFood(food) : "";
		// });

		// Toggle show delivery areas when delivery is (de)selected
		// document.getElementById('delivery').addEventListener('change', function(e){
		// 	if(e.target.checked){
		// 		// document.querySelector('#delivery-list').style.display = 'block';
		// 	}else {
		// 		document.querySelector('#delivery-list').style.display = 'none';
		// 	}
		// })

		// document.querySelector('.go-to-top').addEventListener('click', function(e){
		// 	e.preventDefault();
		// 	const top = $('.type-of-place').offset().top
		// 	goToTop(top)
		// })

		// document.querySelector('.go-to-bottom').addEventListener('click', function(e){
		// 	e.preventDefault();
		// 	const foodItems = document.querySelectorAll('.item')
		// 	const bottom = foodItems.length ? foodItems[foodItems.length - 1].offsetTop : document.querySelector('.items').offsetTop;
		// 	goToTop(bottom)
		// })



		function goToTop(goto) {
			$('html, body').animate({
		      scrollTop: goto
		    }, 800);
		}
	</script>
@endsection