From c66b8959484f9e1e655d2eaa65e3713bd6c63248 Mon Sep 17 00:00:00 2001
From: Vasyka <vasyka.moraru@gmail.com>
Date: Tue, 8 Sep 2026 12:21:37 +0000
Subject: [PATCH] feat: photo lightbox with prev/next navigation on dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace link-to-new-tab with Alpine.js lightbox overlay. Clicking a
thumbnail opens a full-screen dark overlay with the full-size image,
prev/next arrows (keyboard ←/→ supported), counter, and close button
(ESC or ✕ or click outside). No external libraries.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pages/work-order-dashboard.blade.php      | 102 ++++++++++++------
 1 file changed, 72 insertions(+), 30 deletions(-)

diff --git a/resources/views/filament/tenant/pages/work-order-dashboard.blade.php b/resources/views/filament/tenant/pages/work-order-dashboard.blade.php
index cc8079a..6e52e80 100644
--- a/resources/views/filament/tenant/pages/work-order-dashboard.blade.php
+++ b/resources/views/filament/tenant/pages/work-order-dashboard.blade.php
@@ -697,38 +697,80 @@
                 <div x-show="tab === 'photos'" x-cloak>
                     @php $photos = $wo->getMedia('photos'); @endphp
 
-                    {{-- Upload --}}
-                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;">
-                        <label style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;">
-                            📎 {{ __('Alege foto') }}
-                            <input type="file" wire:model="newPhotos" multiple accept="image/*" style="display:none;">
-                        </label>
-                        @if (!empty($newPhotos))
-                            <button type="button" wire:click="uploadPhotos" class="wd-btn wd-btn-primary">
-                                ⬆ {{ __('Încarcă') }} ({{ count($newPhotos) }})
-                            </button>
-                            <span wire:loading wire:target="newPhotos" style="font-size:.8rem;color:#6b7280;">{{ __('Se procesează...') }}</span>
-                        @endif
-                    </div>
+                    {{-- Lightbox + Gallery --}}
+                    <div x-data="{
+                        open: false,
+                        idx: 0,
+                        urls: {{ $photos->map(fn($p) => $p->getFullUrl())->values()->toJson() }},
+                        show(i) { this.idx = i; this.open = true; },
+                        prev() { this.idx = (this.idx - 1 + this.urls.length) % this.urls.length; },
+                        next() { this.idx = (this.idx + 1) % this.urls.length; },
+                    }"
+                    @keydown.escape.window="open = false"
+                    @keydown.arrow-left.window="open && prev()"
+                    @keydown.arrow-right.window="open && next()">
 
-                    {{-- Gallery --}}
-                    @if ($photos->isNotEmpty())
-                        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;">
-                            @foreach ($photos as $ph)
-                                <div style="position:relative;">
-                                    <a href="{{ $ph->getFullUrl() }}" target="_blank">
-                                        <img src="{{ $ph->getFullUrl() }}" style="width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--wd-border);">
-                                    </a>
-                                    <button type="button"
-                                            wire:click="deletePhoto({{ $ph->id }})"
-                                            wire:confirm="{{ __('Șterge fotografia?') }}"
-                                            style="position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:12px;cursor:pointer;line-height:1;">✕</button>
-                                </div>
-                            @endforeach
+                        {{-- Upload bar --}}
+                        <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;">
+                            <label style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;">
+                                📎 {{ __('Alege foto') }}
+                                <input type="file" wire:model="newPhotos" multiple accept="image/*" style="display:none;">
+                            </label>
+                            @if (!empty($newPhotos))
+                                <button type="button" wire:click="uploadPhotos" class="wd-btn wd-btn-primary">
+                                    ⬆ {{ __('Încarcă') }} ({{ count($newPhotos) }})
+                                </button>
+                                <span wire:loading wire:target="newPhotos" style="font-size:.8rem;color:#6b7280;">{{ __('Se procesează...') }}</span>
+                            @endif
                         </div>
-                    @else
-                        <div class="wd-empty">{{ __('Nicio fotografie') }}</div>
-                    @endif
+
+                        {{-- Thumbnail grid --}}
+                        @if ($photos->isNotEmpty())
+                            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;">
+                                @foreach ($photos as $i => $ph)
+                                    <div style="position:relative;">
+                                        <button type="button" @click="show({{ $i }})"
+                                            style="display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;">
+                                            <img src="{{ $ph->getFullUrl() }}"
+                                                style="width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--wd-border);transition:opacity .15s;"
+                                                @mouseenter="$el.style.opacity='.82'" @mouseleave="$el.style.opacity='1'">
+                                        </button>
+                                        <button type="button"
+                                                wire:click="deletePhoto({{ $ph->id }})"
+                                                wire:confirm="{{ __('Șterge fotografia?') }}"
+                                                style="position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:12px;cursor:pointer;line-height:1;">✕</button>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                            <div class="wd-empty">{{ __('Nicio fotografie') }}</div>
+                        @endif
+
+                        {{-- Lightbox overlay --}}
+                        <div x-show="open" x-cloak
+                             style="position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;"
+                             @click.self="open = false">
+
+                            {{-- Prev --}}
+                            <button type="button" @click="prev()" x-show="urls.length > 1"
+                                style="position:absolute;left:16px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#8249;</button>
+
+                            {{-- Image --}}
+                            <img :src="urls[idx]"
+                                 style="max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6);">
+
+                            {{-- Next --}}
+                            <button type="button" @click="next()" x-show="urls.length > 1"
+                                style="position:absolute;right:16px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#8250;</button>
+
+                            {{-- Close --}}
+                            <button type="button" @click="open = false"
+                                style="position:absolute;top:14px;right:18px;background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#10005;</button>
+
+                            {{-- Counter --}}
+                            <div style="position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.85rem;" x-text="(idx+1) + ' / ' + urls.length" x-show="urls.length > 1"></div>
+                        </div>
+                    </div>
                 </div>
 
                 {{-- ── DOCUMENTS TAB ── --}}