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 itemsContainer = document.getElementById("items-container");
        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 = [];
            itemsContainer.querySelectorAll(".item-card").forEach((card) => {
                const desc = card.querySelector(".item-desc").value.trim();
                if (desc) {
                    // Only include cards with description
                    items.push({
                        description: desc,
                        hsn: card.querySelector(".item-hsn").value,
                        qty:
                            parseFloat(card.querySelector(".item-qty").value) ||
                            0,
                        price:
                            parseFloat(
                                card.querySelector(".item-price").value,
                            ) || 0,
                        discount:
                            parseFloat(
                                card.querySelector(".item-discount").value,
                            ) || 0,
                        amount:
                            parseFloat(
                                card
                                    .querySelector(".item-amount")
                                    .textContent.replace("₹", ""),
                            ) || 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 < 20; 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 generateQuotationHTMLForPreview(form) {
            const html = generateQuotationHTML(form);
            // Remove print button from preview
            return html.replace(
                /<button[^>]*onclick="window\.print\(\)"[^>]*>.*?<\/button>/s,
                "",
            );
        }

        function updatePreview() {
            const form = document.getElementById("quotation-form");
            const html = generateQuotationHTMLForPreview(form);
            previewContent.innerHTML = html;
        }

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

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

            // Remove existing classes
            input.classList.remove("border-red-500", "border-green-500");

            // Remove loading effect
            setTimeout(() => {
                if (input.classList.contains("item-desc")) {
                    if (value.trim().length < 3) {
                        input.classList.add("border-red-500");
                        // Removed tooltip error display
                    } else {
                        input.classList.add("border-green-500");
                        // Removed tooltip error display
                    }
                } else if (input.type === "number") {
                    const numValue = parseFloat(value);
                    if (isNaN(numValue) || numValue < 0) {
                        input.classList.add("border-red-500");
                        // Removed tooltip error display
                    } else {
                        input.classList.add("border-green-500");
                        // Removed tooltip error display
                    }
                }
            }, 50);
        }

        function handleKeyNavigation(event) {
            if (event.key === "Tab" || event.key === "Enter") {
                const currentCard = event.target.closest(".item-card");
                const inputs = Array.from(
                    currentCard.querySelectorAll("input, textarea"),
                );
                const currentIndex = inputs.indexOf(event.target);

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

                    // If we're at the last input in the card and it's the last card, add a new card
                    if (currentIndex === inputs.length - 1) {
                        const allCards = Array.from(
                            itemsContainer.querySelectorAll(".item-card"),
                        );
                        const currentCardIndex = allCards.indexOf(currentCard);

                        if (currentCardIndex === allCards.length - 1) {
                            // Last card - add new card and focus first input
                            addItemRow();
                            setTimeout(() => {
                                const newCard = itemsContainer.lastElementChild;
                                newCard.querySelector(".item-desc").focus();
                            }, 50);
                        } else {
                            // Not last card - focus next card's first input
                            const nextCard = allCards[currentCardIndex + 1];
                            nextCard.querySelector(".item-desc").focus();
                        }
                    } else {
                        // Move to next input in same card
                        inputs[currentIndex + 1].focus();
                    }
                }
            }
        }

        function addItemRow() {
            const card = document.createElement("div");
            card.className =
                "item-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm";
            card.innerHTML = `
                <!-- Unified Card Layout for All Screen Sizes -->
                <div class="space-y-4">
                    <div class="flex items-center justify-between border-b border-gray-100 pb-3">
                        <div class="flex items-center gap-2">
                            <span class="item-slno bg-blue-100 text-blue-800 text-sm font-semibold px-2 py-1 rounded-full min-w-[1.5rem] text-center"></span>
                            <span class="text-base font-medium text-gray-800">Item Details</span>
                        </div>
                        <button type="button" class="remove-item bg-red-500 hover:bg-red-600 text-white text-sm font-medium py-1.5 px-3 rounded-md flex items-center gap-1" title="Remove this item">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1-1H8a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                            Remove
                        </button>
                    </div>

                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
                            <textarea class="item-desc w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" rows="2" placeholder="Enter item description..." required></textarea>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">HSN Code</label>
                                <input type="text" class="item-hsn w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="HSN Code">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Quantity *</label>
                                <input type="number" class="item-qty w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="1" min="0" step="0.01" required>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Unit Price *</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">₹</span>
                                    <input type="number" class="item-price w-full pl-7 pr-3 py-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="0" min="0" step="0.01" required>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Discount (%)</label>
                                <div class="relative">
                                    <input type="number" class="item-discount w-full pr-7 pl-3 py-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="0" min="0" max="100" step="0.01" placeholder="0">
                                    <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">%</span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-green-50 border border-green-200 rounded-md p-3">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-green-800">Total Amount</span>
                                <span class="item-amount text-lg font-bold text-green-700 font-mono">₹0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            itemsContainer.appendChild(card);
            updateSerialNumbers();

            // Add event listeners to inputs
            const inputs = card.querySelectorAll("input, textarea");
            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
            card.querySelector(".remove-item").addEventListener(
                "click",
                (_event) => {
                    if (itemsContainer.children.length > 1) {
                        card.remove();
                        updateSerialNumbers();
                        updatePreview();
                    } else {
                        // If it's the last card, 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(
                                "border-red-500",
                                "border-green-500",
                            );
                        });
                        card.querySelector(".item-amount").textContent =
                            "₹0.00";
                        updatePreview();
                    }
                },
            );

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

        function updateItemAmount(event) {
            const card = event.target.closest(".item-card");
            if (!card) return;

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

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

            card.querySelector(".item-amount").textContent =
                `₹${amount.toFixed(2)}`;

            // Remove complex visual feedback
        }

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

            // Focus the new card's first input
            const newCard = itemsContainer.lastElementChild;
            newCard.scrollIntoView({ behavior: "smooth", block: "center" });
            setTimeout(() => {
                newCard.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(
                itemsContainer.querySelectorAll(".item-card"),
            ).some((card) => {
                return card.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");

            // Add print-only class to modal for better print isolation
            output.classList.add("print-modal");
        });

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

        // Enhanced keyboard shortcuts
        document.addEventListener("keydown", (event) => {
            if (event.ctrlKey || event.metaKey) {
                if (event.key === "i") {
                    event.preventDefault();
                    addItemBtn.click();
                }
            }
        });

        // Auto-save functionality
        let saveTimeout;
        form.addEventListener("input", () => {
            clearTimeout(saveTimeout);
            saveTimeout = setTimeout(() => {
                // Auto-save form data (existing functionality)
                updatePreview();
            }, 500);
        });

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