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

{% block content %}
	<div class="searchbar">
		<form class="form-inline" action="{{ path('searchCargo') }}" method="GET">
			<label for="search">Search Cargo By</label>
			<select name="search" id="search" class="form-control" onchange="play();">
				<option value="seller">Seller</option>
				<option value="product">Product</option>
				<option value="date">Date</option>
			</select>
			<input name="query" class="search form-control" type="text" placeholder="Search" id="query">
			<div id="fromTo" style="display: none; padding: 10px 0;">
				<input class="search form-control" name="from" type="text" placeholder="From" id="datepicker">
				<input class="search form-control" name="to" type="text" placeholder="To" id="to">
			</div>
			<input type="submit" value="Submit" class="btn btn-default">

		</form>
	</div>
	<div class="releaseTable">
		<table class="table" data-sort="table">
			<thead>
	            <tr>
	              <th colspan="3">Name</th>
	              <th></th>
	              <th></th>
	            </tr>
          	</thead>
          	<tbody>
			{% if cargo %}
				{% for item in cargo %}
					<tr>
						<td colspan="3"><a href="{{ path('viewCargo', {'id': item.id}) }}">{{ item.cargoname }}</a></td>
						<td><a href="{{ path('editCargo', {'id': item.id}) }}">Edit</a></td>
						<td><a href="#">Delete</a></td>
					</tr>
				{% endfor %}
			{% endif %}
			</tbody>
		</table>
	</div>
	
{% endblock %}

{% block javascript %}
	{{ parent() }}

	<script type="text/javascript">
		var search = document.getElementById('search');
		function play(){
			if(search.value === 'date'){
				document.getElementById('query').style.display = 'none';
				document.getElementById('fromTo').style.display = 'block';
			}else {
				document.getElementById('query').style.display = 'inline-block';
				document.getElementById('fromTo').style.display = 'none';
			}
		}
	</script>

{% endblock %}