{{--
    VIDEO SECTION — Homepage widget
    Path : resources/views/channels/widgets/video-section.blade.php
--}}
@php
    $latestNews = latestNews(5);
    $videoNews  = videoNews(9);
@endphp

<style>
/* ════════════════════════════════════════
   VIDEO MODAL LIGHTBOX
   ════════════════════════════════════════ */
.vns-modal {
    visibility: hidden; opacity: 0; pointer-events: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: 15px;
    transition: opacity .28s ease, visibility .28s ease;
}
.vns-modal.is-open {
    visibility: visible; opacity: 1; pointer-events: auto;
}

/* modal box */
.vns-modal-box {
    background: #111;
    border-radius: 12px; overflow: hidden;
    width: 100%; max-width: 900px;
    box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
    transform: translateY(30px) scale(.97);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    position: relative;
}
.vns-modal.is-open .vns-modal-box {
    transform: translateY(0) scale(1);
}

/* top bar */
.vns-modal-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #1a1a1a;
    border-bottom: 2px solid #d6363f;
}
.vns-modal-title {
    flex: 1; margin: 0;
    font-size: 14px; color: #fff; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vns-modal-counter {
    font-size: 12px; color: rgba(255,255,255,.45);
    flex-shrink: 0; font-family: monospace;
}
.vns-modal-yt {
    display: inline-flex; align-items: center; gap: 5px;
    background: #ff0000; color: #fff !important;
    font-size: 12px; padding: 4px 10px; border-radius: 4px;
    text-decoration: none !important; flex-shrink: 0;
    transition: background .18s;
}
.vns-modal-yt:hover { background: #cc0000; }
.vns-modal-yt svg { width: 12px; height: 12px; fill: currentColor; }
.vns-modal-close {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    color: #fff; width: 30px; height: 30px; border-radius: 50%;
    font-size: 15px; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .22s;
}
.vns-modal-close:hover { background: #d6363f; border-color: #d6363f; transform: rotate(90deg); }

/* iframe */
.vns-modal-video {
    position: relative; padding-top: 56.25%; background: #000;
}
.vns-modal-video iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}

/* prev / next arrows — outside the box, on the sides */
.vns-modal-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(214,54,63,.88);
    border: 2px solid rgba(255,255,255,.25);
    color: #fff; font-size: 26px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,.4);
    transition: background .18s, transform .18s;
}
.vns-modal-nav:hover { background: #b02020; transform: translateY(-50%) scale(1.08); }
.vns-modal-nav:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.vns-modal-prev { left: -56px; }
.vns-modal-next { right: -56px; }

/* on small screens: arrows go inside modal */
@media (max-width: 1060px) {
    .vns-modal-prev { left: 6px; }
    .vns-modal-next { right: 6px; }
    .vns-modal-nav { top: calc(50% + 22px); } /* below the bar */
}

/* ── thumbnail cards — make them clickable ── */
.vns-thumb-item {
    position: relative; cursor: pointer;
}
.vns-thumb-item .vns-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    border-radius: 5px;
    transition: background .2s;
    z-index: 2;
}
.vns-thumb-item:hover .vns-overlay { background: rgba(0,0,0,.18); }
</style>


{{-- ════════════════════════════════════════
     VIDEO MODAL
     ════════════════════════════════════════ --}}
<div class="vns-modal" id="vnsModal" role="dialog" aria-modal="true">

    {{-- Prev arrow --}}
    <button class="vns-modal-nav vns-modal-prev" id="vnsPrev">&#8249;</button>

    <div class="vns-modal-box" id="vnsModalBox">
        <div class="vns-modal-bar">
            <p class="vns-modal-title" id="vnsTitle"></p>
            <span class="vns-modal-counter" id="vnsCounter"></span>
            <a id="vnsYtLink" href="#" target="_blank" rel="noopener" class="vns-modal-yt">
                <svg viewBox="0 0 24 24"><path d="M23.5 6.2s-.2-1.7-1-2.4c-.9-1-1.9-1-2.4-1.1C17 2.5 12 2.5 12 2.5s-5 0-8.1.2c-.5.1-1.5.1-2.4 1.1-.7.7-1 2.4-1 2.4S.3 8.1.3 10v1.8c0 1.9.2 3.8.2 3.8s.2 1.7 1 2.4c.9 1 2.1.9 2.6 1 1.9.2 8 .2 8 .2s5 0 8.1-.2c.5-.1 1.5-.1 2.4-1.1.7-.7 1-2.4 1-2.4s.2-1.9.2-3.8V10c0-1.9-.3-3.8-.3-3.8zM9.7 14.5V8.1l6.5 3.2-6.5 3.2z"/></svg>
                YouTube
            </a>
            <button class="vns-modal-close" id="vnsClose">✕</button>
        </div>
        <div class="vns-modal-video">
            <iframe id="vnsIframe" src="" allowfullscreen
                    allow="autoplay; encrypted-media; picture-in-picture"
                    title="video player"></iframe>
        </div>
    </div>

    {{-- Next arrow --}}
    <button class="vns-modal-nav vns-modal-next" id="vnsNext">&#8250;</button>

