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

<style>
.disabled-link {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
    border-color: #6c757d !important;
    color: #6c757d !important;
}

/* ---------- STATIC CART BOX ---------- */

.static-cart-box {
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 1rem;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    font-size: 0.9rem;
}

.static-cart-box table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.static-cart-box tbody tr {
    border-bottom: 1px solid #e9ecef;
}

.static-cart-box tbody tr:last-child {
    border-bottom: none;
}

.static-cart-box td {
    padding: 0.25rem 0.5rem;
}

.static-cart-box td:first-child {
    width: 65%;
}

.static-cart-box td:last-child {
    text-align: right;
    width: 35%;
}

.cart-footer {
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-footer .cart-total strong {
    font-weight: 600;
}

.cart-footer .btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}
</style>

<div class="uberuns pb-5 pt-5">
<div class="container bg-light border border-secondary border-2 p-3 shadow mb-5">

{if $smarty.server.REQUEST_URI|strstr:"advanced_search_result.php"}

    {if $smarty.session.language=='german'}
        <h1 class="ico ico-3">Suchergebnisse</h1>
    {else}
        <h1 class="ico ico-3">Search Results</h1>
    {/if}

    <div class="table-responsive">
    <table class="table bg-white rounded-2 rounded">
    {foreach from=$module_content item=product}
        <tr>
            <td style="width:15%">
                <a href="{$product.PRODUCTS_LINK}" target="_blank">
                    {if $product.PRODUCTS_IMAGE}
                        <img src="{$product.PRODUCTS_IMAGE|replace:"thumbnail":"info"}"
                             class="card-img-top w-100"
                             alt="{$product.PRODUCTS_NAME}">
                    {else}
                        <img src="/files/logo/Bild-fehlt_500px.jpg"
                             class="card-img-top w-100"
                             alt="kein Bild vorhanden" />
                    {/if}
                </a>
            </td>

            <td>
                <h5>{$product.PRODUCTS_NAME|truncate:80:"...":true}</h5>
                {$product.PRODUCTS_PRICE|replace:'EUR':'&euro;'}*
            </td>

            <td style="width:20%">
                {* STOCK CHECK AND ADD TO CART *}
                {if $product.VERFUEGBARER_BESTAND1 == 0}
                    {if $product.PRODUCTS_DATE_AVAILABLE != "0000-00-00 00:00:00"}
                        <button type="button" class="btn btn-warning text-light fw-bold w-100" disabled>
                            {if $smarty.session.language=='german'}Ab Lager zurück am {$product.PRODUCTS_DATE_AVAILABLE|date_format:"%d.%m.%Y"}{else}Back in Stock {$product.PRODUCTS_DATE_AVAILABLE|date_format:"%d.%m.%Y"}{/if}
                        </button>
                    {else}
                        <button type="button" class="btn btn-secondary text-light fw-bold w-100" disabled>
                            {if $smarty.session.language=='german'}Derzeit nicht verfügbar{else}Currently Unavailable{/if}
                        </button>
                    {/if}
                {else}
                    <form method="post"
                          action="{if $smarty.server.REQUEST_URI|strstr:"?"}{$smarty.server.REQUEST_URI}&action=add_product{else}{$smarty.server.REQUEST_URI}?action=add_product{/if}"
                          class="d-inline-flex align-items-center gap-2 mb-2">
                        <input type="hidden" name="products_id" value="{$product.PRODUCTS_ID}">
                        <input type="number" name="products_qty" min="1" value="1"
                               class="form-control form-control-sm" style="width:80px;">
                        {if $smarty.session.language == 'german'}
                            <button type="submit" class="btn btn-success fw-bold">Zum Warenkorb hinzufügen</button>
                        {else}
                            <button type="submit" class="btn btn-success fw-bold">Add to cart</button>
                        {/if}
                    </form>
                {/if}
                
                <!-- Learn more opens modal -->
                <button type="button" class="btn btn-primary text-light fw-bold w-100"
                        data-bs-toggle="modal"
                        data-bs-target="#modal-{$product.PRODUCTS_ID}">
                    {if $smarty.session.language=='german'}mehr erfahren{else}learn more{/if}
                </button>
            </td>
        </tr>
    {/foreach}
    </table>
    </div>

