@props(['imagesSelected','isMulti','fieldName'])

<div x-data="{openModal:false,type:'upload' }">
    <div class="grid grid-cols-3 gap-3 px-4 mb-4" id="imgs-{{$fieldName}}">
        @foreach ($imagesSelected as $image)
            <img class="rounded-lg" src="{{$image->path}}"/>
        @endforeach

    </div>
    <div class="block text-center -mt-8 text-gray-500" id="imgs-{{$fieldName}}-none"
         @if(count($imagesSelected)>0) style="display: none" @endif>
        <i class="mdi mdi-image-search-outline mdi-48px"></i>
        <h6 class="font-bold text-xl">
            {{ __('Image Not Selected') }}
        </h6>
    </div>
    <div class="flex justify-center mt-2">
        <a @click="openModal=true" class="text-center text-button cursor-pointer border-b border-button border-dashed">
            {{ __('Select Image') }}
        </a>
    </div>
    <div x-show="openModal" class="bg-black bg-opacity-25 h-screen fixed top-0 left-0 w-full"></div>
    <template x-if="openModal">
        <div
             class="md:w-10/12 w-11/12 xl:h-600 md:h-400 h-400 top-1/2 md:px-4 rounded-lg py-4 bg-white fixed  transform -translate-y-1/2 bottom-auto mx-auto left-0 right-0">
            <div
                class="absolute top-0 right-0 flex items-center w-full md:w-auto justify-between z-10 -mt-10 ms-3 z-50">
                <div class="flex items-center">
                    <div @click="type='upload'"
                         :class="{ 'bg-white': type === 'upload', 'bg-gray-200' : type !== 'upload' }"
                         class=" rounded-t-lg cursor-pointer py-2 px-6 transition duration-300 ease-in-out">
                        {{ __('Upload Image') }}
                    </div>
                    <div @click="type='gallery'" id="ar-btn-tb"
                         :class="{ 'bg-white': type === 'gallery', 'bg-gray-200' : type !== 'gallery' }"
                         class="rounded-t-lg cursor-pointer py-2 px-6  transition duration-300 ease-in-out">
                        {{ __('Gallery') }}
                    </div>
                </div>
                <button @click="openModal=false" id="cls-btn-{{$fieldName}}"
                        class="w-10 h-10 md:hidden cursor-pointer z-50 rounded-full bg-white text-gray-400 flex items-center justify-center -mt-2 me-3 z-50">
                    <i class="mdi mdi-close mdi-24px"></i>
                </button>
            </div>
            <div class="-mt-10 hidden md:block md:me-3 absolute top-0 left-0">
                <button @click="openModal=false"
                        class="w-10 h-10 cursor-pointer z-50 rounded-full bg-white text-gray-400   flex items-center justify-center -mt-2 me-3 z-50">
                    <i class="mdi mdi-close mdi-24px"></i>
                </button>
            </div>
            <template x-if="type==='upload'">
                <div class="h-full px-2">
                    <x-wm-admin::gallery.upload :isMulti="$isMulti"
                                                :fieldName="$fieldName"></x-wm-admin::gallery.upload>
                </div>
            </template>
            <template class="w-full" x-if="type==='gallery'">
                <div class="w-full h-full">
                    <x-wm-admin::gallery.gallery :isMulti="$isMulti" :fieldName="$fieldName"
                                                 :imageSelected="$imagesSelected"></x-wm-admin::gallery.gallery>
                </div>
            </template>

        </div>
    </template>
</div>