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

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

{% block error %}
{% endblock %}

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

    <style>
        #xls-message {font-weight: bold;padding: 10px 0;}
        .tl_submit {height: 40px;}
    </style>
    <div class="tl_listing_container list_view">
        <div><p id="xls-message"></p></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">
                        <p><label for="result-xls">Excel-Datei:</label></p>
                    </td>
                    <td class="tl_file_list">
                        <p><input id="xls" type="file" name="xls" accept=".xls,.xlsx,.XLS,.XLSX" class="tl_submit" required></p>
                    </td>
                    <td class="tl_file_list" colspan="2">
                        <p><input type="submit" value="Datei importieren" class="tl_submit"></p>
                    </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();
            var confirmAction = confirm("Möchten Sie wirklich fortfahren?\nAlle Brands-Daten werden direkt überschrieben!");
            if (confirmAction === true) {
                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 %}