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

{% block body %}
	<!-- BEGIN: Subheader -->
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title">Batteries</h3>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        <!--Begin::Section-->
        <div class="row">
            <div class="col-xl-12">
            	<div class="m-portlet m-portlet--mobile">
            		<div class="m-portlet__head">
						<div class="m-portlet__head-caption">
							<div class="m-portlet__head-title">
								<span class="m-portlet__head-icon">
									<i class="fa fa-battery-3"></i>
								</span>
								<h3 class="m-portlet__head-text">
									{% if row is defined %}
										Edit Battery
										<small>{{ row.getProductCode() }}</small>
									{% else %}
										New Battery
									{% endif %}
								</h3>
							</div>
						</div>
					</div>
                    <form id="row-form" class="m-form m-form--label-align-right" method="post" action="{{ row is defined ? url('battery_update_submit', {'id': row.getId()}) : url('battery_create_submit') }}">
						<div class="m-portlet__body">	
							<ul class="nav nav-tabs" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" data-toggle="tab" href="#product-info">Product Information</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#vehicle-compatibility">Vehicle Compatibility</a>
								</li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane active" id="product-info" role="tabpanel">
									<div class="m-form__section m-form__section--first">
										<div class="m-form__heading">
											<h3 class="m-form__heading-title">
												Product Details
											</h3>
										</div>
										<div class="form-group m-form__group row">
											<label class="col-lg-1 col-form-label" data-field="prod_code">
												Product Code:
											</label>
											<div class="col-lg-3">
												<input type="text" name="prod_code" class="form-control m-input" value="{{ row is defined ? row.getProductCode() }}">
												<div class="form-control-feedback hide" data-field="prod_code"></div>
												<span class="m-form__help">Unique identifier for this product</span>
											</div>
											<label class="col-lg-1 col-form-label" data-field="sell_price">
												Selling Price:
											</label>
											<div class="col-lg-3">
												<input type="text" name="sell_price" class="form-control m-input" value="{{ row is defined ? row.getSellingPrice() }}">
												<div class="form-control-feedback hide" data-field="sell_price"></div>
											</div>
										</div>
										<div class="form-group m-form__group row">
											<label class="col-lg-1 col-form-label" data-field="manufacturer">
												Manufacturer:
											</label>
											<div class="col-lg-3">
												<select class="form-control m-input" id="manufacturer" name="manufacturer">
													<option value=""></option>
													{% for manufacturer in bmfgs %}
														<option value="{{ manufacturer.getID() }}"{{ row is defined and manufacturer.getID() == row.getManufacturer().getID() ? ' selected' }}>{{ manufacturer.getName() }}</option>
													{% endfor %}
												</select>
												<div class="form-control-feedback hide" data-field="manufacturer"></div>
											</div>
											<label class="col-lg-1 col-form-label" data-field="model">
												Model:
											</label>
											<div class="col-lg-3">
												<select class="form-control m-input" id="model" name="model">
													<option value=""></option>
													{% for model in models %}
														<option value="{{ model.getID() }}"{{ row is defined and model.getID() == row.getModel().getID() ? ' selected' }}>{{ model.getName() }}</option>
													{% endfor %}
												</select>
												<div class="form-control-feedback hide" data-field="model"></div>
											</div>
											<label class="col-lg-1 col-form-label" data-field="size">
												Size:
											</label>
											<div class="col-lg-3">
												<select class="form-control m-input" id="size" name="size">
													<option value=""></option>
													{% for size in sizes %}
														<option value="{{ size.getID() }}"{{ row is defined and size.getID() == row.getSize().getID() ? ' selected' }}>{{ size.getName() }}</option>
													{% endfor %}
												</select>
												<div class="form-control-feedback hide" data-field="size"></div>
											</div>
										</div>
									</div>
									<div class="m-form__seperator m-form__seperator--dashed"></div>
									<div class="m-form__section">
										<div class="m-form__heading">
											<h3 class="m-form__heading-title">
												Warranty
											</h3>
										</div>
										<div class="form-group m-form__group row">
											<label class="col-lg-1 col-form-label" data-field="warr_personal">
												Personal:
											</label>
											<div class="col-lg-3">
												<input type="number" name="warr_personal" class="form-control m-input" value="{{ row is defined ? row.getWarrantyPersonal() }}">
												<div class="form-control-feedback hide" data-field="warr_personal"></div>
												<span class="m-form__help">In months</span>
											</div>
											<label class="col-lg-1 col-form-label" data-field="warr_commercial">
												Commercial:
											</label>
											<div class="col-lg-3">
												<input type="number" name="warr_commercial" class="form-control m-input" value="{{ row is defined ? row.getWarrantyCommercial() }}">
												<div class="form-control-feedback hide" data-field="warr_commercial"></div>
												<span class="m-form__help">In months</span>
											</div>
										</div>
									</div>
									<div class="m-form__section">
										<div class="m-form__heading">
											<h3 class="m-form__heading-title">
												Specifications
											</h3>
										</div>
										<div class="form-group m-form__group row">
											<label class="col-lg-1 col-form-label" data-field="length">
												Length:
											</label>
											<div class="col-lg-3">
												<input type="number" name="length" class="form-control m-input" value="{{ row is defined ? row.getLength() }}">
												<div class="form-control-feedback hide" data-field="length"></div>
												<span class="m-form__help">In millimeters (mm)</span>
											</div>
											<label class="col-lg-1 col-form-label" data-field="width">
												Width:
											</label>
											<div class="col-lg-3">
												<input type="number" name="width" class="form-control m-input" value="{{ row is defined ? row.getWidth() }}">
												<div class="form-control-feedback hide" data-field="width"></div>
												<span class="m-form__help">In millimeters (mm)</span>
											</div>
											<label class="col-lg-1 col-form-label" data-field="height">
												Height:
											</label>
											<div class="col-lg-3">
												<input type="number" name="height" class="form-control m-input" value="{{ row is defined ? row.getHeight() }}">
												<div class="form-control-feedback hide" data-field="height"></div>
												<span class="m-form__help">In millimeters (mm)</span>
											</div>
										</div>
										<div class="form-group m-form__group row">
											<label class="col-lg-1 col-form-label" data-field="total_height">
												Total Height:
											</label>
											<div class="col-lg-3">
												<input type="number" name="total_height" class="form-control m-input" value="{{ row is defined ? row.getTotalHeight() }}">
												<div class="form-control-feedback hide" data-field="total_height"></div>
												<span class="m-form__help">In millimeters (mm)</span>
											</div>
											<label class="col-lg-1 col-form-label" data-field="res_capacity">
												Reserve Capacity
											</label>
											<div class="col-lg-3">
												<input type="number" name="res_capacity" class="form-control m-input" value="{{ row is defined ? row.getReserveCapacity() }}">
												<div class="form-control-feedback hide" data-field="res_capacity"></div>
												<span class="m-form__help">In minutes</span>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-pane" id="vehicle-compatibility" role="tabpanel">
									<div class="form-group m-form__group row form-group-inner">
										<div class="col-lg-12">
											<div id="data-vehicles"></div>
										</div>
									</div>
									<div class="form-group m-form__group row form-group-inner">
										<label class="col-lg-1 col-form-label" data-field="vehicle_list">
											Add Vehicle:
										</label>
										<div class="col-lg-3">
											<select name="vehicle_list" class="form-control m-input" id="vmfg">
												<option value="">Select a manufacturer</option>
												{% for manufacturer in vmfgs %}
													<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
												{% endfor %}
											</select>
										</div>
										<div class="col-lg-3">
											<select name="vehicle_list" class="form-control m-input" id="vehicle" disabled>
												<option value="">Select a manufacturer first</option>
											</select>
										</div>
										<div class="col-lg-3">
											<button type="button" class="btn btn-primary" id="btn-add-vehicle" disabled>Add to List</button>
										</div>
									</div>
								</div>
							</div>
			            </div>
			            <div class="m-portlet__foot m-portlet__foot--fit">
							<div class="m-form__actions m-form__actions--solid m-form__actions--right">
								<div class="row">
									<div class="col-lg-12">
										<button type="submit" class="btn btn-success">Submit</button>
										<a href="{{ url('battery_list') }}" class="btn btn-secondary">Cancel</a>
									</div>
								</div>
							</div>
						</div>
					</form>
                </div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	<script>
		$(function() {
			$("#row-form").submit(function(e) {
				var form = $(this);
				var formdata = form.serialize();

				e.preventDefault();

				// add vehicle data
				vdata = '';
				$.each(vehicleRows, function(index, vehicle) {
					vdata += "&vehicles%5B%5D=" + vehicle.id;
				});

				// append to form data
				formdata += vdata;

				$.ajax({
					method: "POST",
					url: form.prop('action'),
					data: formdata
				}).done(function(response) {
					// remove all error classes
					removeErrors();
					swal({
						title: 'Done!',
						text: 'Your changes have been saved!',
						type: 'success',
						onClose: function() {
							window.location.href = "{{ url('battery_list') }}";
						}
					});
				}).fail(function(response) {
					var errors = response.responseJSON.errors;
					var firstfield = false;

					// remove all error classes first
					removeErrors();

					// display errors contextually
					$.each(errors, function(field, msg) {
						var formfield = $("[name='" + field + "']");
						var label = $("label[data-field='" + field + "']");
						var msgbox = $(".form-control-feedback[data-field='" + field + "']");

						// add error classes to bad fields
						formfield.addClass('form-control-danger');
						label.addClass('has-danger');
						msgbox.html(msg).addClass('has-danger').removeClass('hide');

						// check if this field comes first in DOM
						var domfield = formfield.get(0);

						if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
							firstfield = domfield;
						}
					});

					// focus on first bad field
					firstfield.focus();

					// scroll to above that field to make it visible
					$('html, body').animate({
				        scrollTop: $(firstfield).offset().top - 200
				    }, 100);
				});
			});

			// remove all error classes
			function removeErrors() {
				$(".form-control-danger").removeClass('form-control-danger');
				$("[data-field]").removeClass('has-danger');
				$(".form-control-feedback[data-field]").addClass('hide');
			}

			// initialize vehicle arrays
			var mfgVehicles = [];
			var vehicleRows = [];
			var vehicleIds = [];

			{% if row is defined %}
				{% for vehicle in row.getVehicles() %}
					vrow = {
						id: "{{ vehicle.getID() }}",
						mfg_name: "{{ vehicle.getManufacturer().getName() }}",
						make: "{{ vehicle.getMake() }}",
						model_year_from: "{{ vehicle.getModelYearFrom() }}",
						model_year_to: "{{ vehicle.getModelYearTo() }}"
					};

					vehicleRows.push(vrow);
					vehicleIds.push("{{ vehicle.getID() }}");
				{% endfor %}
			{% endif %}

			// update vehicle list when changing manufacturer
			$("#vmfg").change(function() {
				var id = $(this).val();
				var vehiclefield = $("#vehicle");
				var btn = $("#btn-add-vehicle");

				// no id specified
				if (!id) {
					vehiclefield.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
					btn.prop('disabled', true);
					return true;
				}

				mfgVehicles = [];

				// get vehicles for this manufacturer
				$.ajax({
					method: "POST",
					url: "{{ url('vmfg_vehicles') }}",
					data: {id: id}
				}).done(function(response) {
					if (response.data) {
						var html = '';

						$.each(response.data, function(index, vehicle) {
							html += '<option value="' + vehicle.id + '" data-index="' + index + '">' + vehicle.make + ' ' + vehicle.model_year_from + '-' + vehicle.model_year_to + '</option>';
						});

						vehiclefield.html(html).prop('disabled', false);
						btn.prop('disabled', false);
						mfgVehicles = response.data;
					} else {
						vehiclefield.html('<option value="">No vehicles found</option>').prop('disabled', true);
						btn.prop('disabled', true);
					}
				})
			});

			// add a vehicle to the table
			$("#btn-add-vehicle").click(function() {
				var id = $("#vehicle").val();
				var index = $("#vehicle").find(":selected").data('index');

				if (vehicleIds.indexOf(id) !== -1) {
					swal({
						title: 'Whoops',
						text: 'This vehicle is already on the list.',
						type: 'warning'
					});

					return true;
				}

				// add vehicle to arrays
				vehicleIds.push(id);
				vehicleRows.push(mfgVehicles[index]);

				// refresh the data table
				table.originalDataSet = vehicleRows;
				table.reload();
			});

			// remove vehicle from table
			$(document).on('click', '.btn-delete', function(e) {
				var btn = $(this);
				var id = $(this).data('id');

				$.each(vehicleRows, function(index, vehicle) {
					if (vehicle.id == id) {
						vehicleRows.splice(index, 1);
						return false;
					}
				});

				// remove from vehicle ids
				vehicleIds.splice(vehicleIds.indexOf(id), 1);
				
				// reload table
				table.row(btn.parents('tr')).remove();
				table.originalDataSet = vehicleRows;
				table.reload();
			});

			// data table
			var options = {
				data: {
					type: 'local',
					source: vehicleRows,
					saveState: {
			            cookie: false,
			            webstorage: false
			        }
				},
				layout: {
					scroll: true
				},
				columns: [
					{
						field: 'id',
						title: 'ID',
						width: 30
					},
					{
						field: 'mfg_name',
						title: 'Manufacturer'
					},
					{
						field: 'make',
						title: 'Make'
					},
					{
						field: 'model_year_from',
						title: 'Year',
						template: function (data) {
				            return data.model_year_from + ' - ' + data.model_year_to;
				        }
					},
					{
						field: 'Actions',
						width: 70,
						title: 'Actions',
						sortable: false,
						overflow: 'visible',
						template: function (row, index, datatable) {
							return '<button data-id="' + row.id + '" type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" title="Delete"><i class="la la-trash"></i></button>';
						},
					}
				],
				pagination: false
			};

			var table = $("#data-vehicles").mDatatable(options);
		});
	</script>
{% endblock %}