<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UPN-QR :: FORM</title>
    <link rel="stylesheet" href="/public/style.css">
</head>
<style>

div {
    display: grid;
}
.card {
    row-gap: 1rem
}
.title {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
    align-content: center;
    justify-content: center;
    padding: 1rem;
    column-gap: 1rem;
    text-align: center;
}
.title > * {
    margin: auto;
}

.form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    row-gap: .5rem;
    column-gap: 1rem;;
}
.code {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    row-gap: 1rem;

    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url("/public/invalid-content.png");
    min-height: 210px;
    min-width: 210px;
}
@media screen and (min-width: 700px) {
    .card {
        grid-template-columns: min-content 1fr;
        column-gap: 1rem;
    }
    .title { grid-column: span 2; }
}
</style>
<body>
    <div class="card">
        <div class="title">
            <h1>Form: <%= q["title"] %></h1>
            <span>Create your form here: <a href="/#maker">/#maker</a></span>
        </div>
        <div class="code" id="qrcode"></div>
        <div class="form">
            <%
            const items = [
                { n: "client-name",     d: "Client name",       p: "Peter Novak",               t: "text" },
                { n: "client-address",  d: "Client address",    p: "Ravna Ulica 13",            t: "text" },
                { n: "client-city",     d: "Client city",       p: "1000 Ljubljana",            t: "text" },
                { n: "issuer-name",     d: "Issuer name",       p: "Spletne strani n'123",      t: "text" },
                { n: "issuer-address",  d: "Issuer address",    p: "Za deveto smreko 15 k",     t: "text" },
                { n: "issuer-city",     d: "Issuer city",       p: "1000 Ljubljana",            t: "text" },
                { n: "iban",            d: "IBAN",              p: "SI56047500000280672",       t: "text" },
                { n: "amount",          d: "Amount",            p: "35090 (350.90€)",           t: "number" },
                { n: "code",            d: "Code",              p: "OTHR",                      t: "text" },
                { n: "purpose",         d: "Purpose",           p: "moutain bike first half",   t: "text" },
                { n: "reference",       d: "Reference",         p: "SI121234567890120",         t: "text" },
                { n: "deadline",        d: "Deadline",          p: "01.02.2034",                t: "text" }
            ]
            %>
            <% for (const i of items) { %>
                <%
                    const str = String(q[i.n])
                    const readonly = (str != "" && !str.includes("*") ? "readonly" : "")
                    const val = str.replace("*", "")
                %>
                <div>
                    <label for="<%= i.n %>"><%= i.d %></label>
                    <input value="<%= val %>" <%= readonly %> type="<%= i.t %>" placeholder="<%= i.p %>" name="<%= i.n %>">
                </div>
            <% } %>
            <!-- <div>
                <input type="submit" value="Update details" id="update-details">
            </div> -->
        </div>
    </div>
</body>
<script>
const qrcode = document.getElementById("qrcode")
function val (name) { return document.getElementsByName(name)?.[0]?.value || "" }
let debounce = null
function updateQRdeb () {
    clearTimeout(debounce)
    debounce = setTimeout(() => {
        clearTimeout(debounce)
        updateQR()
    }, 500);
}
function getNewUrl () {
    const qstring = [
        ["client_name", val("client-name")],
        ["client_address", val("client-address")],
        ["client_city", val("client-city")],
        ["amount", val("amount").padStart(11, "0")],
        ["purpose_code", val("code")],
        ["payment_purpose", val("purpose")],
        ["iban", val("iban")],
        ["reference", val("reference")],
        ["issuer_name", val("issuer-name")],
        ["issuer_address", val("issuer-address")],
        ["issuer_city", val("issuer-city")],
        ["deadline", val("deadline")]
    ].map(v => `${v[0]}=${v[1]}`).join("&")
    return `${window.location.origin}/api/qrcode?${qstring}`
}
function updateQR (e) {
    try {
        const preloadImg = new Image();
        const newurl = getNewUrl()
        preloadImg.addEventListener("load", () => qrcode.style.setProperty('background-image', `url("${newurl}"), url("/public/invalid-content.png")`))
        preloadImg.addEventListener("error", () => qrcode.style.setProperty('background-image', `url("/public/invalid-content.png")`))
        preloadImg.src=newurl;
    } catch (error) {
        setImgUrl(`url("/public/invalid-content.png")`)
    }
}

// Add input listener to all inputs
for (el of document.getElementsByTagName("input")) {
    el.addEventListener("input", updateQRdeb)
}

updateQR()
</script>
</html>
