@extends('layouts.app')

@section('content')
<style>
    .profileImage {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 16px;
        font-weight: 900;
        color: #fff;
        text-align: center;
        line-height: 40px;
        margin: -2px 0;
    }
</style>

<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      @include('users.includes.sidebar')
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        @include('users.includes.header')

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
            <!-- Content -->
            {{-- @dd($contents) --}}
            <div class="container-xxl flex-grow-1 container-p-y">
              <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Home /</span> Papers</h4>

              <!-- Examples -->
              <div class="row mb-5">
                @if(isset($content))
                {{-- @dd($content) --}}
                    <div class="col-12">
                        <div class="card overflow-hidden" style="height: 800px">
                        <h5 class="card-header">Young Age Paper Content Viewer</h5>
                        <div class="card-body" id="both-scrollbars-example">
                            {{-- <img src="../assets/img/backgrounds/18.jpg" alt="scrollbar-image" /> --}}
                            <div id="adobe-dc-view"></div>
                            <script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
                            <script type="text/javascript">
                                document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
                                    // var adobeDCView = new AdobeDC.View({clientId: "be56255acee243c3b92ee0f8a278ace1", divId: "adobe-dc-view"});
                                    var adobeDCView = new AdobeDC.View({clientId: "cdbba801b6424d378cdd755973c4b747", divId: "adobe-dc-view"});
                                    adobeDCView.previewFile({
                                        content:{location: {url: "{{ url('/') }}/contents/{{$content->content}}"}},
                                        metaData:{fileName: "{{$content->name}}"}
                                    }, {defaultViewMode: "FIT_WIDTH", showAnnotationTools: false, showDownloadPDF: false, 
			showPrintPDF: false});
                                });
                            </script>
                        </div>
                        </div>
                    </div>
                    &nbsp;<hr/>&nbsp;<hr/>
                    <div class="col-12">
                        <div class="card overflow-hidden" style="height: 500px">
                        <h5 class="card-header">Comments</h5>
                        <div class="card-body" id="both-scrollbars-example">
                            <div method="POST" action="">
                                <div class="form-group">
                                    <label for="comment">Your Comment</label>
                                    <textarea class="form-control" id="comment" name="comment" placeholder="type your comment..."></textarea>
                                </div>
                                <div class="form-group" style="padding-top: 5px">
                                    <button type="button" id="postcomm" class="btn btn-primary" onclick="postComment()">Post</button>
                                </div>
                                
                            </div>
                            <div class="mt-2" style="border: 1px solid #d9dee3;border-radius: 0.375rem;padding:5px;height: calc(100% - 150px);overflow-y:auto" id="commentPanel">
                                
                            </div>
                        </div>
                        </div>
                    </div>
                @endif
                
              </div>
              <!-- Examples -->

             
              <!--/ Card layout -->
            </div>
            <!-- / Content -->

            <!-- Footer -->
            @include('users.includes.footer')
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>

<script>
    
    var paper_id = {{$content->id}}
    getComments(paper_id)
    function getComments(id){
        var user_id = {{Auth::id()}}
        var settings = {
            "url": "{{url('/')}}/api/user/fetchcomment",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            "data": {
                "paper_id": id,
                "user_id": user_id
            },
        };

        $.ajax(settings).done(function (response) {
            console.log(response);
            var data = response.data;
            var commentlist = ''
            var colors = ['#ff0000', '#00ff00', '#0000ff', '#512DA8', '#0498A6', '#EF6C01', '#BF360D', '#F4501E', '#014C3E', '#5C6BC0', '#AA47BD', '#6A9F39', '#798F9B', '#5D4138', '#00887A', '#8C6F62'];
            for (let i = 0; i < data.length; i++) {
                const element = data[i];
                var random_color = colors[Math.floor(Math.random() * colors.length)];

                var fulName = element.first_name+' '+element.last_name
                if(user_id == element.user_id){
                    fulName = 'You'
                }
                commentlist += '<div class="d-flex mb-3" >'+
                                    '<div class="flex-shrink-0 profileImage" style="background:'+random_color+'">'+
                                      '<span>'+ fulName.slice(0, 1) +'</span>'+
                                    '</div>'+
                                    '<div class="flex-grow-1 row" style="margin-left:1px">'+
                                      '<div class="col-12 mb-sm-0 mb-2">'+
                                        '<h6 class="mb-0">'+fulName
                                    
                                        commentlist+= ' <small>('+element.country+')</small></h6>'+
                                        '<small class="text-muted">'+element.comment+'</small>'+
                                      '</div>'+
                                     
                                    '</div>'+
                                '</div>'
                
            }
            $('#commentPanel').html(commentlist)
        });
    }

    function postComment(){
        $('#postcomm').prop('disabled', true)
        var user_id = {{Auth::id()}}
        var paper_id = {{$content->id}}
        var comment = $('#comment').val()
        if (comment == '') {
            alert('Comment cannot be empty')
            return;
        }
        var settings = {
            "url": "{{url('/')}}/api/user/postcomment",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            "data": {
                "user_id": user_id,
                "comment": comment,
                "paper_id": paper_id
            }
        };

        $.ajax(settings).done(function (response) {
            console.log(response);
            getComments(paper_id)
            $('#postcomm').prop('disabled', false)
        });
    }
</script>
@endsection