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

@section('page_css')
<style>
.hidden{display:none;}
.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;
}

.bg-backdrop{}

/*** New Stuff **/
#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; }
#coords { margin-top: 10px; }
#signatureField { cursor: move; }
#signatureModal, #signatureInsertModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
#signatureModalContent, #signatureInsertModalContent { background: white; padding: 20px; border-radius: 5px; text-align: center; }
#signaturePad { border: 1px solid #000; width: 300px; height: 60px; }
/** End **/

#page-loader {
    background: #000 url('https://cdn.dribbble.com/users/807926/screenshots/3629667/loadingtwo.gif') center center;
    background-repeat: no-repeat;
    background-size: 300px;
    opacity:85%;
    position: absolute;
    height: 100%;
    width: 100%;
    left:0;
    top:0;
    z-index:100;
    display:none;
}
</style>
@endsection

@section('content')
<div id="page-loader" class="preloader"></div>
<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.contract._pdf-preview')
        </div>
        <div class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto p-4 w-50 bg-backdrop">
            <form id="frmSubmitSignature" action="{{ $post_url }}" method="POST" class="flex-fill"> 
                @csrf
                <div class="mx-auto mw-450">
                    <div class="text-left mb-1">
                        <img src="/assets/images/logo-500x200.svg" alt="Logo" width="200" class="img-fluid">
                    </div>
                    <div class="mb-4">
                        <h4 class="mb-2 fs-20">Contract Information</h4>
                        <p>{{ $contract->description }}</p>
                    </div>
                    <div class="mb-3">
                        <h6 class="mb-3 fw-semibold">Deal Information</h6>
                        @if ($errors->any())
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <div  class="alert alert-primary" role="alert">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <ul>
                            <li class="row mb-3"><span class="col-6">Deal Name</span><span class="col-6">{{ $deal->name }}</span></li>
                            <li class="row mb-3"><span class="col-6">Deal Amount</span><span class="col-6">{{ $deal->amount }}</span></li>
                            <li class="row mb-3"><span class="col-6">Email</span><span class="col-6">{{ $contact->email }}</span></li>
                            <li class="row mb-3"><span class="col-6">Phone</span><span class="col-6">{{ $contact->phone }}</span></li>
                            <li class="row mb-3"><span class="col-6">Address</span><span class="col-6">{{ $contact->address }}</span></li>
                            <li class="row mb-3"><span class="col-6">Created At</span><span class="col-6">{{ $contract->created_at }}</span></li>
                        </ul>	
                    </div>
                    <div class="mb-3 border-top">
                        <div class="row mt-3">
                            <div class="col-6">
                                <a href="{{ $invoice_url }}" target="_blank" class="btn btn-danger w-100">
                                  Invoice
                                  <span class="btn-icon-right"><i class="ti ti-pdf"></i></span>
                                </a>
                            </div>
                            <div class="col-6">
                                <button id="btnSubmit" type="button" class="btn btn-success w-100" disabled>
                                    <span class="spinner-border spinner-border-sm mr-2 d-none" id="btnCreateLeadLoading" aria-hidden="true"></span>
                                    <span id="btnCreateLeadText">
                                        Submit
                                        <span class="btn-icon-right"><i class="ti ti-check"></i></span>
                                    </span>
                                </button>
                            </div>                            
                        </div>
                    </div>
                    <div class="border-top mb-4">
                        <div class="text-center mt-3">
                          <p class="fw-medium text-gray">Copyright &copy; 2024 - CRMS</p>
                        </div>
                    </div>
                </div>
            </form>
        </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://cdnjs.cloudflare.com/ajax/libs/axios/1.6.2/axios.min.js"></script>
