{config_load file="$language/lang_$language.conf" section="product_info"}
{config_load file="$language/lang_$language.conf" section="index"}
{yes_vars assign="YES"}
{yes_vars assign="YES" contents=1}

<link rel="stylesheet" type="text/css" href="/{$tpl_path}/js/switcher/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
{assign var="myArray" value=[]}
{foreach key=s item=itm from=$INFO.PROPERTIES}
		{append var='myArray' value=['title' => {$itm.title}, 'text' =>{$itm.text}, 'script' => {$itm.tag},'id' =>{$itm.id}, 'vals'=>[]]}
		{foreach key=s_1 item=itm_1 from=$itm.values}
			{assign var="min_max" value=":"|explode:$itm_1.input_span}
			{$myArray[{$s}].vals[$s_1]=['id'=>{$itm_1.id},'price_brutto'=>{$itm_1.price_brutto},'title'=>{$itm_1.title},'files_image'=>{$itm_1.files_image},'min_span'=>{$min_max[0]},'max_span'=>{$min_max[1]}]}
		{/foreach}						
{/foreach}
<style>
	#preloader {
    position: fixed; /* Positionierung relativ zum Browserfenster */
    top: 0;
    left: 0;
    width: 100%; /* Breite des Preloaders entspricht der Breite des Bildschirms */
    height: 100%; /* Höhe des Preloaders entspricht der Höhe des Bildschirms */
    background-color: rgba(255, 255, 255, 0.8); /* Hintergrundfarbe mit Transparenz */
    z-index: 400; /* Stelle sicher, dass der Preloader über allem anderen liegt */
    display: none; /* Standardmäßig ausblenden */
}

.spinner {
    position: absolute; /* Positionierung relativ zum Elternelement */
    top: 50%; /* Zentriere vertikal */
    left: 50%; /* Zentriere horizontal */
    transform: translate(-50%, -50%); /* Zentriere horizontal und vertikal */
    border: 4px solid #D9C2AD; /* Randstil des Spinners */
    border-top: 4px solid #71736A; /* Randstil des Spinners */
    border-radius: 50%; /* Mache den Spinner rund */
    width: 40px; /* Breite des Spinners */
    height: 40px; /* Höhe des Spinners */
    animation: spin 1s linear infinite; /* Füge eine Drehanimation hinzu */
}

@keyframes spin {
    0% { transform: rotate(0deg); } /* Startwinkel der Drehung */
    100% { transform: rotate(360deg); } /* Endwinkel der Drehung */
}
.add_to_cart{
	display:none;
}
.modal h5 {
    font-size: 18px;
    font-weight: bold;
    color: #71736A;
    padding: 8px 22px;
    background-color: #D9C2AD;
    margin: -10px -25px 14px;
    border-radius: 6px;
}
.modal .modal-cnt{
	font-weight:normal;
	font-size:16px;
}
#price-alert{
	border:3px solid red;
	background-color:#fff;
	color:#333;
	padding:15px;
	margin-bottom:15px;
	display:none;
}


</style>



<div id="preloader">
	<div class="spinner"></div>
</div>
<div id="alert-modal" class="modal">
	<h5>Benachrichtigung</h5>
	<div class="modal-cnt"></div>
  </div>
<div class="work">	
	<div class="left">
		<div id="price-alert">
			Die angegebenen Maße können nicht für die aktuelle Konfiguration angewendet werden. Bitte passen Sie die Maße an oder kontaktieren Sie für weitere Unterstützung unseren Support unter der folgenden Nummer: <b>[Kontaktnummer einfügen]</b>.
		</div>
		<div id="select_input"></div>
		
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2" style="margin-bottom: 0px; padding-bottom: 0px;">
				<div class="columns">
					{if $YES.CONTENT.ID_108.text}{$YES.CONTENT.ID_108.text}{/if}
				</div>
			</div>
		</div>
		</div>
		
		
		
	</div>
	<div class="right">
	<div class="blue">
	  <h2 class="main-title">{$INFO.PRODUCTS_NAME}</h2>
	<div class="gen_img_holder">
		<div id="gen_img_o"></div>
	  <div id="gen_img">
		<div id="gen_img_2"></div>
		<div id="gen_img_3"></div>
	  </div>
	  <div id="gen_img_u"></div>
	  <span id="gen_img_info"></span>
	</div>
	</div>
	<div class="grey" style="font-size: 12px;">	
	<span>{$INFO.PRODUCTS_DESCRIPTION}</span>	
	</div>	
	<div class="grey">
		<div class="white">
			<div class="check_holder check_right">
			  <span class="check_title">Grundpreis: </span><span class="check_base check_right_text">{$INFO.PRODUCTS_PRICE}</span>
			</div>
			<div class="check_holder check_right no-border">
			  <span class="check_title">Aufpreis: </span><span class="check_value check_right_text">+ 0,00 EUR</span>
			</div>
			<div class="check_holder check_right total">
			  <span class="check_title">Gesamtpreis: </span><span class="check_total check_right_text price">{$INFO.PRODUCTS_PRICE}</span>
			</div>
			<div class="add_to_cart">
			<input id="qty" type="number" value="1">
			<button class="add_to_cart">zum Warenkorb</button>
		  </div>
		</div>

	<div class="check_val">
	
	</div>
	</div>
	</div>	
	</div>
	<script src="/{$tpl_path}/js/switcher/script.js"></script>
	{literal}
<script>
	const src = eval({/literal}{$myArray|@json_encode nofilter}{literal});
	selection.init({/literal}{$INFO.PRODUCTS_ID}{literal},{/literal}{$INFO.PRODUCTS_PRICE_RAW}{literal},src);
	</script>
{/literal}