<?php $__env->startSection('title', 'Gallery | Dr. Rajan Shah'); ?>

<?php $__env->startSection('content'); ?>
<div class="bg-gray-50 py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-base text-teal-600 font-semibold tracking-wide uppercase">Media & Highlights</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Our Gallery
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
                Explore moments, educational videos, and patient success stories.
            </p>
        </div>

        <div class="flex flex-wrap justify-center gap-4 mb-12">
            <button onclick="filterGallery(event, 'all')" class="filter-btn px-6 py-2 rounded-full bg-teal-600 text-white font-medium hover:bg-teal-700 transition-colors">All</button>
            <button onclick="filterGallery(event, 'image')" class="filter-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 font-medium hover:bg-gray-300 transition-colors">Images</button>
            <button onclick="filterGallery(event, 'video')" class="filter-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 font-medium hover:bg-gray-300 transition-colors">Videos</button>
        </div>

        <?php if($galleryItems->isEmpty()): ?>
        <div class="text-center py-20">
            <p class="text-gray-500 text-lg">Check back soon for new gallery updates!</p>
        </div>
        <?php else: ?>
        <!-- Grid Layout -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php $__currentLoopData = $galleryItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="gallery-item bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transform transition duration-300 hover:shadow-xl group flex flex-col justify-between" data-type="<?php echo e($item->type === 'image' ? 'image' : 'video'); ?>">
                    
                    <?php if($item->type === 'image'): ?>
                        <div class="relative w-full aspect-[4/5] overflow-hidden cursor-pointer bg-black flex items-center justify-center" onclick="openModal('<?php echo e($item->media_url); ?>', '<?php echo e(addslashes($item->title)); ?>')">
                            <img src="<?php echo e($item->media_url); ?>" alt="<?php echo e($item->title); ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center">
                                <svg class="w-10 h-10 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
                            </div>
                        </div>
                    
                    <?php elseif($item->type === 'youtube'): ?>
                        <?php
                            // Extract video ID from URL
                            preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i', $item->media_url, $match);
                            $youtubeId = $match[1] ?? '';
                            $embedUrl = $youtubeId ? "https://www.youtube.com/embed/{$youtubeId}" : $item->media_url;
                        ?>
                        <div class="relative w-full aspect-[4/5] bg-black flex items-center justify-center overflow-hidden">
                            <iframe src="<?php echo e($embedUrl); ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-64 sm:h-72 lg:h-[260px] object-cover"></iframe>
                        </div>

                    <?php elseif($item->type === 'tiktok'): ?>
                        <!-- Simplistic TikTok embed handler -->
                        <div class="relative w-full aspect-[4/5] bg-black flex items-center justify-center overflow-hidden">
                            <?php if(str_contains($item->media_url, '<blockquote')): ?>
                                <?php echo $item->media_url; ?>

                            <?php else: ?>
                                <?php
                                    preg_match('/video\/(\d+)/', $item->media_url, $tiktokMatch);
                                    $tiktokId = $tiktokMatch[1] ?? '';
                                ?>
                                <?php if($tiktokId): ?>
                                    <div class="w-full h-full flex items-center justify-center bg-black overflow-y-auto">
                                        <blockquote class="tiktok-embed" cite="<?php echo e($item->media_url); ?>" data-video-id="<?php echo e($tiktokId); ?>" style="max-width: 605px;min-width: 325px; margin: auto;" >
                                            <section>
                                                <a target="_blank" title="@tiktok" href="<?php echo e($item->media_url); ?>">Watch on TikTok</a>
                                            </section>
                                        </blockquote>
                                    </div>
                                <?php else: ?>
                                    <div class="w-full h-full flex flex-col items-center justify-center bg-black p-4 text-center">
                                        <svg class="w-16 h-16 text-white mb-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 15.68a6.34 6.34 0 0 0 6.27 6.36 6.34 6.34 0 0 0 6.27-6.36V8.05a8.36 8.36 0 0 0 4.3 1.25V5.86a4.83 4.83 0 0 1-2.25-.17z"/></svg>
                                        <p class="text-white text-lg font-bold mb-2">TikTok Video</p>
                                        <a href="<?php echo e($item->media_url); ?>" target="_blank" class="px-6 py-2 bg-[#ff0050] hover:bg-[#e60048] text-white rounded-full font-semibold transition-colors mt-2">Watch Now</a>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>

                    <?php if($item->title): ?>
                    <div class="p-5">
                        <h3 class="text-lg font-bold text-gray-900"><?php echo e($item->title); ?></h3>
                        <p class="text-xs text-gray-400 mt-2 uppercase tracking-wide font-semibold"><?php echo e($item->type); ?></p>
                    </div>
                    <?php endif; ?>

                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-90 flex items-center justify-center p-4 transition-opacity" style="backdrop-filter: blur(5px);">
    <button onclick="closeModal()" class="absolute top-6 right-6 text-white hover:text-gray-300 focus:outline-none">
        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
    <div class="max-w-5xl w-full mx-auto relative flex flex-col items-center">
        <img id="modalImage" src="" alt="" class="max-h-[85vh] w-auto object-contain rounded-lg shadow-2xl">
        <p id="modalTitle" class="text-white text-xl font-medium mt-6 text-center"></p>
    </div>
</div>

<script>
    function openModal(imageSrc, title) {
        document.getElementById('modalImage').src = imageSrc;
        document.getElementById('modalTitle').innerText = title;
        document.getElementById('imageModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        document.getElementById('imageModal').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    // Close on escape key
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            closeModal();
        }
    });

    function filterGallery(event, type) {
        // Update active button state
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('bg-teal-600', 'text-white');
            btn.classList.add('bg-gray-200', 'text-gray-700');
        });
        
        event.currentTarget.classList.remove('bg-gray-200', 'text-gray-700');
        event.currentTarget.classList.add('bg-teal-600', 'text-white');

        // Filter items
        const items = document.querySelectorAll('.gallery-item');
        items.forEach(item => {
            if (type === 'all' || item.getAttribute('data-type') === type) {
                item.style.display = 'flex';
            } else {
                item.style.display = 'none';
            }
        });
    }
</script>

<script async src="https://www.tiktok.com/embed.js"></script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/sumankc/Desktop/ Websites/Dr Rajan/resources/views/gallery.blade.php ENDPATH**/ ?>