@extends('layouts.app')

@section('title', 'Gallery — Student Life, Japan, Events, JLPT Results | Soyogi')
@section('meta_description', 'See our students in Japan, classroom sessions, events, JLPT results, and visa success stories. 500+ students have trusted Soyogi.')

@push('styles')
<style>
.gallery-filter { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.filter-btn {
    padding:9px 22px; border-radius:100px;
    border:2px solid var(--gray-200); background:white;
    color:var(--gray-600); font-size:13px; font-weight:600;
    cursor:pointer; transition:all 0.2s;
}
.filter-btn.active, .filter-btn:hover { background:var(--red); border-color:var(--red); color:white; }

.gallery-grid {
    columns:4; column-gap:14px;
}
.gallery-item {
    break-inside:avoid; margin-bottom:14px;
    border-radius:12px; overflow:hidden;
    position:relative; cursor:pointer;
    display:block;
}
.gallery-item img {
    width:100%; height:auto; display:block;
    transition:transform 0.4s ease;
    object-fit:cover;
}
.gallery-item:hover img { transform:scale(1.04); }
.gallery-overlay {
    position:absolute; inset:0;
    background:rgba(15,23,42,0.5);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay i { color:white; font-size:26px; }

/* Lightbox */
.lightbox {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.93);
    z-index:3000;
    display:none; align-items:center; justify-content:center;
    padding:20px;
}
.lightbox.open { display:flex; }
.lightbox img {
    max-width:90vw; max-height:90vh;
    border-radius:8px; object-fit:contain;
}
.lightbox-close {
    position:fixed; top:20px; right:24px;
    color:white; font-size:32px; cursor:pointer;
    background:none; border:none; line-height:1;
}
.lightbox-prev, .lightbox-next {
    position:fixed; top:50%; transform:translateY(-50%);
    color:white; font-size:28px; cursor:pointer;
    background:rgba(255,255,255,0.1); border:none;
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s;
}
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,255,255,0.25); }
.lightbox-prev { left:16px; }
.lightbox-next { right:16px; }

.category-label {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(transparent,rgba(0,0,0,0.7));
    color:white; font-size:12px; font-weight:600;
    padding:20px 12px 10px; opacity:0; transition:opacity 0.3s;
}
.gallery-item:hover .category-label { opacity:1; }

@media(max-width:900px){ .gallery-grid{columns:3;} }
@media(max-width:600px){ .gallery-grid{columns:2;} }
</style>
@endpush

@section('content')
<div class="page-header">
    <div class="section-badge"><i class="fas fa-images"></i> Gallery</div>
    <span class="jp-sub">ソヨギでの生活・ギャラリー</span>
    <h1>Life at Soyogi</h1>
    <p>Real students, real moments — classrooms, Japan trips, JLPT results, visa approvals, and everything in between.</p>
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <span class="current">Gallery</span>
    </div>
</div>

