@extends('user.layouts.app')

@section('body_class', 'affiliated')

@push('styles')
<style type="text/css">

</style>
@endpush

@section('content')
<section class="banner-slider">
  @foreach($bannerImages as $image)
  <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
      alt="Slide {{ $loop->iteration }}"></div>
  @endforeach
</section>

<div class="banner-inner-content">
  <div class="container">
    <ul class="bread-come">
      <li>
        <a href="/">Home</a>
      </li>
      <li>Affiliated Clubs</li>
    </ul>
  </div>
</div>

{{--<section class="affiliated-clubs">
  <div class="container">
    <div class="page-title">
      <h1>Our Clubs</h1>
    </div>
    <ul class="club-tour-list">
      @if(!empty($our_clubs))
      @foreach($our_clubs as $club)
      <li>
        <div class="tour-content" data-aos="fade-up">
          <h4>{{ $club->title }}</h4>
          <p>{!! $club->description !!}</p>
        </div>
        <div class="tour-image" data-aos="fade-up">
          <img src="{{ asset('/storage/distribution/images/our_clubs_image/' . $club->image) }}" alt="" />
        </div>
      </li>
      @endforeach
      @endif
    </ul>
  </div>
</section>--}}

{{--<section class="affiliated-clubs-tab">
  <div class="container">
    <div class="club-information-tab">
      <h2>Affiliated Clubs</h2>
      <div class="tabs_with_accordion_wrapper">
        <div class="container">
          <div class="container my-4">
            <div class="search-box text-center">
              <input type="text" id="clubSearch" class="form-control"
                placeholder="Search clubs... (by name, city, email, etc)">
            </div>
          </div>

          <!-- Nav Tabs List -->
          <ul class="nav nav-tabs d-none d-md-flex" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="overseas-tab" data-bs-toggle="tab" data-bs-target="#overseas"
                type="button" role="tab" aria-controls="overseas" aria-selected="true">Overseas</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="india-tab" data-bs-toggle="tab" data-bs-target="#india" type="button"
                role="tab" aria-controls="india" aria-selected="false">India</button>
            </li>
          </ul>

          <!-- Nav Tabs Content -->
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane accordion-item fade show active" id="overseas" role="tabpanel"
              aria-labelledby="overseas-tab">
              <h2 class="accordion-header d-md-none" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                  aria-expanded="true" aria-controls="collapseOne">Overseas</button>
              </h2>
              <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#myTabContent">
                <div class="accordion-body">
                  <!-- sub state here start -->

                  <div class="tab-inner" id="myTabSubContent">
                    @if(!empty($affiliated_overseas_clubs))
                    @php
                    // Group clubs by country
                    $clubsByCountry = $affiliated_overseas_clubs->groupBy('country');
                    @endphp

                    @foreach($clubsByCountry as $country => $clubs)
                    <div class="tab-pane accordion-item fade show" id="overseasItem{{ $loop->index + 1 }}"
                      role="tabpanel" aria-labelledby="item{{ $loop->index + 1 }}-tab">
                      <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#item{{ $loop->index + 1 }}Content"
                        aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                        aria-controls="item{{ $loop->index + 1 }}Content">
                        {{ $country }}
                      </button>
                      <div id="item{{ $loop->index + 1 }}Content"
                        class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                        aria-labelledby="item{{ $loop->index + 1 }}" data-bs-parent="#myTabSubContent">

                        @foreach($clubs->chunk(2) as $chunkIndex => $clubsChunk)
                        <!-- Chunking the clubs in sets of 2 -->
                        <div class="data-row">
                          @foreach($clubsChunk as $club)
                          @php
                          $fax = trim(preg_replace('/\s+/', '', $club->fax)); // Remove spaces
                          @endphp
                          <div class="data-box">
                            <table class="data-table">
                              <thead>
                                <th colspan="3">{{ $club->club_name }}</th>
                              </thead>
                              <tbody>
                                <tr>
                                  <td valign="top">Address</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{!! $club->address !!}</td>
                                </tr>
                                <tr>
                                  <td valign="top">Phone</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{{ $club->phone }}</td>
                                </tr>
                                <tr>
                                  <td valign="top">Fax</td>
                                  <td valign="top">:</td>
                                  <td valign="top">
                                    @if (!empty($fax) && $fax !== '00000000')
                                    {{ $club->fax }}
                                    @else
                                    -
                                    @endif
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top">Email</td>
                                  <td valign="top">:</td>
                                  <td valign="top"><a href="mailto:{{ $club->email }}">{{ $club->email }}</a></td>
                                </tr>
                                <tr>
                                  <td valign="top">Website</td>
                                  <td valign="top">:</td>
                                  <td valign="top"><a href="{{ $club->website_link }}" target="_blank">{{ $club->website_link }}</a>
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top">Accommodation</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{{ $club->has_accomodation ? 'Yes' : 'No' }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          @endforeach
                        </div>
                        @endforeach
                      </div>
                    </div>
                    @endforeach
                    @endif


                  </div>
                  <!-- sub state here end -->
                </div>
              </div>
            </div>
            <div class="tab-pane accordion-item fade" id="india" role="tabpanel" aria-labelledby="india-tab">
              <h2 class="accordion-header d-md-none" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">India</button>
              </h2>
              <div id="collapseTwo" class="accordion-collapse collapse d-md-block" aria-labelledby="headingTwo"
                data-bs-parent="#myTabContent">
                <div class="accordion-body">
                  <!-- sub state here start -->
                  <div class="tab-inner" id="myTabSubContent2">
                    @if($affiliated_india_clubs)
                    @php
                    // Group clubs by city
                    $clubsByCity = $affiliated_india_clubs->groupBy('city');
                    @endphp

                    @foreach($clubsByCity as $city => $clubs)
                    <div class="tab-pane accordion-item fade show" id="indiaItem{{ $loop->index + 1 }}" role="tabpanel"
                      aria-labelledby="india-item{{ $loop->index + 1 }}-tab">
                      <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#indiaItem{{ $loop->index + 1 }}Content"
                        aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                        aria-controls="indiaItem{{ $loop->index + 1 }}Content">
                        {{ $city }}
                      </button>
                      <div id="indiaItem{{ $loop->index + 1 }}Content"
                        class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                        aria-labelledby="indiaItem{{ $loop->index + 1 }}" data-bs-parent="#myTabSubContent2">


                        @foreach($clubs->chunk(2) as $chunkIndex => $clubsChunk)
                        <!-- Chunking the clubs in sets of 2 -->
                        <div class="data-row">
                          @foreach($clubsChunk as $club)
                          @php
                          $fax = trim(preg_replace('/\s+/', '', $club->fax)); // Remove spaces
                          @endphp
                          <div class="data-box">
                            <table class="data-table">
                              <thead>
                                <tr>
                                  <th colspan="3">{{ $club->club_name }}</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td valign="top">Address</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{!! $club->address !!}</td>
                                </tr>
                                <tr>
                                  <td valign="top">Phone</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{{ $club->phone }}</td>
                                </tr>
                                <tr>
                                  <td valign="top">Fax</td>
                                  <td valign="top">:</td>
                                  <td valign="top">
                                    @if (!empty($fax) && $fax !== '00000000')
                                    {{ $club->fax }}
                                    @else
                                    -
                                    @endif
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top">Email</td>
                                  <td valign="top">:</td>
                                  <td valign="top"><a href="mailto:{{ $club->email }}">{{ $club->email }}</a></td>
                                </tr>
                                <tr>
                                  <td valign="top">Website</td>
                                  <td valign="top">:</td>
                                  <td valign="top"><a href="{{ $club->website_link }}" target="_blank">{{ $club->website_link }}</a>
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top">Accommodation</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{{ $club->has_accomodation ? 'Yes' : 'No' }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          @endforeach
                        </div>
                        @endforeach
                      </div>
                    </div>
                    @endforeach
                    @endif
                  </div>
                  <!-- sub state here end -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>--}}

