{% extends 'esign/base.html' %}
{% load static %}
{% block content %}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

<div class="container-fluid">
  <style>
  .signature-box {
  position: absolute;
  border: 2px dashed #6c757d;
  background: #f8f9fa;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: move;
}

/* Delete button: small red circle exactly on top-right border */
.signature-box .delete-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  border: 2px solid #fff; /* small white outline looks clean */
  display: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.delete-btn {
    width: 25px;
    height: 25px;
    color: red;
    background: white;
    border: 1px solid red;
    font-size: 18px; /* 👈 Cross बड़ा दिखाने के लिए */
    font-weight: bold;
    position: absolute;
    right: -8px;
    top: -8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.delete-btn:hover {
    background: red;
    color: white;
}


.signature-box:hover .delete-btn {
  display: block;
}

  </style>


<style>
  .pdf-container {
  width: 100%;
  height: 85vh; /* adjust as needed */
  overflow: auto;
  position: relative;
  background: #f8f9fa;
  border: 1px solid #ddd;
}

.pdf-loader {
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.pdf-loader .spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #007bff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

</style>


<!-- Document Sign Area -->
{% if messages %}
  <div class="d-flex justify-content-center mt-3">
    {% for message in messages %}
      {% if forloop.last %}
        <div id="autoDismissAlert" class="alert alert-{{ message.tags }} alert-dismissible fade show text-center" role="alert" style="min-width: 300px;">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  <script>
    setTimeout(() => {
      const alert = document.getElementById('autoDismissAlert');
      if (alert) {
        const bsAlert = new bootstrap.Alert(alert);
        bsAlert.close();
      }
    }, 2000); // 2 seconds
  </script>
{% endif %}



<div class="row justify-content-center">
  <div class="col-md-12 col-lg-2">
    <div class="card position-sticky top-0">
      <div class="card-body p-2">
        <!-- Signature Sidebar -->
        <div class="signature-sidebar">
          <h5 class="h6">Draggable Elements</h5>

          <!-- Existing -->
          <div class="signature-template btn btn-outline-secondary border-dashed mb-2" data-type="signature" id="template-sign">
            <i class="fas fa-pencil-alt me-1"></i> Sign Here
          </div>

          <div class="signature-template btn btn-outline-secondary border-dashed mb-2" data-type="stamp" id="template-stamp">
            <i class="bi bi-postage me-1"></i> Stamp
          </div>

          <!-- ✅ Newly Added Elements -->
          <div class="signature-template btn btn-outline-secondary border-dashed mb-2" data-type="initial" id="template-initial">
            <i class="bi bi-pen me-1"></i> Initial
          </div>

          <div class="signature-template btn btn-outline-secondary border-dashed mb-2" data-type="date" id="template-date">
            <i class="fas fa-calendar-alt me-1"></i> Date Signed
          </div>

      <h6 hidden>Select Allowed Pages</h6>
      <div id="page-selector" hidden></div> 

    </div>
  </div>
</div>
</div>

<div class="col-md-12 col-lg-10">
     <p>Document for Review & Signature</p>

<div class="d-flex position-relative">
  <!-- Loader (visible over PDF only) -->
  <div id="pdf-loader" class="pdf-loader">
    <div class="spinner"></div>
    <p>Loading PDF...</p>
  </div>

  <!-- PDF Container -->
  <div class="pdf-container" id="pdf-container">
    <!-- PDF pages rendered by PDF.js -->
  </div>
</div>

</div>
</div>
<!-- Document Sign Area End -->

  <form method="post" 
            action="{% url 'send_signing_link' document.pk %}{% if request.GET.template_id %}?template_id={{ request.GET.template_id }}{% endif %}" 
            id="signing-form">
            {% csrf_token %}
            <input type="hidden" name="boxes" id="boxes-input"> <!-- JSON boxes -->
<input type="hidden" id="box-dragged" name="box_dragged" value="">

            

<div class="row mt-3">
  <div class="col-sm-12 text-end">
    <button type="submit" class="btn btn-primary" onclick="validateAndSerializeRecipients(event)">
    <i class="bi bi-send me-1"></i> Send Signing Link </button>   
  </div>
</div>
</form>

</div>





<!-- Formatting Sidebar -->
<div class="format-sidebar bg-light p-3 shadow-lg" id="formatSidebar">

  <div id="boxPairingContainer" class="mb-3">
  <h6 class="fw-bold mb-2">Assign Sign Box</h6>

  <div id="emailRadioList" class="mb-2">
    <!-- Radios for dynamic emails will be injected here -->
  </div>

  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="boxRequiredCheckbox" checked>
    <label class="form-check-label" for="boxRequiredCheckbox">Required</label>
  </div>
</div>

  <h6 id="formatTitle">Signature Formatting</h6>  
  <label class="form-label mt-2">Font Family</label>
  <select id="fontFamily" class="form-select form-select-sm">
    <option value="Arial">Arial</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Courier New">Courier New</option>
    <option value="Verdana">Verdana</option>
  </select>

  <label class="form-label mt-2">Font Size</label>
  <select id="fontSize" class="form-select form-select-sm">
    <option value="8">8</option>
    <option value="10" selected>10</option>
    <option value="12">12</option>
    <option value="14">14</option>
  </select>

  <label class="form-label mt-2">Color</label>
  <input type="color" id="fontColor" class="form-control form-control-color" value="#000000">

  <div class="mt-3">
    <button class="btn btn-outline-secondary btn-sm me-1" id="boldBtn"><b>B</b></button>
    <button class="btn btn-outline-secondary btn-sm me-1" id="italicBtn"><i>I</i></button>
    <button class="btn btn-outline-secondary btn-sm" id="underlineBtn"><u>U</u></button>
  </div>
</div>




<!-- JS -->
<script>
const form = document.getElementById('signing-form');
form.addEventListener('submit', function(e){
    // Check browser validation first
    if(!form.checkValidity()){
        e.preventDefault();          // stop submit
        form.reportValidity();       // show required messages
        return;
    }

    serializeBoxes(e, 0);  // You can keep your existing logic
});



function validateBoxEmailAssignment() {
  const emails = getRecipientEmails();     // all recipient emails
const allBoxes = document.querySelectorAll(".sig-box");

// Only consider boxes that are of type "signature" and have an assigned email
const signedBoxes = Array.from(allBoxes)
    .filter(box => box.dataset.type === "signature" && box.dataset.assignedEmail);

// Collect all assigned emails from valid boxes
const assignedEmails = signedBoxes.map(box => box.dataset.assignedEmail);

// Check if every email from emails[] exists in assignedEmails
let missing = emails.filter(email => !assignedEmails.includes(email));

if (missing.length > 0) {
    alert("Every email must be assigned to a signature box. Missing: " + missing.join(", "));
    return false; // stop further action
}


// All emails are assigned
console.log("All emails assigned correctly!");



    return true;
}




// Validate the recipient form before serializing
function validateAndSerializeRecipients(event) {
    event.preventDefault(); // stop default submission

    //    const boxDraggedInput = document.getElementById("box-dragged");
    
    // if (!boxDraggedInput.value || boxDraggedInput.value == "0") {
    //     // e.preventDefault();
    //     alert("Please drag at least 1 box on the document.");
    //     return;
    // }



    // const boxDraggedInput = document.getElementById("box-dragged");
    // const draggedBoxesCount = parseInt(boxDraggedInput.value); 
    // const emailsCount = savedEmails.length;

    // // Validate boxes >= emails
    // if (draggedBoxesCount < emailsCount) {
    //     alert(`Please drag at least ${emailsCount} boxes on the document. 
    // You have dragged only ${draggedBoxesCount}.`);
    //     return;
    // }


    if (!validateBoxEmailAssignment()) {
    return;  // Stop form submit
}



   
    // 3️⃣ Validate email format
   
    // 5️⃣ Everything valid — call your serializeBoxes function
    if (typeof serializeBoxes === "function") {
        serializeBoxes(event, 0);
    }
}
</script>


<script>
  let isDraggingSignature = false;

  const sidebar = document.getElementById('formatSidebar');
  let activeBox = null;

  // ───────── NEW GLOBALS ─────────
  let signatureCounter = 0;   // unique id counter for each dropped box
  let selectedBox = null;     // currently selected/active signature box for formatting + pairing
  // ───────────────────────────────

  document.addEventListener('click', function (e) {
  const clickedBox = e.target.closest('.sig-box');     // clicked on placed element?
  const clickedSidebar = e.target.closest('.format-sidebar'); // clicked inside sidebar?

  if (clickedBox) {
    // ✅ Clicked inside a draggable box
    sidebar.classList.add('active');
    activeBox = clickedBox;
    selectedBox = clickedBox; // keep consistent name used elsewhere

    // Optional dynamic title
    const type = clickedBox.dataset.type || 'Element';
    document.getElementById('formatTitle').textContent =
      `${type.charAt(0).toUpperCase() + type.slice(1)} Formatting`;

    // Open pairing UI for this clicked box (mobile + desktop)
    openPairingForBox(clickedBox);

  } else if (!clickedSidebar && !draggingBox) {
    sidebar.classList.remove('active');
    activeBox = null;
}
});

// --- NEW: Force-open sidebar (safe wrapper) ---
function openSidebar() {
    const sidebar = document.getElementById('formatSidebar');
    sidebar.classList.add('active');
}

</script>


<script>
const recipientContainer = document.getElementById("recipient-list");
const addRecipientBtn = document.getElementById("add-recipient");

// Function to add a recipient row
function addRecipientRow() {
    const div = document.createElement("div");
    div.classList.add("recipient-item", "d-flex", "mb-2");
    div.innerHTML = `
        <input type="email" name="email[]" class="form-control me-2 recipient-input" placeholder="user@example.com" required>
        <button type="button" class="btn btn-danger btn-sm remove-recipient">&times;</button>
    `;
    recipientContainer.appendChild(div);
}

// Add More Recipient
addRecipientBtn.addEventListener("click", function(e) {
    e.preventDefault(); // prevent any default form submit
    addRecipientRow();
});

// Remove Recipient & Bulk
document.addEventListener("click", function(e) {
    if (e.target.classList.contains("remove-recipient")) {
        e.target.closest(".recipient-item").remove();
    }
    if (e.target.classList.contains("remove-bulk")) {
        e.target.closest(".bulk-item").remove();
    }
});

// **Block Enter key for all recipient inputs**
recipientContainer.addEventListener("keydown", function(e) {
    if (e.key === "Enter") {
        e.preventDefault(); // stop Enter from submitting form or adding rows
    }
});
</script>

<script>
    const savedEmails = {{ emails|safe }};
</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.min.js"></script>

<script>
  const url = "{{ document.file.url }}";
  const pdfContainer = document.getElementById('pdf-container');
  const templates = document.querySelectorAll('.signature-template');
  const loader = document.getElementById('pdf-loader');

  // ✅ Show loader
  loader.style.display = 'flex';

  let pdfDoc = null;
  let draggingBox = null;
  let currentPage = null;

  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.worker.min.js';



  const pageSelector = document.getElementById('page-selector');
let allowedPages = [];

pdfjsLib.getDocument(url).promise.then(pdf => {
  pdfDoc = pdf;

  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    pdf.getPage(pageNum).then(page => {
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = document.createElement('canvas');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const context = canvas.getContext('2d');

      // Render page
      page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
        if (pageNum === pdf.numPages) loader.style.display = 'none';
      });

      // Wrap in container div
      const pageDiv = document.createElement('div');
      pageDiv.className = 'pdf-page';
      pageDiv.dataset.pageNum = pageNum;
      pageDiv.style.width = viewport.width + 'px';
      pageDiv.style.height = viewport.height + 'px';
      pageDiv.appendChild(canvas);
      pdfContainer.appendChild(pageDiv);
    });

    // ✅ Build Page Selector List
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.value = pageNum;
    checkbox.id = `page-${pageNum}`;
    checkbox.addEventListener('change', function () {
      if (this.checked) {
        allowedPages.push(pageNum);
      } else {
        allowedPages = allowedPages.filter(p => p !== pageNum);
      }
      console.log("Allowed pages:", allowedPages);
    });

    const label = document.createElement('label');
    label.htmlFor = `page-${pageNum}`;
    label.textContent = ` Page ${pageNum}`;

    const div = document.createElement('div');
    div.appendChild(checkbox);
    div.appendChild(label);
    pageSelector.appendChild(div);
  }
});

