{% extends 'base_admin.html.twig' %}
{% block body %}
	<div class="breadcrumb-holder">
		<div class="container-fluid">
			<ul class="breadcrumb">
				<li class="breadcrumb-item">
					<a href="{{ path('shipment_index') }}">
						Order shipments
					</a>
				</li>
				<li class="breadcrumb-item active">
					{{ title }}
				</li>
			</ul>
		</div>
	</div>
	<br/>
	<div class="container-fluid">
		<div id="alert-forms-success" class="alert alert-success" role="alert" style="display: none;"></div>
		<div id="alert-forms-error" class="alert alert-danger" role="alert" style="display: none;"></div>
		{% for message in app.flashes('notice') %}
			<div class="alert alert-success" role="alert">
				{{ message }}
			</div>
		{% endfor %}
		{% for message in app.flashes('warning') %}
			<div class="alert alert-warning" role="alert">
				{{ message }}
			</div>
		{% endfor %}
		{% for message in app.flashes('error') %}
			<div class="alert alert-danger" role="alert">
				{{ message }}
			</div>
		{% endfor %}
		<div class="card">
			<div class="card-header">
				<h3>Boxes of the order
					{{ order.orderId }}
					from the seller
					{{ order.seller.company }}
				</h3>
			</div>
			<div class="card-body">
				<div class="row">
					<div class="col-md-3">
						<div class="input-group">
							<input type="number" min="1" placeholder="Introduce a quantity of boxes" class="form-control" name="box-quantity" id="box-quantity"/>
							<div class="input-group-append">
								<button type="button" id="btn-add-boxes" class="btn btn-primary">Add boxes</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="card-header">
				<h3>
					Trackings of the boxes
				</h3>
			</div>
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-hover table-bordered">
						<thead>
							<tr id="row-trackings-headers">
								{% for box in order.shipmentBoxes %}
									<th>Tracking box
										{{ box.boxNumber }}</th>
								{% endfor %}
							</tr>
						</thead>
						<tbody>
							<tr id="row-trackings-inputs">
								{% for box in order.shipmentBoxes %}
									<td>
										<input type="text" value="{{ box.tracking }}" class="form-control inp-tracking-boxes" data-box-number="{{ box.boxNumber }}"/>
									</td>
								{% endfor %}
							</tr>
						</tbody>
					</table>
				</div>

			</div>
		</div>
		<div class="card">
			<div class="card-header">
				<h3>Quantity by box</h3>
			</div>
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-hover table-bordered">
						<thead>
							<tr id="row-quantity-boxes-headers">
								<th>
									Sku
								</th>
								<th>
									Quantity
								</th>
								{% for box in order.shipmentBoxes %}
									<th>Quantity in box
										{{ box.boxNumber }}</th>
								{% endfor %}
							</tr>
						</thead>
						<tbody id="shipment-lines">
							{% for line in lines %}
								<tr class="row-quantity-inputs" data-line-id="{{ line.id }}">
									<td>
										{{ line.product.sku }}
									</td>
									<td>
										{{ line.quantity }}
									</td>
									{% for lineBox in line.shipmentLineBoxes %}
										<td>
											<input type="number" min="0"
                                            value="{{ lineBox.quantity }}"
                                            class="form-control inp-quantity-boxes"
                                            data-line-id="{{ line.id }}" data-box-number="{{ lineBox.box.boxNumber }}"/>
										</td>
									{% endfor %}
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<button class="btn btn-primary" id="btnSave">Save distribution</button>
							<a class="btn btn-secondary" href="{{ path('shipment_index') }}">
								Cancel
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="routes" data-save-boxes-route="{{ path('save_shipment_boxes', {'orderId': order.id}) }}"></div>
{% endblock %}

{% block javascripts %}
	<script src="{{ asset('js/app/shipment_box/form.js') }}"></script>
{% endblock javascripts %}