Elep

{% 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">
				<h3>Spillages/Test/Training</h3>
				
				<table class="table table-striped" id="rowSelection">
					<thead>
						<tr>
							<th>Reason</th>
							<th>Item</th>
							<th>Quantity</th>
							<th>Date</th>
							<th>Action</th>
						</tr>
					</thead>
					<tbody>
						{% for item in spillages %}
							<tr class="clickable-row" data-href="{{ path('supplyitems', {'id': item.id }) }}" style="cursor: pointer;">
								<td>{{ item.reason }}</td>
								<td>{{ item.stock.name }}</td>
								<td>{{ item.quantity }} {{ item.stock.unit }}</td>
								<td>{{ item.created|date('d/m/Y H:i:s') }}</td>
								<td class="flex-big" style="gap: 5px;">
									<a class="action-icon delete-row link-danger" href="{{ path('delete_spillage', {'id': item.id }) }}"><i class="fa fa-times"></i></a>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
        <div class="card col-sm-12 col-md-12 col-lg-6">
            <div class="card-header">
                <h3>Add Spillage/Training/Test</h3>
            </div>
            <div class="card-body">
                <form action="{{ path('post_spillage') }}" method="POST">
                    <div class="form-group">
                        <select class="form-control stock-item select-list ajaxSelect" name="stock">
                            <option value="">Select Inventory Item</option>
                            {% for item in inventory %}
								<option value="{{ item.id }}" data-unit="{{ item.unit }}">{{ item.name }} ({{ item.quantity }}{{ item.unit }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="text" name="reason" class="form-control" placeholder="Reason">
                    </div>
                    <div class="form-group">
                        <input type="text" name="quantity" class="form-control" placeholder="Quantity">
                    </div>
                    <div class="form-group">
                        <input type="text" name="date" class="form-control" placeholder="Date" id="datepicker" autocomplete="off" required>
                    </div>
                    <input type="submit" name="submit" value="Save" class="btn-primary">
                </form>
            </div>
        </div>
	</div>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script src="{{ asset('js/admin.js') }}"></script>
	<script>
		
		$(document).ready(function() {
			$( "#datepicker" ).datepicker();
			$( "#datepicker" ).datepicker("option", "dateFormat", "dd/mm/yy");
		});
		
		document.querySelector('.select-list').addEventListener('change', function(e) {
			console.log('hello')
			const option = e.target
			console.log(option.dataset.unit)
		})
    </script>
{% endblock %}