Your IP : 216.73.216.79
<?php
$galleries = \App\Models\Backend\ContentPhotoGallery::with(['translations','photoLists'])
->where('gallery_status', 'ACTIVE')
->where('gallery_portal', 'redd-plus')
->orderBy('gallery_sort')
->orderBy('gallery_date', 'desc')
->get();
$videos = \App\Models\Backend\ContentVideo::with('translations')->where('video_page', 'redd-plus')->where('video_status', 'ACTIVE')->orderBy('video_sorting')->get();
?>
<style>
.page-hero{background:linear-gradient(135deg,var(--green-800),var(--green-900));padding:3rem 0;color:#fff;margin-bottom:0;}
.page-hero h1{font-weight:700;font-size:clamp(2rem,4vw,2.8rem);}
.page-hero p{font-size:1rem;font-weight:500;max-width:400px;opacity:.9;}
.gallery-section{padding:3rem 0;background:var(--cream);min-height:50vh;}
.tab-bar{display:flex;gap:0;margin-bottom:2rem;border-bottom:2px solid #e8e4d8;}
.tab-btn{padding:.75rem 2rem;font-weight:600;font-size:.9rem;color:#6c7a6e;cursor:pointer;border:none;background:none;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s}
.tab-btn:hover{color:var(--green-800);}
.tab-btn.active{color:var(--green-800);border-bottom-color:var(--green-800);}
.tab-content{display:none}
.tab-content.active{display:block}
.gallery-card{border-radius:.75rem;overflow:hidden;background:#fff;border:1px solid #ece8db;height:100%;transition:transform .2s ease,box-shadow .2s ease}
.gallery-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(46,74,53,.12)}
.gallery-card .img-wrap{height:220px;background:var(--green-100);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.gallery-card .img-wrap img{width:100%;height:100%;object-fit:cover;}
.gallery-card .img-wrap .placeholder{font-size:3rem;color:var(--green-200);}
.gallery-card .caption{padding:1rem 1.25rem;}
.gallery-card .caption h4{font-weight:700;font-size:.9rem;color:var(--green-800);margin-bottom:.2rem;}
.gallery-card .caption p{font-size:.8rem;font-weight:500;color:#5b6a5e;margin:0;line-height:1.5;}
.video-card{border-radius:.75rem;overflow:hidden;background:#fff;border:1px solid #ece8db;height:100%;transition:transform .2s ease,box-shadow .2s ease}
.video-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(46,74,53,.12)}
.video-card .vid-wrap{height:220px;background:#1a1a2e;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.video-card .vid-wrap iframe,.video-card .vid-wrap video{width:100%;height:100%;object-fit:cover}
.video-card .vid-wrap .play-icon{position:absolute;width:56px;height:56px;background:rgba(0,0,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;border:2px solid rgba(255,255,255,.6);cursor:pointer;transition:all .2s}
.video-card .vid-wrap .play-icon:hover{background:rgba(0,0,0,.7);transform:scale(1.05)}
.video-card .caption{padding:1rem 1.25rem;}
.video-card .caption h4{font-weight:700;font-size:.9rem;color:var(--green-800);margin-bottom:.2rem;}
.video-card .caption p{font-size:.8rem;font-weight:500;color:#5b6a5e;margin:0;line-height:1.5;}
.coming-soon{text-align:center;padding:4rem 2rem;color:#8a9a8e}
.coming-soon i{font-size:3.5rem;color:var(--green-200);display:block;margin-bottom:1rem}
.coming-soon h3{font-weight:600;color:var(--green-700);margin-bottom:.5rem}
.coming-soon p{font-size:.9rem;font-weight:500;margin:0}
.footer-pages{padding:2rem 0 1.5rem;border-top:1px solid #ece8db;background:#fff;}
.footer-pages a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem;}
.footer-pages a:hover{color:var(--green-800);}
.footer-pages .bi{color:var(--green-800);}
.f-divider{width:1px;height:26px;background:#cfc9b8;}
</style>
<div style="min-height:calc(100vh - 64px);background:#fff;">
<header class="page-hero">
<div class="container">
<h1>Gallery</h1>
<p>Photos and videos showcasing REDD+ Malaysia activities and initiatives.</p>
</div>
</header>
<div class="gallery-section">
<div class="container">
<div class="tab-bar" id="tabBar">
<button class="tab-btn active" data-tab="photos">Photos</button>
<button class="tab-btn" data-tab="videos">Videos</button>
</div>
<div id="tab-photos" class="tab-content active">
<?php if($galleries->count()): ?>
<div class="row g-4">
<?php $__currentLoopData = $galleries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $g): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php $t = $g->translations->first(); ?>
<div class="col-md-6 col-lg-4">
<div class="gallery-card">
<div class="img-wrap">
<?php if($g->gallery_thumbnail): ?>
<img src="<?php echo e(image_url($g->gallery_thumbnail)); ?>" alt="<?php echo e($t?->gallery_translation_title ?? 'Gallery'); ?>">
<?php else: ?>
<div class="placeholder"><i class="bi bi-image"></i></div>
<?php endif; ?>
</div>
<div class="caption">
<h4><?php echo e($t?->gallery_translation_title ?? 'Untitled'); ?></h4>
<?php if($t?->gallery_translation_descr): ?><p><?php echo e(\Illuminate\Support\Str::limit($t->gallery_translation_descr, 100)); ?></p><?php endif; ?>
</div>
</div>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php else: ?>
<div class="coming-soon">
<i class="bi bi-images"></i>
<h3>No Image</h3>
<p>There are no images yet.</p>
</div>
<?php endif; ?>
</div>
<div id="tab-videos" class="tab-content">
<?php if($videos->count()): ?>
<div class="row g-4">
<?php $__currentLoopData = $videos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php $vt = $v->translations->first(); ?>
<div class="col-md-6 col-lg-4">
<div class="video-card">
<div class="vid-wrap">
<?php if($v->video_url && str_contains($v->video_url, 'youtube')): ?>
<iframe src="https://www.youtube.com/embed/<?php echo e(\Illuminate\Support\Str::after($v->video_url, 'v=')); ?>" frameborder="0" allowfullscreen></iframe>
<?php elseif($v->video_upload): ?>
<video controls><source src="<?php echo e(Storage::url($v->video_upload)); ?>" type="video/mp4"></video>
<?php elseif($v->video_external): ?>
<iframe src="<?php echo e($v->video_external); ?>" frameborder="0" allowfullscreen></iframe>
<?php else: ?>
<div class="placeholder"><i class="bi bi-play-circle" style="font-size:3rem;color:var(--green-200);"></i></div>
<?php endif; ?>
</div>
<div class="caption">
<h4><?php echo e($vt?->video_translation_title ?? 'Untitled'); ?></h4>
<?php if($vt?->video_translation_descr): ?><p><?php echo e(\Illuminate\Support\Str::limit($vt->video_translation_descr, 100)); ?></p><?php endif; ?>
</div>
</div>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php else: ?>
<div class="coming-soon">
<i class="bi bi-camera-reels"></i>
<h3>Coming Soon</h3>
<p>Video gallery is being prepared. Stay tuned for updates on REDD+ Malaysia activities.</p>
</div>
<?php endif; ?>
</div>
</div>
</div>
<style>
.footer-redd-article {
background: url('/assets/redd-plus/faq_footer_bg.png') center bottom/cover no-repeat;
padding: 4rem 0 2.5rem;
}
.footer-redd-article a {
color: var(--ink); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.footer-redd-article a:hover { color: var(--green-800); }
.footer-redd-article .bi { color: var(--green-800); font-size: 1.1rem; }
.footer-redd-article .f-divider { width: 1px; height: 26px; background: #cfc9b8; }
</style>
<footer class="footer-redd-article">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center gap-4">
<img src="/assets/redd-plus/logo.png" alt="REDD+ Malaysia" height="46">
<span class="f-divider d-none d-md-inline-block"></span>
<a href="https://redd.nres.gov.my"><i class="bi bi-globe2"></i> redd.nres.gov.my</a>
<span class="f-divider d-none d-md-inline-block"></span>
<a href="mailto:redd@nres.gov.my"><i class="bi bi-envelope"></i> redd@nres.gov.my</a>
<span class="f-divider d-none d-md-inline-block"></span>
<a href="tel:+60380008000"><i class="bi bi-telephone"></i> +603 8000 8000</a>
</div>
</div>
</footer>
</div>
<script>
document.getElementById('tabBar').addEventListener('click', function(e) {
var btn = e.target.closest('.tab-btn');
if (!btn) return;
var tab = btn.dataset.tab;
document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.remove('active'); });
document.querySelectorAll('.tab-btn').forEach(function(el) { el.classList.remove('active'); });
document.getElementById('tab-' + tab).classList.add('active');
btn.classList.add('active');
});
</script><?php /**PATH /var/www/html/reddsis/storage/framework/views/e25f54b141f7731742d50af17ae49cc1.blade.php ENDPATH**/ ?>