// Drag new templates
templates.forEach(template => {
  template.addEventListener('mousedown', e => {
    e.preventDefault();

    isDraggingSignature = true;
    
    // clone and assign unique id
    signatureCounter++;
    draggingBox = template.cloneNode(true);
    draggingBox.classList.add('sig-box', 'dragging');
    draggingBox.dataset.type = template.dataset.type;

    // Unique id and metadata used for pairing & serialize
    const newId = `sig-box-${signatureCounter}`;
    draggingBox.id = newId;
    draggingBox.dataset.boxId = newId;
    draggingBox.dataset.assignedEmail = ""; // will store assigned email
    draggingBox.dataset.required = "true"; // will store required flag

    pdfContainer.appendChild(draggingBox);

    // increment the "box dragged" counters you already used
    const boxDraggedInput = document.getElementById('box-dragged');
    if (boxDraggedInput) {
        let currentValue = parseInt(boxDraggedInput.value) || 0;
        boxDraggedInput.value = currentValue + 1;
    }

   
  });
});



// Move dragging box
document.addEventListener('mousemove', e => {
  if (!draggingBox) return;

  const containerRect = pdfContainer.getBoundingClientRect();
  const scrollSpeed = 25;      // scroll speed
  const edgeOffset = 50;       // edge distance trigger

  // 🔼 Scroll UP
  if (e.clientY < containerRect.top + edgeOffset) {
    pdfContainer.scrollTop -= scrollSpeed;
  }

  // 🔽 Scroll DOWN
  if (e.clientY > containerRect.bottom - edgeOffset) {
    pdfContainer.scrollTop += scrollSpeed;
  }

  const pageDivs = [...pdfContainer.getElementsByClassName('pdf-page')];
  let foundPage = null;

  for (const pageDiv of pageDivs) {
    const rect = pageDiv.getBoundingClientRect();
    if (
      e.clientX >= rect.left &&
      e.clientX <= rect.right &&
      e.clientY >= rect.top &&
      e.clientY <= rect.bottom
    ) {
      foundPage = pageDiv;
      break;
    }
  }

  if (foundPage) {
    currentPage = foundPage;
    const rect = foundPage.getBoundingClientRect();

    let x = e.clientX - rect.left - draggingBox.offsetWidth / 2;
    let y = e.clientY - rect.top - draggingBox.offsetHeight / 2;

    x = Math.max(0, Math.min(rect.width - draggingBox.offsetWidth, x));
    y = Math.max(0, Math.min(rect.height - draggingBox.offsetHeight, y));

    draggingBox.style.left = x + 'px';
    draggingBox.style.top = y + 'px';

    if (draggingBox.parentNode !== foundPage) {
      foundPage.appendChild(draggingBox);
    }
  }
});