{else}

    {if $CATEGORIES_IMAGE}
        <img src="{$CATEGORIES_IMAGE}"
             style="height: 40vh; object-fit: cover; width: 100%;" />
    {/if}

	{if $category_matches}
		{assign var="second_category" value=$category_matches.0.CATEGORY_PATH_ARRAY.1}
		<h1 class="ico ico-5" style="margin-bottom: 0px !important;">{if $smarty.session.language == 'german'}{$second_category}{else}DEYE Low Voltage Hybrid (LP Series){/if}</h1>
		{if $smarty.session.language == 'german'}
			<h1 class="ico ico-5">KONFIGURATOR / {$CATEGORIES_HEADING_TITLE}</h1>
		{else}
			<h1 class="ico ico-5">CONFIGURATOR / {$CATEGORIES_HEADING_TITLE}</h1>
		{/if}
	{/if}


    
{* CATEGORY NAVIGATION BAR *}
{assign var="current_cat" value=$smarty.get.cPath}

{assign var="cat_inverter" value="59"}
{assign var="cat_battery" value="60"}
{assign var="cat_accessories" value="61"}
{assign var="cat_deyesmart" value="62"}
{assign var="cat_cart" value="cart"}

<div class="container my-4">
    <div class="d-flex flex-wrap gap-2 justify-content-center">

        <a href="index.php?cPath={$cat_inverter}"
           class="btn flex-fill text-center py-3
                  {if $current_cat == $cat_inverter}btn-primary{else}btn-outline-primary{/if} fw-bold">
            <i class="fa-solid fa-bolt"></i>
            {if $smarty.session.language == 'german'}1. Wechselrichter{else}1st Inverter{/if}
        </a>

        <a href="index.php?cPath={$cat_battery}"
           class="btn flex-fill text-center py-3
                  {if $current_cat == $cat_battery}btn-primary{else}btn-outline-primary{/if} fw-bold">
            <i class="fa-solid fa-battery-full"></i>
            {if $smarty.session.language == 'german'}2. Batterie{else}2nd Battery{/if}
        </a>

        <a href="index.php?cPath={$cat_accessories}"
		   class="disabled-link btn flex-fill text-center py-3
				  {if $current_cat == $cat_accessories}btn-primary{else}btn-outline-primary{/if} fw-bold">
			<i class="fa-solid fa-screwdriver-wrench"></i>
			{if $smarty.session.language == 'german'}3. Zubehör{else}3rd Accessories{/if}
		</a>

        <a href="index.php?cPath={$cat_deyesmart}"
           class="btn flex-fill text-center py-3
                  {if $current_cat == $cat_deyesmart}btn-primary{else}btn-outline-primary{/if} fw-bold">
            <i class="fa-solid fa-microchip"></i>
            {if $smarty.session.language == 'german'}4. Deye Smart{else}4th Deye Smart{/if}
        </a>
        
        <a href="shopping_cart.php"
           class="btn flex-fill text-center py-3
                  {if $current_cat == $cat_cart}btn-primary{else}btn-outline-primary{/if} fw-bold">
            <i class="fa-solid fa-cart-shopping"></i>
            {if $smarty.session.language == 'german'}Warenkorb{else}Shopping Cart{/if}
        </a>

    </div>
	
	    {if $CATEGORIES_DESCRIPTION}
        <div class="cat-details">
            {$CATEGORIES_DESCRIPTION}
        </div>
    {/if}
	
</div>










{if $smarty.session.language=='german'}
        <h1 class="ico ico-3" style="margin-bottom: 0px !important;">Warenkorb Konfigurator</h1>
    {else}
        <h1 class="ico ico-3" style="margin-bottom: 0px !important;">Configurator Shopping cart</h1>
    {/if}
{config_load file="$language/lang_$language.conf" section="boxes"}


