73 lines
4.9 KiB
PHP
73 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>
|