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

{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}">
{% endblock %}

{% block content %}
	<div class="content">
		<div class="card">
			<div class="card-body">
				<form action="{{ path('updatesupply', {'id': supply.id}) }}" method="POST" name="supply">
					<div class="row">
						<div class="col-sm-5">
							<div class="form-group">
								<input type="text" name="date" class="form-control" id="datepicker" autocomplete="off" value="{{ supply.date|date('d/m/Y') }}" required>
							</div>
							<div class="form-group">
								<select class="form-control" name="supplier" required>
									<option value="">Select Supplier</option>
									{% for item in supplier %}
										<option value="{{ item.id }}">{{ item.name|upper }}</option>
									{% endfor %}
								</select>
							</div>
						</div>
						<div class="col-sm-7">
							<h3>Supply Items</h3>
							<table class="table">
								<tr>
									<th>Name</th>
									<th>Quantity</th>
									<th>Amount</th>
									<th>Delete</th>
								</tr>
								{% for item in supplyitems %}
									<tr>
										<td>{{ item.name }}</td>
										<td>{{ item.quantity }}</td>
										<td>{{ item.amount }}</td>
										<td>
											<a href="{{ path('deleteSupplyItem', {'id': item.id}) }}" class="btn btn-danger delete-item" data-id="{{ item.id }}">
												<i class="fa fa-times"></i>
											</a>
										</td>
									</tr>						
								{% endfor %}
							</table>
						</div>
					</div>
					<div class="col-sm-12 supply-items">
						<h3>Add Supply Items</h3>
						
						<div id="stockitems">
							<div class="row" id="initial">
								<div class="col-sm-12 col-md-4 col-xs-12">
									<div class="form-group">
										<select class="form-control stock-item select-list ajaxSelect" name="item[]" >
											<option value="">Select Inventory Item</option>
											{% for item in stockitems %}
												<option value="{{ item.id }}|{{ item.unit }}">{{ item.name|upper }} ({{ item.quantity }})</option>
											{% endfor %}
											<option value="-1">New Inventory Item</option>
										</select>
									</div>
								</div>
								<div class="col-sm-12 col-md-4 col-xs-12">
									<div class="input-group">
										<input type="text" name="quantity[]" placeholder="Quantity" class="form-control">
										<div class="input-group-append">
											<span class="input-group-text"></span>
										</div>
									</div>
								</div>
								<div class="col-sm-12 col-md-4 col-xs-12">
									<div class="form-group">
										<input type="text" name="amount[]" placeholder="Amount" class="form-control">
									</div>
								</div>
								<div class="col-sm-12 col-md-4 col-xs-12 stockitem">
									<div class="form-group">
										<input type="text" name="stock[]" placeholder="Item Name" class="form-control">
										<select name="unit" class="form-control">
											<option value="">Select Unit</option>
											<option value="pieces">pieces</option>
											<option value="packets">packets</option>
											<option value="bags">bags</option>
											<option value="cups">cups</option>
											<option value="ml">ml</option>
											<option value="cl">cl</option>
											<option value="l">l</option>
											<option value="g">g</option>
											<option value="kg">kg</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						<button type="submit" class="btn btn-primary">Save</button>
						<div>
							<button type="button" id="add-item" class="btn btn-primary pull-right">+</button>
						</div>
					</div>
					
					
				</form>
			</div>
		</div>
	</div>
	
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	
	<script src="{{ asset('js/admin.js') }}"></script>
	<script src="{{ asset('js/itemselect.js') }}"></script>
	<script>
		$( "#datepicker" ).datepicker();
		// $( "#datepicker" ).datepicker("option", "dateFormat", "dd/mm/yy");

		var supplier = "{{ supply.supplier.id|default('') }}";
		if(supplier) {
			document.forms.supply.supplier.value = supplier;
		}

		$('#stockitems').on('change', '.select-list', function(e){

			var $target = $(e.currentTarget)
			if ($target.val() === -1) {
				$target.closest('.row').find('.input-group-text').hide()
				return;
			}

			var split = $target.val().split("|")
			var unit = split[1];
			$target.closest('.row').find('.input-group-text').show().html(unit);
		})

		var selectTemplate = (items) => `
			<select class="form-control stock-item" name="item[]" required>
				<option value="">Select Inventory Item</option>
				${items.map(option => optionTemplate(option)).join("")}
				<option value="-1">New Inventory Item</option>
			</select>
		`

		var itemRow = items => `
			<hr>
			<div class="row" style="padding-top: 13px;">
				<div class="col-sm-12 col-md-4 col-xs-12">
					<div class="form-group">
						${selectTemplate(items)}
					</div>
				</div>
				<div class="col-sm-12 col-md-4 col-xs-12">
					<div class="input-group">
						<input type="text" name="quantity[]" placeholder="Quantity" class="form-control">
						<div class="input-group-append">
							<span class="input-group-text"></span>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="form-group">
						<input type="text" name="amount[]" placeholder="Amount" class="form-control">
					</div>
				</div>
				
				<div class="col-sm-12 col-md-4 col-xs-12 stockitem">
					<div class="form-group">
						<input type="text" name="stock[]" placeholder="Item Name" class="form-control">
						<select name="unit" class="form-control" required>
							<option value="">Select Unit</option>
							<option value="pieces">pieces</option>
							<option value="packets">packets</option>
							<option value="bags">bags</option>
							<option value="cups">cups</option>
							<option value="ml">ml</option>
							<option value="cl">cl</option>
							<option value="l">l</option>
							<option value="g">g</option>
							<option value="kg">kg</option>
						</select>
					</div>
				</div>
				<div class="col-sm-1 cancel-button" style="display: flex;">
					<button style="margin:auto;" type="button" class="btn btn-danger"><i class="fa fa-times"></i></button>
				</div>
				
			</div>
		`;

	</script>
{% endblock %}