{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}

<!-- ADMIN ZUGANG START -->
<div>
{* Kontrollfeld einblenden für die vereinfachte Kontrolle der MASTER-SLAVE und FSK18 Konfiguration *}
	{* Link einblenden für die direkte Produktbearbeitung *}
	{if $YES.SMARTY_SESSION_customers_status_array.customers_status_name == "Admin"}
		
		<div style="position:fixed; top:0px; left:0px; width:200px; padding:5px; background:#fff; color:#000; font-size:11px; border: 1px solid #000;z-index:999">
			{if $PRODUCTS_MASTER == 0 AND $slaves != ""}
				MASTER = JA<br>
			{/if}
			{if $PRODUCTS_MASTER != 0}
				<b>SLAVE = JA<br>
				<a href="{$PRODUCTS_MASTER_LINK|replace:'http://':'https://'}">Link to the Parent</a></b><br>
			{/if}
			{if $PRODUCTS_FSK18}
				<div style=" background-color:#F00;">This product is marked as FSK 18!</div>
			{else}
				<div style=" background-color:#2ba6cb;color:#fff;">This product is NOT marked as FSK 18!</div>
			{/if}
			<hr>
			Stock V1: <strong>{$VERFUEGBARER_BESTAND1} pcs.</strong>
			<br>Stock V2: <strong>{$VERFUEGBARER_BESTAND2} pcs.</strong>
			<br>Stock phys.: <strong>{$PRODUCTS_QUANTITY} pcs.</strong>
			<hr><strong>For article editing: </strong>
			<a href="{$YES.HTTP_SERVER|replace:'http://':'https://'}admin/categories.php?action=new_product&pID={$PRODUCTS_ID}" target="_blank"><strong>[PID: {$PRODUCTS_ID}]</strong></a>
		</div>
	{/if} 