<div class="static-cart-box">
	<table class="cart-table table-sm mb-0">
	    <thead>
            <tr>
                <th>{if $smarty.session.language=='german'}Produkt{else}Product{/if}</th>
                <th class="text-end">{if $smarty.session.language=='german'}Menge{else}Quantity{/if}</th>
            </tr>
        </thead>
	</table>
    <table class="cart-table table-sm mb-0">
        <tbody>
            <!-- Products will be inserted by JS -->
        </tbody>
    </table>

    <div class="cart-footer">
        <div class="cart-total">
            <strong>
                {if $smarty.session.language=='german'}Gesamt:{else}Total:{/if}
            </strong>
            <span class="cart-total-amount text-muted">0,00 €</span>
        </div>
        <a href="shopping_cart.php" class="btn btn-dark btn-sm">
            {if $smarty.session.language=='german'}Zum Warenkorb →{else}Go to Cart →{/if}
        </a>
    </div>
</div>

<script>
$(function(){
    $('#static-cart-box table tr').click(function(){
        window.location.href = $(this).data('link');
    });
});
</script>



    <!-- FILTER BAR -->
    <div class="bg-light text-end border-bottom border-primary mb-4 filter-container"
         style="padding-top: 16px; padding-bottom: 16px;">
        {$FILTER_FORM}{$FILTER_DROPDOWN}{$FORM_END}
    </div>

    <style>
    .filter-container { border-radius: 0; }
    .filter-container select,
    .filter-container input[type="submit"] {
      border-radius: 0;
      padding: 0.5rem 0.75rem;
    }
    .filter-container select:focus,
    .filter-container input[type="submit"]:focus {
      box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
      border-radius: 0;
    }
    .btn.flex-fill {
      min-width: 200px;
      text-align: center;
    }
    </style>

    {$NAVIGATION}
    <hr>
    {products_groups_filter categories_id=$CATEGORIES_ID}
    <hr>

    <!-- ★ LIST-STYLE PRODUCT VIEW WITH STOCK CHECK ★ -->
    <div class="products-list">

        {foreach from=$module_content item=product}

        <div class="product-list-item border rounded p-3 mb-3 bg-white shadow-sm">

            <div class="row align-items-center">

                <!-- PRODUCT IMAGE -->
                <div class="col-md-2 col-12 mb-2 text-center">
                    <a href="{$product.PRODUCTS_LINK}" target="_blank">
                        {if $product.PRODUCTS_IMAGE}
                            <img src="{$product.PRODUCTS_IMAGE|replace:"thumbnail":"info"}"
                                 class="img-fluid"
                                 alt="{$product.PRODUCTS_NAME}">
                        {else}
                            <img src="/files/logo/Bild-fehlt_500px.jpg"
                                 class="img-fluid"
                                 alt="kein Bild vorhanden">
                        {/if}
                    </a>
                </div>

                <!-- NAME + SHORT DESCRIPTION -->
                <div class="col-md-6 col-12">
                    <h4 class="fw-bold mb-2">
                        <a href="{$product.PRODUCTS_LINK}" target="_blank"
                           class="text-decoration-none text-dark">
                            {$product.PRODUCTS_NAME}
                        </a>
                    </h4>

                    {if $product.PRODUCTS_SHORT_DESCRIPTION}
                        <div class="text-muted small mb-2">
                            {$product.PRODUCTS_SHORT_DESCRIPTION|strip_tags|truncate:200:"...":true}
                        </div>
                    {/if}
                </div>

                <!-- PRICE + QUANTITY + ADD TO CART + MODAL BUTTON -->
                <div class="col-md-4 col-12 text-end">
                    <div class="product-price fs-5 fw-bold mb-2">
                        {$product.PRODUCTS_PRICE|replace:'EUR':'&euro;'}*
                    </div>

                    {* STOCK CHECK *}
                    {if $product.VERFUEGBARER_BESTAND1 == 0}
                        {if $product.PRODUCTS_DATE_AVAILABLE != "0000-00-00 00:00:00"}
                            <button type="button" class="btn btn-warning w-100 fw-bold mb-2" disabled>
                                {if $smarty.session.language=='german'}Verfügbar ab {$product.PRODUCTS_DATE_AVAILABLE|date_format:"%d.%m.%Y"}{else}Back in Stock {$product.PRODUCTS_DATE_AVAILABLE|date_format:"%d.%m.%Y"}{/if}
                            </button>
                        {else}
                            <button type="button" class="btn btn-secondary w-100 fw-bold mb-2" disabled>
                                {if $smarty.session.language=='german'}Derzeit nicht verfügbar{else}Currently Unavailable{/if}
                            </button>
                        {/if}
                    {else}
                        <form method="post"
                              action="{if $smarty.server.REQUEST_URI|strstr:"?"}{$smarty.server.REQUEST_URI}&action=add_product{else}{$smarty.server.REQUEST_URI}?action=add_product{/if}"
                              class="d-inline-flex align-items-center gap-2 mb-2">
                            <input type="hidden" name="products_id" value="{$product.PRODUCTS_ID}">
                            <input type="number" name="products_qty" min="1" value="1"
                                   class="form-control form-control-sm"<>
                            {if $smarty.session.language == 'german'}
                                <button type="submit" class="btn btn-success fw-bold">Zum Warenkorb hinzufügen</button>
                            {else}
                                <button type="submit" class="btn btn-success fw-bold">Add to shopping-cart</button>
                            {/if}
                        </form>
                    {/if}

                    <!-- LEARN MORE MODAL -->
                    <button type="button" class="btn btn-primary w-100 fw-bold"
                            data-bs-toggle="modal"
                            data-bs-target="#modal-{$product.PRODUCTS_ID}">
                        {if $smarty.session.language=='german'}mehr erfahren{else}learn more{/if}
                    </button>

                </div>

            </div>

        </div>
        {/foreach}

    </div>

    {* PRODUCT MODALS *}
    {foreach from=$module_content item=product}
    <div class="modal fade" id="modal-{$product.PRODUCTS_ID}" tabindex="-1" aria-labelledby="modalLabel-{$product.PRODUCTS_ID}" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalLabel-{$product.PRODUCTS_ID}">{$product.PRODUCTS_NAME}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">

            <div class="row">

              <!-- DETAILS -->
              <div class="col-md-12">
                 <div class="mt-2">
                  <a href="{$product.PRODUCTS_LINK}" target="_blank" class="btn btn-outline-primary fw-bold" style="width: 100%">
                    {if $smarty.session.language=='german'}Zur vollständigen Produktseite{else}View full product page{/if}
                  </a>
                </div>

                {if $product.PRODUCTS_EXTRA_TEXT}
                  <div class="mb-2">
                    {$product.PRODUCTS_EXTRA_TEXT nofilter}
                  </div>
                {/if}

              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    {/foreach}

    <hr>
    {$NAVIGATION}
    <hr>

