@layout:private.html;

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

        <p class="area-button" onclick="showAjaxDialog('client-data', '/action/public/clientPage', clientDialogShown, clientDialogHidden);">Wyszukaj</p>
        <p class="area-separator"></p>
        <p class="area-button" onclick="doPrint();">Drukuj</p>
        <p class="area-separator"></p>
        <p class="area-button" onclick="doSend();">Wyślij do stacji</p>
        <p class="area-separator"></p>
        <p class="area-separator"></p>
        <p class="area-separator"></p>
        <p class="area-separator"></p>
        <p class="area-button" onclick="window.location = '.';">Wyczyść</p>        
        <p class="area-separator"></p>
        <p class="area-separator"></p>
        <p class="area-separator"></p>
        <p class="area-separator"></p>
        <p class="area-button" onclick="showAjaxDialog('check-status', '/ajax/check-status.html');">Sprawdź status</p>
        <p class="area-separator"></p>
        @if '@{http:session:role}' == 'Www';
        <p class="area-separator"></p>
        <p class="area-separator"></p>
        @else;
        <p class="area-button" onclick="window.location = 'List.gx';">Lista transakcji</p>
        <p class="area-button" onclick="window.location = 'CashDevices.gx';">Stan gotówki</p>
        @endif;
        <p class="area-separator"></p>
        
    </div>
</div>

<br />

<div class="centerfold">
    <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" required="required" 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 style="color: #aaa !important;">Dla kwot powyżej 10 tys. zł</h2>
        <br />

        <label style="color: #aaa !important;">PESEL lub NIP</label>
        <input style="color: #aaa !important; border-color: #aaa; box-shadow: 8px 0 8px 0 #eee;" enabled type="number" name="nin" style=""></input><br />
        <br />

        <div hidden>
            <h2>Testowanie</h2>
            <label>Wartość QR</label><span id="qr"></span>
        </div>
    </form>
</div>

<div id="client-data-dialog" class="dialog" hidden>
    <div class="back-dialog"></div>    

    <div class="dialog-form">        
        <div id="client-data-content"></div>
    </div>
</div>

<div id="check-status-dialog" class="dialog" hidden>
    <div class="back-dialog"></div>    

    <div class="dialog-form">        
        <div id="check-status-content"></div>
    </div>
</div>

<div id="sent-notify-dialog" class="dialog" hidden>
    <div class="back-dialog"></div>    

    <div class="dialog-form">        
        <div id="sent-notify-content"></div>
    </div>
</div>

<div id="too-big-dialog" class="dialog" hidden>
    <div class="back-dialog"></div>    

    <div class="dialog-form">        
        <div id="too-big-content"></div>
    </div>
</div>

<script src="/lib/qrcode.min.js"></script>      
<script src="/script/install.js"></script>
<script src="/script/jsbarcode.js"></script>
<script src="/script/polyfill.js"></script>
<script src="/script/dialogs.js"></script>
<script src="/script/md5.js"></script>
<script src="/action/public/clientCode"></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);
                            });
                });
            }

            function getValue() {
                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());

                return qr;
            }

            function doSend() {
                var value = localStringToNumber($("[name=value]").val());
                if (value <= 10000.00) {
                    $.ajax({
                        url: "/api/barcode/enter?" + getValue()
                    }).done(function () {
                        showAjaxDialog('check-status', '/ajax/sent-notify.html');
                    });
                } else {
                    showAjaxDialog('too-big', '/ajax/too-big.html');
                }
            }

            function validateForm() {
                var value = $("[name=doc]").val();
                 if (value.length < 12) {
                    alert("Pole dokument musi mieć min. 12 znaków");
                    return false;
                }
                
                var value = $("[name=lastname]").val();
                if (value.length < 1) {
                    alert("Pole nazwisko nie może być puste");
                    return false;
                }
                
                var value = $("[name=streetname]").val();
                if (value.length < 1) {
                    alert("Pole nazwa ulicy nie może być puste");
                    return false;
                }
                
                var value = $("[name=streetnum]").val();
                if (value.length < 1) {
                    alert("Pole dom nie może być puste");
                    return false;
                }
                
                var value = $("[name=postcode]").val();
                if (value.length != 6) {
                    alert("Pole kod pocztowy musi mieć format 00-000");
                    return false;
                }
                
                var value = $("[name=city]").val();
                if (value.length < 1) {
                    alert("Pole miasto nie może być puste");
                    return false;
                }  
           
            }

            function doPrint() {
                var val = validateForm();
                if (val == false)
                    return;
                var value = localStringToNumber($("[name=value]").val());
                if (value <= 10000.00) {
                    var qr = getValue();
                    $.get("/api/barcode/define?" + qr, function (data) {
                        doPrintInt(qr, data);
                    }).fail(function () {
                        doPrintInt(qr, "-");
                    });
                } else {
                    showAjaxDialog('too-big', '/ajax/too-big.html');
                }
            }

            function doPrintInt(qr, id) {
                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("%now", new Date().toISOString().substring(0, 16).replace("T", " "));
                doc = doc.replace("%id", id);

                doc = doc.replace("%url", window.location.protocol + "//" + window.location.hostname + ":" + window.location.port);
                $(tab.document.body).html(doc);

//         JsBarcode(tab.document.getElementById('barcode'), id, {
//             width: 2,
//             height: 40,
//             displayValue: true
//         });

                $("#qr").text(qr);
                window.console.info('Generated QR: ' + qr);

                new QRCode(tab.document.getElementById('qrcode'), {
                    text: qr,
                    width: 128,
                    height: 128,
                    correctLevel: QRCode.CorrectLevel.H
                });

                tab.print();
            }

            function checkStatus() {

                $('#cdError').hide();

                $.ajax({
                    url: "/api/barcode/check?id=" + $('#nrZle').val()
                }).done(function () {
                    $('#cdError').hide();
                    $('#cdData').show().text("Opłacono");
                }).error(function (jqXHR, textStatus, errorThrown) {
                    $('#cdData').hide();
                    if (errorThrown === 'No payment') {
                        $('#cdError').show().text("Zlecenie nie jest opłacone");
                    } else if (errorThrown === 'No barcode') {
                        $('#cdError').show().text("Nie znaleziono. Sprawdź numer zlecenia.");
                    } else {
                        $('#cdError').show().text("Obecnie nie można sprawdzić statusu - " + textStatus + " - " + errorThrown);
                    }
                });

                return false;
            }

            displayCurrency = 'PLN';
            setupCurrency();

</script>