<section class="section">
    <div class="section-inner">

        <!-- Stats -->
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px;" data-aos="fade-up">
            @foreach([['111+','Photos & Media'],['5','Video Testimonials'],['500+','Student Memories'],['10+','Years of Moments']] as $s)
            <div style="background:white;border-radius:14px;padding:22px;text-align:center;border:1px solid var(--gray-200);">
                <div style="font-size:30px;font-weight:900;color:var(--red);">{{ $s[0] }}</div>
                <div style="font-size:13px;color:var(--gray-600);margin-top:4px;">{{ $s[1] }}</div>
            </div>
            @endforeach
        </div>

        <!-- Filter -->
        <div class="gallery-filter" data-aos="fade-up">
            <button class="filter-btn active" onclick="filterGallery('all', this)">All Photos</button>
            <button class="filter-btn" onclick="filterGallery('gallery', this)">Classes & Events</button>
            <button class="filter-btn" onclick="filterGallery('japan', this)">Students in Japan</button>
            <button class="filter-btn" onclick="filterGallery('events', this)">Special Events</button>
            <button class="filter-btn" onclick="filterGallery('achievements', this)">Achievements</button>
            <button class="filter-btn" onclick="filterGallery('team', this)">Team</button>
        </div>

        {{-- DB-managed gallery items (uploaded via admin) --}}
        @if($items->count())
        @foreach($items as $category => $categoryItems)
        <h2 style="font-size:20px;font-weight:800;color:var(--navy);margin-bottom:20px;display:flex;align-items:center;gap:10px;" data-aos="fade-up">
            <span style="width:4px;height:24px;background:var(--red);border-radius:2px;display:inline-block;"></span>
            {{ ucfirst($category) }}
        </h2>
        <div class="gallery-grid" style="margin-bottom:48px;">
            @foreach($categoryItems as $gi)
            <div class="gallery-item" data-category="{{ $gi->category }}" onclick="openLightbox('{{ $gi->imageUrl() }}')" data-aos="fade-up">
                <img src="{{ $gi->imageUrl() }}" alt="{{ $gi->title }}" loading="lazy">
                <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
                @if($gi->title)<div class="category-label">{{ $gi->title }}</div>@endif
            </div>
            @endforeach
        </div>
        @endforeach
        @endif

        <!-- ===== CLASSES & GROUP PHOTOS ===== -->
        <h2 style="font-size:20px;font-weight:800;color:var(--navy);margin-bottom:20px;display:flex;align-items:center;gap:10px;" data-aos="fade-up">
            <span style="width:4px;height:24px;background:var(--red);border-radius:2px;display:inline-block;"></span>
            Classroom & Group Photos
        </h2>
        <div class="gallery-grid" id="gallery-gallery" style="margin-bottom:48px;">
            @php
            $galleryImages = [];
            for($i=1;$i<=20;$i++) $galleryImages[] = ['class-'.$i.'.jpg','Class Session'];
            for($i=1;$i<=21;$i++) $galleryImages[] = ['group-'.$i.'.jpg','Group Photo'];
            @endphp
            @foreach($galleryImages as $img)
            @if(file_exists(public_path('images/gallery/'.$img[0])))
            <div class="gallery-item" data-category="gallery" onclick="openLightbox('/images/gallery/{{ $img[0] }}')" data-aos="fade-up">
                <img src="/images/gallery/{{ $img[0] }}" alt="{{ $img[1] }}" loading="lazy">
                <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
                <div class="category-label">{{ $img[1] }}</div>
            </div>
            @endif
            @endforeach
        </div>

        <!-- ===== STUDENTS IN JAPAN ===== -->
        <h2 style="font-size:20px;font-weight:800;color:var(--navy);margin-bottom:20px;display:flex;align-items:center;gap:10px;" data-aos="fade-up">
            <span style="width:4px;height:24px;background:var(--red);border-radius:2px;display:inline-block;"></span>
            Our Students in Japan 🇯🇵
        </h2>
        <div class="gallery-grid" id="gallery-japan" style="margin-bottom:48px;">
            @for($i=1;$i<=28;$i++)
            @if(file_exists(public_path('images/japan/student-'.$i.'.jpg')))
            <div class="gallery-item" data-category="japan" onclick="openLightbox('/images/japan/student-{{ $i }}.jpg')" data-aos="fade-up">
                <img src="/images/japan/student-{{ $i }}.jpg" alt="Student in Japan" loading="lazy">
                <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
                <div class="category-label">Our Student in Japan</div>
            </div>
            @endif
            @endfor
        </div>

        <!-- ===== EVENTS ===== -->
        <h2 style="font-size:20px;font-weight:800;color:var(--navy);margin-bottom:20px;display:flex;align-items:center;gap:10px;" data-aos="fade-up">
            <span style="width:4px;height:24px;background:var(--red);border-radius:2px;display:inline-block;"></span>
            Special Events & Celebrations
        </h2>
        <div class="gallery-grid" id="gallery-events" style="margin-bottom:48px;">
            @for($i=1;$i<=4;$i++)
            @if(file_exists(public_path('images/events/event-'.$i.'.jpg')))
            <div class="gallery-item" data-category="events" onclick="openLightbox('/images/events/event-{{ $i }}.jpg')" data-aos="fade-up">
                <img src="/images/events/event-{{ $i }}.jpg" alt="Event Photo" loading="lazy">
                <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
                <div class="category-label">Event</div>
            </div>
            @endif
            @endfor
        </div>

        <!-- ===== VISA & COE ===== -->
        <h2 style="font-size:20px;font-weight:800;color:var(--navy);margin-bottom:20px;display:flex;align-items:center;gap:10px;" data-aos="fade-up">
            <span style="width:4px;height:24px;background:var(--red);border-radius:2px;display:inline-block;"></span>
            Visa & COE Success Stories
        </h2>
        <div class="gallery-grid" id="gallery-visa" style="margin-bottom:48px;">
            @php
            $visaFiles = [];
            for($i=1;$i<=23;$i++) $visaFiles[] = 'visa-'.$i.'.jpg';
            for($i=24;$i<=36;$i++) $visaFiles[] = 'coe-'.$i.'.jpg';
            @endphp
            @foreach($visaFiles as $vf)
            @if(file_exists(public_path('images/visa/'.$vf)))
            <div class="gallery-item" data-category="visa" onclick="openLightbox('/images/visa/{{ $vf }}')" data-aos="fade-up">
                <img src="/images/visa/{{ $vf }}" alt="Visa Approval" loading="lazy">
                <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
                <div class="category-label">Visa / COE Approved</div>
            </div>
            @endif
            @endforeach
        </div>

        <!-- ===== VIDEO SECTION ===== -->
        @php
        $videos = [];
        if(file_exists(public_path('videos'))) {
            foreach(glob(public_path('videos').'/*.mp4') as $v) {
                $videos[] = basename($v);
            }
        }
        @endphp

        @if(count($videos))
        <h2 style="font-size:20px;font-weight:800;color:var(--navy);margin-bottom:20px;display:flex;align-items:center;gap:10px;" data-aos="fade-up">
            <span style="width:4px;height:24px;background:var(--red);border-radius:2px;display:inline-block;"></span>
            Student Videos & Testimonials
        </h2>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px;" data-aos="fade-up">
            @foreach($videos as $video)
            <div style="border-radius:16px;overflow:hidden;background:var(--navy);">
                <video controls preload="metadata" style="width:100%;display:block;max-height:280px;object-fit:cover;" poster="">
                    <source src="/videos/{{ $video }}" type="video/mp4">
                </video>
                <div style="padding:14px 16px;">
                    <p style="color:rgba(255,255,255,0.75);font-size:13px;font-weight:600;">
                        <i class="fas fa-play-circle" style="color:var(--red);margin-right:6px;"></i>
                        {{ ucfirst(str_replace(['-','_'], ' ', pathinfo($video, PATHINFO_FILENAME))) }}
                    </p>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        <!-- CTA -->
        <div style="text-align:center;padding:48px;background:linear-gradient(135deg,var(--navy),#1e3a5f);border-radius:24px;" data-aos="fade-up">
            <h2 style="font-size:28px;font-weight:800;color:white;margin-bottom:12px;">Your Photo Could Be Here Next</h2>
            <p style="color:rgba(255,255,255,0.65);margin-bottom:28px;font-size:15px;">Join 500+ students who have made their Japan dream a reality with Soyogi.</p>
            <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;">
                <a href="#" onclick="openModal();return false;" class="btn-primary">Start My Journey</a>
                <a href="{{ route('courses.index') }}" class="btn-secondary">Explore Courses</a>
            </div>
        </div>
    </div>