</div>


{{-- ══ MAIN ROW ══════════════════════════════════════════════ --}}
<div class="row marginT50 paddingL10">

    {{-- ── RIGHT COL: Video News (col-md-9) ── --}}
    <div class="col-md-9 paddingL25">
        <div class="row">

            {{-- Section heading --}}
            <div class="col-md-12 paddingL8 paddingR8">
                <div class="cartStyle2">
                    <span class="fontSizeCartTitle bgWhiteImp">
                        <a aria-label="ভিডিও" href="{{ url('youtube/video?type=video') }}"
                            class="textDecorationNone colorBlack hoverOrange fontUpperCase">
                            ভিডিও
                        </a>
                    </span>
                </div>
            </div>

            <div class="col-md-12 marginT15">

                {{-- ── Top 2 featured ── --}}
                <div class="row bgBlackLight marginL-7 marginR-7 paddingL8 paddingR8">
                    <div class="col-md-12 marginT5 bgBlackLight padding18 paddingT0Imp">
                        <div class="row">
                            @forelse ($videoNews as $info)
                                @if ($loop->iteration <= 2)
                                    <div class="col-md-6 paddingL8 paddingR8 marginT15">
                                        <div class="itemDiv hoverOrange vns-thumb-item"
                                             data-vtid="{{ $info->youtube_video_id }}"
                                             data-vtitle="{{ addslashes($info->title) }}"
                                             data-vindex="{{ $loop->index }}">
                                            <div class="thumbnail marginB0 borderNone padding0 height100P bgBrandRed borderRadius5">
                                                <div class="positionRelative">
                                                    <img class="img-responsive borderRadius5 lazyload"
                                                         src="{{ asset($setting->placeholder) }}"
                                                         data-src="https://img.youtube.com/vi/{{ $info->youtube_video_id }}/maxresdefault.jpg"
                                                         alt="{{ $info->title }}" title="{{ $info->title }}"
                                                         loading="lazy">
                                                    <span class="pvIconMedium"><i class="fa fa-play"></i></span>
                                                    <p class="colorWhite time positionAbsolute bottom0 marginB5 paddingL8">
                                                        <i class="fa fa-clock-o icon"></i>
                                                        {{ timeAgo($info->created_at) }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="vns-overlay"></div>
                                        </div>
                                    </div>
                                @endif
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>

                {{-- ── Row 1: items 3-5 ── --}}
                <div class="row bgBlackLight marginL-7 marginR-7 paddingL8 paddingR8">
                    <div class="col-md-12 bgBlackLight padding18 paddingT0Imp">
                        <div class="row regular slider">
                            @forelse ($videoNews as $info)
                                @if ($loop->iteration >= 3 && $loop->iteration <= 5)
                                    <div class="col-md-4 paddingL8 paddingR8 marginT0">
                                        <div class="itemDiv hoverOrange vns-thumb-item"
                                             data-vtid="{{ $info->youtube_video_id }}"
                                             data-vtitle="{{ addslashes($info->title) }}"
                                             data-vindex="{{ $loop->index }}">
                                            <div class="thumbnail marginB0 borderNone padding0 height100P bgBrandRed borderRadius5">
                                                <div class="positionRelative">
                                                    <img class="img-responsive borderRadius5 lazyload"
                                                         src="{{ asset('channels/placeholder.webp') }}"
                                                         data-src="https://img.youtube.com/vi/{{ $info->youtube_video_id }}/maxresdefault.jpg"
                                                         alt="{{ $info->title }}" title="{{ $info->title }}">
                                                    <span class="pvIconMedium"><i class="fa fa-play"></i></span>
                                                </div>
                                            </div>
                                            <div class="vns-overlay"></div>
                                        </div>
                                    </div>
                                @endif
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>

                {{-- ── Row 2: items 6-8 ── --}}
                <div class="row bgBlackLight marginL-7 marginR-7 paddingL8 paddingR8">
                    <div class="col-md-12 bgBlackLight padding18 paddingT0Imp">
                        <div class="row regular slider">
                            @forelse ($videoNews as $info)
                                @if ($loop->iteration >= 6 && $loop->iteration <= 8)
                                    <div class="col-md-4 paddingL8 paddingR8 marginT0">
                                        <div class="itemDiv hoverOrange vns-thumb-item"
                                             data-vtid="{{ $info->youtube_video_id }}"
                                             data-vtitle="{{ addslashes($info->title) }}"
                                             data-vindex="{{ $loop->index }}">
                                            <div class="thumbnail marginB0 borderNone padding0 height100P bgBrandRed borderRadius5">
                                                <div class="positionRelative">
                                                    <img class="img-responsive borderRadius5 lazyload"
                                                         src="{{ asset('channels/placeholder.webp') }}"
                                                         data-src="https://img.youtube.com/vi/{{ $info->youtube_video_id }}/maxresdefault.jpg"
                                                         alt="{{ $info->title }}" title="{{ $info->title }}"
                                                         onerror="this.onerror=null;this.src='{{ asset('channels/placeholder.webp') }}'">
                                                    <span class="pvIconMedium"><i class="fa fa-play"></i></span>
                                                </div>
                                            </div>
                                            <div class="vns-overlay"></div>
                                        </div>
                                    </div>
                                @endif
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>

                {{-- ── আরও ভিডিও ── --}}
                <div class="row bgBlackLight marginL-7 marginR-7 paddingL8 paddingR8 paddingB5">
                    <div class="col-md-12 paddingR10">
                        <p class="text-right marginB0">
                            <a aria-label="আরও ভিডিও" href="{{ url('youtube/video?type=video') }}"
                                class="textDecorationNone colorWhite hoverOrange fontSizeReadMore">
                                আরও ভিডিও <i class="fa fa-caret-right fontSize16"></i>
                            </a>
                        </p>
                    </div>
                </div>

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

    {{-- ── Shorts Widget (col-md-3) ── --}}
    <div class="col-md-3">
         @include('global.widget-setup')
    </div>

</div>


<script>
(function () {
    'use strict';

    /* ── collect all videos in order ── */
    var items = [];
    document.querySelectorAll('.vns-thumb-item').forEach(function (el) {
        items.push({
            ytid  : el.dataset.vtid,
            title : el.dataset.vtitle
        });
    });

    var total   = items.length;
    var current = 0;

    var modal   = document.getElementById('vnsModal');
    var box     = document.getElementById('vnsModalBox');
    var titleEl = document.getElementById('vnsTitle');
    var counter = document.getElementById('vnsCounter');
    var ytLink  = document.getElementById('vnsYtLink');
    var iframe  = document.getElementById('vnsIframe');
    var btnClose= document.getElementById('vnsClose');
    var btnPrev = document.getElementById('vnsPrev');
    var btnNext = document.getElementById('vnsNext');

    /* ── open modal at index ── */
    function openAt(idx) {
        current = ((idx % total) + total) % total;
        var v   = items[current];
        if (!v) return;

        titleEl.textContent = v.title || '';
        counter.textContent = (current + 1) + ' / ' + total;
        ytLink.href         = 'https://www.youtube.com/watch?v=' + v.ytid;
        iframe.src          = 'https://www.youtube.com/embed/' + v.ytid
                            + '?autoplay=1&rel=0&modestbranding=1';

        btnPrev.disabled = (current === 0);
        btnNext.disabled = (current === total - 1);

        modal.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    }

    /* ── close modal ── */
    function closeModal() {
        modal.classList.remove('is-open');
        setTimeout(function () { iframe.src = ''; }, 300);
        document.body.style.overflow = '';
    }

    /* ── thumbnail click ── */
    document.querySelectorAll('.vns-thumb-item').forEach(function (el, idx) {
        el.addEventListener('click', function (e) {
            e.preventDefault();
            openAt(idx);
        });
    });

    /* ── prev / next ── */
    btnPrev.addEventListener('click', function () { openAt(current - 1); });
    btnNext.addEventListener('click', function () { openAt(current + 1); });

    /* ── close ── */
    btnClose.addEventListener('click', closeModal);
    modal.addEventListener('click', function (e) {
        if (!box.contains(e.target)
            && e.target !== btnPrev
            && e.target !== btnNext) {
            closeModal();
        }
    });

    /* ── keyboard ── */
    document.addEventListener('keydown', function (e) {
        if (!modal.classList.contains('is-open')) return;
        if (e.key === 'Escape')     closeModal();
        if (e.key === 'ArrowLeft')  openAt(current - 1);
        if (e.key === 'ArrowRight') openAt(current + 1);
    });

})();
</script>