@extends('frontend.layouts.app')
@section('title')
    {{ $content_for }} -
@endsection
@push('style')
@endpush
@section('content')
    @include('frontend.layouts.include.breadcrumb', [
        'items' => array_filter([
            $submenu ? ['name' => $submenu, 'url' => '#'] : null,
            $content_for ? ['name' => $content_for, 'url' => $subsubmenu ? '#' : null] : null,
            $subsubmenu ? ['name' => $subsubmenu, 'url' => null] : null,
        ]),
    ])

    <div class="main-content">
        <div class="container-fluid mt-4">
            <div class="row justify-content-center">
                @forelse ($files as $file)
                    <div class="col-12 col-md-4">
                        @if ($file->file_title)
                            <h2 class="pdf-header text-white text-center py-3 rounded">{{ $file->file_title }}</h2>
                        @endif
                        <div class="pdf-card mt-3" data-pdf="{{ asset($file->file_path) }}"></div>
                    </div>
                @empty
                    <h6 class="text-center" style="color: #858585	">No media found.</h6>
                @endforelse
            </div>
            <div class="mb-5">
                {{ $files->links('vendor.pagination.frontend') }}
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.10.111/pdf.min.js"></script>
    <script>
        document.querySelectorAll(".pdf-card").forEach((card) => {
            const url = card.getAttribute("data-pdf");
            card.innerHTML = `
      <div class="pdf-controls-left">
        <button class="prev-page"><i class="fa fa-arrow-left"></i></button>
        <button class="next-page"><i class="fa fa-arrow-right"></i></button>
        <button class="zoom-out"><i class="fa fa-minus"></i></button>
        <button class="zoom-in"><i class="fa fa-plus"></i></button>
        <span class="page-info">Page: <span class="page-num">1</span>/<span class="page-count">1</span></span>
      </div>
      <div class="pdf-controls-right">
        <a href="${url}" download><i class="fa fa-download"></i></a>
      </div>
      <div class="pdf-container">
        <canvas></canvas>
      </div>
    `;

            const canvas = card.querySelector("canvas");
            const ctx = canvas.getContext("2d");
            const container = card.querySelector(".pdf-container");
            const pageNumEl = card.querySelector(".page-num");
            const pageCountEl = card.querySelector(".page-count");

            let pdfDoc = null,
                pageNum = 1,
                pageCount = 0,
                scale = 1.0,
                defaultScale = 1.0;

            pdfjsLib.getDocument(url).promise.then((doc) => {
                pdfDoc = doc;
                pageCount = doc.numPages;
                pageCountEl.textContent = pageCount;

                pdfDoc.getPage(1).then((page) => {
                    const viewport = page.getViewport({
                        scale: 1
                    });
                    defaultScale = container.clientWidth / viewport.width;
                    scale = defaultScale;
                    renderPage(pageNum);
                });
            });

            function renderPage(num) {
                pdfDoc.getPage(num).then((page) => {
                    const viewport = page.getViewport({
                        scale: scale
                    });

                    canvas.width = viewport.width;
                    canvas.height = viewport.height;

                    page.render({
                        canvasContext: ctx,
                        viewport: viewport
                    });

                    // 🔥 AUTO HEIGHT FIX
                    container.style.height = viewport.height + 'px';

                    container.scrollLeft = 0;
                    container.scrollTop = 0;

                    pageNumEl.textContent = num;
                });
            }


            // Buttons
            card.querySelector(".prev-page").addEventListener("click", () => {
                if (pageNum > 1) {
                    pageNum--;
                    renderPage(pageNum);
                }
            });
            card.querySelector(".next-page").addEventListener("click", () => {
                if (pageNum < pageCount) {
                    pageNum++;
                    renderPage(pageNum);
                }
            });
            card.querySelector(".zoom-in").addEventListener("click", () => {
                scale += 0.2;
                renderPage(pageNum);
            });
            card.querySelector(".zoom-out").addEventListener("click", () => {
                if (scale > defaultScale) {
                    scale -= 0.2;
                    renderPage(pageNum);
                }
            });

            window.addEventListener("resize", () => renderPage(pageNum));

            // Drag scroll
            let isDragging = false,
                startX, startY, scrollLeft, scrollTop;
            container.addEventListener("mousedown", (e) => {
                isDragging = true;
                container.classList.add("grabbing");
                startX = e.pageX - container.offsetLeft;
                startY = e.pageY - container.offsetTop;
                scrollLeft = container.scrollLeft;
                scrollTop = container.scrollTop;
            });
            container.addEventListener("mouseleave", () => {
                isDragging = false;
                container.classList.remove("grabbing");
            });
            container.addEventListener("mouseup", () => {
                isDragging = false;
                container.classList.remove("grabbing");
            });
            container.addEventListener("mousemove", (e) => {
                if (!isDragging) return;
                e.preventDefault();
                const x = e.pageX - container.offsetLeft;
                const y = e.pageY - container.offsetTop;
                container.scrollLeft = scrollLeft + (startX - x);
                container.scrollTop = scrollTop + (startY - y);
            });
        });
    </script>
@endpush