@extends('xhay.master')

@section('title', \Str::title($vod->name).' | Phimxhay.org')
@section('meta_image', $vod->image)

@section('style-libraries')

@stop

@section('styles')
    
@stop

@section('content')
  <div id="container">
        <h2 id="page-title" class="breadcrumb" style="text-transform: none;">{{ \Str::title($vod->name) }}</h2>
        <div class="desktop video-player" data-id="{{ $vod->id }}" data-sv="1">
          <div id="dplayer">
            @if(@$isPlay)
            <div id="videoIframe" class="videoIframe">
                <!-- Iframe video chính -->
                <iframe  id="Iframe" src="{{ route('category.video', $vod->slug) }}" frameborder="0" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="display:none;"></iframe>
                <video id="adsVideo"  autoplay controls webkit-playsinline playsinline data-setup="{}" preload="auto" muted  style="position: absolute; top: 0; left: 0;">
                    <source id="adsVideosource" src="" type="video/mp4">
                </video>
            </div>
            <!-- <video id="video" crossorigin class="vjs-fluid video-js {{@$isPlay ? '' : 'show-popup'}}" autoplay controls webkit-playsinline playsinline data-setup="{}" preload="auto" @if(@$content->images) poster="{!! @$content->image !!}" @endif></video> -->
            @else
            <div id="videoIframe" class="videoIframe">
                <!-- Iframe video chính -->
                @if($vod->type == 'xvideo')
                <iframe  id="Iframe" src="https://www.xvideos.com/embedframe/{{$vod->code}}" frameborder="0" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="display:none;"></iframe>
                @else
                <iframe id="Iframe" src="{{ $vod->source_embed }}" scrolling="no" frameborder="0" width="100%" height="111%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="display:none;"></iframe>
                @endif

                <video id="adsVideo"  autoplay controls webkit-playsinline playsinline data-setup="{}" preload="auto" muted  style="position: absolute; top: 0; left: 0;">  
                    <source id="adsVideosource" src="" type="video/mp4">
                </video>
            </div>
            
            @endif
          </div>
          
          <div class="clear"></div>
        </div>

        <div class="clear"></div>
        <div class="container-infor">
            <div class="video-info">
                <span class="video-code">#{{$vod->code}}</span>
                <span class="video-link">{{ route('category.short' , @$vod->id) }}</span>
            </div>
            <div id="video-actions">
                <div class="video-stats" style="float:right">
                  <span class="likes" onclick="like('{{ route('category.like', $vod->id) }}', this)">
                    <span>{{ (int)$vod->like }}</span>
                  </span>
                  <span class="dislikes"  onclick="dislike('{{ route('category.dislike', $vod->id) }}', this)">
                    <span>{{ (int)$vod->dislike }}</span>
                  </span>
                  <span class="rating">
                    <span>{{ (($totalVotes = $vod->like + $vod->dislike) > 0) ? ceil(($vod->like / $totalVotes) * 100) : 100 . ' %' }}</span>
                  </span>
                  <span class="views">
                    <span>{{ formatNumber($vod->count_view) }}</span>
                  </span>
                </div>
              </div>
        </div>
        @include('xhay.ads.x', ['ads' => $ads])

        <div id="adx" style="margin: 0 5px; text-align: center;"></div>
      <div class="clear"></div>
        <div class="video-content">
            <div class="alert text-center" style="text-align: center; color: #d6a82a;">Dùng <a href="https://one.one.one.one/" style="color: blue;">1.1.1.1</a> để xem phim nhanh và mượt mà hơn!</div>
            <div class="video-description">{!! $vod->note !!}</div>
            <div class="video-tags">

              <div class="actress-tag">
                @foreach($vod->actors as $ac)
                <a href="" title="{{ $ac->name }}">{{ $ac->name }}</a>&nbsp;
                @endforeach
              </div>

              <div class="category-tag">
                @foreach($vod->tags as $tag)
                <a href="{{ route('category.tags', $tag->slug) }}" title="{{ $tag->name }}">{{ $tag->name }}</a>&nbsp;
                @endforeach
              </div>

            </div>
        </div>

        <div id="video-list">
          <h2 class="breadcrumb">Phim liên quan</h2>

          @foreach($relatedContents as $vid)
          <div id="video-{{ $vid->id }}" class="video-item">
            <a title="{{ $vid->name }}" href="{{ route('category.play' , $vid->slug) }}">
              <img class="video-image lazyload" src="{{ @$vid->image }}" width="240px" height="180px" alt="{{ $vid->name }}">
              <div class="ribbon">{{ $vid->tags->first()->name }}</div>
            </a>
            <div class="video-name">
              <a title="{{ $vid->name }}" href="{{ route('category.play' , $vid->slug) }}">{{\Str::title($vid->name) }}</a>
            </div>
          </div>
          @endforeach
        </div>
        <div class="clear"></div>
      </div>

    @if(Auth::check())
        <div class="corner-arrow" style="z-index: 9999999;position: fixed;text-align: end; bottom: 10px; right: 10px;">
            <div>
                <a href="{{ route('backend.content.get', $vod->id) }}" target="_blank" title="Chỉnh sửa video">
                    <img src="{{ url('/xhay/pen.png') }}" width="50px" class="arrow-image">
                    <h3 style="color: red;">Sửa phim này.</h3>
                </a>
            </div>
        </div>
    @endif
    <style type="text/css">
        .dplayer svg{
            width: 24px !important;
            cursor: pointer;
        }
        .dplayer-seek-backward{
            background-color: cccccc00;
            border: none;
        }
        .dplayer-seek-forward{
            background-color: cccccc00;
            border: none;
        }
    </style>
