<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\CoreExtension;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;
use Twig\TemplateWrapper;

/* catalog/view/theme/journal3/template/journal3/module/filter.twig */
class __TwigTemplate_786307377b270a0ebd3905c39a59ec1d extends Template
{
    private Source $source;
    /**
     * @var array<string, Template>
     */
    private array $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->parent = false;

        $this->blocks = [
        ];
    }

    protected function doDisplay(array $context, array $blocks = []): iterable
    {
        $macros = $this->macros;
        // line 1
        yield "<button type=\"button\" class=\"mobile-filter-trigger\" id=\"mobileFilterOpen\">
  Filter
</button>

<div class=\"desktop-filter-wrapper\" id=\"mobileFilterSheet\">
  <div id=\"filter\" class=\"";
        // line 6
        yield CoreExtension::getAttribute($this->env, $this->source, ($context["journal3"] ?? null), "classes", [($context["classes"] ?? null)], "method", false, false, false, 6);
        yield "\">
    <button aria-label=\"Edit\" class=\"admin-edit\" type=\"button\" data-edit=\"";
        // line 7
        yield ($context["edit"] ?? null);
        yield "\">
      <em class=\"fa fa-pencil\"
          data-placement=\"auto\"
          data-toggle=\"tooltip-hover\"
          data-tooltip-class=\"admin-edit-tooltip\"
          title=\"Edit ";
        // line 12
        yield ($context["name"] ?? null);
        yield "\"></em>
    </button>

    <h3 class=\"title module-title\">
      <span class=\"filter-title-text\">";
        // line 16
        yield ($context["title"] ?? null);
        yield "</span>
      <button aria-label=\"Reset\" class=\"reset-filter btn\">";
        // line 17
        yield ($context["resetText"] ?? null);
        yield "</button>
      <a class=\"x\" href=\"javascript:;\" title=\"Close\"></a>
    </h3>

    <div class=\"module-body\">
      <div class=\"mobile-filter-sheet-header\">
        <strong>Filter</strong>
        <button type=\"button\" class=\"mobile-filter-close\" id=\"mobileFilterClose\">
          <em class=\"fa fa-times\"></em>
        </button>
      </div>

      <div class=\"selected-filters-preview\" id=\"selectedFiltersPreview\" style=\"display:none;\">
        <div class=\"selected-filters-title\">Ausgewählte Filter</div>
        <div class=\"selected-filters-chips\" id=\"selectedFiltersChips\"></div>
      </div>

      <div class=\"custom-filter-list\">
        ";
        // line 35
        $context['_parent'] = $context;
        $context['_seq'] = CoreExtension::ensureTraversable(($context["items"] ?? null));
        $context['loop'] = [
          'parent' => $context['_parent'],
          'index0' => 0,
          'index'  => 1,
          'first'  => true,
        ];
        if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
            $length = count($context['_seq']);
            $context['loop']['revindex0'] = $length - 1;
            $context['loop']['revindex'] = $length;
            $context['loop']['length'] = $length;
            $context['loop']['last'] = 1 === $length;
        }
        foreach ($context['_seq'] as $context["_key"] => $context["item"]) {
            // line 36
            yield "          ";
            $context["item_input"] = ((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "input", [], "any", false, false, false, 36)) ? (CoreExtension::getAttribute($this->env, $this->source, $context["item"], "input", [], "any", false, false, false, 36)) : (($context["input"] ?? null)));
            // line 37
            yield "
          <div class=\"custom-filter-item ";
            // line 38
            yield CoreExtension::getAttribute($this->env, $this->source, ($context["journal3"] ?? null), "classes", [CoreExtension::getAttribute($this->env, $this->source, $context["item"], "classes", [], "any", false, false, false, 38)], "method", false, false, false, 38);
            yield "\" data-filter-key=\"";
            yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "key", [], "any", false, false, false, 38);
            yield "\">
           
           ";
            // line 40
            if ((((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "type", [], "any", false, false, false, 40) == "p") || (CoreExtension::getAttribute($this->env, $this->source, $context["item"], "type", [], "any", false, false, false, 40) == "price")) || (CoreExtension::getAttribute($this->env, $this->source, $context["item"], "type", [], "any", false, false, false, 40) == "range"))) {
                // line 41
                yield "  <div class=\"filter-dropdown filter-price-dropdown\" data-dropdown>
    <button type=\"button\"
            class=\"filter-dropdown-toggle\"
            data-dropdown-toggle
            aria-expanded=\"false\">
      <span class=\"filter-dropdown-summary\"
            data-dropdown-summary
            data-default=\"";
                // line 48
                yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "title", [], "any", false, false, false, 48);
                yield "\">
        ";
                // line 49
                yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "title", [], "any", false, false, false, 49);
                yield "
      </span>
      <em class=\"fa fa-angle-down\"></em>
    </button>

    <div class=\"filter-dropdown-menu\" data-dropdown-menu>
      <div class=\"filter-dropdown-scroll\">
        <div class=\"filter-price\" id=\"filter-";
                // line 56
                yield ($context["id"] ?? null);
                yield "-";
                yield CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 56);
                yield "\">
          <div class=\"range-slider\">
            <input type=\"text\"
                   class=\"js-range-slider\"
                   value=\"\"
                   aria-hidden=\"true\"
                   aria-label=\"min-max\"
                   title=\"min-max\"/>
          </div>

          <div class=\"extra-controls\">
            ";
                // line 67
                if (($context["currency_left"] ?? null)) {
                    // line 68
                    yield "              <span class=\"currency-symbol currency-left\">";
                    yield ($context["currency_left"] ?? null);
                    yield "</span>
            ";
                }
                // line 70
                yield "
            <input type=\"text\"
                   class=\"filter-price-min\"
                   name=\"min\"
                   data-min=\"";
                // line 74
                yield CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["item"], "price_range", [], "any", false, false, false, 74), "min", [], "any", false, false, false, 74);
                yield "\"
                   value=\"";
                // line 75
                yield CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["item"], "current_price_range", [], "any", false, false, false, 75), "min", [], "any", false, false, false, 75);
                yield "\"
                   aria-label=\"min\"
                   title=\"min\"/>

            ";
                // line 79
                if (($context["currency_right"] ?? null)) {
                    // line 80
                    yield "              <span class=\"currency-symbol currency-right\">";
                    yield ($context["currency_right"] ?? null);
                    yield "</span>
            ";
                }
                // line 82
                yield "
            ";
                // line 83
                if (($context["currency_left"] ?? null)) {
                    // line 84
                    yield "              <span class=\"currency-symbol currency-left\">";
                    yield ($context["currency_left"] ?? null);
                    yield "</span>
            ";
                }
                // line 86
                yield "
            <input type=\"text\"
                   class=\"filter-price-max\"
                   name=\"max\"
                   data-max=\"";
                // line 90
                yield CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["item"], "price_range", [], "any", false, false, false, 90), "max", [], "any", false, false, false, 90);
                yield "\"
                   value=\"";
                // line 91
                yield CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["item"], "current_price_range", [], "any", false, false, false, 91), "max", [], "any", false, false, false, 91);
                yield "\"
                   aria-label=\"max\"
                   title=\"max\"/>

            ";
                // line 95
                if (($context["currency_right"] ?? null)) {
                    // line 96
                    yield "              <span class=\"currency-symbol currency-right\">";
                    yield ($context["currency_right"] ?? null);
                    yield "</span>
            ";
                }
                // line 98
                yield "          </div>
        </div>
      </div>
    </div>
  </div>

            ";
            } elseif ((((CoreExtension::getAttribute($this->env, $this->source,             // line 104
$context["item"], "type", [], "any", false, false, false, 104) == "r") || (($context["item_input"] ?? null) == "checkbox")) || (($context["item_input"] ?? null) == "radio"))) {
                // line 105
                yield "              <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"";
                // line 112
                yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "title", [], "any", false, false, false, 112);
                yield "\">
                    ";
                // line 113
                yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "title", [], "any", false, false, false, 113);
                yield "
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    ";
                // line 120
                if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["item"], "items", [], "any", false, false, false, 120)) > 6)) {
                    // line 121
                    yield "                      <div class=\"filter-search-box\">
                        <input type=\"text\"
                               class=\"filter-search-input\"
                               placeholder=\"Suchen...\"
                               aria-label=\"Filter search\">
                      </div>
                    ";
                }
                // line 128
                yield "
                    ";
                // line 129
                if ((CoreExtension::getAttribute($this->env, $this->source, $context["item"], "type", [], "any", false, false, false, 129) == "r")) {
                    // line 130
                    yield "                      <div class=\"filter-rating\" id=\"filter-";
                    yield ($context["id"] ?? null);
                    yield "-";
                    yield CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 130);
                    yield "\">
                        ";
                    // line 131
                    $context['_parent'] = $context;
                    $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "items", [], "any", false, false, false, 131));
                    foreach ($context['_seq'] as $context["_key"] => $context["subitem"]) {
                        // line 132
                        yield "                          <label class=\"custom-option\">
                            <input type=\"";
                        // line 133
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "input", [], "any", false, false, false, 133);
                        yield "\"
                                   data-filter-trigger
                                   name=\"";
                        // line 135
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "key", [], "any", false, false, false, 135);
                        yield "\"
                                   value=\"";
                        // line 136
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "id", [], "any", false, false, false, 136);
                        yield "\"
                                   ";
                        // line 137
                        if (CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "checked", [], "any", false, false, false, 137)) {
                            yield "checked";
                        }
                        yield ">
                            <span class=\"links-text rating-stars\">
                              ";
                        // line 139
                        $context['_parent'] = $context;
                        $context['_seq'] = CoreExtension::ensureTraversable(range(1, 5));
                        foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
                            // line 140
                            yield "                                ";
                            if ((CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "id", [], "any", false, false, false, 140) < $context["i"])) {
                                // line 141
                                yield "                                  <span class=\"fa fa-stack\">
                                    <em class=\"fa fa-star-o fa-stack-2x\"></em>
                                  </span>
                                ";
                            } else {
                                // line 145
                                yield "                                  <span class=\"fa fa-stack\">
                                    <em class=\"fa fa-star fa-stack-2x\"></em>
                                    <em class=\"fa fa-star-o fa-stack-2x\"></em>
                                  </span>
                                ";
                            }
                            // line 150
                            yield "                              ";
                        }
                        $_parent = $context['_parent'];
                        unset($context['_seq'], $context['_key'], $context['i'], $context['_parent']);
                        $context = array_intersect_key($context, $_parent) + $_parent;
                        // line 151
                        yield "                            </span>
                            <span class=\"count-badge\">";
                        // line 152
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "total", [], "any", false, false, false, 152);
                        yield "</span>
                          </label>
                        ";
                    }
                    $_parent = $context['_parent'];
                    unset($context['_seq'], $context['_key'], $context['subitem'], $context['_parent']);
                    $context = array_intersect_key($context, $_parent) + $_parent;
                    // line 155
                    yield "                      </div>
                    ";
                } else {
                    // line 157
                    yield "                      <div class=\"filter-";
                    yield ($context["item_input"] ?? null);
                    yield "\">
                        ";
                    // line 158
                    $context['_parent'] = $context;
                    $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "items", [], "any", false, false, false, 158));
                    foreach ($context['_seq'] as $context["_key"] => $context["subitem"]) {
                        // line 159
                        yield "                          <label class=\"custom-option\">
                            <input type=\"";
                        // line 160
                        yield ($context["item_input"] ?? null);
                        yield "\"
                                   data-filter-trigger
                                   name=\"";
                        // line 162
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "key", [], "any", false, false, false, 162);
                        yield "\"
                                   value=\"";
                        // line 163
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "id", [], "any", false, false, false, 163);
                        yield "\"
                                   ";
                        // line 164
                        if (CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "checked", [], "any", false, false, false, 164)) {
                            yield "checked";
                        }
                        // line 165
                        yield "                                   title=\"";
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "value", [], "any", false, false, false, 165);
                        yield "\"
                                   aria-label=\"";
                        // line 166
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "value", [], "any", false, false, false, 166);
                        yield "\">

                            ";
                        // line 168
                        if (CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "image", [], "any", false, false, false, 168)) {
                            // line 169
                            yield "                              <img src=\"";
                            yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "image", [], "any", false, false, false, 169);
                            yield "\"
                                   ";
                            // line 170
                            if (CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "image2x", [], "any", false, false, false, 170)) {
                                yield "srcset=\"";
                                yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "image", [], "any", false, false, false, 170);
                                yield " 1x, ";
                                yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "image2x", [], "any", false, false, false, 170);
                                yield " 2x\"";
                            }
                            // line 171
                            yield "                                   width=\"";
                            yield ($context["image_width"] ?? null);
                            yield "\"
                                   height=\"";
                            // line 172
                            yield ($context["image_height"] ?? null);
                            yield "\"
                                   alt=\"";
                            // line 173
                            yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "value", [], "any", false, false, false, 173);
                            yield "\"
                                   title=\"";
                            // line 174
                            yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "value", [], "any", false, false, false, 174);
                            yield "\"
                                   class=\"img-responsive\"
                                   ";
                            // line 176
                            if ((CoreExtension::getAttribute($this->env, $this->source, ($context["journal3"] ?? null), "is_desktop", [], "any", false, false, false, 176) && CoreExtension::getAttribute($this->env, $this->source, $context["item"], "image_only", [], "any", false, false, false, 176))) {
                                // line 177
                                yield "                                     data-toggle=\"tooltip-hover\"
                                     data-tooltip-class=\"filter-tooltip-";
                                // line 178
                                yield ($context["module_id"] ?? null);
                                yield "\"
                                     data-placement=\"top\"
                                   ";
                            }
                            // line 180
                            yield "/>
                            ";
                        }
                        // line 182
                        yield "
                            <span class=\"links-text\">";
                        // line 183
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "value", [], "any", false, false, false, 183);
                        yield "</span>
                            <span class=\"count-badge\">";
                        // line 184
                        yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "total", [], "any", false, false, false, 184);
                        yield "</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                        ";
                    }
                    $_parent = $context['_parent'];
                    unset($context['_seq'], $context['_key'], $context['subitem'], $context['_parent']);
                    $context = array_intersect_key($context, $_parent) + $_parent;
                    // line 188
                    yield "                      </div>
                    ";
                }
                // line 190
                yield "                  </div>
                </div>
              </div>

            ";
            } elseif ((            // line 194
($context["item_input"] ?? null) == "select")) {
                // line 195
                yield "              <div class=\"custom-filter-title\">";
                yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "title", [], "any", false, false, false, 195);
                yield "</div>
              <div class=\"custom-filter-box\">
                <div class=\"select\">
                  <label>
                    <select name=\"";
                // line 199
                yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "key", [], "any", false, false, false, 199);
                yield "\" data-filter-trigger>
                      <option value=\"\">";
                // line 200
                yield CoreExtension::getAttribute($this->env, $this->source, $context["item"], "title", [], "any", false, false, false, 200);
                yield "</option>
                      ";
                // line 201
                $context['_parent'] = $context;
                $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["item"], "items", [], "any", false, false, false, 201));
                foreach ($context['_seq'] as $context["_key"] => $context["subitem"]) {
                    // line 202
                    yield "                        <option value=\"";
                    yield CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "id", [], "any", false, false, false, 202);
                    yield "\" ";
                    if (CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "checked", [], "any", false, false, false, 202)) {
                        yield "selected";
                    }
                    yield ">
                          ";
                    // line 203
                    yield ((CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "total", [], "any", false, false, false, 203)) ? ((((CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "value", [], "any", false, false, false, 203) . " (") . CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "total", [], "any", false, false, false, 203)) . ")")) : (CoreExtension::getAttribute($this->env, $this->source, $context["subitem"], "value", [], "any", false, false, false, 203)));
                    yield "
                        </option>
                      ";
                }
                $_parent = $context['_parent'];
                unset($context['_seq'], $context['_key'], $context['subitem'], $context['_parent']);
                $context = array_intersect_key($context, $_parent) + $_parent;
                // line 206
                yield "                    </select>
                  </label>
                </div>
              </div>
            ";
            }
            // line 211
            yield "          </div>
        ";
            ++$context['loop']['index0'];
            ++$context['loop']['index'];
            $context['loop']['first'] = false;
            if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
                --$context['loop']['revindex0'];
                --$context['loop']['revindex'];
                $context['loop']['last'] = 0 === $context['loop']['revindex0'];
            }
        }
        $_parent = $context['_parent'];
        unset($context['_seq'], $context['_key'], $context['item'], $context['_parent'], $context['loop']);
        $context = array_intersect_key($context, $_parent) + $_parent;
        // line 213
        yield "      </div>
    </div>
  </div>
