/* ════════════════════════════════════════════════════════
   lang.js — Reusable Lao / English language switcher
   Usage on any page:
     1. Add to <head>:
        <script src="../assets/lang.js"></script>
     2. Add language bar HTML anywhere:
        <div class="lang-bar">
          <span class="lang-label">ພາສາ / Language:</span>
          <button class="lang-btn" id="btn-lo" onclick="setLang('lo')">🇱🇦 ລາວ</button>
          <button class="lang-btn" id="btn-en" onclick="setLang('en')">🇬🇧 English</button>
        </div>
     3. Tag any element:
        <span data-lo="ສະຫວັດດີ" data-en="Hello">ສະຫວັດດີ</span>
     4. For inputs/textareas:
        <input data-lo-placeholder="ຄົ້ນຫາ..." data-en-placeholder="Search...">
     5. For <select> options:
        <option data-lo="ເງິນສົດ" data-en="Cash">ເງິນສົດ</option>
════════════════════════════════════════════════════════ */

function setLang(lang) {
    localStorage.setItem("lang", lang);
    applyLang(lang);
}

function applyLang(lang) {
    /* Toggle active button */
    const btnLo = document.getElementById("btn-lo");
    const btnEn = document.getElementById("btn-en");
    if (btnLo) btnLo.classList.toggle("active", lang === "lo");
    if (btnEn) btnEn.classList.toggle("active", lang === "en");

    /* Swap innerHTML of tagged elements */
    document.querySelectorAll("[data-lo][data-en]").forEach(el => {
        const val = el.dataset[lang];
        if (val !== undefined) el.innerHTML = val;
    });

    /* Swap placeholder attributes */
    document.querySelectorAll("[data-lo-placeholder][data-en-placeholder]").forEach(el => {
        el.placeholder = lang === "lo"
            ? el.dataset.loPlaceholder
            : el.dataset.enPlaceholder;
    });

    /* Swap <option> text content */
    document.querySelectorAll("option[data-lo][data-en]").forEach(opt => {
        const val = opt.dataset[lang];
        if (val !== undefined) opt.textContent = val;
    });

    /* Store globally so JS functions can check current language */
    window._lang = lang;

    /* Dispatch event so other scripts can react */
    document.dispatchEvent(new CustomEvent("langchange", { detail: { lang } }));
}

/* Apply saved language on every page load */
(function () {
    /* Wait for DOM if script is in <head> */
    function init() {
        const saved = localStorage.getItem("lang") || "lo";
        applyLang(saved);
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();

/* ── Reusable amount formatter ── */
function formatAmountInput(inputEl, hiddenEl) {
    inputEl.addEventListener("input", function () {
        const raw = this.value.replace(/,/g, "").replace(/[^\d]/g, "");
        this.value = raw ? Number(raw).toLocaleString("en-US") : "";
    });

    if (inputEl.closest("form")) {
        inputEl.closest("form").addEventListener("submit", function () {
            if (hiddenEl) {
                hiddenEl.value = parseFloat(inputEl.value.replace(/,/g, "")) || 0;
            }
        });
    }
}

/* ── Reusable language bar CSS (injected once) ── */
(function injectLangBarCSS() {
    if (document.getElementById("lang-bar-style")) return;
    const style = document.createElement("style");
    style.id = "lang-bar-style";
    style.textContent = `
        .lang-bar {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            margin-bottom: 14px;
        }
        .lang-label {
            font-size: 12px;
            color: #64748b;
            font-weight: 500;
        }
        .lang-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 13px;
            border-radius: 999px;
            border: 1.5px solid #e2e8f0;
            background: #fff;
            font-size: 12px;
            font-weight: 700;
            color: #64748b;
            cursor: pointer;
            font-family: inherit;
            transition: border-color .15s, color .15s, background .15s;
        }
        .lang-btn:hover  { border-color: #2563eb; color: #2563eb; }
        .lang-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
    `;
    document.head.appendChild(style);
})();