script.js

// helper: convert number to Indian-notation words (Crore, Lakh, Thousand, Hundred)
function numberToWords(num) {
    const small = [
        "",
        "One",
        "Two",
        "Three",
        "Four",
        "Five",
        "Six",
        "Seven",
        "Eight",
        "Nine",
        "Ten",
        "Eleven",
        "Twelve",
        "Thirteen",
        "Fourteen",
        "Fifteen",
        "Sixteen",
        "Seventeen",
        "Eighteen",
        "Nineteen",
    ];
    const tens = [
        "",
        "",
        "Twenty",
        "Thirty",
        "Forty",
        "Fifty",
        "Sixty",
        "Seventy",
        "Eighty",
        "Ninety",
    ];
    function twoDigit(n) {
        if (n < 20) return small[n];
        return tens[Math.floor(n / 10)] + (n % 10 ? " " + small[n % 10] : "");
    }
    let words = "";
    const crore = Math.floor(num / 10000000);
    num %= 10000000;
    if (crore) words += twoDigit(crore) + " Crore ";
    const lakh = Math.floor(num / 100000);
    num %= 100000;
    if (lakh) words += twoDigit(lakh) + " Lakh ";
    const thousand = Math.floor(num / 1000);
    num %= 1000;
    if (thousand) words += twoDigit(thousand) + " Thousand ";
    const hundred = Math.floor(num / 100);
    num %= 100;
    if (hundred) words += small[hundred] + " Hundred ";
    if (num) words += (words ? "and " : "") + twoDigit(num) + " ";
    return words.trim() || "Zero";
}