</div>

<div class=\"mobile-filter-backdrop\" id=\"mobileFilterBackdrop\"></div>

<script>
(function () {
  let observerScheduled = false;
  let originalParent = null;
  let originalNextSibling = null;

  function isMobile() {
    return window.innerWidth <= 599;
  }

  function moveMobileFilterDependingViewport() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    if (!originalParent && sheet.parentNode) {
      originalParent = sheet.parentNode;
      originalNextSibling = sheet.nextSibling;
    }

    if (isMobile()) {
      if (sheet.parentNode !== document.body) document.body.appendChild(sheet);
      if (backdrop.parentNode !== document.body) document.body.appendChild(backdrop);
    } else {
      if (originalParent && sheet.parentNode !== originalParent) {
        if (originalNextSibling && originalNextSibling.parentNode === originalParent) {
          originalParent.insertBefore(sheet, originalNextSibling);
        } else {
          originalParent.appendChild(sheet);
        }
      }

      closeMobileSheet();
    }
  }

  function closeAllDropdowns(except = null) {
    document.querySelectorAll('.desktop-filter-wrapper [data-dropdown].open').forEach(function (dropdown) {
      if (dropdown !== except) {
        dropdown.classList.remove('open');

        const toggle = dropdown.querySelector('[data-dropdown-toggle]');
        if (toggle) toggle.setAttribute('aria-expanded', 'false');
      }
    });
  }

  function getInputLabelText(input) {
    const label = input.closest('label');
    if (!label) return input.value || '';

    const textEl = label.querySelector('.links-text');

    if (textEl) {
      return textEl.textContent.trim().replace(/\\s+/g, ' ');
    }

    return input.value || '';
  }

  function updateSummary(dropdown) {
    const summary = dropdown.querySelector('[data-dropdown-summary]');
    if (!summary) return;

    const defaultText = summary.getAttribute('data-default') || '';

    const checkedInputs = dropdown.querySelectorAll(
      'input[type=\"checkbox\"]:checked, input[type=\"radio\"]:checked'
    );

    const selected = Array.from(checkedInputs)
      .map(getInputLabelText)
      .filter(Boolean);

    if (selected.length === 0) {
      summary.textContent = defaultText;
    } else if (selected.length <= 2) {
      summary.textContent = defaultText + ': ' + selected.join(', ');
    } else {
      summary.textContent = defaultText + ': ' + selected.length + ' ausgewählt';
    }
  }

  /* ==========================
     SELECTED FILTER PREVIEW
  ========================== */

  function renderSelectedFiltersPreview() {
    const preview = document.getElementById('selectedFiltersPreview');
    const chipsWrapper = document.getElementById('selectedFiltersChips');

    if (!preview || !chipsWrapper) return;

    chipsWrapper.innerHTML = '';

    const checkedInputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"]:checked, .desktop-filter-wrapper input[type=\"radio\"]:checked'
    );

    checkedInputs.forEach(function (input) {
      const text = getInputLabelText(input);
      if (!text) return;

      const chip = document.createElement('span');
      chip.className = 'selected-filter-chip';

      chip.dataset.name = input.name;
      chip.dataset.value = input.value;


      chip.innerHTML =
        '<span>' + text + '</span>' +
        '<em class=\"fa fa-times\"></em>';

      chipsWrapper.appendChild(chip);
    });

    preview.style.display = checkedInputs.length ? '' : 'none';
  }

  /* ==========================
     JOURNAL3 REMOVE FILTER
  ========================== */

  function removeJournalFilter(input) {
    if (!input) return;

    const \$input = window.jQuery ? jQuery(input) : null;

    /* checkbox / radio kaldır */
    input.checked = false;
    input.removeAttribute('checked');

    /* native events */
    input.dispatchEvent(new Event('input', { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));

    /* jQuery events */
    if (\$input) {
      \$input.prop('checked', false);
      \$input.trigger('change');
      \$input.trigger('input');
      \$input.trigger('click');
    }

    /* Journal3 ajax refresh */
    if (window.Journal) {
      if (Journal.filter && typeof Journal.filter.update === 'function') {
        Journal.filter.update();
      }

      if (Journal.filter && typeof Journal.filter.reload === 'function') {
        Journal.filter.reload();
      }
    }

    /* fallback */
    setTimeout(function () {
      renderSelectedFiltersPreview();

      const dropdown = input.closest('[data-dropdown]');
      if (dropdown) updateSummary(dropdown);
    }, 400);
  }


  /* ==========================
     FILTER DROPDOWN
  ========================== */

  function initFilterDropdowns(scope) {
    const root = scope || document;

    const dropdowns = root.querySelectorAll('.desktop-filter-wrapper [data-dropdown]');

    dropdowns.forEach(function (dropdown) {
      const toggle = dropdown.querySelector('[data-dropdown-toggle]');
      const menu = dropdown.querySelector('[data-dropdown-menu]');
      const inputs = dropdown.querySelectorAll(
        'input[type=\"checkbox\"], input[type=\"radio\"]'
      );

      const searchInput = dropdown.querySelector('.filter-search-input');
      const options = dropdown.querySelectorAll('.custom-option');

      if (!toggle || !menu) return;

      updateSummary(dropdown);

      if (dropdown.dataset.dropdownInitialized === 'true') return;
      dropdown.dataset.dropdownInitialized = 'true';

      toggle.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        const isOpen = dropdown.classList.contains('open');

        closeAllDropdowns();

        if (!isOpen) {
          dropdown.classList.add('open');
          toggle.setAttribute('aria-expanded', 'true');
        } else {
          dropdown.classList.remove('open');
          toggle.setAttribute('aria-expanded', 'false');
        }
      });

      menu.addEventListener('click', function (e) {
        e.stopPropagation();
      });

      inputs.forEach(function (input) {
        input.addEventListener('change', function () {
          updateSummary(dropdown);
          renderSelectedFiltersPreview();

          if (input.type === 'radio') {
            dropdown.classList.remove('open');
            toggle.setAttribute('aria-expanded', 'false');
          }
        });
      });

      if (searchInput && searchInput.dataset.searchInitialized !== 'true') {
        searchInput.dataset.searchInitialized = 'true';

        searchInput.addEventListener('input', function () {
          const keyword = searchInput.value.trim().toLowerCase();

          options.forEach(function (option) {
            const text = option.textContent.trim().toLowerCase();

            option.style.display =
              !keyword || text.includes(keyword) ? '' : 'none';
          });
        });

        searchInput.addEventListener('click', function (e) {
          e.stopPropagation();
        });
      }
    });
  }

  /* ==========================
     MOBILE
  ========================== */

  function openMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop || !isMobile()) return;

    sheet.classList.add('mobile-sheet-open');
    backdrop.classList.add('active');
    document.body.classList.add('mobile-filter-lock');
  }

  function closeMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    sheet.classList.remove('mobile-sheet-open');
    backdrop.classList.remove('active');
    document.body.classList.remove('mobile-filter-lock');
  }

  function initMobileFilterSheet() {
    const openBtn = document.getElementById('mobileFilterOpen');
    const closeBtn = document.getElementById('mobileFilterClose');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (openBtn && openBtn.dataset.mobileFilterInitialized !== 'true') {
      openBtn.dataset.mobileFilterInitialized = 'true';
      openBtn.addEventListener('click', openMobileSheet);
    }

    if (closeBtn && closeBtn.dataset.mobileFilterInitialized !== 'true') {
      closeBtn.dataset.mobileFilterInitialized = 'true';
      closeBtn.addEventListener('click', closeMobileSheet);
    }

    if (backdrop && backdrop.dataset.mobileFilterInitialized !== 'true') {
      backdrop.dataset.mobileFilterInitialized = 'true';
      backdrop.addEventListener('click', closeMobileSheet);
    }
  }

  function initResetButtons(scope) {
    const root = scope || document;

    const resetButtons = root.querySelectorAll(
      '.desktop-filter-wrapper .reset-filter'
    );

    resetButtons.forEach(function (btn) {
      if (btn.dataset.resetInitialized === 'true') return;

      btn.dataset.resetInitialized = 'true';

      btn.addEventListener('click', function () {
        setTimeout(function () {
          document
            .querySelectorAll('.desktop-filter-wrapper [data-dropdown]')
            .forEach(updateSummary);

          renderSelectedFiltersPreview();
        }, 300);
      });
    });
  }

  function bindGlobalEvents() {
    if (document.body.dataset.dropdownGlobalEventsBound === 'true') return;

    document.body.dataset.dropdownGlobalEventsBound = 'true';

    document.addEventListener('click', function () {
      closeAllDropdowns();
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        closeAllDropdowns();
        closeMobileSheet();
      }
    });

    window.addEventListener('resize', function () {
      moveMobileFilterDependingViewport();
    });
  }

  function initAll(scope) {
    moveMobileFilterDependingViewport();
    initFilterDropdowns(scope || document);
    initMobileFilterSheet();
    initResetButtons(scope || document);
     bindSelectedFilterRemove();
    renderSelectedFiltersPreview();
    bindGlobalEvents();
  }

  document.addEventListener('DOMContentLoaded', function () {
    initAll(document);
  });

  const observer = new MutationObserver(function () {
    if (observerScheduled) return;

    observerScheduled = true;

    requestAnimationFrame(function () {
      initAll(document);
      observerScheduled = false;
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });



})();
function bindSelectedFilterRemove() {
  if (document.body.dataset.selectedFilterRemoveBound === 'true') return;
  document.body.dataset.selectedFilterRemoveBound = 'true';

  document.addEventListener('pointerdown', function (e) {
    const chip = e.target.closest('.selected-filter-chip');
    if (!chip) return;

    e.preventDefault();
    e.stopPropagation();

    const name = chip.getAttribute('data-name');
    const value = chip.getAttribute('data-value');

    const inputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"], .desktop-filter-wrapper input[type=\"radio\"]'
    );

    let input = null;

    inputs.forEach(function (el) {
      if (el.name === name && el.value === value) {
        input = el;
      }
    });

    if (!input) {
      console.log('Input bulunamadı:', name, value);
      return;
    }

    input.checked = false;
    input.removeAttribute('checked');

    if (window.jQuery) {
      jQuery(input).prop('checked', false).trigger('change');
    } else {
      input.dispatchEvent(new Event('change', { bubbles: true }));
    }

    const dropdown = input.closest('[data-dropdown]');
    if (dropdown) {
      updateSummary(dropdown);
    }

    chip.remove();

    setTimeout(function () {
      renderSelectedFiltersPreview();
    }, 300);
  }, true);
}
</script>";
        yield from [];
    }

    /**
     * @codeCoverageIgnore
     */
    public function getTemplateName(): string
    {
        return "catalog/view/theme/journal3/template/journal3/module/filter.twig";
    }

    /**
     * @codeCoverageIgnore
     */
    public function isTraitable(): bool
    {
        return false;
    }

    /**
     * @codeCoverageIgnore
     */
    public function getDebugInfo(): array
    {
        return array (  534 => 213,  519 => 211,  512 => 206,  503 => 203,  494 => 202,  490 => 201,  486 => 200,  482 => 199,  474 => 195,  472 => 194,  466 => 190,  462 => 188,  452 => 184,  448 => 183,  445 => 182,  441 => 180,  435 => 178,  432 => 177,  430 => 176,  425 => 174,  421 => 173,  417 => 172,  412 => 171,  404 => 170,  399 => 169,  397 => 168,  392 => 166,  387 => 165,  383 => 164,  379 => 163,  375 => 162,  370 => 160,  367 => 159,  363 => 158,  358 => 157,  354 => 155,  345 => 152,  342 => 151,  336 => 150,  329 => 145,  323 => 141,  320 => 140,  316 => 139,  309 => 137,  305 => 136,  301 => 135,  296 => 133,  293 => 132,  289 => 131,  282 => 130,  280 => 129,  277 => 128,  268 => 121,  266 => 120,  256 => 113,  252 => 112,  243 => 105,  241 => 104,  233 => 98,  227 => 96,  225 => 95,  218 => 91,  214 => 90,  208 => 86,  202 => 84,  200 => 83,  197 => 82,  191 => 80,  189 => 79,  182 => 75,  178 => 74,  172 => 70,  166 => 68,  164 => 67,  148 => 56,  138 => 49,  134 => 48,  125 => 41,  123 => 40,  116 => 38,  113 => 37,  110 => 36,  93 => 35,  72 => 17,  68 => 16,  61 => 12,  53 => 7,  49 => 6,  42 => 1,);
    }

    public function getSourceContext(): Source
    {
        return new Source("<button type=\"button\" class=\"mobile-filter-trigger\" id=\"mobileFilterOpen\">
  Filter
</button>

<div class=\"desktop-filter-wrapper\" id=\"mobileFilterSheet\">
  <div id=\"filter\" class=\"{{ journal3.classes(classes) }}\">
    <button aria-label=\"Edit\" class=\"admin-edit\" type=\"button\" data-edit=\"{{ edit }}\">
      <em class=\"fa fa-pencil\"
          data-placement=\"auto\"
          data-toggle=\"tooltip-hover\"
          data-tooltip-class=\"admin-edit-tooltip\"
          title=\"Edit {{ name }}\"></em>
    </button>

    <h3 class=\"title module-title\">
      <span class=\"filter-title-text\">{{ title }}</span>
      <button aria-label=\"Reset\" class=\"reset-filter btn\">{{ resetText }}</button>
      <a class=\"x\" href=\"javascript:;\" title=\"Close\"></a>
    </h3>

    <div class=\"module-body\">
      <div class=\"mobile-filter-sheet-header\">
        <strong>Filter</strong>
        <button type=\"button\" class=\"mobile-filter-close\" id=\"mobileFilterClose\">
          <em class=\"fa fa-times\"></em>
        </button>
      </div>

      <div class=\"selected-filters-preview\" id=\"selectedFiltersPreview\" style=\"display:none;\">
        <div class=\"selected-filters-title\">Ausgewählte Filter</div>
        <div class=\"selected-filters-chips\" id=\"selectedFiltersChips\"></div>
      </div>

      <div class=\"custom-filter-list\">
        {% for item in items %}
          {% set item_input = item.input ? item.input : input %}

          <div class=\"custom-filter-item {{ journal3.classes(item.classes) }}\" data-filter-key=\"{{ item.key }}\">
           
           {% if item.type == 'p' or item.type == 'price' or item.type == 'range' %}
  <div class=\"filter-dropdown filter-price-dropdown\" data-dropdown>
    <button type=\"button\"
            class=\"filter-dropdown-toggle\"
            data-dropdown-toggle
            aria-expanded=\"false\">
      <span class=\"filter-dropdown-summary\"
            data-dropdown-summary
            data-default=\"{{ item.title }}\">
        {{ item.title }}
      </span>
      <em class=\"fa fa-angle-down\"></em>
    </button>

    <div class=\"filter-dropdown-menu\" data-dropdown-menu>
      <div class=\"filter-dropdown-scroll\">
        <div class=\"filter-price\" id=\"filter-{{ id }}-{{ loop.index }}\">
          <div class=\"range-slider\">
            <input type=\"text\"
                   class=\"js-range-slider\"
                   value=\"\"
                   aria-hidden=\"true\"
                   aria-label=\"min-max\"
                   title=\"min-max\"/>
          </div>

          <div class=\"extra-controls\">
            {% if currency_left %}
              <span class=\"currency-symbol currency-left\">{{ currency_left }}</span>
            {% endif %}

            <input type=\"text\"
                   class=\"filter-price-min\"
                   name=\"min\"
                   data-min=\"{{ item.price_range.min }}\"
                   value=\"{{ item.current_price_range.min }}\"
                   aria-label=\"min\"
                   title=\"min\"/>

            {% if currency_right %}
              <span class=\"currency-symbol currency-right\">{{ currency_right }}</span>
            {% endif %}

            {% if currency_left %}
              <span class=\"currency-symbol currency-left\">{{ currency_left }}</span>
            {% endif %}

            <input type=\"text\"
                   class=\"filter-price-max\"
                   name=\"max\"
                   data-max=\"{{ item.price_range.max }}\"
                   value=\"{{ item.current_price_range.max }}\"
                   aria-label=\"max\"
                   title=\"max\"/>

            {% if currency_right %}
              <span class=\"currency-symbol currency-right\">{{ currency_right }}</span>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

            {% elseif item.type == 'r' or item_input == 'checkbox' or item_input == 'radio' %}
              <div class=\"filter-dropdown\" data-dropdown>
                <button type=\"button\"
                        class=\"filter-dropdown-toggle\"
                        data-dropdown-toggle
                        aria-expanded=\"false\">
                  <span class=\"filter-dropdown-summary\"
                        data-dropdown-summary
                        data-default=\"{{ item.title }}\">
                    {{ item.title }}
                  </span>
                  <em class=\"fa fa-angle-down\"></em>
                </button>

                <div class=\"filter-dropdown-menu\" data-dropdown-menu>
                  <div class=\"filter-dropdown-scroll\">
                    {% if item.items|length > 6 %}
                      <div class=\"filter-search-box\">
                        <input type=\"text\"
                               class=\"filter-search-input\"
                               placeholder=\"Suchen...\"
                               aria-label=\"Filter search\">
                      </div>
                    {% endif %}

                    {% if item.type == 'r' %}
                      <div class=\"filter-rating\" id=\"filter-{{ id }}-{{ loop.index }}\">
                        {% for subitem in item.items %}
                          <label class=\"custom-option\">
                            <input type=\"{{ item.input }}\"
                                   data-filter-trigger
                                   name=\"{{ item.key }}\"
                                   value=\"{{ subitem.id }}\"
                                   {% if subitem.checked %}checked{% endif %}>
                            <span class=\"links-text rating-stars\">
                              {% for i in 1..5 %}
                                {% if subitem.id < i %}
                                  <span class=\"fa fa-stack\">
                                    <em class=\"fa fa-star-o fa-stack-2x\"></em>
                                  </span>
                                {% else %}
                                  <span class=\"fa fa-stack\">
                                    <em class=\"fa fa-star fa-stack-2x\"></em>
                                    <em class=\"fa fa-star-o fa-stack-2x\"></em>
                                  </span>
                                {% endif %}
                              {% endfor %}
                            </span>
                            <span class=\"count-badge\">{{ subitem.total }}</span>
                          </label>
                        {% endfor %}
                      </div>
                    {% else %}
                      <div class=\"filter-{{ item_input }}\">
                        {% for subitem in item.items %}
                          <label class=\"custom-option\">
                            <input type=\"{{ item_input }}\"
                                   data-filter-trigger
                                   name=\"{{ item.key }}\"
                                   value=\"{{ subitem.id }}\"
                                   {% if subitem.checked %}checked{% endif %}
                                   title=\"{{ subitem.value }}\"
                                   aria-label=\"{{ subitem.value }}\">

                            {% if subitem.image %}
                              <img src=\"{{ subitem.image }}\"
                                   {% if subitem.image2x %}srcset=\"{{ subitem.image }} 1x, {{ subitem.image2x }} 2x\"{% endif %}
                                   width=\"{{ image_width }}\"
                                   height=\"{{ image_height }}\"
                                   alt=\"{{ subitem.value }}\"
                                   title=\"{{ subitem.value }}\"
                                   class=\"img-responsive\"
                                   {% if journal3.is_desktop and item.image_only %}
                                     data-toggle=\"tooltip-hover\"
                                     data-tooltip-class=\"filter-tooltip-{{ module_id }}\"
                                     data-placement=\"top\"
                                   {% endif %}/>
                            {% endif %}

                            <span class=\"links-text\">{{ subitem.value }}</span>
                            <span class=\"count-badge\">{{ subitem.total }}</span>
                            <span class=\"filter-item-bg\"></span>
                          </label>
                        {% endfor %}
                      </div>
                    {% endif %}
                  </div>
                </div>
              </div>

            {% elseif item_input == 'select' %}
              <div class=\"custom-filter-title\">{{ item.title }}</div>
              <div class=\"custom-filter-box\">
                <div class=\"select\">
                  <label>
                    <select name=\"{{ item.key }}\" data-filter-trigger>
                      <option value=\"\">{{ item.title }}</option>
                      {% for subitem in item.items %}
                        <option value=\"{{ subitem.id }}\" {% if subitem.checked %}selected{% endif %}>
                          {{ subitem.total ? subitem.value ~ ' (' ~ subitem.total ~ ')' : subitem.value }}
                        </option>
                      {% endfor %}
                    </select>
                  </label>
                </div>
              </div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<div class=\"mobile-filter-backdrop\" id=\"mobileFilterBackdrop\"></div>

<script>
(function () {
  let observerScheduled = false;
  let originalParent = null;
  let originalNextSibling = null;

  function isMobile() {
    return window.innerWidth <= 599;
  }

  function moveMobileFilterDependingViewport() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    if (!originalParent && sheet.parentNode) {
      originalParent = sheet.parentNode;
      originalNextSibling = sheet.nextSibling;
    }

    if (isMobile()) {
      if (sheet.parentNode !== document.body) document.body.appendChild(sheet);
      if (backdrop.parentNode !== document.body) document.body.appendChild(backdrop);
    } else {
      if (originalParent && sheet.parentNode !== originalParent) {
        if (originalNextSibling && originalNextSibling.parentNode === originalParent) {
          originalParent.insertBefore(sheet, originalNextSibling);
        } else {
          originalParent.appendChild(sheet);
        }
      }

      closeMobileSheet();
    }
  }

  function closeAllDropdowns(except = null) {
    document.querySelectorAll('.desktop-filter-wrapper [data-dropdown].open').forEach(function (dropdown) {
      if (dropdown !== except) {
        dropdown.classList.remove('open');

        const toggle = dropdown.querySelector('[data-dropdown-toggle]');
        if (toggle) toggle.setAttribute('aria-expanded', 'false');
      }
    });
  }

  function getInputLabelText(input) {
    const label = input.closest('label');
    if (!label) return input.value || '';

    const textEl = label.querySelector('.links-text');

    if (textEl) {
      return textEl.textContent.trim().replace(/\\s+/g, ' ');
    }

    return input.value || '';
  }

  function updateSummary(dropdown) {
    const summary = dropdown.querySelector('[data-dropdown-summary]');
    if (!summary) return;

    const defaultText = summary.getAttribute('data-default') || '';

    const checkedInputs = dropdown.querySelectorAll(
      'input[type=\"checkbox\"]:checked, input[type=\"radio\"]:checked'
    );

    const selected = Array.from(checkedInputs)
      .map(getInputLabelText)
      .filter(Boolean);

    if (selected.length === 0) {
      summary.textContent = defaultText;
    } else if (selected.length <= 2) {
      summary.textContent = defaultText + ': ' + selected.join(', ');
    } else {
      summary.textContent = defaultText + ': ' + selected.length + ' ausgewählt';
    }
  }

  /* ==========================
     SELECTED FILTER PREVIEW
  ========================== */

  function renderSelectedFiltersPreview() {
    const preview = document.getElementById('selectedFiltersPreview');
    const chipsWrapper = document.getElementById('selectedFiltersChips');

    if (!preview || !chipsWrapper) return;

    chipsWrapper.innerHTML = '';

    const checkedInputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"]:checked, .desktop-filter-wrapper input[type=\"radio\"]:checked'
    );

    checkedInputs.forEach(function (input) {
      const text = getInputLabelText(input);
      if (!text) return;

      const chip = document.createElement('span');
      chip.className = 'selected-filter-chip';

      chip.dataset.name = input.name;
      chip.dataset.value = input.value;


      chip.innerHTML =
        '<span>' + text + '</span>' +
        '<em class=\"fa fa-times\"></em>';

      chipsWrapper.appendChild(chip);
    });

    preview.style.display = checkedInputs.length ? '' : 'none';
  }

  /* ==========================
     JOURNAL3 REMOVE FILTER
  ========================== */

  function removeJournalFilter(input) {
    if (!input) return;

    const \$input = window.jQuery ? jQuery(input) : null;

    /* checkbox / radio kaldır */
    input.checked = false;
    input.removeAttribute('checked');

    /* native events */
    input.dispatchEvent(new Event('input', { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));

    /* jQuery events */
    if (\$input) {
      \$input.prop('checked', false);
      \$input.trigger('change');
      \$input.trigger('input');
      \$input.trigger('click');
    }

    /* Journal3 ajax refresh */
    if (window.Journal) {
      if (Journal.filter && typeof Journal.filter.update === 'function') {
        Journal.filter.update();
      }

      if (Journal.filter && typeof Journal.filter.reload === 'function') {
        Journal.filter.reload();
      }
    }

    /* fallback */
    setTimeout(function () {
      renderSelectedFiltersPreview();

      const dropdown = input.closest('[data-dropdown]');
      if (dropdown) updateSummary(dropdown);
    }, 400);
  }


  /* ==========================
     FILTER DROPDOWN
  ========================== */

  function initFilterDropdowns(scope) {
    const root = scope || document;

    const dropdowns = root.querySelectorAll('.desktop-filter-wrapper [data-dropdown]');

    dropdowns.forEach(function (dropdown) {
      const toggle = dropdown.querySelector('[data-dropdown-toggle]');
      const menu = dropdown.querySelector('[data-dropdown-menu]');
      const inputs = dropdown.querySelectorAll(
        'input[type=\"checkbox\"], input[type=\"radio\"]'
      );

      const searchInput = dropdown.querySelector('.filter-search-input');
      const options = dropdown.querySelectorAll('.custom-option');

      if (!toggle || !menu) return;

      updateSummary(dropdown);

      if (dropdown.dataset.dropdownInitialized === 'true') return;
      dropdown.dataset.dropdownInitialized = 'true';

      toggle.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        const isOpen = dropdown.classList.contains('open');

        closeAllDropdowns();

        if (!isOpen) {
          dropdown.classList.add('open');
          toggle.setAttribute('aria-expanded', 'true');
        } else {
          dropdown.classList.remove('open');
          toggle.setAttribute('aria-expanded', 'false');
        }
      });

      menu.addEventListener('click', function (e) {
        e.stopPropagation();
      });

      inputs.forEach(function (input) {
        input.addEventListener('change', function () {
          updateSummary(dropdown);
          renderSelectedFiltersPreview();

          if (input.type === 'radio') {
            dropdown.classList.remove('open');
            toggle.setAttribute('aria-expanded', 'false');
          }
        });
      });

      if (searchInput && searchInput.dataset.searchInitialized !== 'true') {
        searchInput.dataset.searchInitialized = 'true';

        searchInput.addEventListener('input', function () {
          const keyword = searchInput.value.trim().toLowerCase();

          options.forEach(function (option) {
            const text = option.textContent.trim().toLowerCase();

            option.style.display =
              !keyword || text.includes(keyword) ? '' : 'none';
          });
        });

        searchInput.addEventListener('click', function (e) {
          e.stopPropagation();
        });
      }
    });
  }

  /* ==========================
     MOBILE
  ========================== */

  function openMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop || !isMobile()) return;

    sheet.classList.add('mobile-sheet-open');
    backdrop.classList.add('active');
    document.body.classList.add('mobile-filter-lock');
  }

  function closeMobileSheet() {
    const sheet = document.getElementById('mobileFilterSheet');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (!sheet || !backdrop) return;

    sheet.classList.remove('mobile-sheet-open');
    backdrop.classList.remove('active');
    document.body.classList.remove('mobile-filter-lock');
  }

  function initMobileFilterSheet() {
    const openBtn = document.getElementById('mobileFilterOpen');
    const closeBtn = document.getElementById('mobileFilterClose');
    const backdrop = document.getElementById('mobileFilterBackdrop');

    if (openBtn && openBtn.dataset.mobileFilterInitialized !== 'true') {
      openBtn.dataset.mobileFilterInitialized = 'true';
      openBtn.addEventListener('click', openMobileSheet);
    }

    if (closeBtn && closeBtn.dataset.mobileFilterInitialized !== 'true') {
      closeBtn.dataset.mobileFilterInitialized = 'true';
      closeBtn.addEventListener('click', closeMobileSheet);
    }

    if (backdrop && backdrop.dataset.mobileFilterInitialized !== 'true') {
      backdrop.dataset.mobileFilterInitialized = 'true';
      backdrop.addEventListener('click', closeMobileSheet);
    }
  }

  function initResetButtons(scope) {
    const root = scope || document;

    const resetButtons = root.querySelectorAll(
      '.desktop-filter-wrapper .reset-filter'
    );

    resetButtons.forEach(function (btn) {
      if (btn.dataset.resetInitialized === 'true') return;

      btn.dataset.resetInitialized = 'true';

      btn.addEventListener('click', function () {
        setTimeout(function () {
          document
            .querySelectorAll('.desktop-filter-wrapper [data-dropdown]')
            .forEach(updateSummary);

          renderSelectedFiltersPreview();
        }, 300);
      });
    });
  }

  function bindGlobalEvents() {
    if (document.body.dataset.dropdownGlobalEventsBound === 'true') return;

    document.body.dataset.dropdownGlobalEventsBound = 'true';

    document.addEventListener('click', function () {
      closeAllDropdowns();
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        closeAllDropdowns();
        closeMobileSheet();
      }
    });

    window.addEventListener('resize', function () {
      moveMobileFilterDependingViewport();
    });
  }

  function initAll(scope) {
    moveMobileFilterDependingViewport();
    initFilterDropdowns(scope || document);
    initMobileFilterSheet();
    initResetButtons(scope || document);
     bindSelectedFilterRemove();
    renderSelectedFiltersPreview();
    bindGlobalEvents();
  }

  document.addEventListener('DOMContentLoaded', function () {
    initAll(document);
  });

  const observer = new MutationObserver(function () {
    if (observerScheduled) return;

    observerScheduled = true;

    requestAnimationFrame(function () {
      initAll(document);
      observerScheduled = false;
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });



})();
function bindSelectedFilterRemove() {
  if (document.body.dataset.selectedFilterRemoveBound === 'true') return;
  document.body.dataset.selectedFilterRemoveBound = 'true';

  document.addEventListener('pointerdown', function (e) {
    const chip = e.target.closest('.selected-filter-chip');
    if (!chip) return;

    e.preventDefault();
    e.stopPropagation();

    const name = chip.getAttribute('data-name');
    const value = chip.getAttribute('data-value');

    const inputs = document.querySelectorAll(
      '.desktop-filter-wrapper input[type=\"checkbox\"], .desktop-filter-wrapper input[type=\"radio\"]'
    );

    let input = null;

    inputs.forEach(function (el) {
      if (el.name === name && el.value === value) {
        input = el;
      }
    });

    if (!input) {
      console.log('Input bulunamadı:', name, value);
      return;
    }

    input.checked = false;
    input.removeAttribute('checked');

    if (window.jQuery) {
      jQuery(input).prop('checked', false).trigger('change');
    } else {
      input.dispatchEvent(new Event('change', { bubbles: true }));
    }

    const dropdown = input.closest('[data-dropdown]');
    if (dropdown) {
      updateSummary(dropdown);
    }

    chip.remove();

    setTimeout(function () {
      renderSelectedFiltersPreview();
    }, 300);
  }, true);
}
</script>", "catalog/view/theme/journal3/template/journal3/module/filter.twig", "/home/isatuzun/public_html/opencart.my-multiplanet.ch/catalog/view/theme/journal3/template/journal3/module/filter.twig");
    }
}
