construprogress/resources/views/livewire/media/media-manager.blade.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="{{ __('Optional') }}" />
                    </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"
                                    wire:confirm="{{ __('Delete file confirmation') }}">×</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"
                                    wire:confirm="{{ __('Delete file confirmation') }}">×</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") }}</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>