<script src="https://unpkg.com/pdf-lib@1.17.0/dist/pdf-lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script src="https://unpkg.com/downloadjs@1.4.7/download.js" type="text/javascript"></script>
<script type="text/javascript">
    let pdfDoc, pageCount = 0, currentPage = 0;
    let signatureFields = [];
    let stage, layer, selectedField = null;
    const pdfId = '{{ $contract->id }}';
    const signer_id = '{{ $signer->id }}';
    const deal_id = '{{ $deal->id }}';
    const signatureImageUrl = '{{ asset("/assets/images/btn-insert-signature.png") }}';
    let signaturePad;
    let pendingNavigation = false;
    let direction = 'next';
    let start_signing = false, signature_field_index = 0;
    let isCompleted = false, isSaved = false, page_loader = $('#page-loader');
    let all_has_signed = false, make_payment = false;

    let signed_thanks_url = "{{ route('tenant.widgets.contract.signed_thanks', ['contract_id' => $contract->id, 'signer_id' => $signer->id, 'type' => $signer->holder_type]) }}",
        contract_payment_url = "{{ route('tenant.widgets.payment.deal_contract.index', ['contract_id' => $contract->id, 'signer_id' => $signer->id]) }}";

    // 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 => {
        if (field.signatureData) {
          // Draw signed signature as image
          const sigImage = new Image();
          sigImage.src = field.signatureData;
          const konvaImage = new Konva.Image({
            x: field.x,
            y: field.y,
            image: sigImage,
            width: 100,
            height: 30,
            id: field.id
          });
          konvaImage.on('click', () => {
            selectedField = field.id;
          });
          layer.add(konvaImage);
        } else {
          if(start_signing){
            const sigImage = new Image();
            sigImage.src = signatureImageUrl;
            const konvaImage = new Konva.Image({
              x: field.x,
              y: field.y,
              image: sigImage,
              width: 100,
              height: 30,
              id: field.id
            });
            konvaImage.on('click', () => {
              insertSignature(field.id);
            });
            layer.add(konvaImage);
          } else{
            var textGroup2 = new Konva.Group({
                x: field.x,
                y: field.y,
                draggable: true
            });
            const konvaText = new Konva.Text({
              text: 'Sign Here',
              padding: 4,
              fontSize: 14,
              fontFamily: 'Arial',
              fill: '#fff'
            });
            const backgroundRect2 = new Konva.Rect({
                x: 0,
                y: 0,
                width: 80,
                height: 22,
                fill: field.color,
                stroke: 'darkgreen',
                strokeWidth: 2,
            });
            textGroup2.add(backgroundRect2);
            textGroup2.add(konvaText);
            layer.add(textGroup2);
          }
        }
      });

      layer.draw();
      updateControls();
      updateSavePdfButton();
    }

    // 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}`;
    }

    // Update button states and visibility
    function updateSavePdfButton() {
      // Check if all required signature fields are signed
      const allSigned = signatureFields.every(field => !field.isSaved || !!field.signatureData) && isCompleted;
      
      // Disable startSign button if all signed
      document.getElementById('startSign').disabled = allSigned;
      
      // Hide nextSignature button if no unsigned fields remain
      const hasUnsignedFields = signatureFields.some(field => field.isSaved && !field.signatureData);
      document.getElementById('nextSignature').style.display = start_signing && hasUnsignedFields ? 'block' : 'none';
      
      // Enable/disable submit button
      document.getElementById('btnSubmit').disabled = hasUnsignedFields ? true : false;
    }

    // Initialize signature pad
    function initSignaturePad() {
      const canvas = document.getElementById('signaturePad');
      canvas.width = 300;
      canvas.height = 60;
      signaturePad = new SignaturePad(canvas);
    }

    // Save PDF with signatures
    async function savePdfWithSignatures() {
      try {
        
        // Load PDF with pdf-lib.js
        const pdfResponse = await fetch("{{ $signed_pdf_url }}");
        if (!pdfResponse.ok) {
          throw new Error('Failed to fetch PDF');
        }
        const pdfArrayBuffer = await pdfResponse.arrayBuffer();
        const pdfDocLib = await PDFLib.PDFDocument.load(pdfArrayBuffer);

        // Embed signatures
        for (const field of signatureFields) {
          let signatureImage;
          if (field.signatureData) {
            const signatureBytes = Uint8Array.from(atob(field.signatureData.split(',')[1]), c => c.charCodeAt(0));
            signatureImage = await pdfDocLib.embedPng(signatureBytes);
          } else {
            const signaturePath = '/signature/image';
            const signatureResponse = await fetch(signaturePath);
            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-{{ $random_number }}.pdf", "application/pdf");
        
        // Send PDF to Backend
        // saveSignedPDF(pdfBytes);

        return 'Generated updated PDF successfully';
        
      } catch (error) {
        console.error('Error saving PDF:', error);
        throw new Error('Failed to save PDF: ' + error.message);
      }
    }

    // Show signature modal
    function showSignatureModal(fieldId) {
      
      document.getElementById('signatureModal').style.display = start_signing ? 'none' : 'flex';

      document.getElementById('addSignatureBtn').onclick = async () => {
        if (signaturePad.isEmpty()) {
          alert('Please provide a signature.');
          return;
        }
        start_signing = true;
        const dataUrl = signaturePad.toDataURL('image/png');
        const field = signatureFields.find(f => f.id === fieldId); 
        saveSignatureImage(dataUrl);
        if (field) {
          field.signatureData = dataUrl;
          field.isSaved = true;
        }
        // document.getElementById('signatureModal').style.display = 'none';
        try {
          const unsignedField = signatureFields.find(field => field.page === currentPage && field.isSaved && !field.signatureData);
          if (unsignedField) {
            showSignatureModal(unsignedField.id); // Prompt for next unsigned field
          } else {
            currentPage = signatureFields[signature_field_index]['page'];
            await renderPage(currentPage);
            document.getElementById('signatureModal').style.display = 'none';
          }
        } catch (error) {
          alert('Failed to update page: ' + error.message);
        }
      };

      document.getElementById('clearPad').onclick = () => signaturePad.clear();
    }

    function insertSignature(fieldId){
      document.getElementById('signatureInsertModal').style.display = 'flex';
      document.getElementById('yesInsert').onclick = async () => {
        const dataUrl = signaturePad.toDataURL('image/png');
        const field = signatureFields.find(f => f.id === fieldId); 
        if (field) {
          field.signatureData = dataUrl;
          field.isSaved = true;
        }
        await renderPage(currentPage);
        document.getElementById('signatureInsertModal').style.display = 'none';
        if(currentPage == pageCount - 1) checkIfCompleted();
      }
      document.getElementById('cancelSignature').onclick = () => {
        document.getElementById('signatureInsertModal').style.display = 'none';
      }
    }

    function checkIfCompleted(){

      page_loader.fadeIn();

      const pollInterval = setInterval(() => {
        if (isCompleted && isSaved) {
          page_loader.fadeOut();
          updateSavePdfButton();
          clearInterval(pollInterval); // Stop the interval
        } 
      }, 1000);
    }

    document.getElementById('nextSignature').addEventListener('click', async () => {
      if (currentPage < pageCount - 1) {
        ++signature_field_index; 
        currentPage = signatureFields[signature_field_index]['page'];
        await renderPage(currentPage);
      }
    });

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

      try {

        // Initialize signature pad
        initSignaturePad();

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

        const response = await fetch("{{ $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;
        pageCount = pdfDoc.numPages;
        currentPage = 0;
        await renderPage(currentPage);

      } catch (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('btnSubmit').addEventListener('click', async () => {
      
      if (!pdfDoc || signatureFields.length === 0) {
        alert('No signature fields to save or no PDF loaded.');
        return;
      }

      try {
        
        const message = await savePdfWithSignatures();

        if(make_payment && all_has_signed){
          if(confirm(message + '. Do you want to make payment now?')){
            location.href = contract_payment_url;
          } else{
            location.href = signed_thanks_url;
          }
        } else{
          location.href = signed_thanks_url;
        }

      } catch (error) {
        alert(error.message);
      }
    });

    document.getElementById('startSign').addEventListener('click', async () => {       
      await renderPage(signatureFields[signature_field_index]['page']);
      insertSignedDate();
      document.getElementById('startSign').style.display = 'none';
      document.getElementById('nextSignature').style.display = 'block';
      showSignatureModal(signatureFields[signature_field_index]['id']);
    });

    async function insertSignedDate(){
      try {
        const response = await fetch("{{ route('tenant.widgets.contract.insert_signature_date', array($contract->id, $deal->id, 'deals')) }}");

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        isCompleted = true;

      } catch (error) {
        console.error('Error:', error);
      }
    }

    async function saveSignatureImage(dataURL){
      
      try {

          fetch("{{ route('tenant.widgets.contract.save_signature_image', ['contract_id' => $contract->id, 'holder_id' => $deal->id, 'holder_type' => 'deals']) }}", {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
              },
              body: JSON.stringify({ signature: dataURL, contract_id: '{{ $contract->id }}', signer_id: '{{ $signer->id }}', role_id: '{{ $signer->template_signature_role_id }}', holder_id: '{{ $deal->id }}', holder_type: 'deals' })
          })
          .then(response => response.json())
          .then(data => {
            // This is where you handle the returned data!
            console.log('Success: Returned data:', data);  // Log or process it
            
            // Example actions based on common response shapes:
            if (data.code) {
                isSaved = true;
                all_has_signed = data.all_signed;
                make_payment = data.make_payment; 
            } else {
                alert('Error: ' + (data.message || 'Unknown error'));
            }
          });

      } catch (error) {
        console.error('Error:', error);
      }
    }
</script>
@endsection