@php
    $imgs = array_values(array_filter(array_map('trim', explode(',', $images ?? ''))));
    $fw = $full_width ?? false;
    $gid = 'glb_' . substr(md5(implode(',', $imgs)), 0, 8);
@endphp
@if(count($imgs))
<div style="{{ $fw ? 'padding:32px 0;' : 'max-width:1100px; margin:0 auto; padding:32px 20px;' }}">
    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:12px;" id="{{ $gid }}">
        @foreach($imgs as $i => $img)
        <div style="overflow:hidden; border-radius:8px; aspect-ratio:1; background:#f3f4f6; cursor:zoom-in;"
             onclick="newsGalleryOpen('{{ $gid }}', {{ $i }})">
            <img src="{{ $img }}" alt="" style="width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s;"
                 onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
        </div>
        @endforeach
    </div>
</div>

{{-- Lightbox --}}
<div id="{{ $gid }}_lb" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.92); align-items:center; justify-content:center;"
     onclick="if(event.target===this)newsGalleryClose('{{ $gid }}')">
    <button onclick="newsGalleryClose('{{ $gid }}')"
            style="position:absolute; top:16px; right:20px; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; line-height:1; opacity:0.8;"
            onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">✕</button>
    <button onclick="newsGalleryNav('{{ $gid }}',-1)"
            style="position:absolute; left:16px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.12); border:none; color:#fff; font-size:28px; cursor:pointer; padding:12px 16px; border-radius:8px; line-height:1;"
            onmouseover="this.style.background='rgba(255,255,255,0.22)'" onmouseout="this.style.background='rgba(255,255,255,0.12)'">‹</button>
    <img id="{{ $gid }}_img" src="" alt=""
         style="max-width:90vw; max-height:88vh; object-fit:contain; border-radius:6px; box-shadow:0 8px 48px rgba(0,0,0,0.6);">
    <button onclick="newsGalleryNav('{{ $gid }}',1)"
            style="position:absolute; right:16px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.12); border:none; color:#fff; font-size:28px; cursor:pointer; padding:12px 16px; border-radius:8px; line-height:1;"
            onmouseover="this.style.background='rgba(255,255,255,0.22)'" onmouseout="this.style.background='rgba(255,255,255,0.12)'">›</button>
    <div id="{{ $gid }}_counter"
         style="position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.6); font-size:13px;"></div>
</div>

<script>
(function(){
    window._glbReg = window._glbReg || {};
    window._glbCur = window._glbCur || 0;
    window._glbId  = window._glbId  || null;
    window._glbReg['{{ $gid }}'] = @json($imgs);

    if (!window.newsGalleryOpen) {
        window.newsGalleryOpen = function(id, i) {
            window._glbId = id; window._glbCur = i;
            var imgs = window._glbReg[id];
            document.getElementById(id+'_lb').style.display = 'flex';
            document.getElementById(id+'_img').src = imgs[i];
            document.getElementById(id+'_counter').textContent = (i+1)+' / '+imgs.length;
            document.body.style.overflow = 'hidden';
        };
        window.newsGalleryClose = function(id) {
            document.getElementById(id+'_lb').style.display = 'none';
            document.body.style.overflow = '';
            window._glbId = null;
        };
        window.newsGalleryNav = function(id, dir) {
            var imgs = window._glbReg[id];
            window._glbCur = (window._glbCur + dir + imgs.length) % imgs.length;
            document.getElementById(id+'_img').src = imgs[window._glbCur];
            document.getElementById(id+'_counter').textContent = (window._glbCur+1)+' / '+imgs.length;
        };
        document.addEventListener('keydown', function(e) {
            var id = window._glbId; if (!id) return;
            if (e.key === 'Escape') newsGalleryClose(id);
            if (e.key === 'ArrowLeft') newsGalleryNav(id, -1);
            if (e.key === 'ArrowRight') newsGalleryNav(id, 1);
        });
    }
})();
</script>
@endif
