93c977d1f5
some files likely wont be needed and wer added by ai to fix things that were no longer needed !!!
72 lines
4.9 KiB
PHP
72 lines
4.9 KiB
PHP
<div>
|
|
@if($showModal ?? false)
|
|
<div class="fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
<!-- Background overlay -->
|
|
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" wire:click="closePicker()"></div>
|
|
|
|
<!-- Modal panel -->
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-medium text-gray-900">
|
|
Select Image from Gallery
|
|
</h3>
|
|
<button wire:click="closePicker()" class="text-gray-400 hover:text-gray-500">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
@if(empty($mediaItems ?? []))
|
|
<p class="text-center text-gray-500 py-8">No images in gallery</p>
|
|
@else
|
|
<div class="grid grid-cols-3 gap-4 max-h-96 overflow-y-auto">
|
|
@foreach($mediaItems ?? [] as $item)
|
|
<button
|
|
wire:click="selectMedia({{ $item['id'] }})"
|
|
class="relative group overflow-hidden rounded-lg border-2 transition-colors {{ ($selectedMediaId ?? null) === $item['id'] ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}"
|
|
>
|
|
<img
|
|
src="{{ asset('storage/' . $item['disk'] . '/' . $item['id'] . '/' . $item['file_name']) }}"
|
|
alt="{{ $item['name'] ?? $item['file_name'] }}"
|
|
class="w-full h-32 object-cover"
|
|
loading="lazy"
|
|
/>
|
|
@if(($selectedMediaId ?? null) === $item['id'])
|
|
<div class="absolute inset-0 bg-blue-500 bg-opacity-20 flex items-center justify-center">
|
|
<svg class="h-8 w-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-xs px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity truncate">
|
|
{{ $item['name'] ?? $item['file_name'] }}
|
|
</div>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
|
|
<button
|
|
wire:click="copyToEntry"
|
|
:disabled="!($selectedMediaId ?? null)"
|
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed sm:w-auto sm:text-sm"
|
|
>
|
|
Add Image
|
|
</button>
|
|
<button
|
|
wire:click="closePicker()"
|
|
class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|