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

{% block stylesheet %}
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

  <style>
    .form-control.select2 {
      height: 40px;
    }

    .select2-container .select2-selection--single {
      height: inherit;
    }
  </style>
  
{% endblock %}

{% block content %}
	<div class="content">
	    <div class="container-fluid">
	        <div class="row">
	            <div class="col-md-12">
	                <div class="card">
	                    <div class="header">
	                        <h4 class="title">New Release Order</h4>
	                    </div>
	                    <div class="content">
                                <form action="{{ path('generate')}}" method="post" name="cargo">
                                			<div class="form-group">
                                				<label for="cargo">Cargo:</label>
                                				
                                		{% if cargoId is defined %}
                                          <select name="cargo" class="form-control" disabled>
                                            <option value="{{cargoId.id}}">{{cargoId.cargoname}}</option>
                                          </select>
                                          <input type="hidden" name="cargo" value="{{cargoId.id}}">
                                        {% else %}
                                          <select name="cargo" id="cargo" class="form-control select2" required>
                                            <option value=""> Select Cargo </option>
                                            {% for item in cargo %}
                                              <option value="{{ item.id }}">{{ item.cargoname }}</option>
                                            {% endfor %}
                                          </select>
                                        {% endif %}
                                				
                                			</div>
                                			<div class="form-group">
                                				<label for="quantity">Quantity:&nbsp;</label>
                                				<input type="text" name="quantity" id="quantity" class="form-control" required>
                                			</div>
                                			<div class="form-group">
                                				<label for="customer">Customer:&nbsp;</label>
                                				<input type="text" name="customer" id="customer" class="form-control" required>
                                			</div>
                                			{# <div class="form-group">
                                				<label for="depot">Depot:</label>
                                				<input type="text" name="depot" id="depot" class="form-control" required>
                                			</div> #}
											<div class="form-group">
												<label for="depot">Depot</label>
												<select name="depot" id="depot" class="form-control select2">
												<option value="">Select Depot</option>
													{% for item in depots %}
														<option value="{{ item.id }}">{{ item.name }}</option>
													{% endfor %}
											</select>
											</div>
                                			<div class="form-group">
                                				<label for="bank">Bank:</label>
                                				<input type="text" name="bank" id="bank" class="form-control" required>
                                			</div>
                                			<div class="form-group">
                                				<label for="date">Date:</label>
                                				<input type="text" name="date" id="datepicker" class="form-control">
                                			</div>
                                				<input type="submit" name="submit" class="btn btn-default" value="Save Details">
                                	</form>
                        </div>
	                </div>
	            </div>

	            
	        </div>
	    </div>
	</div>
{% endblock %}

{% block javascript %}
  {{ parent() }}
  
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
  $('.select2').select2();
</script>
  
{% endblock %}