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

{% block title %}Import PDF — {{ job.sourceFilename }} — VIIZIA{% endblock %}

{% block body %}
{% set pdfReviewRowCount = rows|length %}
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
        <li><a href="{{ path('admin_imports_index') }}">Imports</a></li>
        <li><a href="{{ path('admin_imports_show', {id: job.id}) }}">{{ job.sourceFilename }}</a></li>
        <li class="is-active"><a href="#" aria-current="page">Ligne par ligne</a></li>
    </ul>
</nav>

{% set pdf_action_buttons %}
<div class="buttons">
    {% if job.status.value == 'partial' and pdfReviewRowCount > 0 %}
    <form method="post"
          id="viz-pdf-refresh-keywords-form"
          action="{{ path('admin_imports_pdf_review_refresh_keyword_suggestions', {id: job.id}) }}"
          style="display: inline-block;"
          title="Recalculer les suggestions (listings, mots-clés mémo…) pour toutes les lignes du tableau">
        <input type="hidden" name="_token" value="{{ csrf_token('import_pdf_' ~ job.id) }}">
        <button type="submit" class="button is-info is-light is-small">
            <span class="icon is-small"><i class="ti ti-search"></i></span>
            <span>Détecter les mots-clés</span>
        </button>
    </form>
    {% endif %}
    {% if pending_pdf_row_count > 0 %}
    <form method="post"
          id="viz-pdf-import-all-form"
          action="{{ path('admin_imports_pdf_review_import_all', {id: job.id}) }}"
          style="display: inline-block;"
          onsubmit="return confirm('Importer les {{ pending_pdf_row_count }} ligne(s) restante(s) avec les catégories, biens et plateformes affichées dans les menus déroulants ?');">
        <input type="hidden" name="_token" value="{{ csrf_token('import_pdf_' ~ job.id) }}">
        <button type="submit" class="button is-primary is-small">
            <span class="icon is-small"><i class="ti ti-database-import"></i></span>
            <span>Importer toutes les lignes ({{ pending_pdf_row_count }})</span>
        </button>
    </form>
    {% endif %}
    <a href="{{ path('admin_imports_show', {id: job.id}) }}" class="button is-light is-small">Rapport</a>
    <div class="buttons has-addons mb-0">
        {% if prevPendingJob %}
        <a href="{{ path('admin_imports_pdf_review', {id: prevPendingJob.id}) }}"
           class="button is-light is-small"
           title="{{ prevPendingJob.sourceFilename }} — {{ prevPendingJob.status.value }}">
            <span class="icon is-small"><i class="ti ti-chevron-left"></i></span>
        </a>
        {% else %}
        <button class="button is-light is-small" disabled title="Pas de fichier précédent">
            <span class="icon is-small"><i class="ti ti-chevron-left"></i></span>
        </button>
        {% endif %}
        <a href="{{ path('admin_imports_index') }}" class="button is-light is-small">Imports</a>
        {% if nextPendingJob %}
        <a href="{{ path('admin_imports_pdf_review', {id: nextPendingJob.id}) }}"
           class="button is-light is-small"
           title="{{ nextPendingJob.sourceFilename }} — {{ nextPendingJob.status.value }}">
            <span class="icon is-small"><i class="ti ti-chevron-right"></i></span>
        </a>
        {% else %}
        <button class="button is-light is-small" disabled title="Pas de fichier suivant">
            <span class="icon is-small"><i class="ti ti-chevron-right"></i></span>
        </button>
        {% endif %}
    </div>
</div>
{% endset %}

<div class="level">
    <div class="level-left">
        <div>
            <p class="title is-4">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-file-type-pdf"></i></span>
                    <span>{{ job.sourceFilename }}</span>
                </span>
            </p>
            <p class="subtitle is-6 has-text-grey">
                {{ job.organization.name }} · {{ job.bankAccount.label }}
                · <span class="tag is-{{ job.status.color }} is-light">{{ job.status.label }}</span>
                · {{ job.transactionsImported }} importée(s),
                {{ job.transactionsSkipped }} ignorée(s) / {{ job.transactionsTotal }} détectée(s)
            </p>
        </div>
    </div>
    <div class="level-right">
        {{ pdf_action_buttons }}
    </div>
</div>

