@props([
    'label',
    'name',
    'placeholder' => '',
    'required' => false,
])

<div class="form-group" wire:ignore>
  <label class="form-label">
    {{ $label }}
    @if($required)
      <span class="text-red">*</span>
    @endif
  </label>  
  <input
      type="text"
      id="{{ $name }}"
      name="{{ $name }}"
      data-role="tagsinput"
      placeholder="{{ $placeholder }}"
      class="form-control inputTag @error($name) is-invalid @enderror"
      value="{{ old($name, $attributes->wire('model')?->value() ?? '') }}"
      {{ $attributes }}
  />
</div>
@once
<script>
function initTagsInput() {
    $('input[data-role="tagsinput"]').each(function () {

        const $input = $(this);

        // Already initialized
        if ($input.data('tagsinput')) {
            return;
        }

        $input.tagsinput();

        const tagsInput = $input.data('tagsinput');

        if (!tagsInput) {
            return;
        }

        const syncWithLivewire = function () {

            const value = tagsInput
                .items()
                .map(item => item.toString())
                .join(',');

            Livewire.dispatch('updateTechnical', {
                value: value
            });
        };

        // Tag added
        $input.on('itemAdded.technicalSync', function () {
            syncWithLivewire();
        });

        // Tag removed
        $input.on('itemRemoved.technicalSync', function () {
            syncWithLivewire();
        });

        // Normal change
        $input.on('change.technicalSync', function () {
            syncWithLivewire();
        });
    });
}

    document.addEventListener('livewire:initialized', () => {
        initTagsInput();
        Livewire.hook('commit', ({ succeed }) => {
            succeed(() => {
                setTimeout(() => {
                    initTagsInput();
                }, 50);
            });
        });
    });
</script>
@endonce