{{--
    Tedarikçi çoklu hizmet tipi seçici.

    Sade kalıp: gölge/ikon yok, seçili olan dolu — açık/kapalı farkı tek
    bakışta okunuyor. Ölçüler ledger çiplerinin (.pfx-chip / .acx-type)
    aynısı, böylece quick-view kartında yabancı durmuyor.

    Beklenen: $selected (tip kodları dizisi)
--}}
@php $selected = $selected ?? []; @endphp
@once
<style>
    .stype-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .stype-chip {
        display: inline-flex; align-items: center; cursor: pointer; user-select: none; margin: 0;
        border: 1px solid #e2e8f0; background: #fff; color: #64748b;
        border-radius: 8px; padding: 4px 10px;
        font-size: .72rem; font-weight: 700; line-height: 1.4;
        transition: border-color .14s, color .14s, background .14s;
    }
    .stype-chip:hover { border-color: #bfdbfe; color: #1d4ed8; }
    .stype-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
    .stype-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
    .stype-chip.active { border-color: #0f172a; background: #0f172a; color: #fff; }
</style>
@endonce
<div class="stype-chips" data-supplier-type-chips>
    @foreach(\App\Models\Supplier\Supplier::supplierTypes() as $val => $label)
        <label class="stype-chip {{ in_array($val, $selected) ? 'active' : '' }}">
            <input type="checkbox" name="supplier_types[]" value="{{ $val }}" @checked(in_array($val, $selected))>
            <span>{{ $label }}</span>
        </label>
    @endforeach
</div>
@once
<script>
(function () {
    if (window.__stypeChipsBound) return;
    window.__stypeChipsBound = true;
    document.addEventListener('change', function (e) {
        var cb = e.target.closest('[data-supplier-type-chips] input[type="checkbox"]');
        if (!cb) return;
        cb.closest('.stype-chip').classList.toggle('active', cb.checked);
    });
})();
</script>
@endonce