@props(['array_images', 'image_gallery_descriptions', 'id'])
<div class="p-2 w-full">
    <label class="block text-base md:text-lg mb-1 font-medium">Images</label>
    <div class="flex justify-center items-center w-full border border-blue-500 bg-blue-50 p-5" x-data="{dropingFile : false}"
    @click="$refs.files{{$id}}.click()"
    x-on:drop="dropingFile = false"
    x-on:drop.prevent="
        function drop_file_component() {
        
            if (event.dataTransfer.files.length > 0) {
                const files = event.dataTransfer.files;
                
                @this.uploadMultiple('files', files,
                    (uploadedFilename) => {
                        $wire.update('{{$id}}')
                    }, () => {}, (event) => {}
                )
            }
        }
    "
    
    x-on:livewire-upload-finish="$wire.update('{{$id}}')"
    x-on:dragover.prevent="dropingFile = true"
    x-on:dragleave.prevent="dropingFile = false"
   
    >
    <input name="avatar" type='file' id="myfile" wire:model="files" style="display: none" x-ref="files{{$id}}" multiple >
        <div class="w-auto text-center">
            <p class="mb-3"><img src="{{ Vite::asset('resources/images/icon-files-folder.svg')}}" class="inline-block" alt="#"></p>
            <p class="mb-0 text-base md:text-lg text-neutral-800 font-normal">Drop your files here, or <a href="#" class="text-blue-500 underline">choose file</a></p>
            <p class="mb-0 text-sm text-gray-400 font-normal">Allowed JPG, PNG, PDF, DOC. Max size of 2MB</p>
        </div>
    </div>

    <div class="flex flex-row mt-4 flex-wrap justify-start items-center -mx-2">
        @if($array_images)
            @foreach ( $array_images as $index => $file)
                @if($file  && !is_array($file)  && $file->temporaryUrl())
                    @if($file->getClientOriginalExtension() == "png" || $file->getClientOriginalExtension() == "jpg" )
                        <div class="px-2">
                            <div class="w-32 h-32 inline-block border border-dashed border-blue-500 relative group overflow-hidden">
                                <img src="{{ $file->temporaryUrl() }}" width="136" height="136" alt="" class="object-cover object-center w-full h-full block" >

                                <a href="#" 
                                @if($image_gallery_descriptions && isset($image_gallery_descriptions[$id]) && isset($image_gallery_descriptions[$id][$index]))
                                    wire:click="$emit('modalImageDescriptionShowFunc', '{{$id}}', '{{$index}}', '{{$image_gallery_descriptions[$id][$index]}}', true)"
                                @else  
                                    wire:click="$emit('modalImageDescriptionShowFunc', '{{$id}}', '{{$index}}', '', true)"
                                @endif
                                
                                class="absolute top-1 left-8 z-10 transition-all opacity-0 group-hover:opacity-100"> <svg class="right-1.5 top-1/2 -translate-y-1/2 absolute z-10 fill-[#6B7280] hover:fill-blue-500 cursor-pointer" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 10.9999C18.7348 10.9999 18.4804 11.1053 18.2929 11.2928C18.1054 11.4804 18 11.7347 18 11.9999V17.9999C18 18.2652 17.8946 18.5195 17.7071 18.707C17.5196 18.8946 17.2652 18.9999 17 18.9999H3C2.73478 18.9999 2.48043 18.8946 2.29289 18.707C2.10536 18.5195 2 18.2652 2 17.9999V3.99994C2 3.73472 2.10536 3.48037 2.29289 3.29283C2.48043 3.1053 2.73478 2.99994 3 2.99994H9C9.26522 2.99994 9.51957 2.89458 9.70711 2.70705C9.89464 2.51951 10 2.26516 10 1.99994C10 1.73472 9.89464 1.48037 9.70711 1.29283C9.51957 1.1053 9.26522 0.999939 9 0.999939H3C2.20435 0.999939 1.44129 1.31601 0.87868 1.87862C0.316071 2.44123 0 3.20429 0 3.99994V17.9999C0 18.7956 0.316071 19.5587 0.87868 20.1213C1.44129 20.6839 2.20435 20.9999 3 20.9999H17C17.7956 20.9999 18.5587 20.6839 19.1213 20.1213C19.6839 19.5587 20 18.7956 20 17.9999V11.9999C20 11.7347 19.8946 11.4804 19.7071 11.2928C19.5196 11.1053 19.2652 10.9999 19 10.9999ZM4 11.7599V15.9999C4 16.2652 4.10536 16.5195 4.29289 16.707C4.48043 16.8946 4.73478 16.9999 5 16.9999H9.24C9.37161 17.0007 9.50207 16.9755 9.62391 16.9257C9.74574 16.8759 9.85656 16.8026 9.95 16.7099L16.87 9.77994L19.71 6.99994C19.8037 6.90698 19.8781 6.79637 19.9289 6.67452C19.9797 6.55266 20.0058 6.42195 20.0058 6.28994C20.0058 6.15793 19.9797 6.02722 19.9289 5.90536C19.8781 5.7835 19.8037 5.6729 19.71 5.57994L15.47 1.28994C15.377 1.19621 15.2664 1.12182 15.1446 1.07105C15.0227 1.02028 14.892 0.994141 14.76 0.994141C14.628 0.994141 14.4973 1.02028 14.3754 1.07105C14.2536 1.12182 14.143 1.19621 14.05 1.28994L11.23 4.11994L4.29 11.0499C4.19732 11.1434 4.12399 11.2542 4.07423 11.376C4.02446 11.4979 3.99924 11.6283 4 11.7599ZM14.76 3.40994L17.59 6.23994L16.17 7.65994L13.34 4.82994L14.76 3.40994ZM6 12.1699L11.93 6.23994L14.76 9.06994L8.83 14.9999H6V12.1699Z"/>
                                    </svg>
                                </a>
                                <a href="#" wire:click="removeFile('{{$id}}', '{{$index}}')" class="absolute top-0.5 right-2 z-10 transition-all opacity-0 group-hover:opacity-100"><img src="{{ Vite::asset('resources/images/icon-close.svg')}}" width="16" height="16" class="inline-block w-3 h-3" alt="#"></a>
                                <div class="-bottom-full group-hover:bottom-0 left-0 absolute w-full transition-all bg-black/70 text-white text-xs leading-3 p-1.5"> 
                                    @if($image_gallery_descriptions && isset($image_gallery_descriptions[$id]) && isset($image_gallery_descriptions[$id][$index]))
                                    {{$image_gallery_descriptions[$id][$index]}}
                                    @endif
                                </div>
                            </div>

                            
                        </div>
                     
                    @endif

                @else  
            
            
                    <div class="px-2">
                        <div class="w-32 h-32 inline-block border border-dashed border-blue-500 relative group overflow-hidden ">
                            <img src="{{asset('storage/'. $file['image']) }}" width="136" height="136" alt="" class="object-cover object-center w-full h-full block" >
                            <a href="#" 
                            {{-- wire:click="$emit("modalImageDescriptionShowFunc('{{$id}}', '{{$index}}')" --}}
                            wire:click="$emit('modalImageDescriptionShowFunc', '{{$id}}', '{{$index}}', '{{$file['description']}}')"
                            class="absolute top-3  left-3 z-10 transition-all opacity-0 group-hover:opacity-100"> 
                            <svg class=" fill-[#6B7280] hover:fill-blue-500 cursor-pointer" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 10.9999C18.7348 10.9999 18.4804 11.1053 18.2929 11.2928C18.1054 11.4804 18 11.7347 18 11.9999V17.9999C18 18.2652 17.8946 18.5195 17.7071 18.707C17.5196 18.8946 17.2652 18.9999 17 18.9999H3C2.73478 18.9999 2.48043 18.8946 2.29289 18.707C2.10536 18.5195 2 18.2652 2 17.9999V3.99994C2 3.73472 2.10536 3.48037 2.29289 3.29283C2.48043 3.1053 2.73478 2.99994 3 2.99994H9C9.26522 2.99994 9.51957 2.89458 9.70711 2.70705C9.89464 2.51951 10 2.26516 10 1.99994C10 1.73472 9.89464 1.48037 9.70711 1.29283C9.51957 1.1053 9.26522 0.999939 9 0.999939H3C2.20435 0.999939 1.44129 1.31601 0.87868 1.87862C0.316071 2.44123 0 3.20429 0 3.99994V17.9999C0 18.7956 0.316071 19.5587 0.87868 20.1213C1.44129 20.6839 2.20435 20.9999 3 20.9999H17C17.7956 20.9999 18.5587 20.6839 19.1213 20.1213C19.6839 19.5587 20 18.7956 20 17.9999V11.9999C20 11.7347 19.8946 11.4804 19.7071 11.2928C19.5196 11.1053 19.2652 10.9999 19 10.9999ZM4 11.7599V15.9999C4 16.2652 4.10536 16.5195 4.29289 16.707C4.48043 16.8946 4.73478 16.9999 5 16.9999H9.24C9.37161 17.0007 9.50207 16.9755 9.62391 16.9257C9.74574 16.8759 9.85656 16.8026 9.95 16.7099L16.87 9.77994L19.71 6.99994C19.8037 6.90698 19.8781 6.79637 19.9289 6.67452C19.9797 6.55266 20.0058 6.42195 20.0058 6.28994C20.0058 6.15793 19.9797 6.02722 19.9289 5.90536C19.8781 5.7835 19.8037 5.6729 19.71 5.57994L15.47 1.28994C15.377 1.19621 15.2664 1.12182 15.1446 1.07105C15.0227 1.02028 14.892 0.994141 14.76 0.994141C14.628 0.994141 14.4973 1.02028 14.3754 1.07105C14.2536 1.12182 14.143 1.19621 14.05 1.28994L11.23 4.11994L4.29 11.0499C4.19732 11.1434 4.12399 11.2542 4.07423 11.376C4.02446 11.4979 3.99924 11.6283 4 11.7599ZM14.76 3.40994L17.59 6.23994L16.17 7.65994L13.34 4.82994L14.76 3.40994ZM6 12.1699L11.93 6.23994L14.76 9.06994L8.83 14.9999H6V12.1699Z"/>
                                </svg>
                            </a>
                            <a href="#" wire:click="removeFile('{{$id}}', '{{$index}}')" class="absolute top-0.5 right-2 z-10 transition-all opacity-0 group-hover:opacity-100"><img src="{{ Vite::asset('resources/images/icon-close.svg')}}" width="16" height="16" class="inline-block w-3 h-3" alt="#"></a>
                            <div class="-bottom-full group-hover:bottom-0 left-0 absolute w-full transition-all bg-black/70 text-white text-xs leading-3 p-1.5"> {{$file['description']}}
                            </div>

                           
                        </div>
                    </div>

                @endif
            @endforeach
      
        @endif
       
    </div>
    @if ($errors->has('files_uploaded'))
        <small  class="text-red-600">{{ $errors->first('files_uploaded') }}</small>
    @endif
</div>