Sistema de archivos multimedia: MediaManager, checkbox imágenes en mapa, modal visor, subida por feature/proyecto

resources/views/livewire/projects/project-map.blade.php

@@ -46,8 +46,22 @@
                 @endforeach
             </div>
 
+            {{-- Checkbox imágenes en mapa --}}
+            <div class="mt-3">
+                <label class="flex items-center gap-2 text-xs cursor-pointer">
+                    <input type="checkbox" wire:change="toggleFeatureImages" @if($showFeatureImages) checked @endif class="checkbox checkbox-xs checkbox-primary" />
+                    🖼️ Mostrar imágenes en mapa
+                    @if($featureImageMarkers)
+                        <span class="badge badge-xs">{{ count($featureImageMarkers) }}</span>
+                    @endif
+                </label>
+            </div>
+
             {{-- Botones generales --}}
-            <div class="mt-3 space-y-1">
+            <div class="mt-2 space-y-1">
+                <a href="{{ route('projects.media', $project) }}" class="btn btn-sm btn-outline w-full">
+                    📁 Archivos del proyecto
+                </a>
                 <button wire:click="$dispatch('centerMap')" class="btn btn-sm btn-outline w-full">
                     📍 Centrar mapa
                 </button>
@@ -95,6 +109,19 @@
                         💾 Guardar progreso
                     </button>
 
+                    {{-- Gestor de archivos del feature --}}
+                    <details class="mb-3 border rounded-lg">
+                        <summary class="text-xs font-semibold cursor-pointer p-2 bg-base-200 rounded-t-lg">
+                            📎 Archivos del elemento
+                        </summary>
+                        <div class="p-2">
+                            @livewire('media-manager', [
+                                'mediableType' => 'App\\Models\\Feature',
+                                'mediableId' => $selectedFeature->id,
+                            ], key('media-feature-' . $selectedFeature->id))
+                        </div>
+                    </details>
+
                     {{-- Templates / Inspecciones --}}
                     @if($templates->isNotEmpty())
                         <div class="divider text-xs">Inspección</div>
@@ -190,6 +217,8 @@
 <script>
     let map;
     const layers = {};
+    let imageMarkersLayer = null;
+    let imageViewerModal = null;
 
     function initMap() {
         if (map) return;
@@ -301,6 +330,46 @@
 
         Livewire.on('centerMap', zoomToAllFeatures);
         Livewire.on('mapResize', () => { if (map) setTimeout(() => map.invalidateSize(), 100); });
+
+        // Toggle imágenes en mapa
+        Livewire.on('featureImagesToggled', (show, markers) => {
+            const m = Array.isArray(markers) ? markers : markers[1];
+            const s = Array.isArray(show) ? show[0] : show;
+            if (imageMarkersLayer) { map.removeLayer(imageMarkersLayer); imageMarkersLayer = null; }
+            if (s && m && m.length > 0) {
+                imageMarkersLayer = L.layerGroup().addTo(map);
+                const photoIcon = L.divIcon({
+                    html: '<span style="font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));">🖼️</span>',
+                    className: '',
+                    iconSize: [20, 20],
+                    iconAnchor: [10, 10]
+                });
+                m.forEach(marker => {
+                    const popupContent = `<b>${marker.name}</b><br>
+                                         <img src="${marker.image_url}" class="max-w-[200px] max-h-[150px] rounded cursor-pointer"
+                                              onclick="window.openViewer('${marker.image_url}', '${marker.image_name}')" />`;
+                    L.marker([marker.lat, marker.lng], { icon: photoIcon })
+                        .bindPopup(popupContent)
+                        .addTo(imageMarkersLayer);
+                });
+            }
+        });
+
+        // Modal para ver imagen al hacer clic
+        window.openViewer = function(url, name) {
+            if (imageViewerModal) imageViewerModal.remove();
+            const overlay = document.createElement('div');
+            overlay.id = 'imageViewerModal';
+            overlay.style.cssText = 'position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;padding:20px;cursor:pointer';
+            overlay.innerHTML = `<div style="position:relative;max-width:90vw;max-height:90vh">
+                <button onclick="this.closest('#imageViewerModal').remove()" style="position:absolute;top:-30px;right:0;color:white;font-size:24px;background:none;border:none;cursor:pointer">✕</button>
+                <img src="${url}" alt="${name}" style="max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5)" />
+                <p style="color:white;text-align:center;margin-top:8px;font-size:14px">${name}</p>
+            </div>`;
+            overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+            document.body.appendChild(overlay);
+            imageViewerModal = overlay;
+        };
     });
 </script>
 @endpush