@extends('livewire.forms.input-template')

@section('auto-update')
@parent
<div>
        <div class="input-group flex-nowrap">
            <span class="input-group-text" id="addon-wrapping"><i class="fas fa-user"></i></span>
            @php $value = $input->users
                    ->map(function ($item, $index) {
                        return ['value' => $item['email']];
                    })
                    ->toarray();
            @endphp
            <div wire:ignore class="w-100">
                <input name='users' class='form-control  h-100' value="{{ json_encode($value) }}"
                    placeholder='type Email' autocomplete="false">
            </div>
        </div>
        <script>
            $(document).ready(function() {
                var input = document.querySelector('input[name="users"]'),
                    // init Tagify script on the above inputs
                    tagify = new Tagify(input, {
                        whitelist: [
                            @foreach ($users as $tag)
                                '{{ $tag->email }}'
                                @if (!$loop->last)
                                    ,
                                @endif
                            @endforeach
                        ],
                        enforceWhitelist: true,
                        dropdown: {
                            enabled: false,
                            maxItems: 0,
                        }

                    })
                input.addEventListener('change', onChange)

                function onChange(e) {
                    @this.call('changeTags', e.target.value, {{ $input->id }})
                }
            });
        </script>
  
    </div>
@overwrite

@section('pending')
@parent
    <div>
        <div class="input-group flex-nowrap">
            <span class="input-group-text" id="addon-wrapping"><i class="fas fa-user"></i></span>
            <div wire:ignore class="w-100">
                <input name='users' class='form-control  h-100' placeholder='type Email' autocomplete="false">
            </div>
        </div>
        <script>
            $(document).ready(function() {
                var input = document.querySelector('input[name="users"]'),
                    // init Tagify script on the above inputs
                    tagify = new Tagify(input, {
                        whitelist: [
                            @foreach ($users as $tag)
                                '{{ $tag->email }}'
                                @if (!$loop->last)
                                    ,
                                @endif
                            @endforeach
                        ],
                        enforceWhitelist: true,
                        dropdown: {
                            enabled: false,
                            maxItems: 0,
                        }

                    })
                input.addEventListener('change', onChange)

                function onChange(e) {
                    @this.call('changeFormTags', e.target.value, {{ $input->id }})
                }
            });
        </script>
    </div>
@overwrite

@section('render')
    <ul class="list-group">
        @forelse($input->users as $user)
            <li class="mb-2">
                {{ $user->name }}
            </li>
        @empty
            No users
        @endforelse
    </ul>
@overwrite

@section('display')
    <div class="col-md-12">
        <div class="col p-1">
            <div class="btn-card w-100 p-2">
                <ul class="list-group">
                    @forelse($input->users as $user)
                        <li class="mb-2">
                            {{ $user->name }}
                        </li>
                    @empty
                        No users
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
@overwrite

@section('other')
    <div class="col-md-12">
        <div class="col p-1">
            <div class="btn-card w-100 p-2">
                <ul class="list-group">
                    @forelse($input->users as $user)
                        <li class="mb-2">
                            {{ $user->name }}
                        </li>
                    @empty
                        No users
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
@overwrite