@php
$code = request()->query('id');
@endphp
@if($code)
@php
$gallery = \App\Models\Backend\ContentPhotoGallery::with('translations')
    ->where('gallery_code', $code)
    ->where('gallery_status', 'ACTIVE')
    ->first();
@endphp
@if($gallery)
@php
$gt = $gallery->translations->firstWhere('gallery_translation_language', $lang) ?? $gallery->translations->first();
$photos = \App\Models\Backend\ContentPhotoList::where('photo_gallery_id', $gallery->gallery_id)
    ->where(function ($q) { $q->whereNull('photo_main')->orWhere('photo_main', '1'); })
    ->orderBy('photo_sort')
    ->orderBy('photo_id')
    ->get();
$photoTrans = \App\Models\Backend\ContentPhotoList::where('photo_gallery_id', $gallery->gallery_id)
    ->where('photo_language', $lang)
    ->whereNotNull('photo_parent_id')
    ->pluck('photo_descr', 'photo_parent_id');
@endphp
<section class="galeri-detail">
    <div class="container">
        <div class="galeri-breadcrumb">
            <a href="/{{ $siteSlug }}">Utama</a>
            <span class="sep">/</span>
            <a href="{{ request()->url() }}">Galeri</a>
            <span class="sep">/</span>
            <span class="current">{{ $gt?->gallery_translation_title ?? $gallery->gallery_code }}</span>
        </div>

        <div class="galeri-detail-header">
            <h1 class="galeri-detail-title">{{ $gt?->gallery_translation_title ?? 'Galeri' }}</h1>
            @if($gt?->gallery_translation_descr)
            <p class="galeri-detail-subtitle">{{ $gt->gallery_translation_descr }}</p>
            @endif
            <p class="galeri-detail-count">{{ $photos->count() }} gambar</p>
        </div>

        @if($photos->count())
        <div class="galeri-photo-grid">
            @foreach($photos as $p)
            @php $cap = $photoTrans[$p->photo_id] ?? $p->photo_descr; @endphp
            <figure class="galeri-photo">
                <a href="{{ image_url($p->photo_url) }}" target="_blank" rel="noopener">
                    <img src="{{ image_url($p->photo_url) }}" alt="{{ $cap }}" loading="lazy">
                </a>
                @if($cap)<figcaption>{{ $cap }}</figcaption>@endif
            </figure>
            @endforeach
        </div>
        @else
        <p class="galeri-empty">Tiada gambar dalam galeri ini.</p>
        @endif

        <div class="galeri-back">
            <a href="{{ request()->url() }}" class="btn-back"><i class="fas fa-arrow-left"></i> Kembali ke Galeri</a>
        </div>
    </div>
</section>

