{% extends "esign/base_header.html" %}
{% block content %}

<form class="form" action="{% url 'recipient_details' %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}

<div class="container py-2">
    <div class="card shadow-sm p-4">
    <h3 class="mb-3 h4">Add Documents</h3>

    <div id="containerBox" class="d-flex justify-content-between flex-column flex-md-row">
        
        <!-- Preview Area -->
        <div id="previewArea" class="mb-3 mb-md-0">
            <div id="loader" class="loader" style="display:none;"></div>
        </div>

        <!-- Dropzone Box -->
        <div id="dropzone" class="dropzone flex-grow-1">
            <p class="mb-3 fw-bold">Drop your files here or</p>

            <button id="uploadBtn" type="button" class="btn btn-primary px-5 py-2">
                Upload
            </button>
            
            <input type="file" name="file" required id="pdfInput"  style="opacity:0; width:1px; height:1px;">
        </div>

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


<!-- RECIPIENT SECTION -->
<div class="container mb-4">

    <h3 class="mb-3 h4">Add recipients</h3>

    <!-- NEW RADIO BUTTON SET -->
    <div class="mb-4 d-flex align-items-center gap-4">

        <div class="form-check">
            <input class="form-check-input" onclick="s(0)"  value="in_order" type="radio" name="signOrderOption" id="radioOrder" checked>
            <label class="form-check-label" for="radioOrder">In Order</label>
        </div>

        <div class="form-check">
            <input class="form-check-input" onclick="s(1)" value="order" type="radio" name="signOrderOption" id="radioInOrder">
            <label class="form-check-label" for="radioInOrder" >Order</label>
        </div>

    </div>


    <script>
        function s(x){
            if(x == 1){
            const selects = document.querySelectorAll("[id^='signUserActions_']");
            selects.forEach(sel => {
                // sel.setAttribute("disabled", true); // disable
                    sel.style.display = "none";  // hide element

                // sel.removeAttribute("disabled"); // enable
            });

                        }else{
            const selects = document.querySelectorAll("[id^='signUserActions_']");
            selects.forEach(sel => {
                // sel.setAttribute("disabled", false); // disable
                // sel.removeAttribute("disabled"); // enable
                    sel.style.display = "";  // hide element

            });

            }
        }
    </script>
    <!-- RECIPIENTS CONTAINER -->
    <div id="recipientsContainer">

        <!-- TEMPLATE -->
        <div class="recipientBox border rounded p-4 mb-2 position-relative" data-recipient>

            

            <!-- ORDER NUMBER (Now read-only and not editable) -->
            <div class="orderNumber bg-info text-white px-3 py-4 position-absolute top-50 
                        translate-middle-y start-0 fs-4 fw-bold" contenteditable="false">
                1
            </div>

            <div class="details-wrapper position-relative">
              <div class="row">
                <div class="col-md-8">
                  <!-- NAME -->
                  <div class="mb-3">
                      <label class="form-label" for="name_1">Name <span class="text-danger">*</span></label>
                      <input type="text" class="form-control" id="name_1" name="name_1" placeholder="Enter name" required>
                  </div>

                  <!-- EMAIL -->
                  <div class="mb-0">
                      <label class="form-label" for="email_1">Email <span class="text-danger">*</span></label>
                      <input type="email" class="form-control" id="email_1" name="email_1" placeholder="Enter email" required>
                                <small id="emailError_1" class="text-danger mt-1 d-block"></small>
                  
                  </div>

                  <script>
                    // Email validation regex
const emailPattern2 = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// Function to attach keyup validation to your specific email input
function attachKeyupValidationForEmail1() {
    const emailInput = document.getElementById("email_1");
    const errorElem = document.getElementById("emailError_1");

    if (!emailInput || !errorElem) return;

    emailInput.addEventListener("keyup", () => {
        const value = emailInput.value.trim();

        if (value === "") {
            errorElem.textContent = ""; // clear error if empty
                        // submitBtn.disabled = false;  // disable button if invalid

            return;
        }

        if (!emailPattern2.test(value)) {
            errorElem.textContent = "Please enter a valid email";
            // submitBtn.disabled = true;  // disable button if invalid

        } else {
            errorElem.textContent = ""; // valid email
            // submitBtn.disabled = false;  // disable button if invalid

        }

        
    });
}