@stop
@section('scripts')
  <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
  <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>


  <script type="text/javascript">
    
    var skipButton = $('<button id="skipButton" style="bottom: 10px;color: rgba(255, 255, 255, .8);cursor: default;position: absolute;right: 1.75em;bottom: 0;right: 0;padding: 0.5em; border: 1px solid #333;background-color: #000;align-items: center;height: 2em;display: flex; z-index: 10;">Bỏ qua quảng cáo</button>');

    let adTimer;
    let skipped = false;
    let dp;
    let countdown = 5;
    let isSkippable = false; 
    let adPlayed = false;
    let clickCount = 0;
    let adTriggerCount = Math.floor(Math.random() * (4 - 2 + 1)) + 2;
    let adLink = '';
    let isAdPlaying = false; 
    var currentAdIndex = 0;
    var ads = @json($ads);

    var adsAll = @json($adsAll);    
    
    function setAdPlaying(flag) {
        isAdPlaying = flag;
    }
    function runAds(ads, index = 0) 
    {
        if (!ads || ads.length === 0) return;

        const ad = ads[index];
        if (ad.title && ad.title.trim() !== '') {
            // showRunningText(ad.title);

            setTimeout(() => {
                $('.running-text-container').remove();
                const nextIndex = (index + 1) % ads.length;
                runAds(ads, nextIndex);
            }, 15000);
        } else {
            const nextIndex = (index + 1) % ads.length;
            runAds(ads, nextIndex);
        }
    }


    function startAdTimer() {
        const initialCountdown = 5;
        countdown = initialCountdown;
        
        skipButton.show();
        clearInterval(adTimer);

        if (isSkippable) {
            skipButton.attr('disabled', true);
            skipButton.text(`Bỏ qua sau ${countdown} giây`);

            adTimer = setInterval(() => {
                countdown--;
                if (countdown > 0) {
                    skipButton.text(`Bỏ qua sau ${countdown} giây`);
                } else {
                    clearInterval(adTimer);
                    skipButton.text("Bỏ qua quảng cáo");
                    skipButton.attr('disabled', false);
                }
            }, 1000);
        } else {
            skipButton.hide();
            skipButton.attr('disabled', true);
        }
    }

    
    function showRunningText(text) {
        $('#dplayer').append('<div class="running-text-container"><div class="running-text">'+text+'</div></div>');
    }

    function hideRunningText() {
        const container = document.querySelector('.running-text-container');
        if (container) {
            container.remove();
        }
    }

    function skipAd() {
        if (dp) {
            skipped = true;
            skipButton.hide();
            clearInterval(adTimer);
            dp.switchVideo({ url: mainVideoUrl, type: 'customHls' });
            dp.video.currentTime = currentTime;
            dp.play();
            hideRunningText();
            if (overlay) {
                overlay.remove();
            }
        } else {
            console.error('DPlayer chưa được khởi tạo.');
        }
    }

    skipButton.hide();
    skipButton.click(function(){
        skipAd();
    });

    let clearTimeOutActiveAds;
    let adsInterval;
    let adUrl = ''; // Store ad link globally

    function activeAds() {
        clearTimeout(clearTimeOutActiveAds);
        clearTimeOutActiveAds = setTimeout(function() {
            $('#Iframe').css('z-index', -1);
        }, 10000);
    }

    $(document).ready(function() {

        $('#dplayer').append(skipButton);        
        runAds(adsAll);

        $('.videoIframe').append('<div id="adOverlay"></div>');
        $('#videoIframe').append(skipButton);

        function loadAd() {
            fetch('{{ route('ads.index.video') }}')
                .then(response => response.json())
                .then(data => {
                    if(data.ads) {
                        $('#adsVideo source').attr('src', data.ads.content);
                        adUrl = data.ads.link_ads;
                        $('#adsVideo')[0].load();
                        $('#adsVideo').show();
                        $('#Iframe').hide();
                        $('#adOverlay').hide();
                        isAdPlaying = true;

                        const iframeVideo = $('#Iframe')[0].contentWindow;
                        if (iframeVideo && iframeVideo.postMessage) {
                            iframeVideo.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
                        }

                        if (data.ads.skipable == 0) {
                            skipButton.hide();
                        } else {
                            startAdCountdown();
                        }
                    } else {
                        resetToMainVideo();
                    }
                })
                .catch(err => console.error("Error fetching video ad:", err));
        }

        $('#adsVideo').on('ended', function() {
            resetToMainVideo();
            isAdPlaying = false;
        });
        $('#Iframe').on('ended', function() {
            isAdPlaying = false;
        });

        function startAdCountdown() {
            $('#Iframe').css('z-index', -1);
            countdown = 5;
            skipButton.show().attr('disabled', true).text(`Bỏ qua sau ${countdown} giây`);

            adTimer = setInterval(() => {
                countdown--;
                if (countdown > 0) {
                    skipButton.text(`Bỏ qua sau ${countdown} giây`);
                } else {
                    clearInterval(adTimer);
                    skipButton.text("Bỏ qua quảng cáo").attr('disabled', false);
                }
            }, 1000);
        }

        function resetToMainVideo() {
            $('#adsVideo').hide();
            $('#Iframe').show();
            $('#Iframe').css('z-index', 1);
            $('#adOverlay').hide();
            clearInterval(adTimer);

            const iframeVideo = $('#Iframe')[0].contentWindow;
            if (iframeVideo && iframeVideo.postMessage) {
                iframeVideo.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
            }
            skipButton.hide();
        }

        skipButton.click(function() {
            if (!$(this).is(':disabled')) {
                resetToMainVideo();
            }
        });

        $('#adOverlay').off('click').on('click', function() {
            if (adUrl) {
                window.open(adUrl, '_blank');
            }
        });

        $('#adsVideo').on('ended', function() {
            resetToMainVideo();
        });

        $('#dplayer').click(function(event) {
            $('#Iframe').css('z-index', 1);
            if (isAdPlaying) {
                event.preventDefault();
                window.open(adUrl, '_blank'); 
            } else {
                activeAds();
            }
        });

        adsInterval = setInterval(loadAd, 300000);
        loadAd();
    });


</script>

<style>
</style>



@stop