@extends('widgets.document.layout.mainlayout')

@section('page_css')
<style>
.hidden{display:none;}
.bg-backdrop{}

.sign-pad-button-submit, .sign-pad-button-clear {
    display: none;
}
.sign-pad-button-submit {
    margin-top: 5px;
    background-color: #3b82f6;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.sign-pad-button-submit:hover {
    background-color: #2563eb;
}
.sign-pad-button-clear {
    margin-top: 5px;
    background-color: #ef4444;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.sign-pad-button-clear:hover {
    background-color: #dc2626;
}

.signature-direction{
  position: absolute;
  width: 50px;
  height: 100px;
  z-index: 100;
  margin-top: -50px;
  top: 50%;
}

.signature-direction > button {
  height: 100%;
  width: 100%;
  background-color: #BBB;
  border:none;
}

.signature-direction > button:disabled, #controls > button:disabled { opacity: 0.5; cursor: not-allowed; }

.signature-direction.left{
  left:0px;
}

.signature-direction.right{
  right:0px;
}

#pdf-preview-wrap{ background-color:#eaeaea; }
#signature-wrapper { display: flex; flex-direction: column; align-items: center; }
#canvasContainer { /*border: 1px solid #000;*/ position: relative; }
#controls {text-align:center; position: absolute; width: 100%; z-index: 10; top: 5px;}
#controls > button{ margin:0 auto; }
#pageInfo { margin: 10px 0; font-weight: bold; }
</style>
@endsection

@section('content')
<div class="account-content">
    <div class="d-flex flex-wrap w-100 vh-100 overflow-hidden account-bg-01">
        <div id="pdf-preview-wrap" class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto w-50 bg-backdrop">
            @include('widgets.payment.partials._contract-preview')
        </div>
        @livewire('tenant.widget.payment.deal-payment-page', ['contract_id' => $contract->id, 'deal_id' => $deal->id, 'signer_id' =>  $signer->id]);
    </div>
</div>
@endsection

@section('page_js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/8.3.5/konva.min.js"></script>
<script src="https://unpkg.com/pdf-lib@1.17.0/dist/pdf-lib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.2/axios.min.js"></script>
<script src="https://unpkg.com/downloadjs@1.4.7/download.js" type="text/javascript"></script>
<script type="text/javascript">
    let pdfDoc, pdfDocLib, pageCount = 0, currentPage = 0;
    let stage, layer;
    let signatureFields = [];

    // Initialize Konva stage
    function initStage(width, height) {
      stage = new Konva.Stage({
        container: 'konvaStage',
        width: width,
        height: height
      });
      layer = new Konva.Layer();
      stage.add(layer);
    }

    // Render PDF page to canvas
    async function renderPage(pageNum) {
      const page = await pdfDoc.getPage(pageNum + 1); // pdf.js uses 1-based indexing
      const viewport = page.getViewport({ scale: 1.0 });
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise;

      // Clear previous stage
      if (stage) stage.destroy();
      initStage(viewport.width, viewport.height);

      // Add PDF as background image
      const img = new Image();
      img.src = canvas.toDataURL();
      const pdfImage = new Konva.Image({
        image: img,
        width: viewport.width,
        height: viewport.height
      });
      layer.add(pdfImage);

      // Draw signature fields
      signatureFields.filter(field => field.page === pageNum).forEach(field => {
        
        const sigImage = new Image();
        sigImage.src = field.image;
        const konvaImage = new Konva.Image({
            x: field.x,
            y: field.y,
            image: sigImage,
            width: 100,
            height: 30,
            id: field.id
        });
        layer.add(konvaImage);
      });

      layer.draw();
      updateControls();
    }

    // Update button states and page info
    function updateControls() {      
      document.getElementById('prevPage').disabled = currentPage === 0;
      document.getElementById('nextPage').disabled = currentPage === pageCount - 1;
      document.getElementById('pageInfo').textContent = `Page: ${pageCount === 0 ? 0 : currentPage + 1} of ${pageCount}`;
    }

    // Load PDF and coordinates on page load
    window.addEventListener('load', async () => {

      try {

        // Load saved coordinates
        const coordsResponse = await axios.get('{{ route("tenant.widgets.contract.get_all_template_signatures", [$contract->id, $contract->template_id]) }}');
        signatureFields = coordsResponse.data.map(field => ({
          ...field,
          isSaved: true
        })); console.log(signatureFields);

        const response = await fetch("{{ $signed_pdf_url }}");
        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
        }
        const arrayBuffer = await response.arrayBuffer();
        pdfDoc = await pdfjsLib.getDocument(arrayBuffer).promise;
        pdfDocLib = await PDFLib.PDFDocument.load(arrayBuffer);
        pageCount = pdfDoc.numPages;
        currentPage = 0;
        await renderPage(currentPage);
      } catch (error) {
        console.log(error);
      }
    });

    // Navigation controls
    document.getElementById('prevPage').addEventListener('click', async () => {
      if (currentPage > 0) {
        currentPage--;
        await renderPage(currentPage);
      }
    });


    document.getElementById('nextPage').addEventListener('click', async () => {
      if (currentPage < pageCount - 1) {
        currentPage++;
        await renderPage(currentPage);
      }
    });

    document.getElementById('downloadSignedDocument').addEventListener('click', async () => {

        // Embed signatures
        for (const field of signatureFields) {
            let signatureImage;
            const signatureResponse = await fetch(signatureImageUrl);
            if (!signatureResponse.ok) {
                throw new Error('Failed to fetch signature image');
            }
            const signatureArrayBuffer = await signatureResponse.arrayBuffer();
            signatureImage = await pdfDocLib.embedPng(signatureArrayBuffer);

          const page = pdfDocLib.getPage(field.page);
          const pageHeight = page.getHeight();
          const pdfY = pageHeight - field.y - 30; // Adjust for PDF bottom-left origin
          page.drawImage(signatureImage, {
            x: field.x,
            y: pdfY,
            width: 100,
            height: 30,
          });
        }

        // Save PDF
        const pdfBytes = await pdfDocLib.save(); 

        // Send PDF to Frontend
        download(pdfBytes, "signed-pdf-document-{{ rand(1000, 99999) }}.pdf", "application/pdf");
    });

</script>
@endsection