@extends('layouts.vertical-individual', ["page_title"=> "Social Feed"])

@section('content')
@php
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
@endphp
<div id="pageloader">
   <img src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>
<!-- Start Content-->
<div class="container-fluid">
    <!-- end page title -->
    @if (session()->has('message'))
        <div class="alert alert-success mt-3">
            {{ session()->get('message') }}
        </div>
    @endif
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title font-14">{{$article->title}}</h4>
            </div>
            <p class="font-12">{{$article->description}}</p>
        </div>
        
        <div class="card"> 
        @foreach($article->contents as $content)
            <div class="col-12">
                @if($content->type == 'text')
                    {!! $content->content !!}
                @elseif($content->type == 'image')
                    <img src="{{$content->content}}" class="rounded me-1 mb-3 mb-sm-0 img-fluid reel-image">
                @elseif($content->type == 'video')
                    <video controls>
                      <source src="{{$content->content}}" type="video/mp4">
                      <source src="{{$content->content}}" type="video/ogg">
                      Your browser does not support the video tag.
                    </video>
                @elseif($content->type == 'pdf')
                    <p><a class="btn btn-primary" download target="_blank" href="{{$content->content}}">Download PDF file.</a></p>
                @elseif($content->type == 'youtube')
                    <section class="parent">
                        <div class="youtubeWrapper">
                            <div id="player"></div>
                        </div>
                        <div id="jQueryUiSlider"></div>
                    </section>
                    @php
                    preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $content->content, $match);
                    $youtube_id = $match[1];
                    @endphp
                    <!-- <div class="video">
                        <iframe src="https://www.youtube.com/embed/{{$youtube_id}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div> -->
                @endif
                
            </div>
        @endforeach
            <hr />
            <p>If Video is not loaded, please Reload the Video using below button</p>
            <div class="button-list">
                <button class="btn btn-dark float-start" id="reload-btn">Reload Video</button>
                <button class="btn btn-success float-end" id="next-btn">I've completed this lesson. Take me to Next Lesson</button>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div> <!-- container -->
<style type="text/css">
    .footer {
        position: relative;
    }
    .container {
        max-width: 100%!important;
        background-color:#fff;
        padding:0px;
    }
    .container-fluid {
        border: 1px solid #ccc;
    }
    .page-title-box .page-title{
        line-height: 50px;
    }

    video, .youtubeWrapper iframe {
      width: 100%;
      height: 60vw;
    }
    video, {
      width: 100%;
      max-height: 80vh;
    }
    .reel-image {
      max-width: 100%;
      max-height: 80vh;
    }
    #pageloader {
      background: rgba( 255, 255, 255, 0.8 );
      display: none;
      height: 100%;
      position: fixed;
      width: 100%;
      z-index: 9999;
    }

    #pageloader img {
      left: 50%;
      margin-left: -32px;
      margin-top: -32px;
      position: absolute;
      top: 50%;
    }

    #jQueryUiSlider .ui-slider-handle {
      outline: 0;
      background: #fc0000;
      border-radius: 50%;
      top:-3px;
      margin-left: -6px;
      width: 12px;
      height: 12px;
    }

    #jQueryUiSlider .ui-slider-range {
        background: #fc0000;
    }
    #jQueryUiSlider.ui-slider-horizontal {
      top: 1em;
      height: 6px;
      border: none;
      background: #ccc;
    }

</style>
@endsection
@section('script')
@if($content->type == 'youtube')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />

<script src="/assets/js/timeme.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>

