@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._invoice-preview')
        </div>
        <div class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto w-50" style="background-color:#fff;">
            <div class="mx-auto mw-450">
                <div class=" text-center mb-1">
                    <img src="/assets/images/logo-500x200.svg" alt="Logo" width="200" class="img-fluid">
                </div>
              
                <div class="mb-4 text-center">
                    <h4 class="mb-2 fs-20 text-uppercase text-danger">Thank You!</h4>
                    <p>Thanks, your billing address has been saved. <br />Your invoice has been emailed to email address <span class="text-bold">{{ $contact->email }}</span>.</p>
                    <p>Please pay your invoice amount of <span class="text-bold">${{ number_format($invoice->total/100, 2) }} {{ $invoice->currency_code }}</span> by <span class="text-bold">{{ $invoice->due_date->format('d/m/Y') }}</span>.</p>
                </div>

                <div class="mb-3 border-top">
                  <div class="row mt-3">
                    <div class="col-4 offset-4">
                        <a href="{{ route('tenant.widgets.invoice.download', $invoice_id) }}" data-href="{{ $invoice_pdf_url }}" target="_blank" class="btn btn-danger w-100">
                          Invoice
                          <span class="btn-icon-right"><i class="ti ti-pdf"></i></span>
                        </a>
                        <!-- <a href="" target="_blank" class="btn btn-success mt-1">Download Invoice</a> -->
                    </div>
                  </div>
            </div>
        </div>
    </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 = [];
    const signatureImageUrl = '{{ $signature_image_url }}';

    // 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);

      layer.draw();
    }

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

      try {

        const response = await fetch("{{ $invoice_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);
      }
    });

</script>
@endsection