{{-- Geo-tagged location photos uploaded from the mobile field app --}}
@php
    $photos = $pciLocationPhotos ?? collect();
@endphp
@if($photos->isNotEmpty())
<div class="pci-loc-photos-section" style="margin-top:1.25rem;margin-bottom:1.25rem;">
    <h6 style="font-weight:600;margin-bottom:0.75rem;">
        <i class="fa fa-camera" style="margin-right:0.35rem;"></i>
        Field Location Photos
        <span class="badge badge-secondary" style="font-size:0.75rem;vertical-align:middle;">{{ $photos->count() }}</span>
    </h6>
    <div class="pci-loc-photos-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.75rem;">
        @foreach($photos as $photo)
            @php
                $photoUrl = route('pc-forms.location-photo', ['photo' => $photo->id]);
                $locName = trim((string) ($photo->name_of_location ?? ''));
                $lat = $photo->latitude ? number_format((float) $photo->latitude, 6) : '';
                $lng = $photo->longitude ? number_format((float) $photo->longitude, 6) : '';
                $gps = ($lat && $lng) ? "{$lat}, {$lng}" : '';
                $capturedAt = $photo->captured_at ? $photo->captured_at->format('d M Y, h:i A') : '';
            @endphp
            <div class="pci-loc-photo-card"
                 style="border:1px solid #dee2e6;border-radius:6px;overflow:hidden;cursor:pointer;background:#f8f9fa;transition:box-shadow .15s;"
                 onclick="pciLocPhotoLightbox.open(this)"
                 data-photo-url="{{ $photoUrl }}"
                 data-loc-name="{{ e($locName) }}"
                 data-gps="{{ e($gps) }}"
                 data-captured="{{ e($capturedAt) }}"
                 data-original-name="{{ e($photo->original_name ?? '') }}">
                <div style="width:100%;height:130px;overflow:hidden;background:#e9ecef;">
                    <img src="{{ $photoUrl }}?inline=1" alt="{{ e($locName ?: 'Location photo') }}"
                         loading="lazy"
                         style="width:100%;height:100%;object-fit:cover;">
                </div>
                @if($locName || $gps)
                <div style="padding:0.35rem 0.5rem;font-size:0.75rem;line-height:1.3;">
                    @if($locName)
                        <div style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="{{ e($locName) }}">
                            <i class="fa fa-map-marker-alt" style="color:#dc3545;margin-right:2px;"></i>{{ $locName }}
                        </div>
                    @endif
                    @if($gps)
                        <div style="color:#6c757d;font-size:0.7rem;">{{ $gps }}</div>
                    @endif
                </div>
                @endif
            </div>
        @endforeach
    </div>
</div>

{{-- Lightbox (one per page) --}}
<div id="pciLocPhotoLightbox" style="display:none;position:fixed;inset:0;z-index:10050;align-items:center;justify-content:center;padding:1rem;">
    <div style="position:absolute;inset:0;background:rgba(15,23,42,0.82);" onclick="pciLocPhotoLightbox.close()"></div>
    <div style="position:relative;max-width:min(92vw,900px);max-height:90vh;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.25);display:flex;flex-direction:column;">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:0.625rem 1rem;border-bottom:1px solid #dee2e6;font-size:0.8125rem;font-weight:600;background:#f8f9fa;">
            <span id="pciLocLb_title">Photo</span>
            <button type="button" onclick="pciLocPhotoLightbox.close()" style="background:none;border:none;font-size:1.25rem;cursor:pointer;padding:0 0.25rem;line-height:1;">&times;</button>
        </div>
        <div style="padding:0.5rem;overflow:auto;text-align:center;flex:1;">
            <img id="pciLocLb_img" src="" alt="Location photo" style="max-width:100%;max-height:calc(90vh - 8rem);object-fit:contain;">
        </div>
        <div id="pciLocLb_meta" style="padding:0.5rem 1rem 0.75rem;border-top:1px solid #dee2e6;font-size:0.78rem;color:#495057;background:#f8f9fa;"></div>
    </div>
</div>
<script>
window.pciLocPhotoLightbox = {
    el: null,
    init: function() { this.el = document.getElementById('pciLocPhotoLightbox'); },
    open: function(card) {
        if (!this.el) this.init();
        var url = card.getAttribute('data-photo-url') + '?inline=1';
        var loc = card.getAttribute('data-loc-name') || '';
        var gps = card.getAttribute('data-gps') || '';
        var captured = card.getAttribute('data-captured') || '';
        var origName = card.getAttribute('data-original-name') || '';
        document.getElementById('pciLocLb_img').src = url;
        document.getElementById('pciLocLb_title').textContent = loc || origName || 'Location Photo';
        var meta = [];
        if (loc) meta.push('<i class="fa fa-map-marker-alt" style="color:#dc3545"></i> ' + loc);
        if (gps) meta.push('<i class="fa fa-crosshairs"></i> GPS: ' + gps);
        if (captured) meta.push('<i class="fa fa-clock"></i> ' + captured);
        document.getElementById('pciLocLb_meta').innerHTML = meta.join(' &nbsp;|&nbsp; ');
        this.el.style.display = 'flex';
    },
    close: function() {
        if (this.el) {
            this.el.style.display = 'none';
            document.getElementById('pciLocLb_img').src = '';
        }
    }
};
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') pciLocPhotoLightbox.close(); });
</script>
@endif