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

<!-- App favicon -->
<!-- <link rel="stylesheet" href="{% static 'assets/css/app.css' %}">
<script src="{% static 'assets/js/app.js' %}"></script>
<link rel="shortcut icon" href="{% static 'assets/images/favicon.ico' %}"> -->

<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">
  <!-- <div class="row justify-content-center mb-4">
  <div class="col-md-12">
    <p class="border">text</p>
  </div>
</div> -->
<div class="row justify-content-center">
  <div class="col-md-12 col-lg-2">
    <div class="card">
      <div class="card-body">
        <!-- Signature Sidebar -->
    <div class="signature-sidebar">
      <h5>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-2"></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-2"></i> Date Signed
      </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

      <hr>
      <h6>Select Allowed Pages</h6>
      <div id="page-selector"></div> <!-- dynamic list -->
    </div>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-10">
    <!-- PDF Container -->
    <div class="pdf-container" id="pdf-container">
        <!-- PDF pages rendered by PDF.js -->
    </div>
  </div>
</div>
</div>

<div class="container-fluid container-main">

<!-- Formatting Sidebar -->
<div class="format-sidebar" id="formatSidebar">
  <h6 id="formatTitle">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>

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

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;

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

  } else if (!clickedSidebar) {
    // ❌ Clicked outside both box and sidebar
    sidebar.classList.remove('active');
    activeBox = null;
  }
});


</script>

    

    

</div>

<!-- Document Info Card -->
<div class="card card-custom">
    <div class="card-header py-3">
        <h3 class="mb-0">{{ document.title }}</h3>
    </div>
    <div class="card-body">
        <p><strong>Owner:</strong> {{ document.owner }}</p>
        <p><strong>Status:</strong> 
            <span class="badge {% if document.status == 'Approved' %}bg-success{% else %}bg-warning text-dark{% endif %}">
                {{ document.status }}
            </span>
        </p>
        <div class="mt-3">
            <a href="{{ document.file.url }}" target="_blank" class="btn btn-sm btn-outline-primary me-2">
                <i class="bi bi-download"></i> Download Original
            </a>
            {% if document.merged_file %}
                <a href="{{ document.merged_file.url }}" target="_blank" class="btn btn-sm btn-outline-success">
                    <i class="bi bi-download"></i> Download Merged
                </a>
            {% endif %}
        </div>
    </div>
</div>

<!-- Send Signing Link Form -->
<div class="card card-custom">
  <div class="card-header py-2 bg-light d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Send Signing Link</h5>
    <!-- Bulk Mail Button -->
    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#bulkMailModal">
      <i class="bi bi-people"></i> DocumentSignFlow
    </button>
  </div>

  <div class="card-body">
<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 -->

         <div class="mb-3">
        <label class="form-label fw-semibold">Email Subject</label>
        <input type="text" name="subject" class="form-control" placeholder="Enter email subject" required>
      </div>

      <!-- Recipient Emails (Add More) -->
      <div id="recipient-list">
        <div class="recipient-item d-flex mb-2">
          <input type="email" name="email[]" class="form-control me-2" placeholder="user@example.com" required>
          <button type="button" class="btn btn-danger btn-sm remove-recipient">&times;</button>
        </div>
      </div>
      <button type="button" class="btn btn-outline-success btn-sm mb-3" id="add-recipient">
        <i class="bi bi-plus"></i> Add More Recipient
      </button>

      <!-- CC Emails -->
      <div class="mb-3">
        <label class="form-label fw-semibold">CC Emails (Optional)</label>
        <input type="text" name="cc_email" class="form-control" placeholder="cc1@example.com, cc2@example.com">
      </div>


<!-- Advance Button -->
<button type="button" hidden class="btn btn-secondary mb-3" id="advanceBtn">
    Customize
</button>

