[{assign var="oConfig" value=$oViewConf->getConfig()}]
	[{assign var=aAllExplodedViews value=$oDetailsProduct->getExplodedViews()}]
	[{assign var="oCurrency" value=$oView->getActCurrency()}]

	[{assign var="isB2BUser" value=false}]
	[{if $oxcmp_user && $oxcmp_user->isB2b()}]
		[{assign var="isB2BUser" value=true}]
	[{/if}]

	[{assign var="isB2CUser" value=false}]
	[{if $oxcmp_user && !$oxcmp_user->isB2b()}]
		[{assign var="isB2CUser" value=true}]
	[{/if}]

	<div class="container-fluid dd-ve-container clearfix">
		[{oxifcontent ident="oxsparepartstopcontent"}]
			[{oxcontent ident="oxsparepartstopcontent"}]
		[{/oxifcontent}]

		[{if $oDetailsProduct->getNumberOfExplodedViews() > 1}]
	   	<div class="form-group">
	      <label for="constructionyear" class="col-form-label h3">[{oxmultilang ident="CONSTRUCTIONYEAR"}]</label>
	      <select class="form-control border border-danger col-12 col-sm-6 col-lg-2" id="constructionyear">
					[{foreach from=$aAllExplodedViews item=aBaujahr}]
						<option value="group[{$aBaujahr->month}][{$aBaujahr->year}]">[{$aBaujahr->month|string_format:"%02d"}].[{$aBaujahr->year}]</option>
					[{/foreach}]
	      </select>
	    </div>
		[{/if}]

		[{oxifcontent ident="oxsparepartscontent"}]
			[{oxcontent ident="oxsparepartscontent"}]
		[{/oxifcontent}]

		[{assign var="aSparepartProductList" value=$oView->getSparepartProductList()}]
		[{assign var="aSparepartProductListItems" value=$oView->getSparepartProductListItems()}]
		[{assign var="aSparepartProductListParams" value=$oView->getSparepartProductListPersParams()}]
		[{assign var="iCountOfSpareparts" value=$aSparepartProductList|@count}]
		<div class="spareparts-container clearfix row" id="wishlist-container" style="[{if $iCountOfSpareparts > 0}]diplay:none[{/if}]">
			<div class="col-12">
				<div class="row">
					<div class="col h3">[{oxmultilang ident="WISH_LIST"}]</div>
					<div class="col-6 col-md-4">
						[{if !$isB2BUser}]
						<div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" value="all" id="checkAllProducts" disabled>
					    <label class="form-check-label" for="checkAllProducts">
								[{oxmultilang ident="SPAREPARTS_SELECT_ALL"}] <i class='fal fa-question cursor-pointer' data-toggle="tooltip" data-placement="top" title="[{oxmultilang ident="SPAREPARTS_SELECT_ALL_TOOLTIP"}]"></i>
							</label>
					  </div>
						[{/if}]
					</div>
				</div>
			</div>
			<div class="col-12" id="list-of-sparaparts">
				[{foreach from=$aSparepartProductList item=oArticle key=sKey}]
					[{include file="widget/product/listitem_sparepart.tpl" product=$oArticle item=$aSparepartProductListItems[$sKey] aPersParams=$aSparepartProductListParams[$sKey]}]
				[{/foreach}]
			</div>
			<div class="col-12">
				<button type="button" class="btn btn-outline-primary mr-2 float-left font-weight-bold remove-all-button d-print-none col-4 col-md-3 col-lg-2" id="deleteAllSpareparts" disabled> &times; [{oxmultilang ident="REMOVE_ALL"}]</button>
				<button type="button" class="btn btn-primary submitButton font-weight-bold ml-2 mt-3 mt-md-0 float-right col-12 col-md-5 col-lg-2" disabled id="addToBasketWishList"><i class="fal fa-shopping-cart mr-1"></i> <span class="numberOfElements">0</span> [{oxmultilang ident="TO_CART"}]</button>
				[{if !$isB2BUser}]
					<button type="button" class="btn btn-outline-secondary font-weight-bold ml-2 mt-3 mt-md-2 mt-lg-0 float-right col-12 col-md-5 col-lg-4" disabled id="requestDealerSpareparts"><i class="fal fa-map-marker-alt mr-1"></i> <span class="numberOfElements">0</span> [{oxmultilang ident="BUY_PRODUCT_FROM_DEALER_BUTTON"}]</button> 
					<button type="button" class="btn btn-outline-secondary font-weight-bold mt-3 mt-md-2 mt-lg-0 float-right d-print-none" disabled id="printSpareparts"><i class="fal fa-print"></i></button>
				[{/if}]
				<span class="float-right response-text mr-2 mt-3 mt-md-2"><span>
			</div>
	  </div>

		<div class="spareparts-container" id="vendorRequest">
		</div>
		
		[{foreach from=$aAllExplodedViews item=aBaujahr}]
			<div class="imagemap-content accordion" id="group[{$aBaujahr->month}][{$aBaujahr->year}]" style="display:none;">
				<div class="mt-3 pt-2">
					[{assign var="b2CSparepartsExists" value=false}]
					[{if !$isB2BUser && $aBaujahr->b2cSpareparts|@count > 0}]
						[{assign var="b2CSparepartsExists" value=true}]
						<div class="border-top border-bottom" id="headingSparepartListOne[{$aBaujahr->month}][{$aBaujahr->year}]">
				      <h3 class="mt-2 cursor-pointer" type="button" data-toggle="collapse" data-target="#collapseSparepartListOne[{$aBaujahr->month}][{$aBaujahr->year}]" aria-expanded="true" aria-controls="collapseSparepartListOne[{$aBaujahr->month}][{$aBaujahr->year}]">
				          [{oxmultilang ident="SPAREPART_LIST_TAB_TITLE_B2C"}]
									<div class="pull-right text-right pr-0">
										<span class="far fa-angle-down text-darkgrey"></span>
									</div>
				      </h3>
				    </div>
						<div id="collapseSparepartListOne[{$aBaujahr->month}][{$aBaujahr->year}]" class="collapse show border-bottom" aria-labelledby="headingSparepartListOne[{$aBaujahr->month}][{$aBaujahr->year}]" data-parent="#group[{$aBaujahr->month}][{$aBaujahr->year}]">
				      <div class="mb-2 mt-2">
								<input type="text" class="search-for-spareparts form-control my-3" id="group[{$aBaujahr->month}][{$aBaujahr->year}]b2cSparepart" placeholder="[{oxmultilang ident="SEARCH_SPAREPARTS"}]">
								<div id="group[{$aBaujahr->month}][{$aBaujahr->year}]b2cSparepartTable">
									<div class="col-12 d-none d-md-block">
										<div class="row">
											<div class="col font-weight-bold">[{oxmultilang ident="ARTNUM"}] / [{oxmultilang ident="PRODUCT"}]</div>
										</div>
									</div>
									<div class="col-12">
										[{foreach from=$aBaujahr->b2cSpareparts item=oElement key=sKey}]
											[{assign var="oDetailsProduct" value=$oElement->oArticle}]
											[{if $oDetailsProduct}]
												[{assign var="blCanBuy" value=$oDetailsProduct->isSellable()}]
												[{assign var="sReasonsForNotSellable" value=$oDetailsProduct->getReasonForNotSellable()}]
												
												<div class="row table-rows py-2">
													<div class="col-12 col-md-4"><span class="font-weight-bold">[{$oElement->articleNumber}]</span><br/>
														[{$oDetailsProduct->oxarticles__oxtitle->value}] 
														[{if $oElement->substitutedBy}] <br/>
															[{assign var=oSubstituted value=$oElement->substitutedBy[0]}]
															[{oxmultilang ident="IS_SUBSTITUTED_BY"}] [{$oSubstituted->title}] ([{$oSubstituted->articleNumber}])
														[{/if}]
														<span style="display:none;">[{$sReasonsForNotSellable}]</span>
													</div>
													<div class="col-12 col-md-4 mb-2">
														[{if $blCanBuy}]
															[{assign var="oPrice" value=$oDetailsProduct->getPrice()}]
															<span class="price-wrapper">[{oxmultilang ident="SPAREPART_PRICE"}] <strong class="price">[{oxprice price=$oPrice currency=$oCurrency}]</strong></span>
														[{/if}]
													</div>
													<div class="col-12 col-md-4">
														<form class="js-oxProductForm addSparepartToBasket" action="[{$oViewConf->getSelfActionLink()}]" name="sparepartsToBasket.[{$sKey}]" method="post" data-artnum="[{$oElement->articleNumber}]">
															<div class="row">
													      <span class="hidden">
													        [{$oViewConf->getHiddenSid()}]
													        [{$oViewConf->getNavFormParams()}]

													        <input type="hidden" name="stock" value="[{$oDetailsProduct->oxarticles__oxstock->value}]">
													        <input type="hidden" name="saleable" value="1">
													        <input type="hidden" name="cl" value="details">
													        <input type="hidden" name="aid" value="[{$oDetailsProduct->getId()}]">
													        <input type="hidden" name="anid" value="[{$oDetailsProduct->getId()}]">
													        <input type="hidden" name="parentid" value="[{$oDetailsProduct->getId()}]">
																	<input type="hidden" name="cnid" value="[{$oView->getCategoryId()}]">
													        <input type="hidden" name="panid" value="">
													        <input type="hidden" name="fnc" value="tobasket">
													      </span>
																<div class="col-12 response-text"></div>
																<button type="button" class="highlightHotspot btn btn-outline-secondary col-12 col-lg mb-2 mr-lg-2" data-artnum="[{$oElement->articleNumber}]" data-group="group[{$aBaujahr->month}][{$aBaujahr->year}]">[{oxmultilang ident="SHOW_IN_MAP"}]</button>
																<button type="button" class="addToSparepartList btn btn-outline-secondary col-12 col-lg-6 mb-2" data-oxid="[{$oDetailsProduct->getId()}]" data-artnum="[{$oElement->articleNumber}]" data-group="group[{$aBaujahr->month}][{$aBaujahr->year}]">[{oxmultilang ident='ADD_TO_WISH_LIST'}]</button>
																[{if $blCanBuy}]
																	<button type="button" class="btn btn-primary addToBasket col-12" data-oxid="[{$oDetailsProduct->getId()}]" data-artnum="[{$oElement->articleNumber}]" data-group="group[{$aBaujahr->month}][{$aBaujahr->year}]"><i class="fal fa-shopping-cart mr-1"></i> [{oxmultilang ident='TO_CART'}]</button>
																[{/if}]
															</div>
														</form>
													</div>
												</div>
											[{/if}]
										[{/foreach}]
									</div>
								</div>
							</div>
						</div>
					[{/if}]

					<div class="mt-1[{if !$b2CSparepartsExists}] border-top[{/if}]">
						<div class="border-bottom" id="headingExplodedViews[{$aBaujahr->month}][{$aBaujahr->year}]">
				      <h3 class="mt-2 cursor-pointer" type="button" data-toggle="collapse" data-target="#collapseExplodedViews[{$aBaujahr->month}][{$aBaujahr->year}]" aria-expanded="true" aria-controls="collapseExplodedViews[{$aBaujahr->month}][{$aBaujahr->year}]">
				          [{oxmultilang ident="EXPLODED_VIEWS_TAB_TITLE"}]
									<div class="pull-right text-right pr-0">
										<span class="far fa-angle-down text-darkgrey"></span>
									</div>
				      </h3>
				    </div>
						<div id="collapseExplodedViews[{$aBaujahr->month}][{$aBaujahr->year}]" class="border-bottom collapse show" aria-labelledby="headingExplodedViews[{$aBaujahr->month}][{$aBaujahr->year}]" data-parent="#group[{$aBaujahr->month}][{$aBaujahr->year}]">
				      <div class="mt-2 mb-2">
								<ul class="nav nav-tabs" id="group[{$aBaujahr->month}][{$aBaujahr->year}]imageMapTab" role="tablist">
									[{foreach from=$aBaujahr->data item=oOneBaujahr key=sKey}]
											<li class="nav-item"><a class="nav-link" id="group[{$aBaujahr->month}][{$aBaujahr->year}]page-[{$sKey}]" data-toggle="tab" href="#group[{$aBaujahr->month}][{$aBaujahr->year}]pageMap-[{$sKey}]" role="tab" aria-controls="group[{$aBaujahr->month}][{$aBaujahr->year}]pageMap-[{$sKey+1}]" aria-selected="true"> [{oxmultilang ident="DRAWING_PAGE"}] [{$sKey+1}]</a></li>
									[{/foreach}]
								</ul>
								<div class="tab-content" id="group[{$aBaujahr->month}][{$aBaujahr->year}]imageMapTabContent">
									[{foreach from=$aBaujahr->data item=oOneBaujahr key=sKey}]
										<div class="tab-pane fade" id="group[{$aBaujahr->month}][{$aBaujahr->year}]pageMap-[{$sKey}]" role="tabpanel" aria-labelledby="group[{$aBaujahr->month}][{$aBaujahr->year}]page-[{$sKey}]">
									    <div class="row">
												<div class="col-12 p-0">
													<b>[{oxmultilang ident="CONSTRUCTION_YEAR"}] [{$aBaujahr->month}].[{$aBaujahr->year}]</b>
													[{if $isB2BUser && $aBaujahr->pdf}]
														<a class="btn btn-danger float-right" target="_blank" href="/[{$aBaujahr->pdf}]"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> [{oxmultilang ident="DOWNLOAD_DOCUMENT_TITLE"}]</a>
													[{/if}]
													<div class="btn-group float-right" role="group">
														<button class="btn btn-danger zoomin" data-id="[{$aBaujahr->month}][{$aBaujahr->year}]page-[{$sKey}]">
															<i class="fa fa-search-plus" aria-hidden="true"></i>
														</button>
														<button class="btn btn-danger zoomout" data-id="[{$aBaujahr->month}][{$aBaujahr->year}]page-[{$sKey}]">
															<i class="fa fa-search-minus" aria-hidden="true"></i>
														</button>
														<button class="btn btn-danger resetSize" data-id="[{$aBaujahr->month}][{$aBaujahr->year}]page-[{$sKey}]">
															[{oxmultilang ident="RESET_SIZE_EXPLODED_VIEW"}]
														</button>
													</div>
												</div>
												<div class="col-12 p-0" id="explodedViewsContainer">
													<div id="[{$aBaujahr->month}][{$aBaujahr->year}]page-[{$sKey}]">
														[{assign var="image" value=$oOneBaujahr->image}]
														[{assign var="imagesize" value=$image|@getimagesize}]

														[{assign var="originalWidth" value=$imagesize[0]}]
												[{assign var="originalHeight" value=$imagesize[1]}]

														[{assign var="ImageWidth" value=$imagesize[0]}]
												[{assign var="ImageHeight" value=$imagesize[1]}]
												[{assign var="recalculationFactor" value=1}]
														
														[{if $originalWidth > 1170}]
															[{* 1000 / original width = recalculationFactor *}]
															[{math equation='x / y' x=1170 y=$originalWidth assign='recalculationFactor'}]
															[{* filewidth = original width * recalculationFactor *}]
															[{math equation='x * y' x=$originalWidth y=$recalculationFactor assign='ImageWidth'}]
															[{math equation='x * y' x=$originalHeight y=$recalculationFactor assign='ImageHeight'}]
														[{/if}]

														<img src="/[{$image}]" class="p-0 m-0" width="[{$ImageWidth}]" height="[{$ImageHeight}]" style="z-index:1;">

														[{foreach from=$oOneBaujahr->map item=oElement}]
															[{assign var=coords value=$oElement->coords}]

															[{assign var="oDetailsProduct" value=$oElement->oArticle}]
															[{* math equation='(x * y * 1.3)/100' x=$coords->width y=$ImageWidth format="%d" assign='absoluteWidth' *}]

												[{math equation='(x * 10)' x=$coords->height format="%d" assign='height'}]
															[{math equation='(x * y * 10)' x=$coords->width y=$recalculationFactor format="%d" assign='width'}]

															[{ math equation='((x * y)/100)+8' x=$coords->top y=$ImageHeight format="%d" assign='absoluteTop' }]
															[{ math equation='((x * y)/100)+8' x=$coords->left y=$ImageWidth format="%d" assign='absoluteLeft' }]

															[{assign var=dataCountName value="data-count"}]
															[{assign var=dataArtnumberName value="data-artnumber"}]
															[{assign var=dataArtnumber value=$oElement->$dataArtnumberName}]
															[{assign var=dataCount value=$oElement->$dataCountName}]
															[{assign var="oConfig" value=$oViewConf->getConfig()}]
															[{assign var="blIsBuyable" value=true}]

															[{assign var="blNoStock" value=false}]
															[{assign var="blLowStock" value=false}]

															[{assign var="oxProductId" value=""}]
															[{if $oDetailsProduct}]
																[{assign var="oxProductId" value=$oDetailsProduct->getId()}]
																[{assign var="blIsBuyable" value=$oDetailsProduct->isSellable()}]
																[{assign var="sReasonsForNotSellable" value=$oDetailsProduct->getReasonForNotSellable()}]
																[{assign var="oPrice" value=$oDetailsProduct->getPrice()}]

																[{if !$oDetailsProduct->isMaterialStatusNoLongerProduced()}]
														[{if $oDetailsProduct->getStockStatus() == -1}]
																		[{assign var="blNoStock" value=true}]
																	[{elseif $oDetailsProduct->getStockStatus() == 1}]
																		[{assign var="blLowStock" value=true}]
														[{/if}]
													[{/if}]

															[{else}]
																[{assign var="blIsBuyable" value=false}]
															[{/if}]

															[{assign var="title" value=$oElement->title}]
															[{if !$title}]
																[{assign var="title" value=$dataArtnumber}]
															[{/if}]

															[{assign var=substitutedContent value=""}]
															[{if $oElement->substitutedBy}]
																[{assign var=dataSubstitutedArtnumber value=$oElement->substitutedBy[0]->articleNumber}]
																[{assign var=dataSubstitutedTitle value=$oElement->substitutedBy[0]->title|escape:'html'}]
																[{assign var=substitutedContent value="$dataSubstitutedTitle ($dataSubstitutedArtnumber)"}]
															[{/if}]
															
															<div 
																class="hotspot" 
																style="left:[{$absoluteLeft}]px; top:[{$absoluteTop}]px; width: [{$width}]px; height: [{$height}]px; z-index:2;" 
																data-artnum="[{$dataArtnumber}]" 
																data-count="[{$dataCount}]" 
																data-html="true"
																data-container="body"
																data-toggle="popover" 
																data-trigger="focus" 
																data-placement="top" 
																data-content="<div class='row'>
																<div class='col-12'><h4>[{$title|escape:'html'}] <i class='fal fa-times float-right cursor-pointer' aria-hidden='true' onClick='removeAllPopovers()'></i></h4></div>
																<div class='col-12'>[{$dataArtnumber}][{if $substitutedContent != ""}] <b>[{oxmultilang ident="IS_SUBSTITUTED_BY"}]:</b> [{$substitutedContent}][{/if}]</div>
																[{if $blIsBuyable && !$isB2BUser}]
																	[{if $blNoStock}]
																		<span class='stockFlag notOnStock text-danger mr-2'>
														[{oxmultilang ident='LIST_MESSAGE_NOT_ON_STOCK'}]
															</span>
														[{elseif $blLowStock}]															
															<span class='stockFlag lowStock text-warning mr-2'>
																			[{if $oConfig->getConfigParam('blArticleShowStockInListLabel')}]
																				[{oxmultilang ident='LIST_MESSAGE_ON_STOCK_WITH_COUNT' args=$oDetailsProduct->oxarticles__oxstock->value}]
																			[{else}]
																[{oxmultilang ident='LIST_LOW_STOCK'}]
																[{/if}]
															</span>
														[{else}]
															<span class='stockFlag text-success mr-2'>
														[{oxmultilang ident='LIST_READY_FOR_SHIPPING'}]
															</span>
														[{/if}]
																	<div class='col-12'><span class='price-wrapper mr-3'>[{oxmultilang ident="SPAREPART_PRICE"}] <strong class='price'>[{oxprice price=$oPrice currency=$oCurrency}]</strong></span></div>
																[{/if}]
																<div class='col-6 response-text'></div>
																<div class='col-6'>[{if $oDetailsProduct}]<button class='btn btn-outline-secondary addToSparepartList w-100' data-artnum='[{$dataArtnumber}]' data-oxid='[{$oxProductId}]' data-group='group[{$aBaujahr->month}][{$aBaujahr->year}]'>[{oxmultilang ident='ADD_TO_WISH_LIST'}]</button>[{/if}]</div>
																<div class='col-12 mt-2'>[{if $blIsBuyable && !$isB2BUser}]<button class='btn btn-primary w-100 addToBasket' data-oxid='[{$oxProductId}]'  data-artnum='[{$dataArtnumber}]' data-group='group[{$aBaujahr->month}][{$aBaujahr->year}]'><i class='fal fa-shopping-cart mr-1'></i> [{oxmultilang ident='TO_CART'}]</button>[{else}][{if !$isB2BUser && $oxProductId != ''}]<button class='btn btn-outline-primary w-100 addToSparepartListAndRequestDealer' data-oxid='[{$oxProductId}]' data-artnum='[{$dataArtnumber}]' data-group='group[{$aBaujahr->month}][{$aBaujahr->year}]'><i class='fal fa-map-marker-alt mr-1'></i> [{oxmultilang ident='BUY_PRODUCT_FROM_DEALER_BUTTON'}]</button>[{/if}][{/if}]
																</div>
																</div>">
															</div>
														[{/foreach}]
													</div>
												</div>
											</div>
										</div>
									[{/foreach}]
								</div>
							</div>
						</div>
					</div>
					
					[{if $aBaujahr->spareparts|@count > 0}]
						<div class="mt-1">
							<div class="border-bottom" id="headingSparepartListTwo[{$aBaujahr->month}][{$aBaujahr->year}]">
					      <h3 class="mt-2 cursor-pointer" type="button" data-toggle="collapse" data-target="#collapseSparepartListTwo[{$aBaujahr->month}][{$aBaujahr->year}]" aria-expanded="false" aria-controls="collapseSparepartListTwo[{$aBaujahr->month}][{$aBaujahr->year}]">
					          [{oxmultilang ident="TITLE_LIST_OF_SPAREPARTS"}]
										<div class="pull-right text-right pr-0"><span class="far fa-angle-down text-darkgrey"></span></div>
					      </h3>
					    </div>
							<div id="collapseSparepartListTwo[{$aBaujahr->month}][{$aBaujahr->year}]" class="collapse" aria-labelledby="headingSparepartListTwo[{$aBaujahr->month}][{$aBaujahr->year}]" data-parent="#group[{$aBaujahr->month}][{$aBaujahr->year}]">
					      <div class="mt-2 mb-2">
									<input type="text" class="search-for-spareparts form-control my-3" id="group[{$aBaujahr->month}][{$aBaujahr->year}]sparepart" placeholder="[{oxmultilang ident="SEARCH_SPAREPARTS"}]">
									<div class="row" id="group[{$aBaujahr->month}][{$aBaujahr->year}]sparepartTable">
										<div class="col-12 d-none d-md-block">
											<div class="row">
												<div class="col font-weight-bold">[{oxmultilang ident="ARTNUM"}] / [{oxmultilang ident="PRODUCT"}]</div>
											</div>
										</div>
										<div class="col-12">
											[{foreach from=$aBaujahr->spareparts item=oElement key=sKey}]
												[{assign var="oDetailsProduct" value=$oElement->oArticle}]
												[{assign var="blIsBuyable" value=true}]

												[{if $oDetailsProduct}]
													[{assign var="blIsBuyable" value=$oDetailsProduct->isSellable()}]
													[{assign var="sReasonsForNotSellable" value=$oDetailsProduct->getReasonForNotSellable()}]
												[{else}]
													[{assign var="blIsBuyable" value=false}]
												[{/if}]
													<div class="row table-rows py-2">
														<div class="col-12 col-md-4"><span class="font-weight-bold">[{$oElement->articleNumber}]</span><br/>
															[{$oElement->title}]
															[{if $oElement->substitutedBy}] <br/>
																[{assign var=oSubstituted value=$oElement->substitutedBy[0]}]
																[{oxmultilang ident="IS_SUBSTITUTED_BY"}] [{$oSubstituted->title}] ([{$oSubstituted->articleNumber}])
															[{/if}]
															<span style="display:none;">[{$sReasonsForNotSellable}]</span>
														</div>
														<div class="col-12 col-md-4">
																[{if $blIsBuyable && !$isB2BUser}]
																	[{assign var="oPrice" value=$oDetailsProduct->getPrice()}]
																	<span class="price-wrapper mr-3">[{oxmultilang ident="SPAREPART_PRICE"}] <strong class="price">[{oxprice price=$oPrice currency=$oCurrency}]</strong></span>
																[{/if}]
														</div>
														<div class="col-12 col-md-4 text-right py-2">
														[{if $blIsBuyable & !$isB2BUser}]
															<form class="js-oxProductForm addSparepartToBasket" action="[{$oViewConf->getSelfActionLink()}]" name="sparepartsToBasket.[{$sKey}]" method="post" data-artnum="[{$oElement->articleNumber}]">
													      <span class="hidden">
													        [{$oViewConf->getHiddenSid()}]
													        [{$oViewConf->getNavFormParams()}]
																	[{if $oDetailsProduct}]
													        <input type="hidden" name="stock" value="[{$oDetailsProduct->oxarticles__oxstock->value}]">
													        <input type="hidden" name="saleable" value="1">
													        <input type="hidden" name="cl" value="details">
													        <input type="hidden" name="aid" value="[{$oDetailsProduct->getId()}]">
													        <input type="hidden" name="anid" value="[{$oDetailsProduct->getId()}]">
													        <input type="hidden" name="parentid" value="[{$oDetailsProduct->getId()}]">
																	<input type="hidden" name="cnid" value="[{$oView->getCategoryId()}]">
													        <input type="hidden" name="panid" value="">
													        <input type="hidden" name="fnc" value="tobasket">
																	[{/if}]
													      </span>
																
														[{/if}]
															<div class="row pr-0 pr-md-2">
																<div class="col-12 response-text"></div>
																<button type="button" class="highlightHotspot btn btn-outline-secondary col-12 col-lg mb-2 mr-lg-2" data-artnum="[{$oElement->articleNumber}]" data-group="group[{$aBaujahr->month}][{$aBaujahr->year}]">[{oxmultilang ident="SHOW_IN_MAP"}]</button>
																[{if $oDetailsProduct}]
																	<button type="button" class="addToSparepartList btn btn-outline-secondary col-12 col-lg-6 mb-2" data-oxid="[{$oDetailsProduct->getId()}]" data-artnum="[{$oElement->articleNumber}]" data-group="group[{$aBaujahr->month}][{$aBaujahr->year}]">[{oxmultilang ident='ADD_TO_WISH_LIST'}]</button>
																[{/if}]
																[{if $blIsBuyable && !$isB2BUser}]
																	<button type="button" class="btn btn-primary addToBasket col-12" data-oxid="[{$oDetailsProduct->getId()}]" data-artnum="[{$oElement->articleNumber}]" data-group="group[{$aBaujahr->month}][{$aBaujahr->year}]"><i class="fal fa-shopping-cart mr-1"></i> [{oxmultilang ident='TO_CART'}]</button>
																[{else}]
																	[{if !$isB2BUser && $oDetailsProduct}]
																		<button type="button" data-artnum="[{$oElement->articleNumber}]" data-oxid="[{$oDetailsProduct->getId()}]" class="btn btn-outline-primary font-weight-bold addToSparepartListAndRequestDealer col-12"><i class="fal fa-map-marker-alt mr-1"></i> [{oxmultilang ident="BUY_PRODUCT_FROM_DEALER_BUTTON"}]</button> 
																	[{/if}]
																[{/if}]
															</div>
														[{if $blIsBuyable & !$isB2BUser}]
														</form>
														[{/if}]
														</div>
													</div>
											[{/foreach}]
										</div>
									</div>
								</div>
							</div>
						</div>
					[{/if}]
		  	</div>
		  </div>
		[{/foreach}]
	</div>


	<script>
		[{assign var="languageId" value=$oViewConf->getActLanguageId()}]

		[{if !$oConfig}]
			[{assign var="oConfig" value=$oViewConf->getConfig()}]
		[{/if}]

		var currentZoom = 1.0;
		var currentScale = 1.0;

        $('.zoomin').off('click').on('click',
            function () {
			const	dataid = $(this).attr('data-id');
				currentScale +=0.1;
				$(`#${dataid}`).css('-moz-transform', 'scale('+currentScale+')');
				
                $(`#${dataid}`).animate({ 'zoom': currentZoom += .1 }, 'slow');
            });

        $('.zoomout').off('click').on('click',
            function () {
				const dataid = $(this).attr('data-id');
				currentScale -=0.1;
				$(`#${dataid}`).css('-moz-transform', 'scale('+currentScale+')');
                $(`#${dataid}`).animate({ 'zoom': currentZoom -= .1 }, 'slow');
            });

        $('.resetSize').off('click').on('click',
            function () {
				const dataid = $(this).attr('data-id');
                currentZoom = 1.0;
				currentScale = 1.0;
                $(`#${dataid}`).animate({ 'zoom': 1 }, 'slow');
				$(`#${dataid}`).css('-moz-transform', 'scale(1)');
            });
	

		function removeAllSparepartListHandle() {
			$('.spareparts-container .remove-all-button').off('click').on('click', async function(ev) {
				ev.preventDefault();
				const params = [];
				const stoken="[{$oViewConf->getSessionChallengeToken()}]";
				// cl=details
				params.push('cl=details');
				params.push('fnc=clearsparepartlist');
				params.push(`stoken=${stoken}`);
				const response = await setAjaxClearList(params);
				if (response) {
					$('#list-of-sparaparts').html('');
				}
				collectEnabledProducts();
			});
		}

		function removeSparepartListHandle() {
				$('#list-of-sparaparts .sparepart-remember-list .remove-button').off('click').on('click', async function(ev) {
					ev.preventDefault();

					const params = [];
					const cnid = "[{$oView->getCategoryId()}]";
					const aid = $(this).attr('data-oxid');
					const anid = $(this).attr('data-oxid');
					const aPersParams = $(this).attr('data-aPersParams');
					const stoken="[{$oViewConf->getSessionChallengeToken()}]";
					const amount = 0;

					// cl=details
					params.push('cl=details');
					// aid=`$oDetailsProduct->oxarticles__oxnid->value`&amp;anid=`$oDetailsProduct->oxarticles__oxnid->value`
					// aid=1_2016 // oxid id article
					params.push(`aid=${aid}`);
					// anid=1_2016 // oxid id article
					params.push(`anid=${anid}`);
					// fnc=tosparepartlist
					params.push('fnc=tosparepartlist');
					// am=1 // anzahl
					params.push(`am=${amount}`);
					// cnid=1_131 // category id
					params.push(`cnid=${cnid}`);
					// listtype=list
					params.push('listtype=list');
					// actcontrol=oxwarticledetails
					params.push('actcontrol=oxwarticledetails');
					// stoken=152B2C04
					params.push(`stoken=${stoken}`);
					// stoken="|cat:$oViewConf->getSessionChallengeToken()
					if (aPersParams) {
						params.push(`aPersParams=${ aPersParams }`);
					}
					// call post toSparepartList get content
						
					const ajaxResponse = await setAjaxArticleToList(params);

					if (ajaxResponse) {
						$(`#sparepartMarkList${aid}`).remove();
					}

					collectEnabledProducts();
					removeAllPopovers();
				});
		};

		function collectEnabledProducts() {
			// get allnumbers of enabled products
			
			let artnumbersToBasket = 0;
			$('#list-of-sparaparts form.addSparepartToBasket').each(function(){
				const saleable = $(this).find('input[name=saleable]').val();
				const stock = $(this).find('input[name=stock]').val();
				const amount = parseInt($(this).find('input[name=am]').val());
				
				[{if ($isB2BUser && $oConfig->getConfigParam('blAllowB2bAddToBasketArticleOutOfStock')) ||  ($isB2CUser && $oConfig->getConfigParam('blAllowB2cAddToBasketArticleOutOfStock'))}]
					if (saleable > 0) {
						artnumbersToBasket += amount;
					}
				[{else}]
					if (stock > 0 && saleable > 0) {
						artnumbersToBasket += amount;
					}
				[{/if}]
			});
			if (artnumbersToBasket > 0) {
				$('#addToBasketWishList').prop('disabled', false);
				$('#addToBasketWishList .numberOfElements').text(artnumbersToBasket);
				$('#addToBasketWishList').off('click').on('click', function () {
					sendAllSpareparts();
				})
			} else {
				$('#addToBasketWishList').off('click');
				$('#addToBasketWishList').prop('disabled', true);
				$('#addToBasketWishList .numberOfElements').text('');
			}
			let productsInWihList = $('#list-of-sparaparts > div').length;
			let productsCheckedForRequest = 0;
			$('#list-of-sparaparts input[type=checkbox]:checked').each(function () {
				const amount = parseInt($(this).parents('form').find('input[name=am]').val());
				productsCheckedForRequest += amount;
			});
			
			$('#requestDealerSpareparts .numberOfElements').text(productsCheckedForRequest);
			$('#printSpareparts').prop('disabled', true);
			$('#deleteAllSpareparts').prop('disabled', true);
			$('#requestDealerSpareparts').prop('disabled', true);
			$('#checkAllProducts').prop('disabled', true);
			if (productsInWihList > 0) {
				$('#deleteAllSpareparts').prop('disabled', false);
				[{if !$isB2BUser}]
				$('#checkAllProducts').prop('disabled', false);
				if (productsCheckedForRequest > 0) {
					$('#requestDealerSpareparts').prop('disabled', false);
				}
				$('#printSpareparts').prop('disabled', false);
				[{/if}]
			} else {
				$('#wishlist-container').hide();
			}
		}

		const updateAmount = async function(iAddAmount, iOxid){
			const params = [];
			return new Promise(function(resolve){
				const stoken = "[{$oViewConf->getSessionChallengeToken()}]";
				// cl=details
				params.push('cl=details');
				// aid=`$oDetailsProduct->oxarticles__oxnid->value`&amp;anid=`$oDetailsProduct->oxarticles__oxnid->value`
				// aid=1_2016 // oxid id article
				params.push(`aid=${iOxid}`);
				// anid=1_2016 // oxid id article
				params.push(`anid=${iOxid}`);
				// fnc=tosparepartlist
				params.push('fnc=tosparepartlist');
				// am=1 // anzahl
				params.push(`am=${iAddAmount}`);
				// listtype=list
				params.push('listtype=list');
				// actcontrol=oxwarticledetails
				params.push('actcontrol=oxwarticledetails');
				// stoken=152B2C04
				params.push(`stoken=${stoken}`);
				
				
			const loc = window.location;
		    $.ajax({
		      type: 'GET',
		      url: `${loc.protocol}//${loc.hostname}/index.php?${params.join('&')}`,
					dataType: 'json',
		      success: function(data) {
						resolve();
		      },
		      error: function() {
				  	resolve();
		      },
		    });
			});
	};

		function handleCountChanged() {
			$('#list-of-sparaparts form input[name=am]').bind('keyup mouseup', async function () {
				collectEnabledProducts();
			});

			$('#list-of-sparaparts input[name=am]').on('keypress', async function(e) {
				if (e.which == 13) {
					collectEnabledProducts();
				}
			  return e.which !== 13;
			});

			$('#list-of-sparaparts input[type=checkbox]').on('change', function() {
				collectEnabledProducts();
			});
		}

		function setResponseTextToFrontend(that, text) {
			let responseTextObject = $(that).parent().find('.response-text');
			if (responseTextObject.length == 0) {
				responseTextObject = $(that).parents('.popover-body').find('.response-text');
			}
			if (responseTextObject.length == 0) {
				responseTextObject = $(that).parents('form.addSparepartToBasket').find('.response-text');
			}
			if (responseTextObject.length == 0) {
				responseTextObject = null;
			}
			if (responseTextObject) {
				responseTextObject.html(text).show();
			}
		}

		const addArticleToSparepartList = async function(element) {
				setResponseTextToFrontend(element, responseText.waitForResponse);
				const params = [];
				const cnid = "[{$oView->getCategoryId()}]";
				const artnum = $(element).attr('data-artnum');
				const stoken = "[{$oViewConf->getSessionChallengeToken()}]";
				let aid = $(element).attr('data-oxid');
				const amount = $(element).parents('form').find('input[name=am]').val() || 1;

				const isAlreadyThere = $(`#list-of-sparaparts form[data-artnum=${artnum}]`).length > 0 || $(`#list-of-sparaparts form[data-replacedartnum=${artnum}]`).length > 0;
				let existingComponent = null;
				if (isAlreadyThere) {
					if ($(`#list-of-sparaparts form[data-artnum=${artnum}]`).length > 0) {
						existingComponent = $(`#list-of-sparaparts form[data-artnum=${artnum}]`);
					} else {
						existingComponent = $(`#list-of-sparaparts form[data-replacedartnum=${artnum}]`);
					}
					aid = existingComponent.find('input[name=aid]').val();
				}

				// cl=details
				params.push('cl=details');
				// aid=`$oDetailsProduct->oxarticles__oxnid->value`&amp;anid=`$oDetailsProduct->oxarticles__oxnid->value`
				// aid=1_2016 // oxid id article
				params.push(`aid=${aid}`);
				// anid=1_2016 // oxid id article
				params.push(`anid=${aid}`);
				// fnc=tosparepartlist
				params.push('fnc=tosparepartlist');
				// am=1 // anzahl
				params.push(`am=${amount}`);
				// cnid=1_131 // category id
				params.push(`cnid=${cnid}`);
				// listtype=list
				params.push('listtype=list');
				// actcontrol=oxwarticledetails
				params.push('actcontrol=oxwarticledetails');
				// stoken=152B2C04
				params.push(`stoken=${stoken}`);
				// stoken="|cat:$oViewConf->getSessionChallengeToken()
				params.push(`artnum=${artnum}`);
				
				if (existingComponent) {
					const newCount = amount + parseInt(existingComponent.find('input[name=am]').val());
					const sProductId = await setAjaxArticleToList(params);
					
					if (sProductId) {
						existingComponent.find('input[name=am]').val(newCount);
						setResponseTextToFrontend(element, responseText.addToWishListSuccess);
					} else {
						setResponseTextToFrontend(element, responseText.addToWishListError);
					}
					handleCountChanged();
					collectEnabledProducts();
					return;
				}
				
				// call post toSparepartList get content
				const sProductId = await setAjaxArticleToList(params);
				if (sProductId) {
					const _params = [];
					_params.push('cl=sparepart_list');
					_params.push(`aid=${sProductId}`);
					_params.push(`anid=${sProductId}`);
					_params.push('fnc=getSparepartAsListElement');
					_params.push(`am=${amount}`);
					_params.push(`cnid=${cnid}`);
					_params.push(`stoken=${stoken}`);

					const sparepartTemplate = await getAjaxArticle(_params);
					if (sparepartTemplate.success) {
						setResponseTextToFrontend(element, responseText.addToWishListSuccess);
						$('#list-of-sparaparts').append(sparepartTemplate.html);
					}	else {
						setResponseTextToFrontend(element, responseText.addToWishListError);
					}
					
				}	else {
					setResponseTextToFrontend(element, responseText.addToWishListError);
				}
				$('#wishlist-container').show();
				addToListHandle();
				handleCountChanged();
				collectEnabledProducts();
				removeSparepartListHandle();
		};

		function addToListHandle() {

			$('.addToSparepartList').off('click').on('click', async function(ev) {
				ev.preventDefault();
				await addArticleToSparepartList(this);
			});

			$('[name=am]').off('change').on('change', async function(ev) {
				ev.preventDefault();				
				const delta = $(this).val() - $(this).attr('data-old-value');
				const aid = $(this).attr('data-oxid');
				$(this).attr('data-old-value', $(this).val());
				await updateAmount(delta, aid);
			});

			$('.addToSparepartListAndRequestDealer').off('click').on('click', async function(ev) {
				ev.preventDefault();
				await addArticleToSparepartList(this);
				const buttonDisabled = $('#requestDealerSpareparts').prop('disabled');
				if (!buttonDisabled) {
					$('#requestDealerSpareparts').trigger('click');
				}
			});

			$('.addToBasket').off('click').on('click', async function(ev) {
				ev.preventDefault();
				setResponseTextToFrontend(this, responseText.waitForResponse);

				const params = [];
				const cnid = "[{$oView->getCategoryId()}]";
				const aid = $(this).attr('data-oxid');
				const anid = $(this).attr('data-oxid');
				const stoken = "[{$oViewConf->getSessionChallengeToken()}]";
				const amount = $(this).parents('form').find('input[name=am]').val() || 1;
				if (!aid) {
					setResponseTextToFrontend(this, responseText.addToBasketError);
					return;
				}
				// cl=details
				params.push('cl=details');
				// aid=`$oDetailsProduct->oxarticles__oxnid->value`&amp;anid=`$oDetailsProduct->oxarticles__oxnid->value`
				// aid=1_2016 // oxid id article
				params.push(`aid=${aid}`);
				// anid=1_2016 // oxid id article
				params.push(`anid=${anid}`);
				// fnc=tosparepartlist
				params.push('fnc=tobasket');
				// am=1 // anzahl
				params.push(`am=${amount}`);
				// cnid=1_131 // category id
				params.push(`cnid=${cnid}`);
				// stoken=152B2C04
				params.push(`stoken=${stoken}`);
				// stoken="|cat:$oViewConf->getSessionChallengeToken()
							
				// call post toSparepartList get content
				await setAjaxArticleToBasket(params);
				setResponseTextToFrontend(this, responseText.addToBasketSuccess);
				refreshMinibasket();
			});
		};

		function removeAllPopovers() {
			$('.hotspot').popover('dispose');
			$('.hotspot.active').removeClass('active');
		};

		function printSparpartList() {
			var prtContent = $('#list-of-sparaparts').html();
			var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
			const cnt = `<html><head><style>.sparepart-remember-list{border-bottom: solid 1px grey;padding-bottom: 20px;}.h3{font-size: 24px font-weight: bold;margin-top:20px;margin-bottom:10px;}.btn{display:none;}input{display:none;}.d-print-none {display:none;}body {font-family: 'Open Sans Condensed',sans-serif;}</style></head><body><img src='/out/alko/src/svg/al-ko.svg' alt='AL-KO Gardentech' class='logo-img'><hr/>${prtContent}</body></html>`;
			WinPrint.document.write(cnt);
			WinPrint.document.close();
			WinPrint.focus();
			WinPrint.print();
			WinPrint.close();
		};

		function filterTableOfSpareparts() {
			$('input.search-for-spareparts').on('keyup', function() {
				var value = $(this).val().toLowerCase();
			  $('#' + $(this).attr('id') + 'Table').find('.table-rows').filter(function() {
					$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
				});
			});
		};

		function activateClickEvents() {
			$('#printSpareparts').off('click').on('click', printSparpartList);

			$('.requestOneProductDealer').off('click').on('click', async function(event) {
				const stoken="[{$oViewConf->getSessionChallengeToken()}]";
				const productId = $(this).attr('data-oxid');
				event.preventDefault();
				const params = [];
				params.push('cl=vendor_search');
				params.push('fnc=getVendorSearchAsElement');
				params.push(`aids=${productId}`);
				params.push('blUsebasketSparepartList=true');
				params.push(`stoken=${stoken}`);
				params.push('sRequestId=vendorRequest');
				const vendorContent = await getVendorRequest(params);
				if (vendorContent.success) {
					$('#vendorRequest').html(vendorContent.html);
				}
			});

			$('#requestDealerSpareparts').off('click').on('click', async function(event) {
				const stoken="[{$oViewConf->getSessionChallengeToken()}]";
				const productIds = [];
				$('#list-of-sparaparts input[type=checkbox]:checked').each(function() {
					productIds.push($(this).val());
				});
				event.preventDefault();
				const params = [];
				params.push('cl=vendor_search');
				params.push('fnc=getVendorSearchAsElement');
				params.push(`aids=${productIds.join(',')}`);
				params.push('blUsebasketSparepartList=true');
				params.push('sRequestId=vendorRequest');
				params.push(`stoken=${stoken}`);

				const vendorContent = await getVendorRequest(params);
				if (vendorContent.success) {
					$('#vendorRequest').html(vendorContent.html);
				}
			});

			$('.highlightHotspot').off('click').on('click', function(event) {
					event.preventDefault();
					const artnum = $(this).attr('data-artnum');
					const group = $(this).attr('data-group');
					const collapseExplodedViews = group.replace('group','collapseExplodedViews');
					$('html, body').scrollTop($(`#${group}`).offset().top);
					// scroll to div
					$(`#${group} .hotspot[data-artnum=${artnum}]`).each(function() {
						$(this).trigger('click');
						if (!$(this).parents('[role="tabpanel"]').hasClass('active')) {
						const tabElement = $(this).parents('[role="tabpanel"]');
						$(`#${$(tabElement).attr('aria-labelledby')}`).trigger('click');
					}
					$(`#${collapseExplodedViews}`).collapse('show');
				});
			});

			$('.hotspot').off('click').on('click', async function(event) {
				event.preventDefault();
				$('.hotspot').popover('hide');
				$(this).popover('toggle');
				addToListHandle();
				$('.hotspot').removeClass('active');
				const artnum = $(this).attr('data-artnum');
				$(`.hotspot[data-artnum=${artnum}]`).addClass('active');
			});

			$(document).mouseup(function(e) {
				const container = $(".popover");
				// if the target of the click isn't the container nor a descendant of the container
				if (!container.is(e.target)  && container.has(e.target).length === 0)
				{
					removeAllPopovers();
				} 
			});

			$(function () {
			  $('[data-toggle="tooltip"]').tooltip()
			});

			$('#checkAllProducts').on('change', function(ev) {
				$("#list-of-sparaparts > div input[type=checkbox]").prop('checked', this.checked);
				collectEnabledProducts();
			});

		};

		

		const addSparepartToBasket = function(url, data) {
			return new Promise(function(resolve) {
				fetch(`${url}${data}`).then(result => resolve(result));
			});
		};

		const sendAllSpareparts = async function() {
			const allForms = [];
			const element = $('#addToBasketWishList');
			setResponseTextToFrontend(element, responseText.waitForResponse);
			$('#list-of-sparaparts form.addSparepartToBasket').each(function () {
				const saleable = $(this).find('input[name=saleable]').val();
				const stock = $(this).find('input[name=stock]').val();
				[{if ($isB2BUser && $oConfig->getConfigParam('blAllowB2bAddToBasketArticleOutOfStock')) ||  ($isB2CUser && $oConfig->getConfigParam('blAllowB2cAddToBasketArticleOutOfStock'))}]
					if (saleable > 0) {
						allForms.push($(this).attr('name'));
					}
				[{else}]
					if (saleable > 0 && stock > 0) {
						allForms.push($(this).attr('name'));
					}
				[{/if}]
			});

			let refreshPage = false;
			for (let i = 0; i < allForms.length; i++) {
				const formName = allForms[i];
				const form = $(`form[name="${formName}"]`);
				if (form) {
					const action = form.attr('action');
					const data = form.serialize();
					await addSparepartToBasket(action, data);
					refreshPage = true;
				}
			}

			if (refreshPage) {
				setResponseTextToFrontend(element, responseText.addToBasketSuccess);
				refreshMinibasket();
			} else {
				setResponseTextToFrontend(element, responseText.addToBasketError);
			}
		};
			
		const getAjaxArticleList = function(artnum) {
		  return new Promise(function (resolve) {

		    const loc = window.location;
		    $.ajax({
		      type: 'POST',
		      url: loc.protocol + "//" + loc.hostname + "/index.php?lang=[{$languageId}]&cl=sparepart_list&fnc=getArticleListSparepartToBuy",
		      dataType: 'json',
		      complete: function(data) {
		        resolve(data)
		      },
		      error: function() {
		        resolve(false);
		      }
		    });
		  });
		};

		const getVendorRequest = function(params) {
		  return new Promise(function (resolve) {
		    const loc = window.location;
		    $.ajax({
		      type: 'GET',
		      url: `${loc.protocol}//${loc.hostname}/index.php?${params.join('&')}`,
		      dataType: 'json',
		      complete: function(data) {
		        resolve(data)
		      },
		      error: function() {
		        resolve(false);
		      }
		    });
		  });
		};

		const getAjaxArticle = function(params) {
		  return new Promise(function (resolve) {
		    const loc = window.location;
		    $.ajax({
		      type: 'GET',
		      url: `${loc.protocol}//${loc.hostname}/index.php?${params.join('&')}`,
		      dataType: 'json',
		      complete: function(data) {
		        resolve(data)
		      },
		      error: function() {
		        resolve(false);
		      }
		    });
		  });
		};

		const setAjaxArticleToList = function(params) {
		  return new Promise(function (resolve) {
		    const loc = window.location;
		    $.ajax({
		      type: 'GET',
		      url: `${loc.protocol}//${loc.hostname}/index.php?${params.join('&')}`,
					dataType: 'json',
		      success: function(data) {
						if (data.success) {
		        	resolve(data.sProductId)
						} else {
							resolve(null)
						}
		      },
		      error: function() {
		        resolve(null);
		      }
		    });
		  });
		};

		

		const setAjaxClearList = function(params) {
		  return new Promise(function (resolve) {

		    const loc = window.location;
		    $.ajax({
		      type: 'GET',
		      url: `${loc.protocol}//${loc.hostname}/index.php?${params.join('&')}`,
		      complete: function(data) {
		        resolve(true)
		      },
		      error: function() {
		        resolve(false);
		      }
		    });
		  });
		};

		const switchToBaujahr = function(baujahr) {
			$('.imagemap-content').hide();
			$('.imagemap-content .active').removeClass('active').removeClass('show');
			$(`#${baujahr}imageMapTab li:first-child a`).addClass('active show');
			$(`#${baujahr}imageMapTabContent div:first-child`).addClass('active show');
			$(`#${baujahr}`).show();
		};

		const stockLabels = {
			lowStock: "<span class=\"text-warning\">[{oxmultilang ident="LOW_STOCK"}]</span>",
			readyForShipping: "<span class=\"text-success\">[{oxmultilang ident="READY_FOR_SHIPPING"}]</span>",
			outOfStock: "<span class=\"text-danger\">[{oxmultilang ident="MESSAGE_NOT_ON_STOCK"}]</span>",
			stockWithCount: "<span class=\"text-warning\">[{oxmultilang ident="LIST_MESSAGE_ON_STOCK_WITH_COUNT"}]</span>"
		};

		const responseText = {
			addToBasketSuccess: "<span class=\"text-success\">[{oxmultilang ident="SPAREPART_IN_BASKET"}]</span>",
			addToWishListSuccess: "<span class=\"text-success\">[{oxmultilang ident="SPAREPART_IN_WISHLIST"}]</span>",
			waitForResponse: "<span class=\"text-warning\">[{oxmultilang ident="SPAREPART_WAIT_FOR_RESPONSE"}]</span>",
			addToBasketError: "<span class=\"text-danger\">[{oxmultilang ident="SPAREPART_ERROR_TO_BASKET"}]</span>",
			addToWishListError: "<span class=\"text-danger\">[{oxmultilang ident="SPAREPART_ERROR_TO_WISHLIST"}]</span>"
		}


		$('#constructionyear').on('change', function(event) {
			switchToBaujahr(event.target.value);
		});

		let activeBaujahr = 'group[{$aAllExplodedViews[0]->month}][{$aAllExplodedViews[0]->year}]';

		collectEnabledProducts();
		handleCountChanged();
		removeSparepartListHandle();
		removeAllSparepartListHandle();

		switchToBaujahr(activeBaujahr);
		addToListHandle();
		activateClickEvents();
		filterTableOfSpareparts();


	</script>