document.addEventListener('mouseup', e => {
  if (!draggingBox) return;
 if (!currentPage) {
    draggingBox.remove();
    draggingBox = null;
    isDraggingSignature = false;
    return;
  }
  // 1️⃣ First: finish the drag and attach handles
  draggingBox.classList.remove('dragging');

  if (currentPage) {
    // makeDraggable will create resize + rotate handles here
    makeDraggable(draggingBox, currentPage);
  }

  // 2️⃣ Now we can safely auto-assign email AND color rotate-handle,
  // because rotateHandle now exists on this box.
  selectedBox = draggingBox;
  autoAssignFirstEmail(selectedBox);

  // 3️⃣ Open sidebar + formatting + pairing UI
  setTimeout(() => {
    sidebar.classList.add('active');
  }, 50);

  showFormatSidebar(selectedBox);
  openPairingForBox(selectedBox);

  // 4️⃣ Cleanup
  draggingBox = null;
  currentPage = null;
  isDraggingSignature = false;
});


function showFormatSidebar(box) {
  const sidebar = document.getElementById('formatSidebar');
  sidebar.classList.add('active');
  

  // Reset values to current box styles
  document.getElementById('fontFamily').value = box.style.fontFamily || 'Arial';
  document.getElementById('fontSize').value = parseInt(box.style.fontSize) || 10;
  document.getElementById('fontColor').value = rgbToHex(box.style.color) || '#000000';
}

