{{-- Video.js CSS --}}
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />

<style>
/* ========== PLAYER WRAPPER ========== */
.player-wrapper {
    position: relative;
    width: 100%;
    background: #000;
}
.player-wrapper::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}
.player-wrapper .video-js {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ========== LOADER OVERLAY ========== */
#playerLoader {
    position: absolute;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    overflow: hidden;
    background: #000;
    transition: opacity 0.7s ease;
}
#playerLoader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* থাম্বনেইল */
#playerLoader .thumb-bg {
    position: absolute;
    inset: 0;
    background-image: url('{{ asset("images/live-thumb.jpg") }}');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: blur(4px);
    transform: scale(1.05);
}

/* Dark vignette */
#playerLoader .thumb-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);
}

/* LIVE badge */
#playerLoader .live-badge {
    position: relative;
    z-index: 2;
    background: #e3000b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 4px 12px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#playerLoader .live-badge span {
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    animation: pulseDot 1.1s ease-in-out infinite;
}
@keyframes pulseDot {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* Channel name */
#playerLoader .ch-name {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: Georgia, serif;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

/* Spinner */
#playerLoader .spinner {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
}
#playerLoader .spinner::before,
#playerLoader .spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}
#playerLoader .spinner::before {
    inset: 0;
    border-top-color: #e3000b;
    border-right-color: rgba(227,0,11,0.3);
    animation: rotateSpin 0.85s linear infinite;
}
#playerLoader .spinner::after {
    inset: 9px;
    border-bottom-color: rgba(255,255,255,0.45);
    animation: rotateSpin 1.3s linear infinite reverse;
}
@keyframes rotateSpin {
    to { transform: rotate(360deg); }
}

