{% extends 'admin/layout.html.twig' %}
{% block title %}GED comptable{% endblock %}

{% block admin_body %}
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <h1 class="h2 mb-1">GED comptable</h1>
        <p class="text-secondary mb-0">Les pièces générées dans l'application sont classées automatiquement. Dépose uniquement les documents reçus de l'extérieur.</p>
    </div>
    {% if can_permission('ACCOUNTING_DOCUMENT',2) %}<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#docModal">+ Ajouter une pièce</button>{% endif %}
</div>

<div class="card accounting-tree-card">
    <div class="card-header bg-white d-flex flex-wrap gap-2 justify-content-between align-items-center">
        <div class="input-group accounting-tree-search">
            <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
            <input type="search" id="accountingTreeSearch" class="form-control" placeholder="Rechercher une pièce…" autocomplete="off">
        </div>
        <div class="btn-group btn-group-sm" role="group" aria-label="Actions sur l'arborescence">
            <button type="button" class="btn btn-outline-secondary" id="expandAccountingTree"><i class="bi bi-arrows-expand me-1"></i>Tout déplier</button>
            <button type="button" class="btn btn-outline-secondary" id="collapseAccountingTree"><i class="bi bi-arrows-collapse me-1"></i>Tout replier</button>
        </div>
    </div>

    <div class="card-body p-0">
        {% if documentTree is empty %}
            <div class="text-center text-secondary py-5">
                <i class="bi bi-folder2-open fs-2 d-block mb-2"></i>
                Aucune pièce comptable pour le moment.
            </div>
        {% else %}
            <div class="accounting-tree" id="accountingTree">
                {% for yearLabel, yearData in documentTree %}
                    <details class="tree-node tree-year" {% if loop.first %}open{% endif %}>
                        <summary>
                            <span class="tree-chevron"><i class="bi bi-chevron-right"></i></span>
                            <span class="tree-folder"><i class="bi bi-folder-fill"></i></span>
                            <strong>{{ yearLabel }}</strong>
                            <span class="badge text-bg-light ms-2">{{ yearData.count }} pièce{{ yearData.count > 1 ? 's' : '' }}</span>
                        </summary>
                        <div class="tree-children">
                            {% for periodKey, periodData in yearData.periods %}
                                <details class="tree-node tree-period" {% if loop.first and loop.parent.loop.first %}open{% endif %}>
                                    <summary>
                                        <span class="tree-chevron"><i class="bi bi-chevron-right"></i></span>
                                        <span class="tree-folder"><i class="bi bi-folder-fill"></i></span>
                                        <span>{{ periodData.label }}</span>
                                        <span class="badge text-bg-light ms-2">{{ periodData.count }}</span>
                                    </summary>
                                    <div class="tree-children">
                                        {% for type, items in periodData.types %}
                                            <details class="tree-node tree-category" {% if loop.first and loop.parent.loop.first and loop.parent.loop.parent.loop.first %}open{% endif %}>
                                                <summary>
                                                    <span class="tree-chevron"><i class="bi bi-chevron-right"></i></span>
                                                    <span class="tree-folder"><i class="bi bi-folder2"></i></span>
                                                    <span>{{ typeLabels[type] ?? type|replace({'_':' '})|title }}</span>
                                                    <span class="badge text-bg-light ms-2">{{ items|length }}</span>
                                                </summary>
                                                <div class="tree-files">
                                                    {% for l in items %}
                                                        {% set context = l.artisticProject ? l.artisticProject.name : (l.financialAccount ? l.financialAccount.name : 'Association') %}
                                                        <div class="accounting-file-item" data-search="{{ (l.document.name ~ ' ' ~ context ~ ' ' ~ l.documentDate|date('d/m/Y') ~ ' ' ~ (typeLabels[type] ?? type))|lower }}">
                                                            <div class="accounting-file-icon"><i class="bi {{ typeIcons[type] ?? 'bi-file-earmark' }}"></i></div>
                                                            <div class="accounting-file-main">
                                                                <div class="accounting-file-name">{{ l.document.name }}</div>
                                                                <div class="accounting-file-meta">
                                                                    {{ l.documentDate|date('d/m/Y') }}
                                                                    <span class="mx-1">·</span>
                                                                    {{ context }}
                                                                </div>
                                                            </div>
                                                            <a class="btn btn-sm btn-outline-dark" href="{{ path('document_view',{id:l.document.id}) }}" target="_blank" title="Voir le document">
                                                                <i class="bi bi-eye me-1"></i>Voir
                                                            </a>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </details>
                                        {% endfor %}
                                    </div>
                                </details>
                            {% endfor %}
                        </div>
                    </details>
                {% endfor %}
            </div>
            <div id="accountingTreeEmptySearch" class="text-center text-secondary py-5 d-none">
                <i class="bi bi-search fs-3 d-block mb-2"></i>
                Aucune pièce ne correspond à cette recherche.
            </div>
        {% endif %}
    </div>
</div>

