@model ParcelWeb.Core.ViewModels.ShipmentCalculateVM
@using ParcelWeb
@using ParcelWeb.Core.Configuration
@{
	ViewBag.Title = "Quick Quote";


}
<style>
	.field-validation-error {
		font-size: 10px;
	}

	.input-group-addon {
		border-radius: 0px;
	}

	.form-control {
		border-radius: 0px;
	}

	.header-area {
		box-shadow: 0px 1px 3px 0px rgba(193,193,193,1.00);
	}

	table th{
		font-size:14px;
		text-align:left !important;
	}

	table th, table td {
		background-color: transparent !important;
		border:none !important;
		color:black !important;
		padding:5px !important;
	}
</style>
@if (Settings.CurrentTheme == AvySettings.General.Themes.Theme3)
{
	<div class="wshipping-content-block shipping-block">
		<div class="container">
			<h2 class="heading2-border mt0">Quick Quote</h2>
			<div class="row">
				<div class="shipping-form-block">
					<form id="frmCalculateShipping" class="steps" style="border:1px solid #eee">
						<fieldset>
							<div class="row">
								<div class="col-md-9">
									<div class="form-body">
										<div class="row">
											<div class="col-md-3">
												<div class="form-group">
													<label for="CollectionCountry">Collection Country</label>
													@Html.DropDownList("CollectionCountry", Enumerable.Empty<SelectListItem>(), new { @class = "form-control select2-size-lg js-select", required = "required" })
												</div>
											</div>
											<div class="col-md-3">
												<div class="form-group">
													<label for="DeliveryCountry">Delivery Country</label>
													@Html.DropDownList("DeliveryCountry", Enumerable.Empty<SelectListItem>(), new { @class = "select-xs form-control  js-select", required = "required" })
												</div>
											</div>
											<div class="col-md-3">
												<div class="form-group">
													<label for="ParcelTypeId">ParcelType</label>
													@Html.DropDownList("ParcelTypeId", @ViewBag.ParcelTypeId as SelectList, new { @class = "form-control js-select", required = "required" })
												</div>
											</div>
											<div class="col-md-3">
												<div class="form-group">
													<label for="Quantity">Quantity</label>
													<select class="select2-size-xs form-control" id="Quantity" name="Quantity">
														<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>
														<option value="9">9</option>
														<option value="10">10</option>
														<option value="11">11</option>
														<option value="12">12</option>
														<option value="13">13</option>
														<option value="14">14</option>
														<option value="15">15</option>
														<option value="16">16</option>
														<option value="17">17</option>
														<option value="18">18</option>
														<option value="19">19</option>
														<option value="20">20</option>
														<option value="21">21</option>
														<option value="22">22</option>
														<option value="23">23</option>
														<option value="24">24</option>
														<option value="25">25</option>
														<option value="26">26</option>
														<option value="27">27</option>
														<option value="28">28</option>
														<option value="29">29</option>
														<option value="30">30</option>
													</select>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-12">
												<div class="table-responsive">
													<table class="table table-condensed border-0" id="dgvShipmentDetail">
														<thead>
															<tr>
																<th>Weight (kg)</th>
																<th>Length (cm)</th>
																<th>Width (cm)</th>
																<th>Height (cm)</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td>
																	@Html.Editor("Weight0", new { htmlAttributes = new { @class = "form-control font-weight-bold Weight", placeholder = "0" } })
																	@Html.ValidationMessage("WeightSpan0", "", new { @class = "text-danger WeightSpan small", @id = "WeightSpan0" })
																</td>
																<td>
																	@Html.Editor("Length0", new { htmlAttributes = new { @class = "form-control font-weight-bold Length", placeholder = "0" } })
																	@Html.ValidationMessage("LengthSpan0", "", new { @class = "text-danger LengthSpan small", @id = "LengthSpan0" })
																</td>
																<td>
																	@Html.Editor("Width0", new { htmlAttributes = new { @class = "form-control font-weight-bold Width", placeholder = "0" } })
																	@Html.ValidationMessage("WidthSpan0", "", new { @class = "text-danger WidthSpan small", @id = "WidthSpan0" })
																</td>
																<td>
																	@Html.Editor("Height0", new { htmlAttributes = new { @class = "form-control font-weight-bold Height", placeholder = "0" } })
																	@Html.ValidationMessage("HeightSpan0", "", new { @class = "text-danger HeightSpan small", @id = "HeightSpan0" })
																</td>
																<td style="display:none">
																	@Html.Editor("VolWeight0", new { htmlAttributes = new { @class = "form-control font-weight-bold VolWeight", placeholder = "0.00", @readonly = "readonly" } })
																</td>
															</tr>
														</tbody>
													</table>

												</div>
											</div>
										</div>
										<br />
										<div class="form-actions right">
											<a href="javascript:void(0)" id="btnCalculate" class="next action-button"><i class="icon-check2"></i> GET RATES</a>
											<a href="@Url.Action("Index","Home")" class="action-button btn-red"><i class="icon-cross2"></i> CANCEL</a>
										</div>
									</div>
								</div>

							</div>

						</fieldset>
					</form>

				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-8">
					<div id="Content">

					</div>
				</div>
			</div>
		</div>
	</div>

}
else
{
	<section id="sbg">
		<div class="sbg">

			<div class="container">

				<div class="">
					<div class="row">
						<div class="col-md-8">
							<div class="panel panel-dark">
								<div class="panel-heading">
									<h4 class="panel-title">
										Quick Quote
									</h4>
								</div>
								<div class="panel-body">
									<form id="frmCalculateShipping">
										<div class="row">
											<div class="col-md-12">
												<div class="form-body">

													<div class="row">
														<div class="col-md-3">
															<div class="form-group">
																<label for="CollectionCountry">Collection Country</label>
																@Html.DropDownList("CollectionCountry", Enumerable.Empty<SelectListItem>(), new { @class = "form-control select2-size-lg js-select", required = "required" })
															</div>
														</div>
														<div class="col-md-3">
															<div class="form-group">
																<label for="DeliveryCountry">Delivery Country</label>
																@Html.DropDownList("DeliveryCountry", Enumerable.Empty<SelectListItem>(), new { @class = "select-xs form-control  js-select", required = "required" })
															</div>
														</div>
														<div class="col-md-3">
															<div class="form-group">
																<label for="ParcelTypeId">ParcelType</label>
																@Html.DropDownList("ParcelTypeId", @ViewBag.ParcelTypeId as SelectList, new { @class = "form-control js-select", required = "required" })
															</div>
														</div>
														<div class="col-md-3">
															<div class="form-group">
																<label for="Quantity">Quantity</label>
																<select class="select2-size-xs form-control" id="Quantity" name="Quantity">
																	<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>
																	<option value="9">9</option>
																	<option value="10">10</option>
																	<option value="11">11</option>
																	<option value="12">12</option>
																	<option value="13">13</option>
																	<option value="14">14</option>
																	<option value="15">15</option>
																	<option value="16">16</option>
																	<option value="17">17</option>
																	<option value="18">18</option>
																	<option value="19">19</option>
																	<option value="20">20</option>
																	<option value="21">21</option>
																	<option value="22">22</option>
																	<option value="23">23</option>
																	<option value="24">24</option>
																	<option value="25">25</option>
																	<option value="26">26</option>
																	<option value="27">27</option>
																	<option value="28">28</option>
																	<option value="29">29</option>
																	<option value="30">30</option>
																</select>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-11 col-xs-10">
															<div class="table-responsive">
																<table class="table table-condensed border-0" id="dgvShipmentDetail">
																	<thead class="thead-inverse">
																		<tr>
																			<th>Weight (kg)</th>
																			<th>Length (cm)</th>
																			<th>Width (cm)</th>
																			<th>Height (cm)</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr>
																			<td>
																				@Html.Editor("Weight0", new { htmlAttributes = new { @class = "form-control font-weight-bold Weight", placeholder = "0" } })
																				@Html.ValidationMessage("WeightSpan0", "", new { @class = "text-danger WeightSpan small", @id = "WeightSpan0" })
																			</td>
																			<td>
																				@Html.Editor("Length0", new { htmlAttributes = new { @class = "form-control font-weight-bold Length", placeholder = "0" } })
																				@Html.ValidationMessage("LengthSpan0", "", new { @class = "text-danger LengthSpan small", @id = "LengthSpan0" })
																			</td>
																			<td>
																				@Html.Editor("Width0", new { htmlAttributes = new { @class = "form-control font-weight-bold Width", placeholder = "0" } })
																				@Html.ValidationMessage("WidthSpan0", "", new { @class = "text-danger WidthSpan small", @id = "WidthSpan0" })
																			</td>
																			<td>
																				@Html.Editor("Height0", new { htmlAttributes = new { @class = "form-control font-weight-bold Height", placeholder = "0" } })
																				@Html.ValidationMessage("HeightSpan0", "", new { @class = "text-danger HeightSpan small", @id = "HeightSpan0" })
																			</td>
																			<td style="display:none">
																				@Html.Editor("VolWeight0", new { htmlAttributes = new { @class = "form-control font-weight-bold VolWeight", placeholder = "0.00", @readonly = "readonly" } })
																			</td>
																		</tr>
																	</tbody>
																</table>

															</div>
														</div>
													</div>
													<div class="form-actions right">
														<a href="javascript:void(0)" id="btnCalculate" class="btn btn-dark"><i class="icon-check2"></i> GET RATES</a>
														<a href="@Url.Action("Index","Home")" class="btn btn-default btn-flat"><i class="icon-cross2"></i> CANCEL</a>
													</div>
												</div>
											</div>

										</div>
									</form>
								</div>

							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8">
							<div id="Content">

							</div>
						</div>
					</div>

				</div>
			</div><!-- /.container -->
		</div>
		<!-- /.sbg -->
	</section><!-- /#sbg -->

}