// Call the function to activate validation
attachKeyupValidationForEmail1();

                  </script>
                </div>
                <div class="col-md-2 offset-md-1">
                  <div class="d-flex gap-3 mb-0 mb-md-4 mt-3 mt-md-0 w-100">
                      <select class="form-select" id="signUserActions_1" name="signUserActions_1" aria-label="Sign User Actions" required>
                        <option value="Needs to Sign">Needs to Sign</option>
                        <option value="Receives a Copy (CC)">Receives a Copy (CC)</option>
                        <option value="Needs to View">Needs to View</option>
                    </select>
                    </div>
                </div>
                <div class="col-md-1 text-end">
                  <!-- DELETE BTN -->
                  <button type="button" class="btn btn-danger deleteRecipientBtn">
                      <i class="far fa-trash-alt"></i>
                  </button>
                </div>
              </div>
                <!-- ROLE DROPDOWN -->           
            </div>
        </div>

    </div>

    <!-- ADD RECIPIENT -->
    <button id="addRecipientBtn" type="button" class="btn btn-primary">+ Add Recipient</button>

</div>

<!-- MESSAGE SECTION -->
<div class="container my-3">
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                Add Message
            </button>
            </h2>

            <div id="collapseOne" class="accordion-collapse collapse show">
            <div class="accordion-body">

                <!-- SUBJECT -->
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <label class="form-label">Subject </label>
                        <div id="subjectCount" class="small text-muted">0/100</div>
                    </div>
                    <input type="text"  name="subject" id="subjectInput" class="form-control" maxlength="100" placeholder="Enter subject">
                </div>

                <!-- MESSAGE -->
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <label class="form-label">Message </label>
                        <div id="messageCount" class="small text-muted">0/100</div>
                    </div>
                    <textarea name="message"  id="messageInput" class="form-control" rows="5" maxlength="100" placeholder="Enter message"></textarea>
                </div>

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

<div class="container mb-5" >
    <div class="row">
        <div class="col-md-4" hidden>
            <label  for="frequencyReminders" class="form-label">Frequency of reminders</label>
            <select  class="form-select" name="reminder_frequency" id="reminderInput" aria-label="Default select example">
                <option selected>Choose a reminders frequency</option>
                <option value="Every Day">Every Day</option>
                <option value="Every 2 Day">Every 2 Day</option>
                <option value="Every 3 Day">Every 3 Day</option>
                <option value="Every 4 Day">Every 4 Day</option>
                <option value="Every 5 Day">Every 5 Day</option>
                <option value="Every 6 Day">Every 6 Day</option>
                <option value="Every 7 Day">Every 7 Day</option>
            </select> </div>
            <div class="col-md-12 text-end">
              <button class="btn btn-primary px-5 py-2 mt-3 mt-md-0" id="submit" type="submit">
                Submit
            </button>
            </div>
    </div>
</div>

</form>

<!-- PDF.js ES5 build (REQUIRED) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.2.67/pdf.min.mjs" type="module"></script>

<script type="module">
import * as pdfjsLib from "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.2.67/pdf.min.mjs";

// Worker
pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.2.67/pdf.worker.min.mjs";

// Generate thumbnail from first page
async function generateThumbnail(file) {
    const arrayBuffer = await file.arrayBuffer();
    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

    const page = await pdf.getPage(1);
    const viewport = page.getViewport({ scale: 0.4 });

    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    canvas.width = viewport.width;
    canvas.height = viewport.height;

    await page.render({
        canvasContext: ctx,
        viewport: viewport
    }).promise;

    return { canvas, pageCount: pdf.numPages };
}

