@extends('layouts.app')

@section('content')

<div class="container-fluid">

    <!-- if there are creation errors, they will show here -->
    @if ($errors->any())
    <div class="alert alert-danger">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- will be used to show any messages -->
    @if (Session::has('message'))
    <div class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        {{ Session::get('message') }}
    </div>
    @endif

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Build Worksheet </h1>
    </div>

    <div class="card shadow mb-4">
        <div class="row">
            <div class="col-lg-12">

                <div class="card-header text-right clearfix">
				<!--
				<a href="#" class="btn btn-primary btn-icon-split">
                        <span class="icon text-white-50">
                            <i class="fas fa-desktop"></i>
                        </span>
                        <span class="text">Student view</span>
					</a>
					-->
				    <a href="/worksheet" class="btn btn-primary btn-icon-split">
                        <span class="icon text-white-50">
                            <i class="fas fa-list"></i>
                        </span>
                        <span class="text">View All Worksheets </span>
                    </a>

                    <a href="/worksheet/{{ $worksheet->id }}/edit" class="btn btn-primary btn-icon-split">
                        <span class="icon text-white-50">
                            <i class="fas fa-edit"></i>
                        </span>
                        <span class="text">Edit worksheet </span>
                    </a>
                </div>

                <div class="card-body">
                    <h3>Modle title: {{ $worksheet->name }} </h3>
                    <p><b>Menu name:</b> {{ $worksheet->menu_name }} </p>
                    <p>
                        <b>Assigned to module:</b>
                        @if(isset($worksheet->module_id))
                        <a href="/module/{{ $worksheet->module_id }}">{{ $worksheet->modules->name }}</a>
                        @else
                        <a href="/worksheet/{{ $worksheet->id }}/edit">No assign module</a>
                        @endif

                    </p>
                    <hr>
                    <div class="row">

                        @if(isset($worksheet->media_script))
                        <!-- check if view is set -->
                        <div id="player-wrapper" class="col-md-12 text-center">
                            <!-- VIDEO BLOCK -->
                            {!! $worksheet->media_script != '' ? '<div id="player" class="youtube"
                                style="width:80%; height:400px;"></div>' : '' !!}
                        </div>
                        @endif
                        <div class="col-md-12 mt-4">
                            <p><b>Description:</b></p>
                            {!! nl2br($worksheet->description) !!}
                        </div>
                        
                    </div>

                </div>

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

</div>

@endsection

@section('scripts')
<!-- YouTube API load script -->
<script src="https://www.youtube.com/player_api"></script>

<script>



// create youtube player
var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        videoId: getUrlVideoID('{{ $worksheet->media_script }}'),
        playerVars: {
            rel: 0
        },
        events: {
            'onReady': onPlayerReady,
            //'onStateChange': onPlayerStateChange
        }
    });
}

function getUrlVideoID(url) {
    // example URL https://www.youtube.com/watch?v=DZC-HfvMZnM
    var url_string = url; //window.location.href
    var url = new URL(url_string);
    var v_id = url.searchParams.get("v");
    console.log(v_id);
    return v_id;
}


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

// when video ends
/*
function onPlayerStateChange(event) {        
	if(event.data === 0) {            
	   // alert('done');
	   //$('#show-quiz').show();
	   if(obj_ques == ''){
		   $('#next-slide').show();
	   }else{
		   $('#myModal').modal('show');
		   $('#quiz-button-popup').show();
	   }

	}
}
*/



</script>

@stop