@extends('layouts.app')
@section('titlePage', 'Manager Learning Content')
@section('content')
<script>
    document.getElementById("kts-8").classList.add("is-expanded");
    document.getElementById("ktss-8").classList.add("active","is-expanded");
    document.getElementById("view-8").classList.add("active");
</script>
<div class="page-wrapper">
	 <!-- [ breadcrumb ] start -->
	 <div class="breadcrumb-header justify-content-between">
        <div class="left-content">
		<h5 class="breadcrumb-item  font-weight-bold">View All</h5>

        </div>
        <div class="justify-content-center mt-2">
            <ol class="breadcrumb breadcrumb-style3">
                <li class="breadcrumb-item tx-15"><a href=""><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item active">Management Study Guide</a></li>
            </ol>
        </div>
    </div>
	<!-- [ breadcrumb ] end -->
	<!-- [ Main Content ] start -->
	<div class="row">
		<div class="col-sm-12">
			<div class="card">
				<div class="card-header">
					
                    <form method="GET" id="form">
                        <div class="row col-12">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Select Subject <span class="text-red">*</span></label>
                                    <select name="subject_id" id="subject_id" class="form-control">
                                        <option value="">Select Subject</option>
                                        @foreach($masterSubject as $subject)
                                            <option
                                                {{ (!empty(old('subject_id')) ? old('subject_id') : (!empty($learningContent) ? $learningContent->subject_masters_id : '')) == $subject->id ? 'selected' : ''  }} value="{{$subject->id}}">{{$subject->subject_title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Select Topic<span class="text-red">*</span></label>
                                    <select name="topic_id" id="topic_id" class="form-control">
                                        <option value="">Select Topic</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="title">Study Guide Name</label>
                                <input type="text" value="{{request()->get('name')}}" name="name" id="study_name" class="form-control" >
                            </div>
                            <div class="col-md-12" style="padding-top: 1.75rem!important;">
                                <a href="{{ _route('client.learning-content.create') }}" class="btn btn-primary">Create</a>
                                <button class="btn btn-secondary"><i class="fa fa-times"></i> Reset</button>
                                <button class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                            </div>
                        </div>
                    </form>
				</div>
				<div class="card-body">

					<div class="table-responsive">
						<div id="dt-ajax-array_wrapper" class="dataTables_wrapper dt-bootstrap4">
							@include('common.alert')
							<div class="row">
								<div class="col-sm-12">
									<table id="responsiveDataTable" class="table table-bordered table-striped mg-b-0 text-md-nowrap" role="grid" aria-describedby="dt-ajax-array_info">
                                        <!-- <colgroup>
                                            <col style="width:25%">
                                            <col style="width:25%">
                                            <col style="width:25%">
                                            <col style="width:25%">
                                        </colgroup> -->
                                        <thead>
											<tr role="row">
												<th>Subject</th>
												<th>Code</th>
                                                <th>View</th>
                                                <th style="width:120px">Action</th>
                                                <th>Preview</th>
                                                <th >Status</th>
											</tr>
										</thead>
										<tbody>
											@foreach ($data as $value)
											@php
												$status = "Not published";
												$publish ="no";
												$send_approval = $value->send_approval;
												if($send_approval == "not_approved")
													$status = "Not published";
												elseif($send_approval == "admin_approved"){
													$status = "Published By Admin";
													$publish = 'yes';
												}
												elseif($send_approval == "send_to_approval")
													$status = "Waiting for Approval";
												elseif($send_approval == "staff_approved"){
													$status = "Published By Staff";
													$publish = 'yes';
												}
											@endphp
											<tr>
												<td>{{ $value->title }}</td>
												<td>{{ $value->code }}</td>
                                                <td>{{ !empty($countMap[$value->id]) ? ($countMap[$value->id] ?? 0) : ($countVideo[$value->id] ?? 0) }}</td>
                                           
												<td>
                                                <div class="btn-icon-list btn-list justify-content-around">
													<a href="{{ _route('client.learning-content.edit', $value->id) }}" class="btn btn-circle-lg btn-primary-light flex-center"><i class="fe fe-edit tx-15"></i></a>
													<form action="{{ _route('client.learning-content.destroy', $value->id) }}" method="POST" class="delete">
														@csrf
														<button type="submit"  class="btn btn-circle-lg btn-danger flex-center"><i class="fe fe-trash tx-15"></i></button>
													</form>
                                                </div>
                                                  
												</td>
                                                <td>
                                                <div class="btn-icon-list btn-list justify-content-around">
                                                <a href="" style="margin:5px;" class="btn btn-warning preview" data-id="{{$value->id}}">Preview</a>
                                            </div>
                                            </td>
                                            <td>
                                                @if($publish=='no' && is_client())
                                                
													<form action="{{ _route('client.learning-content.publish', $value->id) }}" method="POST" class="delete" style="margin:5px;">
														@csrf
														<button type="submit" class="btn btn-primary">Publish</button>
													</form>
                                          
                                            
													@elseif(is_client())
                                                   
													<form action="{{ _route('client.learning-content.unpublish', $value->id) }}" method="POST" class="delete" style="margin:5px;">
														@csrf
														<button type="submit" class="btn btn-secondary">Unpublish</button>
													</form>
                                              
													@endif
                                                </td>
											</tr>
											@endforeach
										</tbody>
									</table>
								</div>
							</div>
							{{-- Pagination --}}
                            <div class="row">
                        <div class="col-sm-12 col-md-12 mt-2">
                            <div class="pagination custom-pagination justify-content-end mb-0" id="dt-ajax-array_paginate">
                                {!! $data->appends(request()->all())->links() !!}
                            </div>
                        </div>
                    </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

    <div class="modal fade" id="popupPreview" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group">
                            <img width="100%" class="image_preview" src="" alt="">
                        </div>

                        <div class="form-group">
                            <label for="">Inherent:</label>
                            <span class="ml-2 inherent"></span>
                        </div>

                        <div class="form-group">
                            <label for="">Views:</label><span
                                class="ml-2 views"></span>
                        </div>

                        <div class="form-group">
                            <label for="">Created at:</label><span
                                class="ml-2 created_at"></span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="">Subject:</label><span
                                class="ml-2 subject"></span>
                        </div>
                        <div class="form-group">
                            <label for="">Topic:</label><span
                                class="ml-2 topic"></span>
                        </div>
                        <div class="form-group">
                            <label for="">Description:</label><span
                                class="ml-2 desc"> </span>
                        </div>
                        <div class="form-group file">
{{--                            @if($data->content_type == 'file')--}}
{{--                                <a download class="btn btn-primary" href="{{ ($data->content_file) }}">--}}
{{--                                    <i class="feather icon-download"></i>Download--}}
{{--                                </a>--}}
{{--                            @elseif($data->content_type == 'video'--}}
{{--                            || $data->content_type == 'audio'--}}
{{--                            || $data->content_type == 'audio_url'--}}
{{--                            || $data->content_type == 'video_url')--}}
{{--                                <button type="button" class="btn btn-primary download" data-toggle="modal" data-target="#exampleModal">--}}
{{--                                    <i class="feather icon-play"></i> View Content--}}
{{--                                </button>--}}
{{--                            @else--}}
{{--                                <a class="download {{!empty($downloaded) ? 'downloaded' : ''}}" href="{{ $data->content_file }}">{{ $data->content_file }}</a>--}}
{{--                            @endif--}}

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

            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        let masterTopicMap = JSON.parse(`null`);
        $('#subject_id').on('change',function (){
            let subject_id = $(this).val();
            let html = "";
            if(subject_id !== ""){
                $.each( masterTopicMap[subject_id], function( key, value ) {
                    html += `<option value="${value.id}">${value.topic_name}</option>`;
                });
            }else{
                html = `<option value="">Select Topic</option>`;
            }
            $('#topic_id').html(html);
        });

        $( document ).ready(function() {
            @if(!empty(request()->get('subject_id')))
                $('#subject_id').val({{request()->get('subject_id')}}).change();
            @endif

            @if(!empty(request()->get('topic_id')))
                $('#topic_id').val({{request()->get('topic_id')}}).change();
            @endif
        });

        $('.preview').on('click',function (e){
            e.preventDefault();
            let id = $(this).data('id');
            $.ajax({
                type: "POST",
                url: '{{ _route('client.learning-content.preview')}}',
                data: {
                    _token : '{{csrf_token()}}',
                    id : id,
                },
                success: function(response) {
                    $('#exampleModalLabel').text(response.data.title);
                    $('.image_preview').attr('src', response.data.image)
                    $('.views').text(response.countView.count_record);
                    $('.created_at').text(response.data.created_at);
                    $('.subject').text(response.data.subject.subject_title);
                    $('.topic').text(response.data.topic.topic_name);
                    $('.desc').html(response.data.description);
                    if (response.data.content_type == 'url') {
                        $('.file').html('<a download class="btn btn-primary" href="' + response.data.content_file + '"><i class="feather icon-download"></i>Download</a>');
                    }else if(response.data.content_type == 'url' || response.data.content_type == 'audio'){
                        $('.file').html('<video width="100%" controls><source src="' + response.data.content_file + '"></video>');
                    }else if(response.data.content_type == 'audio_url' || response.data.content_type == 'video_url'){
                        let videoid = response.data.content_file;
                        //let videoid = response.data.content_file.split('?v=');
                        $('.file').html('<iframe width="100%" height="300" src="' + videoid + '?autoplay=0"></iframe>');
                    //    $('.file').html('<div style="padding:75% 0 0 0;position:relative;"><iframe src="' + videoid + '&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Time and work - Edited - Arvind.mp4"></iframe></div>');
                    }else{
                        $('.file').html('<a class="download" href="' + response.data.content_file + '">'+response.data.content_file+'</a>');
                    }
                    console.log(response);
                    if(response.data.select_all == '1'){
                        $('.inherent').text('Select All');
                    }else{
                        $('.inherent').html(`<div style="margin-left: 20px">Campus: ${response.data.campus_title}
                                            <br>Degree : ${response.data.deg_spc_title}
                                            <br>Department : ${response.data.d_name}
                                            <br>Batch : ${response.data.batch_title}
                                            <br>Section : ${response.data.section_title}</div>`);
                    }
                    $('#popupPreview').modal('show');
                },

                    beforeSend: function() {
                        // $('.result_number_questions').eq(index).html(`Loading...`);
                    },
                });
            });
		$('.reset').on('click',function (e) {
            $('#subject_id').val('');
            $('#topic_id').html('<option value="">Select Topic</option>');
            $('#study_name').val('');
        });
        $('.close').on('click',function (e) {
            $('#popupPreview').modal('hide');
           
        });
        $('.close').on('click', function (e) {
        location.reload();
        });
        </script>
        <script>
            function refreshPage(){
            window.location.reload();
            } 
        </script>
        <script src="https://player.vimeo.com/api/player.js"></script>
    @endsection