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

{% block title %}Mapping import — VIIZIA{% endblock %}

{% block body %}
{% from 'admin/organization/_form.html.twig' import field, select_field %}

<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
        <li><a href="{{ path('admin_imports_index') }}">Imports</a></li>
        <li class="is-active"><a href="#" aria-current="page">Mapping de {{ job.sourceFilename }}</a></li>
    </ul>
</nav>

<div class="level">
    <div class="level-left">
        <div>
            <p class="title is-4">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-table-options"></i></span>
                    <span>Configuration du mapping</span>
                </span>
            </p>
            <p class="subtitle is-6 has-text-grey">
                Étape 2 sur 2 — fichier <code>{{ job.sourceFilename }}</code>
                pour le compte <strong>{{ job.bankAccount.label }}</strong>
            </p>
        </div>
    </div>
</div>

{{ form_start(form, {'attr': {'novalidate': 'novalidate', 'data-controller': 'import-mapping'}}) }}

    {% if form.vars.errors|length > 0 %}
        <div class="notification is-danger is-light">
            <span class="icon"><i class="ti ti-alert-circle"></i></span>
            <strong>Le formulaire contient des erreurs :</strong>
            <ul class="mt-2">
                {% for error in form.vars.errors %}<li>{{ error.message }}</li>{% endfor %}
            </ul>
        </div>
    {% endif %}

    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="ti ti-settings"></i></span>
                <span>Format du fichier</span>
            </span>
        </h3>

        <div class="columns">
            <div class="column">{{ select_field(form.delimiter) }}</div>
            <div class="column">{{ select_field(form.encoding) }}</div>
            <div class="column">{{ field(form.header_rows) }}</div>
            <div class="column">{{ select_field(form.decimal_separator) }}</div>
        </div>

        <p class="is-size-7 has-text-grey mt-2">
            <span class="icon"><i class="ti ti-info-circle"></i></span>
            Auto-détecté : séparateur <code>{{ preview.delimiter == "\t" ? '\\t' : preview.delimiter }}</code>
            · encodage <code>{{ preview.encoding }}</code>
        </p>
    </div>

    <div class="box" data-import-mapping-target="dateBox">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="ti ti-calendar-event"></i></span>
                <span>Configuration des dates</span>
            </span>
        </h3>

        <div class="field">
            <label class="label">{{ form.date_mode.vars.label }}</label>
            <div class="control">
                {% for child in form.date_mode %}
                    <label class="radio mr-4">
                        {{ form_widget(child) }}
                        {{ child.vars.label }}
                    </label>
                {% endfor %}
            </div>
            <p class="help">{{ form.date_mode.vars.help }}</p>
        </div>

        <div data-import-mapping-target="dateFormatField">
            {{ select_field(form.date_format) }}
        </div>
    </div>

    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="ti ti-coin"></i></span>
                <span>Configuration des montants</span>
            </span>
        </h3>

        <div class="field">
            <label class="label">{{ form.amount_mode.vars.label }}</label>
            <div class="control">
                {% for child in form.amount_mode %}
                    <label class="radio mr-4">
                        {{ form_widget(child) }}
                        {{ child.vars.label }}
                    </label>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="ti ti-columns"></i></span>
                <span>Mapping des colonnes</span>
            </span>
        </h3>
        <p class="is-size-7 has-text-grey mb-3">
            Choisissez pour chaque colonne du fichier le rôle qu'elle joue dans
            VIIZIA. Les colonnes laissées sur <em>« — ignorer — »</em> ne seront
            pas importées.
            <span class="is-block mt-2">Les fichiers à nombreuses colonnes (ex. exports Qonto) sont affichés avec un <strong>défilement horizontal</strong> et des colonnes de largeur régulière.</span>
        </p>

        <div class="viz-mapping-table-wrap" role="region" aria-label="Tableau de mapping — défilement horizontal">
            <table class="table is-bordered is-narrow is-size-7 viz-mapping-table">
                <thead>
                    <tr class="viz-mapping-head-roles">
                        {% for label in column_labels %}
                            {% set field_name = 'col_' ~ loop.index0 %}
                            <th class="has-background-white-bis">
                                <div class="select is-small is-fullwidth">
                                    {{ form_widget(form[field_name]) }}
                                </div>
                            </th>
                        {% endfor %}
                    </tr>
                    <tr class="viz-mapping-head-labels">
                        {% for label in column_labels %}
                            <th class="has-text-grey">
                                <span class="tag is-light is-rounded mr-1">{{ loop.index }}</span>
                                <code>{{ label }}</code>
                            </th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in preview.rows %}
                        <tr>
                            {% for cell in row %}
                                <td>{{ cell }}</td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="notification is-light is-size-7 mt-3" data-import-mapping-target="summary">
            {# Rempli par le JS : récap des rôles assignés / manquants
               (la classe is-info/is-success/is-danger est ajoutée dynamiquement). #}
        </div>
    </div>

    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="ti ti-tags"></i></span>
                <span>Enrichissement (optionnel)</span>
            </span>
        </h3>
        <p class="is-size-7 has-text-grey mb-3">
            Lorsque vous mappez une colonne sur <em>Catégorie</em>, <em>Bien</em>
            ou <em>Plateforme</em>, ces options gèrent la création automatique
            des entités manquantes côté VIIZIA.
        </p>

        <div class="field">
            <label class="checkbox">
                {{ form_widget(form.auto_create_category) }}
                {{ form.auto_create_category.vars.label }}
            </label>
            <p class="help">{{ form.auto_create_category.vars.help }}</p>
        </div>

        <div class="field">
            <label class="checkbox">
                {{ form_widget(form.auto_create_property) }}
                {{ form.auto_create_property.vars.label }}
            </label>
            <p class="help">{{ form.auto_create_property.vars.help }}</p>
        </div>
    </div>

    <div class="field is-grouped">
        <div class="control">
            <button type="submit" class="button is-primary">
                <span class="icon"><i class="ti ti-upload"></i></span>
                <span>Lancer l'import</span>
            </button>
        </div>
        <div class="control">
            <a href="{{ path('admin_imports_index') }}" class="button is-light">Annuler</a>
        </div>
    </div>

{{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/import-mapping.js') }}" defer></script>
{% endblock %}