@extends('layouts.app')
@section('titlePage', 'Manager Learning Content')
@section('content')
<script>
    document.getElementById("kts-13").classList.add("is-expanded");
    document.getElementById("ktss-13").classList.add("active","is-expanded");
    document.getElementById("view-13").classList.add("active");
</script>
<div class="page-wrapper">
    <!-- [ breadcrumb ] start -->
    <div class="breadcrumb-header justify-content-between">
        <div class="left-content">
            <span class="main-content-title mg-b-0 mg-b-lg-1">VIEW ALL</span>
        </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">Manage Study Guide</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-left:35rem!important;">
                                <!-- <a href="{{ _route('client.learning-content.create') }}" class="btn btn-info float-right">Create</a> -->
                                <button class="btn btn-secondary reset float-right"><i class="fa fa-times"></i> Reset</button>
                                <button class="btn btn-primary search float-right"><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="dt-ajax-array" 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>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($data as $value)
                                            <tr>
                                                <td>{{ $value->title }}</td>
                                                <td>{{ $value->code }}</td>
                                                <td>{{ !empty($countMap[$value->id]) ? $countMap[$value->id] : 0 }}</td>
                                                <td>
                                                    <a href="" class="btn btn-warning btn-sm preview" data-id="{{$value->id}}">Preview</a>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {{-- Pagination --}}
                            <div class="row">
                                <div class="col-md-6 mt-2">
                                    Showing {{$data->firstItem()}} to {{$data->lastItem()}} of {{$data->total()}} Entries
                                </div>
                                <div class="col-md-6">
                                    <div class="pull-right pagination custom-pagination justify-content-end mb-0">
                                        {!! $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" onClick="refreshPage()" 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.client-preview-naxeva-studyguide')}}',
                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');
           
        });

        </script>
        <script>
            function refreshPage(){
            window.location.reload();
            } 
  </script>
        <script src="https://player.vimeo.com/api/player.js"></script>
    @endsection