@php
    $show = isset($show) && $show;
@endphp
<div class="grid gap-6 mb-1 md:grid-cols-2">
    @foreach($ar->Files->whereNotNull('use_type')->sortBy('use_type') as $file)
        <input type="hidden" name="files[]" value="{{ $file->uuid }}">
        <div
            class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 rounded-lg border-gray-300 dark:border-gray-700 border-2 p-2">
            <img src="{{ asset($file->path) }}" alt="{{ 'File.' . $file->uuid }}" class="rounded h-64 sm:w-64">
            <div class="items flex-auto space-y-2">
                <div class="flex justify-between items-center rounded-lg bg-gray-300 dark:bg-gray-700 p-2">
                    <p>
                        Index : {{ $file->use_type }}
                    </p>
                    @if(!$show)
                        <button type="button" onclick="AddForm(this)" data-index="{{ $file->use_type }}"
                                class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                            <i class="bi bi-plus-circle-fill sm:me-2"></i>
                            <span class="hidden sm:block">
                                Add Form
                            </span>
                        </button>
                    @endif
                </div>
                @if(isset($sub) && count($sub->GetTargets()[$file->uuid]))
                    @foreach($sub->GetTargets()[$file->uuid] as $target)
                        @include('projects.subs.partial.item', [$file, $target, $show, 'form' => $sub->Forms($target)])
                    @endforeach
                @elseif(!$show)
                    @include('projects.subs.partial.item', $file)
                @endif
            </div>
        </div>
    @endforeach
</div>
<script>
    @if($show)
        const item = undefined;
    @else
        const item = '{!! str_replace(array("\r", "\n"), "", $item) !!}';
    @endif

    function AddForm(btn) {
        let newItem = $(item);
        const index = $(btn).data('index');
        newItem.find('select[name="forms[]"]').attr('name', `forms[${index}][]`);
        $(btn).parent().parent().append(newItem);
    }
</script>