<section class="affiliated-clubs-tab">
  <div class="container">
    <div class="club-information-tab">
      <h2>Affiliated Clubs</h2>
      <div class="tabs_with_accordion_wrapper">
        <div class="container">
          <div class=" my-4">
            <!-- <div class="search-box text-center">
              <input type="text" id="clubSearch" class="form-control"
                placeholder="Search clubs... (by name, city, email, etc)">
            </div> -->
          </div>

          <!-- Nav Tabs List -->
          <div class="d-flex flex-column-reverse flex-lg-row gap-3 gap-lg-0 align-items-center justify-content-between mb-3 mb-lg-4 mb-xl-5">
          <ul class="nav nav-tabs d-flex mb-0" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="india-tab" data-bs-toggle="tab" data-bs-target="#india" type="button"
                role="tab" aria-controls="india" aria-selected="true">India</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="overseas-tab" data-bs-toggle="tab" data-bs-target="#overseas"
                type="button" role="tab" aria-controls="overseas" aria-selected="false">Overseas</button>
            </li>
          </ul>
            <div class="search-box text-center affiliated_search_wrapper">
              <input type="text" id="clubSearch" class="form-control border green"
                placeholder="Search clubs... (by name, city, email, etc)">
            </div>
          </div>

          <!-- Nav Tabs Content -->
          <div class="tab-content" id="myTabContent">
            <!-- Overseas -->
            <div class="tab-pane fade show" id="overseas" role="tabpanel" aria-labelledby="overseas-tab">
              <div class="accordion-body">
                <div class="accordion tab-inner" id="myTabSubContent">
                  @if(!empty($affiliated_overseas_clubs))
                  @php
                  $clubsByCountry = $affiliated_overseas_clubs->groupBy('country');
                  $clubsByCountry = $clubsByCountry->sortKeys();
                  @endphp
                  @foreach($clubsByCountry as $country => $clubs)
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingCountry{{ $loop->index }}">
                      <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseCountry{{ $loop->index }}" aria-expanded="true"
                        aria-controls="collapseCountry{{ $loop->index }}">
                        {{ $country }}
                      </button>
                    </h2>

                    <div id="collapseCountry{{ $loop->index }}" class="accordion-collapse collapse show" aria-labelledby="headingCountry{{ $loop->index }}" data-bs-parent="#myTabSubContent">
                      <div class="accordion-body">
                        @foreach($clubs->chunk(2) as $clubsChunk)
                        <div class="data-row">
                          @foreach($clubsChunk as $club)
                          @php $fax = trim(preg_replace('/\s+/', '', $club->fax)); @endphp
                          <div class="data-box">
                            <table class="data-table green">
                              <thead>
                                <tr>
                                  <th colspan="3">{{ $club->club_name }}</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td valign="top">Address</td>
                                  <td class="d-flex align-items-center">:</td>
                                  <td valign="top"> {!! strip_tags($club->address, '<br>') !!}</td>
                                </tr>
                                 <!-- <tr>
                                  <td valign="top">Address <span>:</span></td>
                                  <td valign="top"> {!! strip_tags($club->address, '<br>') !!}</td>
                                </tr> -->
                                <tr>
                                  <td valign="top">Phone</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{{ $club->phone }}</td>
                                </tr>
                                <!-- <tr>
                                  <td valign="top">Fax</td>
                                  <td valign="top">:</td>
                                  <td valign="top">@if (!empty($fax) && $fax !== '00000000'){{ $club->fax }}@else-@endif</td>
                                </tr> -->
                                <tr>
                                  <td valign="top">Email</td>
                                  <td valign="top">:</td>
                                  <td valign="top"><a href="mailto:{{ $club->email }}">{{ $club->email }}</a></td>
                                </tr>
                                <tr>
                                  <td valign="top">Website</td>
                                  <td valign="top">:</td>
                                  <td valign="top"><a href="{{ $club->website_link }}" target="_blank">{{ $club->website_link }}</a>
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top">Accommodation</td>
                                  <td valign="top">:</td>
                                  <td valign="top">{{ $club->has_accommodation === 'yes' ? 'Yes' : 'No' }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          @endforeach
                        </div>
                        @endforeach
                      </div>
                    </div>
                  </div>
                  @endforeach
                  @endif
                </div>
              </div>
            </div>

            <!-- India -->
            <div class="tab-pane fade show active" id="india" role="tabpanel" aria-labelledby="india-tab">
              <div class="accordion-body">
                <div class="tab-inner" id="myTabSubContent2">
                  @if($affiliated_india_clubs)
                  @php
                  //$clubsByCity = $affiliated_india_clubs->groupBy('city')->sortKeys();
                          $clubsByState = $affiliated_india_clubs->groupBy('state');
                  @endphp

                  <div class="accordion" id="indiaAccordion">
                    @foreach($clubsByState as $city => $clubs)
                    @php $accordionId = 'city-' . Str::slug($city, '-'); @endphp

                    <div class="accordion-item">
                      <h2 class="accordion-header" id="heading-{{ $accordionId }}">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                          data-bs-target="#collapse-{{ $accordionId }}" aria-expanded="true"
                          aria-controls="collapse-{{ $accordionId }}">
                          {{ $city }}
                        </button>
                      </h2>

                      <div id="collapse-{{ $accordionId }}" class="accordion-collapse collapse show"
                        aria-labelledby="heading-{{ $accordionId }}">
                        <div class="accordion-body">
                          @foreach($clubs->chunk(2) as $clubsChunk)
                          <div class="data-row">
                            @foreach($clubsChunk as $club)
                            @php $fax = trim(preg_replace('/\s+/', '', $club->fax)); @endphp
                            <div class="data-box">
                              <table class="data-table green">
                                <thead>
                                  <tr>
                                    <th colspan="3">{{ $club->club_name }}</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td valign="top">Address</td>
                                    <td valign="top">:</td>
                                    <td valign="top"> {!! strip_tags($club->address, '<br>') !!}</td>
                                  </tr>
                                  <tr>
                                    <td valign="top">Phone</td>
                                    <td valign="top">:</td>
                                    <td valign="top">{{ $club->phone }}</td>
                                  </tr>
                                  <!-- <tr>
                                    <td valign="top">Fax</td>
                                    <td valign="top">:</td>
                                    <td valign="top">@if (!empty($fax) && $fax !== '00000000'){{ $club->fax }}@else-@endif</td>
                                  </tr> -->
                                  <tr>
                                    <td valign="top">Email</td>
                                    <td valign="top">:</td>
                                    <td valign="top"><a href="mailto:{{ $club->email }}">{{ $club->email }}</a></td>
                                  </tr>
                                  <tr>
                                    <td valign="top">Website</td>
                                    <td valign="top">:</td>
                                    <td valign="top"><a href="{{ $club->website_link }}" target="_blank">{{ $club->website_link
                                        }}</a></td>
                                  </tr>
                                  <tr>
                                    <td valign="top">Accommodation</td>
                                    <td valign="top">:</td>
                                    <td valign="top">{{ $club->has_accommodation === 'yes' ? 'Yes' : 'No' }}</td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            @endforeach
                          </div>
                          @endforeach
                        </div>
                      </div>
                    </div>
                    @endforeach
                  </div>
                  @endif
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
  // document.addEventListener('DOMContentLoaded', function () {
  //   console.log('[ClubSearch] init');

  //   const input = document.getElementById('clubSearch');
  //   if (!input) return;

  //   const boxes = document.querySelectorAll('.data-box');
  //   console.log('[ClubSearch] found data-box count:', boxes.length);

  //   function performFilter() {
  //     const q = input.value.trim().toLowerCase();
  //     let firstMatch = null;

  //     boxes.forEach(box => {
  //       const txt = box.innerText.toLowerCase();
  //       const match = q === '' || txt.includes(q);
  //       box.style.display = match ? '' : 'none';
  //       if (match && !firstMatch) {
  //         firstMatch = box;
  //       }
  //     });

  //     // Hide or show parent .data-row depending on children
  //     document.querySelectorAll('.data-row').forEach(row => {
  //       const anyVisible = Array.from(row.querySelectorAll('.data-box'))
  //         .some(b => b.style.display !== 'none');
  //       row.style.display = anyVisible ? '' : 'none';
  //     });

  //     // Auto scroll to the first match
  //     if (firstMatch) {
  //       setTimeout(() => {
  //         firstMatch.scrollIntoView({ behavior: 'smooth', block: 'start' });
  //       }, 200);
  //     }
  //   }

  //   input.addEventListener('input', performFilter);

  //   // run once on load so everything is visible
  //   performFilter();
  // });


  // document.addEventListener("DOMContentLoaded", function() {
  //   const searchInput = document.getElementById("clubSearch");
  //   const tabContent = document.getElementById("myTabContent");

  //   searchInput.addEventListener("input", function() {
  //     const term = this.value.toLowerCase();
  //     let firstMatch = null;

  //     tabContent.querySelectorAll(".accordion-item").forEach(item => {
  //       const text = item.innerText.toLowerCase();
  //       if (text.includes(term)) {
  //         item.style.display = "";
  //         if (!firstMatch) firstMatch = item;
  //       } else {
  //         item.style.display = "none";
  //       }
  //     });

  //     if (firstMatch) {
  //       firstMatch.scrollIntoView({ behavior: "smooth", block: "start" });
  //     }
  //   });
  // });


  // document.addEventListener("DOMContentLoaded", function() {
  //     const searchInput = document.getElementById("clubSearch");

  //     searchInput.addEventListener("input", function() {
  //         const term = this.value.toLowerCase();
  //         let firstMatch = null;

  //         // Loop through all tab panes
  //         document.querySelectorAll(".tab-pane").forEach(tabPane => {
  //             let tabHasMatch = false;

  //             // Loop through all accordion-items inside this tab
  //             tabPane.querySelectorAll(".accordion-item").forEach(item => {
  //                 const text = item.innerText.toLowerCase();
  //                 if (!term || text.includes(term)) {
  //                     item.style.display = "";
  //                     tabHasMatch = tabHasMatch || text.includes(term);

  //                     // Save first match to scroll to
  //                     if (!firstMatch && text.includes(term)) {
  //                         firstMatch = item;
  //                     }
  //                 } else {
  //                     item.style.display = "none";
  //                 }
  //             });

  //             // Auto-switch tab if it has a match
  //             const tabId = tabPane.getAttribute("id");
  //             const tabButton = document.querySelector(`.nav-link[data-bs-target="#${tabId}"]`);
  //             if (tabButton) {
  //                 if (tabHasMatch) {
  //                     // Show tab if not already active
  //                     if (!tabButton.classList.contains("active")) {
  //                         new bootstrap.Tab(tabButton).show();
  //                     }
  //                 } else {
  //                     // Optional: you can leave tabs as-is if no match
  //                 }
  //             }
  //         });

  //         // Scroll to first match
  //         if (firstMatch) {
  //             firstMatch.scrollIntoView({ behavior: "smooth", block: "start" });
  //         }
  //     });
  // });

  // document.addEventListener("DOMContentLoaded", function () {
  //   const searchInput = document.getElementById("clubSearch");

  //   searchInput.addEventListener("input", function () {
  //     const term = this.value.toLowerCase();
  //     let firstMatch = null;

  //     // Loop through all tab panes
  //     document.querySelectorAll(".tab-pane").forEach(tabPane => {
  //       let tabHasMatch = false;

  //       // Loop through all accordion-items inside this tab
  //       tabPane.querySelectorAll(".accordion-item").forEach(item => {
  //         // Get all text inside the accordion-item (headers + tables)
  //         const text = item.innerText.toLowerCase();

  //         if (!term || text.includes(term)) {
  //           item.style.display = "";
  //           if (term && text.includes(term)) tabHasMatch = true;

  //           // Save first match
  //           if (!firstMatch && term && text.includes(term)) {
  //             firstMatch = item;
  //           }
  //         } else {
  //           item.style.display = "none";
  //         }
  //       });

  //       // Auto-switch tab if it has a match
  //       const tabId = tabPane.getAttribute("id");
  //       const tabButton = document.querySelector(`.nav-link[data-bs-target="#${tabId}"]`);
  //       if (tabButton && tabHasMatch) {
  //         if (!tabButton.classList.contains("active")) {
  //           new bootstrap.Tab(tabButton).show();
  //         }
  //       }
  //     });

  //     // Scroll to first match
  //     if (firstMatch) {
  //       firstMatch.scrollIntoView({ behavior: "smooth", block: "start" });
  //     }
  //   });
  // });

  document.addEventListener("DOMContentLoaded", function () {
    const searchInput = document.getElementById("clubSearch");

    // ✅ Add "No data found" message inside each tab-pane (Overseas & India)
    document.querySelectorAll(".tab-pane").forEach(tabPane => {
      if (!tabPane.querySelector(".noDataFoundMsg")) {
        const msg = document.createElement("div");
        msg.className = "noDataFoundMsg";
        msg.textContent = "No data found";
        msg.style.display = "none";
        msg.style.textAlign = "center";
        msg.style.padding = "20px";
        msg.style.fontSize = "18px";
        msg.style.fontWeight = "600";
        tabPane.appendChild(msg);
      }
    });

    function applyFilter() {
      const term = (searchInput.value || "").trim().toLowerCase();

      document.querySelectorAll(".tab-pane").forEach(tabPane => {
        let tabHasMatch = false;

        tabPane.querySelectorAll(".accordion-item").forEach(item => {
          const text = item.innerText.toLowerCase();
          const match = !term || text.includes(term);

          item.style.display = match ? "" : "none";
          if (match && term) tabHasMatch = true;
          if (!term) tabHasMatch = true; // when empty, consider as having data
        });

        // ✅ Show "No data found" ONLY when user typed something AND this tab has no match
        const msg = tabPane.querySelector(".noDataFoundMsg");
        if (msg) {
          msg.style.display = (term && !tabHasMatch) ? "block" : "none";
        }
      });
    }

    // 1) Filter while typing
    searchInput.addEventListener("input", applyFilter);

    // 2) When switching tab, just re-apply filter so message/content is correct
    document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(btn => {
      btn.addEventListener("shown.bs.tab", applyFilter);
    });

    // Initial
    applyFilter();
  });
</script>
@endpush