@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();
@endphp
<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">
        @if($galleries->count())
        <div class="row g-4">
          @foreach($galleries as $g)
            @php $t = $g->translations->first(); @endphp
            <div class="col-md-6 col-lg-4">
              <div class="gallery-card">
                <div class="img-wrap">
                  @if($g->gallery_thumbnail)
                    <img src="{{ image_url($g->gallery_thumbnail) }}" alt="{{ $t?->gallery_translation_title ?? 'Gallery' }}">
                  @else
                    <div class="placeholder"><i class="bi bi-image"></i></div>
                  @endif
                </div>
                <div class="caption">
                  <h4>{{ $t?->gallery_translation_title ?? 'Untitled' }}</h4>
                  @if($t?->gallery_translation_descr)<p>{{ \Illuminate\Support\Str::limit($t->gallery_translation_descr, 100) }}</p>@endif
                </div>
              </div>
            </div>
          @endforeach
        </div>
        @else
        <div class="coming-soon">
          <i class="bi bi-images"></i>
          <h3>No Image</h3>
          <p>There are no images yet.</p>
        </div>
        @endif
      </div>

      <div id="tab-videos" class="tab-content">
        @if($videos->count())
        <div class="row g-4">
          @foreach($videos as $v)
            @php $vt = $v->translations->first(); @endphp
            <div class="col-md-6 col-lg-4">
              <div class="video-card">
                <div class="vid-wrap">
                  @if($v->video_url && str_contains($v->video_url, 'youtube'))
                    <iframe src="https://www.youtube.com/embed/{{ \Illuminate\Support\Str::after($v->video_url, 'v=') }}" frameborder="0" allowfullscreen></iframe>
                  @elseif($v->video_upload)
                    <video controls><source src="{{ Storage::url($v->video_upload) }}" type="video/mp4"></video>
                  @elseif($v->video_external)
                    <iframe src="{{ $v->video_external }}" frameborder="0" allowfullscreen></iframe>
                  @else
                    <div class="placeholder"><i class="bi bi-play-circle" style="font-size:3rem;color:var(--green-200);"></i></div>
                  @endif
                </div>
                <div class="caption">
                  <h4>{{ $vt?->video_translation_title ?? 'Untitled' }}</h4>
                  @if($vt?->video_translation_descr)<p>{{ \Illuminate\Support\Str::limit($vt->video_translation_descr, 100) }}</p>@endif
                </div>
              </div>
            </div>
          @endforeach
        </div>
        @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>
        @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>