<div style="display:none;">
	@Html.Editor("TotalWeight", new { htmlAttributes = new { @class = "form-control font-weight-bold hidden", placeholder = "0" } })
	@Html.Editor("TotalVolWeight", new { htmlAttributes = new { @class = "form-control font-weight-bold hidden", placeholder = "0" } })
	@Html.Editor("TotalChargeableWeight", new { htmlAttributes = new { @class = "form-control font-weight-bold hidden", placeholder = "0" } })
</div>


@section Scripts {
	@Scripts.Render("~/bundles/jqueryval")
	<script>

		$(document).ready(function () {

			$(function () {

				var s = $('select[name="CollectionCountry"]');
				var r = $('select[name="DeliveryCountry"]');
				$.ajax({
					type: "GET",
					url: "/Countries/GetAll",
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					beforeSend: function () {
						$.blockUI({
							css: {
								border: 'none',
								padding: '15px',
								backgroundColor: '#000',
								'-webkit-border-radius': '10px',
								'-moz-border-radius': '10px',
								opacity: .5,
								color: '#fff'
							}
						});
					},
					success: function (data) {
						$(data).each(function (idx, obj) {
							$("<option />", { value: obj.Id, text: obj.Name }).appendTo(s);
							$("<option />", { value: obj.Id, text: obj.Name }).appendTo(r);
                        });                        
                        $('select[name="CollectionCountry"]').val(@Settings.DefaultSelectedCountry);
					},
					failure: function () {
						alert("Failed!");
					},
					complete: function () {
						$.unblockUI();
					}
				});
			});

			$(".Weight, .Length, .Width, .Height").on('change', function () {
				var index = $(this).parent().parent().index();
				var Weight = $('#Weight' + index).val();
				var Length = $('#Length' + index).val();
				var Width = $('#Width' + index).val();
				var Height = $('#Height' + index).val();
				var volweight = CalculateWeight(Length, Width, Height, Weight, index);
				$("#VolWeight" + index).val(volweight);

				CalculateTotal();
			})

			$("#Quantity").on('change', function () {
				AddRemoveRowsBasedOnQuantity();
			})

			$('#btnCalculate').on('click', function () {
				if (ValidateForm()) {

					var Data = {
						CollectionCountry: $('select[name="CollectionCountry"]').val(),
						DeliveryCountry: $('select[name="DeliveryCountry"]').val(),
						ParcelTypeId: $('select[name="ParcelTypeId"]').val(),
						Quantity: $('select[name="Quantity"]').val(),
						Weight: $('#TotalChargeableWeight').val(),
						Length: 0,
						Width: 0,
						Height: 0
					};


					$.ajax({
						type: "POST",
						url: "/Home/QuoteView",
						data: Data,
						dataType: "html",
						traditional: true,
						beforeSend: function () {
							$.blockUI({
								css: {
									border: 'none',
									padding: '15px',
									backgroundColor: '#000',
									'-webkit-border-radius': '10px',
									'-moz-border-radius': '10px',
									opacity: .5,
									color: '#fff'
								}
							});
						},
						success: function (data) {
							$('#Content').empty();
							$('#Content').html(data);
						},
						error: function (jqXhr) {
							if (jqXhr.status == 404) {
								$('#Content').empty();
								alert("Something wrong...!");
							}
						},
						complete: function () {
							$.unblockUI();
						}
					});

				}
				return false;
			})


		});

		var count = 1;
		var RecentQuantity = 1;
		function AddRemoveRowsBasedOnQuantity() {
			var Quantity = $('select[name="Quantity"]').val();
			if (RecentQuantity < Quantity) {
				Quantity = Quantity - RecentQuantity;
				RecentQuantity = Quantity + RecentQuantity;

				for (var i = 0; i < Quantity; i++) {
					$('#dgvShipmentDetail tbody>tr:last').clone(true).insertAfter('#dgvShipmentDetail tbody>tr:last');
					$('#dgvShipmentDetail tbody>tr:last>td> .Weight').prop("name", "Weight" + count).prop("id", "Weight" + count).val("");
					$('#dgvShipmentDetail tbody>tr:last>td> .Length').prop("name", "Length" + count).prop("id", "Length" + count).val("");
					$('#dgvShipmentDetail tbody>tr:last>td> .Width').prop("name", "Width" + count).prop("id", "Width" + count).val("");
					$('#dgvShipmentDetail tbody>tr:last>td> .Height').prop("name", "Height" + count).prop("id", "Height" + count).val("");
					$('#dgvShipmentDetail tbody>tr:last>td> .VolWeight').prop("name", "VolWeight" + count).prop("id", "VolWeight" + count).val("");

					$('#dgvShipmentDetail tbody>tr:last>td> .WeightSpan').prop("name", "Weight" + count).prop("id", "WeightSpan" + count).hide();
					$('#dgvShipmentDetail tbody>tr:last>td> .LengthSpan').prop("name", "Length" + count).prop("id", "LengthSpan" + count).hide();
					$('#dgvShipmentDetail tbody>tr:last>td> .WidthSpan').prop("name", "Width" + count).prop("id", "WidthSpan" + count).hide();
					$('#dgvShipmentDetail tbody>tr:last>td> .HeightSpan').prop("name", "Height" + count).prop("id", "HeightSpan" + count).hide();

					count++;
				}
			}
			else {

				Quantity = RecentQuantity - Quantity;
				RecentQuantity = RecentQuantity - Quantity;

				for (var i = 0; i < Quantity; i++) {
					if ($('#dgvShipmentDetail tbody>tr:last').index() + 1 != 1) {
						$('#dgvShipmentDetail tbody>tr:last').remove();
						count--;
					}
				}
			}
		}

		function ValidateForm() {
			try {
				var InvalidFields = 0;
				var Regex = /^\d+\.?\d{0,2}$/;

				var Quantity = $('select[name="Quantity"]').val();
				for (var i = 0; i < Quantity; i++) {

					var Weight = $('#Weight' + i).val();
					var Length = $('#Length' + i).val();
					var Width = $('#Width' + i).val();
					var Height = $('#Height' + i).val();

					if (Weight == "") {
						$("#WeightSpan" + i).text("Weight is required.");
						$("#WeightSpan" + i).show();
						InvalidFields++;
					} else if (!Regex.test(Weight)) {
						$("#WeightSpan" + i).text("Weight should be a valid number.");
						$("#WeightSpan" + i).show();
						InvalidFields++;
					}
					else {
						$("#WeightSpan" + i).hide();
					}

					if (Length == "") {
						$("#LengthSpan" + i).text("Length is required.");
						$("#LengthSpan" + i).show();
						InvalidFields++;
					} else if (!Regex.test(Length)) {
						$("#LengthSpan" + i).text("Length should be a valid number.");
						$("#LengthSpan" + i).show();
						InvalidFields++;
					} else {
						$("#LengthSpan" + i).hide();
					}

					if (Width == "") {
						$("#WidthSpan" + i).text("Width is required.");
						$("#WidthSpan" + i).show();
						InvalidFields++;
					} else if (!Regex.test(Width)) {
						$("#WidthSpan" + i).text("Width should be a valid number.");
						$("#WidthSpan" + i).show();
						InvalidFields++;
					} else {
						$("#WidthSpan" + i).hide();
					}

					if (Height == "") {
						$("#HeightSpan" + i).text("Height is required.");
						$("#HeightSpan" + i).show();
						InvalidFields++;
					} else if (!Regex.test(Height)) {
						$("#HeightSpan" + i).text("Height should be a valid number.");
						$("#HeightSpan" + i).show();
						InvalidFields++;
					} else {
						$("#HeightSpan" + i).hide();
					}
				}

				if (InvalidFields > 0)
					return false;
				else
					return true;
			}
			catch (ex) { console.log(ex); return false; }
		}

		function CalculateWeight(length, width, height, weight, row) {
			volWeight = 0;
			if (length != '' && width != '' && height != '' && weight != '') {
				volWeight = (parseInt(length) * parseInt(width) * parseInt(height)) / 5000;
				CalculateTotal();
			}
			return volWeight.toFixed(1);
		}

		function CalculateTotal() {
			var totalWeight = 0, volWeight = 0;

			var $tblrows = $("#dgvShipmentDetail tbody tr");
			$tblrows.each(function (index) {
				var _totalweight = 0, _totalVolweight = 0;
				if ($.isNumeric($('#Weight' + index).val())) {
					_totalweight = $('#Weight' + index).val();
				}
				if ($.isNumeric($('#VolWeight' + index).val())) {
					_totalVolweight = $('#VolWeight' + index).val();

				}

				totalWeight += parseFloat(_totalweight);
				volWeight += parseFloat(_totalVolweight);
			});

			$('#TotalWeight').val(totalWeight);
			$('#TotalVolWeight').val(volWeight.toFixed(1));
			if (totalWeight > volWeight) {
				$('#TotalChargeableWeight').val(totalWeight);
			}
			else {
				$('#TotalChargeableWeight').val(volWeight);
			}


		}
	</script>

}