{% import "admin/Macros/Buttons/_button.html.twig" as button %}
<div class="row">
    <div class="form-group col-4">
        <label>Datum </label>
        <input type="date" name="buchhaltung[datum]"
               value="{% if buchhaltung is not empty %}{{ buchhaltung.datum|date('Y-m-d') }}{% endif %}"
               class="form-control">
    </div>


    <div class="form-group col-12 position-relative">
        <label>Buchungstext </label>
        <input type="text" id="buch-tahmin" name="buchhaltung[buchungsText]" autocomplete="off"
               value="{{ buchhaltung.buchungsText|default }}" class="form-control">
        <div class="buchTahmin"></div>
    </div>
    <div class="form-group col-4">
        <label>Betrag </label>
        <input type="number" name="buchhaltung[betrag]" value="{{ buchhaltung.betrag|default }}" class="form-control">
    </div>
    <div class="form-group col-4">
        <label>Soll </label>
        <input type="number" name="buchhaltung[soll]" id="soll" value="{{ buchhaltung.soll|default }}" class="form-control">
    </div>
    <div class="form-group col-4">
        <label>Haben </label>
        <input type="number" name="buchhaltung[haben]" id="haben" value="{{ buchhaltung.haben|default }}" class="form-control">
    </div>
    <div class="align-items-center col-3 d-flex form-group justify-content-center">
        <label class="mr-2">PDF/PNG </label>
        <label for="buchaltungPdf" class="align-middle cursor-pointer mr-1">
            <i class="fa fa-2x fa-plus"></i>
            <input id="buchaltungPdf" type="file" name="pdf" value="{{ buchhaltung.pdf|default }}"
                   class="form-control d-none" accept="application/pdf">
        </label>
        <label for="buchaltungPng" class="align-middle cursor-pointer">
            <i class="fa fa-2x fa-photo"></i>
            <input id="buchaltungPng" type="file" name="png" value="{{ buchhaltung.bild|default }}"
                   class="form-control d-none" accept="image/png">
        </label>
    </div>
    <div class="col-6 my-4 text-center">
        {% if buchhaltung.bild|default != '' %}
            {% set dir = getbuchhaltungImageDir() %}
            {% set imageFullPath = dir|default~buchhaltung.bild|default %}
            <img style="max-width: 90%" src="{{ asset(imageFullPath) }}">
        {% else %}
            {% set dir = getBuchhaltungPdfDir() %}
            {% set pdfFullPath = dir|default~buchhaltung.pdf|default %}
            {% if buchhaltung.pdf|default %}
                <object data="{{ asset(pdfFullPath) }}" type="application/pdf" width="100%" height="100%"></object>
            {% endif %}

        {% endif %}
    </div>
</div>
<div class="d-flex justify-content-end">
    {{ button.button_submit() }}
</div>

{% block javascripts %}
    <script>
        (function ($) {
            $.fn.extend({
                donetyping: function (callback, timeout) {
                    timeout = timeout || 1e3; // 1 second default timeout
                    var timeoutReference,
                        doneTyping = function (el) {
                            if (!timeoutReference) return;
                            timeoutReference = null;
                            callback.call(el);
                        };
                    return this.each(function (i, el) {
                        var $el = $(el);
                        $el.is(':input') && $el.on('keyup keypress paste', function (e) {
                            if (e.type == 'keyup' && e.keyCode != 8) return;
                            if (timeoutReference) clearTimeout(timeoutReference);
                            timeoutReference = setTimeout(function () {
                                doneTyping(el);
                            }, timeout);
                        }).on('blur', function () {
                            doneTyping(el);
                        });
                    });
                }
            });
        })(jQuery);
        $('#buch-tahmin').donetyping(function () {
            let buch = $(this).val();
            $.ajax({
                type: 'POST',
                url: '{{ path('admin_ajax_buch_search') }}',
                data: {buch: buch},
                success: function (data) {
                    $(".buchTahmin").html(data);
                }
            });
        });
    </script>
{% endblock %}