{% extends "layout.html" %}
{% block content %}

<h1>Import záznamů</h1>

{% with form=form %}
<form id="importForm" action="{{ url_for('batch.import_data_post') }}" method="POST">
    {{ form.csrf_token }}
    <div class="form-group">
        <label for="donation_center_id">Odběrné místo:</label>
        {{ form.donation_center_id(class_="form-control") }}
    </div>
    {% if form.invalid_lines_errors.data %}
    <div class="form-group">
        <label for="valid_lines">Validní řádky (není třeba nijak měnit)</label>
        {{ form.valid_lines(rows=10, class_="form-control") }}
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-sm-8">
                <label for="invalid_lines">Řádky s chybami</label>
                {{ form.invalid_lines(rows=10, class_="form-control sync_scrolling") }}
            </div>
            <div class="col-sm-4">
                <label for="invalid_lines_errors">Informace o chybách</label>
                {{ form.invalid_lines_errors(rows=10, class_="form-control sync_scrolling") }}
            </div>
        </div>
    </div>
    {% else %}
    <div class="form-group">
        <label for="input_data">Pole pro vstupní data z odběrného místa</label>

        <input type="file" accept="text/plain" id="input_file" class="d-none">
        <label for="input_file" class="btn btn-sm btn-primary float-right">Použít data ze souboru</label>

        <div id="encodings" style="display: none;">
            Pokud se data nezobrazují správně, zkuste použít jinou znakovou sadu:
            <select id="encoding" class="custom-select" style="width: initial;">
                <option value="cp1250" selected>CP1250</option>
                <option value="utf-8">UTF-8</option>
                <option value="iso-8859-2">ISO-8859-2</option>
            </select>
        </div>

        {{ form.input_data(rows=30, class_="form-control") }}
    </div>
    {% endif %}
    <button class="btn btn-success" type="submit">Zpracovat</button>
</form>
{% endwith %}

<hr class="my-4">

<h2>Import z Třince</h2>
<form action="{{ url_for('batch.prepare_data_from_trinec') }}" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <div class="form-group">
        <label for="trinec_file">Soubor s daty z Třince (.xlsx):</label>
        <input type="file" name="trinec_file" id="trinec_file" accept=".xlsx" class="form-control-file" required>
    </div>
    <button class="btn btn-primary" type="submit">Připravit data z Třince</button>
</form>

{% endblock %}

{% block js %}
<script type="text/javascript">
    $(document).ready( function () {
        // Synchonizes schrolling of the two textareas with errors
        // https://stackoverflow.com/a/43653003
        $('.sync_scrolling').attr("data-scrolling", "false");
        $('.sync_scrolling').scroll(function(){
            if($(this).attr("data-scrolling") == "false"){
                $('.sync_scrolling').not(this).attr("data-scrolling", "true");
                $('.sync_scrolling').not(this).scrollTop($(this).scrollTop());
            }
            $(this).attr("data-scrolling", "false");
        });

        // File import
        const input_file = $('#input_file');
        const encoding = $('#encoding');
        input_file.change(function() {
            const file = input_file[0].files[0];
            const reader = new FileReader();
            reader.onload = function() {
                $('#input_data').val(reader.result);
                $('#encodings').css("display", "block");
            }

            reader.readAsText(file, encoding.val());
        });

        encoding.change(function() {
            input_file.change();
        });
    });
</script>
{% endblock %}