{{-- Tedarikçi çoklu hizmet tipi seçici (çip). Beklenen: $selected (array of type codes). --}}
@php $selected = $selected ?? []; @endphp
<style>
    .stype-chips { display:flex; flex-wrap:wrap; gap:9px; }
    .stype-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:12px; cursor:pointer;
        border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; font-size:.83rem; font-weight:700; transition:.15s; user-select:none; }
    .stype-chip:hover { border-color:#c7d2fe; background:#fff; }
    .stype-chip input { position:absolute; opacity:0; width:0; height:0; }
    .stype-chip-tick { font-size:.7rem; opacity:0; transform:scale(.4); transition:.15s; color:#4f46e5; }
    .stype-chip.active { border-color:#4f46e5; background:#eef2ff; color:#3730a3; box-shadow:0 4px 12px -6px rgba(79,70,229,.5); }
    .stype-chip.active .stype-chip-tick { opacity:1; transform:scale(1); }
</style>
<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))>
            <i class="fas fa-check stype-chip-tick"></i>
            <span>{{ $label }}</span>
        </label>
    @endforeach
</div>
<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>