{% extends 'base.html.twig' %}

{% block title %}
    {{ 'lang.import'|trans }}
{% endblock %}

{% block body %}
    {% if app.user.isMainAccount or is_granted('ROLE_ADMIN') %}
        {% include '/general/components/navigation_menu_secondary.html.twig' with { 'activeTab': 'import' } %}
    {% endif %}

    <div class="table-container"
            {% if not app.user.isMainAccount %}
                style="height: 100%"
            {% endif %}
    >
        <div class="table-section container">
            <div class="add-button-wrap">
                <button class="add-button border-0" id="open-import-modal-btn" type="button">
                    <img src="{{ asset('/images/add.svg') }}"/>
                    {{ 'lang.import'| trans }}
                </button>
            </div>
            <div class="row" style="height: 95%">
                <div class="col">
                    <div class="table-responsive overflow-visible">
                        <table class="table table-striped table-bordered" id="importTable">
                            <thead>
                            <tr>
                                <th class="rows-mobile">{{ 'lang.createdBy'|trans }}</th>
                                <th class="rows-mobile">{{ 'lang.amountContacts'|trans }}</th>
                                <th class="rows-mobile">{{ 'lang.file'|trans }}</th>
                                <th class="rows-mobile">{{ 'lang.createdDatetime'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for import in imports %}
                                <tr>
                                    <td class="rows-mobile">{{ import.importBy ? import.importBy|getUserById : '' }}</td>
                                    <td class="rows-mobile">{{ import.amountData ? import.amountData : 0 }}</td>
                                    <td class="rows-mobile-show">{{ import.fileName }}</td>
                                    <td class="rows-mobile"
                                        data-sort="{{ import.importDatetime ? import.importDatetime|date('Y-m-d H:i') : '' }}">{{ import.importDatetime ? import.importDatetime|date('d.m.Y H:i') : '' }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="import-modal" class="modal-overlay d-none">
        <div class="modal-content-form">
            <div class="display-flex-end">
                <button type="button" class="modal-close-btn button-no-style f-24" aria-label="Close">×</button>
            </div>
            <div class="text-center f-22 mb-3">{{ 'lang.import' | trans }}</div>

            <div class="text-center mb-4">
                <p>Select import type</p>
                <div class="d-flex justify-content-center gap-3 mt-3">
                    <button id="standard-import-btn" class="button button-blue">
                        {{ 'lang.standardImport' | trans }}
                    </button>
                    <button id="cumas-import-btn" class="button button-outline">
                        {{ 'lang.cumasCrmImport' | trans }}
                    </button>
                </div>
            </div>

            <div id="standard-import-form">
                <form action="{{ path('app_import_standard_preview') }}" method="POST" enctype="multipart/form-data">
                    <label for="standard_import_file" class="mb-3 upload-file-group">
                        <img src="{{ asset('/images/add.svg') }}"/>
                        <div>{{ 'lang.selectCsvFile' | trans }}</div>
                        <div class="selected-file" id="standard_selected_file"></div>
                        <input type="file" name="import_file" id="standard_import_file" class="form-control" required
                               accept=".csv">
                        <small class="text-muted">
                            {{ 'lang.fileShouldContain' | trans }}
                        </small>
                    </label>
                    <div class="mt-3 display-flex-between ">
                        <a class="button button-orange"
                                                           href="{{ path('app_download_import_example') }}"
                        >
                            <img src="{{ asset('/images/download.svg') }}"/>
                            <span>{{ 'lang.downloadImportExample' | trans }}</span>
                        </a>
                        <button type="submit" class="button button-blue" id="standard-submit" disabled>
                            {{ 'lang.preview' | trans }}
                        </button>
                    </div>

                    <input type="hidden" name="_token" value="{{ csrf_token('standard_import') }}">
                </form>
            </div>

            <div id="cumas-import-form" class="d-none">
                <form action="{{ path('app_import_cumas_preview') }}" method="POST" enctype="multipart/form-data">
                    <label for="cumas_import_file" class="mb-3 upload-file-group">
                        <img src="{{ asset('/images/add.svg') }}"/>
                        <div>{{ 'lang.selectCsvFile' | trans }}</div>
                        <div class="selected-file" id="cumas-selected_file"></div>
                        <input type="file" name="import_file" id="cumas_import_file" class="form-control" required
                               accept=".csv">
                        <small class="text-muted">{{ 'lang.existingCumasImportLogic' | trans }}</small>
                    </label>
                    <div class="display-flex-center">
                        <button id="cumas-submit" type="submit" class="button button-blue mt-3" disabled>{{ 'lang.preview' | trans }}</button>
                    </div>
                    <input type="hidden" name="_token" value="{{ csrf_token('cumas_import') }}">
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('import') }}

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const cumasFileInput = document.getElementById('cumas_import_file');
            const cumasfileNameDisplay = document.getElementById('cumas-selected_file');
            const cumasSubmitBtn = document.getElementById('cumas-submit');

            const fileInput = document.getElementById('standard_import_file');
            const fileNameDisplay = document.getElementById('standard_selected_file');
            const submitBtn = document.getElementById('standard-submit');

            cumasFileInput.addEventListener('change', function () {
                const file = cumasFileInput.files[0];

                if (file) {
                    cumasfileNameDisplay.textContent = file.name;
                } else {
                    cumasfileNameDisplay.textContent = 'No file chosen';
                }

                if (cumasFileInput.files.length > 0) {
                    cumasSubmitBtn.disabled = false;
                } else {
                    cumasSubmitBtn.disabled = true;
                }

            });


            fileInput.addEventListener('change', function () {
                const file = fileInput.files[0];

                if (file) {
                    fileNameDisplay.textContent = file.name;
                } else {
                    fileNameDisplay.textContent = 'No file chosen';
                }

                if (fileInput.files.length > 0) {
                    submitBtn.disabled = false;
                } else {
                    submitBtn.disabled = true;
                }


            });

        });
    </script>
{% endblock %}