{% 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 mode == 'update' %}
										Edit Battery
										<small>{{ obj.getProductCode }}</small>
									{% else %}
										New Battery
									{% endif %}
								</h3>
							</div>
						</div>
					</div>
                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right" method="post" action="{{ mode == 'update' ? url('battery_update_submit', {'id': obj.getID }) : url('battery_create_submit') }}">
						<div class="m-portlet__body">	
							<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">
                                    <div class="col-lg-4">
                                        <label data-field="prod_code">
                                            Product Code
                                        </label>
                                        <input type="text" name="prod_code" class="form-control m-input" value="{{ obj.getProductCode }}">
                                        <div class="form-control-feedback hide" data-field="prod_code"></div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label data-field="sell_price">
                                            Selling Price
                                        </label>
                                        <input type="text" name="sell_price" class="form-control m-input" value="{{ obj.getSellingPrice }}">
                                        <div class="form-control-feedback hide" data-field="sell_price"></div>
                                    </div>
								</div>
								<div class="form-group m-form__group row">
                                    <div class="col-lg-4">
                                        <label data-field="manufacturer">
                                            Manufacturer
                                        </label>
                                        <select class="form-control m-input" id="manufacturer" name="manufacturer">
                                            <option value=""></option>
                                            {% for manufacturer in bmfgs %}
                                                <option value="{{ manufacturer.getID }}"{{ obj.getManufacturer and manufacturer.getID == obj.getManufacturer.getID ? ' selected' }}>{{ manufacturer.getName }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-control-feedback hide" data-field="manufacturer"></div>
									</div>
                                    <div class="col-lg-4">
                                        <label data-field="model">
                                            Model
                                        </label>
										<select class="form-control m-input" id="model" name="model">
											<option value=""></option>
											{% for model in models %}
												<option value="{{ model.getID }}"{{ obj.getModel and obj.getModel.getID ? ' selected' }}>{{ model.getName }}</option>
											{% endfor %}
										</select>
										<div class="form-control-feedback hide" data-field="model"></div>
									</div>
                                    <div class="col-lg-4">
                                        <label data-field="size">
                                            Size
                                        </label>
										<select class="form-control m-input" id="size" name="size">
											<option value=""></option>
											{% for size in sizes %}
												<option value="{{ size.getID }}"{{ obj.getSize and obj.getSize.getID ? ' selected' }}>{{ size.getName }}</option>
											{% endfor %}
										</select>
										<div class="form-control-feedback hide" data-field="size"></div>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<div class="col-lg-6">
										<label data-field="image_file">
											{% if mode == 'update' and obj.getImageFile %}
												Replace Picture
											{% else %}
												Picture
											{% endif %}
										</label>
										<div class="m-dropzone dropzone m-dropzone--primary" action="{{ url('battery_upload_image') }}" id="image-file">
											<div class="m-dropzone__msg dz-message needsclick">
												<h3 class="m-dropzone__msg-title">
													Drop files here or click to upload.
												</h3>
												<span class="m-dropzone__msg-desc">
													Upload only valid PNG, GIF, or JPEG images
												</span>
											</div>
										</div>
										{% if mode == 'update' and obj.getImageFile %}
											<span class="m-form__help">Leave blank for unchanged</span>
										{% endif %}
										<div class="form-control-feedback hide" data-field="image_file"></div>
									</div>
									{% if mode == 'update' %}
										<div class="col-lg-6">
											<label>&nbsp;</label>
											<div class="portrait-box" style="background-image: url('{{ obj.getImageFile ? '/uploads/' ~ obj.getImageFile : '/assets/images/battery.gif' }}');"></div>
										</div>
									{% endif %}
								</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">
                                    <div class="col-lg-4">
                                        <label data-field="warr_private">
                                            Personal
                                        </label>
										<input type="number" name="warr_private" class="form-control m-input" value="{{ obj.getWarrantyPrivate }}">
										<div class="form-control-feedback hide" data-field="warr_private"></div>
										<span class="m-form__help">In months</span>
									</div>
                                    <div class="col-lg-4">
                                        <label data-field="warr_commercial">
                                            Commercial
                                        </label>
										<input type="number" name="warr_commercial" class="form-control m-input" value="{{ obj.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__seperator m-form__seperator--dashed"></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">
                                    <div class="col-lg-4">
                                        <label data-field="length">
                                            Length
                                        </label>
                                        <input type="number" name="length" class="form-control m-input" value="{{ obj.getLength }}">
                                        <div class="form-control-feedback hide" data-field="length"></div>
                                        <span class="m-form__help">In millimeters (mm)</span>
                                    </div>
                                    <div class="col-lg-4">
                                        <label data-field="width">
                                            Width
                                        </label>
                                        <input type="number" name="width" class="form-control m-input" value="{{ obj.getWidth }}">
                                        <div class="form-control-feedback hide" data-field="width"></div>
                                        <span class="m-form__help">In millimeters (mm)</span>
                                    </div>
                                    <div class="col-lg-4">
                                        <label data-field="height">
                                            Height
                                        </label>
                                        <input type="number" name="height" class="form-control m-input" value="{{ obj.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">
                                    <div class="col-lg-4">
                                        <label data-field="total_height">
                                            Total Height
                                        </label>
                                        <input type="number" name="total_height" class="form-control m-input" value="{{ obj.getTotalHeight }}">
                                        <div class="form-control-feedback hide" data-field="total_height"></div>
                                        <span class="m-form__help">In millimeters (mm)</span>
                                    </div>
                                    <div class="col-lg-4">
                                        <label data-field="res_capacity">
                                            Reserve Capacity
                                        </label>
                                        <input type="number" name="res_capacity" class="form-control m-input" value="{{ obj.getReserveCapacity }}">
                                        <div class="form-control-feedback hide" data-field="res_capacity"></div>
                                        <span class="m-form__help">In minutes</span>
                                    </div>
                                </div>
                            </div>
                            <div class="m-form__seperator m-form__seperator--dashed"></div>
                            <div class="m-form__section m-form__section--last">
                            	<div class="m-form__heading">
									<h3 class="m-form__heading-title">
										Vehicle Compatibility
									</h3>
								</div>
								<div class="form-group m-form__group row">
									<div class="col-lg-12">
										<div id="data-vehicles"></div>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label class="col-lg-1 col-form-label" data-field="vehicle_list">
										Add Vehicle:
									</label>
									<div class="col-lg-3">
										<select name="vmfg_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 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">
										<input type="hidden" name="image_file" value="{{ obj.getImageFile }}">
										<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>
		// image upload
		Dropzone.options.imageFile = {
            paramName: "image_file", // The name that will be used to transfer the file
            maxFiles: 1,
            uploadMultiple: false,
            maxFilesize: 5, // MB
            addRemoveLinks: true,
            acceptedFiles: "image/*",
            accept: function(file, done) {
                done(); 
            },
            init: function() {
				this.on("maxfilesexceeded", function(file) {
					// limit to one file, overwrite old one
					this.removeAllFiles();
        			this.addFile(file);
				});
			},
			success: function(file, response) {
				if (response.success) {
					$("input[name='image_file']").val(response.filename);
				}
			}
        };

		$(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) {
					if (response.status == 422) {
						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 = [];

			{% for vehicle in obj.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 %}

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

				// no id specified
				if (!id) {
					field.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.length > 0) {
						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>';
						});

						field.html(html).prop('disabled', false);
						btn.prop('disabled', false);
						mfgVehicles = response.data;
					} else {
						field.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 %}