@extends('student.layouts.app')
@section('titlePage', $data->title)
@section('content')
@php $brand = $dataConfigs['brand'] ?? 'default'; @endphp
<script>
    document.getElementById("dr-2").classList.add("active");
</script>

<style>
    .box{
    position: absolute;
    width: 81px;
    height: 47px;
    background: #323639;
    right: 59px;
    }
</style>

@php $view = is_null($viewed) ? 0 : $viewed; @endphp
<div class="page-wrapper">
    <!-- [ breadcrumb ] start -->
    <div class="page-header">
        <div class="page-block">
            <div class="breadcrumb-header justify-content-between">
                <div class="left-content">
                    <div class="card-header">
                        <h4 class="breadcrumb-item active font-weight-bolder">Study Guide</h4>
                    </div>
                </div>
                <div class="justify-content-center mt-2">
                    <ul class="breadcrumb breadcrumb-style3">
                        <li class="breadcrumb-item tx-15"><a href="{{ _route('student.learning-content.index')}}"><i class="feather icon-home"></i></a></li>
                        <li class="breadcrumb-item active">View</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- [ breadcrumb ] end -->
    <!-- [ Main Content ] start -->
    <div class="card">
    <div class="card-body">
    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-sm-6">
                    <img src="{{ asset($data->image) }}" alt="image" onerror="this.src='{{ asset('assets/b2c_img/courses.jpg') }}'; this.alt='default Image';"  class="img-flex" style="width:350px; height:380px">    
                </div>
                <div class="col-sm-6">
                    <!-- <div class="table-responsive">
                                <table class="table table-borderless">
                                    <tr>
                                        <td><b>Authors</b></td>
                                        <td>: {{ $data->author }}</td>
                                    </tr>
                                    <tr>
                                        <td><b>Views</b></td>
                                        @if($data->content_type == 'file')
                                            <td>: <span class="total_downloaded">{{ $countDownload->count_record ?? 0 }}</span></td>
                                        @else
                                            <td>: <span class="total_downloaded">{{ $countView->count_record ?? 0 }}</span></td>
                                        @endif
                                    </tr>
                                    <tr>
                                        <td><b>Created at</b></td>
                                        <td>: {{ $data->created_at->format('d M Y, H:i:s') }}</td>
                                    </tr>
                                </table>
                            </div> -->
                    <h5><b>Authors:</b></h5>
                    <p>{{ $data->author }}</p>
                    <!-- <h5><b>Views:</b></h5>
                    @if($data->content_type == 'file')
                    <span class="total_downloaded">{{ $countDownload->count_record ?? 0 }}</span></td>
                    @else
                    <span class="total_downloaded">{{ $countView->count_record ?? 0 }}</span></td>
                    @endif -->
                    <h5><b>Created at:</b></h5>
                    <p>{{ $data->created_at->format('d M Y, H:i:s') }}</p>
                    <h5 class=""><b>Subject:</b></h5>
                    <p class="">{{ $data->subject->subject_title }}</p>
                    <h5 class=""><b>Topic:</b></h5>
                    <p class="">{{ $data->topic->topic_name }}</p>
                    @php
                    $file_ext=explode('.', $data->content_file);
                    $ext =array('gif', 'png', 'jpg','GIF', 'PNG', 'JPG');
                    @endphp
                    @if(in_array(end($file_ext), $ext))
                    <a class="btn btn-primary download" href="{{ $data->content_file }}" data-toggle="modal" data-target="#modalMedia1">View</a>
                    @elseif($data->content_type === 'file')
                    <a class="btn btn-primary text-white" data-toggle="modal" data-target="#modalMedia2">View</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 {{$viewed ? 'viewed' : ''}}" data-toggle="modal" data-target="#modalMedia">
                        <i class="feather icon-play"></i>View
                    </button>
                    @else
                    <button class="btn btn-primary download {{$downloaded ? 'downloaded' : ''}}" data-link="{{ $data->content_file }}">{{ $data->content_file }}</button>
                    @endif
                </div>
            </div>
            <div class="row">
                <div class="col-12 m-1">
                    <h5 class="breadcrumb-item active"><b>Description:</b></h5>
                    {!! $data->description !!}
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
@if($data->content_type == 'video' || $data->content_type == 'audio' || $data->content_type == 'audio_url' || $data->content_type == 'video_url')
<div class="modal fade bd-example-modal-lg" id="modalMedia" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif
@if (in_array(end($file_ext), $ext))
<div class="modal fade bd-example-modal-lg" id="modalMedia1" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="{{ $data->content_file }}" alt="Image">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@elseif ($data->content_type === 'file')
<!-- Check if the file is a PDF -->
@if (pathinfo($data->content_file, PATHINFO_EXTENSION) === 'pdf')
<div class="modal fade bd-example-modal-lg" id="modalMedia2" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <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="box"></div>
                <iframe frameborder="0" scrolling="no" src="{{ str_replace('http://', 'https://', $data->content_file) }}" style="width: 100%; height: 500px;"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif
@endif
@endsection

@section('script')
@include('student.courses.inc.script-media-html',['data' => $data])
<script>
    $('#modalMedia').on('shown.bs.modal', function (e) {
        $('#modalMedia .modal-body').html($('#media-html').html())
        @if (!is_null($view))
        $.ajax({
                url: '{{ _route('student.learning-content.increaseView',$data->id)}}',
                headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'},
                processData: false,
                contentType: false,
                type: 'POST',
                datatype: 'json',
                success: function (response) {
                },
                error: function (err) {
                }
        });
        @endif
    });
    $('#modalMedia').on('hidden.bs.modal', function (e) {
        location.reload();
    });
    $('.download').on('click',function () {
        if(!$(this).hasClass('downloaded')){
            $(this).addClass('downloaded');
            $.ajax({
                url: '{{ _route('student.learning-content.increaseDownload',$data->id)}}',
                headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'},
                processData: false,
                contentType: false,
                type: 'POST',
                datatype: 'json',
                success: function (response) {
                    //$('.total_downloaded').html(parseInt($('.total_downloaded').html()) + 1)
					console.log(response);
					window.open();
                },
                error: function (err) {
                }
            });
        }
        
/*         setTimeout(() => {
            if (typeof $(this).data('link') !== 'undefined') {
                window.open($(this).data('link'),'_blank');
            }
        }, 3000); */
    });

    $(document).on('keydown', function(e) {
			if((e.ctrlKey || e.metaKey) && (e.key == "p" || e.charCode == 16 || e.charCode == 112 || e.keyCode == 80) ){
				alert("Please use the Print PDF button below for a better rendering on the document");
				e.cancelBubble = true;
				e.preventDefault();
				e.stopImmediatePropagation();
			}  
    });
		
    document.addEventListener('keyup', (e) => {
        if (e.key == 'PrintScreen') {
            navigator.clipboard.writeText('');
            alert('Screenshots disabled!');
        }
    });
</script>
@endsection