@php
$initStrRandom = \Illuminate\Support\Str::random(7);
@endphp

<div class="flex flex-col gap-2">
    <dt class="text-sm font-medium text-gray-500">
        <span>{{ $label }}</span>
    </dt>
    <dd class="text-sm text-gray-900 sm:col-span-2 sm:mt-0">
        @isset($query)
            @if (gettype(json_decode($query)) == 'array')
                <div class="mb-3 grid grid-cols-12 gap-4 rounded border py-4">
                    @foreach (json_decode($query) as $value)
                        @php
                            $unique = \Illuminate\Support\Str::random(7);
                        @endphp
                        <div class="col-span-12 mx-auto md:col-span-3" id="img-{{ $unique }}">
                            <a data-fslightbox href="{{ asset('storage/' . $value) }}">
                                <img src="{{ asset('storage/' . $value) }}" alt="image" class="object-cover" style="width: 200px; height: 200px">
                            </a>
                            <button type="button" class="btn-img-remove w-full bg-red-500 px-3 py-2 text-white" data-src="{{ $value }}" data-id="{{ $unique }}">
                                <i class="fas fa-trash"></i>
                                ลบ
                            </button>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="mb-3">
                    <a data-fslightbox href="{{ asset('storage/' . $query) }}">
                        <img src="{{ asset('storage/' . $query) }}" alt="image" class="object-cover" style="width: 200px; height: 200px">
                    </a>
                </div>
            @endif
        @else
            <div class="mb-3">
                <a data-fslightbox href="{{ asset('storage/' . $query) }}">
                    <div class="bg-gray-100" style="width: 200px; height: 200px"></div>
                </a>
            </div>
        @endisset

        @isset($multiple)
            @if ($multiple)
                <input type="file" accept="*/image" name="{{ $name }}[]" multiple>
            @else
                <input type="file" accept="*/image" name="{{ $name }}">
            @endif
        @else
            <input type="file" accept="*/image" name="{{ $name }}">
        @endisset
    </dd>
</div>