if (typeof document !== "undefined") {
    document.addEventListener("DOMContentLoaded", function () {
        const addItemBtn = document.getElementById("add-item");
        const itemsTableBody = document.querySelector("#items-table tbody");
        const form = document.getElementById("quotation-form");
        const output = document.getElementById("quotation-output");
        const previewContent = document.getElementById("preview-content");

        // Add initial empty row
        addItemRow();

        function generateQuotationHTML(form) {
            const data = new FormData(form);
            const company = {
                name: data.get("company-name"),
                address: data.get("company-address"),
                phone: data.get("company-phone"),
                email: data.get("company-email"),
                gstin: data.get("company-gstin"),
            };
            const customer = {
                name: data.get("customer-name"),
                address: data.get("customer-address"),
                phone: data.get("customer-phone"),
                email: data.get("customer-email"),
                gstin: data.get("customer-gstin"),
            };
            const quotationNumber = data.get("quotation-number");
            const quotationDate = data.get("quotation-date");
            const igstRate = parseFloat(data.get("igst-rate")) || 0;
            const freightCharges = parseFloat(data.get("freight-charges")) || 0;
            const bank = {
                name: data.get("bank-name"),
                account: data.get("bank-account"),
                ifsc: data.get("bank-ifsc"),
                branch: data.get("bank-branch"),
            };
            const items = [];
            itemsTableBody.querySelectorAll("tr").forEach((row) => {
                const desc = row.querySelector(".item-desc").value.trim();
                if (desc) {
                    // Only include rows with description
                    items.push({
                        description: desc,
                        hsn: row.querySelector(".item-hsn").value,
                        qty:
                            parseFloat(row.querySelector(".item-qty").value) ||
                            0,
                        price:
                            parseFloat(
                                row.querySelector(".item-price").value,
                            ) || 0,
                        discount:
                            parseFloat(
                                row.querySelector(".item-discount").value,
                            ) || 0,
                        amount:
                            parseFloat(
                                row.querySelector(".item-amount").textContent,
                            ) || 0,
                    });
                }
            });

            if (items.length === 0) {
                return `
                <div class="text-center text-gray-500 p-8">Please add items to generate quotation</div>
                `;
            }

            const { subtotal, igstAmount, _total, rOff, finalTotal } =
                calculateQuotation(items, igstRate, freightCharges);

            // convert total to words (Rupees and Paise)
            const rupeePart = Math.floor(finalTotal);
            const paisePart = Math.round((finalTotal - rupeePart) * 100);
            const rupeeWords = numberToWords(rupeePart);
            const paiseWords = paisePart > 0 ? numberToWords(paisePart) : "";

            let html = `
        <div class="quotation-print">
          <div class="header">
            <div class="company-details">
              <h1>${company.name}</h1>
              {{address}}<br>
              GST NO. : ${company.gstin || ""}<br>
              CONTACT NO : ${company.phone} ${company.email}
            </div>
            <div class="quotation-title">
              <h1>QUOTATION</h1>
              <table class="quote-meta">
                <tr>
                  <td>QUO. NO</td>
                  <td>${quotationNumber}</td>
                </tr>
                <tr>
                  <td>DATE</td>
                  <td>${quotationDate}</td>
                </tr>
              </table>
            </div>
          </div>

          <div class="customer-info">
            <strong>CUSTOMER INFO</strong><br>
            ${customer.name}<br>
            {{cutomer_address}}<br>
            GST NO. : ${customer.gstin || ""}<br>
            CONTACT NO : ${customer.phone} ${customer.email}
          </div>

          <table class="items-table-print">
            <thead>
              <tr>
                <th>SL NO</th>
                <th>DESCRIPTION</th>
                <th>HSN CODE</th>
                <th>QTY</th>
                <th>UNIT PRICE</th>
                <th>DISCOUNT</th>
                <th>AMOUNT</th>
              </tr>
            </thead>
            <tbody>
      `;
            items.forEach((item, idx) => {
                html += `
              <tr>
                <td>${idx + 1}</td>
                <td>${item.description}</td>
                <td>${item.hsn}</td>
                <td>${item.qty}</td>
                <td>${item.price.toFixed(2)}</td>
                <td>${item.discount.toFixed(2)}%</td>
                <td>${item.amount.toFixed(2)}</td>
              </tr>
        `;
            });
            // Add empty rows to fill the page
            for (let i = items.length; i < 7; i++) {
                html +=
                    "<tr><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
            }

            html += `
            </tbody>
          </table>

          <div class="footer">
            <div class="notes-and-total">
              <div class="notes">
                SPECIAL NOTES:<br><br>
                AMOUNT IN WORDS:<br>
                <strong>Rupees ${rupeeWords}${paiseWords ? " and " + paiseWords + " Paise" : ""} only</strong><br><br>
                Delivery : 7 to 10 working days after receiving PO<br><br>
                BANK DETAILS FOR RTGS/ NEFT<br>
                BANK:${bank.name}<br>
                BRANCH: ${bank.branch}<br>
                A/C NO: ${bank.account}<br>
                IFSC CODE: ${bank.ifsc}
              </div>
              <div class="totals">
                <table>
                  <tr>
                    <td>SUB TOTAL</td>
                    <td>${subtotal.toFixed(2)}</td>
                  </tr>
                  <tr>
                    <td>FREIGHT CHARGES</td>
                    <td>${freightCharges.toFixed(2)}</td>
                  </tr>
                  <tr>
                    <td>IGST</td>
                    <td>${igstAmount.toFixed(2)}</td>
                  </tr>
                  <tr>
                    <td>R/OFF</td>
                    <td>${rOff.toFixed(2)}</td>
                  </tr>
                  <tr>
                    <td><strong>TOTAL</strong></td>
                    <td><strong>${finalTotal.toFixed(2)}</strong></td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="disclaimer">
              This quotation is not a contract or a bill. It is our best guess at the total price for the service and goods described above. The customer will be billed after indicating acceptance of this quote. Payment will be due prior to the delivery of service and goods. Please fax or mail the signed quote to the address listed above.
            </div>
            <div class="thank-you">
              Thank you for your business!
            </div>
          </div>
          <button onclick="window.print()">Print / Save as PDF</button>
        </div>
      `;
            html = html.replace(
                "{{address}}",
                company.address.replace(/\n/g, "<br>"),
            );
            html = html.replace(
                "{{cutomer_address}}",
                customer.address.replace(/\n/g, "<br>"),
            );
            return html;
        }

        function updatePreview() {
            const html = generateQuotationHTML(form);
            previewContent.innerHTML = html;
        }

        function updateSerialNumbers() {
            itemsTableBody.querySelectorAll("tr").forEach((row, i) => {
                row.querySelector(".item-slno").textContent = i + 1;
            });
        }

        function validateItemInput(input) {
            const value = input.value;
            const type = input.type;

            input.classList.remove(
                "border-red-500",
                "bg-red-100",
                "border-green-500",
            );

            if (type === "number" && value !== "") {
                const num = parseFloat(value);
                if (isNaN(num) || num < 0) {
                    input.classList.add("border-red-500", "bg-red-100");
                    return false;
                } else {
                    input.classList.add("border-green-500");
                }
            } else if (
                type === "text" &&
                input.hasAttribute("required") &&
                value.trim() === ""
            ) {
                input.classList.add("border-red-500", "bg-red-100");
                return false;
            }

            return true;
        }

        function handleKeyNavigation(event) {
            if (event.key === "Tab" || event.key === "Enter") {
                const currentRow = event.target.closest("tr");
                const inputs = Array.from(currentRow.querySelectorAll("input"));
                const currentIndex = inputs.indexOf(event.target);

                if (event.key === "Enter") {
                    event.preventDefault();

                    // If we're at the last input in the row and it's the last row, add a new row
                    if (currentIndex === inputs.length - 1) {
                        const allRows = Array.from(
                            itemsTableBody.querySelectorAll("tr"),
                        );
                        const currentRowIndex = allRows.indexOf(currentRow);

                        if (currentRowIndex === allRows.length - 1) {
                            // Last row - add new row and focus first input
                            addItemRow();
                            setTimeout(() => {
                                const newRow = itemsTableBody.lastElementChild;
                                newRow.querySelector(".item-desc").focus();
                            }, 50);
                        } else {
                            // Not last row - focus next row's first input
                            const nextRow = allRows[currentRowIndex + 1];
                            nextRow.querySelector(".item-desc").focus();
                        }
                    } else {
                        // Move to next input in same row
                        inputs[currentIndex + 1].focus();
                    }
                }
            }
        }

        function addItemRow() {
            const row = document.createElement("tr");
            row.className =
                "block lg:table-row border-b-2 lg:border-b-0 lg:border-gray-200";
            row.innerHTML = `
        <td class="item-slno p-2 border border-gray-300 text-center font-semibold text-gray-600 bg-gray-50 w-16 hidden lg:table-cell" data-label="S.No"></td>
        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Description">
          <div class="tooltip">
            <input type="text" class="item-desc w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter item description" required>
            <span class="tooltiptext">Describe the item or service being quoted</span>
          </div>
        </td>
        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="HSN Code">
          <div class="tooltip">
            <input type="text" class="item-hsn w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="HSN Code">
            <span class="tooltiptext">Harmonized System of Nomenclature code for tax purposes</span>
          </div>
        </td>
        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Qty">
          <div class="tooltip">
            <input type="number" class="item-qty w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="1" min="0" step="0.01" required>
            <span class="tooltiptext">Quantity of items</span>
          </div>
        </td>
        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Unit Price">
          <div class="tooltip">
            <input type="number" class="item-price w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="0" min="0" step="0.01" required>
            <span class="tooltiptext">Price per unit before discount</span>
          </div>
        </td>
        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Discount (%)">
          <div class="tooltip">
            <input type="number" class="item-discount w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="0" min="0" max="100" step="0.01" placeholder="0">
            <span class="tooltiptext">Discount percentage (0-100)</span>
          </div>
        </td>
        <td class="item-amount p-2 border border-gray-300 text-right font-semibold text-green-700 bg-green-50 font-mono block lg:table-cell" data-label="Amount">0.00</td>
        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Action">
          <button type="button" class="remove-item bg-red-500 hover:bg-red-600 text-white text-xs font-bold py-1 px-2 rounded flex items-center gap-1" title="Remove this item">
            <span>×</span> Remove
          </button>
        </td>
      `;

            itemsTableBody.appendChild(row);
            updateSerialNumbers();

            // Add event listeners to inputs
            const inputs = row.querySelectorAll("input");
            inputs.forEach((input) => {
                input.addEventListener("input", (event) => {
                    validateItemInput(event.target);
                    updateItemAmount(event);
                    updatePreview();
                });

                input.addEventListener("keydown", handleKeyNavigation);

                input.addEventListener("blur", (event) => {
                    validateItemInput(event.target);
                });
            });

            // Add remove button listener
            row.querySelector(".remove-item").addEventListener(
                "click",
                (_event) => {
                    if (itemsTableBody.children.length > 1) {
                        row.remove();
                        updateSerialNumbers();
                        updatePreview();
                    } else {
                        // If it's the last row, just clear it instead of removing
                        inputs.forEach((input) => {
                            if (input.type === "number") {
                                input.value = input.classList.contains(
                                    "item-qty",
                                )
                                    ? "1"
                                    : "0";
                            } else {
                                input.value = "";
                            }
                            input.classList.remove(
                                "input-error",
                                "input-success",
                            );
                        });
                        row.querySelector(".item-amount").textContent = "0.00";
                        updatePreview();
                    }
                },
            );

            // Auto-calculate initial amount
            updateItemAmount({ target: row.querySelector(".item-qty") });
        }

        function updateItemAmount(event) {
            const row = event.target.closest("tr");
            if (!row) return;

            const qty = parseFloat(row.querySelector(".item-qty").value) || 0;
            const price =
                parseFloat(row.querySelector(".item-price").value) || 0;
            const discountRate =
                parseFloat(row.querySelector(".item-discount").value) || 0;

            const discountAmount = (qty * price * discountRate) / 100;
            const amount = qty * price - discountAmount;

            row.querySelector(".item-amount").textContent = amount.toFixed(2);

            // Add visual feedback for calculated amount
            const amountCell = row.querySelector(".item-amount");
            amountCell.classList.toggle("bg-green-50", amount > 0);
            amountCell.classList.toggle("text-green-700", amount > 0);
            amountCell.classList.toggle("bg-red-50", amount <= 0);
            amountCell.classList.toggle("text-red-700", amount <= 0);
        }

        // Enhanced Add Item button
        addItemBtn.addEventListener("click", () => {
            addItemRow();
            updatePreview();

            // Focus the new row's first input
            const newRow = itemsTableBody.lastElementChild;
            newRow.scrollIntoView({ behavior: "smooth", block: "center" });
            setTimeout(() => {
                newRow.querySelector(".item-desc").focus();
            }, 100);
        });

        // Add keyboard shortcut for adding items (Ctrl+I)
        document.addEventListener("keydown", (event) => {
            if (event.ctrlKey && event.key === "i") {
                event.preventDefault();
                addItemBtn.click();
            }
        });

        form.addEventListener("input", updatePreview);

        form.addEventListener("submit", function (event) {
            event.preventDefault();

            // Validate that we have at least one item with description
            const hasValidItems = Array.from(
                itemsTableBody.querySelectorAll("tr"),
            ).some((row) => {
                return row.querySelector(".item-desc").value.trim() !== "";
            });

            if (!hasValidItems) {
                alert(
                    "Please add at least one item with a description before generating the quotation.",
                );
                return;
            }

            const quotationContent = document.getElementById("quotation-content");
            const html = generateQuotationHTML(form);
            quotationContent.innerHTML = html;
            output.classList.remove("hidden");
        });

        document.getElementById("close-quotation").addEventListener("click", () => {
            output.classList.add("hidden");
        });

        // Initial preview
        updatePreview();
    });
}

function calculateQuotation(items, igstRate, freightCharges) {
    const subtotal = items.reduce((sum, i) => sum + i.amount, 0);
    const igstAmount = (subtotal * igstRate) / 100;
    const total = subtotal + igstAmount + freightCharges;
    const totalBeforeRoundOff = total;
    const finalTotal = Math.round(totalBeforeRoundOff);
    const rOff = totalBeforeRoundOff - finalTotal;

    return {
        subtotal,
        igstAmount,
        total,
        rOff,
        finalTotal,
    };
}

// Export for testing (Node.js)
if (typeof module !== "undefined" && module.exports) {
    module.exports = { numberToWords, calculateQuotation };
}