{/if}

</div>
</div>

{literal}
<script>
$(function() {
    // Read products and total from hover-cart
    const hoverRows = $('#cart-table table tbody').html();
    const totalText = $('.func-cart .func-desc').text().trim();

    const staticCart = $('.static-cart-box');

    // If empty
    if (!hoverRows || hoverRows.trim() === '' || $('.func-cart .func-amount').text().trim() === "0") {
        staticCart.html(`
            <div class="cart-empty text-center p-3">
                <i class="fa-solid fa-cart-shopping fa-2x mb-2"></i>
                <p>Ihr Warenkorb ist leer</p>
            </div>
        `);
        return;
    }

    // Parse hover rows, remove image column, keep only name + qty
    const $rows = $('<div>').html(hoverRows).find('tr').map(function() {
        const name = $(this).find('td:nth-child(2)').html(); // 2nd column = product name
        const qty  = $(this).find('td:nth-child(3)').html(); // 3rd column = quantity
        return `<tr><td>${name}</td><td>${qty}</td></tr>`;
    }).get().join('');

    // Inject rows
    staticCart.find('tbody').html($rows);

    // Inject total
    staticCart.find('.cart-total-amount').text(totalText);

    // Click row → go to product
    staticCart.find('tbody tr').click(function() {
        const link = $(this).data('link');
        if (link) window.location.href = link;
    });
});
</script>
{/literal}

{debug}