{% 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>
<!-- Document Sign Area -->
<div class="row justify-content-center">
  <div class="col-md-12 col-lg-3">
    <div class="card position-sticky top-0">
      <div class="card-body">
        <!-- Signature Sidebar -->
        <div class="signature-sidebar">
          <h5 class="mb-3">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>
<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>
<div class="col-md-12 col-lg-9">
     <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 -->

<!-- Document Sign Forms Start -->
<div class="row justify-content-center mt-4">                        
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <nav class="nav nav-pills nav-justified nav-tabs" id="nav-tab" role="tablist">
          <button class="nav-link active rounded-bottom-0 py-2" id="nav-document-with-link-tab" data-bs-toggle="tab" data-bs-target="#nav-document-with-link" type="button" role="tab" aria-controls="nav-document-with-link" aria-selected="true">Send Document with Link</button>

          <button class="nav-link rounded-bottom-0 py-2" id="nav-document-with-order-tab" data-bs-toggle="tab" data-bs-target="#nav-document-with-order" type="button" role="tab" aria-controls="nav-document-with-order" aria-selected="false">Send Document with Order</button>

          <button class="nav-link rounded-bottom-0 py-2" id="nav-bulk-sign-send-tab" data-bs-toggle="tab" data-bs-target="#nav-bulk-sign-send" type="button" role="tab" aria-controls="nav-bulk-sign-send" aria-selected="false">Bulk Sign Send</button>
        </nav>
        <div class="tab-content p-3 border bg-light rounded-bottom" id="nav-tabContent">
          <div class="tab-pane fade active show" id="nav-document-with-link" role="tabpanel" aria-labelledby="nav-document-with-link-tab">
            <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 -->

            

            <!-- Recipient Emails (Add More) -->
            <div id="recipient-list">
              <div class="recipient-item mb-2">
                <label class="form-label fw-semibold">Recipient Email  <span style="color: red;">*</span></label>
                <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>

            <div class="mb-3">
              <label class="form-label fw-semibold">Email Subject <span style="color: red;">*</span></label>
              <input type="text" name="subject" class="form-control" placeholder="Enter email subject" required>
            </div>

            <!-- 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 justify-content-end">
  <button type="submit" class="btn btn-primary" onclick="serializeBoxes(event,0)">
    <i class="bi bi-send me-1"></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>
<div class="tab-pane fade" id="nav-document-with-order" role="tabpanel" aria-labelledby="nav-document-with-order-tab">
<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-postion">
            {% csrf_token %}
            <input type="hidden" name="boxes" id="boxes-input-postion"> <!-- JSON boxes -->

  <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" readonly 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 class="d-flex justify-content-end mt-3">
    <button type="submit" class="btn btn-primary" onclick="serializeBoxes(event,3)">
      <i class="bi bi-send me-1"></i> Send Order Signing Link
    </button>
  </div>
  </form>
</div>
<div class="tab-pane fade" id="nav-bulk-sign-send" role="tabpanel" aria-labelledby="nav-bulk-sign-send-tab">
  <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-bulk"> <!-- JSON boxes -->

    

    <!-- 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">
       <button type="button" class="btn btn-outline-secondary mt-2" id="download-sample-csv">
        <i class="bi bi-download me-1"></i> Download Sample CSV
      </button>
    </div>

    <!-- Email Subject -->
    <div class="mb-3">
      <label class="form-label fw-semibold">Email Subject <span style="color: red;">*</span></label>
      <input type="text" name="subject" class="form-control" placeholder="Enter email subject" required>
    </div>

    <script>
    document.getElementById('download-sample-csv').addEventListener('click', () => {
      // Email comes first now
      const sampleData = "john@example.com,John Doe\njane@example.com,Jane Smith";
      const blob = new Blob([sampleData], { type: 'text/csv' });
      const url = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.download = 'sample_bulk_emails.csv';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    });
    </script>


    <!-- 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 justify-content-end">
      <button type="submit" class="btn btn-primary"  >
        <i class="bi bi-send me-1"></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>
</div>
</div>
</div>
<!-- Document Sign Forms End -->
</div>


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


<!-- 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>
    
    <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">

  </div>

  
  <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">

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

<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');
  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 = []; // 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 });
      page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
        console.log(`Page ${pageNum} rendered`);
         if (pageNum === pdf.numPages) {
            loader.style.display = 'none';
        }
        // ✅ Check if it's the last page
       
    });


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

   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();
    box.remove();
  });

    // 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(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 %}