document.getElementById("pdfInput").addEventListener("change", function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const fileURL = URL.createObjectURL(file);

    pdfjsLib.getDocument(fileURL).promise.then(async function(pdf) {
        const page = await pdf.getPage(1);
        const viewport = page.getViewport({ scale: 1.2 });

        // Create card
        const card = document.createElement("div");
        card.className = "preview-card";

        // Thumbnail container
        const thumb = document.createElement("div");
        thumb.className = "preview-thumb";

        // Canvas
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        thumb.appendChild(canvas);

        // File details
        const info = document.createElement("div");
        info.style.padding = "16px";
        info.innerHTML = `
            <strong>${file.name}</strong>
            <div>${pdf.numPages} pages</div>
        `;

        card.appendChild(thumb);
        card.appendChild(info);

        // Clear old preview
        document.getElementById("previewArea").innerHTML = "";
        document.getElementById("previewArea").appendChild(card);

        // Render first page
        page.render({
            canvasContext: context,
            viewport
        });
    });
});
</script>
<script>
    const containerBox = document.getElementById("containerBox");
    const dropzone = document.getElementById("dropzone");
    const uploadBtn = document.getElementById("uploadBtn");
    const pdfInput = document.getElementById("pdfInput");
    const previewArea = document.getElementById("previewArea");
    const loader = document.getElementById("loader");

    /* CLICK to open */
    uploadBtn.addEventListener("click", (e) => {
        e.stopPropagation();
        pdfInput.click();
    });

    dropzone.addEventListener("click", () => {
        pdfInput.click();
    });

    /* DRAG & DROP */
    dropzone.addEventListener("dragover", (e) => {
        e.preventDefault();
        dropzone.style.background = "#f8f9fa";
    });

    dropzone.addEventListener("dragleave", () => {
        dropzone.style.background = "";
    });

    dropzone.addEventListener("drop", (e) => {
        e.preventDefault();
        dropzone.style.background = "";
        pdfInput.files = e.dataTransfer.files;
        handlePDF(pdfInput.files[0]);
    });

    /* FILE SELECTED */
    pdfInput.addEventListener("change", () => {
        if (pdfInput.files.length > 0) {
            handlePDF(pdfInput.files[0]);
        }
    });

    function handlePDF(file) {
        if (file.type !== "application/pdf") {
            alert("Please upload a PDF file.");
            return;
        }   


        const maxSize = 100 * 1024 * 1024; 
            if (file.size > maxSize) {
                alert("File size should not exceed 100 MB.");
                return;
            }


        // Show loader
        loader.style.display = "block";

        // Smooth transition
        containerBox.classList.add("show-preview");

        const fileURL = URL.createObjectURL(file);

        // Create iframe
        const iframe = document.createElement("iframe");
        iframe.src = fileURL;

        // Hide iframe initially until fully loaded
        iframe.style.display = "none";

        previewArea.innerHTML = "";
        previewArea.appendChild(loader);
        previewArea.appendChild(iframe);

        // When PDF preview has fully loaded
        iframe.onload = function () {
            loader.style.display = "none";
            iframe.style.display = "block";
        };
    }
</script>
<!-- ================= CUSTOM JS ================= -->
<script>
// CORE ELEMENTS
const recipientsContainer = document.getElementById("recipientsContainer");
const template = document.querySelector(".recipientBox");
const addRecipientBtn = document.getElementById("addRecipientBtn");

const radioOrder = document.getElementById("radioOrder");
const radioInOrder = document.getElementById("radioInOrder");

// ----------------------
// Update Order Numbers
// ----------------------
function updateOrderNumbers() {
    const show = radioInOrder.checked;
    const boxes = document.querySelectorAll("[data-recipient]");
    // document.getElementById("signUserActions").setAttribute("disabled", true);

    boxes.forEach((box, i) => {
        const num = box.querySelector(".orderNumber");
        const wrap = box.querySelector(".details-wrapper");

        num.textContent = i + 1;
        num.style.display = show ? "flex" : "none";
        wrap.style.marginLeft = show ? "80px" : "0";
    });

}

// ----------------------
// Hide Delete Button When Only One Box Exists
// ----------------------
function updateDeleteButtonsVisibility() {
    const boxes = document.querySelectorAll("[data-recipient]");
    const showDelete = boxes.length > 1;

    boxes.forEach((box) => {
        const btn = box.querySelector(".deleteRecipientBtn");
        if (btn) {
            btn.style.display = showDelete ? "inline-flex" : "none";
        }
    });
}


const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const submitBtn = document.getElementById("submit");

// Function to validate a single email input
function validateEmailInput(inp) {
    const errorElem = inp.parentElement.querySelector("small");
    const value = inp.value.trim();

    if (value === "") {
        errorElem.textContent = "";
                    // submitBtn.disabled = false;  // disable button if invalid

        return;
    }

    if (!emailPattern.test(value)) {
        errorElem.textContent = "Please enter a valid email";
        // submitBtn.disabled = true;  // disable button if invalid

    } else {
        errorElem.textContent = "";
        // submitBtn.disabled = false;  // disable button if invalid

    }
}

