@extends('layouts.admin')
@section('content')

<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
 </script>

<style>
    @media print {
        body {
          display: none;
        }
      }

      #canvas_container::-webkit-scrollbar {
        width: 5px;
        }

        /* Track */
        #canvas_container::-webkit-scrollbar-track {
        background: #green; 
        }
        
        /* Handle */
        #canvas_container::-webkit-scrollbar-thumb {
        background: white; 
        }

        /* Handle on hover */
        #canvas_container::-webkit-scrollbar-thumb:hover {
        background: green; 
        }

      #canvas_container {
          width: 100%;
          height: 800px;
          overflow: auto;
      }
      #canvas_container {
        background: green;
        text-align: center;
        border: solid 3px;
      }
      #navigation_controls{
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 3%;
        margin-top: 15px;
      }
      #navigation_controls div{
        display: flex;
        justify-content: center;
        width: 32%;
      }
      #navigation_controls div button{
        background: green;
        height: 30px;
        width: 80px;
        text-align: center;
        color: white;
        border: none;
        border-radius: 15px;
        font-size: 12px;
        font-weight: 600;
      }
      #navigation_controls div input{
        height: 30px;
        width: 80px;
        text-align: center;
        border: 1px solid green;
        border-radius: 15px;
        font-size: 12px;
        font-weight: 600;
      }
      #navigation_controls div button:hover{
        background: white;
        color: green;
        transition-duration: 300ms;
      }
      #zoom_controls{
        margin-bottom: 10px;
        display: flex;
        justify-content: end;
        gap: 10px;
      }
      #zoom_controls button{
        background: green;
        height: 30px;
        width: 30px;
        text-align: center;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 800;
      }
  </style>

  @php
      $file = $book->file_name
  @endphp

  

<div class="app-wrapper">
	    
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <div class="row g-3 mb-4 align-items-center justify-content-between">
                <div class="col-auto">
                    <h1 class="app-page-title mb-0">{{$book->title}}</h1>
                </div>
                <div class="col-auto">
                     <div class="page-utilities">
                        <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                            <div class="col-auto">
                                <form class="docs-search-form row gx-1 align-items-center">
                                    <div class="col-auto">
                                        <input type="text" id="search-docs" name="searchdocs" class="form-control search-docs" placeholder="Search">
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn app-btn-secondary">Search</button>
                                    </div>
                                </form>
                                
                            </div><!--//col-->
                            <div class="col-auto">
                                
                                <select class="form-select w-auto">
                                      <option selected="" value="option-1">All</option>
                                      <option value="option-2">Text file</option>
                                      <option value="option-3">Image</option>
                                      <option value="option-4">Spreadsheet</option>
                                      <option value="option-5">Presentation</option>
                                      <option value="option-6">Zip file</option>
                                      
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn app-btn-primary" data-toggle="modal" data-target="#exampleModalCenter"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-upload me-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                    <path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
                                    </svg>Add Book
                                </button>
                            </div>
                        </div><!--//row-->
                    </div><!--//table-utilities-->
                </div><!--//col-auto-->
            </div><!--//row-->
            <div class="row">
                <div id="my_pdf_viewer">
                    <div id="zoom_controls">  
                        <button id="zoom_in">+</button>
                        <button id="zoom_out">-</button>
                    </div>
                    <div id="canvas_container">
                        <canvas id="pdf_renderer"></canvas>
                    </div>
                    <div id="navigation_controls">
                        <div style="30">
                            <button id="go_previous">Previous</button>
                        </div>
                        <div>
                            <input id="current_page" value="1" type="number"/>
                        </div>
                        <div>
                            <button id="go_next">Next</button>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
    <script>
        
        const element = document.getElementById("pdf_renderer"); 
        element.addEventListener("contextmenu", (event) => { event.preventDefault();});
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
        const file = '{{$file}}';
        const str = './upload/';
        // const path = path.concat(file)
        console.log('./upload/'.concat(file))
     
        pdfjsLib.getDocument('/uploads/'.concat('{{$file}}')).then((pdf) => {
            myState.pdf = pdf;
            render();
        });
        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
         
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
                
     
                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }
        document.getElementById('go_previous').addEventListener('click', (e) => {
            if(myState.pdf == null || myState.currentPage == 1) 
              return;
            myState.currentPage -= 1;
            document.getElementById("current_page").value = myState.currentPage;
            render();
        });
        document.getElementById('go_next').addEventListener('click', (e) => {
            if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
               return;
            myState.currentPage += 1;
            document.getElementById("current_page").value = myState.currentPage;
            render();
        });
        document.getElementById('current_page').addEventListener('keypress', (e) => {
            if(myState.pdf == null) return;
         
            // Get key code 
            var code = (e.keyCode ? e.keyCode : e.which);
         
            // If key code matches that of the Enter key 
            if(code == 13) {
                var desiredPage = 
                document.getElementById('current_page').valueAsNumber;
                                 
                if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
                    myState.currentPage = desiredPage;
                    document.getElementById("current_page").value = desiredPage;
                    render();
                }
            }
        });
        document.getElementById('zoom_in').addEventListener('click', (e) => {
            if(myState.pdf == null) return;
            myState.zoom += 0.5;
            render();
        });
        document.getElementById('zoom_out').addEventListener('click', (e) => {
            if(myState.pdf == null) return;
            myState.zoom -= 0.5;
            render();
        });
    </script>
        
@endsection