Elep

@extends('layouts.base')

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

#add-tag {
			border-top-left-radius: 0;
    		border-bottom-left-radius: 0;
		}
	</style>
    <script>
      UPLOADCARE_PUBLIC_KEY = 'd20947fe8b3f679007eb';
      UPLOADCARE_TABS = 'camera';
      // UPLOADCARE_IMAGE_SHRINK = '600x';
      UPLOADCARE_IMAGES_ONLY = true;
      UPLOADCARE_CLEARABLE = true;
    </script>
    <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
@endsection

@section('content')
	<div class="container">
			<form action="{{ route('addPlace') }}" method="POST">
				@csrf
				<input type="hidden" name="edit" id="edit">
				<div class="card">
					<div class="card-body">
						<h4>Place</h4>
						<div class="form-group suggest">
							<input type="text" data-type="place" id="place-name" name="name" class="form-control item-name" placeholder="Name" autocomplete="off">
                        </div>
                        
                        <div class="form-group suggest">
                            <input type="text" id="chops-name" name="chops" class="form-control item-name" placeholder="Chops Name" autocomplete="off">
                        </div>
                        <div class="form-group suggest">
                            <input type="text" id="chops-address" name="chopsadd" class="form-control item-name" placeholder="Chops Address" autocomplete="off">
                        </div>
						<div class="form-group suggest">
							<input type="text" id="address" name="formatted" class="form-control" placeholder="Autocomplete" autocomplete="off">
							{{-- <a href="#" class="use-location">Use current location</a> --}}
						</div>
						<div class="form-group suggest">
							<input type="text" name="address" class="form-control" placeholder="Address" autocomplete="off">
							{{-- <a href="#" class="use-location">Use current location</a> --}}
						</div>
						<div class="form-group suggest">
							<input type="text" id="phone" name="phone" class="form-control" placeholder="Telephone" autocomplete="off">
						</div>
						<div class="form-group suggest">
							<input type="email" id="email" name="email" class="form-control" placeholder="Email Address" autocomplete="off">
						</div>
						<div class="row">
							<div class="form-group suggest col-sm-6">
								<input type="text" id="opening" name="opening" class="form-control timing" placeholder="Opening Time (e.g. 12:00)">
							</div>
							<div class="form-group suggest col-sm-6">
								<input type="text" id="closing" name="closing" class="form-control timing" placeholder="Closing Time (e.g. 12:00)">
							</div>
						</div>
						<input type="hidden" class="images" role="uploadcare-uploader" name="image" data-crop="500x500" /><br><br>
						<input type="hidden" id="latitude" name="latitude">
						<input type="hidden" id="longitude" name="longitude">
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="restaurant" name="type" type="radio" value="restaurant">
						  <label class="form-check-label" for="restaurant">Restaurant</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="mamaput" name="type" type="radio" value="mamaput">
						  <label class="form-check-label" for="mamaput">Bukka</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="bar" name="type" type="radio" value="bar">
						  <label class="form-check-label" for="bar">Bar</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="streetfood" name="type" type="radio" value="street">
						  <label class="form-check-label" for="streetfood">Street Food</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="hotel" name="type" type="radio" value="hotel">
						  <label class="form-check-label" for="hotel">Hotel</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="fast" name="type" type="radio" value="fast">
						  <label class="form-check-label" for="fast">Fast Food</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="eatery" name="type" type="radio" value="eatery">
						  <label class="form-check-label" for="eatery">Eatery</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="cafe" name="type" type="radio" value="cafe">
						  <label class="form-check-label" for="cafe">Cafe</label>
						</div>
						<div class="form-check suggest form-check-inline">
						  <input class="form-check-input" id="orders" name="type" type="radio" value="orders">
						  <label class="form-check-label" for="orders">Orders Only</label>
						</div>
						<hr>
						<div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="african" name="tags[]" type="checkbox" value="african">
							  <label class="form-check-label" for="african">African</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="continental" name="tags[]" type="checkbox" value="continental">
							  <label class="form-check-label" for="continental">Continental</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="chinese" name="tags[]" type="checkbox" value="chinese">
							  <label class="form-check-label" for="chinese">Chinese</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="indian" name="tags[]" type="checkbox" value="indian">
							  <label class="form-check-label" for="indian">Indian</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="breakfast" name="tags[]" type="checkbox" value="breakfast">
							  <label class="form-check-label" for="breakfast">Breakfast</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="finedining" name="tags[]" type="checkbox" value="finedining">
							  <label class="form-check-label" for="finedining">FineDining</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="healthy" name="tags[]" type="checkbox" value="healthy">
							  <label class="form-check-label" for="healthy">Healthy</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="fastfood" name="tags[]" type="checkbox" value="fastfood">
							  <label class="form-check-label" for="fastfood">FastFood</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="grill" name="tags[]" type="checkbox" value="grill">
							  <label class="form-check-label" for="grill">Grill</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="parking" name="tags[]" type="checkbox" value="parking">
							  <label class="form-check-label" for="parking">Parking</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="seating" name="tags[]" type="checkbox" value="seating">
							  <label class="form-check-label" for="seating">Seating</label>
							</div>
							<div class="form-check suggest form-check-inline">
							  <input class="form-check-input" id="delivery" name="tags[]" type="checkbox" value="delivery">
							  <label class="form-check-label" for="delivery">Delivery</label>
							</div>

