120 lines
6.0 KiB
PHP
120 lines
6.0 KiB
PHP
<div>
|
||
@if(session()->has('message'))
|
||
<div class="alert alert-success mb-2">{{ session('message') }}</div>
|
||
@endif
|
||
@if(session()->has('error'))
|
||
<div class="alert alert-error mb-2">{{ session('error') }}</div>
|
||
@endif
|
||
|
||
{{-- Subida --}}
|
||
<div class="card bg-base-100 shadow-xl mb-4">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm">{{ __("Upload files") }}</h3>
|
||
|
||
<form wire:submit.prevent="upload" class="space-y-3">
|
||
<div class="form-control">
|
||
<label class="label-text">{{ __("Upload files") }} (100MB {{ __("each") }})</label>
|
||
<input type="file" wire:model="uploadFiles" multiple class="file-input file-input-bordered file-input-sm" />
|
||
@error('uploadFiles.*') <span class="text-error text-xs">{{ $message }}</span> @enderror
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div class="form-control">
|
||
<label class="label-text">{{ __("Category") }}</label>
|
||
<select wire:model="uploadCategory" class="select select-bordered select-sm">
|
||
<option value="image">{{ __("Image") }}</option>
|
||
<option value="document">{{ __("Document") }}</option>
|
||
<option value="other">{{ __("Other") }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label-text">{{ __("Description") }}</label>
|
||
<input type="text" wire:model="uploadDescription" class="input input-bordered input-sm" placeholder="Opcional" />
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary btn-sm w-full">{{ __("Upload files") }}</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Galería de imágenes --}}
|
||
@if($images->isNotEmpty())
|
||
<div class="card bg-base-100 shadow-xl mb-4">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm">{{ __("Images") }} ({{ $images->count() }})</h3>
|
||
<div class="grid grid-cols-3 gap-2">
|
||
@foreach($images as $media)
|
||
<div class="relative group cursor-pointer" wire:click="viewMedia({{ $media->id }})">
|
||
<img src="{{ $media->url }}" alt="{{ $media->name }}"
|
||
class="w-full h-20 object-cover rounded border hover:opacity-80 transition-opacity" />
|
||
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-[10px] px-1 truncate rounded-b">
|
||
{{ $media->name }}
|
||
</div>
|
||
<button wire:click.stop="deleteMedia({{ $media->id }})"
|
||
class="absolute top-0 right-0 bg-error text-white text-xs w-4 h-4 rounded-full opacity-0 group-hover:opacity-100 transition-opacity leading-none"
|
||
onclick="return confirm('¿Borrar {{ $media->name }}?')">×</button>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- {{ __("Document") }}s --}}
|
||
@if($documents->isNotEmpty())
|
||
<div class="card bg-base-100 shadow-xl mb-4">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm">{{ __("Document") }}s ({{ $documents->count() }})</h3>
|
||
<div class="space-y-1">
|
||
@foreach($documents as $media)
|
||
<div class="flex items-center gap-2 p-2 border rounded text-sm hover:bg-base-200">
|
||
<span class="text-lg">
|
||
@switch($media->file_extension)
|
||
@case('pdf') 📄 @break
|
||
@case('doc') @case('docx') 📝 @break
|
||
@case('xls') @case('xlsx') 📊 @break
|
||
@default 📎
|
||
@endswitch
|
||
</span>
|
||
<a href="{{ $media->url }}" target="_blank" class="flex-1 truncate link link-primary">
|
||
{{ $media->name }}
|
||
</a>
|
||
<span class="text-xs text-gray-400">{{ $media->formatted_size }}</span>
|
||
<button wire:click="deleteMedia({{ $media->id }})"
|
||
class="btn btn-xs btn-ghost text-error"
|
||
onclick="return confirm('¿Borrar {{ $media->name }}?')">×</button>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Vacío --}}
|
||
@if($mediaItems->isEmpty())
|
||
<div class="text-center text-gray-400 py-6 text-sm">
|
||
<p class="text-2xl mb-2">📁</p>
|
||
<p>{{ __("No files yet") }}. Sube imágenes o documentos.</p>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Modal visor de imágenes --}}
|
||
@if($showViewer && $viewingMedia)
|
||
<div class="fixed inset-0 z-[5000] bg-black bg-opacity-80 flex items-center justify-center p-4"
|
||
wire:click.self="closeViewer">
|
||
<div class="relative max-w-4xl max-h-[90vh]">
|
||
<button wire:click="closeViewer"
|
||
class="absolute -top-8 right-0 text-white text-2xl hover:text-gray-300 z-10">✕</button>
|
||
<img src="{{ $viewingMedia->url }}" alt="{{ $viewingMedia->name }}"
|
||
class="max-w-full max-h-[85vh] object-contain rounded shadow-2xl" />
|
||
<div class="text-white text-center text-sm mt-2">
|
||
{{ $viewingMedia->name }}
|
||
@if($viewingMedia->description)
|
||
— {{ $viewingMedia->description }}
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div> |