@if ($label !== false)
    @php
        $divclose = '</div>';
        $optional = $optional ? ' <small class="text-muted">( Opsional )</small>' : '';
    @endphp

    <div class="form-group table-responsive {{ @$errors->has($name) ? 'has-error' : '' }}">
        <label>{{ $label }}{!! $optional !!}</label>
@endif

<table class="table table-noborder" id="table-{{ $name }}">
    <thead>
        <tr>
            <th>Input</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        @if (count($names) > 0)
            @foreach ($names as $key => $item)
                <tr>
                    <td>
                        <input class="form-control" name="{{ $name }}[]" value="{{ $item }}">
                    </td>
                    <td>
                        <button type="button" class="btn-delete-item btn btn-danger btn-sm"><span
                                class="mdi mdi-delete"></span< /button>
                    </td>
                </tr>
            @endforeach
        @else
            <tr>
                <td>
                    <input class="form-control" name="{{ $name }}[]">
                </td>
                <td>
                    @if (!empty($info))
                        <small class="text-muted">{{ $info }}</small>
                    @endif
                </td>
            </tr>
        @endif


    </tbody>
    <tfoot>
        <tr>
            <th colspan="3">
                <a href="javascript:void(0)" id="btn-add-{{ $name }}">
                    <i class="mdi mdi-plus"></i> ADD
                </a>
            </th>
        </tr>
    </tfoot>
</table>

@if (@$errors->has($name) && $label !== false)
    @foreach ($errors->get($name) as $message)
        <p class="text-danger">{{ ucfirst($message) }}</p>
    @endforeach
@endif
{!! @$divclose !!}

@push('scripts')
    <script>
        $('document').ready(function() {
            const html = '<tr>' +
                '<td>' +
                '<input class="form-control" name="{{ $name }}[]">' +
                @if (!empty($info))
                        `<small class="text-muted">{{ $info }}</small>` +
                    @endif
                ' </td>' +
                '<td>' +
                '<button type="button" class="btn-delete-item btn btn-danger btn-sm"><span class="mdi mdi-delete"></span</button>' +
                ' </td>' +
                '</tr>';

            $("#btn-add-{{ $name }}").click(function() {
                $("#table-{{ $name }} tbody").append(html);
            })

            $("#table-{{ $name }}").on('click', '.btn-delete-item', function() {
                $(this).parent().parent().remove();
            })
        })
    </script>
@endpush