</div>
						<div class="form-inline flexContainer">
							<div id="extra-tags">
								{{-- <input type="text" name="tags[]" class="form-control"> --}}
							</div>
							<button type="button" class="btn btn-primary" id="add-tag">Add</button>
						</div>
						<hr>
						<div class="prev-food" id="prev-food" style="display: flex; flex-wrap: wrap;">

</div>
						<h4 style="margin-top: 10px;">Food Items</h4>
						<div class="items">

</div>
						<button class="btn btn-success">Submit</button>
						<div class="add-more">
							<button type="button" class="btn btn-danger remove-item">-</button>
							<button type="button" class="btn btn-primary add-item">+</button>
						</div>
						
						
					</div>
				</div>
			</form>
		</div>
	@endsection

@section('javascript')
	@parent
	<script src="{{ asset('js/fetch.js') }}"></script>
	<script src="{{ asset('js/addfood.js') }}"></script>
	<script src="{{ asset('js/search.js') }}"></script>
	<script>
		var long = document.getElementById('longitude');
        var lati = document.getElementById('latitude')
        
        $('#place-name').on('keyup', function(e){
			search(e, function(name){
				getPrevFood(name);
			})
        });

(function addsEvent(){
			autocomplete(document.getElementById('address'))
				.then(response => {
					console.log({response});
					populate(response)
					addsEvent();
				});
		})();
        
		$('#chops-name').on('keyup', function(e){
			search(e, function(name){
                setTimeout(async () => {
                    const place = await $.get(`/api/chops/food/${e.target.value}`);
                    if(place.food) {
                        $('.items').html(place.food.filter((f, ind, ar) => {
                            if(ind === 0) return true;
                            return f.name !== ar[ind-1].name
                        }).map(fo => {
                            return newFood(fo)
                        }))
                        $('#chops-address').val(place.address);
                        if(place.logo) $('.images').val(place.logo);
                    }
                }, 0)
			}, `/api/chops/${e.target.value}`)
        })
        
        var newFood = (food) => `
            <div class="item">
                <div class="form-group suggest">
                    <input type="text" data-type="food" name="food[]" class="form-control food-name" value="${food.name}" autocomplete="off">
                </div>
                <div class="form-group suggest price-check">
                    <input type="text" name="price[]" class="form-control price" value="${food.price}" autocomplete="off">
                </div>
                <div class="form-group suggest">
                    <textarea class="form-control" name="description[]">${food.description}</textarea>
                </div>
                <div>
                    <button class="btn btn-danger remove-current-item"><i class="fa fa-times"></i></button>
                </div>
            </div>
        `;

const tagTemplate = () => `
			<input type="text" class="form-control" name="tags[]">
		`;

document.getElementById('add-tag').addEventListener('click', function(e){
			e.preventDefault();
			const container = document.getElementById('extra-tags');
			if (container.querySelector('input[type="text"]')) container.querySelector('input[type="text"]').setAttribute('type', 'hidden');
			container.innerHTML += tagTemplate();
		})
	</script>
@endsection