{% extends 'esign/base.html' %}
{% load static %}
{% block content %}
  {% if can_sign %}
  {% else %}
  <div class="card mb-3 p-3">

    <p class="text-danger fw-bold">
      You cannot sign yet. Please wait for previous users to sign first.
    </p>
    </div>

  {% endif %}

{% if can_sign %}

<style>
  
body { background: #f5f5f5; font-family: 'Inter', sans-serif; }
.card { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.sig-thumb { max-height: 60px; cursor: grab; border: 1px solid #ccc; border-radius: 6px; padding: 4px; transition: transform 0.2s; }
.sig-thumb:hover { transform: scale(1.1); border-color: #000; }
.drag-sig { cursor: move; transition: 0.2s; }
.drag-sig:hover { opacity: 0.85; }
canvas { cursor: crosshair; border-radius: 6px; border: 1px solid #ddd; }
.btn-bw { background-color: #000; color: #fff; border: 1px solid #111; font-weight: 500; }
.btn-bw:hover { background-color: #fff; color: #000; }
.pdf-page-wrapper { margin-bottom: 20px; display: inline-block; position: relative; }
#pdf-container { background: #fff; overflow-y: auto; overflow-x: hidden; height: 80vh; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }
.fixed-left { position: sticky; top: 80px; }
.sig-wrapper { position: relative; display: inline-block; }
.delete-sig {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff4d4f;
  color: #fff;
  font-weight: bold;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid #fff;
  z-index: 10;
}
.delete-sig:hover { background: #ff0000; }

.sig-box-db {
  position: absolute;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

@media (max-width: 767px) {
  .fixed-left { position: static; top: auto; }
  .col-lg-4, .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
  canvas { width: 100% !important; height: auto !important; }
  #pdf-container { height: 60vh; }
}

.readonly-page { opacity: 1; pointer-events: none; }

</style>









<div class="container-fluid my-4">
  <div class="row">

    <!-- Left Sidebar -->
    <div class="col-12 col-lg-4 mb-3">
      <div class="fixed-left">

        <!-- Draw New Signature -->
        <div class="card p-3 mb-3">
          <h5 class="fw-semibold mb-2">Draw New Signature</h5>
          <canvas id="draw-canvas" width="400" height="120" class="w-100 mb-2"></canvas>
          <button id="save-sig" class="btn btn-bw w-100 mb-2">Save Drawn Signature</button>
        </div>

        <!-- Text Signature -->
        <div class="card p-3 mb-3">
          <h5 class="fw-semibold mb-2">Text Signature</h5>
          <input type="text" id="text-sign" class="form-control mb-2" placeholder="Type your signature">
          <div class="d-flex mb-2">
            <select id="font-select" class="form-select me-2">
              <option value="Arial">Arial</option>
              <option value="Courier New">Courier New</option>
              <option value="Georgia">Georgia</option>
              <option value="Times New Roman">Times New Roman</option>
              <option value="Verdana">Verdana</option>
              <option value="Tahoma">Tahoma</option>
              <option value="Trebuchet MS">Trebuchet MS</option>
              <option value="Impact">Impact</option>
              <option value="Lucida Console">Lucida Console</option>
              <option value="Palatino Linotype">Palatino Linotype</option>
            </select>
            <input type="color" id="text-color" class="form-control" value="#000000">
          </div>
          <button id="save-text-sig" class="btn btn-bw w-100">Save Text Signature</button>
        </div>



         <div class="card p-3 mb-3">
          <h5 class="fw-semibold mb-2">Upload Image Signature</h5>
          <input type="file" id="image-sign" accept="image/*" class="form-control mb-2">
          <img id="preview-image-sign" src="" alt="Preview" class="w-100 mb-2" style="display:none; border:1px solid #ddd; padding:5px;">
          <button id="save-image-sig" class="btn btn-bw w-100">Save Image Signature</button>
        </div>


      
      </div>
    </div>

    <!-- Right Column: PDF Preview -->
    <div class="col-12 col-lg-8">
      <div class="card p-3">
        <h5 class="fw-semibold mb-3">PDF Preview      Pages you can sign: {{ allowed_pages_list|join:", " }}
  </h5>  
<style>
  #sig-list {
  gap: 8px; /* spacing between signatures */
}
.sig-wrapper {
  flex: 0 0 auto; /* prevent wrapping */
}

</style>
        <div id="sig-list" class="d-flex flex-row flex-nowrap overflow-auto mb-3">
          {% for s in saved_signatures %}
            <div class="position-relative me-2 sig-wrapper">
              <img src="{{ s.image.url }}" 
                  class="sig-thumb sig-select" 
                  data-id="{{ s.id }}" draggable="true">
              <span class="delete-sig">&times;</span>
            </div>
          {% empty %}
            <p class="text-muted">No signatures saved.</p>
          {% endfor %}
        </div>

        
        <div id="pdf-container"></div>
        <button id="apply-btn" class="btn btn-bw w-100 mt-3">Apply Signatures</button>
      </div>
    </div>

  </div>
</div>

<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/pdf.js/2.16.105/pdf.worker.min.js"></script>

<script>
const signatureBoxes = {{ signature_boxes|safe }};
let selectedSignature = null;

// Draw signature
const drawCanvas = document.getElementById('draw-canvas');
const ctx = drawCanvas.getContext('2d');
let drawing=false;
drawCanvas.addEventListener('mousedown', ()=>{ drawing=true; ctx.beginPath(); });
drawCanvas.addEventListener('mouseup', ()=>drawing=false);
drawCanvas.addEventListener('mousemove', e=>{
  if(!drawing) return;
  const rect = drawCanvas.getBoundingClientRect();
  ctx.lineWidth = 3; ctx.lineCap = 'round'; ctx.strokeStyle = '#000';
  ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
  ctx.stroke(); ctx.beginPath(); ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
});


document.getElementById('save-sig').addEventListener('click', ()=>{
  const dataUrl = drawCanvas.toDataURL('image/png');

   const urlParts = window.location.href.split('/');
    const encodedEmail = urlParts[urlParts.length - 1]; // last part
    const email = atob(encodedEmail); // decode base64

    
  fetch("{% url 'upload_signature' %}", {
    method:'POST', headers:{'Content-Type':'application/json','X-CSRFToken':'{{ csrf_token }}'},
    
    body:JSON.stringify({image:dataUrl,name:'drawn',email:email})
}).then(r => r.json()).then(j => {
    if(j.ok) {
        alert('Saved drawn signature. Reload page.');
        location.reload(); // reload page after alert
    } else {
        alert('Error saving');
    }
});
});

const urlParts = window.location.href.split('/');
const encodedEmail = urlParts[urlParts.length-1]; // last part of URL
const email = atob(encodedEmail); // decode Base64


// Save text signature
document.getElementById('save-text-sig').addEventListener('click', ()=>{
  const text = document.getElementById('text-sign').value.trim();
  const font = document.getElementById('font-select').value;
  const color = document.getElementById('text-color').value;
  if(!text){ alert("Enter text"); return; }
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width=400; tempCanvas.height=120;
  const tctx = tempCanvas.getContext('2d');
  tctx.fillStyle=color; tctx.font=`48px ${font}`; tctx.textBaseline='middle'; tctx.textAlign='center';
  tctx.fillText(text,tempCanvas.width/2,tempCanvas.height/2);
  const dataUrl = tempCanvas.toDataURL('image/png');
fetch("{% url 'upload_signature' %}", {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': '{{ csrf_token }}'
    },
    body: JSON.stringify({image: dataUrl, name: 'text_' + text, email: email})
}).then(r => r.json()).then(j => {
    if(j.ok) {
        alert('Saved text signature. Reload page.');
        location.reload();  // reload page after alert
    } else {
        alert('Error saving');
    }
});
});



// Save image signature (160x60 size)
document.getElementById('save-image-sig').addEventListener('click', () => {
    const fileInput = document.getElementById('image-sign'); // <input type="file" id="image-sign">
    if (!fileInput.files.length) {
        alert("Select an image first");
        return;
    }

    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = function(e) {
        const dataUrl = e.target.result; // base64 string

        // Create canvas 160x60
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 160;
        tempCanvas.height = 60;
        const ctx = tempCanvas.getContext('2d');

        const img = new Image();
        img.onload = function() {
            // Scale and center the image in 160x60
            const scale = Math.min(tempCanvas.width / img.width, tempCanvas.height / img.height);
            const x = (tempCanvas.width - img.width * scale) / 2;
            const y = (tempCanvas.height - img.height * scale) / 2;
            ctx.drawImage(img, x, y, img.width * scale, img.height * scale);

            const finalDataUrl = tempCanvas.toDataURL('image/png');

            // Send to backend same as text signature
            fetch("{% url 'upload_signature' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({
                    image: finalDataUrl,
                    name: 'img_signature',  // optional
                    email: email            // optional
                })
            })
            .then(r => r.json())
            .then(j => {
                if (j.ok) {
                    alert('Saved image signature. Reload page.');
                    location.reload();
                } else {
                    alert('Error saving');
                }
            });
        };

        img.src = dataUrl;
    };

    reader.readAsDataURL(file);
});






// Render PDF
// const pdfUrl = "{{ document.file.url }}";
const pdfUrl = "{{ file_to_sign|escapejs  }}";
console.log(pdfUrl);

pdfjsLib.GlobalWorkerOptions.workerSrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
let scale=1.4;
pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  const container = document.getElementById("pdf-container");
  container.innerHTML = "";

  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    pdf.getPage(pageNum).then(page => {
      const viewport = page.getViewport({ scale: scale });

      const pageWrapper = document.createElement("div");
      pageWrapper.className = "pdf-page-wrapper";
      pageWrapper.dataset.page = pageNum;
      pageWrapper.style.position = "relative";

      const canvas = document.createElement("canvas");
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      pageWrapper.appendChild(canvas);
      container.appendChild(pageWrapper);

      page.render({ canvasContext: canvas.getContext("2d"), viewport: viewport });

     const allowedPages = {{ allowed_pages_list|safe }} || [];

  if (allowedPages.length > 0) {
      if (!allowedPages.includes(pageNum)) pageWrapper.classList.add("readonly-page");

      const label = document.createElement("div");
      label.style.position = "absolute";
      label.style.top = "5px";
      label.style.left = "5px";
      label.style.padding = "2px 5px";
      label.style.background = "rgba(255,255,0,0.3)";
      label.style.fontWeight = "bold";
      label.innerText = allowedPages.includes(pageNum) ? "You can sign this page" : "Read-only page";
      pageWrapper.appendChild(label);
  } else {
      // If allowedPages is empty, all pages are signable
      const label = document.createElement("div");
      label.style.position = "absolute";
      label.style.top = "5px";
      label.style.left = "5px";
      label.style.padding = "2px 5px";
      label.style.background = "rgba(0,255,0,0.2)";
      label.style.fontWeight = "bold";
      label.innerText = "You can sign this page";
      pageWrapper.appendChild(label);
  }

      

        signatureBoxes.forEach(box => {
          if (box.page === pageNum) {
            const div = document.createElement("div");
            div.className = "sig-box-db";
            const pageWidth = pageWrapper.clientWidth;
            const pageHeight = pageWrapper.clientHeight;
            div.style.left = (box.x / 100 * pageWidth) + "px";
            div.style.top = (box.y / 100 * pageHeight) + "px";
            div.style.width = (box.width / 100 * pageWidth) + "px";
            div.style.height = (box.height / 100 * pageHeight) + "px";
            div.style.fontFamily = box.font_family || "Arial";
            div.style.fontSize = (box.font_size || 10) + "px";
            div.style.color = box.color || "#000000";
            div.style.fontWeight = box.font_weight || "normal";
            div.style.fontStyle = box.font_style || "normal";
            div.style.textDecoration = box.text_decoration || "none";
            div.style.border = `2px dashed ${box.color || "#FF0000"}`;
            console.log(box.color,"border")
            div.innerText = box.type.toUpperCase();
            pageWrapper.appendChild(div);
          }
        });

        pageWrapper.addEventListener("dragover", e => e.preventDefault());
        pageWrapper.addEventListener("drop", e => { e.preventDefault(); placeSignature(pageWrapper, e.clientX, e.clientY, pageNum); });
      });
    }
});

// Flicker-free signature placement
let activeSignatureId = null; // track which signature is active

// Drag from signature list
document.querySelectorAll('.sig-select').forEach(img=>{
  img.addEventListener('dragstart', e=>{
    // अगर कोई signature पहले से active है और वो current नहीं है, block drag
    if(activeSignatureId && activeSignatureId !== img.dataset.id){
        e.preventDefault();
        return;
    }
    selectedSignature={id:img.dataset.id, src:img.src};
  });

  // Click / drag sets this signature as active
  img.addEventListener('pointerdown', e=>{
    if(!activeSignatureId) activeSignatureId = img.dataset.id;
  });
});

// Updated placeSignature function
function placeSignature(pageWrapper, clientX, clientY, pageNum, src=null){
    if(!selectedSignature) return;
    // only allow placing if this signature is active
    if(activeSignatureId && activeSignatureId !== selectedSignature.id) return;

    const boxes = signatureBoxes.filter(b => b.page === pageNum);
    const rect = pageWrapper.getBoundingClientRect();
    const x = clientX - rect.left;
    const y = clientY - rect.top;

    let insideBox = null;
    if(boxes.length>0){
        boxes.forEach(box=>{
            const bx = box.x/100*pageWrapper.clientWidth;
            const by = box.y/100*pageWrapper.clientHeight;
            const bw = box.width/100*pageWrapper.clientWidth;
            const bh = box.height/100*pageWrapper.clientHeight;
            if(x>=bx && x<=bx+bw && y>=by && y<=by+bh){ insideBox={left:bx, top:by, width:bw, height:bh}; }
        });
        if(!insideBox){ alert("You can only place signature inside the predefined box!"); return; }
    } else { insideBox={left:x-75, top:y-20, width:150, height:40}; }

    const overlay=document.createElement("img");
    overlay.src=src||selectedSignature.src;
    overlay.style.position="absolute";
    overlay.style.left=insideBox.left+"px";
    overlay.style.top=insideBox.top+"px";
    overlay.style.width=insideBox.width+"px";
    overlay.style.height=insideBox.height+"px";
    overlay.style.cursor="move";
    overlay.className="drag-sig";
    overlay.dataset.page=pageNum;
    overlay.style.transform="translate(0,0)";
    overlay.style.willChange="transform";
    overlay.style.userSelect="none";

    let startX=0, startY=0, dragTarget=null;

    overlay.addEventListener("pointerdown", e=>{
        e.preventDefault();
        dragTarget=overlay;
        startX=e.clientX; startY=e.clientY;
        overlay.setPointerCapture(e.pointerId);
    });

    overlay.addEventListener("pointermove", e=>{
        if(dragTarget===overlay && e.buttons===1){
            let dx=e.clientX-startX, dy=e.clientY-startY;
            if(boxes.length>0 && insideBox){
                dx=Math.min(Math.max(0, dx), insideBox.width-overlay.offsetWidth);
                dy=Math.min(Math.max(0, dy), insideBox.height-overlay.offsetHeight);
            }
            overlay.style.transform=`translate(${dx}px, ${dy}px)`;
        }
    });

    overlay.addEventListener("pointerup", e=>{
        if(dragTarget===overlay){
            const matrix=new DOMMatrix(getComputedStyle(overlay).transform);
            overlay.style.left=(parseFloat(overlay.style.left)+matrix.m41)+"px";
            overlay.style.top=(parseFloat(overlay.style.top)+matrix.m42)+"px";
            overlay.style.transform="translate(0,0)";
            overlay.releasePointerCapture(e.pointerId);
            dragTarget=null;
        }
    });

    overlay.addEventListener("dblclick", ()=>{ if(confirm("Delete signature?")) overlay.remove(); });
    pageWrapper.appendChild(overlay);
}

// Apply signatures
document.getElementById("apply-btn").addEventListener("click", ()=>{
  const placements=[];
  document.querySelectorAll(".drag-sig").forEach(sig=>{
    const pageWrapper=sig.parentElement;
    const canvas=pageWrapper.querySelector("canvas");
    const pdfRect=canvas.getBoundingClientRect();
    const sigRect=sig.getBoundingClientRect();
    placements.push({ page:parseInt(sig.dataset.page), x_pct:(sigRect.left-pdfRect.left+sigRect.width/2)/pdfRect.width, y_pct:(sigRect.top-pdfRect.top+sigRect.height/2)/pdfRect.height, width_pct:sigRect.width/pdfRect.width, height_pct:sigRect.height/pdfRect.height, signature_id:selectedSignature.id });
  });
  fetch("{% url 'apply_signatures' %}",{ method:'POST', headers:{'Content-Type':'application/json','X-CSRFToken':'{{ csrf_token }}'}, body:JSON.stringify({token:'{{ token }}',placements:placements}) }).then(r=>r.json()).then(data=>{ if(data.ok){ alert("Signed! File: "+data.merged_url); window.location.href=data.merged_url; } else alert("Error: "+(data.error||'Unknown error')); }).catch(err=>{ console.error(err); alert("Network/server error"); });
});

// Delete saved signature
document.querySelectorAll('.delete-sig').forEach(btn=>{
  btn.addEventListener('click', e=>{
    const wrapper=e.target.closest('.sig-wrapper');
    const sigId=wrapper.querySelector('img').dataset.id;
    if(confirm('Delete this signature?')){
      fetch("{% url 'delete_signature' %}",{ method:'POST', headers:{ 'Content-Type':'application/json','X-CSRFToken':'{{ csrf_token }}' }, body:JSON.stringify({id:sigId}) }).then(r=>r.json()).then(data=>{ if(data.ok) wrapper.remove(); else alert('Error deleting signature'); });
    }
  });
});

// Drag from signature list
document.querySelectorAll('.sig-select').forEach(img=>{ img.addEventListener('dragstart', e=>{ selectedSignature={id:img.dataset.id,src:img.src}; }); });

</script>
{% endif %}

{% endblock %}