@php
    $unitName = $name ?? 'unit';
    $optional = $optional ?? false;
    $unitValue = $value ?? ($optional ? '' : 'NOS');
    $placeholder = $placeholder ?? 'Select unit';
    $unitLabel = $label ?? ($unitValue !== '' ? $unitValue : $placeholder);
    $sizeClass = ($size ?? '') === 'lg' ? 'billing-unit-picker--lg' : '';
@endphp
<div class="billing-unit-picker {{ $sizeClass }}" data-unit-picker
    @if($optional) data-optional="1" data-placeholder="{{ $placeholder }}" @endif>
    <input type="hidden" name="{{ $unitName }}" data-field="unit" value="{{ $unitValue }}" @if($required ?? false) required @endif>
    <button type="button" class="billing-unit-picker__trigger form-select {{ ($size ?? '') === 'lg' ? '' : 'form-select-sm' }} text-start" aria-haspopup="listbox" aria-expanded="false">
        <span class="billing-unit-picker__label text-truncate" title="{{ $unitLabel }}">{{ $unitLabel }}</span>
        <i class="ri-arrow-down-s-line billing-unit-picker__arrow"></i>
    </button>
    <div class="billing-unit-picker__dropdown d-none" role="listbox">
        <div class="billing-unit-picker__search-wrap">
            <input type="text" class="form-control form-control-sm billing-unit-picker__search" placeholder="Type to search" autocomplete="off">
        </div>
        <ul class="billing-unit-picker__list"></ul>
        <button type="button" class="billing-unit-picker__add btn btn-link btn-sm w-100 text-start">
            <i class="ri-add-line"></i> Add new unit
        </button>
    </div>
</div>