@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 rel="stylesheet" href="/css/place-list.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Tangerine&display=swap" rel="stylesheet"> 
<style>
	.place-map {
        padding: 0;
    }

    #loading, .load-map {
        background: rgba(2,2,2, 0.4);
        height: 100%;
        margin: 0 !important;
        position: relative;
        width: 100%;
        display: flex;
        z-index: 9999;
	}
	
	.reserve-block p {
		color: #323232;
	}

	a.tag {
		color: #b2b8c3;
		display: inline;
	}

	.fixed-top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		transition: top 5s linear;
	}

	.form-control {
		padding: .8rem 1.2rem;
	}

	@media (max-width: 767px){
		.vex {
			/* width: 100%; */
			left: 10px;
			right: 10px;
			top: 20%;
		}
	}

	@media (min-width: 767px) {
		.vex {
			width: 400px;
			left: 35%;
			top: 20%;
		}
	}

	.highlight {
		background-color: #e9b947;
		padding: 3px;
	}
</style>
<script>
	UPLOADCARE_PUBLIC_KEY = 'd20947fe8b3f679007eb';
	UPLOADCARE_TABS = 'camera file';
	// UPLOADCARE_IMAGE_SHRINK = '600x';
	UPLOADCARE_IMAGES_ONLY = true;
	UPLOADCARE_CLEARABLE = true;
</script>
<script defer src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
@endsection

@section('loader')
	
@endsection

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

@section('content')
	<div class="row" id="loading" style="display: none; position: fixed;">
		<div class="col-sm-12 mx-auto" style="display: flex;">
			<div class="loader"></div>
		</div>
	</div>
	<!-- <nav class="navbar navbar-light bg-light">
		<a class="navbar-brand go-back" href="#"><i class="fa fa-arrow-left"></i> Back</a>
	</nav> -->
    <div class="hero">
		<h1 id="hero-name"><div class="skeleton-background"></div></h1>
	</div>
	<div class="place-map" id="map">
        <div class="row load-map">
            <div class="col-sm-12 mx-auto" style="display: flex;">
                <div class="loading"></div>
            </div>
        </div>
    </div>
	<section class="reserve-block" id="place-details">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="skeleton-background"></div>
                    <div class="skeleton-background"></div>
                </div>
                <div class="col-md-6 review-wrapper">
                    <div class="reserve-seat-block">
                        <div class="review-btn">
                            <div class="skeleton-background"></div>
							<div class="skeleton-background"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
	<div class="menu-container">
		<input type="text" class="form-control filter-food" placeholder="Search food" style="border-radius: 0%; border: none; border-top: 1px solid #ccc; height: 48px; position: sticky; top: 0; z-index: 1000;">
		<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: #fff;">Click on a food item to leave a review </p> --}}
				{{-- <a class="add-food" href="#" style="background: #fff; padding: 4px 6px; border: 1px solid transparent;">Add</a> --}}
			</div>
			<div id="modal">
			</div>
	        <div id="food-container" class="place-foods containers">
				@for ($i=0; $i<15; $i++)
                    <div class="food-item review-wrapper">
						<span class="title">
							<span class="food-name-rating">
								<span class="food-name"><div class="skeleton-background"></div></span>
							</span>
							<span class="price">
                                <div class="skeleton-background"></div>
							</span>
						</span>	
						<span class="tags">	
							 <div class="comments">
							 	<span class="food-description">
                                    <div class="skeleton-background"></div>
								</span>
							 </div>
						</span>
					</div>
				@endfor
			</div>
		</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"></div>
			<div class="footer-link"><a href="/place/new" class="">Add/Edit Place</a></div>
			<div class="footer-link"></div>
		</div>
	@endif
@endsection
@section('javascript')
	<script src="/js/jquery.js"></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 src="/js/place.js"></script>
@endsection

@if(isset($place) && isset($place['image']))
	@if((array) $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>
		@endforeach
	@else
		<div class="place-img">
			<div class="place-img-w">
				<img src="{{ $place['image'] }}" class="w-100" />
				<a href="#" class="delete-place-picture" data-slug="{{ $place['slug'] }}" data-index="0">
					<span class="fa fa-times"></span>
				</a>
			</div>
		</div>
	@endif
@endif