</div>
<!-- ADMIN ZUGANG ENDE -->
<style>
.availability-box {
  background-color: #30358C;
  color: white;
  padding: 16px 20px;
  border-radius: 8px;
  font-family: sans-serif;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.availability-text {
  flex: 1;
}

.info-icon {
  width: 24px;
  height: 24px;
  background-color: white;
  color: #30358C;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
  margin-left: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.availability-box:hover .info-icon {
  background-color: #f4f4f4;
  color: #2d2d2d;
}

/* Modal Styles */
.modal {
  display: none; 
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* Dark background */
}

.modal-content {
  background-color: white;
  margin: auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  font-family: sans-serif;
  color: #2d2d2d;
  position: relative;
}

.close {
  color: #aaa;
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: black;
}

.gp-title {
  font-weight: 600;
  margin-bottom: .25rem;
}

.graduated-table {
  width: 100%;
  border-collapse: collapse;
}

.graduated-table td {
  padding: .25rem .5rem;
  vertical-align: middle;
}

/* Bold the quantity column */
.graduated-table tr td:first-child {
  font-weight: 700;
}

/* Optional: light separator for readability */
.graduated-table tr + tr td {
  border-top: 1px solid #eee;
}

.graduated-table { width:100%; border-collapse:collapse; }
.graduated-table tr + tr td { border-top:1px solid #e5e5e5; }
.graduated-table td { padding:4px 0; }
.gp-title { font-weight:700; text-align:left; padding:0 0 6px; }


</style>

<div class="modal modal-lg fade" id="modal-big-buy" tabindex="-1">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title">Anfrage</h5>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  <div class="row">
			<div class="col-5">
				<div class="p-3 rounded-4 rounded border border-2 border-primary">
					<h2 class="mb-4 fs-5">Article request</h2>
				Are you planning to order a larger quantity of this item? We appreciate your interest and are happy to provide you with a customized offer. To ensure that we can process your request in the best possible way, please let us know the desired quantity and any special requirements. Our team will contact you immediately to discuss all the details and provide you with an attractive quote.
			</div>
			</div>
			<div class="col-7">
				<div class="contact-box p-3 rounded-4">
					<form name="contact_us" action="shop_content.php?action=send&coID=7" method="POST">
						<!-- Name -->
                        <div class="mb-3">														
                            <input type="text" name="name" class="form-control" id="name" 
							{if $YES.SMARTY_SESSION_customer_last_name}value="{$YES.SMARTY_SESSION_customer_last_name} {$YES.SMARTY_SESSION_customer_first_name} "{/if}
							placeholder="Ihr Name" required>
                        </div>
        
                        <!-- E-Mail -->
                        <div class="mb-3">
                            <input type="email"
							{if $YES.SMARTY_SESSION_customers_email_address}value = "{$YES.SMARTY_SESSION_customers_email_address}"{/if}
							name="email" class="form-control" id="email" placeholder="Ihre E-Mail-Adresse" required>
                        </div>
        
                        <!-- Nachricht -->
                        <div class="mb-3">
                            <textarea name="message_body" class="form-control" id="message" rows="5" placeholder="Ihre Nachricht" required>I would like to make a request for the article {$PRODUCTS_MODEL} make.
							</textarea>
                        </div>
        
                        <!-- Senden-Button -->
						 <div>
							{$VVIMG}	
							<label class="field prepend-icon">
								<input required="" type="text" name="vvcode" class="gui-input" placeholder="Enter code here">
								<span class="field-icon"><i class="fa fa-barcode"></i></span>
							</label>	
						</div>
							<div class="text-end mt-3 border-top border-2 pt-2">					
                            <button type="submit" class="btn btn-primary">
                                <i class="fa-solid fa-paper-plane me-2"></i> Send request
                            </button>
                        </div>
                    </form>
                </div>
			</div>
		  </div>
		</div>
	</div>
	</div>
  </div>
  <div class="modal fade" id="modal-max" tabindex="-1">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  <p>The quantity you have entered corresponds to the maximum available delivery quantity. You are welcome to send us an inquiry so that we can check whether delivery of the desired quantity is possible. </p>
		</div>
		<div class="modal-footer">
			<button type="button" data-bs-toggle="modal" data-bs-target="#modal-big-buy" class="btn btn-primary">to the inquiry form</button>
		  </div>
	  </div>
	</div>
  </div>

<!--{if $INFO.QUANTITY_AVAILABLE1 > 0 and ( $YES.SMARTY_SESSION_customers_status_array.customers_status_id < 1 || $YES.SMARTY_SESSION_customers_status_array.customers_status_id > 2)}-->
<div class="cart-slide">
	{$FORM} 
	<div class="container">
	<div class="d-lg-flex justify-content-between">   
		<div class="footer-cart">
		<h4 >{$INFO.PRODUCTS_NAME}</h4>  
			Item number: {$PRODUCTS_MODEL} 
	</div>
		<div class=""> 
		<input class="slide-input check-max" type="number" name="products_qty" value="1" size="3" step="1" min="1" max="{$INFO.QUANTITY_AVAILABLE1}" /> 
		<a href="#" class="btn btn-primary btn-big-buy" data-bs-toggle="modal" data-bs-target="#modal-big-buy"><i class="fa-solid fa-exclamation"></i></a>
		<input type="hidden" name="products_id" value="{$INFO.PRODUCTS_ID}" />
	  <button type="submit" class="btn btn-primary">
		<div class="spinner-border spin-int d-none" role="status">
			<span class="visually-hidden">Loading...</span>
		  </div><i class="fa-solid fa-cart-shopping"></i> Add to shopping cart
	  </button>
	</div>                          
	</div>
	</div>
	{$FORM_END}
</div>
<!--{/if}-->
<div class="pt-5">
<div class="container">
    <div class="row">
        <!-- Rechte Seite (Titel, Artikelnummer, etc.) - wird mobil nach oben verschoben -->
        <div class="col-md-6 order-2 order-md-2 mb-4">
            <h1 class="product-title">{$INFO.PRODUCTS_NAME}</h1>
            <!--{if $INFO.QUANTITY_AVAILABLE1 > 0 and ( $YES.SMARTY_SESSION_customers_status_array.customers_status_id < 1 || $YES.SMARTY_SESSION_customers_status_array.customers_status_id > 2)}-->
				<div class="prod-meta">
					{$FORM} 
					<div class="d-lg-flex d-block align-items-center justify-content-between p-0 rounded-4 flex-wrap">
					  
					  <!-- Base Price -->
					  <div class="product-price mb-3 col-lg-12 col-12 pe-4 fw-bold">
						{$PRODUCTS_PRICE|replace:'EUR':'&euro;'|replace:'Ab':'Starting from'}
					  </div>
					  
					  <!-- Row 1: Quantity & Calculate Button (conditionally shown) -->
					  <div class="d-lg-flex d-block align-items-center justify-content-between w-100 mb-2">
						<div class="quantity-box col-lg-6 col-12 mb-2">
						  <input class="form-control d-inline-block w-100 check-max" 
								 type="number" 
								 name="products_qty" 
								 value="1" 
								 size="3" 
								 step="1" 
								 min="1" 
								 max="" /> 
						  <input type="hidden" name="products_id" value="{$INFO.PRODUCTS_ID}" />
						</div>
						
						<div class="d-lg-flex d-block align-items-center justify-content-between w-100">
						  <button type="button" class="btn btn-primary col-lg-12 col-12 mb-2" id="calcPriceBtn">
							<i class="fa-solid fa-calculator"></i> Calculate Price
						  </button>
						</div>
					  </div>
					  
					  <div class="dynamic-total col-lg-12 col-12 fw-bold mb-3"></div>
					  
					  <!-- Row 2: Add to Cart -->
					  <button type="submit" class="btn btn-primary col-lg-12 col-12 mb-2">
						<div class="spinner-border spin-int d-none" role="status">
						  <span class="visually-hidden">Loading...</span>
						</div>
						<i class="fa-solid fa-cart-shopping"></i> Add to shopping cart
					  </button>        
					  
					</div>

					<!-- Tiered Table -->
					<div class="col-lg-12 col-12 text-start pe-4 mt-3">
					  {$MODULE_graduated_price|replace:'<table width="100%" border="0">':'<table class="graduated-table" id="graduated-table">'|replace:'<div align="center">':'<div class="gp-title">'|replace:'Staffelpreise':'Volume Discounts&nbsp;&amp;&nbsp;Quantity Pricing'|replace:'Stk.':'units'|replace:'je ':'per&nbsp;unit '|replace:' &gt; ':' &ge; '|replace:' > ':' &ge; '|replace:'Piece&nbsp;':'pcs'|replace:'EUR':'&euro;'|replace:'nowrap=""':''}
					</div>

					<!-- Accordion Section -->
					<div class="accordion my-4" id="accordionShipping">
					  <div class="accordion-item" id="tieredAccordionSection">
						<h2 class="accordion-header" id="headingTiered">
						  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTiered" aria-expanded="false" aria-controls="collapseTiered">
							Tiered Pricing, Pallets & Container Efficiency
						  </button>
						</h2>
						<div id="collapseTiered" class="accordion-collapse collapse" aria-labelledby="headingTiered" data-bs-parent="#accordionShipping">
						  <div class="accordion-body">
							<p>
							  At <strong>SYD Green Energy</strong>, our pricing structure is designed for professional buyers. 
							  Each tier reflects <strong>pallet-based quantities</strong>. Depending on the product type, 
							  <strong>20–30 pallets fit into a 40-foot high-cube container</strong>.
							</p>
							<ul>
							  <li><strong>Lower Costs:</strong> Bigger orders unlock better per-unit pricing.</li>
							  <li><strong>Reduced Shipping:</strong> Containerized shipping is far more cost-efficient than multiple small deliveries.</li>
							  <li><strong>Eco-Friendly:</strong> Fewer shipments = less packaging waste & reduced <strong>CO₂ footprint</strong>.</li>
							</ul>
							<p>
							  By consolidating your orders into pallet or container volumes, you optimize your margin, logistics efficiency, and sustainability.<br><br>
							  <strong>Note: If partial pallets are created by your order, other products may be merged into the same pallet, and the final number of pallets may vary. 
							  The exact pallet count can only be determined after order confirmation, when our logistics team reviews your order to ensure the most compact and efficient delivery.</strong>
							</p>
						  </div>
						</div>
					  </div>
					</div>

					{$FORM_END}
					</div>
			<!--{else}
			            <div class="d-lg-flex d-block align-items-center quantity-and-cart p-3 rounded-4 mb-4" style="margin-top:-30px;">				          
							<div class="product-price col-12 text-end pe-4">
								{$PRODUCTS_PRICE|replace:'EUR':'&euro;*'}
							</div>
			            </div>	
			{/if}-->
			<div class="product-meta rounded-4 p-0 mt-2">            			            
				<div class="row">
						<div class="col-6">
							<span class="product-sku mb-1"><span class="fw-bold">Item number:</span><br> {$PRODUCTS_MODEL}<br></span>
						<!--{if $INFO.QUANTITY_AVAILABLE1 > 0}<span class="fw-bold">Availability:</span><br> Available immediately <br>{else}<span class="fw-bold text-danger">Currently not available</span><br>{/if}-->
						{if $INFO.PRODUCTS_SHIPPING_NAME}
							<span class="fw-bold">Delivery time:</span><br> {$INFO.PRODUCTS_SHIPPING_NAME}
						{/if}
						{if $INFO.PRODUCTS_DATE_AVAILABLE|date_format:"%Y" >= $smarty.now|date_format:"%Y"}
						  <div class="availability-box" onclick="openModal()">
							<div class="availability-text">
							  <b>Currently unavailable.<br>Expected back in stock on:</b><br>
							  <b>{$INFO.PRODUCTS_DATE_AVAILABLE|date_format:"%e.%m.%Y"}</b>
							</div>
							<div class="info-icon" title="Click for more info">?</div>
						  </div>
						{/if}

						<!-- Modal -->
						<div id="availability-modal" class="modal">
						  <div class="modal-content">
							<span class="close" onclick="closeModal()">&times;</span>
							<h2>Pre-Order Details</h2>
							<p>
							  Thank you for your interest in this product. At the moment, this item is currently unavailable, but we expect it to be back in stock soon.
							</p>
							<p>
							  You may still proceed with a pre-order. By placing the product in your shopping cart and completing the checkout process, you are submitting a <strong>non-binding inquiry</strong> — not a direct purchase.
							</p>
							<p>
							  Once we receive your inquiry, you will get an automatic email confirmation. Shortly after, our team will review your request and send you a detailed order confirmation, including pricing, availability updates, and expected delivery timelines.
							</p>
							<p>
							  If any changes or delays occur, we will notify you immediately. Your order will be shipped as soon as the product becomes available again.
							</p>
							<p><strong>Note:</strong> Our online store does not perform direct sales. All submitted inquiries are handled manually with personal follow-up and order confirmation.</p>

						  </div>
						</div>

						</div>
						<div class="col-6 text-end">
						<div class="fw-bold text-primary mb-4">			
							{if $MANUFACTURERS_INFO.manufacturers_image!=''}
							<div class="manufact ">
									<a href="{$MANUFACTURERS_INFO.manufacturers_url}"><img src="images/{$MANUFACTURERS_INFO.manufacturers_image}"></a>
							</div><br>
							{/if}
							{if $YES.CONTENT.ID_55.text}
								{$YES.CONTENT.ID_55.text}		
							{/if}
						</div>
					</div>			
				</div>
				<hr>	
				<button id="share-via-email" class="btn btn-outline-primary " onclick="sharePage();">   
					  <i class="fa-solid fa-share"></i> Share page</button>                
				<a href="javascript:window.open('/print_product_info.php?products_id={$PRODUCTS_ID}', 'popup', 'toolbar=0, width=640, height=600')" class="btn btn-outline-primary">
					<i class="fa-solid fa-print"></i> Print data sheet</a> 
				<button class="btn btn-outline-primary modal-call" data-modaltitle="Versandkostentabelle" data-modalsize="lg" 
				data-modalcnt='<embed type="text/html" src="{$YES.HTTP_SERVER}/popup_shippingcosts.php?products_id={$PRODUCTS_ID}" style="width:100%; height:300px; overflow-y: visible; ">
					'>
					<i class="fa-solid fa-truck-fast"></i> Shipping costs table</button> 
        
					{if $PRODUCTS_SHORT_DESCRIPTION}				
					<div class="short-desc rounded-4 p-3 border-2 mt-3 border">
						{$PRODUCTS_SHORT_DESCRIPTION}
					</div>
					{/if}	
				</div>
				</div>		
        <!-- Linke Seite: Bilder -->
        <div class="col-md-6 order-1 order-md-1">
            <!-- Großes Bild -->
            <div class="big-image-container text-center mb-4 d-lg-block">
                <a href="{$INFO.PRODUCTS_IMAGE_INFO|replace:"info_images":"popup_images"}" data-lightbox="image" data-title="Hauptbild" >
                <img id="main-image" src="{$INFO.PRODUCTS_IMAGE_INFO|replace:"info_images":"popup_images"}" class="img-fluid big-image" alt="Artikelbild">
                </a>
            </div>

            <!-- Kleinere Bilder -->
            <div class="row justify-content-center mb-4">
				<div class="col col-xl-2">
					<a href="{$INFO.PRODUCTS_IMAGE_INFO|replace:"info_images":"popup_images"}" data-lightbox="galery" data-title="Hauptbild" >
					<img src="{$INFO.PRODUCTS_IMAGE_INFO|replace:"info_images":"popup_images"}" class="img-fluid small-image img-thumbnail" alt="Artikelbild"  data-src="{$INFO.PRODUCTS_IMAGE_INFO|replace:"info_images":"popup_images"}">
					</a>
				</div>

				{if $PRODUCTS_IMAGE_1}						
                <div class="col col-xl-2">
                    <a href="{$PRODUCTS_IMAGE_1|replace:"info_images":"popup_images"}" data-lightbox="galery" data-title="Bild 1" >
                    <img src="{$PRODUCTS_IMAGE_1|replace:"info_images":"popup_images"}" class="img-fluid small-image img-thumbnail" data-src="{$PRODUCTS_IMAGE_1|replace:"info_images":"popup_images"}" alt="Artikelbild 1">
                    </a>
                </div>
				{/if}

				{if $PRODUCTS_IMAGE_2}						
                <div class="col col-xl-2">
                    <a href="{$PRODUCTS_IMAGE_2|replace:"info_images":"popup_images"}" data-lightbox="galery" data-title="Bild 2" >
                    <img src="{$PRODUCTS_IMAGE_2|replace:"info_images":"popup_images"}" class="img-fluid small-image img-thumbnail" data-src="{$PRODUCTS_IMAGE_2|replace:"info_images":"popup_images"}" alt="Artikelbild 2">
                    </a>
                </div>
				{/if}

				{if $PRODUCTS_IMAGE_3}						
                <div class="col col-xl-2">
                    <a href="{$PRODUCTS_IMAGE_3|replace:"info_images":"popup_images"}" data-lightbox="galery" data-title="Bild 3" >
                    <img src="{$PRODUCTS_IMAGE_3|replace:"info_images":"popup_images"}" class="img-fluid small-image img-thumbnail" data-src="{$PRODUCTS_IMAGE_3|replace:"info_images":"popup_images"}" alt="Artikelbild 3">
                    </a>
                </div>
				{/if}

				{if $PRODUCTS_IMAGE_4}						
                <div class="col col-xl-2">
                    <a href="{$PRODUCTS_IMAGE_4|replace:"info_images":"popup_images"}" data-lightbox="galery" data-title="Bild 4" >
                    <img src="{$PRODUCTS_IMAGE_4|replace:"info_images":"popup_images"}" class="img-fluid small-image img-thumbnail" data-src="{$PRODUCTS_IMAGE_4|replace:"info_images":"popup_images"}" alt="Artikelbild 4">
                    </a>
                </div>
				{/if}

				{if $PRODUCTS_IMAGE_5}						
                <div class="col col-xl-2">
                    <a href="{$PRODUCTS_IMAGE_5|replace:"info_images":"popup_images"}" data-lightbox="galery" data-title="Bild 5" >
                    <img src="{$PRODUCTS_IMAGE_5|replace:"info_images":"popup_images"}" class="img-fluid small-image img-thumbnail" data-src="{$PRODUCTS_IMAGE_5|replace:"info_images":"popup_images"}" alt="Artikelbild 5">
                    </a>
                </div>
				{/if}

				{if $PRODUCTS_IMAGE_6}						
                <div class="col col-xl-2">
                    <a href="{$PRODUCTS_IMAGE_6|replace:"info_images":"popup_images"}" data-lightbox="galery" data-title="Bild 6" >
                    <img src="{$PRODUCTS_IMAGE_6|replace:"info_images":"popup_images"}" class="img-fluid small-image img-thumbnail" data-src="{$PRODUCTS_IMAGE_6|replace:"info_images":"popup_images"}" alt="Artikelbild 6">
                    </a>
                </div>
				{/if}
                
            </div>
        </div>
    </div>
  </div>
  <div class="container">
 <!-- Tabs -->
 <ul class="nav nav-tabs" id="productTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="description-tab" data-bs-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tech-tab" data-bs-toggle="tab" href="#tech" role="tab" aria-controls="tech" aria-selected="false">Technical data</a>
    </li>
	<li class="nav-item">
        <a class="nav-link" id="details-tab" data-bs-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">Details</a>
    </li>
	{if $PRODUCTS_CONTENT}
	<li class="nav-item">
        <a class="nav-link" id="download-tab" data-bs-toggle="tab" href="#download" role="tab" aria-controls="download" aria-selected="false">Download</a>
    </li>
	{/if}
	{if $slaves} 
	<li class="nav-item">
		<a class="nav-link" id="products-tab" data-bs-toggle="tab" href="#products" role="tab" aria-controls="products" aria-selected="false">Variants</a>
	</li>
	{/if}
    <li class="nav-item">
        <a class="nav-link" id="related-tab" data-bs-toggle="tab" href="#related" role="tab" aria-controls="related" aria-selected="false">Contact us</a>
    </li>
</ul>

<div class="tab-content py-4" id="productTabContent">
    <!-- Beschreibung -->
    <div class="tab-pane fade show p-3 active" id="description" role="tabpanel" aria-labelledby="description-tab">
		<div class="prod-desc">
			{$PRODUCTS_DESCRIPTION}
		</div>	
		{if $MANUFACTURERS_INFO.manufacturers_name =! ''}

		<div style="padding: 20px;">
		<hr>
		<tr>
			<td><span style="color: #004380;font-size: 12px;font-weight: 700">Product Safety Act (German "ProdSG")</span>
				<span style="font-size: 12px;color: #555;">
				<br><b>Manufacturer:</b> {$MANUFACTURERS_INFO.manufacturers_meta_description}
				{if $MANUFACTURERS_INFO.manufacturers_meta_keywords}
				<br><b>Responsible importer:</b> {$MANUFACTURERS_INFO.manufacturers_meta_keywords}
				{/if}</span>
			</td>
		</tr>
		<hr>
		</div>
		{/if}
    </div>
	<!--Verwandte Artikel-->
	<div class="tab-pane fade p-3" id="products" role="tabpanel" aria-labelledby="products-tab">
		<!--Slaves-->						
		
		
		<div class="row">
				{foreach from=$slaves item=product}	  
				<div class="col-12 col-md-6 col-lg-4 text-center">
					<a style="text-decoration:none;" href="{$product.PRODUCTS_LINK}">
					<img src="images/product_images/thumbnail_images/{$product.products_image}"" alt="{$product.slave_title}">
					<h4>{$product.slave_title}</h4>
					<span class="var-price">{$product.price|replace:'EUR':'&euro;*'}</span>
					</a>
				</div>
				{/foreach}
		</div>		
			  
		
	</div>
	<!-- Technische Details -->
	<div class="tab-pane fade p-3" id="tech" role="tabpanel" aria-labelledby="details-tab">
		<div class="prod-desc">

		{$EXTRATEXT}
           </div>
    </div>
    <!-- Details -->
    <div class="tab-pane fade p-3" id="details" role="tabpanel" aria-labelledby="details-tab">
		<div class="prod-desc">

		{$MODULE_product_characteristics}
           </div>
    </div>
	<!-- Download -->
	<div class="tab-pane fade p-3" id="download" role="tabpanel" aria-labelledby="details-tab">
		<div class="prod-desc">
			{if $PRODUCTS_CONTENT}
<div style="padding-top:20px">
	<ul class="list-group">
{foreach item=CONTENT from=$PRODUCTS_CONTENT}
<li class="list-group-item">
<a href="{$CONTENT.content_file}"> {$CONTENT.content_name}</a>
</li>

{/foreach}
</ul>
</div>
{/if}
           </div>
    </div>

    <!-- Verwandte Artikel -->
    <div class="tab-pane fade p-3" id="related" role="tabpanel" aria-labelledby="related-tab">
        <div class="row">
            <div class="col-12 col-lg-6">
                <div class="contact-box p-3 rounded-4">
                    <h2 class="mb-4">Do you have any questions? We are happy to help.</h2>
					<form name="contact_us" action="shop_content.php?action=send&coID=7" method="POST">
						<!-- Name -->
                        <div class="mb-3">														
                            <input type="text" name="name" class="form-control" id="name" 
							{if $YES.SMARTY_SESSION_customer_last_name}value="{$YES.SMARTY_SESSION_customer_last_name} {$YES.SMARTY_SESSION_customer_first_name} "{/if}
							placeholder="Ihr Name" required>
                        </div>
        
                        <!-- E-Mail -->
                        <div class="mb-3">
                            <input type="email"
							{if $YES.SMARTY_SESSION_customers_email_address}value = "{$YES.SMARTY_SESSION_customers_email_address}"{/if}
							name="email" class="form-control" id="email" placeholder="Ihre E-Mail-Adresse" required>
                        </div>					

                        <!-- Nachricht -->
                        <div class="mb-3">
                            <textarea name="message_body" class="form-control" id="message" rows="5" placeholder="Ihre Nachricht" required>I have a question about the article: {$PRODUCTS_MODEL}
							</textarea>
                        </div>
        
                        <!-- Senden-Button -->
						 <div>
							{$YES_CAPTCHA}	
						</div>
							<div class="text-end mt-3 border-top border-2 pt-2">					
                            <button type="submit" class="btn btn-primary">
                                <i class="fa-solid fa-paper-plane me-2"></i> Send message
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <img class="w-100 rounded-4" src="/templates/yes-system/img/emotional-sec-1.jpg">
            </div>
        </div>
        
    </div>

</div>




<div class="product-list ">
    <div class="container">
		{if $MODULE_xsell}
		{$MODULE_xsell}
		{/if}
    </div>
</div>
</div>
</div>

<script>
	function sharePage() {
	  if (navigator.share) {
		navigator.share({
		  title: document.title,
		  url: window.location.href
		})
		.then(() => console.log('Erfolgreich geteilt'))
		.catch((error) => console.error('Fehler beim Teilen:', error));
	  } else {
		alert('Teilen wird von Ihrem Browser nicht unterstützt.');
	  }
	}
	let imageSwap = {
    init:function(){
        $('.small-image').hover(function() {
            var newSrc = $(this).attr('data-src');
            $('#main-image').attr('src', newSrc);
            $('#main-image').parent('a').attr('href',newSrc);
        });
    }
	};
	$(document).ready(function() {
	imageSwap.init();
    // Toggle dropdown on button click
    $('.dropdown-button').click(function() {
      $('.dropdown-content').toggle();
    });
	$(window).click(function(e) {
      if (!$(e.target).closest('.dropdown-button').length) {
        $('.dropdown-content').hide();
      }
    });
	$.each($('.dropdown-single'),function(){
		$(this).on('click',function(){
			window.location.href=$(this).attr('data-link');
		})
	})
    // Close the dropdown if clicked outside
    $(window).scroll(function() {
    // Berechne die Scroll-Position und die Höhe des Fensters
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var documentHeight = $(document).height();
    var distanceFromBottom = documentHeight - (scrollTop + windowHeight);
    if (scrollTop > 180 && distanceFromBottom > 220) {
      // Zeige den Footer, wenn mehr als 180px nach oben gescrollt wurde
      // und der Abstand vom unteren Rand <= 120px ist
      $('.cart-slide').addClass('visible');
    } else {
      // Verstecke den Footer, wenn weniger als 180px gescrollt wurde
      // oder der Abstand vom unteren Rand mehr als 120px beträgt
      $('.cart-slide').removeClass('visible');
    }
  	});
	$.each($('.check-max'),function(){
		$(this).on('keyup keypress blur change', function() {    
			let val = 1;
    		var max = parseInt($(this).attr('max'));
    		var value = parseInt($(this).val());
    		if (value > max) {
      			val = max				
    		}else{
				val = $(this).val();
			}
			$('.check-max').val(val);
			if($('.check-max').val()>=50 && $('.check-max').val()<max){
				$('.btn-big-buy').css('display','inline-block')
			}else if($('.check-max').val()==max){
				let $modal = $('#modal-max');				
				$modal.modal('show');
			}
			else
			{
				$('.btn-big-buy').css('display','none')
			}			
  		});
	})
	

});





  function openModal() {
    document.getElementById("availability-modal").style.display = "block";
  }

  function closeModal() {
    document.getElementById("availability-modal").style.display = "none";
  }

  // Optional: Close modal if clicking outside
  window.onclick = function(event) {
    const modal = document.getElementById("availability-modal");
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }  
	</script>

{literal}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const calcBtn = document.getElementById('calcPriceBtn');
    const priceBox = document.querySelector('.dynamic-total');
    const accordionSection = document.getElementById('accordionShipping');
    const qtyInput = document.querySelector('input[name="products_qty"]');

    if(!calcBtn || !priceBox || !qtyInput) return;

    // Always show calculate button
    calcBtn.style.display = '';
    priceBox.style.display = '';

    // Helper functions
    function parsePrice(text) {
        text = text.replace(/<[^>]*>/g,'').replace(/\(.*Save.*\)/gi,'').trim();
        let cleaned = text.replace(/[^\d,\.]/g,'');
        if(!cleaned) return NaN;
        const lastComma = cleaned.lastIndexOf(',');
        const lastDot = cleaned.lastIndexOf('.');
        if (lastComma > lastDot) cleaned = cleaned.replace(/\./g,'').replace(',', '.');
        else if (lastDot > lastComma) cleaned = cleaned.replace(/,/g,'');
        else if (cleaned.indexOf(',')!==-1) cleaned = cleaned.replace(',', '.');
        return Math.round(parseFloat(cleaned)*100)/100;
    }

    function formatEuro(value){
        return (Math.round(value*100)/100).toLocaleString('de-DE',{
            minimumFractionDigits:2, maximumFractionDigits:2
        }) + ' €';
    }

    const table = document.getElementById('graduated-table');
    let tiered = false;
    let maxPerPallet = 0;
    let basePrice = 0;

    // Check if tiered table exists
    if(table){
        const rows = Array.from(table.querySelectorAll('tbody tr')).filter(r => r.cells.length === 2);
        if(rows.length >= 2){
            tiered = true;

            // Max per pallet from second tier
            const secondTierText = rows[1].cells[0].textContent.trim();
            const palletMatch = secondTierText.match(/^(\d+)/);
            if(palletMatch) maxPerPallet = parseInt(palletMatch[1],10);

            // Add pallet note below table
            if(maxPerPallet>0){
                const note = document.createElement('div');
                note.className='pallet-note mb-2 mt-3 fw-bold';
                note.textContent = `Note: Max. No. of Products per Pallet: ${maxPerPallet}`;
                if(!table.nextSibling) table.parentNode.appendChild(note);
                else table.parentNode.insertBefore(note, table.nextSibling);
            }

            // Savings calculation for table
            basePrice = parsePrice(rows[0].cells[1].textContent);
            for(let i=1;i<rows.length;i++){
                const curPrice = parsePrice(rows[i].cells[1].textContent);
                if(!isNaN(curPrice) && curPrice < basePrice){
                    const percent = ((basePrice - curPrice)/basePrice*100).toFixed(2);
                    const euroDiff = (basePrice - curPrice).toFixed(2).replace('.',',');
                    rows[i].cells[1].innerHTML += ` <b>(Save ${percent}% or ${euroDiff} &euro;)</b>`;
                }
            }

            // Parse tiers
            const tierData = rows.map(r=>{
                const qtyText = r.cells[0].textContent.trim();
                const price = parsePrice(r.cells[1].textContent);
                let min=1,max=Infinity;
                const m = qtyText.match(/(\d+)\s*[–—-]\s*(\d+)/);
                if(m){min=parseInt(m[1],10); max=parseInt(m[2],10);}
                else{
                    const m2 = qtyText.match(/(?:≥|>=)\s*(\d+)/);
                    if(m2){min=parseInt(m2[1],10); max=Infinity;}
                    else{const m3 = qtyText.match(/(\d+)/); if(m3){min=parseInt(m3[1],10); max=min;}}
                }
                return {min,max,price};
            }).filter(t=>!isNaN(t.price)).sort((a,b)=>a.min-b.min);

            function findTierPrice(qty){
                let tier = tierData.find(t => qty >= t.min && qty <= t.max);
                if(!tier){
                    const less = tierData.filter(t => qty >= t.min);
                    tier = less.length ? less[less.length-1] : tierData[0];
                }
                return tier.price;
            }

            function updateTotalTiered(){
                const qty = parseInt(qtyInput.value,10);
                if(!qty || qty < 1){priceBox.textContent=''; return;}
                const unitPrice = findTierPrice(qty);
                const total = Math.round(unitPrice*qty*100)/100;

                // Pallet calculation
                let fullPallets = 0, remainder = 0;
                if(maxPerPallet>0){
                    fullPallets = Math.floor(qty/maxPerPallet);
                    remainder = qty % maxPerPallet;
                }

                let palletText='';
                if(maxPerPallet>0){
                    if(fullPallets>0 && remainder>0) palletText=`Shipping: ${fullPallets} full pallet/s (${maxPerPallet} units) + 1 partial pallet (${remainder} units)`;
                    else if(fullPallets>0 && remainder===0) palletText=`Shipping: ${fullPallets} full pallet/s (${maxPerPallet} units)`;
                    else if(fullPallets===0 && remainder>0) palletText=`Shipping: 1 partial pallet (${remainder} units)`;
                }

                // Savings vs tier1
                const tier1Price = tierData[0].price;
                const saved = Math.round((tier1Price*qty - total)*100)/100;
                const savedPercent = ((saved/(tier1Price*qty))*100).toFixed(2);
                const savingsText = `<br>Compared to Base-Price: <b>Save ${formatEuro(saved)} (${savedPercent}%)</b>`;

                priceBox.innerHTML = `<div class="product-price"><strong>Total for ${qty}</strong> units: ${formatEuro(total)} (Unit: ${formatEuro(unitPrice)})</div>`;
                if(palletText) priceBox.innerHTML += `<br>${palletText}`;
                priceBox.innerHTML += savingsText;
            }

            calcBtn.addEventListener('click', updateTotalTiered);
        }
    }

    // Non-tiered fallback
    if(!tiered){
        if(accordionSection) accordionSection.style.display = 'none';
        const basePriceElement = document.querySelector('.product-price.mb-3');
        basePrice = basePriceElement ? parsePrice(basePriceElement.textContent) : 0;

        function updateTotalNonTier(){
            const qty = parseInt(qtyInput.value,10);
            if(!qty || qty < 1){priceBox.textContent=''; return;}
            const total = Math.round(basePrice*qty*100)/100;
            priceBox.innerHTML = `<div class="product-price"><strong>Total for ${qty}</strong> units: ${formatEuro(total)} (Unit: ${formatEuro(basePrice)})</div>`;
        }

        calcBtn.addEventListener('click', updateTotalNonTier);
    }
});
</script>
{/literal}