{% 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>
    .sig-box {
      position: absolute;
      border: 2px dashed #6c757d;
      background: #f8f9fa;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: move;
      user-select: none;
    }
    .delete-btn {
        width: 25px;
        height: 25px;
        color: red;
        background: white;
        border: 1px solid red;
        font-size: 18px;
        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; }
    .pdf-container { width: 100%; height: 85vh; overflow: auto; position: relative; background: #f8f9fa; border: 1px solid #ddd; }
    .pdf-loader { position: absolute; inset: 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); } }
    .resize-handle { width: 10px; height: 10px; background: #007bff; position: absolute; right: 0; bottom: 0; cursor: se-resize; border-radius: 2px; }
    .rotate-handle { width: 12px; height: 12px; background: #007bff; position: absolute; top: -20px; right: 0; cursor: grab; border-radius: 50%; }
    .format-sidebar { position: fixed; top: 10%; right: -300px; width: 250px; transition: right 0.3s; z-index: 100; }
    .format-sidebar.active { right: 10px; }
    .signature-template { cursor: grab; user-select:none; display:block; margin-bottom:6px; }
  </style>

  <div class="row">
    <div class="col-lg-2">
      <div class="card position-sticky top-0 p-2">
        <h6>Draggable Elements</h6>
        <div class="signature-template btn btn-outline-secondary" data-type="signature">Sign Here</div>
        <div class="signature-template btn btn-outline-secondary" data-type="stamp">Stamp</div>
        <div class="signature-template btn btn-outline-secondary" data-type="initial">Initial</div>
        <div class="signature-template btn btn-outline-secondary" data-type="date">Date</div>
      </div>
    </div>

    <div class="col-lg-10">
      <p>Document for Review & Signature</p>
      <div class="d-flex position-relative">
        <div id="pdf-loader" class="pdf-loader">
          <div class="spinner"></div>
          <p>Loading PDF...</p>
        </div>
        <div class="pdf-container" id="pdf-container"></div>
      </div>
    </div>
  </div>

  <form method="post" id="signing-form" action="{% url 'update_signing_link' document.pk %}">
      {% csrf_token %}
      <input type="hidden" name="boxes" id="boxes-input">
      <div class="text-end">
      <button type="submit" class="btn btn-primary mt-3" onclick="serializeBoxes(event)">Save & Send</button>
      </div>
  </form>

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

<label class="form-label mt-2">Assign To</label>
<div id="emailList">
    <!-- JS will append checkboxes here -->
</div>

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="isRequired">
    <label for="isRequired" class="form-check-label">Required</label>
</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>

</div>


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

<script>
const savedBoxes = {{ boxes_json|safe }};
const emails = JSON.parse('{{ emails|escapejs }}');

const pdfContainer = document.getElementById('pdf-container');
const loader = document.getElementById('pdf-loader');

let selectedBox = null;
let draggingBox = null;
let offsetX=0, offsetY=0;
let signatureCounter=0;

const url = "{{ document.file.url }}";
pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.worker.min.js";

const emailColors = {};
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) color += letters[Math.floor(Math.random() * 16)];
    return color;
}

emails.forEach(email => {
    emailColors[email] = getRandomColor();
});

// --------------------------------------------------
//   LOAD EMAIL CHECKBOX LIST
// --------------------------------------------------
function loadEmailCheckboxes() {
    let html = "";
    emails.forEach(e => {
        const color = emailColors[e];
        html += `
            <div class="form-check mb-1" style=" border-radius:4px; padding:2px 5px;">
                <input type="radio" class="form-check-input email-check" value="${e}" id="email_${e}">
                <label class="form-check-label" for="email_${e}" style="color:${color}; font-weight:bold;">
                    ${e}
                </label>
            </div>
        `;
    });
    document.getElementById("emailList").innerHTML = html;

    // Checkbox click → select box email
    document.querySelectorAll("#emailList .email-check").forEach(chk => {
        chk.addEventListener("change", function() {
            if (!selectedBox) return;

            // Only one selected at a time
            document.querySelectorAll("#emailList .email-check").forEach(c => c.checked = false);
            this.checked = true;

            selectedBox.dataset.assignedEmail = this.value;
            // Update box border color
            selectedBox.style.borderColor = emailColors[this.value];
        });
    });
}


loadEmailCheckboxes();
// Generate unique colors for emails