// Convert rgb() to hex
function rgbToHex(rgb) {
  if (!rgb) return '#000000';
  const result = rgb.match(/\d+/g);
  if (!result) return '#000000';
  return "#" + result.map(x => {
    const hex = parseInt(x).toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join('');
}


// Font change
document.getElementById('fontFamily').addEventListener('change', e => {
  if (selectedBox) selectedBox.style.fontFamily = e.target.value;
});
document.getElementById('fontSize').addEventListener('change', e => {
  if (selectedBox) selectedBox.style.fontSize = e.target.value + 'px';
});
document.getElementById('fontColor').addEventListener('input', e => {
  if (selectedBox) selectedBox.style.color = e.target.value;
});

// Bold / Italic / Underline
document.getElementById('boldBtn').addEventListener('click', () => {
  if (selectedBox)
    selectedBox.style.fontWeight = selectedBox.style.fontWeight === 'bold' ? 'normal' : 'bold';
});
document.getElementById('italicBtn').addEventListener('click', () => {
  if (selectedBox)
    selectedBox.style.fontStyle = selectedBox.style.fontStyle === 'italic' ? 'normal' : 'italic';
});
document.getElementById('underlineBtn').addEventListener('click', () => {
  if (selectedBox)
    selectedBox.style.textDecoration = selectedBox.style.textDecoration === 'underline' ? 'none' : 'underline';
});



function clearSidebarSelection() {

  // Remove radio selections
  const radioContainer = document.getElementById('emailRadioList');
  if (radioContainer) {
    radioContainer.innerHTML = "";
  }

  // Reset required checkbox
  const req = document.getElementById('boxRequiredCheckbox');
  if (req) {
    req.checked = false;
  }

  // Reset title
  const title = document.getElementById('formatTitle');
  if (title) {
    title.textContent = "Signature Formatting";
  }

  // Remove active class from sidebar
  const sidebar = document.getElementById('formatSidebar');
  sidebar.classList.remove('active');
}


// Drag, Resize, Rotate
function makeDraggable(box, pageDiv){
  let dragStartX=0, dragStartY=0, boxStartX=0, boxStartY=0;

    // Add handles
  const resizeHandle = document.createElement('div'); resizeHandle.className='resize-handle'; box.appendChild(resizeHandle);
  const rotateHandle = document.createElement('div'); rotateHandle.className='rotate-handle'; box.appendChild(rotateHandle);

    // Drag box
  // box.addEventListener('mousedown', e=>{
  //   if(e.target===resizeHandle || e.target===rotateHandle) return;
  //   e.preventDefault();
  //   const rect = box.getBoundingClientRect();
  //   const parentRect = pageDiv.getBoundingClientRect();
  //   dragStartX=e.clientX; dragStartY=e.clientY;
  //   boxStartX = rect.left - parentRect.left;
  //   boxStartY = rect.top - parentRect.top;
  //   function onMouseMove(ev){
  //     let x = boxStartX + (ev.clientX - dragStartX);
  //     let y = boxStartY + (ev.clientY - dragStartY);
  //     x=Math.max(0, Math.min(parentRect.width-box.offsetWidth, x));
  //     y=Math.max(0, Math.min(parentRect.height-box.offsetHeight, y));
  //     box.style.left = x+'px'; box.style.top = y+'px';
  //   }
  //   function onMouseUp(){ document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); }
  //   document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp);
  // });


   box.addEventListener('mousedown', e=>{
    if(e.target===resizeHandle || e.target===rotateHandle) return;
    e.preventDefault();

  let currentPage = box.closest('.pdf-page');
  let pages = [...pdfContainer.getElementsByClassName('pdf-page')];

  const boxRect = box.getBoundingClientRect();
  let offsetX = e.clientX - boxRect.left;
  let offsetY = e.clientY - boxRect.top;

  let lastScrollTop = pdfContainer.scrollTop;


    function onMouseMove(ev) {
    const containerRect = pdfContainer.getBoundingClientRect();
    const scrollSpeed = 25;
    const edgeOffset = 50;

    // 🔼 scroll up
    if (ev.clientY < containerRect.top + edgeOffset) {
      pdfContainer.scrollTop -= scrollSpeed;
    }

    // 🔽 scroll down
    if (ev.clientY > containerRect.bottom - edgeOffset) {
      pdfContainer.scrollTop += scrollSpeed;
    }

    // 🔥 detect page under cursor
    let targetPage = null;
    for (const page of pages) {
      const r = page.getBoundingClientRect();
      if (
        ev.clientX >= r.left &&
        ev.clientX <= r.right &&
        ev.clientY >= r.top &&
        ev.clientY <= r.bottom
      ) {
        targetPage = page;
        break;
      }
    }

    // 🔄 move box to next/prev page
    if (targetPage && targetPage !== currentPage) {
      currentPage = targetPage;
      currentPage.appendChild(box);
    }

    const pageRect = currentPage.getBoundingClientRect();

    // 🔥 KEY: box always follow cursor (scroll included)
    const x = ev.clientX - pageRect.left - offsetX;
    const y = ev.clientY - pageRect.top - offsetY;

    box.style.left = x + 'px';
    box.style.top  = y + 'px';
  }

      function onMouseUp(){ document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); }
      document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp);
    });


   const deleteBtn = document.createElement('div');
  deleteBtn.className = 'delete-btn';
  deleteBtn.innerHTML = '&times;';
  box.appendChild(deleteBtn);

  // Delete box when clicked
  deleteBtn.addEventListener('click', (e) => {
  e.stopPropagation();

  const assigned = box.dataset.assignedEmail;

  // ✅ Re-enable that email immediately
  if (assigned && assigned !== "") {
    enableEmailInSidebar(assigned);
  }

  // ✅ If this box is currently selected in sidebar → cleanup UI
  if (selectedBox === box) {
    clearSidebarSelection();
    selectedBox = null;
  }

  // ✅ Remove the box itself
  box.remove();

  // Box counter logic stays
  const boxDraggedInput = document.getElementById('box-dragged');
  if (boxDraggedInput) {
      let currentValue = parseInt(boxDraggedInput.value) || 0;
      boxDraggedInput.value = Math.max(0, currentValue - 1);
  }
});


    // Resize
  resizeHandle.addEventListener('mousedown', e=>{
    e.stopPropagation(); e.preventDefault();
    const startWidth = box.offsetWidth;
    const startHeight = box.offsetHeight;
    const startX = e.clientX; const startY = e.clientY;
    function onMouseMove(ev){
      const newWidth = Math.max(50, startWidth+(ev.clientX-startX));
      const newHeight = Math.max(30, startHeight+(ev.clientY-startY));
      box.style.width = newWidth+'px'; box.style.height = newHeight+'px';
    }
    function onMouseUp(){ document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); }
    document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp);
  });

    // Rotate
  rotateHandle.addEventListener('mousedown', e=>{
    e.stopPropagation(); e.preventDefault();
    const rect = box.getBoundingClientRect();
    const centerX = rect.left+rect.width/2;
    const centerY = rect.top+rect.height/2;
    function onMouseMove(ev){
      const dx = ev.clientX-centerX;
      const dy = ev.clientY-centerY;
      const angle = Math.atan2(dy, dx)*(180/Math.PI);
      box.style.transform = `rotate(${angle}deg)`;
    }
    function onMouseUp(){ document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); }
    document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp);
  });

    // Input field editable
  if(box.dataset.type==='input'){
    box.setAttribute('contenteditable','true');
    box.style.padding='5px'; box.style.textAlign='center';
  }

}

