@props(['label' => null, 'clearable' => true])

<div class="input-wrapper input-wrapper-fid">
    @if($label)
        <label class="text-fid-pri fw-500">{{ $label }}</label>
    @endif
    <div class="input-inner">
        <input {{ $attributes->merge(['class' => 'input-fid', 'type' => 'text']) }}>
        @if($clearable)
            <button type="button" class="input-clear input-clear-fid" style="display:none" tabindex="-1">
                <i class="bi bi-x-lg fw-900"></i>
            </button>
        @endif
    </div>
</div>

@once
<script>
$(document).ready(function() {
    $(document).on('input', '.input-inner input', function() {
        var $clear = $(this).siblings('.input-clear');
        $(this).val() ? $clear.css('display', 'flex') : $clear.hide();
    });

    $(document).on('click', '.input-clear', function() {
        var $input = $(this).siblings('input');
        $input.val('').focus().trigger('input');
    });
});
</script>
@endonce