{% extends 'claimed.html.twig' %}

{% block content %}
	<div class="content">
		<div class="row">
			<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
				<div class="card">
					<div class="card-header">
						<h4 class="pull-left">Food Menu</h4>
						<a href="{{ path('category', {'place_slug': place.slug}) }}" class="btn btn-primary pull-right">Add Categories</a>
					</div>
					<div class="card-body">
						<table class="table table-striped item-table">
							<thead>
								<tr>
									<th>Name</th>
									<th>Price</th>
									<th>Category</th>
									<th>Actions</th>
								</tr>
							</thead>
							<tbody>
								{% for item in items %}
									<tr>
										<td><a href="{{ path('editItem', {'id': item.id }) }}">{{ item.name }}</a></td>
										<td>{{ item.price }}</td>
										<td>
											{% if item.category %}
												{{ item.category ? item.category : '' }}
											{% elseif place.category|length %}
												<select data-itemid="{{ item.id }}" class="form-control change-category">
													<option value="">Select category</option>
													{% for cat in place.category %}
													  <option value="{{ cat }}">{{ cat }}</option>
													{% endfor %}
												</select>
											{% endif %}
										</td>
										<td class="flex-big">											
											<a data-name="{{ item.name }}" class="btn btn-danger action-icon delete-row" href="{{ path('deleteItem', {'id': item.id }) }}"><i class="fa fa-times"></i></a>
										</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
						<div class="navigation">
                            {{ knp_pagination_render(items) }}
                        </div>
					</div>
				</div>
			</div>
			<div class="col-sm-12 col-lg-5 col-md-10 col-xs-12 new-item-add">
				<div class="card">
					<div class="card-header"><h4>Enter New Food Item(s)</h4></div>
					<div class="card-body">
						<form action="{{ path('registerItem', {'place_slug': place.slug}) }}" method="POST" enctype="multipart/form-data" class="json-form">
							<div class="items">
								<div id="init" class="item">
									<div class="form-group">
										
										<input type="text" name="name[]" class="form-control" placeholder="Food Name" required>
									</div>
									<div class="form-group">
										<input type="text" name="selling[]" class="form-control" placeholder="Price (minimum)" required>
									</div>
									<div class="form-group">
										<textarea name="description[]" class="form-control" placeholder="Description (optional)" rows="2"></textarea>
									</div>
									{% if place.category and place.category|length %}
										<div class="form-group">
											<select class="form-control ajaxSelect" id="category-select" name="category[]">
												<option value="">Select Category</option>
												{% for cat in place.category %}
													<option value="{{ cat }}">{{ cat|upper }}</option>
												{% endfor %}
											</select>
										</div>
									{% endif %}
									<div class="form-group">
										<label for="image">Add Image</label>
										<input type="file" name="image[]" class="form-control" placeholder="Image">
									</div>
								</div>
							</div>
							{# <div class="form-group">
								<input type="file" class="form-control" name="image">
							</div> #}
							{# <h3>Add Stock Items <small><a data-toggle="tooltip" data-placement="top" title="If this item comprises of parts present in the inventory/stock, then add those items here, otherwise leave blank"><i class="fa fa-question-circle"></i></a></small></h3>
							<div id="stockitems">
								<div class="row" id="initial">
									<div class="col-sm-5">
										<div class="form-group">
											<select class="form-control" name="stock[]">
												<option value="">Select Stock Item</option>
												{% for item in stock %}
													<option value="{{ item.id }}">{{ item.name|upper }}</option>
												{% endfor %}
											</select>
										</div>
									</div>
									<div class="col-sm-5">
										<div class="form-group">
											<input type="text" name="portion[]" placeholder="Portion" class="form-control">
										</div>
									</div>
								</div>
							</div> #}
							<input type="submit" name="submit" value="Save" class="btn btn-success save-button">
						</form>
						<br>
						{# <button class="btn btn-primary add-item-part" onclick="addItem();">Add Item</button> #}
						<button type="button" id="add-item" class="btn btn-primary pull-right">Add More</button>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>

		var deleteButton = () => `
			<div class="delete-button" style="text-align: right;">
				<button type="button" class="btn btn-danger delete-new-row"><i class="fa fa-times"></i></button>
			</div>
		`;

		var itemTemplate = (function(){
			var item = document.getElementById('init').innerHTML;
			return function(){
				var cover = document.createElement('DIV');
				cover.className = 'item added';
				// cover.innerHTML = '<hr>';
				cover.innerHTML = item;
				cover.innerHTML += deleteButton();
				return cover;
			}
		})

		var cover = itemTemplate();

		$('#add-item').on('click', function(e){
			e.preventDefault();
			// $('.delete-new-row').hide();
			$('.items').append(cover());
			$('.ajaxSelect').select2();
			// $( ".item-name" ).autocomplete({
			//   source: options
			// });
		});

		$('.items').on('click', '.delete-new-row', function(e){
			e.preventDefault();
			var $target = $(e.currentTarget);
			$target.closest('.added').fadeOut(300, function(){
				$(this).remove();
			})
		});

		document.querySelectorAll('.change-category').forEach(select => {
			select.addEventListener('change', function(e){
				const td = e.target.closest('td');
				fetch(`/admin/food/category/${e.target.dataset.itemid}`, {method: 'PATCH', body: JSON.stringify({category: e.target.value}), credentials: 'same-origin'})
				.then(response => response.json())
				.then(result => {
					if(result.category === e.target.value) {
						const alert = document.querySelector('.alert');
						alert.textContent = 'Category updated successfully';
						alert.style.display = 'block';
						setTimeout(() => {
							alert.textContent = '';
							alert.style.display = 'none'
						}, 1500)

						td.textContent = e.target.value;
					}
				})
			});
		});
	</script>
	{#<script src="{{ asset('js/addRemove.js') }}"></script>#}
{% endblock %}