<?php
$photos = isset($photos) ? $photos : array();
$stores = isset($stores) ? $stores : array();
$staff = isset($staff) ? $staff : array();
?>

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fa-solid fa-camera text-primary me-2"></i>Photo Evidence Gallery</h4>
            <p class="text-muted mb-0">Visual proof submissions captured by store staff for hygiene, prep, and safety tasks.</p>
        </div>
        <div>
            <a href="<?php echo base_url('admin/videos'); ?>" class="btn btn-outline-primary">
                <i class="fa-solid fa-video me-1"></i> Switch to Video Walkthroughs
            </a>
        </div>
    </div>

    <div class="row g-4">
        <?php if (empty($photos)): ?>
            <div class="col-12 text-center py-5 text-muted card border-0 shadow-sm rounded-4">
                <i class="fa-regular fa-images fs-1 opacity-25 mb-3 d-block"></i>
                No photo evidence submitted yet.
            </div>
        <?php else: ?>
            <?php foreach ($photos as $p): ?>
                <?php
                $sName = isset($stores[$p['storeId']]['name']) ? $stores[$p['storeId']]['name'] : (isset($p['storeId']) ? $p['storeId'] : 'Store');
                $staffName = isset($p['staffId']) ? $p['staffId'] : 'Staff';
                ?>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
                        <div class="position-relative" style="height: 200px; background: #f0f2f5;">
                            <img src="<?php echo htmlspecialchars($p['mediaUrl']); ?>" class="w-100 h-100 object-fit-cover" alt="Task Photo" onerror="this.src='https://placehold.co/600x400?text=Photo+Evidence';">
                            <a href="<?php echo htmlspecialchars($p['mediaUrl']); ?>" target="_blank" class="btn btn-sm btn-dark bg-opacity-75 position-absolute top-0 end-0 m-2 rounded-circle p-2" title="Open Full Photo">
                                <i class="fa-solid fa-up-right-from-square"></i>
                            </a>
                        </div>
                        <div class="card-body p-3">
                            <h6 class="fw-bold text-dark text-truncate mb-1"><?php echo htmlspecialchars(isset($p['taskName']) ? $p['taskName'] : 'Check-In Task'); ?></h6>
                            <div class="small text-muted mb-2"><i class="fa-solid fa-store me-1"></i><?php echo htmlspecialchars($sName); ?></div>
                            <div class="d-flex justify-content-between align-items-center small border-top pt-2 text-muted">
                                <span><i class="fa-solid fa-user me-1"></i><?php echo htmlspecialchars($staffName); ?></span>
                                <span><?php echo isset($p['submittedAt']) ? date('M d, h:i A', $p['submittedAt'] / 1000) : '-'; ?></span>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>
