{% extends "./layout/default" %}
{% block content %}
    <div class="container">
        <div class="row mt-3">
            <div class="col-lg-10 offset-lg-1">
                <h1>Firefly III Data Import Tool, v{{ version }}</h1>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-header">
                        Firefly III Universal Data Import Tool, v{{ version }}
                    </div>
                    <div class="card-body">
                        <p class="card-text">
                            Welcome! This tool will help you import data into Firefly III.
                            You can find instructions in the <a href="https://docs.firefly-iii.org/" target="_blank">documentation</a>. Any links
                            you see to the documentation will open in a <em>new</em> window or tab.
                        </p>
                        <p>
                            To import data, you need to authenticate with Firefly III, and optionally with one of the data sources this importer supports.
                        </p>
                        {% if pat %}
                            <p id="firefly_expl">
                                You're using a Personal Access Token to <span class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                        {% if clientIdWithURL %}
                            <p id="firefly_expl">
                                You're using a fixed Client ID and a fixed Firefly III URL to <span class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                        {% if URLonly %}
                            <p id="firefly_expl">
                                You're using a Client ID and a fixed Firefly III URL to <span class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                        {% if flexible %}
                            <p id="firefly_expl">
                                You're using a self-submitted Client ID and Firefly III URL to <span class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:1em;display: none;" id="error_explain">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-header">
                        Configuration / connection error :(
                    </div>
                    <div class="card-body">
                        <p>The importer could not connect to Firefly III.
                            Please remedy the error below first, and check out the <a
                                href="https://docs.firefly-iii.org/references/faq/data-importer/general/" target="_blank">
                                documentation</a> if necessary.</p>
                        <p id="error_txt" class="text-danger"></p>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('index.post') }}/" method="post">
            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
            <div class="row" style="margin-top:1em;" id="importers">
                <div class="col-lg-10 offset-lg-1">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    Import a file
                                </div>
                                <div class="card-body">
                                    <button class="btn btn-info disabled" value="file" name="flow" disabled="disabled"
                                            id="file_button"><span class="fas fa-cog fa-spin"></span></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    Import from GoCardless
                                </div>
                                <div class="card-body">
                                    <p id="nordigen_result" style="display: none;"></p>
                                    <button class="btn btn-info disabled" value="nordigen" name="flow" disabled="disabled" id="nordigen_button"><span
                                            class="fas fa-cog fa-spin"></span></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    Import from Spectre
                                </div>
                                <div class="card-body">
                                    <p id="spectre_result" style="display: none;"></p>
                                    <button class="btn btn-info disabled" value="spectre" name="flow" disabled="disabled" id="spectre_button"><span
                                            class="fas fa-cog fa-spin"></span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="row" style="margin-top:1em;" id="importers">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-header">
                        Extra information
                    </div>
                    <div class="card-body">
                        <p>
                            If you change your settings, you may need to press <strong>start over</strong> for the settings to be recognized.
                            If you are in doubt if the button works: your session identifier is "{{ identifier }}" and should change every time you
                            press the button{% if not isDocker %},{% else %} or restart the container,{% endif %} but it has to stay the same when you simply refresh the page.
                        </p>
                        <p>
                            <a class="btn btn-danger btn-sm" href="{{ route('flush') }}" data-bs-toggle="tooltip" data-bs-placement="top"
                               title="This button resets your progress">Start over</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    <script type="text/javascript">
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })


        var url = '{{ route('token.validate') }}';
        var tokenPageUrl = '{{ route('token.index') }}';
        $.getJSON(url).done(function (data) {
            if ('OK' === data.result) {
                $('#file_button').removeClass('disabled').text('Import file').removeAttr('disabled');
            } else {
                $('#importers').hide();
                $('#error_explain').show();
                $('#firefly_expl').hide();
                $('#error_txt').text(data.message);
            }
        }).fail(function () {
            $('#importers').hide();
            $('#error_explain').show();
            $('#firefly_expl').hide();
            $('#error_txt').show().text(data.message);
            // window.location = tokenPageUrl;
        });

        // validate Spectre information:
        url = '{{ route('validate.spectre') }}';
        $.getJSON(url).done(function (data) {
            if ('OK' === data.result) {
                $('#spectre_result').hide();
                $('#spectre_button').removeClass('disabled').text('Import from Spectre').removeAttr('disabled');
            }
            if ('NODATA' === data.result) {
                $('#spectre_button').removeClass('disabled').text('Import from Spectre').removeAttr('disabled');
            }
            if ('NOK' === data.result) {
                $('#spectre_result').show().text('The Spectre / Salt Edge API is configured incorrectly and cannot be used to import data.');
                $('#spectre_button').hide();
            }
        }).fail(function () {
            $('#spectre_result').show().text('The Spectre / Salt Edge API is configured incorrectly and cannot be used to import data.');
            $('#spectre_button').hide();
        });

        // validate GoCardless information
        url = '{{ route('validate.nordigen') }}';
        $.getJSON(url).done(function (data) {
            if ('OK' === data.result) {
                $('#nordigen_result').hide();
                $('#nordigen_button').removeClass('disabled').text('Import from GoCardless').removeAttr('disabled');
            }
            if ('NODATA' === data.result) {
                $('#nordigen_button').removeClass('disabled').text('Import from GoCardless').removeAttr('disabled');
            }
        }).fail(function () {
            $('#nordigen_result').show().text('The GoCardless API is configured incorrectly and cannot be used to import data.');
            $('#nordigen_button').hide();
        });


    </script>
{% endblock %}