{% extends "@ContaoCore/Backend/be_page.html.twig" %}

{% block headline %}
    Datenverwaltung
{% endblock %}

{% block error %}
{% endblock %}

{% block main %}
    <script>
        jQuery.noConflict();
    </script>

    <div class="tl_listing_container list_view">
        <div id="xls-message"></div>
        <form id="xls-import" method="post" action="{{ path('import_xls') }}" enctype="multipart/form-data">
            <input type="hidden" name="REQUEST_TOKEN" value="{{ token }}"/>
            <table class="tl_listing">
                <tbody>
                <tr>
                    <td colspan="4" class="tl_folder_tlist">Excel Import</td>
                </tr>
                <tr>
                    <td class="tl_file_list">
                        <label for="result-xls">Excel-Datei:</label>
                    </td>
                    <td class="tl_file_list">
                        <input id="xls" type="file" name="xls" accept=".xls,.xlsx,.XLS,.XLSX" class="tl_submit" required>
                    </td>
                    <td class="tl_file_list" colspan="2">
                        <input type="submit" value="Datei importieren" class="tl_submit">
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>

    <script src="{{ asset('files/e-formel/assets/backend/js/backend-data-menu.js') }}" type="text/javascript" charset="utf-8"></script>
    <script>
        jQuery("#xls-import").on("submit", function(e) {
            e.preventDefault();
            let form = jQuery(this)[0]; // You need to use standard javascript object here
            let formData = new FormData(form);
            jQuery("#xls-message").html("");
            jQuery.ajax({
                url: "{{ path('import_xls') }}",
                method: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    jQuery("#xls-message").html("Excel-Datei wurde erfolgreich importiert!");
                },
                error: function(requestObject, error, errorThrown) {
                    jQuery("#xls-message").html('Fehler:' + requestObject.responseText);
                },
                dataType: "html"
            });
        });

    </script>

{% endblock %}