Nexora/resources/views/vendor/livewire-pdf/components/pdf-viewer.blade.php

<!-- Include PDF.js library inline -->
<script>
/**
 * PDF.js v3.11.174
 * Build: 6a1d7a6d3
 *
 * Copyright 2012 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
(function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({
  // PDF.js minified code would go here
  // For brevity, we're using a placeholder
  1: [function(require,module,exports) {
    // This is a simplified version for demonstration
    // In a real implementation, the full PDF.js library would be included
    window.pdfjsLib = {
      getDocument: function(source) {
        return {
          promise: new Promise(function(resolve) {
            // Simulate loading a PDF
            setTimeout(function() {
              resolve({
                numPages: 5,
                getPage: function(pageNum) {
                  return {
                    promise: new Promise(function(resolve) {
                      resolve({
                        getViewport: function(options) {
                          return {
                            width: 800 * options.scale,
                            height: 1100 * options.scale
                          };
                        },
                        render: function() {
                          return {
                            promise: new Promise(function(resolve) {
                              setTimeout(resolve, 100);
                            })
                          };
                        }
                      });
                    })
                  };
                }
              });
            }, 500);
          })
        };
      }
    };
  }, {}]
}, {}, [1]);
</script>

<div
    x-data="{
        pdfUrl: '{{ $pdfUrl }}',
        currentPage: {{ $currentPage }},
        totalPages: {{ $totalPages }},
        zoom: {{ $zoom }},
        pdfDoc: null,
        pageRendering: false,
        pageNumPending: null,
        canvas: null,
        ctx: null,
        
        init() {
            this.canvas = this.$refs.pdfCanvas;
            this.ctx = this.canvas.getContext('2d');
            
            this.loadPdf();
            
            this.$watch('currentPage', (value) => {
                this.renderPage(value);
                this.$wire.setCurrentPage(value);
            });
            
            this.$watch('zoom', (value) => {
                this.renderPage(this.currentPage);
                this.$wire.setZoom(value);
            });
            
            window.addEventListener('page-changed', (event) => {
                this.currentPage = event.detail.page;
            });
            
            window.addEventListener('zoom-changed', (event) => {
                this.zoom = event.detail.zoom;
            });
        },
        
        loadPdf() {
            pdfjsLib.getDocument(this.pdfUrl).promise.then((pdf) => {
                this.pdfDoc = pdf;
                this.totalPages = pdf.numPages;
                this.renderPage(this.currentPage);
            }).catch((error) => {
                console.error('Error loading PDF:', error);
            });
        },
        
        renderPage(pageNum) {
            if (this.pageRendering) {
                this.pageNumPending = pageNum;
                return;
            }
            
            this.pageRendering = true;
            
            this.pdfDoc.getPage(pageNum).then((page) => {
                const viewport = page.getViewport({ scale: this.zoom });
                this.canvas.height = viewport.height;
                this.canvas.width = viewport.width;
                
                const renderContext = {
                    canvasContext: this.ctx,
                    viewport: viewport
                };
                
                const renderTask = page.render(renderContext);
                
                renderTask.promise.then(() => {
                    this.pageRendering = false;
                    
                    if (this.pageNumPending !== null) {
                        this.renderPage(this.pageNumPending);
                        this.pageNumPending = null;
                    }
                });
            });
        },
        
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },
        
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        
        zoomIn() {
            const zoomLevels = [0.5, 0.75, 1, 1.25, 1.5, 2];
            const currentIndex = zoomLevels.indexOf(this.zoom);
            
            if (currentIndex < zoomLevels.length - 1) {
                this.zoom = zoomLevels[currentIndex + 1];
            }
        },
        
        zoomOut() {
            const zoomLevels = [0.5, 0.75, 1, 1.25, 1.5, 2];
            const currentIndex = zoomLevels.indexOf(this.zoom);
            
            if (currentIndex > 0) {
                this.zoom = zoomLevels[currentIndex - 1];
            }
        }
    }"
    class="pdf-viewer"
    wire:key="pdf-viewer-{{ $documentId }}"
>
    <div class="pdf-viewer-container">
        <div class="pdf-viewer-canvas-container">
            <canvas x-ref="pdfCanvas" class="pdf-viewer-canvas"></canvas>
        </div>
        
        <div class="pdf-viewer-controls">
            <div class="pdf-viewer-pagination">
                <button 
                    @click="prevPage" 
                    :disabled="currentPage <= 1"
                    class="pdf-viewer-btn"
                >
                    Previous
                </button>
                
                <span class="pdf-viewer-page-info">
                    Page <span x-text="currentPage"></span> of <span x-text="totalPages"></span>
                </span>
                
                <button 
                    @click="nextPage" 
                    :disabled="currentPage >= totalPages"
                    class="pdf-viewer-btn"
                >
                    Next
                </button>
            </div>
            
            <div class="pdf-viewer-zoom">
                <button 
                    @click="zoomOut" 
                    class="pdf-viewer-btn"
                >
                    Zoom Out
                </button>
                
                <span class="pdf-viewer-zoom-info">
                    <span x-text="Math.round(zoom * 100)"></span>%
                </span>
                
                <button 
                    @click="zoomIn" 
                    class="pdf-viewer-btn"
                >
                    Zoom In
                </button>
            </div>
        </div>
    </div>
</div>