{% extends '@App/app.html.twig' %}

{% block title %}{{ title }}{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
    {% set is_quote = scope == 'quote' %}
    {% set index_route = is_quote ? 'billing_quote_index' : 'billing_invoice_index' %}
    {% set visible_total = documents|length %}
    {% set draft_count = documents|filter(document => document.status == 'draft')|length %}
    {% set sent_count = documents|filter(document => document.status in ['sent', 'viewed'])|length %}
    {% set validated_count = documents|filter(document => document.status in ['validated', 'issued', 'sent', 'partially_paid', 'paid', 'overdue', 'dispute'])|length %}
    {% set completed_count = documents|filter(document => document.status == (is_quote ? 'accepted' : 'paid'))|length %}
    {% set overdue_count = documents|filter(document => document.status == 'overdue')|length %}
    {% set page_size = 20 %}

    <section class="clientsphere-page billing-index"
             data-controller="commercial-client-table"
             data-commercial-client-table-page-size-value="{{ page_size }}"
             data-commercial-client-table-total-label-value="document{{ visible_total > 1 ? 's' : '' }}">
        <div class="clientsphere-heading">
            <div class="clientsphere-title">
                <div>
                    <h1 class="capsule-title">{{ title }}</h1>
                    <p>{{ is_quote ? 'Créez, envoyez et suivez vos propositions commerciales.' : 'Pilotez vos factures, avoirs et règlements clients.' }}</p>
                </div>
            </div>

            <div class="clientsphere-heading-actions">
                {% if not is_quote %}
                    {% if can_view_payments and is_granted('BILLING_EXPORT_PAYMENTS', company) %}
                    <a class="capsule-button capsule-button--secondary" href="{{ path('billing_invoice_payment_export', payment_export_query) }}" data-turbo="false">
                        <i class="ti ti-file-spreadsheet"></i><span>Exporter factures &amp; paiements</span>
                    </a>
                    {% endif %}
                    {% if can_view_amounts %}<a class="capsule-button capsule-button--secondary" href="{{ path('billing_revenue_export') }}">
                        <i class="ti ti-file-export"></i><span>Exporter</span>
                    </a>{% endif %}
                    {% if is_granted('BILLING_DOCUMENT_CREATE', 'credit_note') %}<a class="capsule-button capsule-button--secondary" href="{{ path('billing_document_new', {type: 'credit_note'}) }}">
                        <i class="ti ti-file-minus"></i><span>Nouvel avoir</span>
                    </a>{% endif %}
                {% endif %}
                <a class="capsule-button capsule-button--primary" href="{{ path('billing_document_new', {type: is_quote ? 'quote' : 'invoice'}) }}">
                    <i class="ti ti-plus"></i><span>{{ is_quote ? 'Nouveau devis' : 'Nouvelle facture' }}</span>
                </a>
            </div>
        </div>

        <section class="data-kpis" aria-label="Indicateurs des projets">
             {% set kpis = is_quote ? [
                {label: 'Devis affichés', value: visible_total, icon: 'ti ti-files', tone: 'indigo', trend: 'Total'},
                {label: 'Brouillons', value: draft_count, icon: 'ti ti-pencil', tone: 'red', trend: 'À finaliser'},
                {label: 'Envoyés ou vus', value: sent_count, icon: 'ti ti-send', tone: 'green', trend: 'En cours'},
                {label: 'Acceptés', value: completed_count, icon: 'ti ti-circle-check-filled', tone: 'violet', trend: 'Gagnés'}
            ] : [
                {label: 'Documents affichés', value: visible_total, icon: 'ti ti-files', tone: 'indigo', trend: 'Total'},
                {label: 'Brouillons', value: draft_count, icon: 'ti ti-pencil', tone: 'red', trend: 'À finaliser'},
                {label: 'Factures émises', value: validated_count, icon: 'ti ti-file-check', tone: 'green', trend: 'Émises'},
                {label: 'Factures réglées', value: completed_count, icon: 'ti ti-cash', tone: 'violet', trend: overdue_count > 0 ? overdue_count ~ ' en retard' : 'À jour'}
            ] %}
            {% for kpi in kpis %}

                <article class="data-kpi data-kpi--{{ kpi.tone }}">
                    <span class="data-kpi__icon"><i class="{{ kpi.icon }}"></i></span>
                    <div>
                        <span>{{ kpi.label }}</span>
                        <strong>{{ kpi.value }}</strong>
                        <small>{{ kpi.trend }}</small>
                    </div>
                </article>
            {% endfor %}
            
        </section>

        <div class="clientsphere-grid">
            <div class="clientsphere-main">
                <nav class="billing-index-period-navigation" aria-label="Navigation par mois">
                    <a href="{{ path(index_route, navigation_query|merge({month: filters.previousMonth})) }}" aria-label="Mois précédent">
                        <i class="ti ti-chevron-left"></i>
                        <span>Mois précédent</span>
                    </a>
                    <strong><i class="ti ti-calendar-month"></i>{{ filters.periodLabel }}</strong>
                    <a href="{{ path(index_route, navigation_query|merge({month: filters.nextMonth})) }}" aria-label="Mois suivant">
                        <span>Mois suivant</span>
                        <i class="ti ti-chevron-right"></i>
                    </a>
                </nav>

                <form class="clientsphere-filter" method="get" action="{{ path(index_route) }}">
                    <label class="clientsphere-search">
                        <i class="ti ti-search"></i>
                        <input type="search" name="q" value="{{ app.request.query.get('q') }}"
                               placeholder="Rechercher un numéro, un client..."
                               data-commercial-client-table-target="search"
                               data-action="input->commercial-client-table#applyFilters">
                    </label>

                    {% if not is_quote %}
                        <label class="clientsphere-select">
                            <select name="type" data-commercial-client-table-target="type" data-action="change->commercial-client-table#applyFilters">
                                <option value="">Tous les types</option>
                                {% for value in ['invoice', 'deposit_invoice', 'balance_invoice', 'credit_note'] %}
                                    <option value="{{ value }}" {{ filters.type == value ? 'selected' : '' }}>{{ type_labels[value] }}</option>
                                {% endfor %}
                            </select>
                            <i class="ti ti-chevron-down"></i>
                        </label>
                    {% endif %}

                    <label class="clientsphere-select">
                        <select name="status" data-commercial-client-table-target="status" data-action="change->commercial-client-table#applyFilters">
                            <option value="">Tous les statuts</option>
                            {% for value, label in status_labels %}
                                <option value="{{ value }}" {{ filters.status == value ? 'selected' : '' }}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="clientsphere-select billing-index-client-select">
                        <select name="client" data-commercial-client-table-target="city" data-action="change->commercial-client-table#applyFilters">
                            <option value="">Tous les clients</option>
                            {% for client in clients %}
                                <option value="{{ client.id }}" {{ filters.client == client.id ~ '' ? 'selected' : '' }}>{{ client.nom }}</option>
                            {% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="billing-index-date"><span>Du</span><input type="date" name="dateFrom" value="{{ filters.dateFrom }}"></label>
                    <label class="billing-index-date"><span>Au</span><input type="date" name="dateTo" value="{{ filters.dateTo }}"></label>
                    <input type="hidden" name="perPage" value="{{ page_size }}" data-commercial-client-table-target="perPageInput">

                    <button class="clientsphere-btn clientsphere-btn-primary" type="submit"><i class="ti ti-filter-filled"></i><span>Filtrer</span></button>
                    <a class="clientsphere-reset" href="{{ path(index_route) }}">Réinitialiser</a>
                    <p class="clientsphere-filter-note">
                        <i class="ti ti-info-circle-filled"></i>
                        Documents de la société active : <strong>{{ company.nom|default('Société active') }}</strong>
                    </p>
                </form>

                <div class="fu-data-table clientsphere-table-card">
                    <div class="fu-data-table-toolbar clientsphere-table-toolbar">
                        <label class="clientsphere-check-label">
                            <input type="checkbox" data-commercial-client-table-target="selectAll" data-action="change->commercial-client-table#toggleAll">
                            <span><strong data-commercial-client-table-target="visibleCount">{{ visible_total }}</strong> document{{ visible_total > 1 ? 's' : '' }}</span>
                        </label>
                        <div class="clientsphere-table-tools">
                            <button type="button" data-action="commercial-client-table#sortByName"><i class="ti ti-arrows-sort"></i>Trier par numéro</button>
                        </div>
                    </div>

                    <div class="fu-data-table-scroll">
                        <table class="fu-data-table-table clientsphere-table billing-index-table">
                            <thead>
                                <tr>
                                    <th class="clientsphere-col-check text-center"><input type="checkbox" data-commercial-client-table-target="selectAllMirror" data-action="change->commercial-client-table#toggleAll"></th>
                                    <th>Document</th><th>Type</th><th>Client</th><th>Date</th><th>Statut</th>
                                    {% if can_view_amounts %}<th class="billing-index-align-right">Total HT</th><th class="billing-index-align-right">Total TTC</th>{% endif %}{% if can_view_payments %}<th class="billing-index-align-right">Reste dû</th>{% endif %}<th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for document in documents %}
                                    {% set document_number = document.number ?: 'Brouillon' %}
                                    {% set customer_name = document.customer ? document.customer.nom : 'Client non renseigné' %}
                                    {% set type_tone = document.type == 'quote' ? 'violet' : (document.type == 'credit_note' ? 'slate' : (document.type == 'deposit_invoice' ? 'amber' : (document.type == 'balance_invoice' ? 'teal' : 'blue'))) %}
                                    {% set type_icon = document.type == 'quote' ? 'ti ti-file-description' : (document.type == 'credit_note' ? 'ti ti-file-minus' : 'ti ti-file-invoice') %}
                                    {% set status_tone = document.status in ['paid', 'accepted'] ? 'success' : (document.status in ['overdue', 'dispute', 'refused'] ? 'danger' : (document.status in ['sent', 'viewed', 'partially_paid'] ? 'warning' : (document.status in ['validated', 'issued'] ? 'info' : (document.status == 'cancelled' ? 'muted' : 'draft')))) %}
                                    {% set status_label = document.type == 'quote' and document.status == 'validated' ? 'Validé' : status_labels[document.status]|default(document.status) %}
                                    {% set currency_label = document.currency == 'EUR' ? '€' : document.currency %}
                                    <tr data-commercial-client-table-target="row"
                                        data-name="{{ document_number|lower }}" data-type="{{ document.type }}" data-status="{{ document.status }}"
                                        data-city="{{ document.customer ? document.customer.id : '' }}"
                                        data-search="{{ (document_number ~ ' ' ~ customer_name ~ ' ' ~ type_labels[document.type]|default(document.type) ~ ' ' ~ status_label)|lower }}">
                                        <td class="clientsphere-col-check text-center"><input type="checkbox" data-commercial-client-table-target="rowCheckbox" data-action="change->commercial-client-table#updateSelection"></td>
                                        <td>
                                            <a class="clientsphere-client" href="{{ path('billing_document_show', {idtoken: document.idtoken}) }}">
                                                <span class="clientsphere-type-icon is-{{ type_tone }}"><i class="{{ type_icon }}"></i></span>
                                                <span class="billing-index-document-name"><strong>{{ document_number }}</strong><small>{{ document.reference|default('') ?: 'Sans référence' }}</small></span>
                                            </a>
                                        </td>
                                        <td><span class="clientsphere-pill is-{{ type_tone }}">{{ type_labels[document.type]|default(document.type) }}</span></td>
                                        <td>{{ customer_name }}</td>
                                        <td><span class="clientsphere-mono">{{ document.issueDate ? document.issueDate|date('d/m/Y') : '—' }}</span></td>
                                        <td><span class="clientsphere-status billing-index-status is-{{ status_tone }}"><i></i>{{ status_label }}</span></td>
                                        {% if can_view_amounts %}<td class="billing-index-amount">{{ document.subtotalHt|number_format(2, ',', ' ') }} {{ currency_label }}</td>
                                        <td class="billing-index-amount">{{ document.totalTtc|number_format(2, ',', ' ') }} {{ currency_label }}</td>{% endif %}
                                        {% if can_view_payments %}<td class="billing-index-amount {{ document.balanceDue > 0 ? 'is-due' : '' }}">{{ document.balanceDue|number_format(2, ',', ' ') }} {{ currency_label }}</td>{% endif %}
                                        <td>
                                            <div class="d-flex gap-2">
                                                <a href="{{ path('billing_document_show', {idtoken: document.idtoken}) }}" class="link"><i class="ti ti-eye fs-5"></i></a>
                                                {% if document.status == 'draft' and not document.locked %}<a href="{{ path('billing_document_edit', {idtoken: document.idtoken}) }}" class="link"><i class="ti ti-edit fs-5"></i></a>{% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                <tr class="clientsphere-empty-row" data-commercial-client-table-target="empty" hidden><td colspan="10">Aucun document ne correspond aux filtres.</td></tr>
                            </tbody>
                        </table>
                    </div>

                    {% if can_view_amounts %}{% set currency_label = period_totals.currency == 'EUR' ? '€' : period_totals.currency %}
                    <div class="billing-index-period-summary">
                        <span>Période : <strong>{{ filters.periodLabel }}</strong></span>
                        <dl>
                            {% if is_quote %}
                                <div class="is-net"><dt>Total devis HT</dt><dd>{{ period_totals.quotes|number_format(2, ',', ' ') }} {{ currency_label }}</dd></div>
                            {% else %}
                                <div><dt>Factures HT</dt><dd>{{ period_totals.invoices|number_format(2, ',', ' ') }} {{ currency_label }}</dd></div>
                                <div><dt>Avoirs HT</dt><dd>− {{ period_totals.credits|number_format(2, ',', ' ') }} {{ currency_label }}</dd></div>
                                <div class="is-net"><dt>Factures − avoirs HT</dt><dd>{{ period_totals.net|number_format(2, ',', ' ') }} {{ currency_label }}</dd></div>
                            {% endif %}
                        </dl>
                    </div>{% endif %}

                    <div class="clientsphere-table-footer">
                        <span>Affichage de <strong data-commercial-client-table-target="range">0-0</strong> sur <strong data-commercial-client-table-target="footerCount">{{ visible_total }}</strong> documents</span>
                        <nav class="clientsphere-pagination" aria-label="Pagination des documents" data-commercial-client-table-target="pagination"></nav>
                        <label class="clientsphere-page-size">Par page :
                            <select data-commercial-client-table-target="pageSize" data-action="change->commercial-client-table#changePageSize">
                                {% for size in [10, 20, 50, 100] %}<option value="{{ size }}" {{ page_size == size ? 'selected' : '' }}>{{ size }}</option>{% endfor %}
                            </select>
                        </label>
                    </div>
                </div>
            </div>

            <aside class="clientsphere-aside">
                <section class="clientsphere-side-card">
                    <h2><i class="ti ti-bolt"></i>Actions rapides</h2>
                    <a href="{{ path('billing_document_new', {type: is_quote ? 'quote' : 'invoice'}) }}"><span class="clientsphere-type-icon is-blue"><i class="ti ti-file-plus"></i></span><strong>{{ is_quote ? 'Créer un nouveau devis' : 'Créer une nouvelle facture' }}</strong></a>
                    <a href="{{ path(is_quote ? 'billing_invoice_index' : 'billing_quote_index') }}"><span class="clientsphere-type-icon is-violet"><i class="ti {{ is_quote ? 'ti-file-invoice' : 'ti-file-description' }}"></i></span><strong>{{ is_quote ? 'Consulter les factures' : 'Consulter les devis' }}</strong></a>
                    {% if not is_quote and can_view_payments %}<a href="{{ path('billing_payment_index') }}"><span class="clientsphere-type-icon is-teal"><i class="ti ti-cash"></i></span><strong>Consulter les paiements</strong></a>{% endif %}
                </section>

                <section class="clientsphere-side-card clientsphere-distribution billing-index-overview">
                    <h2><i class="ti ti-chart-pie-2"></i>Vue d’ensemble</h2>
                    <div class="billing-index-side-stat"><span>Brouillons</span><strong>{{ draft_count }}</strong></div>
                    <div class="billing-index-side-stat"><span>{{ is_quote ? 'Acceptés' : 'Réglées' }}</span><strong>{{ completed_count }}</strong></div>
                    {% if not is_quote %}<a class="billing-index-overdue-link" href="{{ path('billing_invoice_index', {overdue: 1}) }}"><span>Factures en retard</span><strong>{{ overdue_count }}</strong></a>{% endif %}
                </section>

                <section class="clientsphere-tip">
                    <h2><i class="ti ti-settings"></i>Facturation</h2>
                    <p>Configurez vos préfixes, numéros et conditions de paiement par défaut.</p>
                    <a href="{{ path('billing_settings') }}">Ouvrir les paramètres <i class="ti ti-arrow-right"></i></a>
                </section>
            </aside>
        </div>
    </section>
{% endblock %}