{{-- ==================== SHORTS WIDGET ==================== --}}
{{-- @include('channels.widgets.short-video') --}}

<style>
.shorts-widget {
    width: 100%;
    position: relative;
}

/* ── Header ── */
.sw-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; padding: 0 2px;
}
.sw-header .sw-yt-icon {
    background: #FF0000; border-radius: 8px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sw-header .sw-yt-icon svg { width: 18px; height: 18px; fill: #fff; }
.sw-header h3 {
    font-size: 18px; font-weight: bold;
    letter-spacing: 1px; text-transform: uppercase; margin: 0;
}
.sw-header .sw-live-dot {
    width: 7px; height: 7px;
    background: #FF0000; border-radius: 50%;
    margin-left: auto; flex-shrink: 0;
    animation: swPulse 1.4s ease-in-out infinite;
}
@keyframes swPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.4; transform:scale(.7); }
}

/* ── Slider outer ── */
.sw-outer {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
}

/* ── Track ── */
.sw-track {
    display: flex;
    gap: 10px;
    transition: transform 0.42s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── Card:
   Active card = ~75% width → fully visible
   Next card   = ~25% width → half peeking
   Formula: 1 full card takes 75%, gap 10px
   So each card = calc(75% - 5px) and translateX moves by that + gap
── */
.sw-card {
    flex: 0 0 calc(75% - 5px);
    height: 340px;
    position: relative;
    background: #111;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: border-color .25s, box-shadow .25s;
}
.sw-card.sw-active {
    border-color: #FF0000;
    box-shadow: 0 0 0 2px #FF0000, 0 6px 20px rgba(255,0,0,.35);
}

/* thumbnail */
.sw-card .sw-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
    transition: opacity .35s;
}
.sw-card.sw-playing .sw-thumb { opacity: 0; pointer-events: none; }

/* iframe */
.sw-card .sw-iframe-wrap {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.sw-card.sw-playing .sw-iframe-wrap { pointer-events: auto; }
.sw-card .sw-iframe-wrap iframe {
    width: 100%; height: 100%;
    border: none; display: block;
}

/* gradient */
.sw-card .sw-grad {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.84) 100%);
    z-index: 2; pointer-events: none;
}

/* progress bar */
.sw-card .sw-prog {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    height: 3px;
    background: rgba(255,255,255,.25);
    border-radius: 2px; z-index: 10; overflow: hidden;
}
.sw-card .sw-prog .sw-fill {
    height: 100%; width: 0%;
    background: #FF0000; border-radius: 2px;
    transition: width .08s linear;
}

/* mute button */
.sw-card .sw-mute {
    position: absolute; top: 20px; right: 10px;
    z-index: 11;
    background: rgba(0,0,0,.52);
    border: none; border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px;
    transition: background .2s; padding: 0; line-height: 1;
}
.sw-card .sw-mute:hover { background: rgba(255,0,0,.85); }

/* play icon */
.sw-card .sw-play-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 48px; height: 48px;
    background: rgba(255,0,0,.88); border-radius: 50%;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; transition: opacity .25s;
}
.sw-card .sw-play-icon svg { width: 20px; height: 20px; fill: #fff; margin-left: 4px; }
.sw-card.sw-playing .sw-play-icon { opacity: 0; }

/* info bottom */
.sw-card .sw-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 3; padding: 10px 10px 12px; pointer-events: none;
}
.sw-card .sw-info .sw-title {
    font-size: 12px; color: #fff; font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sw-card .sw-info .sw-meta {
    display: flex; align-items: center; gap: 5px;
    margin-top: 4px; font-size: 10px; color: rgba(255,255,255,.6);
}
.sw-card .sw-info .sw-dur {
    background: rgba(255,0,0,.75);
    border-radius: 3px; padding: 1px 5px;
    font-size: 10px; color: #fff; font-weight: 700;
}