<!-- Hidden advanced options -->
<div class="row mb-3" id="advancedOptions" style="display: none;">
  
  <!-- Role -->


  <!-- Reminder Days -->
  <div class="col-md-4">
    <label for="reminder_days" class="form-label">Send Reminder After (Days)</label>
    <select class="form-select" id="reminder_days" name="reminder_days">
        {% for i in reminder_range %}
            <option value="{{ i }}">{{ i }} Day{% if i > 1 %}s{% endif %}</option>
        {% endfor %}
    </select>
    <div class="form-text">Reminder if not signed.</div>
  </div>

  <!-- Security Token -->
  <div class="col-md-5">
    <label for="security_token" class="form-label">Security Token</label>
    <input type="text" class="form-control" id="security_token" name="security_token" >
  </div>


    <div class="col-md-3 d-flex align-items-center">
    <div class="form-check mb-0">
      <input type="checkbox" class="form-check-input" id="role" name="role" value="viewer">
      <label class="form-check-label ms-2" for="role">User Can Only Read</label>
    </div>
  </div>

</div>

<script>
document.getElementById('advanceBtn').addEventListener('click', function() {
    const advDiv = document.getElementById('advancedOptions');
    if (advDiv.style.display === "none") {
        advDiv.style.display = "flex";
        this.textContent = "Hide Advanced Options";
    } else {
        advDiv.style.display = "none";
        this.textContent = "Advanced Options";
    }
});
</script>

  
      <!-- Submit -->
      <div class="d-flex gap-2 flex-wrap">
        <button type="submit" class="btn btn-primary flex-grow-1" onclick="serializeBoxes(event,0)">
          <i class="bi bi-send"></i> Send Signing Link
        </button>
        <a href="{% url 'open_signing_link' document.pk %}" class="btn btn-secondary flex-grow-1 text-white">
          <i class="bi bi-box-arrow-up-right"></i> Open Signing Link
        </a>
      </div>
    </form>
  </div>

  <!-- Bulk Send Signing Link Card -->
<div class="card card-custom mb-4">
  <div class="card-header py-2 bg-light d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Bulk Send Signing Link</h5>
  </div>

  <div class="card-body">
    <form method="post" action="{% url 'send_signing_link_bulk' document.pk %}" id="bulk-email-form">
      {% csrf_token %}
      <input type="hidden" name="boxes" id="boxes-input"> <!-- JSON boxes -->

      <!-- Email Subject -->
      <div class="mb-3">
        <label class="form-label fw-semibold">Email Subject</label>
        <input type="text" name="subject" class="form-control" placeholder="Enter email subject" required>
      </div>

      <!-- CSV Upload -->
      <div class="mb-3">
        <label for="csv-file" class="form-label">Upload CSV for emails</label>
        <input type="file" id="csv-file" class="form-control" accept=".csv">
      </div>

      <!-- Preview Emails -->
      <div id="recipient-preview" class="mb-2"></div>
      <p id="email-count" class="text-muted mb-3"></p>

      <!-- Hidden input to store all CSV emails -->
      <input type="hidden" name="csv_emails" id="csv_emails">

      <!-- Submit -->
      <div class="d-flex gap-2 flex-wrap">
        <button type="submit" class="btn btn-primary flex-grow-1"  >
          <i class="bi bi-send"></i> Send Bulk Signing Link
        </button>
        <a href="{% url 'open_signing_link' document.pk %}" class="btn btn-secondary flex-grow-1 text-white">
          <i class="bi bi-box-arrow-up-right"></i> Open Signing Link
        </a>
      </div>
    </form>
  </div>
</div>

</div>

<!-- Bulk Mail Modal -->
<div class="modal fade" id="bulkMailModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">DocumentSignFlow Mail - Add Recipients</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="bulk-list">
          <div class="bulk-item d-flex mb-2">
            <input type="text" name="bulk_name[]" class="form-control me-2" placeholder="Full Name" required>
            <input type="email" name="bulk_email[]" class="form-control me-2" placeholder="user@example.com" required>
            <input type="number" name="bulk_position[]" class="form-control me-2" placeholder="Position/Order" min="1" value="1" required>
            <button type="button" class="btn btn-danger btn-sm remove-bulk">&times;</button>
          </div>
        </div>
        <button type="submit" class="btn btn-outline-success btn-sm" id="add-bulk">
          <i class="bi bi-plus"></i> Add More
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save & Close</button>
      </div>
    </div>
  </div>
