@push('style')
  @vite(['resources/css/pdf_style.css'])
@endpush

<div class="row" id="slideIframe">
  <div class="col">
    <div class="pdfContent mx-auto">
      <!-- Header Toolbar -->
      <div class="toolbar header-toolbar">
        <button id="prev-header" class="newTooltip back">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35" fill="none">
            <path d="M21.75 25L14.25 17.5L21.75 10" stroke="#757575" stroke-width="1.5" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
          <span class="newTooltipText">Previous</span>
        </button>
        <div class="page mx-5">
          Page: <span id="page_num_header"></span> /
          <span id="page_count_header"></span>
          <input type="number" id="page_input_header" class="mx-3 text-center" min="1" placeholder="Page #"
            title="Enter page number" />
        </div>
        <button id="next-header" class="newTooltip next">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35" fill="none">
            <path d="M14.25 25L21.75 17.5L14.25 10" stroke="#757575" stroke-width="1.5" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
          <span class="newTooltipText">Next</span>
        </button>
      </div>

      <!-- PDF Canvas -->
      <canvas id="pdfCanvas" class="w-100"></canvas>

      <!-- Footer Toolbar -->
      <div class="toolbar footer-toolbar">
        <button id="prev-footer" class="newTooltip back">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35" fill="none">
            <path d="M21.75 25L14.25 17.5L21.75 10" stroke="#757575" stroke-width="1.5" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
          <span class="newTooltipText">Previous</span>
        </button>
        <div class="page mx-5">
          Page: <span id="page_num_footer"></span> /
          <span id="page_count_footer"></span>
          <input type="number" id="page_input_footer" class="mx-3 text-center" min="1" placeholder="Page #"
            title="Enter page number" />
        </div>
        <button id="next-footer" class="newTooltip next">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35" fill="none">
            <path d="M14.25 25L21.75 17.5L14.25 10" stroke="#757575" stroke-width="1.5" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
          <span class="newTooltipText">Next</span>
        </button>
      </div>
    </div>
  </div>
</div>

@push('script')
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
  <script>
    // const url = "/upload/de luyen thi/Lớp 9/Toan/De1/Q.pdf";
    var url = @json($filePath);
    let pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      scale = 2,
      canvas = document.getElementById("pdfCanvas"),
      ctx = canvas.getContext("2d");

    function renderPage(num) {
      pageRendering = true;
      pdfDoc.getPage(num).then((page) => {
        const viewport = page.getViewport({
          scale
        });
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };

        const renderTask = page.render(renderContext);
        renderTask.promise.then(() => {
          pageRendering = false;
          if (pageNumPending !== null) {
            renderPage(pageNumPending);
            pageNumPending = null;
          }
        });
      });

      // Update page numbers in both toolbars
      document.getElementById("page_num_header").textContent = num;
      document.getElementById("page_num_footer").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 onPageInput(e, toolbar) {
      if (e.key === "Enter") {
        const inputPageNum = parseInt(e.target.value, 10);
        if (inputPageNum > 0 && inputPageNum <= pdfDoc.numPages) {
          pageNum = inputPageNum;
          queueRenderPage(pageNum);
        } else {
          alert("Invalid page number.");
        }
      }
    }

    // Event listeners for header toolbar
    document.getElementById("prev-header").addEventListener("click", onPrevPage);
    document.getElementById("next-header").addEventListener("click", onNextPage);
    document.getElementById("page_input_header").addEventListener("keypress", (e) => onPageInput(e, "header"));

    // Event listeners for footer toolbar
    document.getElementById("prev-footer").addEventListener("click", onPrevPage);
    document.getElementById("next-footer").addEventListener("click", onNextPage);
    document.getElementById("page_input_footer").addEventListener("keypress", (e) => onPageInput(e, "footer"));

    pdfjsLib.getDocument(url).promise.then((pdfDoc_) => {
      pdfDoc = pdfDoc_;
      document.getElementById("page_count_header").textContent = pdfDoc.numPages;
      document.getElementById("page_count_footer").textContent = pdfDoc.numPages;
      renderPage(pageNum);
    });
  </script>
@endpush