<script type="text/javascript">
    TimeMe.initialize({
        currentPageName: "my-home-page", // current page
        idleTimeoutInSeconds: 30 // seconds
    });

    


    var player;
    $(document).ready(function() {
        $('#next-btn').prop('disabled', true); 
    });

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            videoId: '{{$youtube_id}}',
            playerVars: { 
                'autoplay': 0,
                'controls': 0, 
                'rel' : 0,
                'fs' : 0,
            },
            events: {
                'onReady': onPlayerReady
            },
        });
    }

    function onPlayerReady(event) {
        //event.target.playVideo();
        //player.mute();
    }
    // $(document).ready(function() {
    //     var clicks = false;
    //     $(".youtubeWrapper").click(function() {
    //         if (clicks == 0) {
    //             player.unMute();
    //         } else {
    //             player.mute();
    //         }
    //         clicks = !clicks;
    //     });
    // });

    // Executes the first 5 times a user leaves the page
    TimeMe.callWhenUserLeaves(function(){
        console.log("The user is not currently viewing the page!");
        player.pauseVideo()
    }, 5);

    // Executes every time a user returns
    TimeMe.callWhenUserReturns(function(){
        console.log("The user has come back!");
        player.playVideo()
    });


    var currentTimeArray = [];
    var maxValueInArray = 0;
    var totalTime = 0;
    var currTime = 0;
    var isComplete = false;
    function atul() {
        currTime = Math.round(player.getCurrentTime() - 20);
        currentTimeArray.push(currTime);
        maxValueInArray = Math.max(...currentTimeArray);
        totalTime = Math.round(player.getDuration() - 10);
        var totalPlayedPercentage = maxValueInArray / totalTime * 100;
        leftVideo = 100 - totalPlayedPercentage;
        $(".stopper").css("width", leftVideo + "%");
        if(player.getDuration() <= player.getCurrentTime()) {
            if(!isComplete)
                Swal.fire({
                  title: 'Good job!',
                  text: 'You have successfully completed this chapter. please click on the next button below to continue to next chapter',
                  icon: 'success',
                  confirmButtonText: "Take me to Next Lesson",
                  confirmButtonClass: 'btn btn-success',
                }).then(function (result) {
                    if(result.isConfirmed == true && result.value == true) {
                        $('#next-btn').trigger('click');
                    }
                    console.log(result)
                });
            isComplete = true;
        }


        if(maxValueInArray >= totalTime) {
            $('#next-btn').removeAttr('disabled');
        }
        return currTime;
    }
    setTimeout(function() {
        var iframeWidth = $(".youtubeWrapper iframe").width();
        $(".parent").css("width", iframeWidth);
        setInterval(atul, 1000);
        function moveVideoProgressThumb(){
          var getcurrTime = Math.round(player.getCurrentTime());
          currentTimeArray.push(getcurrTime)
          $("#jQueryUiSlider").slider('value',getcurrTime);
        }
        setInterval(moveVideoProgressThumb,1000);
        $("#jQueryUiSlider").slider({
            range: "min",
            min: 0,
            value: 0,
            max: Math.round(player.getDuration()),
            slide: function(event, ui) {
                if (ui.value > maxValueInArray)
                return false;
                player.seekTo(ui.value);
            }
        });
        // var myDate = new Date();
        // var videoStartTime = "Feb 05 2020 09:05:00";
        // var $initialTime = new Date(videoStartTime);
        // var differenceTime = myDate.getTime() - $initialTime.getTime();
        // var diffInSeconds = Math.floor((differenceTime) / (1000));
        // if (diffInSeconds > 0) {
        //   //player.seekTo(diffInSeconds);
        // }
        // if (diffInSeconds > Math.round(player.getDuration())) {
        //   console.log("ended");
        //   $(".youtubeWrapper").addClass("videoEnded");
        //   $("#jQueryUiSlider").addClass("videoEnded");
        // }
    }, 2000);


    $(".youtubeWrapper").hover(function() {
        $(this).toggleClass("hovered");
    });

</script>
@endif

<script type="text/javascript">
    $(document).ready(function(){
        $('#reload-btn').on('click', function(event){
            window.location.reload();
        })

        $('#next-btn').on('click', function(event){
            $("#pageloader").fadeIn();
            $.ajax({
                type: "GET",
                url: 'lmsarticlemarkcomplete?article={{$article->id}}',
                processData: false,
                contentType: false,
                success: function( data ) {
                    console.log(data)
                    $("#pageloader").fadeOut();
                    if(data.status == 'success') {
                        window.top.invokenext('{{$article->id}}');
                    } else {
                        
                    }
                },
            });
        });
    });
</script>
@endsection