{% extends "base.html" %}
{% block content %}
<h3>Place Signature Fields - {{ document.title }}</h3>

<div class="pdf-container" style="position:relative; width:800px; height:1000px;">
    <embed src="{{ document.file.url }}" width="100%" height="1000px" type="application/pdf" />

    <div id="placement-layer" style="position:absolute; top:0; left:0; width:100%; height:100%;"></div>
</div>

<button id="save-placements" class="btn btn-primary mt-3">Save Placements</button>

<script>
let placements = [];
let placementLayer = document.getElementById("placement-layer");

placementLayer.addEventListener("click", function(e) {
    let box = document.createElement("div");
    box.className = "signature-box";
    box.style.left = e.offsetX + "px";
    box.style.top = e.offsetY + "px";
    box.style.width = "150px";
    box.style.height = "50px";
    box.style.position = "absolute";
    box.style.border = "2px dashed #007bff";
    box.style.background = "rgba(0,123,255,0.1)";
    placementLayer.appendChild(box);

    placements.push({
        x: e.offsetX, y: e.offsetY, width:150, height:50, page:1
    });
});

document.getElementById("save-placements").addEventListener("click", function() {
    fetch("{% url 'save_placements' document.id %}", {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-CSRFToken": "{{ csrf_token }}" },
        body: JSON.stringify({placements: placements})
    }).then(res => res.json()).then(data => {
        alert("Placements saved!");
        window.location.href = "{% url 'document_list' %}";
    });
});
</script>
{% endblock %}