@props(['name', 'value', 'title'])
<div x-data="{ imagePreviews: [], clearInput: false }">
    <div class="flex items-center justify-center relative  bg-white border-2 p-3 rounded-md shadow-lg my-2 w-full">
        <label for="{{ $name }}"
            class="flex flex-col items-center justify-center w-full h-74 border-2 border-gray-300 border-dashed cursor-pointer bg-gray-50">
            <div class="flex flex-col items-center justify-center py-6">
                <template x-if="imagePreviews.length > 0">
                    <img x-bind:src="imagePreviews[0]" class="w-[35%] my-4" alt="Preview">
                </template>
                <template x-if="imagePreviews.length === 0">
                    <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
                    </svg>
                </template>

                <p class="mb-2 text-center text-sm text-gray-500">Натисніть щоб завантажити фото</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">JPEG, PNG, JPG</p>
            </div>
            <input name="{{ $name }}" id="{{ $name }}" {{ $attributes }} type="file" class="hidden"
                @change="imagePreviews = []; 
                        for (let i = 0; i < $refs.image.files.length; i++) { 
                            imagePreviews.push(URL.createObjectURL($refs.image.files[i]));
                        }"
                x-ref="image" />
        </label>
    </div>
    @error($name)
        <div class="text-red-500 mt-2 font-light text-sm">{{ $message }}</div>
    @enderror
</div>