</div>

<!-- JS -->



<script>
document.addEventListener('DOMContentLoaded', function() {
    let emailsFromCSV = [];

    const fileInput = document.getElementById('csv-file');
    const previewDiv = document.getElementById('recipient-preview');
    const emailCount = document.getElementById('email-count');
    const hiddenCsvInput = document.getElementById('csv_emails');

    // CSV Upload
    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(event) {
            emailsFromCSV = event.target.result
                .split(/\r?\n|,/)  
                .map(e => e.trim()) 
                .filter(e => e.length > 0);

            // preview
            const previewLimit = 50;
            previewDiv.innerHTML = '';
            emailsFromCSV.slice(0, previewLimit).forEach(email => {
                const span = document.createElement('span');
                span.className = 'badge bg-primary me-1 mb-1';
                span.textContent = email;
                previewDiv.appendChild(span);
            });
            emailCount.textContent = emailsFromCSV.length > previewLimit
                ? `+${emailsFromCSV.length - previewLimit} more emails`
                : '';
        };
        reader.readAsText(file);
    });

    // On form submit
    document.getElementById('bulk-email-form').addEventListener('submit', function(e) {
        e.preventDefault(); // prevent default submit

        // ✅ Set CSV emails
        hiddenCsvInput.value = JSON.stringify(emailsFromCSV);

        // ✅ Serialize boxes
        serializeBoxes(e, 1); // this will submit the form
    });
});
</script>



<script>
  // Add More Recipient
  document.getElementById("add-recipient").addEventListener("click", function() {
    const container = document.getElementById("recipient-list");
    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" placeholder="user@example.com" required>
      <button type="button" class="btn btn-danger btn-sm remove-recipient">&times;</button>
    `;
    container.appendChild(div);
  });

  // Remove Recipient
  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();
    }
  });

  // Add More Bulk
  postion = 1;
  document.getElementById("add-bulk").addEventListener("click", function() {
    postion++;
    const container = document.getElementById("bulk-list");
    const div = document.createElement("div");
    div.classList.add("bulk-item", "d-flex", "mb-2");
    div.innerHTML = `
      <input type="text" name="bulk_name[]" class="form-control me-2" placeholder="Full Name" required>
      <input type="email" name="bulk_email[]" class="form-control me-2" placeholder="user@example.com" required>
      <input type="number" name="bulk_position[]" class="form-control me-2" readonly placeholder="Position/Order" min="1" value="`+postion+`" required>
      <button type="button" class="btn btn-danger btn-sm remove-bulk">&times;</button>
    `;
    container.appendChild(div);
  });
</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');

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 = []; // yahi list me store hoga

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');
            page.render({ canvasContext: context, viewport: viewport });

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

        // ✅ Page list banani
        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);
    }
});


// Render PDF
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');
            page.render({ canvasContext: context, viewport: viewport });

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

// Drag new templates
templates.forEach(template => {
    template.addEventListener('mousedown', e => {
        e.preventDefault();
        draggingBox = template.cloneNode(true);
        draggingBox.classList.add('sig-box', 'dragging');
        draggingBox.dataset.type = template.dataset.type;
        pdfContainer.appendChild(draggingBox);
       
    });
});


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';
});



// Move dragging box
document.addEventListener('mousemove', e => {
    if(!draggingBox) return;
    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 (draggingBox) {
        selectedBox = draggingBox;
        showFormatSidebar(selectedBox);
        // draggingBox = null;
      }
      
    draggingBox.classList.remove('dragging');
    if(currentPage) makeDraggable(draggingBox, currentPage);
    draggingBox = null;
    currentPage = null;
});

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

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

// Serialize all boxes and submit as percentage
function serializeBoxes(event,type){
    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'
            });
        });
    });

     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(payload);


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

    }else{
            document.getElementById('signing-form').submit();

    }

    


}
</script>

{% endblock %}