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

{% block content %}
	<style type="text/css">
		div.row>div.col-md-2>h3 {
			color: purple;
		}
	</style>
	<div class="content">
	    <div class="container-fluid">
	        <div class="row">
	            <div class="col-md-12">
	                <div class="card">
	                    <div class="header">
	                        <h4 class="title">Release Order</h4>
	                    </div>
	                    <div class="content">   
							<div class="row">
                        		<div class="col-md-2 col-xs-6">
                        			<h3>Vendor: </h3>
                        		</div>
                        		<div class="col-md-4 col-xs-6">
                        			<h3>{{ releases.cargo.seller }}</h3>
                        		</div>
                        	</div>
	                    	<div class="row">
                        		<div class="col-md-2 col-xs-6">
                        			<h3>Customer: </h3>
                        		</div>
                        		<div class="col-md-4 col-xs-6">
                        			<h3>{{ releases.customer }}</h3>
                        		</div>
                        		<div class="col-md-2 col-xs-6">
                        			<h3>Product: </h3>
                        		</div>
                        		<div class="col-md-4 col-xs-6">
                        			<h3>{{ releases.cargo.product }}</h3>
                        		</div>
                        	</div>
                        	<div class="row">
                        		<div class="col-md-2 col-xs-6">
                        			<h3>Quantity: </h3>
                        		</div>
                        		<div class="col-md-4 col-xs-6">
                        			<h3>
                        				{{ releases.quantity|number_format }}
                        			</h3>
                        		</div>
                        		<div class="col-md-2 col-xs-6">
                        			<h3>Depot: </h3>
                        		</div>
                        		<div class="col-md-4 col-xs-6">
                        			<h3>{{ releases.depot.name }}</h3>
                        		</div>
                        	</div>
                        	<div class="row">
                        		<div class="col-md-2 col-xs-6">
                        			<h3>Date: </h3>
                        		</div>
                        		<div class="col-md-4 col-xs-6">
                        			<h3>{{ releases.date }}</h3>
                        		</div>
                        		<div class="col-md-2 col-xs-6">
                        			<h3>Bank: </h3>
                        		</div>
                        		<div class="col-md-4 col-xs-6">
                        			<h3>{{ releases.bank }}</h3>
                        		</div>
                        	</div>
                        	<div class="row">
                                    <div class="col-md-2 col-xs-6">
                                          <h3>Balance: </h3>
                                    </div>
                                    <div class="col-md-4 col-xs-6">
                                        <h3> 
                                          {{ (releases.quantity - total)|number_format }}
                                        </h3>
                                    </div>
                              </div>
                        	<div class="row">
                        		<div class="col-md-2">
                        			<h3>Ordered By: </h3>
                        		</div>
                        		<div class="col-md-2">
                        			<h3 class="sign">{{ releases.signoneid ? releases.signoneid.name : '' }}</h3>
                        		</div>
                        		<div class="col-md-2">
                        			<h3>Authorised By: </h3>
                        		</div>
                        		<div class="col-md-2">
                        			<h3 class="sign">{{ releases.signtwoid ? releases.signtwoid.name : '' }}</h3>
                        		</div>
                        		<div class="col-md-2">
                        			<h3>Released By: </h3>
                        		</div>
                        		<div class="col-md-2">
                        			<h3 class="sign">{{ releases.signthreeid ? releases.signthreeid.name : '' }}</h3>
                        		</div>
                        	</div>
                        </div>
	                </div>
	            </div>
				<div class="col-md-12">
	                <div class="card">
	                    <div class="header">
	                        <h4 class="title">Cargo</h4>
	                    </div>
	                    <div class="content table-responsive table-full-width">
                                <table class="table table-hover">
									
									<tr>
										<td scope="row">Initial Quantity</td>
										<td>
											{{ cargo.initial|number_format }}
										</td>
									</tr>
									<tr>
										<td scope="row">Unreleased</td>
										<td>
											{{ unreleased|number_format }}
										</td>
									</tr>

									<tr>
										<td scope="row">Unloaded</td>
										<td>
											{{ unloaded|number_format }}
										</td>
									</tr>
                                </table>

                        </div>
	                </div>
	            </div>
	            <div class="col-md-12">
	                <div class="card">
	                    <div class="header">
	                        <h4 class="title">Loaded</h4>
	                    </div>
	                    <div class="content table-responsive table-full-width">
                                <table class="table datatable table-hover">
                                    <thead>
                                        <tr>
							              <th>Truck Number</th>
							              <th>Quantity</th>
							              <th>Date</th>
							              <th>Waybill</th>
							              <th>Details</th>
							              <th>Rep</th>
							              <th>Actions</th>
							            </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in load %}
											<tr>
												<td>{{ item.truck }}</td>
												<td>
													{{ item.quantity|number_format }}
												</td>
												<td>{{ item.date }}</td>
												<td>{{ item.waybill }}</td>
												<td>{{ item.details }}</td>
												<td>{{ item.user.name }}</td>
												<td><a href="{{ path('editLoad', {'id': item.id}) }}">Edit</a></td>
											</tr>
										{% endfor %}
                                    </tbody>
                                </table>

                        </div>
	                </div>
	            </div>
	            <div class="col-md-12">
	                <div class="card">
	                    <form action="{{ path('addLoad', {'id': release}) }}" method="post" class="form-inline">
	                    	<div class="header">
	                    		<h4>Select Number of Trucks
		                        <select class="form-control" name="num" id="number" onchange="counts();">
									<option value="-1">0</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
									<option value="7">7</option>
									<option value="8">8</option>
								</select></h4>
		                    </div>
		                    <input name="release" type="hidden" value="{{ release }}">
		                    <div class="content table-responsive table-full-width">
	                            <table class="table table-hover" id="cargos">
	                            </table>
	                            <input style="margin-left: 100px;" type="submit" name="submit" class="btn btn-default" value="Save Details">
	                        </div>
	                    </form>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<script type="text/javascript">
		var tabl = document.getElementById('cargos');
		var count = 0;
		
		function counts(){
			count = document.getElementById('number').value;
			while(tabl.rows.length > 0) {
			  tabl.deleteRow(0);
			}
			for (var i = 0; i<count; i++) {
				var row = tabl.insertRow(0);
				var cell1 = row.insertCell(0);
				cell1.innerHTML = `
					<td><label for="truck">Truck Number: </label></td>
					<td><input type="text" required name="truck[]" id="truck${i}" class="form-control" size="8">&nbsp\;&nbsp\;</td>
					<td><label for="quantity">Quantity: </label></td><td><input type="text" required name="quantity[]" id="quantity${i}" class="form-control" size="8">&nbsp\;&nbsp\;</td>
					<td><label for="date">Date: </label></td><td><input type="text" required name="date[]" placeholder="yyyy-mm-dd" class="form-control datepicker" size="8">&nbsp\;&nbsp\;</td>
					<td><label for="details">Details: </label></td>
					<td><input type="text" required name="details[]" id="details${i}" class="form-control" size="8">&nbsp\;&nbsp\;</td>
					<td><label for="waybill">Waybill: </label></td><td><input type="text" required name="waybill[]" id="waybill${i}" class="form-control" size="8"></td>`;
			}

			$(".datepicker").datepicker();
		}

		


	</script>
{% endblock %}