<?php $__env->startSection('header', 'Galeri Dokumentasi Program'); ?>

<?php $__env->startSection('content'); ?>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="p-6 border-b border-gray-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h3 class="text-lg font-semibold text-gray-800">Semua Foto Dokumentasi</h3>
            <p class="text-sm text-gray-500">Kumpulan dokumentasi monitoring dan distribusi bantuan di lapangan.</p>
        </div>
        <div class="flex items-center space-x-2">
            <span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs font-bold rounded-full"><?php echo e($documentations->total()); ?> FOTO</span>
        </div>
    </div>

    <div class="p-6">
        <?php if($documentations->count() > 0): ?>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            <?php $__currentLoopData = $documentations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $doc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="group relative bg-gray-50 rounded-2xl overflow-hidden border border-gray-100 shadow-sm transition-all hover:shadow-md">
                <div class="aspect-square overflow-hidden">
                    <img src="<?php echo e(asset('storage/' . $doc->file_path)); ?>" class="w-full h-full object-cover transition duration-500 group-hover:scale-110" alt="Documentation photo">
                </div>
                
                <div class="p-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-[10px] font-bold rounded uppercase">
                            <?php echo e($doc->type ?? 'Dokumentasi'); ?>

                        </span>
                        <span class="text-[10px] text-gray-400">
                            <?php echo e(date('d M Y', strtotime($doc->created_at))); ?>

                        </span>
                    </div>
                    <h4 class="text-sm font-bold text-gray-800 truncate"><?php echo e($doc->beneficiary->name); ?></h4>
                    <p class="text-[11px] text-gray-500 mt-1 flex items-center">
                        <i class="fas fa-location-dot mr-1 text-primary"></i> <?php echo e($doc->beneficiary->village); ?>

                    </p>
                </div>
                
                <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
                    <div class="bg-white p-3 rounded-full shadow-lg">
                        <i class="fas fa-search-plus text-primary"></i>
                    </div>
                </div>
                <a href="<?php echo e(asset('storage/' . $doc->file_path)); ?>" target="_blank" class="absolute inset-0 z-10"></a>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        
        <div class="mt-8">
            <?php echo e($documentations->links()); ?>

        </div>
        <?php else: ?>
        <div class="text-center py-20">
            <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-camera text-gray-300 text-3xl"></i>
            </div>
            <h4 class="text-lg font-medium text-gray-400">Belum Ada Dokumentasi</h4>
            <p class="text-gray-500 text-sm mt-2">Foto hasil monitoring lapangan akan muncul di sini.</p>
        </div>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/sumba001/public_html/pom500.sumbatengahkab.go.id/resources/views/documentation/1index.blade.php ENDPATH**/ ?>