<?php $__env->startSection('frontend_layout'); ?>


    
    <main id="shops">

        <?php if(session('success') || session('error')): ?>
            <div class="toast-stack">
                <div id="flashToast" class="modern-toast <?php echo e(session('success') ? 'success' : 'error'); ?>" role="status"
                    aria-live="polite">
                    <i
                        class="bi <?php echo e(session('success') ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill'); ?> mt-1"></i>
                    <div>
                        <p class="modern-toast-title"><?php echo e(session('success') ? 'Added to cart' : 'Action failed'); ?></p>
                        <p class="modern-toast-text"><?php echo e(session('success') ?? session('error')); ?></p>
                    </div>
                </div>
            </div>
        <?php endif; ?>

        
        <section class="section-pad">
            <div class="container">
                <div class="d-flex align-items-flex-start justify-content-between mb-4 flex-wrap gap-3">
                    <div>
                        <p class="section-label mb-2">Watch &amp; Shop</p>
                        <h2 class="section-heading">Trending <em>Live</em></h2>
                        <span class="divider-gold"></span>
                    </div>
                </div>

                <div class="scroll-track-wrap">
                    <div class="scroll-track" id="reelTrack">
                        <?php $__empty_1 = true; $__currentLoopData = $reels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $reel): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <?php
                                $shopName = optional($reel->shop)->name ?: 'Marketplace';
                                $shopLogoUrl = optional($reel->shop)?->logo
                                    ? (\Illuminate\Support\Str::startsWith(optional($reel->shop)->logo, ['http://', 'https://'])
                                        ? optional($reel->shop)->logo
                                        : asset('storage/' . ltrim(optional($reel->shop)->logo, '/')))
                                    : null;
                                $caption = $reel->title ?: ($reel->caption ?: 'Live shopping reel');
                                $videoUrl = $reel->video_url
                                    ? (\Illuminate\Support\Str::startsWith($reel->video_url, ['http://', 'https://'])
                                        ? $reel->video_url
                                        : asset('storage/' . $reel->video_url))
                                    : null;
                                $derivedThumb = null;
                                if (
                                    $videoUrl &&
                                    preg_match(
                                        '/(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9_-]{11})/',
                                        $videoUrl,
                                        $yt,
                                    )
                                ) {
                                    $derivedThumb = 'https://img.youtube.com/vi/' . $yt[1] . '/hqdefault.jpg';
                                }
                                if (
                                    !$derivedThumb &&
                                    $videoUrl &&
                                    preg_match('/youtube\.com\/shorts\/([A-Za-z0-9_-]{11})/', $videoUrl, $ytShort)
                                ) {
                                    $derivedThumb = 'https://img.youtube.com/vi/' . $ytShort[1] . '/hqdefault.jpg';
                                }
                                $fallbackThumb =
                                    'https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=600&q=80';
                                $resolvedThumbnailUrl = $reel->thumbnail_url
                                    ? (\Illuminate\Support\Str::startsWith($reel->thumbnail_url, [
                                        'http://',
                                        'https://',
                                    ])
                                        ? $reel->thumbnail_url
                                        : asset('storage/' . ltrim($reel->thumbnail_url, '/')))
                                    : null;
                                $thumbnailUrl = $resolvedThumbnailUrl ?: ($derivedThumb ?: $fallbackThumb);
                                $shopUrl = $reel->shop
                                    ? route('storefront.shops.show', $reel->shop)
                                    : route('storefront.home');
                                $reelViewUrl = route('storefront.reels.view', ['reel' => $reel->id]);
                            ?>
                            <a class="reel-card" href="<?php echo e($videoUrl ?: $shopUrl); ?>" target="_blank"
                                rel="noopener noreferrer" data-reel-view-url="<?php echo e($reelViewUrl); ?>"
                                aria-label="Open reel: <?php echo e($caption); ?>">
                                <div class="reel-thumb">
                                    <img src="<?php echo e($thumbnailUrl); ?>" alt="<?php echo e($caption); ?>" loading="lazy" />
                                    <div class="reel-veil"></div>
                                    <span class="reel-fb-icon"><img src="<?php echo e(asset('assets/img/avatars/live.webp')); ?>"
                                            alt="Live" /></span>
                                    <div class="reel-play-btn"><i class="bi bi-play-fill"></i></div>
                                    <div class="reel-meta">
                                        <span class="reel-shop-name"><?php echo e($shopName); ?></span>
                                    </div>
                                </div>
                                <div class="reel-caption" title="<?php echo e($caption); ?>">
                                    <div class="d-flex align-items-center gap-2">
                                        <?php if($shopLogoUrl): ?>
                                            <img src="<?php echo e($shopLogoUrl); ?>" alt="<?php echo e($shopName); ?> logo" loading="lazy"
                                                style="width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.18); flex-shrink: 0;" />
                                        <?php else: ?>
                                            <span class="d-inline-flex align-items-center justify-content-center"
                                                style="width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: .76rem; font-weight: 700; flex-shrink: 0;">
                                                <?php echo e(\Illuminate\Support\Str::limit($shopName, 1, '')); ?>

                                            </span>
                                        <?php endif; ?>
                                        <span class="d-block text-truncate" style="min-width: 0;">
                                            <?php echo e(\Illuminate\Support\Str::limit($caption, 60)); ?>

                                        </span>
                                    </div>
                                </div>
                            </a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div style="padding: 14px 0; color: var(--mist); font-size: .85rem;">No active reels
                                available right now.</div>
                        <?php endif; ?>

                    </div>
                </div>
            </div>
        </section>

        <?php if(!empty($facebookLiveShops) && $facebookLiveShops->isNotEmpty()): ?>
            <section class="section-pad">
                <div class="container">
                    <div class="d-flex align-items-flex-start justify-content-between mb-4 flex-wrap gap-3">
                        <div>
                            <p class="section-label mb-2">Watch &amp; Shop</p>
                            <h2 class="section-heading">Featured <em>Shops</em> </h2>
                            <span class="divider-gold"></span>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <?php $__currentLoopData = $facebookLiveShops; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $liveShop): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                                $logoUrl = $liveShop->logo
                                    ? (
                                        \Illuminate\Support\Str::startsWith($liveShop->logo, ['http://', 'https://'])
                                            ? $liveShop->logo
                                            : asset('storage/' . ltrim($liveShop->logo, '/'))
                                    )
                                    : null;
                            ?>
                            <a href="<?php echo e(route('storefront.shops.landing', $liveShop)); ?>"
                                class="d-inline-flex align-items-center justify-content-center text-decoration-none"
                                style="width: 88px; height: 88px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); overflow: hidden; box-shadow: 0 10px 22px rgba(0,0,0,.08), 0 0 0 2px rgba(255,255,255,.08);"
                                aria-label="Open <?php echo e($liveShop->name); ?> landing page">
                                <?php if($logoUrl): ?>
                                    <img src="<?php echo e($logoUrl); ?>" alt="<?php echo e($liveShop->name); ?> logo" loading="lazy"
                                        style="width: 100%; height: 100%; object-fit: cover;" />
                                <?php else: ?>
                                    <span style="color: #fff; font-size: .8rem; font-weight: 700; text-transform: uppercase;">
                                        <?php echo e(\Illuminate\Support\Str::limit($liveShop->name, 2, '')); ?>

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

    </main>


    
    <button class="back-top" id="backTop" aria-label="Back to top">
        <i class="bi bi-arrow-up"></i>
    </button>


    <?php $__env->startPush('frontend_js'); ?>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            // Back-to-top
            const backTop = document.getElementById('backTop');
            window.addEventListener('scroll', () => {
                backTop.classList.toggle('show', window.scrollY > 400);
            });
            backTop.addEventListener('click', () => window.scrollTo({
                top: 0,
                behavior: 'smooth'
            }));

            // Swipeable scroll tracks
            function makeScrollTrackSwipeable(trackSelector) {
                const tracks = document.querySelectorAll(trackSelector);

                tracks.forEach(track => {
                    let isDown = false;
                    let startX;
                    let scrollLeft;

                    track.addEventListener('mousedown', (e) => {
                        isDown = true;
                        track.style.cursor = 'grabbing';
                        startX = e.pageX - track.offsetLeft;
                        scrollLeft = track.scrollLeft;
                    });

                    track.addEventListener('mouseleave', () => {
                        isDown = false;
                        track.style.cursor = 'grab';
                    });

                    track.addEventListener('mouseup', () => {
                        isDown = false;
                        track.style.cursor = 'grab';
                    });

                    track.addEventListener('mousemove', (e) => {
                        if (!isDown) return;
                        e.preventDefault();
                        const x = e.pageX - track.offsetLeft;
                        const walk = (x - startX) * 1.2;
                        track.scrollLeft = scrollLeft - walk;
                    });

                    // Touch events for mobile
                    let touchStartX = 0;
                    let touchScrollLeft = 0;

                    track.addEventListener('touchstart', (e) => {
                        touchStartX = e.touches[0].clientX;
                        touchScrollLeft = track.scrollLeft;
                    });

                    track.addEventListener('touchmove', (e) => {
                        const touchX = e.touches[0].clientX;
                        const walk = (touchStartX - touchX) * 1.5;
                        track.scrollLeft = touchScrollLeft + walk;
                    });
                });
            }

            // Initialize swipe for all scroll tracks
            makeScrollTrackSwipeable('.scroll-track');

            const flashToast = document.getElementById('flashToast');
            if (flashToast) {
                requestAnimationFrame(() => flashToast.classList.add('show'));
                setTimeout(() => flashToast.classList.remove('show'), 3400);
            }

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            document.querySelectorAll('.reel-card[data-reel-view-url]').forEach((card) => {
                card.addEventListener('click', () => {
                    const reelViewUrl = card.dataset.reelViewUrl || '';
                    if (!reelViewUrl) return;

                    fetch(reelViewUrl, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': csrfToken,
                                'Accept': 'application/json',
                            },
                        })
                        .then((res) => res.ok ? res.json() : null)
                        .then(() => {})
                        .catch(() => {
                            // Keep UI functional even if analytics update fails.
                        });
                });
            });
        </script>
    <?php $__env->stopPush(); ?>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontendLayout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\Abdur Rahman\Desktop\faa\resources\views\welcome.blade.php ENDPATH**/ ?>