@extends('layouts.subscriptions')

@push('style')
<style>
  .market-search-card {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(20, 20, 20, 0.07);
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .market-search-shell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    border: 1px solid #f0ece7;
    border-radius: 18px;
    background: #fff;
    padding: 0 18px 0 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  .market-search-icon {
    color: #8e8e8e;
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
  }

  .market-search-input {
    border: 0;
    min-height: 60px;
    box-shadow: none !important;
    padding: 0;
    font-size: 18px;
    color: #414141;
    background: transparent;
  }

  .market-search-input::placeholder {
    color: #b4b4b4;
  }

  .market-search-input:focus {
    border: 0;
    outline: none;
  }

  .market-search-country {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-left: 18px;
    margin-left: auto;
    border-left: 1px solid #ece8e2;
    color: #2d2d2d;
    flex-shrink: 0;
    cursor: pointer;
  }

  .market-search-country:hover,
  .market-search-country:focus {
    color: var(--user-accent, #c98e4a);
  }

  .market-search-flag {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  .market-search-country i {
    font-size: 16px;
  }

  .market-search-hint {
    font-size: 13px;
    color: #8a8a8a;
    margin-top: 10px;
  }

  .country-modal .modal-content {
    border: 0;
    border-radius: 28px;
    overflow: hidden;
  }

  .country-modal .modal-body {
    padding: 2.4rem 2.5rem 2.6rem;
  }

  .country-modal-title {
    font-size: 1.95rem;
    font-weight: 800;
    color: #151515;
    text-align: center;
    margin-bottom: 2rem;
  }

  .country-section-title {
    display: inline-block;
    font-size: 1rem;
    font-weight: 800;
    color: #161616;
    margin-bottom: 1.1rem;
    padding-bottom: 0.3rem;
    border-bottom: 4px solid var(--user-accent, #ff9208);
  }

  .country-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: #faf7f2;
    padding: 14px 18px;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }

  .country-card:hover {
    background: rgba(var(--user-accent-rgb, 255, 146, 8), 0.12);
    box-shadow: 0 10px 22px rgba(var(--user-accent-rgb, 255, 146, 8), 0.12);
    transform: translateY(-1px);
  }

  .country-card.is-active {
    background: rgba(var(--user-accent-rgb, 255, 146, 8), 0.12);
    box-shadow: 0 10px 22px rgba(var(--user-accent-rgb, 255, 146, 8), 0.14);
  }

  .country-flag {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
  }

  .market-category-strip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 0 8px;
    scrollbar-width: none;
  }

  .market-category-strip::-webkit-scrollbar {
    display: none;
  }

  .market-category-chip {
    border: 1px solid #ece7dc;
    background: #f6f2eb;
    color: #6d6053;
    border-radius: 12px;
    padding: 10px 16px 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
  }

  .market-category-chip:hover {
    border-color: rgba(var(--user-accent-rgb, 201, 142, 74), 0.35);
    background: rgba(var(--user-accent-rgb, 201, 142, 74), 0.08);
    color: var(--user-accent, #c98e4a);
    transform: translateY(-1px);
  }

  .market-category-chip.is-active {
    background: rgba(var(--user-accent-rgb, 255, 146, 8), 0.12);
    border-color: rgba(var(--user-accent-rgb, 255, 146, 8), 0.35);
    color: #33291e;
    box-shadow: 0 8px 18px rgba(var(--user-accent-rgb, 255, 146, 8), 0.14);
  }

  .market-category-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--market-category-accent-bg, rgba(var(--user-accent-rgb, 255, 146, 8), 0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--market-category-accent, var(--user-accent, #ff9208));
    flex-shrink: 0;
  }

  .market-category-chip.is-active .market-category-icon {
    background: var(--market-category-accent-bg, rgba(var(--user-accent-rgb, 255, 146, 8), 0.12));
    color: var(--market-category-accent, var(--user-accent, #ff9208));
  }

  .market-category-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
  }

  .market-category-icon i {
    font-size: 14px;
    line-height: 1;
  }

  @media (max-width: 767.98px) {
    .market-search-shell {
      min-height: 58px;
      padding: 0 14px 0 16px;
      gap: 10px;
    }

    .market-search-input {
      font-size: 16px;
      min-height: 54px;
    }

    .market-search-country {
      padding-left: 12px;
      gap: 8px;
    }

    .market-search-flag {
      width: 24px;
      height: 17px;
    }

    .country-modal .modal-body {
      padding: 1.4rem 1rem 1.6rem;
    }

    .country-modal-title {
      font-size: 1.45rem;
      margin-bottom: 1.4rem;
    }

    .market-category-strip {
      padding-bottom: 6px;
    }

    .market-category-chip {
      padding: 9px 14px 9px 12px;
      font-size: 14px;
    }

    .market-category-icon {
      width: 22px;
      height: 22px;
    }
  }

  .market-card {
    position: relative;
    display: block;
    border-radius: 0;
    padding: 0;
    color: #111;
    text-decoration: none;
    height: 100%;
    background: transparent;
    transition: transform 0.18s ease;
  }

  .market-card:hover {
    transform: translateY(-2px);
    color: #111;
  }

  .market-card-shell {
    position: relative;
    height: 100%;
    padding-top: 14px;
  }

  .market-card-surface {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 156px;
    border-radius: 22px;
    background: var(--market-card-bg, #f1efee);
    padding: 22px 24px 20px;
    overflow: hidden;
  }

  .incentive-badge {
    display: none;
  }

  .market-card-top,
  .market-card-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .market-card-top {
    align-items: center;
    min-height: 50px;
    justify-content: flex-end;
  }

  .market-card-bottom {
    align-items: flex-end;
    margin-top: auto;
  }

  .market-card-copy {
    min-width: 0;
    flex: 1;
  }

  .market-card-title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
    color: #161616;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .service-logo {
    width: 82px;
    height: 82px;
    border-radius: 30px;
    background: var(--market-logo-bg, #0d0d10);
    color: var(--market-logo-color, #fff);
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 22px;
    z-index: 3;
    flex-shrink: 0;
  }

  .service-logo-inner {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .service-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
    padding: 12px;
    z-index: 2;
  }

  .service-logo-fallback {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 100%;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-align: center;
    padding: 10px 8px;
  }

  .service-logo-fallback span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-stack {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    min-height: 34px;
    padding-left: 0;
  }

  .profile-stack.is-empty {
    visibility: hidden;
  }

  .profile-dot,
  .profile-more {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid #fff;
    margin-left: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    position: relative;
  }

  .profile-dot:first-child,
  .profile-more:first-child {
    margin-left: 0;
  }

  .profile-dot:nth-child(1) { background: #1161c2; }
  .profile-dot:nth-child(2) { background: #1f8f4b; }
  .profile-dot:nth-child(3) { background: #ec6d2b; }
  .profile-dot:nth-child(4) { background: #303f9f; }

  .profile-dot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
  }

  .profile-initial {
    position: relative;
    z-index: 1;
  }

  .profile-more {
    background: var(--user-accent, #ff9800);
    font-size: 12px;
    font-weight: 800;
    z-index: 3;
  }

  .minimum-text {
    color: #9a948b;
    font-size: 0.95rem;
    margin-top: 8px;
    margin-bottom: 0;
  }

  .minimum-price {
    color: var(--user-accent, #ff8b00);
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    line-height: 0.9;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .minimum-price-value {
    font-size: clamp(2.05rem, 2.5vw, 2.65rem);
  }

  .minimum-price-symbol {
    font-size: clamp(1.15rem, 1.2vw, 1.45rem);
    transform: translateY(-2px);
  }

  .category-head {
    margin-top: 18px;
    margin-bottom: 14px;
  }

  .category-title {
    font-size: 25px;
    font-weight: 700;
    margin: 0;
  }

  .category-view-all {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
  }

  .category-view-all:hover {
    color: var(--user-accent, #ff8b00);
  }

  @media (max-width: 767.98px) {
    .market-card {
      padding: 0;
    }

    .market-card-shell {
      padding-top: 12px;
    }

    .market-card-surface {
      min-height: 148px;
      border-radius: 20px;
      padding: 20px 16px 16px;
      gap: 14px;
    }

    .market-card-top,
    .market-card-bottom {
      gap: 12px;
    }

    .market-card-top {
      min-height: 44px;
    }

    .service-logo {
      width: 70px;
      height: 70px;
      left: 16px;
      border-radius: 26px;
      font-size: 12px;
    }

    .profile-dot,
    .profile-more {
      width: 30px;
      height: 30px;
      margin-left: -8px;
    }

    .market-card-title {
      font-size: 1rem;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .minimum-text {
      font-size: 0.84rem;
      margin-top: 6px;
    }

    .minimum-price-value {
      font-size: 1.9rem;
    }

    .minimum-price-symbol {
      font-size: 1rem;
      transform: translateY(-1px);
    }
  }

  .market-results {
    transition: opacity 0.2s ease;
  }

  .market-results-frame {
    max-width: 1080px;
    margin: 0 auto;
  }

  .market-results-grid {
    justify-content: center;
  }

  .market-results.is-loading {
    opacity: 0.6;
    pointer-events: none;
  }

</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card market-search-card mb-4">
    <div class="card-body">
      <form id="subscription-search-form" method="GET" action="{{ route('subscriptions.index') }}" class="row g-3 align-items-center">
        <div class="col-12">
          <div class="market-search-shell">
            <span class="market-search-icon">
              <i class="fa-solid fa-magnifying-glass"></i>
            </span>
            <input
              id="subscription-search-input"
              type="text"
              class="form-control market-search-input"
              name="q"
              value="{{ $search }}"
              placeholder="Search..."
            >
            <div class="market-search-country" id="subscription-country-trigger" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#countrySelectModal" aria-label="Choose country">
              <span class="market-search-flag {{ $selectedCountryMeta['flag_class'] ?? 'fi fi-gb' }}" id="subscription-country-flag"></span>
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <input
            type="hidden"
            id="subscription-category-id"
            name="category_id"
            value="{{ $selectedCategoryId > 0 ? $selectedCategoryId : '' }}"
          >
          <input
            type="hidden"
            id="subscription-country"
            name="country"
            value="{{ $selectedCountry }}"
          >
        </div>
      </form>
      <div class="market-search-hint">Start typing to filter services instantly.</div>

      @php
        $featuredCategoryDefinitions = [
          [
            'label' => 'SVOD',
            'candidates' => ['SVOD', 'Streaming'],
            'icon' => 'fa-solid fa-tv',
            'icon_color' => '#f1b22d',
            'icon_bg' => '#fff0c8',
          ],
          [
            'label' => 'Music',
            'candidates' => ['Music'],
            'icon' => 'fa-solid fa-music',
            'icon_color' => '#76a7ff',
            'icon_bg' => '#edf4ff',
          ],
          [
            'label' => 'Security',
            'candidates' => ['Security'],
            'icon' => 'fa-solid fa-lock',
            'icon_color' => '#d87e2d',
            'icon_bg' => '#fff0df',
          ],
          [
            'label' => 'Software',
            'candidates' => ['Software', 'Productivity'],
            'icon' => 'fa-solid fa-laptop-code',
            'icon_color' => '#6e9dcf',
            'icon_bg' => '#eef5ff',
          ],
          [
            'label' => 'Reading',
            'candidates' => ['Reading'],
            'icon' => 'fa-solid fa-book-open',
            'icon_color' => '#8b78d4',
            'icon_bg' => '#f1edff',
          ],
          [
            'label' => 'Cloud',
            'candidates' => ['Cloud'],
            'icon' => 'fa-solid fa-cloud',
            'icon_color' => '#b9b7b4',
            'icon_bg' => '#f1efec',
          ],
          [
            'label' => 'Health',
            'candidates' => ['Health'],
            'icon' => 'fa-solid fa-user-doctor',
            'icon_color' => '#f1a42d',
            'icon_bg' => '#fff1d9',
          ],
          [
            'label' => 'Video games',
            'candidates' => ['Video games'],
            'icon' => 'fa-solid fa-gamepad',
            'icon_color' => '#2c2c2c',
            'icon_bg' => '#ededed',
          ],
          [
            'label' => 'e-Learning',
            'candidates' => ['e-Learning', 'Education', 'E-learning'],
            'icon' => 'fa-solid fa-graduation-cap',
            'icon_color' => '#4f4f4f',
            'icon_bg' => '#ece9e2',
          ],
        ];

        $featuredCategories = collect($featuredCategoryDefinitions)
          ->map(function ($definition) use ($categories) {
            $category = $categories->first(function ($category) use ($definition) {
              return collect($definition['candidates'])->contains(function ($candidate) use ($category) {
                return strcasecmp((string) $category->name, (string) $candidate) === 0;
              });
            });

            return [
              'id' => (int) ($category->id ?? 0),
              'name' => (string) ($category->name ?? $definition['label']),
              'label' => (string) $definition['label'],
              'icon' => (string) $definition['icon'],
              'icon_color' => (string) $definition['icon_color'],
              'icon_bg' => (string) $definition['icon_bg'],
              'query' => (string) collect($definition['candidates'])->first(),
              'is_virtual' => ! $category,
            ];
          })
          ->values();
      @endphp

      @if($featuredCategories->isNotEmpty())
        <div class="market-category-strip mt-4" id="subscription-category-strip">
          @foreach($featuredCategories as $category)
            @php
              $isActiveCategory = $category['id'] > 0 && $selectedCategoryId === $category['id'];
              $isActiveVirtual = $category['id'] <= 0
                && $selectedCategoryId <= 0
                && strcasecmp(trim($search ?? ''), trim($category['query'])) === 0;
            @endphp
            <button
              type="button"
              class="market-category-chip {{ $isActiveCategory || $isActiveVirtual ? 'is-active' : '' }}"
              data-category-id="{{ $category['id'] > 0 ? $category['id'] : '' }}"
              data-category-name="{{ $category['label'] }}"
              data-category-query="{{ $category['query'] }}"
              style="--market-category-accent: {{ $category['icon_color'] }}; --market-category-accent-bg: {{ $category['icon_bg'] }};"
            >
              <span class="market-category-icon">
                <i class="{{ $category['icon'] }}"></i>
              </span>
              <span>{{ $category['label'] }}</span>
            </button>
          @endforeach
        </div>
      @endif
    </div>
  </div>

  <div id="subscription-search-results" class="market-results">
    @include('subscriptions.partials.results', ['servicesByCategory' => $servicesByCategory])
  </div>
</div>

<div class="modal fade country-modal" id="countrySelectModal" tabindex="-1" aria-labelledby="countrySelectModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <div class="d-flex justify-content-end mb-2">
          <button type="button" class="btn btn-icon btn-text-secondary rounded-pill" data-bs-dismiss="modal" aria-label="Close">
            <i class="fa-solid fa-xmark fs-2"></i>
          </button>
        </div>

        <h2 class="country-modal-title" id="countrySelectModalLabel">Choose your country</h2>

        @foreach($countrySections as $sectionTitle => $countries)
          <div class="{{ $loop->first ? 'mb-5' : 'mt-5' }}">
            <div class="country-section-title">{{ $sectionTitle }}</div>
            <div class="row g-3">
              @foreach($countries as $countryOption)
                <div class="col-lg-4 col-md-6">
                  <button
                    type="button"
                    class="country-card {{ $selectedCountry === $countryOption['name'] ? 'is-active' : '' }} js-country-option"
                    data-flag-class="{{ $countryOption['flag_class'] }}"
                    data-country="{{ $countryOption['name'] }}"
                  >
                    <span class="country-flag {{ $countryOption['flag_class'] }}"></span>
                    <span>{{ $countryOption['name'] }}</span>
                  </button>
                </div>
              @endforeach
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
</div>
@endsection

@push('script')
<script>
$(document).ready(function () {
  const $form = $('#subscription-search-form');
  const $input = $('#subscription-search-input');
  const $categoryInput = $('#subscription-category-id');
  const $countryInput = $('#subscription-country');
  const $results = $('#subscription-search-results');
  const $categoryStrip = $('#subscription-category-strip');
  const $categoryButtons = $categoryStrip.find('.market-category-chip');
  const $countryFlag = $('#subscription-country-flag');
  const $countryOptions = $('.js-country-option');
  const countryModalElement = document.getElementById('countrySelectModal');
  const countryModal = countryModalElement ? bootstrap.Modal.getOrCreateInstance(countryModalElement) : null;

  let debounceTimer = null;
  let activeRequest = null;
  let lastQuery = ($input.val() || '').trim();

  function syncCategoryState() {
    const selectedCategoryId = ($categoryInput.val() || '').trim();
    const currentQuery = ($input.val() || '').trim().toLowerCase();

    $categoryButtons.removeClass('is-active');

    let $activeButton = $();

    if (selectedCategoryId !== '') {
      $activeButton = $categoryButtons.filter(function () {
        return ($(this).data('category-id') || '').toString() === selectedCategoryId;
      }).first();
    } else if (currentQuery !== '') {
      $activeButton = $categoryButtons.filter(function () {
        const buttonCategoryId = ($(this).data('category-id') || '').toString().trim();
        const buttonQuery = ($(this).data('category-query') || '').toString().trim().toLowerCase();

        return buttonCategoryId === '' && buttonQuery !== '' && buttonQuery === currentQuery;
      }).first();
    }

    if ($activeButton.length) {
      $activeButton.addClass('is-active');
    }
  }

  function updateBrowserUrl(query) {
    const baseUrl = '{{ route('subscriptions.index') }}';
    const params = new URLSearchParams();
    const categoryId = ($categoryInput.val() || '').trim();

    if (query) {
      params.set('q', query);
    }
    if (categoryId) {
      params.set('category_id', categoryId);
    }
    if (($countryInput.val() || '').trim()) {
      params.set('country', ($countryInput.val() || '').trim());
    }

    const nextUrl = params.toString() ? (baseUrl + '?' + params.toString()) : baseUrl;
    window.history.replaceState({}, '', nextUrl);
  }

  function scrollResultsIntoView() {
    const resultsElement = $results.get(0);
    if (!resultsElement) {
      return;
    }

    const headerOffset = 140;
    const nextTop = resultsElement.getBoundingClientRect().top + window.scrollY - headerOffset;

    window.scrollTo({
      top: Math.max(nextTop, 0),
      behavior: 'smooth'
    });
  }

  function fetchResults(query, options = {}) {
    if (activeRequest) {
      activeRequest.abort();
    }

    $results.addClass('is-loading');

    activeRequest = $.ajax({
      url: $form.attr('action'),
      method: 'GET',
      dataType: 'json',
      data: {
        q: query,
        category_id: ($categoryInput.val() || '').trim(),
        country: ($countryInput.val() || '').trim()
      },
      success: function (response) {
        if (response && response.html !== undefined) {
          $results.html(response.html);
          updateBrowserUrl(query);

          if (options.scrollToResults) {
            scrollResultsIntoView();
          }
        }
      },
      error: function (xhr, status) {
        if (status !== 'abort') {
          $results.removeClass('is-loading');
        }
      },
      complete: function () {
        $results.removeClass('is-loading');
        activeRequest = null;
      }
    });
  }

  function queueLiveSearch() {
    const query = ($input.val() || '').trim();
    if (query === lastQuery) {
      return;
    }

    lastQuery = query;
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(function () {
      fetchResults(query);
    }, 300);
  }

  $input.on('input search change paste', queueLiveSearch);

  $form.on('submit', function (event) {
    event.preventDefault();
    clearTimeout(debounceTimer);

    lastQuery = ($input.val() || '').trim();
    fetchResults(lastQuery);
  });

  $categoryButtons.on('click', function () {
    const categoryId = ($(this).data('category-id') || '').toString();
    const categoryQuery = ($(this).data('category-query') || '').toString().trim();
    const currentCategoryId = ($categoryInput.val() || '').trim();
    const currentQuery = ($input.val() || '').trim();
    const hasCategoryId = categoryId !== '';
    const nextCategoryId = currentCategoryId === categoryId ? '' : categoryId;
    const currentQueryMatchesVirtualChip = $categoryButtons.filter(function () {
      const buttonCategoryId = ($(this).data('category-id') || '').toString().trim();
      const buttonQuery = ($(this).data('category-query') || '').toString().trim().toLowerCase();

      return buttonCategoryId === '' && buttonQuery !== '' && buttonQuery === currentQuery.toLowerCase();
    }).length > 0;
    const isSameVirtualCategory = !hasCategoryId
      && currentCategoryId === ''
      && currentQuery.toLowerCase() === categoryQuery.toLowerCase();
    const nextQuery = hasCategoryId
      ? (currentQueryMatchesVirtualChip ? '' : currentQuery)
      : (isSameVirtualCategory ? '' : categoryQuery);

    $categoryInput.val(hasCategoryId ? nextCategoryId : '');

    if (!hasCategoryId) {
      $input.val(nextQuery);
    }

    syncCategoryState();
    lastQuery = ($input.val() || '').trim();
    clearTimeout(debounceTimer);
    fetchResults(lastQuery, { scrollToResults: true });
  });

  $countryOptions.on('click', function () {
    const $option = $(this);
    const nextFlagClass = ($option.data('flag-class') || 'fi fi-gb').toString();
    const nextCountry = ($option.data('country') || '').toString();

    $countryOptions.removeClass('is-active');
    $countryOptions.filter(function () {
      return ($(this).data('country') || '').toString() === nextCountry;
    }).addClass('is-active');
    $countryFlag.attr('class', 'market-search-flag ' + nextFlagClass);
    $countryInput.val(nextCountry);

    if (countryModal) {
      countryModal.hide();
    }

    clearTimeout(debounceTimer);
    fetchResults(($input.val() || '').trim());
  });

  syncCategoryState();
});
</script>
@endpush