/* ══ ROUNDED OVERLAY ARROWS ══ */
.sw-arrow-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 30;
    width: 32px; height: 32px;     /* square base for perfect circle */
    border-radius: 50%;            /* fully rounded */
    background: rgba(214,54,63,.90);
    border: 2px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    transition: background .18s, transform .18s, box-shadow .18s;
}
.sw-arrow-btn:hover {
    background: #b02020;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.sw-arrow-btn.sw-prev { left: 8px; }
.sw-arrow-btn.sw-next { right: 8px; }

/* ── dots ── */
.sw-dots {
    display: flex; justify-content: center; gap: 5px; margin-top: 10px;
}
.sw-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.22); cursor: pointer;
    transition: background .28s, transform .28s, width .28s;
}
.sw-dots span.sw-dot-active {
    background: #FF0000; transform: scale(1.3);
    width: 14px; border-radius: 3px;
}
</style>


<div class="shorts-widget">

    {{-- Header --}}
    <div class="sw-header">
        <div class="sw-yt-icon">
            <svg viewBox="0 0 24 24">
                <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.6 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.3.6 9.3.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.7 15.5V8.5l6.3 3.5-6.3 3.5z"/>
            </svg>
        </div>
        <h3 class="title3"> <a class="textDecorationNone  hoverOrange fontSizeReadMore" href="{{ url('youtube/video?type=short') }}"> ভিডিও স্টোরি</a></h3>
        <div class="sw-live-dot"></div>
    </div>

    {{-- Slider --}}
    <div class="sw-outer" id="swOuter">

        {{-- LEFT rounded arrow --}}
        <button class="sw-arrow-btn sw-prev" id="swPrev">&#8249;</button>

        <div class="sw-track" id="swTrack">

            @forelse (shortVideos(10) as $i => $short)
                <div class="sw-card"
                     data-index="{{ $i }}"
                     data-video-id="{{ $short->youtube_video_id }}"
                     data-duration="{{ $short->duration_seconds ?? 30 }}">

                    <img class="sw-thumb lazyload"
                         src="{{ asset('channels/placeholder.webp') }}"
                         data-src="{{ $short->thumbnail ?? 'https://i.ytimg.com/vi/'.$short->youtube_video_id.'/hqdefault.jpg' }}"
                         alt="{{ $short->title }}"
                         onerror="this.src='{{ asset('channels/placeholder.webp') }}'">

                    <div class="sw-iframe-wrap" id="swWrap{{ $i }}"></div>
                    <div class="sw-grad"></div>

                    <div class="sw-prog">
                        <div class="sw-fill" id="swFill{{ $i }}"></div>
                    </div>

                    <button class="sw-mute" data-index="{{ $i }}">🔇</button>

                    <div class="sw-play-icon">
                        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    </div>

                    <div class="sw-info">
                        <div class="sw-title">{{ $short->title }}</div>
                        <div class="sw-meta">
                            <span class="sw-dur">{{ $short->duration ?? '0:30' }}</span>
                            <span>{{ number_format($short->views) }} ভিউ</span>
                        </div>
                    </div>

                </div>
            @empty
                <div style="color:#fff;padding:20px;text-align:center;width:100%;">
                    কোনো শর্টস পাওয়া যায়নি।
                </div>
            @endforelse

        </div>

        {{-- RIGHT rounded arrow --}}
        <button class="sw-arrow-btn sw-next" id="swNext">&#8250;</button>

    </div>

    {{-- Dots --}}
    <div class="sw-dots" id="swDots"></div>

</div>