/* ----------------- Pairing UI logic ----------------- */

// simple deterministic color palette for recipients
function getColorForEmail(email) {
  let hash = 0;
  for (let i = 0; i < email.length; i++) {
    hash = email.charCodeAt(i) + ((hash << 5) - hash);
  }

  const hue = Math.abs(hash % 360);
  const saturation = 100;
  const lightness = 50;

  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}


// read recipient emails from inputs on page (fallback if none)
// function getRecipientEmails() {
//   const inputs = document.querySelectorAll('#recipient-list input[name="email[]"]');
//   if (!inputs || inputs.length === 0) {
//     // placeholder development emails
//     return ["test1@example.com","test2@example.com","test3@example.com"];
//   }
//   return Array.from(inputs).map(i => i.value.trim()).filter(v => v !== "");
// }

function getRecipientEmails() {
  const inputs = document.querySelectorAll('#recipient-list input[name="email[]"]');

  if (!inputs || inputs.length === 0) {
    // placeholder ki jagah DB ke flows se aaye emails return karo
    return savedEmails;  
  }

  return Array.from(inputs)
    .map(i => i.value.trim())
    .filter(v => v !== "");
}


// disable radio(s) for an email (so it cannot be used by another box)
// function disableEmailInSidebar(email) {
//   document.querySelectorAll(`#emailRadioList input[type="radio"][value="${email}"]`)
//     .forEach(r => r.disabled = true);
// }