// --------------------------------------------------
//  ⬇⬇⬇  RENDER PDF
// --------------------------------------------------
pdfjsLib.getDocument(url).promise.then(async (pdf) => {
    let tasks = [];

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

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

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

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

            pageDiv.style.width = viewport.width + "px";
            pageDiv.style.height = viewport.height + "px";

            pageDiv.appendChild(canvas);
            pdfContainer.appendChild(pageDiv);
        });
        tasks.push(t);
    }

    await Promise.all(tasks);

    loader.style.display = "none";
    loadSavedBoxes();
});



// --------------------------------------------------
//   LOAD SAVED BOXES
// --------------------------------------------------
function loadSavedBoxes() {
    savedBoxes.forEach(b => {
        const pageDiv = document.querySelector(`.pdf-page[data-page-num="${b.page}"]`);
        if (!pageDiv) return;

        const box = document.createElement("div");
        box.className = "sig-box";
        box.dataset.boxId = b.id;
        box.dataset.type = b.type;
        box.dataset.assignedEmail = b.assigned_email || "";
        box.dataset.required = b.required ? "true" : "false";

        box.style.left = b.x + "%";
        box.style.top = b.y + "%";
        box.style.width = b.width + "%";
        box.style.height = b.height + "%";

        box.innerText = b.type;

        // Assign color if email exists
        if (box.dataset.assignedEmail && emailColors[box.dataset.assignedEmail]) {
    box.style.borderColor = emailColors[box.dataset.assignedEmail];
            // box.style.color = "#fff"; // text white for visibility
        }

        pageDiv.appendChild(box);
        makeDraggable(box, pageDiv);

        // Box click → sidebar update
        box.addEventListener("click", () => {
            selectedBox = box;
            document.getElementById("formatSidebar").classList.add("active");

            // Sidebar email checkboxes select
            document.querySelectorAll("#emailList .email-check").forEach(chk => {
                chk.checked = (chk.value === box.dataset.assignedEmail);
            });

            // Required checkbox
            document.getElementById("isRequired").checked = box.dataset.required === "true";
        });
    });
}
document.querySelectorAll("#emailList .email-check").forEach(chk => {
    chk.addEventListener("change", function() {
        if (!selectedBox) return;

        // Only one checkbox selected
        document.querySelectorAll("#emailList .email-check").forEach(c => c.checked = false);
        this.checked = true;

        selectedBox.dataset.assignedEmail = this.value;

        // Update border color
        if (emailColors[this.value]) {
            selectedBox.style.borderColor = emailColors[this.value];
        } else {
            selectedBox.style.borderColor = "#6c757d"; // default dashed color
        }
    });
});



// --------------------------------------------------
//  DRAG NEW ELEMENT FROM LEFT SIDEBAR
// --------------------------------------------------
document.querySelectorAll('.signature-template').forEach(template => {
    template.addEventListener('mousedown', e => {
        e.preventDefault();
        signatureCounter++;

        const newBox = template.cloneNode(true);
        newBox.classList.add("sig-box");
        newBox.dataset.type = template.dataset.type;
        newBox.dataset.boxId = "new-" + signatureCounter;

        newBox.style.position = "absolute";
        newBox.style.width = "140px";
        newBox.style.height = "55px";
        newBox.style.left = e.pageX + "px";
        newBox.style.top = e.pageY + "px";

        draggingBox = newBox;
        document.body.appendChild(newBox);

        offsetX = e.offsetX;
        offsetY = e.offsetY;

        startDrag(newBox, true);
    });
});



// --------------------------------------------------
//   DRAG HANDLER FOR NEW + EXISTING
// --------------------------------------------------
function startDrag(box, isNew) {
    function move(e) {
        box.style.left = (e.pageX - offsetX) + "px";
        box.style.top = (e.pageY - offsetY) + "px";
    }

    function stop(e) {
        document.removeEventListener("mousemove", move);
        document.removeEventListener("mouseup", stop);

        if (isNew) {
            let droppedPage = null;

            document.querySelectorAll(".pdf-page").forEach(page => {
                const r = page.getBoundingClientRect();
                if (e.clientX >= r.left && e.clientX <= r.right &&
                    e.clientY >= r.top && e.clientY <= r.bottom)
                    droppedPage = page;
            });

            if (!droppedPage) {
                box.remove();
                return;
            }

            const r = droppedPage.getBoundingClientRect();
            box.style.left = (e.clientX - r.left - box.offsetWidth / 2) + "px";
            box.style.top = (e.clientY - r.top - box.offsetHeight / 2) + "px";

            droppedPage.appendChild(box);
            makeDraggable(box, droppedPage);

            // --- Assign first email automatically ---
            if (emails.length > 0) {
                box.dataset.assignedEmail = emails[0]; // first email
            }

            // --- Default required false ---
            box.dataset.required = "false";

            // --- Update sidebar if this box is selected ---
            selectedBox = box;
            document.getElementById("formatSidebar").classList.add("active");

            // Set radio buttons
            document.querySelectorAll("#emailList input[type=radio]").forEach(radio => {
                radio.checked = radio.value === box.dataset.assignedEmail;
            });

            document.getElementById("isRequired").checked = box.dataset.required === "true";
        }
    }

    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", stop);
}


