@php
    if (!isset($pdfUrl)) {
        $pdfUrl = 'download/catalogo.pdf';
    }
    $pdfName = str_replace('.pdf', '', str_replace('download/', '', $pdfUrl));
@endphp

@php
    $pagename = 'pdfviewer';
@endphp

@extends('layouts/master_hf')

@section('body')
    <div class="tm-sidebars-1 tm-isblog tm-header-wrapper">

        <div id="menu-bar">
            <button type="button" onclick="window.location.href='{{ url($previusroute) }}'" id="prev-page-top" class="btn"><i class="bi bi-arrow-left ml-2"></i> Torna indietro</button>
            <button id="index-button" class="ms-4">Indice <i class="bi bi-list"></i></button>
            <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
                <b style="font-size: clamp(16px, 2vw, 20px)" class="px-3">{{ ucfirst(strtolower($pdfName)) }}</b>

                <span id="page-info">Page: <span id="page-num"></span> / <span id="page-count"></span></span>
            </div>

            <div style="margin-left: auto;">
                <button id="zoom-in"><i class="bi bi-zoom-in"></i></button>
                <button id="zoom-out"><i class="bi bi-zoom-out"></i></button>

                <button id="help-button"><i class="bi bi-question-circle"></i></button>
                <a href="{{ $pdfUrl }}" download><button id="download-button"><i
                            class="bi bi-download"></i></button></a>
            </div>
        </div>
        <div id="loading-spinner" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1002;">
            <div class="spinner"></div>
        </div>
        <div id="pdf-viewer"></div>
        <button id="prev-button"><i class="bi bi-chevron-left"></i></button>
        <button id="next-button"><i class="bi bi-chevron-right"></i></button>
        <div id="help-text">
            <h3>Help / Aiuto</h3>
            <div class="english-section">
                <h4>English</h4>
                <p>Use the navigation buttons to move between pages.</p>
                <p>Use the zoom buttons to adjust the view size.</p>
                <p>Click and drag to pan around the document when zoomed in.</p>
                <p>Use Ctrl + mouse wheel to zoom in and out.</p>
                <p>Use mouse wheel to scroll up and down when zoomed in.</p>
                <p>Click the index button to view and jump to specific pages.</p>
            </div>
            <div class="italian-section">
                <h4>Italiano</h4>
                <p>Usa i pulsanti di navigazione per spostarti tra le pagine.</p>
                <p>Usa i pulsanti di zoom per regolare la dimensione della visualizzazione.</p>
                <p>Clicca e trascina per spostarti nel documento quando ingrandito.</p>
                <p>Usa Ctrl + rotella del mouse per ingrandire e rimpicciolire.</p>
                <p>Usa la rotella del mouse per scorrere su e giù quando ingrandito.</p>
                <p>Clicca il pulsante indice per visualizzare e saltare a pagine specifiche.</p>
            </div>
            <button id="close-help" style="font-size: 18px; display: block; margin: 20px auto;">Close / Chiudi</button>
        </div>
        <div id="page-index" style="display: none;"></div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.7.107/pdf.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        <style>
            #pdf-viewer {
                width: 100%;
                display: flex;
                justify-content: center;
                background-color: #f5f5f5;
                overflow-x: auto;
                overflow-y: auto;
                margin: 0 auto;
                cursor: grab;
                min-height: 700px;
            }

            #pdf-viewer:active {
                cursor: grabbing;
            }

            #menu-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 20px;
                background-color: #4a4a4a;
                color: white;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                position: sticky;
                top: 0;
                z-index: 1001;
                font-size: 18px;
            }

            #menu-bar button {
                padding: 8px 15px;
                margin: 0 5px;
                background-color: #6a6a6a;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: background-color 0.3s;
                font-size: 18px;
            }

            #menu-bar button:hover {
                background-color: #8a8a8a;
            }

            canvas {
                margin: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            #prev-button,
            #next-button {
                position: fixed;
                top: 50%;
                transform: translateY(-50%);
                height: 50%;
                width: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(74, 74, 74, 0.7);
                border: none;
                cursor: pointer;
                z-index: 1000;
                color: white;
                font-size: 60px;
                transition: background-color 0.3s;
            }

            #prev-button:hover,
            #next-button:hover {
                background: rgba(74, 74, 74, 0.9);
            }

            #prev-button {
                left: 0;
                border-radius: 0 5px 5px 0;
            }

            #next-button {
                right: 0;
                border-radius: 5px 0 0 5px;
            }

            #page-info {
                font-size: 18px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            #help-text {
                display: none;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: white;
                padding: 20px;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                z-index: 1002;
            }

            #page-index {
                position: fixed;
                top: 12rem;
                left: 13rem;
                background-color: white;
                padding: 10px;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                max-height: 80vh;
                overflow-y: auto;
                z-index: 1001;
            }

            #page-index button {
                display: block;
                width: 100%;
                text-align: left;
                padding: 5px;
                margin: 2px 0;
                background: none;
                border: none;
                cursor: pointer;
            }

            #page-index button:hover {
                background-color: #f0f0f0;
            }

            .spinner {
                width: 50px;
                height: 50px;
                border: 5px solid #f3f3f3;
                border-top: 5px solid #FFD700;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        </style>
        <script>
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.7.107/pdf.worker.min.js';

            var pdfDoc = null,
                pageNum = 1,
                pageRendering = false,
                pageNumPending = null,
                scale = 1,
                canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d'),
                isDragging = false,
                startX, startY, scrollLeft, scrollTop;

            document.getElementById('pdf-viewer').appendChild(canvas);

            const pdfViewer = document.getElementById('pdf-viewer');
            const pageIndex = document.getElementById('page-index');
            const loadingSpinner = document.getElementById('loading-spinner');

            document.getElementById('prev-button').addEventListener('click', onPrevPage);
            document.getElementById('next-button').addEventListener('click', onNextPage);

            function renderPage(num) {
                pageRendering = true;
                pdfDoc.getPage(num).then(function(page) {
                    var viewport = page.getViewport({
                        scale: scale
                    });
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    var renderTask = page.render(renderContext);
                    renderTask.promise.then(function() {
                        pageRendering = false;
                        if (pageNumPending !== null) {
                            renderPage(pageNumPending);
                            pageNumPending = null;
                        }
                    });
                });

                document.getElementById('page-num').textContent = num;
            }

            function queueRenderPage(num) {
                if (pageRendering) {
                    pageNumPending = num;
                } else {
                    renderPage(num);
                }
            }

            function onPrevPage() {
                if (pageNum <= 1) {
                    return;
                }
                pageNum--;
                queueRenderPage(pageNum);
            }

            function onNextPage() {
                if (pageNum >= pdfDoc.numPages) {
                    return;
                }
                pageNum++;
                queueRenderPage(pageNum);
            }

            function onZoomIn() {
                scale = Math.min(scale * 1.2, 3.0);
                queueRenderPage(pageNum);
            }

            function onZoomOut() {
                scale = Math.max(scale / 1.2, 1);
                queueRenderPage(pageNum);
            }

            document.getElementById('zoom-in').addEventListener('click', onZoomIn);
            document.getElementById('zoom-out').addEventListener('click', onZoomOut);

            document.getElementById('help-button').addEventListener('click', function() {
                document.getElementById('help-text').style.display = 'block';
            });

            document.getElementById('close-help').addEventListener('click', function() {
                document.getElementById('help-text').style.display = 'none';
            });

            document.getElementById('index-button').addEventListener('click', function() {
                pageIndex.style.display = pageIndex.style.display === 'none' ? 'block' : 'none';
            });

            pdfViewer.addEventListener('wheel', function(e) {
                if (e.ctrlKey) {
                    e.preventDefault();
                    if (e.deltaY < 0) {
                        onZoomIn();
                    } else {
                        onZoomOut();
                    }
                } else if (scale > 1) {
                    pdfViewer.scrollTop += e.deltaY;
                }
            });

            pdfViewer.addEventListener('mousedown', function(e) {
                if (scale > 1) {
                    isDragging = true;
                    startX = e.pageX - pdfViewer.offsetLeft;
                    startY = e.pageY - pdfViewer.offsetTop;
                    scrollLeft = pdfViewer.scrollLeft;
                    scrollTop = pdfViewer.scrollTop;
                }
            });

            pdfViewer.addEventListener('mouseleave', function() {
                isDragging = false;
            });

            pdfViewer.addEventListener('mouseup', function() {
                isDragging = false;
            });

            pdfViewer.addEventListener('mousemove', function(e) {
                if (!isDragging) return;
                e.preventDefault();
                const x = e.pageX - pdfViewer.offsetLeft;
                const y = e.pageY - pdfViewer.offsetTop;
                const walkX = (x - startX) * 1.5;
                const walkY = (y - startY) * 1.5;
                pdfViewer.scrollLeft = scrollLeft - walkX;
                pdfViewer.scrollTop = scrollTop - walkY;
            });

            // Load the PDF document using the provided URL
            loadingSpinner.style.display = 'block';
            pdfjsLib.getDocument("{{ $pdfUrl }}").promise.then(function(pdfDoc_) {
                pdfDoc = pdfDoc_;
                // Update the page count display with total number of pages
                document.getElementById('page-count').textContent = pdfDoc.numPages;
                // Render the initial page
                renderPage(pageNum);

                // Get the outline (table of contents) of the PDF
                pdfDoc.getOutline().then(function(outline) {
                    if (outline) {
                        // Loop through each outline item
                        outline.forEach(function(item) {
                            // Create a button for each outline entry
                            const button = document.createElement('button');

                            button.textContent = item.title;

                            // Add click event to navigate to the destination page
                            button.onclick = async function() {
                                try {
                                    const destination = await item.dest;
                                    const pageIndex = await pdfDoc.getPageIndex(destination[0]);
                                    // Update current page number (add 1 since page index is 0-based)
                                    pageNum = pageIndex + 1;
                                    // Queue the page rendering
                                    queueRenderPage(pageNum);
                                } catch (error) {
                                    console.error('Error navigating to page:', error);
                                }
                            };
                            // Add the button to the page index container
                            pageIndex.appendChild(button);
                        });

                        // Add click event listener to document to close index when clicking outside
                        document.addEventListener('click', function(event) {
                            if (!pageIndex.contains(event.target) && event.target.id !== 'index-button') {
                                pageIndex.style.display = 'none';
                            }
                        });
                    }
                    loadingSpinner.style.display = 'none';
                });
            });
            </script>
    @endsection