@extends('layouts.app')
@section('content')

<div class="container-fluid">

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

        @can('create_worksheets', App\Models\Worksheet::class)
        <a href="/worksheet/{{ $worksheet->id }}/edit" class="btn btn-sm btn-secondary btn-icon-split">
            <span class="icon text-white-50">
                <i class="fas fa-edit"></i>
            </span>
            <span class="text">Edit</span>
        </a>
        @endcan
    </div>

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

                <div class="card-header">

                                        

                    <form action="/enrollment" method="GET" class="clearfix">
                    @csrf


                    @if($prev > - 1)
                    <!-- Previous Button -->
                    <a href="/course/{{ $module->course_id }}/module/{{ $module->id }}/worksheets/{{ $items[$prev] }}"
                        class="btn btn-sm btn-primary btn-icon-split text-left">
                        <span class="icon text-white-50">
                            <i class="fas fa-arrow-left"></i>
                        </span>
                        <span class="text">Previous worksheet</span>
                    </a>
                    @endif

                    @if(isset($items[$next]))
                    <!-- Previous Button -->
                    <a href="/course/{{ $module->course_id }}/module/{{ $module->id }}/worksheets/{{ $items[$next] }}"
                        class="btn btn-sm btn-primary btn-icon-split text-left">
                        <span class="text">Next worksheet</span>
                        <span class="icon text-white-50">
                            <i class="fas fa-arrow-right"></i>
                        </span>

                    </a>
                    @endif

                    <input type="hidden" name="course_id" value="{{ $module->course_id }}">
                    <input type="hidden" name="module_id" value="{{ $worksheet->modules->id }}">
                    <input type="hidden" name="worksheet_id" value="{{ $worksheet->id }}">
                    <input type="hidden" name="user_id" value="{{ Auth::id() }}">
                    <input type="hidden" name="enrollment_status_id" value="1">
                    <input type="hidden" name="nextPage" value="{{ isset($items[$next]) ? $items[$next] : '' }}">
                    <input type="hidden" name="currentPage" value="{{ $worksheet->id }}">

                    <!-- Mark Comlete Button -->

                    @if( EnrollmentController::getStatus($worksheet->id) == 'completed')
                    <button class="btn btn-sm btn-success btn-icon-split float-right">
                        <span class="text">Completed</span>
                        <span class="icon text-white-50">
                            <i class="fas fa-check"></i>
                        </span>
                    </button>
                    @else
                    <button type="submit" class="btn btn-sm btn-primary btn-icon-split float-right">
                        <span class="text">Mark Completed</span>
                        <span class="icon text-white-50">
                            <i class="fas fa-check"></i>
                        </span>
                    </button>
                    @endif

                    </form>

                </div>

                <div class="card-body">
                    <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">
                            {!! nl2br($worksheet->description) !!}
                        </div>
                        
                        <div id="reply" class="col-md-12 mt-4 {{ $worksheet->question_box === 0 ? "d-none" : "" }}">
                            <hr>
                       
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="reply">Answer:</label> <span id="message"></span>
                                    <textarea id="reply-input" class="form-control" rows="2"></textarea>
                                </div>
                            </div>

                            <div id="reply-btn" class="col-md-12">
                                <div class="form-group">
                                    <button onclick="addComment()" class="btn btn-success">Submit</button>
                                </div>
                            </div>

                        </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();
	   }

	}
}
*/

function addComment() {

    var reply = $("#reply-input").val();
    var worksheet_id = "{{ $worksheet->id }}";

    $.ajax({
        method: "GET",
        url: "/worksheet-reply",
        dataType: 'json',
        data: {
            _token: "{{ csrf_token() }}",
            reply: reply,
            worksheet_id: worksheet_id
        },
        async: false,
        success: function(data) {
            $("#message").html(data.success);
            lockReply();
            console.log(data);
        }
    });
}

function lockReply() {
    $("#reply-input").prop("disabled", true);
    $("#reply-btn").hide();
}

$(document).ready(function() {

    $questionCheck  = "{{ $checkQuestion }}"
    $addQestionText = "{{ $getQuestionReply }}"

    if($questionCheck === "true") {
        lockReply();
        $("#reply-input").val($addQestionText);
    }
});


</script>

@stop