<div class="box p-0" style="overflow-x: auto;">
    <table id="viz-pdf-review-table"
           class="table is-fullwidth is-striped is-hoverable mb-0 is-size-7"
           data-quick-keyword-url="{{ path('admin_imports_quick_import_keyword', { id: job.id }) }}"
           data-import-pdf-csrf="{{ csrf_token('import_pdf_' ~ job.id) }}"
           data-keyword-phrase-min="2"
           data-keyword-phrase-max="400">
        <thead>
            <tr>
                <th>Date</th>
                <th>Libellé</th>
                <th class="has-text-right">Montant</th>
                <th>Sens</th>
                <th>Enrichissement &amp; actions</th>
            </tr>
        </thead>
        <tbody>
        {% for row in rows %}
            <tr {% if row.state == 'pending' %}class="viz-pdf-review-row-pending" {% endif %}data-pdf-row-idx="{{ row.idx }}">
                <td class="is-nowrap">{{ row.bookingDate|date('d/m/Y') }}</td>
                <td style="max-width: 320px;">{{ row.label|viz_label }}</td>
                <td class="has-text-right is-nowrap">
                    {{ (row.amountCents / 100)|number_format(2, ',', ' ') }}&nbsp;€
                </td>
                <td>
                    {% if row.direction == 'in' %}
                        <span class="tag is-success is-light">Entrée</span>
                    {% else %}
                        <span class="tag is-danger is-light">Sortie</span>
                    {% endif %}
                </td>
                <td>
                {% if row.state == 'pending' %}
                    {% set sugCatId = row.enrichmentSuggestCategoryId|default(null) %}
                    {% set blockedCatId = row.enrichmentMemoBlockedCategoryId|default(null) %}
                    {% set blockedKind = row.enrichmentMemoBlockedCategoryKind|default('') %}
                    {% set spid = row.listingSuggestPropertyId|default(null) %}
                    {% set sfpfid = row.listingSuggestPlatformId|default(null) %}
                    {# Vert uniquement si la catégorie suggérée est réellement présente dans la liste rendue (sinon le select aurait l'air vide avec une bordure verte) #}
                    {% set suggestedCategoryId = false %}
                    {% if sugCatId is not null and (sugCatId ~ '') != '' %}
                        {% for c in categories %}
                            {% if not suggestedCategoryId and (c.id ~ '') == (sugCatId ~ '') %}
                                {% set suggestedCategoryId = true %}
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    {% set suggestedPropertyId = spid is not null and (spid ~ '') != '' %}
                    {% set suggestedPlatformId = sfpfid is not null and (sfpfid ~ '') != '' %}
                    <form method="post" action="{{ path('admin_imports_pdf_review_line', {id: job.id, idx: row.idx}) }}" class="field is-grouped is-grouped-multiline mb-0">
                        <input type="hidden" name="_token" value="{{ csrf_token('import_pdf_' ~ job.id) }}">
                        <div class="control">
                            <div class="field has-addons mb-0">
                                <div class="control is-expanded">
                                    <div class="select is-small is-fullwidth{% if suggestedCategoryId %} viz-select-suggested{% endif %}"{%- if row.direction == 'out' %} data-pdf-cat-expense-tone=""{% endif %}>
                                        <select id="pdf-review-cat-{{ row.idx }}"
                                                name="category_id"
                                                aria-label="Catégorie"
                                                data-pdf-row-label="{{ row.label|e('html_attr') }}"
                                                data-pdf-suggested-keyword="{{ row.label|viz_txn_list_label|e('html_attr') }}">
                                            <option value="">— Catégorie —</option>
                                            {% if categories is not empty %}
                                                <optgroup label="Dépenses" data-kind="expense">
                                                    {% for c in categories %}
                                                        {% if c.kind.value == 'expense' %}
                                                            <option value="{{ c.id }}" {{ sugCatId is not null and (c.id ~ '') == (sugCatId ~ '') ? 'selected' }}>{{ c.name|viz_label }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </optgroup>
                                                <optgroup label="Recettes" data-kind="income">
                                                    {% for c in categories %}
                                                        {% if c.kind.value == 'income' %}
                                                            <option value="{{ c.id }}" {{ sugCatId is not null and (c.id ~ '') == (sugCatId ~ '') ? 'selected' }}>{{ c.name|viz_label }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </optgroup>
                                                <optgroup label="Virements internes" data-kind="transfer">
                                                    {% for c in categories %}
                                                        {% if c.kind.value == 'transfer' %}
                                                            <option value="{{ c.id }}" {{ sugCatId is not null and (c.id ~ '') == (sugCatId ~ '') ? 'selected' }}>{{ c.name|viz_label }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </optgroup>
                                            {% endif %}
                                        </select>
                                    </div>
                                </div>
                                <div class="control">
                                    <button type="button"
                                            class="button is-small viz-pdf-quick-cat-trigger"
                                            data-job-id="{{ job.id }}"
                                            data-row-direction="{{ row.direction }}"
                                            data-select-id="pdf-review-cat-{{ row.idx }}"
                                            data-row-label="{{ row.label|e('html_attr') }}"
                                            data-quick-cat-url="{{ path('admin_imports_quick_category', {id: job.id}) }}"
                                            data-csrf="{{ csrf_token('import_pdf_' ~ job.id) }}"
                                            title="Nouvelle catégorie"
                                            aria-label="Nouvelle catégorie">
                                        <span class="icon is-small"><i class="ti ti-plus"></i></span>
                                    </button>
                                </div>
                            </div>
                            {% if blockedCatId is not null and (blockedCatId ~ '') != '' %}
                                {% for c in categories %}
                                    {% if (c.id ~ '') == (blockedCatId ~ '') %}
                                        <p class="help is-warning mb-0 mt-1" style="max-width: 28rem;">
                                            Un mot-clé pointe vers «&nbsp;{{ c.name|viz_label }}&nbsp;» ({{ blockedKind == 'income' ? 'recette' : (blockedKind == 'expense' ? 'dépense' : 'virement interne') }}), mais le sens affiché est <strong>{{ row.direction == 'in' ? 'entrée' : 'sortie' }}</strong> alors que ce type de catégorie ne s’applique pas ainsi. Contrôlez débit/crédit sur le relevé&nbsp;; si besoin classez à la main ou corrigez la transaction après import.
                                        </p>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>
                        <div class="control">
                            <div class="select is-small{% if suggestedPropertyId %} viz-select-suggested{% endif %}">
                                <select name="property_id" aria-label="Bien">
                                    <option value="">— Bien —</option>
                                    {% for p in properties %}
                                        <option value="{{ p.id }}" {{ spid is not null and (p.id ~ '') == (spid ~ '') ? 'selected' }}>{{ p.displayName }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="control">
                            <div class="select is-small{% if suggestedPlatformId %} viz-select-suggested{% endif %}">
                                <select name="rental_platform_id" aria-label="Plateforme">
                                    <option value="">— Plateforme —</option>
                                    {% for pf in platforms %}
                                        <option value="{{ pf.id }}" {{ sfpfid is not null and (pf.id ~ '') == (sfpfid ~ '') ? 'selected' }}>{{ pf.name|viz_label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="control">
                            <button type="submit" name="intent" value="import" class="button is-primary is-small">Importer</button>
                        </div>
                        <div class="control">
                            <button type="submit" name="intent" value="skip" class="button is-light is-small">Ignorer</button>
                        </div>
                    </form>
                {% elseif row.state == 'imported' and row.transactionId %}
                    <span class="tag is-success">Enregistrée</span>
                    <a href="{{ path('admin_transactions_edit', {id: row.transactionId}) }}" class="button is-small is-info is-light ml-2">
                        Ouvrir la transaction
                    </a>
                    {% set rsug = row.enrichmentSuggestCategoryId|default(null) %}
                    {% set rblockedCat = row.enrichmentMemoBlockedCategoryId|default(null) %}
                    {% set rblockedKind = row.enrichmentMemoBlockedCategoryKind|default('') %}
                    {% set rspid = row.listingSuggestPropertyId|default(null) %}
                    {% set rspfid = row.listingSuggestPlatformId|default(null) %}
                    {% if rsug or rspid or rspfid or (rblockedCat is not null and (rblockedCat ~ '') != '') %}
                    <div class="mt-2 is-flex is-flex-wrap-wrap" style="gap: 0.35rem;">
                        {% if rblockedCat is not null and (rblockedCat ~ '') != '' %}
                            {% for c in categories %}
                                {% if (c.id ~ '') == (rblockedCat ~ '') %}
                                    <span class="tag is-danger is-light" title="Le mot-clé correspond à cette catégorie, mais le sens de la ligne (entrée/sortie) ne permet pas de l’appliquer automatiquement.">Mot-clé bloqué (sens) : {{ c.name|viz_label }} ({{ rblockedKind == 'income' ? 'recette' : (rblockedKind == 'expense' ? 'dépense' : 'virement') }})</span>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                        {% if rsug is not null and (rsug ~ '') != '' %}
                            {% for c in categories %}
                                {% if (c.id ~ '') == (rsug ~ '') %}
                                    <span class="tag is-warning is-light" title="D’après les règles mémo / listings après « Détecter les mots-clés »">Suggéré cat. : {{ c.name|viz_label }}</span>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                        {% if rspid is not null and (rspid ~ '') != '' %}
                            {% for p in properties %}
                                {% if (p.id ~ '') == (rspid ~ '') %}
                                    <span class="tag is-warning is-light">Suggéré bien : {{ p.displayName }}</span>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                        {% if rspfid is not null and (rspfid ~ '') != '' %}
                            {% for pf in platforms %}
                                {% if (pf.id ~ '') == (rspfid ~ '') %}
                                    <span class="tag is-warning is-light">Suggéré plateforme : {{ pf.name|viz_label }}</span>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                    <p class="help mb-0 mt-2">Pour mettre à jour en base&nbsp;: modifiez la transaction directement.</p>
                    {% endif %}
                {% elseif row.state == 'skipped' %}
                    <form method="post"
                          action="{{ path('admin_imports_pdf_review_line', {id: job.id, idx: row.idx}) }}"
                          style="display:inline-flex; align-items:center;">
                        <input type="hidden" name="_token" value="{{ csrf_token('import_pdf_' ~ job.id) }}">
                        <div class="tags has-addons mb-0">
                            <span class="tag is-light">Ignorée</span>
                            <button type="submit"
                                    name="intent"
                                    value="unskip"
                                    class="tag is-delete"
                                    title="Remettre en attente"></button>
                        </div>
                    </form>
                {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div class="modal" id="viz-pdf-quick-category-modal">
    <div class="modal-background viz-pdf-quick-cat-close" tabindex="-1"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <div>
                <p class="modal-card-title mb-0" id="viz-pdf-quick-category-title">Catégorie</p>
                <p id="viz-pdf-quick-category-context" class="is-size-7 has-text-grey mt-1 mb-0"></p>
            </div>
            <button type="button" class="delete viz-pdf-quick-cat-close" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="field">
                <label class="label" for="viz-pdf-quick-category-name">Nom</label>
                <input id="viz-pdf-quick-category-name" type="text" class="input" maxlength="100" autocomplete="off" placeholder="">
            </div>
            <div id="viz-pdf-quick-category-error" class="notification is-danger is-light is-hidden py-2 px-3 is-size-7"></div>
        </section>
        <footer class="modal-card-foot">
            <button type="button" id="viz-pdf-quick-category-confirm" class="button is-primary">Créer</button>
            <button type="button" class="button viz-pdf-quick-cat-close">Annuler</button>
        </footer>
    </div>
</div>

<div class="modal" id="viz-pdf-import-keyword-modal" aria-labelledby="viz-pdf-import-keyword-title">
    <div class="modal-background viz-pdf-import-keyword-close" tabindex="-1"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <div>
                <p class="modal-card-title mb-0" id="viz-pdf-import-keyword-title">Mot-clé d’import</p>
                <p id="viz-pdf-import-keyword-lead" class="is-size-7 has-text-grey mt-1 mb-0"></p>
            </div>
            <button type="button" class="delete viz-pdf-import-keyword-close" aria-label="Fermer"></button>
        </header>
        <section class="modal-card-body">
            <p class="is-size-7 has-text-weight-semibold mb-1">Libellé de la ligne (référence)</p>
            <p id="viz-pdf-import-keyword-row-label" class="is-size-7 box has-background-light py-2 px-3 mb-4" style="word-break: break-word; max-height: 8rem; overflow-y: auto;"></p>
            <div class="field mb-0">
                <label class="label" for="viz-pdf-import-keyword-phrase">Mot-clé ou extrait à mémoriser</label>
                <input id="viz-pdf-import-keyword-phrase" type="text" class="input" maxlength="400" autocomplete="off" placeholder="Ex. VIR SEPA, ADOBE, loyer…">
                <p id="viz-pdf-import-keyword-phrase-help" class="help mb-0"></p>
            </div>
            <div id="viz-pdf-import-keyword-error" class="notification is-danger is-light is-hidden py-2 px-3 is-size-7 mt-3 mb-0"></div>
        </section>
        <footer class="modal-card-foot is-justify-content-flex-start" style="flex-wrap: wrap; gap: 0.5rem;">
            <button type="button" id="viz-pdf-import-keyword-save" class="button is-primary">Enregistrer le mot-clé</button>
            <button type="button" class="button is-light viz-pdf-import-keyword-close">Non, pas maintenant</button>
        </footer>
    </div>
</div>

<div class="level mt-4">
    <div class="level-left"></div>
    <div class="level-right">
        {{ pdf_action_buttons }}
    </div>
</div>
{% endblock %}

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