/* Loading text */
#playerLoader .load-text {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    letter-spacing: 1.5px;
    font-family: sans-serif;
    animation: textBlink 1.8s ease-in-out infinite;
}
@keyframes textBlink {
    0%,100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* Bottom progress sweep */
#playerLoader .progress-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.08);
    z-index: 3;
    overflow: hidden;
}
#playerLoader .progress-line::after {
    content: '';
    display: block;
    height: 100%;
    width: 45%;
    background: linear-gradient(90deg, transparent, #e3000b, transparent);
    animation: sweepLine 1.6s ease-in-out infinite;
}
@keyframes sweepLine {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

/* ========== VIDEO.JS — BIG PLAY BUTTON ========== */
/* সম্পূর্ণ মিডেলে */
.video-js .vjs-big-play-button {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    width: 68px !important;
    height: 68px !important;
    line-height: 68px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    background: rgba(227, 0, 11, 0.8) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.video-js:hover .vjs-big-play-button {
    background: #e3000b !important;
    transform: translate(-50%, -50%) scale(1.12) !important;
}
.vjs-big-play-button .vjs-icon-placeholder::before {
    font-size: 32px !important;
    line-height: 68px !important;
}

/* LIVE display */
.vjs-live-display {
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* ========== NEWS BOX ========== */
.highestHitNewsDiv { height: 418px; }

/* ========== MOBILE ========== */
@media (max-width: 768px) {
    .paddingL8 { padding-left: 0 !important; }
    .tabNews   { margin-top: 10px; }
    .highestHitNewsDiv { height: 400px !important; }
    #playerLoader .ch-name { font-size: 16px; letter-spacing: 3px; }
}
</style>

<div class="row flex-row marginT20">

    {{-- ===== Player Column ===== --}}
    <div class="col-md-8 col-sm-12 col-xs-12 flex-col paddingL8">
        <div class="itemDiv bgAsh hoverOrange" style="width:100%">
            <div class="player-wrapper">

                {{-- ✨ Loader + Thumbnail --}}
                <div id="playerLoader">
                    <div class="thumb-bg"></div>
                    <div class="live-badge"><span></span> LIVE</div>
                    <div class="ch-name">{{ setting()->title }}</div>
                    <div class="spinner"></div>
                    <div class="load-text">লাইভ সংযোগ হচ্ছে...</div>
                    <div class="progress-line"></div>
                </div>

                {{-- Video.js Player --}}
                <video
                    id="live_stream"
                    class="video-js vjs-default-skin vjs-big-play-centered"
                    controls
                    autoplay
                    preload="auto"
                    muted
                    playsinline
                    data-setup='{"liveui":true,"autoplay":"muted","muted":true}'>
                    <source src="https://mtlivestream.com/hls/asian/cdnep/index.m3u8" type="application/x-mpegURL">
                    <p class="vjs-no-js">ভিডিও দেখতে JavaScript চালু করুন।</p>
                </video>

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

    {{-- ===== News Column ===== --}}
    <div class="col-md-4 col-sm-12 col-xs-12">
        <div>
            <div class="tabNews bgWhiteImp height100P width100P borderAsh1">
                <ul class="nav nav-tabs bgAshLight paddingB1" role="tablist" id="newsTab">
                    <li role="presentation" class="title3 text-center borderNone borderRadius0Imp width50P">
                        <a aria-label="সর্বাধিক"
                           class="borderRadius0Imp padding5Imp margin0Imp colorBlackImp"
                           href="#highestTab" aria-controls="highestTab" role="tab" data-toggle="tab">সর্বাধিক</a>
                    </li>
                    <li role="presentation" class="active title3 text-center borderNone borderRadius0Imp width50P">
                        <a aria-label="সর্বশেষ"
                           class="borderRadius0Imp padding5Imp margin0Imp colorBlackImp"
                           href="#latestTab" aria-controls="latestTab" role="tab" data-toggle="tab">সর্বশেষ</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane" id="highestTab">
                        <div class="bgWhiteImp height100P">
                            <div class="highestHitNewsDiv scrollbar1 padding0Imp overflowYScroll">
                                <ul class="colorWhite tabNewsUl mediaItemDiv lastChild padding0Imp">
                                    @forelse(popularNewsLastWeek(10) as $info)
                                        <li class="borderAshB1 lastChildItemB0">
                                            <div class="media positionRelative hoverOrange padding15 marginT0">
                                                <div class="media-left">
                                                    <div class="positionRelative">
                                                        @include('global.image', ['w' => '110px'])
                                                    </div>
                                                </div>
                                                <div class="media-body">
                                                    <h2 class="title3 margin0 colorBlack three-line">{{ $info->title }}</h2>
                                                </div>
                                                <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                                            </div>
                                        </li>
                                    @empty
                                        <li class="padding15 text-center colorBlack">কোন খবর পাওয়া যায়নি</li>
                                    @endforelse
                                </ul>
                            </div>
                            <p class="bgAshLight padding5 text-center marginB0 borderAshT1 marginT5">
                                <a aria-label="সব খবর" href="{{ category_link('popular-news') }}"
                                   class="textDecorationNone colorBlack hoverOrange title2">সব খবর</a>
                            </p>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane active" id="latestTab">
                        <div class="bgWhiteImp height100P">
                            <div class="highestHitNewsDiv scrollbar1 padding0Imp overflowYScroll">
                                <ul class="colorWhite tabNewsUl mediaItemDiv lastChild padding0Imp">
                                    @forelse(latestNews(10) as $info)
                                        <li class="borderAshB1 lastChildItemB0">
                                            <div class="media positionRelative hoverOrange padding15 marginT0">
                                                <div class="media-left">
                                                    <div class="positionRelative">
                                                        @include('global.image', ['w' => '110px'])
                                                    </div>
                                                </div>
                                                <div class="media-body">
                                                    <h2 class="title3 margin0 colorBlack three-line">{{ $info->title }}</h2>
                                                </div>
                                                <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                                            </div>
                                        </li>
                                    @empty
                                        <li class="padding15 text-center colorBlack">কোন খবর পাওয়া যায়নি</li>
                                    @endforelse
                                </ul>
                            </div>
                            <p class="bgAshLight padding5 text-center marginB0 borderAshT1 marginT5">
                                <a aria-label="সব খবর" href="{{ category_link('latest-news') }}"
                                   class="textDecorationNone colorBlack hoverOrange title2">সব খবর</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Video.js JS --}}
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
(function () {
    var STREAM_URL = 'https://mtlivestream.com/hls/asian/cdnep/index.m3u8';
    var loader = document.getElementById('playerLoader');

    function hideLoader() {
        if (loader) loader.classList.add('hidden');
    }

    var player = videojs('live_stream', {
        liveui: true,
        autoplay: 'muted',
        muted: true,
        playsinline: true,
        responsive: true,
        fluid: true,
        html5: {
            vhs: {
                overrideNative: !videojs.browser.IS_SAFARI,
                enableLowInitialPlaylist: true,
                smoothQualityChange: true
            },
            nativeAudioTracks: false,
            nativeVideoTracks: false
        }
    });

    player.ready(function () {
        var p = this;
        p.muted(true);

        function tryPlay() {
            var pr = p.play();
            if (pr && typeof pr.catch === 'function') {
                pr.catch(function () { setTimeout(tryPlay, 1000); });
            }
        }

        tryPlay();

        p.on('playing',     hideLoader);
        p.on('loadeddata',  hideLoader);

        p.on('error', function () {
            setTimeout(function () {
                p.src({ src: STREAM_URL, type: 'application/x-mpegURL' });
                p.load(); tryPlay();
            }, 3000);
        });

        p.on('ended', function () {
            p.src({ src: STREAM_URL, type: 'application/x-mpegURL' });
            p.load(); tryPlay();
        });
    });
})();
</script>