</section>

<!-- Lightbox -->
<div class="lightbox" id="lightbox" onclick="closeLightboxOnBg(event)">
    <button class="lightbox-close" onclick="closeLightbox()">×</button>
    <button class="lightbox-prev" onclick="changeLightbox(-1)"><i class="fas fa-chevron-left"></i></button>
    <img id="lightboxImg" src="" alt="">
    <button class="lightbox-next" onclick="changeLightbox(1)"><i class="fas fa-chevron-right"></i></button>
</div>
@endsection

@push('scripts')
<script>
let allImages = [];
let currentIndex = 0;

function buildImageList() {
    allImages = Array.from(document.querySelectorAll('.gallery-item img')).map(img => img.src);
}

function openLightbox(src) {
    if (!allImages.length) buildImageList();
    currentIndex = allImages.indexOf(window.location.origin + src);
    if (currentIndex === -1) {
        // try matching end of URL
        currentIndex = allImages.findIndex(s => s.endsWith(src));
    }
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightbox').classList.add('open');
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    document.getElementById('lightbox').classList.remove('open');
    document.body.style.overflow = '';
}

function closeLightboxOnBg(e) {
    if (e.target === document.getElementById('lightbox')) closeLightbox();
}

function changeLightbox(dir) {
    if (!allImages.length) return;
    currentIndex = (currentIndex + dir + allImages.length) % allImages.length;
    document.getElementById('lightboxImg').src = allImages[currentIndex];
}

document.addEventListener('keydown', function(e) {
    if (!document.getElementById('lightbox').classList.contains('open')) return;
    if (e.key === 'ArrowLeft') changeLightbox(-1);
    if (e.key === 'ArrowRight') changeLightbox(1);
    if (e.key === 'Escape') closeLightbox();
});

function filterGallery(cat, btn) {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.gallery-item').forEach(item => {
        if (cat === 'all' || item.dataset.category === cat) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
}

window.addEventListener('load', buildImageList);
</script>
@endpush