@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>Nama File</th>
            <th>File</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        @if (count($filenames) > 0)
            @foreach ($filenames as $key => $item)
                <tr>
                    <td>
                        <input class="form-control" name="{{ $name }}_filename[]" value="{{ $item }}">
                    </td>
                    <td>
                        <a target="_blank"
                                href="{{ @$attachments[$key]->download_url }}">{{ @$attachments[$key]->filename }}</a>

                        <input type="hidden" name="{{ $name }}_id[]" value="{{ $id[$key] }}" />
                        @if (@$errors->has($name . "_file.".$key) && $label !== false)
                        @foreach ($errors->get($name . "_file.".$key) as $message)
                            <p class="text-danger">{{ ucfirst($message) }}</p>
                        @endforeach
                    @endif
                    </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 }}_filename[]">
                </td>
                <td>
                    <input type="file" class="form-control" name="{{ $name }}_file[]" />
                    <input type="hidden" name="{{ $name }}_id[]" />
                    @if (!empty($info))
                        <small class="text-muted">{{ $info }}</small>
                    @endif
                    @if (@$errors->has($name . "_file[$key]") && $label !== false)
                        @foreach ($errors->get($name) as $message)
                            <p class="text-danger">{{ ucfirst($message) }}</p>
                        @endforeach
                    @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 }}_filename[]">' +
                ' </td>' +
                '<td>' +
                '<input type="file" class="form-control" name="{{ $name }}_file[]"/>' +
                '<input type="hidden" name="{{ $name }}_id[]" />' +
                @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