Elep

{% extends 'base1.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">
						<h3 class="pull-left">Items</h3>
						<a href="{{ path('ajax', {'page': 'category'}) }}" rel="modal:open" class="btn btn-primary pull-right">New Category</a>
					</div>
					<div class="card-body">
						<table class="table table-striped item-table" id="rowSelection">
							<thead>
								<tr>
									<th>Name</th>
									<th>Price</th>
									<th>Category</th>
									<th>Actions</th>
								</tr>
							</thead>
							<tbody>
								{% for item in items %}
									<tr class="clickable-row" data-href="{{ path('item', {'id': item.id }) }}" style="cursor: pointer;">
										<td>{{ item.name }}</td>
										<td>{{ item.sellingPrice }}</td>
										<td>{{ item.category.name}}</td>
										<td class="flex-big">											
											<a data-name="{{ item.name }}" class="btn btn-danger action-icon delete-row" href="{{ path('removeitem', {'id': item.id }) }}"><i class="fa fa-times"></i></a>
										</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
					</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"><h5><h3>Enter New Item</h3></h5></div>
					<div class="card-body">
						<form action="{{ path('registerItem') }}" method="POST" class="json-form" enctype="multipart/form-data">
							<div class="items">
								<div id="init" class="item">
									<div class="form-group">
										<input type="text" name="name[]" class="form-control" placeholder="Item Name" required>
									</div>
									<div class="form-group">
										<input type="text" name="selling[]" class="form-control" placeholder="Price" required>
									</div>
									<div class="form-group">
										<input type="text" name="description[]" class="form-control" placeholder="Description">
									</div>
									<div class="form-group">
										<select class="form-control ajaxSelect" name="category[]" required>
											<option value="">Select Category</option>
											{% for item in category %}
												<option value="{{ item.id }}">{{ item.name|upper }}</option>
											{% endfor %}
										</select>
									</div>
									
									<div class="form-group">
										<input type="file" name="image[]" class="form-control">
									</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 block = document.getElementById('initial');

// function addItem(){
		// 	var element = document.createElement('DIV');
		// 	element.className = "row";
		// 	element.innerHTML = block.innerHTML;
		// 	document.getElementById('stockitems').appendChild(element);
		// }

// const item_url = "{{ path('item') }}";

// const itemRow = (item) => `
		// 	<tr>
		// 		<td><a href="${item_url}/${item.id}">${item.name}</a></td>
		// 		<td>${item.sellingPrice}</td>
		// 		<td class="col-sm-hidden">${item.category.name}</td>
		// 		<td class="flex-big">											
		// 			<a data-name="${item.name}" class="btn btn-danger action-icon delete-row" href="${item_url}/${item.id}"><i class="fa fa-times"></i></a>
		// 		</td>
		// 	</tr>
		// `;

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();
			})
		});
	</script>
	{#<script src="{{ asset('js/addRemove.js') }}"></script>#}
{% endblock %}