script.js

function formatNumber(num) {
    return parseFloat(num).toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
}

let itemIndex = 0;

async function updateExchangeRate() {
    try {
        const res = await fetch("https://open.er-api.com/v6/latest/USD");
        const data = await res.json();
        if (data.result === "success") {
            document.getElementById("exchangeRate").value = data.rates.EUR.toFixed(4);
            renderPreview();
        }
    } catch (e) {
        alert("Could not fetch exchange rate. Using manual value.");
    }
}

function addItem(desc = "", amount = "", currency = "EUR") {
    const container = document.getElementById("items");
    const html = `
        <div class="item-box" id="item-${itemIndex}">
            <label>Description</label>
            <input value="${desc}" id="desc-${itemIndex}">

            <label>Amount</label>
            <input type="number" step="0.01" value="${amount}" id="amount-${itemIndex}">

            <label>Currency</label>
            <select id="currency-${itemIndex}">
                <option value="USD" ${currency==="USD"?'selected':''}>USD</option>
                <option value="EUR" ${currency==="EUR"?'selected':''}>EUR</option>
            </select>

            <button class="btn-delete" onclick="removeItem(${itemIndex})">Delete</button>
        </div>`;
    container.insertAdjacentHTML("beforeend", html);
    itemIndex++;
}

function removeItem(i) { document.getElementById(`item-${i}`).remove(); }

function renderPreview() {
    const title = document.getElementById("title").value || "INVOICE";
    const date = document.getElementById("date").value;
    const paidBy = document.getElementById("paidBy").value.replace(/\n/g, "<br>");
    const paidTo = document.getElementById("paidTo").value.replace(/\n/g, "<br>");
    const extraTitle = document.getElementById("extraTitle").value;
    const extraDesc = document.getElementById("extraDescription").value.replace(/\n/g, "<br>");
    const columnLabel = document.getElementById("columnLabel").value || "Amount";

    const items = [];
    document.querySelectorAll("[id^=item-]").forEach(div => {
        const i = div.id.split("-")[1];
        const amount = parseFloat(document.getElementById(`amount-${i}`).value) || 0;
        const desc = document.getElementById(`desc-${i}`).value.trim();
        if (amount > 0 || desc) {
            items.push({
                desc: desc || "—",
                amount: amount,
                currency: document.getElementById(`currency-${i}`).value
            });
        }
    });

    const baseCurrency = document.getElementById("baseCurrency").value;
    const rate = parseFloat(document.getElementById("exchangeRate").value) || 1;

    let totalBase = 0;
    items.forEach(item => {
        if (item.currency === baseCurrency) {
            totalBase += item.amount;
        } else if (baseCurrency === "EUR") {
            totalBase += item.amount * rate;
        } else {
            totalBase += item.amount / rate;
        }
    });

    const rows = items.map(item => `
        <tr>
            <td>${item.desc}</td>
            <td class="amount">${formatNumber(item.amount)} ${item.currency}</td>
        </tr>
    `).join("");

    const note = items.some(i => i.currency !== baseCurrency) ? `
        <div class="note">
            Exchange rate used: 1 USD = ${rate.toFixed(4)} EUR
        </div>` : "";

    const html = `
        <div class="title">${title}</div>
        <div class="date">${date}</div>

        <div class="info-grid">
            <div class="info-box">
                <div class="section-title">Bill From</div>
                ${paidBy}
            </div>
            <div class="info-box">
                <div class="section-title">Bill To</div>
                ${paidTo}
            </div>
        </div>

        ${extraTitle ? `<div class="section-title">${extraTitle}</div>` : ""}
        ${extraDesc ? `<div style="margin-bottom:30px;line-height:1.7;">${extraDesc}</div>` : ""}

        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>${columnLabel}</th>
                </tr>
            </thead>
            <tbody>
                ${rows}
                <tr class="total-row">
                    <td><strong>Total</strong></td>
                    <td class="amount"><strong>${formatNumber(totalBase)} ${baseCurrency}</strong></td>
                </tr>
            </tbody>
        </table>

        ${note}
    `;

    document.getElementById("invoice-preview").innerHTML = html;
}

addItem("Server 1", "15.00", "EUR");
addItem("Server 2", "15.00", "EUR");
updateExchangeRate();
renderPreview();