{{--
  Reusable product selector with category grouping.
  Required variables:
    $products    — Collection of Product (with 'category' eager loaded)
    $selectedIds — Array of selected product IDs
--}}

<div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
  <small class="text-muted fw-semibold me-1">Apply To:</small>
  <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectAllProducts()">Select All</button>
  <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectNoneProducts()">Select None</button>
</div>

@php
  $grouped = $products->groupBy(fn($p) => $p->category_id ?? 'none');
@endphp

@forelse($grouped as $catId => $catProducts)
  @php $catName = $catProducts->first()->category->name ?? 'Uncategorized'; @endphp
  <div class="mb-1 border-bottom pb-2">

    {{-- Category row --}}
    <div class="d-flex align-items-center gap-2 py-1">
      <input type="checkbox" class="form-check-input category-checkbox mt-0"
             id="cat_chk_{{ $catId }}" data-cat="{{ $catId }}"
             onchange="toggleCategory(this)">
      <label class="form-check-label fw-semibold mb-0 flex-grow-1" for="cat_chk_{{ $catId }}"
             style="cursor:pointer" onclick="document.getElementById('cat_body_{{ $catId }}').classList.toggle('d-none')">
        {{ $catName }}
        <small class="text-muted fw-normal">({{ $catProducts->count() }} products)</small>
      </label>
      <button type="button" class="btn btn-sm btn-link p-0 text-muted"
              onclick="document.getElementById('cat_body_{{ $catId }}').classList.toggle('d-none')">
        <i class="ti tabler-chevron-down icon-14px"></i>
      </button>
    </div>

    {{-- Products under this category --}}
    <div id="cat_body_{{ $catId }}" class="ms-4 mt-1">
      <div class="row g-1">
        @foreach($catProducts as $product)
          <div class="col-12 col-md-6 col-lg-4">
            <div class="form-check py-1">
              <input class="form-check-input product-checkbox" type="checkbox"
                     name="product_ids[]"
                     id="prod_{{ $product->id }}" value="{{ $product->id }}"
                     data-cat="{{ $catId }}"
                     {{ in_array($product->id, $selectedIds) ? 'checked' : '' }}
                     onchange="syncCategoryCheckbox('{{ $catId }}')">
              <label class="form-check-label small" for="prod_{{ $product->id }}">
                {{ $product->name }}
              </label>
            </div>
          </div>
        @endforeach
      </div>
    </div>

  </div>
@empty
  <p class="text-muted small mb-0">No active products available.</p>
@endforelse

<script>
function toggleCategory(catCb) {
    var catId = catCb.dataset.cat;
    var checked = catCb.checked;
    document.querySelectorAll('.product-checkbox[data-cat="' + catId + '"]').forEach(function(cb) {
        cb.checked = checked;
    });
    catCb.indeterminate = false;
}

function syncCategoryCheckbox(catId) {
    var all = document.querySelectorAll('.product-checkbox[data-cat="' + catId + '"]');
    var checkedCount = Array.from(all).filter(cb => cb.checked).length;
    var catCb = document.querySelector('.category-checkbox[data-cat="' + catId + '"]');
    if (!catCb) return;
    catCb.checked       = checkedCount === all.length;
    catCb.indeterminate = checkedCount > 0 && checkedCount < all.length;
}

function selectAllProducts() {
    document.querySelectorAll('.product-checkbox').forEach(cb => cb.checked = true);
    document.querySelectorAll('.category-checkbox').forEach(cb => { cb.checked = true; cb.indeterminate = false; });
}

function selectNoneProducts() {
    document.querySelectorAll('.product-checkbox').forEach(cb => cb.checked = false);
    document.querySelectorAll('.category-checkbox').forEach(cb => { cb.checked = false; cb.indeterminate = false; });
}

// Init category checkbox states on load
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.category-checkbox').forEach(function (catCb) {
        syncCategoryCheckbox(catCb.dataset.cat);
    });
});
</script>