<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>

<!-- Impactful Page Header -->
<section style="background: var(--text-main); padding: 160px 0 100px; text-align: left; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 0; right: 0; width: 40%; height: 100%; opacity: 0.1; background: var(--primary); transform: skewX(-20deg) translateX(50%);"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span style="color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: 4px; display: block; margin-bottom: 20px;">The Visual Archive</span>
        <h1 style="font-size: 5rem; color: #fff; line-height: 1; letter-spacing: -2px;">Media Gallery</h1>
    </div>
</section>

<section style="padding: 100px 0;">
    <div class="container">
        <!-- Modern Gallery Tabs -->
        <div style="display: flex; justify-content: flex-start; gap: 30px; margin-bottom: 80px; border-bottom: 1px solid var(--border); padding-bottom: 20px;">
            <button class="gallery-tab-btn active" onclick="showGallery('image')" style="background: none; border: none; color: var(--text-muted); font-weight: 700; font-size: 1.2rem; cursor: pointer; position: relative; padding: 10px 0; transition: var(--transition);">
                Project Images
            </button>
            <button class="gallery-tab-btn" onclick="showGallery('video')" style="background: none; border: none; color: var(--text-muted); font-weight: 700; font-size: 1.2rem; cursor: pointer; position: relative; padding: 10px 0; transition: var(--transition);">
                Cinematic Videos
            </button>
        </div>

        <!-- Image Gallery -->
        <div id="image-gallery" class="gallery-grid">
            <?php foreach ($images as $img): ?>
                <div class="gallery-item animate-up" onclick="openLightbox('<?= $img['file_path'] ?>', '<?= addslashes($img['title']) ?>')">
                    <img src="<?= $img['file_path'] ?>" alt="<?= $img['title'] ?>">
                    <div class="gallery-info" style="background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, transparent 100%);">
                        <span style="font-size: 0.75rem; color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;"><?= $img['category'] ?></span>
                        <h4 style="color: #fff; margin-top: 10px; font-size: 1.4rem;"><?= $img['title'] ?></h4>
                    </div>
                </div>
            <?php endforeach; ?>
            <?php if (empty($images)): ?>
                <div style="grid-column: 1/-1; text-align: center; padding: 100px 0; background: var(--bg-alt); border-radius: 32px;">
                    <i class="bi bi-camera" style="font-size: 4rem; color: var(--primary); opacity: 0.2;"></i>
                    <p style="margin-top: 20px; font-weight: 600; color: var(--text-muted);">Capturing excellence... check back soon.</p>
                </div>
            <?php endif; ?>
        </div>

        <!-- Video Gallery -->
        <div id="video-gallery" class="gallery-grid" style="display: none;">
            <?php foreach ($videos as $vid): ?>
                <div class="gallery-item video-item animate-up">
                    <div class="video-preview" style="position: relative; height: 100%;">
                        <img src="<?= $vid['file_path'] ?? base_url('uploads/banners/banner1.png') ?>" alt="<?= $vid['title'] ?>">
                        <div class="play-overlay" onclick="playVideo('<?= $vid['video_url'] ?? $vid['file_path'] ?>')" style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); transition: var(--transition);">
                            <div style="width: 80px; height: 80px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.5rem; box-shadow: 0 10px 30px rgba(229, 45, 39, 0.4);">
                                <i class="bi bi-play-fill"></i>
                            </div>
                        </div>
                    </div>
                    <div class="gallery-info" style="background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, transparent 100%);">
                        <span style="font-size: 0.75rem; color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;"><?= $vid['category'] ?></span>
                        <h4 style="color: #fff; margin-top: 10px; font-size: 1.4rem;"><?= $vid['title'] ?></h4>
                    </div>
                </div>
            <?php endforeach; ?>
            <?php if (empty($videos)): ?>
                <div style="grid-column: 1/-1; text-align: center; padding: 100px 0; background: var(--bg-alt); border-radius: 32px;">
                    <i class="bi bi-play-btn" style="font-size: 4rem; color: var(--primary); opacity: 0.2;"></i>
                    <p style="margin-top: 20px; font-weight: 600; color: var(--text-muted);">Directing the future... check back soon.</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Lightbox -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()" style="background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(20px);">
    <span class="close-lightbox" style="top: 40px; right: 40px; font-size: 4rem; font-weight: 200;">&times;</span>
    <img id="lightbox-img" src="" alt="" style="border-radius: 24px; border: 1px solid rgba(255,255,255,0.1);">
    <div id="lightbox-caption" style="position: absolute; bottom: 60px; left: 0; right: 0; text-align: center; color: #fff; font-size: 2rem; font-weight: 800; font-family: 'Outfit';"></div>
</div>

<!-- Video Modal -->
<div id="video-modal" class="lightbox" onclick="closeVideo()" style="background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(20px);">
    <span class="close-lightbox" style="top: 40px; right: 40px; font-size: 4rem; font-weight: 200;">&times;</span>
    <div class="video-container" onclick="event.stopPropagation()" style="border-radius: 32px; box-shadow: 0 40px 100px rgba(0,0,0,0.5);">
        <iframe id="video-iframe" src="" frameborder="0" allowfullscreen></iframe>
        <video id="video-player" src="" controls style="display: none; width: 100%; max-height: 80vh;"></video>
    </div>
</div>

<style>
.gallery-tab-btn.active {
    color: var(--primary) !important;
}
.gallery-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 40px;
}
.gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 32px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.gallery-item:hover img {
    transform: scale(1.15);
}
.gallery-info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
}
.gallery-item:hover .gallery-info {
    opacity: 1;
    transform: translateY(0);
}
.play-overlay:hover div {
    transform: scale(1.1);
    background: var(--primary-dark);
}
</style>

<script>
function showGallery(type) {
    document.getElementById('image-gallery').style.display = type === 'image' ? 'grid' : 'none';
    document.getElementById('video-gallery').style.display = type === 'video' ? 'grid' : 'none';
    
    const btns = document.querySelectorAll('.gallery-tab-btn');
    btns.forEach(btn => {
        btn.classList.toggle('active', btn.innerText.toLowerCase().includes(type));
    });
}

function openLightbox(src, title) {
    const lightbox = document.getElementById('lightbox');
    const img = document.getElementById('lightbox-img');
    const caption = document.getElementById('lightbox-caption');
    
    img.src = src;
    caption.innerText = title;
    lightbox.classList.add('active');
}

function closeLightbox() {
    document.getElementById('lightbox').classList.remove('active');
}

function playVideo(url) {
    const modal = document.getElementById('video-modal');
    const iframe = document.getElementById('video-iframe');
    const player = document.getElementById('video-player');
    
    if (url.includes('youtube.com') || url.includes('youtu.be') || url.includes('vimeo.com')) {
        let embedUrl = url;
        if (url.includes('youtube.com/watch?v=')) {
            embedUrl = url.replace('watch?v=', 'embed/');
        } else if (url.includes('youtu.be/')) {
            embedUrl = url.replace('youtu.be/', 'youtube.com/embed/');
        }
        iframe.src = embedUrl + "?autoplay=1";
        iframe.style.display = 'block';
        player.style.display = 'none';
    } else {
        player.src = url;
        player.style.display = 'block';
        iframe.style.display = 'none';
        player.play();
    }
    modal.classList.add('active');
}

function closeVideo() {
    const modal = document.getElementById('video-modal');
    const iframe = document.getElementById('video-iframe');
    const player = document.getElementById('video-player');
    iframe.src = '';
    player.pause();
    player.src = '';
    modal.classList.remove('active');
}
</script>

<?= $this->endSection() ?>