<style>
.galeri-detail { padding: 50px 0 80px; background: var(--gray-50); min-height: 60vh; }
.galeri-breadcrumb { font-size: 0.82rem; color: var(--gray-400); margin-bottom: 26px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.galeri-breadcrumb a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
.galeri-breadcrumb a:hover { color: var(--accent); }
.galeri-breadcrumb .sep { color: var(--gray-300); }
.galeri-breadcrumb .current { color: var(--gray-500); font-weight: 500; }
.galeri-detail-header { text-align: center; margin-bottom: 40px; }
.galeri-detail-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }
.galeri-detail-subtitle { color: var(--gray-500); font-size: 1rem; margin: 0 0 8px; }
.galeri-detail-count { color: var(--gray-400); font-size: 0.85rem; margin: 0; }
.galeri-photo-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.galeri-photo { margin: 0; border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08)); }
.galeri-photo a { display: block; aspect-ratio: 4/3; overflow: hidden; }
.galeri-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.galeri-photo:hover img { transform: scale(1.06); }
.galeri-photo figcaption { padding: 10px 14px; font-size: 0.8rem; color: var(--gray-600); }
.galeri-empty { text-align: center; color: var(--gray-400); padding: 40px 0; }
.galeri-back { text-align: center; margin-top: 44px; }
.btn-back { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--primary); color: var(--white); border-radius: 10px; font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: all 0.25s; }
.btn-back:hover { background: var(--primary-light); transform: translateX(-3px); }
.btn-back i { font-size: 0.75rem; }
@media (max-width: 768px) {
    .galeri-detail { padding: 30px 0 50px; }
    .galeri-detail-title { font-size: 1.4rem; }
    .galeri-photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
</style>
@else
<section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;">
    <div class="container">
        <i class="fas fa-image" style="font-size:3rem;color:var(--gray-300);margin-bottom:20px;"></i>
        <h2 style="color:var(--gray-500);font-weight:500;font-size:1.2rem;">Galeri tidak ditemui</h2>
        <p style="color:var(--gray-400);margin:10px 0 30px;">Maaf, galeri yang anda cari tidak wujud atau telah dialihkan.</p>
        <a href="{{ request()->url() }}" class="btn-back"><i class="fas fa-arrow-left"></i> Kembali ke Galeri</a>
    </div>
</section>
@endif
@else
@php
$items = \App\Models\Backend\ContentPhotoGallery::with(['translations' => function($q) use ($lang) { $q->where('gallery_translation_language', $lang); }])->where('gallery_status', 'ACTIVE')->orderBy('gallery_date', 'desc')->get();
@endphp
@if($items->count())
<section class="galeri-section">
    <div class="container">
        <div class="galeri-header">
            <span class="galeri-badge">Galeri</span>
            <h1 class="galeri-title">Galeri Foto</h1>
            <p class="galeri-subtitle">Koleksi gambar dan foto-foto rasmi.</p>
        </div>
        <div class="galeri-grid">
            @foreach($items as $item)
            @php $t = $item->translations->first(); @endphp
            <a href="?id={{ $item->gallery_code }}" class="galeri-card">
                <div class="galeri-img">
                    @if($item->gallery_thumbnail)
                    <img src="{{ image_url($item->gallery_thumbnail) }}" alt="{{ $t->gallery_translation_title ?? '' }}">
                    @else
                    <div class="galeri-img-placeholder"><i class="fas fa-image"></i></div>
                    @endif
                </div>
                <div class="galeri-overlay">
                    <h3>{{ $t->gallery_translation_title ?? 'Galeri' }}</h3>
                    @if($t->gallery_translation_descr)<p>{{ Str::limit($t->gallery_translation_descr, 100) }}</p>@endif
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
<style>
.galeri-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }
.galeri-header { text-align: center; margin-bottom: 50px; }
.galeri-badge { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 6px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; }
.galeri-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }
.galeri-subtitle { color: var(--gray-400); font-size: 1rem; margin: 0; }
.galeri-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.galeri-card { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; text-decoration: none; }
.galeri-img { width: 100%; height: 100%; }
.galeri-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.galeri-card:hover .galeri-img img { transform: scale(1.08); }
.galeri-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-300); font-size: 2.5rem; }
.galeri-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; }
.galeri-overlay h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 4px; }
.galeri-overlay p { font-size: 0.8rem; margin: 0; opacity: 0.85; }
@media (max-width: 768px) {
    .galeri-section { padding: 30px 0 50px; }
    .galeri-title { font-size: 1.4rem; }
    .galeri-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
}
</style>
@else
<section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;"><div class="container"><i class="fas fa-images" style="font-size:3rem;color:var(--gray-300);margin-bottom:20px;"></i><h2 style="color:var(--gray-500);font-weight:500;font-size:1.2rem;">Tiada Galeri</h2><p style="color:var(--gray-400);margin:10px 0 30px;">Tiada galeri foto buat masa ini.</p><a href="/{{ $siteSlug }}" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;"><i class="fas fa-arrow-left"></i> Kembali</a></div></section>
@endif
@endif