@layout:offline.html;

<script src="/lib/qrcode.min.js"></script>
        
<script>
    function doPrint() {
        var tab = window.open("", "Wydruk", "toolbar=no,location=no,directories=no,status=no,menubar=no,width=1280,height=600");
        var doc =
                @jsfragment:embedded/print.html;
        
        doc = doc.replace("%value", $("[name=value]").val());
        doc = doc.replace("%firstname", $("[name=firstname]").val());
        doc = doc.replace("%lastname", $("[name=lastname]").val());
        doc = doc.replace("%streetname", $("[name=streetname]").val());
        doc = doc.replace("%streetnum", $("[name=streetnum]").val());
        doc = doc.replace("%flat", $("[name=flat]").val());
        doc = doc.replace("%postcode", $("[name=postcode]").val());
        doc = doc.replace("%nin", $("[name=nin]").val());
        doc = doc.replace("%doc", $("[name=doc]").val());
        doc = doc.replace("%city", $("[name=city]").val());
        
        doc = doc.replace("%url", window.location.protocol + "//" + window.location.hostname + ":" + window.location.port);
        $(tab.document.body).html(doc);
        
        var qr = "v=" + encodeURIComponent($("[name=value]").val());
        qr += "&fn=" + encodeURIComponent($("[name=firstname]").val());
        qr += "&ln=" + encodeURIComponent($("[name=lastname]").val());
        qr += "&s=" + encodeURIComponent($("[name=streetname]").val());
        qr += "&n=" + encodeURIComponent($("[name=streetnum]").val());
        qr += "&f=" + encodeURIComponent($("[name=flat]").val());
        qr += "&p=" + encodeURIComponent($("[name=postcode]").val());
        qr += "&i=" + encodeURIComponent($("[name=nin]").val());
        qr += "&c=" + encodeURIComponent($("[name=city]").val());
        qr += "&d=" + encodeURIComponent($("[name=doc]").val());
        
        $("#qr").text(qr);
        
        new QRCode(tab.document.getElementById('qrcode'), {
            text: qr,
            width: 128,
            height: 128,
            correctLevel : QRCode.CorrectLevel.H
        });
        
        tab.print();
    }
</script>

<div class="work-head">
    <div class="centerfold">
        <p class="area-name">Formularz płatności</p>

        <p class="area-button" onclick="doPrint();">Drukuj</p>
        <p class="area-separator"></p>
        <p class="area-button" onclick="window.location = '.';">Wyczyść</p>
    </div>
</div>

<br />

<script src="/script/install.js"></script>
<script src="/script/dialogs.js"></script>

<script>
            // installing service worker, to cover off-line scenario
            if ('serviceWorker' in navigator) {
                window.addEventListener('load', () => {
                    navigator.serviceWorker.register('/service-worker.js')
                            .then(reg => {
                                // console.log('Service worker registered.', reg);
                            });
                });
            }
</script>

<div class="centerfold">
    
    <span class="warning warning-yellow">Urządzenie nie jest podłączone. Korzystasz z serwisu w wersji off-line.</span>
    
    <form id="form" method="get" action="/Print.gx">
        <h2>Dane dokumentu</h2>
        <br />

        <div style="display: table;">
            <div style="display: table-cell;">

                <label>Dokument</label>
                <input type="text" name="doc" placeholder="np. FVAT 1/2/3"></input><br />
            </div>
            <div style="display: table-cell;">


                <label>Kwota</label>
                <input type="currency" name="value"></input><br />
            </div>
        </div>

        <br />
        <h2>Dane klienta</h2>
        <br />

        <div style="display: table;">
            <div style="display: table-cell;">
                <label>Imię</label>
                <input type="text" name="firstname"></input><br />

                <label>Ulica</label>
                <input type="text" name="streetname"></input><br />

                <label>Miasto</label>
                <input type="text" name="city"></input><br />
            </div>
            <div style="display: table-cell;">
                <label>Nazwisko</label>
                <input type="text" name="lastname"></input><br />

                <label>Dom</label>
                <input type="text" name="streetnum" style="width: 64px;"></input>

                <label>Mieszkanie</label>
                <input type="text" name="flat" style="width: 64px;"></input><br />

                <label>Kod pocztowy</label>
                <input type="text" name="postcode" style="width: 64px;"></input><br />
            </div>
        </div>

        <h2>Dla kwot powyżej 10 tys. zł</h2>
        <br />

        <label>PESEL lub NIP</label>
        <input type="number" name="nin" style=""></input><br />
        <br />
        
        <div hidden>            
            <h2>Testowanie</h2>
            <label>Wartość QR</label><span id="qr"></span>
        </div>
    </form>
</div>

<script>

    displayCurrency = 'PLN';
    setupCurrency();

</script>