<script>
(function () {
    const track  = document.getElementById('swTrack');
    const outer  = document.getElementById('swOuter');
    const dotsEl = document.getElementById('swDots');
    const cards  = Array.from(track.querySelectorAll('.sw-card'));
    const total  = cards.length;
    if (!total) return;

    const PROG_TICK = 80;

    let current  = 0;
    let progTm   = null;
    let progVal  = 0;
    let iframes  = {};
    let muted    = {};
    let videoDur = {};

    cards.forEach((_, i) => {
        muted[i]    = true;
        videoDur[i] = parseInt(cards[i].dataset.duration) || 30;
    });

    /* ── DOTS ── */
    cards.forEach((_, i) => {
        const d = document.createElement('span');
        d.addEventListener('click', () => goTo(i));
        dotsEl.appendChild(d);
    });
    const dots = Array.from(dotsEl.querySelectorAll('span'));

    function setDots(i) {
        dots.forEach((d, idx) => d.classList.toggle('sw-dot-active', idx === i));
    }

    /* ── SLIDE: move exactly 1 card width + gap ── */
    function moveTrack(i) {
        const cardW = cards[0].offsetWidth + 10; /* card width + gap */
        track.style.transform = `translateX(-${i * cardW}px)`;
    }

    /* ── LOAD VIDEO ── */
    function loadVideo(idx) {
        const card = cards[idx];
        if (!card) return;
        const vid  = card.dataset.videoId;
        const cont = document.getElementById('swWrap' + idx);
        if (!cont || iframes[idx]) return;

        const iframe       = document.createElement('iframe');
        iframe.src         = `https://www.youtube.com/embed/${vid}`
                           + `?autoplay=1&mute=${muted[idx] ? 1 : 0}`
                           + `&controls=0&loop=0&rel=0&modestbranding=1`
                           + `&playsinline=1&enablejsapi=1`;
        iframe.allow       = 'autoplay; encrypted-media';
        iframe.allowFullscreen = true;
        cont.appendChild(iframe);
        iframes[idx] = iframe;

        card.classList.add('sw-active', 'sw-playing');
        syncMute(idx);
    }

    /* ── KILL VIDEO ── */
    function killVideo(idx) {
        if (iframes[idx]) { iframes[idx].remove(); delete iframes[idx]; }
        cards[idx]?.classList.remove('sw-active', 'sw-playing');
    }

    /* ── MUTE SYNC ── */
    function syncMute(idx) {
        const btn = cards[idx]?.querySelector('.sw-mute');
        if (btn) btn.textContent = muted[idx] ? '🔇' : '🔊';
    }

    /* ── PROGRESS BAR ── */
    function startProg(idx) {
        progVal = 0;
        clearInterval(progTm);
        const fill = document.getElementById('swFill' + idx);
        if (!fill) return;
        fill.style.width = '0%';

        const dur = (videoDur[idx] || 30) * 1000;
        progTm = setInterval(() => {
            progVal += (PROG_TICK / dur) * 100;
            const pct = Math.min(progVal, 100);
            fill.style.width = pct + '%';
            if (pct >= 100) {
                clearInterval(progTm);
                goTo(current + 1);
            }
        }, PROG_TICK);
    }

    function clearProg(idx) {
        clearInterval(progTm);
        const fill = document.getElementById('swFill' + idx);
        if (fill) fill.style.width = '0%';
    }

    /* ── YouTube postMessage: video ended ── */
    window.addEventListener('message', function (e) {
        try {
            const data = JSON.parse(e.data);
            if (data.event === 'onStateChange' && data.info === 0) {
                clearInterval(progTm);
                goTo(current + 1);
            }
        } catch (_) {}
    });

    /* ── MAIN goTo ── */
    function goTo(i) {
        killVideo(current);
        clearProg(current);
        current = ((i % total) + total) % total;
        moveTrack(current);
        setDots(current);
        loadVideo(current);
        startProg(current);
    }

    /* ── MUTE CLICK ── */
    track.addEventListener('click', function (e) {
        const btn = e.target.closest('.sw-mute');
        if (!btn) return;
        e.stopPropagation();
        const idx  = parseInt(btn.dataset.index);
        muted[idx] = !muted[idx];
        killVideo(idx);
        if (idx === current) loadVideo(idx);
        else syncMute(idx);
    });

    /* ── ARROWS ── */
    document.getElementById('swNext').addEventListener('click', () => goTo(current + 1));
    document.getElementById('swPrev').addEventListener('click', () => goTo(current - 1));

    /* ── TOUCH SWIPE ── */
    let tx = 0;
    outer.addEventListener('touchstart', e => tx = e.touches[0].clientX, { passive: true });
    outer.addEventListener('touchend',   e => {
        const diff = tx - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 40) goTo(diff > 0 ? current + 1 : current - 1);
    });

    /* ── RESIZE ── */
    window.addEventListener('resize', () => {
        track.style.transition = 'none';
        moveTrack(current);
        setTimeout(() => track.style.transition = '', 50);
    });

    /* ── INIT ── */
    goTo(0);

})();
</script>