// Attach validation on keyup for an input
// Regex for email validation
const emailPattern1 = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// Function to attach keyup validation on an email input
function attachKeyupValidation(inp) {
    inp.addEventListener("keyup", () => {
        const value = inp.value.trim();
        const errorElem = inp.parentElement.querySelector("small"); // associated error <small>

        if (!errorElem) return; // if no <small>, exit

        if (value === "") {
            errorElem.textContent = ""; // clear if empty
            // submitBtn.disabled = false;  // disable button if invalid

            return;
        }

        if (!emailPattern1.test(value)) {
            errorElem.textContent = "Please enter a valid email";
            // submitBtn.disabled = true;  // disable button if invalid

        } else {
            errorElem.textContent = ""; // valid email
            // submitBtn.disabled = false;  // disable button if invalid

        }


         const allEmails = Array.from(document.querySelectorAll("input[type='email']"))
            .filter(i => i !== inp)
            .map(i => i.value.trim());

        if (allEmails.includes(value)) {
            errorElem.textContent = "This email is already used";
            // submitBtn.disabled = true;  // disable button if invalid

        }
                // submitBtn.disabled = fasle;  // disable button if invalid


        
    });
}



// ----------------------
// Add Recipient (incremental IDs including the select #signUserActions)
// Replace your existing Add Recipient block with this
// ----------------------
addRecipientBtn.addEventListener("click", () => {
    // Clone template
    const clone = template.cloneNode(true);

    // Compute next incremental index based on current recipient boxes
    const boxes = document.querySelectorAll("[data-recipient]");
    const nextIndex = boxes.length + 1;

    // --- Update inputs inside clone ---
    clone.querySelectorAll("input").forEach((inp) => {
        // clear previous value
        inp.value = "";

        if (inp.type === "text") {
            inp.id = `name_${nextIndex}`;
            inp.name = `name_${nextIndex}`; // <-- dynamic name attribute
        } else if (inp.type === "email") {
            inp.id = `email_${nextIndex}`;
            inp.name = `email_${nextIndex}`; // <-- dynamic name attribute

               const errorElem = inp.parentElement.querySelector("small");
        if (errorElem) {
            errorElem.id = `emailError_${nextIndex}`;
            errorElem.textContent = ""; // clear previous error
        }

        }
        attachKeyupValidation(inp);

    });

    // --- Update labels inside clone so they point to new ids ---
    clone.querySelectorAll("label").forEach((lbl) => {
        const oldFor = lbl.getAttribute("for");
        if (!oldFor) return;
        const base = oldFor.split("_")[0]; // keeps 'name', 'email', etc.
        lbl.setAttribute("for", `${base}_${nextIndex}`);
    });

    // --- Update the select (Role dropdown) ---
      const sel = clone.querySelector("#signUserActions") || clone.querySelector("select.form-select");
      if (sel) {
          sel.id = `signUserActions_${nextIndex}`;
          sel.name = `signUserActions_${nextIndex}`;  // <-- THIS IS IMPORTANT
          sel.selectedIndex = 0;
      }

    // Append clone
    recipientsContainer.appendChild(clone);

    // Keep UI in sync
    updateOrderNumbers();
    updateDeleteButtonsVisibility();
});

// ----------------------
// Delete Recipient (Click icon or button)
// ----------------------
recipientsContainer.addEventListener("click", (e) => {
    const deleteBtn = e.target.closest(".deleteRecipientBtn");
    if (!deleteBtn) return;

    const box = deleteBtn.closest(".recipientBox");
    if (box) {
        box.remove();
        updateOrderNumbers();
        updateDeleteButtonsVisibility();
    }
});

// ----------------------
// Radio Button Behavior
// ----------------------
radioOrder.addEventListener("change", updateOrderNumbers);
radioInOrder.addEventListener("change", updateOrderNumbers);

// ----------------------
// Character Counter
// ----------------------
document.getElementById("subjectInput").addEventListener("input", function () {
    subjectCount.textContent = `${this.value.length}/100`;
});

document.getElementById("messageInput").addEventListener("input", function () {
    messageCount.textContent = `${this.value.length}/100`;
});

// ----------------------
// INITIAL STATE: hide delete button if only one box
// ----------------------
updateDeleteButtonsVisibility();
</script>

{% endblock %}