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

<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;">{$second_category}</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}

    {if $CATEGORIES_DESCRIPTION}
        <div class="cat-details">
            {$CATEGORIES_DESCRIPTION}
        </div>
    {/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="{if $cat_accessories != 'XXX'}index.php?cPath={$cat_accessories}{/if}"
           class="btn flex-fill text-center py-3
                  {if $current_cat == $cat_accessories}btn-primary{else}btn-outline-primary{/if} fw-bold
                  {if $cat_accessories == 'XXX'}disabled{/if}"
           {if $cat_accessories == 'XXX'}title="Kategorie noch nicht verfügbar"{/if}>
            <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>
</div>


    <!-- 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 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 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 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>