// --------------------------------------------------
//   MAKE BOX DRAGGABLE
// --------------------------------------------------
function makeDraggable(box, pageDiv) {

    // Delete Button
    const del = document.createElement("div");
    del.className = "delete-btn";
    del.innerHTML = "&times;";
    box.appendChild(del);

    del.addEventListener("click", (e) => {
        e.stopPropagation();
        box.remove();
    });


    // Drag Existing
    let startX, startY, boxX, boxY;

    box.addEventListener("mousedown", e => {
        if (e.target === del) return;

        selectedBox = box;

        e.preventDefault();

        const rect = box.getBoundingClientRect();
        const parentRect = pageDiv.getBoundingClientRect();

        startX = e.clientX;
        startY = e.clientY;

        boxX = rect.left - parentRect.left;
        boxY = rect.top - parentRect.top;

        function move(ev) {
            let x = boxX + (ev.clientX - startX);
            let y = boxY + (ev.clientY - startY);

            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 stop() {
            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", stop);
        }

        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", stop);

        openSidebarForBox(box);
    });
}



// --------------------------------------------------
//  OPEN RIGHT SIDEBAR + AUTO SELECT EMAILS
// --------------------------------------------------
function openSidebarForBox(box) {
    selectedBox = box;

    const sidebar = document.getElementById("formatSidebar");
    sidebar.classList.add("active");

    // ---- Auto-select assigned email ----
    const assigned = box.dataset.assignedEmail || "";

    document.querySelectorAll(".email-check").forEach(c => {
        c.checked = (c.value === assigned);
    });

    // ---- Required Checkbox ----
    document.getElementById("isRequired").checked =
        box.dataset.required === "true";
}



// --------------------------------------------------
//  EMAIL CHECKBOX CHANGE → UPDATE BOX DATA
// --------------------------------------------------
document.addEventListener("change", function (e) {
    if (!selectedBox) return;

    if (e.target.classList.contains("email-check")) {

        // Only one can be selected → uncheck others
        document.querySelectorAll(".email-check").forEach(c => {
            c.checked = false;
        });

        e.target.checked = true;

        selectedBox.dataset.assignedEmail = e.target.value;
    }

    if (e.target.id === "isRequired") {
        selectedBox.dataset.required = e.target.checked ? "true" : "false";
    }
});



// --------------------------------------------------
//   SAVE BOXES
// --------------------------------------------------
function serializeBoxes(e) {
    e.preventDefault();

    let arr = [];

    document.querySelectorAll(".sig-box").forEach(box => {
        const pageDiv = box.closest(".pdf-page");
        if (!pageDiv) return;

        arr.push({
            box_id: box.dataset.boxId,
            page: parseInt(pageDiv.dataset.pageNum),
            x: ((box.offsetLeft / pageDiv.offsetWidth) * 100).toFixed(2),
            y: ((box.offsetTop / pageDiv.offsetHeight) * 100).toFixed(2),
            width: ((box.offsetWidth / pageDiv.offsetWidth) * 100).toFixed(2),
            height: ((box.offsetHeight / pageDiv.offsetHeight) * 100).toFixed(2),
            type: box.dataset.type,
            assigned_email: box.dataset.assignedEmail || "",
            required: box.dataset.required === "true"
        });
    });

    document.getElementById("boxes-input").value =
        JSON.stringify({ boxes: arr });

    document.getElementById("signing-form").submit();
}


const sidebar = document.getElementById("formatSidebar");

document.addEventListener("click", (e) => {
    // Check if click target is a sig-box
    
    if (e.target.closest(".sig-box")) {
        // Box clicked → open sidebar
        sidebar.classList.add("active");

        const box = e.target.closest(".sig-box");

        // Populate sidebar data
        document.querySelectorAll("#emailList .email-check").forEach(chk => {
            chk.checked = (chk.value === box.dataset.assignedEmail);
        });
        document.getElementById("isRequired").checked = box.dataset.required === "true";

    } else {
        // Clicked elsewhere → close sidebar
        sidebar.classList.remove("active");
    }
});


</script>

{% endblock %}