
<?php $selected = $selected ?? []; ?>
<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>
    <?php $__currentLoopData = \App\Models\Supplier\Supplier::supplierTypes(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <label class="stype-chip <?php echo e(in_array($val, $selected) ? 'active' : ''); ?>">
            <input type="checkbox" name="supplier_types[]" value="<?php echo e($val); ?>" <?php if(in_array($val, $selected)): echo 'checked'; endif; ?>>
            <i class="fas fa-check stype-chip-tick"></i>
            <span><?php echo e($label); ?></span>
        </label>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</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>
<?php /**PATH C:\xampp\htdocs\acente\resources\views/agency/suppliers/_type-chips.blade.php ENDPATH**/ ?>