@extends('layouts.app')
@section('titlePage', 'Manager Learning Content')
@section('content')
@push('script')
<script>
    document.getElementById("dra-10").classList.add("active");
</script>
@endpush
<div class="page-wrapper">
    <!-- [ breadcrumb ] start -->
    <div class="breadcrumb-header justify-content-between">
        <h4 class="text-primary font-weight-bold py-3 mb-0">
            MANAGE <span class="text-secondary">LEARNING CONTENT</span>
        </h4>
        <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">View All</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.5rem!important;">
                                <a href="{{ route_client_master('master.exams.learning-content.create') }}" class="btn btn-primary float-right text-capitalize">Create</a>
                                <button class="btn btn-primary search float-right"><i class="fa fa-search"></i> Search</button>
                                <button class="btn btn-secondary reset float-right"><i class="fa fa-times"></i> Reset</button>
                            </div>
                        </div>
                    </form>
                    <!-- <a href="{{ route_client_master('master.exams.learning-content.create') }}" class="btn btn-info float-right">Create</a> -->
                </div>
                <div class="card-body">
                    <div class="table-responsive dt-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">
                                        <thead>
                                            <tr role="row">
                                                <th>Subject</th>
                                               {{--   <th>Code</th>
                                                <th>View</th> --}}
                                                <th style="width: 170px;">Action</th>
                                                <th style="width: 170px;">Publish</th>
                                                <th style="width: 170px;">Preview</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if(count($data) > 0)
                                            @foreach ($data as $value)
                                            <tr>
                                                <td>{{ $value->title }}</td>
                                                {{-- <td>{{ $value->code }}</td> --}}
                                                <!-- <th>{{ !empty($countMap[$value->id]) ? ($countMap[$value->id] ?? 0) : ($countVideo[$value->id] ?? 0) }}</th> -->
                                                <td>
                                                    <div class="btn-icon-list btn-list justify-content-center align-items-baseline">
                                                        <a href="{{ route_client_master('master.exams.learning-content.edit', $value->id) }}" class="btn btn-circle-lg btn-primary-light flex-center"><i class="fe fe-edit tx-16"></i></a>
                                                        <div>
                                                            <form action="{{ route_client_master('master.exams.learning-content.destroy', $value->id) }}" method="POST" class="btn btn-circle-lg flex-center delete">
                                                                @csrf
                                                                <button type="submit" class="btn btn-circle-lg btn-danger flex-center"><i class="fe fe-trash tx-16"></i></button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="btn-icon-list btn-list justify-content-around">
                                                        <form action="{{ route_client_master('master.exams.learning-content.publish', $value->id) }}" method="POST" onclick="return confirm('Are you sure?');">
                                                            @csrf
                                                            @if ($value->is_published == 1)
                                                            <button type="submit" class="btn btn-outline-danger btn-rounded">Unpublish</button>
                                                            @else
                                                            <button type="submit" class="btn btn-outline-success btn-rounded">Publish</button>
                                                            @endif
                                                        </form>
                                                    </div>
                                                </td>
                                                <td>
                                                    <a href="" class="btn btn-warning btn-sm preview" data-id="{{$value->id}}">Preview</a>
                                                </td>
                                            </tr>
                                            @endforeach
                                            @else
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td>No data to display</td>
                                            </tr>
                                            @endif
                                        </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>
    <!-- [ Main Content ] end -->
</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>
@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('master.exams.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('<audio width="100%" controls><source src="' + response.data.content_file + '"></audio>');
                }else if(response.data.content_type == 'url' || response.data.content_type == 'video'){
                    $('.file').html('<video width="100%" controls><source src="' + response.data.content_file + '"></videoma>');
                } else if (response.data.content_type == 'audio_url') {
                    $('.file').html('<audio width="100%" controls><source src="' + response.data.content_file + '"></audio>');
                }else if(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