// enable radio(s) for an email (used when a box with that email is removed/unassigned)
function enableEmailInSidebar(email) {
  document.querySelectorAll(`#emailRadioList input[type="radio"][value="${email}"]`)
    .forEach(r => r.disabled = false);
}

// --- Auto assign first email to a box ---
function autoAssignFirstEmail(box) {
  
    const emails = getRecipientEmails();
    if (!emails || emails.length === 0) return;

    const firstEmail = emails[0];
    const color = getColorForEmail(firstEmail);

    box.dataset.assignedEmail = firstEmail;
    box.style.border = `2px solid ${color}`;

    const rotateHandle = box.querySelector('.rotate-handle');
    if (rotateHandle) {
      rotateHandle.style.background = color;
      rotateHandle.style.borderColor = color;
    }

    // Only assign if not already assigned
    if (!box.dataset.assignedEmail) {
        box.dataset.assignedEmail = firstEmail;
         
    }
}


/**
 * openPairingForBox(box)
 * - populates radios inside #emailRadioList
 * - sets the required checkbox
 * - wires change handlers to update box.dataset.assignedEmail and style
 */
function openPairingForBox(box) {
  if (!box) return;

  const container = document.getElementById('emailRadioList');
  container.innerHTML = "";

  const emails = getRecipientEmails();
  emails.forEach((email, idx) => {
    const radioId = `${box.id}_assign_${idx}`;
    const color = getColorForEmail(email);

    const wrapper = document.createElement('div');
    wrapper.className = 'form-check mb-1';

    wrapper.innerHTML = `
      <input class="form-check-input pairing-radio" type="radio"
             name="assignEmail_${box.id}" id="${radioId}" value="${email}">
      <label class="form-check-label" for="${radioId}" style="color:${color}">
        ${email}
      </label>
    `;

    // when user picks this email in sidebar
    const radio = wrapper.querySelector('input');
    radio.addEventListener('change', () => {
      // if this box had previously assigned email, re-enable it in sidebar
      const prev = box.dataset.assignedEmail;
      if (prev && prev !== "" && prev !== email) {
        enableEmailInSidebar(prev);
      }

      

      box.dataset.assignedEmail = email;

      // Border color
      box.style.border = `2px solid ${color}`;

      // Rotate handle color
      const rotateHandle = box.querySelector('.rotate-handle');
      if (rotateHandle) {
        rotateHandle.style.background = color;
        rotateHandle.style.borderColor = color;
      }

      // disable this email so no other box can pick it
      // disableEmailInSidebar(email);
    });

    // if box already has this email selected — mark radio and disable others
    // Auto select the assigned email
    if (box.dataset.assignedEmail === email) {
        radio.checked = true;

        // Also color the box border
        box.style.border = `2px solid ${color}`;
    } else {
      // if another box already used this email elsewhere, disable it in radio
      const used = Array.from(document.querySelectorAll('.sig-box')).some(b => b.dataset.assignedEmail === email);
      if (used) radio.disabled = false;
    }

    container.appendChild(wrapper);
  });

  // required checkbox binding
  const req = document.getElementById('boxRequiredCheckbox');
  req.checked = box.dataset.required === "true";
  req.onchange = () => {
    box.dataset.required = req.checked ? "true" : "false";
  };
}

