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

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

{% block content %}
	<div class="content-main">
		<div class="card">
			<div class="card-body">
				<form action="{{ path('supply') }}" method="POST" name="supply">
					<a href="{{ path('ajax', {'page': 'supplier'}) }}" rel="modal:open" class="btn btn-primary pull-right new-supplier">New Supplier</a>
					<div class="col-sm-12 col-md-6">
						{# <div class="form-group">
							<input type="text" name="name" class="form-control" placeholder="Supply Name" required>
						</div> #}

						<div class="form-group">
							<input type="text" name="date" class="form-control" placeholder="Date" id="datepicker" autocomplete="off" required>
						</div>
						<div class="form-group">
							<select class="form-control ajaxSelect sup" name="supplier" required>
								<option value="">Select Supplier</option>
								{% for supplier in suppliers %}
									<option value="{{ supplier.id }}">{{ supplier.name|upper }}</option>
								{% endfor %}
								<option value="newsup">New Supplier</option>
							</select>
						</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 items %}
												<option value="{{ item.id }}|{{ item.unit }}">{{ item.name|upper }} ({{ item.quantity }}{{ item.unit }})</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 class="btn btn-primary">Save</button>
						<div>
							<button type="button" id="add-item" class="btn btn-primary pull-right">+</button>
							{# <button type="button" id="removes" class="btn btn-default pull-right" style="display: none;">-</button> #}
						</div>
					</div>
					
					
				</form>
			</div>
		</div>
		<br>
		<!-- <button class="btn-other pull-right" onclick="addItem();">+</button> -->
	</div>
	
{% endblock %}

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

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

			$('.sup').on('change', function(e){
				console.log(e.target.value)
				if (e.target.value === 'newsup') {
					// $.get('/newapp/public/ajax/supplier', function(html){
					// 	$(html).appendTo('body').modal();
					// })
					$('.new-supplier').click();
				}
				
				
			})
		});

		$('#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 select-list ajaxSelect" 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: 15px;">
				<div class="col-sm-4">
					<div class="form-group">
						${selectTemplate(items)}
					</div>
				</div>
				<div class="col-sm-4">
					<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-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 class="col-sm-4 stockitem">
					<div class="form-group">
						<input type="text" name="stock[]" placeholder="Item Name" class="form-control">
						<select name="unit" class="form-control">
							<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>
		`;
	</script>
{% endblock %}