@extends('layouts.app')

@section('content')
<div class="page-title">
    <div class="row">
        <div class="col-12 col-md-6 order-md-1 order-last">
            <h3>Data Video</h3>
            
        </div>
        <div class="col-12 col-md-6 order-md-2 order-first">
            <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Data Video</li>
                </ol>
            </nav>
        </div>
    </div>
</div>
<section class="section">
    <div class="card">
        <div class="card-body">
            @if($row)
            <div class="row">
                <h3>{{ $row->name }}</h3>
                <hr>
                <div class="col-md-8">
                    <div class="ratio ratio-16x9">
                        <!-- <iframe id="video-id" src="{{ $row->video_url }}" allowfullscreen style="max-width: 100%;height: 100%"></iframe> -->
                        <div id="player"></div>
                    </div>
                </div>
                <br>
                <hr>
                @if($watch)
                    <a href="{{ url('quiz/materi/show-quiz/'.$row->quiz_id) }}" target="_blank" class="btn btn-outline-primary">MULAI QUIZ</a>
                @endif
            </div>
            @endif
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://www.youtube.com/player_api"></script>
<script>
    var player;
    (function() {
        setTimeout(refresh, 1*60*1000);
    })();
    // setTimeout(() => {
    //         $.post("{{ url('quiz/materi/update-show-video') }}",{id:{{ $row->quiz_id }}});
    //     }, 1*60*1000);

    player = new YT.Player('player', {
            width: '640',
            height: '390',
            videoId: '{{ $row->video_url }}',
            events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
            }
        });

    function refresh() {
        $.post("{{ url('quiz/materi/update-show-video') }}",{id:{{ $row->quiz_id }}});
    }


    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            width: '640',
            height: '390',
            videoId: '{{ $row->video_url }}',
            events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
            }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            // location.href = "{{ url('quiz/materi/show-quiz/'.$row->quiz_id.'/'.$row->id) }}";
            location.href = "{{ url('quiz/materi/show-quiz/'.$row->quiz_id) }}";
        }
    }
</script>
@endpush