/* ----------------- End pairing functions ----------------- */


// Serialize all boxes and submit as percentage
function serializeBoxes(event,type){
      // document.getElementById('loaderOverlay').style.display = 'flex';

  event.preventDefault();
  const boxes = [];
  const pageDivs = document.querySelectorAll('.pdf-page');
  pageDivs.forEach(pageDiv => {
    const pageNum = parseInt(pageDiv.dataset.pageNum);
    const pageWidth = pageDiv.offsetWidth;
    const pageHeight = pageDiv.offsetHeight;
    const sigBoxes = pageDiv.querySelectorAll('.sig-box');
    sigBoxes.forEach(box => {
      let rotation = 0;
      const transform = box.style.transform;
      const match = /rotate\(([-0-9.]+)deg\)/.exec(transform);
      if(match) rotation = parseFloat(match[1]);

      boxes.push({
        page: pageNum,
        x: (parseFloat(box.style.left)/pageWidth*100).toFixed(2),
        y: (parseFloat(box.style.top)/pageHeight*100).toFixed(2),
        width: (box.offsetWidth/pageWidth*100).toFixed(2),
        height: (box.offsetHeight/pageHeight*100).toFixed(2),
        type: box.dataset.type,
        rotation: rotation,
        fontFamily: box.style.fontFamily || 'Arial',
        fontSize: parseInt(box.style.fontSize) || 10,
        color: box.style.color || '#000000',
        fontWeight: box.style.fontWeight || 'normal',
        fontStyle: box.style.fontStyle || 'normal',
        textDecoration: box.style.textDecoration || 'none',
        // NEW fields:
        assigned_email: box.dataset.assignedEmail || "",
        required: box.dataset.required === "true" ? true : false,
        box_id: box.dataset.boxId || box.id || ""
      });

    });
  });

  const selectedPages = [];
  document.querySelectorAll('#page-selector input[type="checkbox"]:checked')
  .forEach(cb => selectedPages.push(parseInt(cb.value)));


  const bulkItems = [];
  document.querySelectorAll('#bulk-list .bulk-item').forEach((row, idx) => {
    const name = row.querySelector('input[name="bulk_name[]"]').value.trim();
    const email = row.querySelector('input[name="bulk_email[]"]').value.trim();
    const position = row.querySelector('input[name="bulk_position[]"]').value || (idx+1);

    if (name && email) {
      bulkItems.push({
        name: name,
        email: email,
        position: parseInt(position)
      });
    }
  });

    // ✅ Final payload
  const payload = {
    boxes: boxes,
    allowed_pages: selectedPages,
    order_postion_bulk: bulkItems


  };



   // document.getElementById('boxes-input').value = JSON.stringify(boxes);
    // document.getElementById('signing-form').submit();
  if(type == 1){
     document.getElementById('boxes-input-bulk').value = JSON.stringify(payload);

    document.getElementById('bulk-email-form').submit();
      console.log("boxes",boxes);
      console.log("payload",boxes);
  }
  else if(type==3){
     document.getElementById('boxes-input-postion').value = JSON.stringify(payload);

    document.getElementById('signing-form-postion').submit();
  }
  
  else{
         document.getElementById('boxes-input').value = JSON.stringify(payload);

    document.getElementById('signing-form').submit();

  }


  

}
</script>

{% endblock %}