{% if can_permission('ACCOUNTING_DOCUMENT',2) %}
<div class="modal fade" id="docModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" enctype="multipart/form-data">
            <div class="modal-header">
                <h5 class="modal-title">Ajouter une pièce</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="_token" value="{{ csrf_token('accounting-document') }}">
                <div class="mb-3">
                    <label class="form-label">Type</label>
                    <select name="document_type" class="form-select">
                        <option value="BANK_STATEMENT">Relevé bancaire / SumUp</option>
                        <option value="SUPPLIER_INVOICE">Facture fournisseur</option>
                        <option value="INSURANCE_SCHEDULE">Échéancier assurance</option>
                        <option value="CONTRACT">Contrat</option>
                        <option value="VAT">TVA / déclaration</option>
                        <option value="OTHER">Autre</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Date du document</label>
                    <input type="date" name="document_date" value="{{ 'now'|date('Y-m-d') }}" class="form-control">
                    <div class="form-text">L'exercice et le mois seront déterminés automatiquement.</div>
                </div>
                <div class="mb-3"><label class="form-label">Nom</label><input name="name" class="form-control"></div>
                <div class="mb-3">
                    <label class="form-label">Compte financier</label>
                    <select name="account_id" class="form-select"><option value="">—</option>{% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}</select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Projet</label>
                    <select name="project_id" class="form-select"><option value="">Association / commun</option>{% for p in projects %}<option value="{{ p.id }}">{{ p.name }}</option>{% endfor %}</select>
                </div>
                <div><label class="form-label">Fichier</label><input type="file" name="file" class="form-control" required></div>
            </div>
            <div class="modal-footer"><button type="submit" class="btn btn-dark">Ajouter</button></div>
        </form>
    </div>
</div>
{% endif %}
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.accounting-tree-card { overflow: hidden; }
.accounting-tree-search { max-width: 430px; }
.accounting-tree { padding: .6rem 0 1rem; }
.tree-node { margin: 0; }
.tree-node > summary {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: .45rem 1rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    gap: .35rem;
    border-radius: .35rem;
}
.tree-node > summary::-webkit-details-marker { display: none; }
.tree-node > summary:hover { background: rgba(0,0,0,.035); }
.tree-chevron { width: 1.15rem; color: #6c757d; transition: transform .15s ease; }
.tree-node[open] > summary > .tree-chevron { transform: rotate(90deg); }
.tree-folder { color: var(--wtl-project-primary, #b8914f); margin-right: .25rem; }
.tree-children { margin-left: 1.55rem; padding-left: .65rem; border-left: 1px solid #dee2e6; }
.tree-year > summary { font-size: 1.08rem; }
.tree-period > summary { font-weight: 600; }
.tree-category > summary { color: #343a40; }
.tree-files { margin-left: 1.65rem; border-left: 1px dashed #dee2e6; }
.accounting-file-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem .55rem 1rem;
    border-bottom: 1px solid #f0f1f2;
}
.accounting-file-item:last-child { border-bottom: 0; }
.accounting-file-item:hover { background: #fafafa; }
.accounting-file-icon { width: 1.5rem; text-align: center; color: #6c757d; }
.accounting-file-main { min-width: 0; flex: 1; }
.accounting-file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accounting-file-meta { font-size: .82rem; color: #6c757d; }
@media (max-width: 767.98px) {
    .accounting-tree-search { max-width: none; width: 100%; }
    .tree-node > summary { padding-left: .65rem; }
    .tree-children { margin-left: .8rem; padding-left: .35rem; }
    .tree-files { margin-left: .8rem; }
    .accounting-file-item { flex-wrap: wrap; }
    .accounting-file-item .btn { margin-left: 2.2rem; }
}
</style>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const tree = document.getElementById('accountingTree');
    if (!tree) return;

    document.getElementById('expandAccountingTree')?.addEventListener('click', () => {
        tree.querySelectorAll('details').forEach(node => node.open = true);
    });
    document.getElementById('collapseAccountingTree')?.addEventListener('click', () => {
        tree.querySelectorAll('details').forEach(node => node.open = false);
    });

    const search = document.getElementById('accountingTreeSearch');
    const empty = document.getElementById('accountingTreeEmptySearch');
    search?.addEventListener('input', () => {
        const value = search.value.trim().toLocaleLowerCase('fr');
        let visibleFiles = 0;

        tree.querySelectorAll('.accounting-file-item').forEach(file => {
            const matches = !value || (file.dataset.search || '').includes(value);
            file.classList.toggle('d-none', !matches);
            if (matches) {
                visibleFiles++;
                if (value) {
                    let parent = file.parentElement;
                    while (parent && parent !== tree) {
                        if (parent.tagName === 'DETAILS') parent.open = true;
                        parent = parent.parentElement;
                    }
                }
            }
        });

        tree.querySelectorAll('.tree-category').forEach(category => {
            const hasVisible = !!category.querySelector('.accounting-file-item:not(.d-none)');
            category.classList.toggle('d-none', !hasVisible);
        });
        tree.querySelectorAll('.tree-period').forEach(period => {
            const hasVisible = !!period.querySelector('.tree-category:not(.d-none)');
            period.classList.toggle('d-none', !hasVisible);
        });
        tree.querySelectorAll('.tree-year').forEach(year => {
            const hasVisible = !!year.querySelector('.tree-period:not(.d-none)');
            year.classList.toggle('d-none', !hasVisible);
        });

        empty?.classList.toggle('d-none', visibleFiles !== 0);
    });
});
</script>
{% endblock %}