{% extends '@Commercial/commercial/layout.html.twig' %}

{% block commercial_title %}{{ expense.numeroDocument ?: 'Détail de la dépense' }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block commercial_content %}
{% set supplier = expense.fournisseur %}
{% set category = expense.categorie %}
{% set creator = expense.createdBy %}
{% set creator_name = creator ? ((creator.prenom|default('') ~ ' ' ~ creator.nom|default(''))|trim) : 'Utilisateur inconnu' %}
<div class="expense-show-page">

    <header class="capsule-profile-header mb-4">
        <div class="clientsphere-profile-identity">
            <div>
                <div class="d-flex align-items-center flex-wrap gap-2">
                    <a class="capsule-button capsule-button--light" href="{{ path('commercial_expense_index') }}" title="Retour aux dépenses"><i class="ti ti-arrow-left"></i></a>
                    <h1 class="capsule-titre">{{ expense.numeroDocument ?: 'Dépense sans libellé' }}</h1>
                    <span class="expense-reference">#DEP-{{ expense.id|default('—') }}</span>
                </div>
                <p>{{ supplier.nom|default('Fournisseur non renseigné') }} · {{ expense.dateDepense|date('d/m/Y') }}</p>
                <div class="capsule-profile-meta">
                    <span class="expense-pill expense-pill--category"><i class="ti ti-category"></i>{{ category.nom|default('Sans catégorie') }}</span>
                    <span class="expense-pill expense-pill--{{ view.status_class }}"><i class="ti ti-circle-check-filled"></i>{{ view.status_label }}</span>
                    <span class="expense-pill expense-pill--allocation"><i class="ti ti-chart-pie-filled"></i>{{ view.fully_allocated ? 'Ventilée' : 'À ventiler' }}</span>                
                </div>
            </div>
        </div>
        <div class="clientsphere-profile-actions">
           

            {% if view.has_receipt %}
                <a class="capsule-button capsule-button--light" href="{{ path('commercial_expense_receipt_download', {idtoken: expense.idtoken}) }}" data-turbo="false"><i class="ti ti-download"></i>Télécharger justificatif</a>
            {% endif %}
            {% if is_granted('EXPENSE_EDIT', expense) %}
                <a class="capsule-button capsule-button--primary" href="{{ path('commercial_expense_edit', {idtoken: expense.idtoken}) }}"><i class="ti ti-pencil"></i>Modifier</a>
            {% endif %}
            <div class="dropdown">
                <button class="capsule-button capsule-button--light" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti ti-dots-vertical"></i></button>
                <div class="dropdown-menu dropdown-menu-end shadow-sm">
                    <form method="post" action="{{ path('commercial_expense_duplicate', {idtoken: expense.idtoken}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('expense_duplicate_' ~ expense.idtoken) }}">
                        <button class="dropdown-item" type="submit"><i class="ti ti-copy me-2"></i>Créer une dépense similaire</button>
                    </form>
                    {% if is_granted('EXPENSE_DELETE_DRAFT', expense) %}
                        <div class="dropdown-divider"></div>
                        <form method="post" action="{{ path('commercial_expense_archive', {idtoken: expense.idtoken}) }}" onsubmit="return confirm('Archiver cette dépense ?')">
                            <input type="hidden" name="_token" value="{{ csrf_token('expense_archive_' ~ expense.idtoken) }}">
                            <button class="dropdown-item text-danger" type="submit"><i class="ti ti-archive me-2"></i>Archiver</button>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </header>

    <section class="data-kpis-5" aria-label="Indicateurs des dépenses">
        <article class="data-kpi data-kpi--indigo">
            <span class="data-kpi__icon"><i class="ti ti-currency-euro"></i></span>
            <div>
                <span>Montant HT</span>
                <strong>{{ view.amount_ht|number_format(2, ',', ' ') }} €</strong>
                <small>Hors taxes</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--violet">
            <span class="data-kpi__icon"><i class="ti ti-percentage"></i></span>
            <div>
                <span>TVA</span>
                <strong>{{ view.amount_vat|number_format(2, ',', ' ') }} €</strong>
                <small>Taux {{ view.vat_rate|number_format(0, ',', ' ') }} %</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--violet">
            <span class="data-kpi__icon"><i class="ti ti-coins"></i></span>
            <div>
                <span>Montant TTC</span>
                <strong>{{ view.amount_ttc|number_format(2, ',', ' ') }} €</strong>
                <small>Toutes taxes comprises</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--green">
            <span class="data-kpi__icon"><i class="ti ti-chart-pie-filled"></i></span>
            <div>
                <span>Montant ventilé</span>
                <strong>{{ view.allocated_ht|number_format(2, ',', ' ') }} €</strong>
                <small>Sur {{ view.allocation_count }} projet{{ view.allocation_count > 1 ? 's' : '' }}</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--orange">
            <span class="data-kpi__icon"><i class="ti ti-scale"></i></span>
            <div>
                <span>Reste à ventiler</span>
                <strong>{{ view.remaining_ht|number_format(2, ',', ' ') }} €</strong>
                <small>{{ view.fully_allocated ? 'Entièrement ventilée' : 'Ventilation incomplète' }}</small>
            </div>
        </article>
    </section>

    <div class="expense-show-layout">
        <main class="expense-show-main">
            <section class="expense-detail-card">
                <div class="expense-card-heading"><span class="expense-section-icon expense-section-icon--blue"><i class="ti ti-info-circle"></i></span><h2>Informations générales</h2></div>
                <div class="expense-card-body expense-info-grid">
                    <div><small>Fournisseur</small><div class="expense-supplier"><span>{{ supplier.nom|default('?')|slice(0, 2)|upper }}</span><strong>{{ supplier.nom|default('Non renseigné') }}</strong>{% if supplier %}<a href="{{ path('commercial_supplier_show', {idtoken: supplier.idtoken}) }}" title="Voir le fournisseur"><i class="ti ti-external-link"></i></a>{% endif %}</div></div>
                    <div><small>Catégorie</small><p><span class="expense-pill expense-pill--category"><i class="ti ti-category"></i>{{ category.nom|default('Sans catégorie') }}</span></p></div>
                    <div><small>Libellé</small><p>{{ expense.numeroDocument ?: '—' }}</p></div>
                    <div><small>Référence fournisseur</small><p><code>{{ expense.reference ?: '—' }}</code></p></div>
                    <div><small>Date de la dépense</small><p><i class="ti ti-calendar me-1"></i>{{ expense.dateDepense|date('d F Y') }}</p></div>
                    <div><small>Créée par</small><p class="expense-user"><span>{% if creator %}<img src="{{ user_avatar_url(creator) }}" alt="">{% else %}<i class="ti ti-user-question"></i>{% endif %}</span><strong>{{ creator_name }}</strong><em>· {{ expense.createdAt|date('d/m/Y') }}</em></p></div>
                    <div class="expense-info-comment"><small>Commentaire</small><p>{{ expense.comment ?: 'Aucun commentaire.' }}</p></div>
                </div>
            </section>

            <section class="expense-detail-card">
                <div class="expense-card-heading"><span class="expense-section-icon expense-section-icon--green"><i class="ti ti-currency-euro"></i></span><h2>Montants</h2></div>
                <div class="expense-card-body">
                    <div class="expense-amount-summary">
                        <div><small>Montant HT</small><strong>{{ view.amount_ht|number_format(2, ',', ' ') }} €</strong></div>
                        <div><small>TVA ({{ view.vat_rate|number_format(0, ',', ' ') }}%)</small><strong>{{ view.amount_vat|number_format(2, ',', ' ') }} €</strong></div>
                        <div><small>Total TTC</small><strong>{{ view.amount_ttc|number_format(2, ',', ' ') }} €</strong></div>
                        <span><i class="ti ti-calculator"></i></span>
                    </div>
                    <div class="expense-amount-grid">
                        <div><small>Montant HT</small><strong>{{ view.amount_ht|number_format(2, ',', ' ') }} €</strong></div>
                        <div><small>Taux TVA</small><strong>{{ view.vat_rate|number_format(0, ',', ' ') }} %</strong></div>
                        <div><small>Montant TVA</small><strong>{{ view.amount_vat|number_format(2, ',', ' ') }} €</strong></div>
                        <div class="expense-amount-total"><small>Montant TTC</small><strong>{{ view.amount_ttc|number_format(2, ',', ' ') }} €</strong></div>
                        <div><small>Devise</small><strong>EUR €</strong></div>
                        <div><small>Mode de paiement</small><strong>Non renseigné</strong></div>
                    </div>
                </div>
            </section>

            <section class="expense-detail-card expense-allocation-card">
                <div class="expense-card-heading">
                    <span class="expense-section-icon expense-section-icon--cyan"><i class="ti ti-chart-pie"></i></span><h2>Ventilation projets</h2>
                    <div class="expense-allocation-progress"><span><i style="width: {{ view.allocation_percent }}%"></i></span><strong>{{ view.allocation_percent|number_format(0, ',', ' ') }}%</strong><em>{{ view.fully_allocated ? 'Ventilée' : 'Partielle' }}</em></div>
                </div>
                <div class="table-responsive">
                    <table class="table expense-allocation-table align-middle mb-0">
                        <thead><tr><th>Projet</th><th>Client</th><th>Pourcentage</th><th>Montant HT</th><th>Montant TTC</th><th>Impact rentabilité</th><th></th></tr></thead>
                        <tbody>
                        {% for row in view.allocation_rows %}
                            <tr>
                                <td><div class="expense-project-name"><i style="background: {{ loop.index is odd ? '#6558f5' : '#35b8e6' }}"></i><span><strong>{{ row.project.titre|default('Projet supprimé') }}</strong><small>#PRJ-{{ row.project.id|default('—') }}</small></span></div></td>
                                <td>{% if row.client %}<span class="expense-client-avatar">{{ row.client.nom|slice(0, 1)|upper }}</span>{{ row.client.nom }}{% else %}—{% endif %}</td>
                                <td><div class="expense-percent"><span><i style="width: {{ row.percent }}%"></i></span><strong>{{ row.percent|number_format(0, ',', ' ') }}%</strong></div></td>
                                <td><strong>{{ row.amount_ht|number_format(2, ',', ' ') }} €</strong></td>
                                <td><strong>{{ row.amount_ttc|number_format(2, ',', ' ') }} €</strong></td>
                                <td><span class="expense-impact"><i class="ti ti-trending-down"></i>{{ row.impact|number_format(2, ',', ' ') }} €</span></td>
                                <td>{% if row.project %}<a class="expense-project-link" href="{{ path('projet_show', {id: row.project.id}) }}">Voir projet <i class="ti ti-external-link"></i></a>{% endif %}</td>
                            </tr>
                        {% else %}
                            <tr><td colspan="7" class="text-center text-muted py-5">Cette dépense n'est ventilée sur aucun projet.</td></tr>
                        {% endfor %}
                        </tbody>
                        <tfoot><tr><th colspan="3">TOTAL</th><th>{{ view.allocated_ht|number_format(2, ',', ' ') }} €</th><th>{{ view.allocated_ttc|number_format(2, ',', ' ') }} €</th><th colspan="2" class="text-warning">-{{ view.allocated_ht|number_format(2, ',', ' ') }} € d'impact total</th></tr></tfoot>
                    </table>
                </div>
            </section>
        </main>

        <aside class="expense-show-sidebar">
            <section class="expense-side-card">
                <div class="expense-side-heading"><h2>Justificatif</h2><span class="expense-pill expense-pill--validated"><i class="ti ti-circle-check-filled"></i>{{ view.has_receipt ? 'Joint' : 'Absent' }}</span></div>
                <div class="expense-side-body">
                    {% if view.has_receipt %}
                        <a class="expense-receipt-preview" href="{{ path('commercial_expense_receipt', {idtoken: expense.idtoken}) }}" target="_blank" data-turbo="false">
                            {% if view.receipt_is_image %}<img src="{{ path('commercial_expense_receipt', {idtoken: expense.idtoken}) }}" alt="Aperçu du justificatif">{% else %}<i class="ti ti-file-type-pdf"></i><strong>Aperçu non disponible</strong><small>Cliquer pour ouvrir</small><b>PDF</b>{% endif %}
                        </a>
                        <div class="expense-receipt-file"><i class="ti ti-file-type-pdf"></i><span><strong>{{ expense.originalFilename ?: 'Justificatif' }}</strong><small>{{ expense.mimeType|default('Document') }}{{ view.receipt_size ? ' · ' ~ view.receipt_size : '' }}</small></span></div>
                        <div class="d-grid grid-2 gap-2 mt-3"><a class="btn btn-outline-primary" href="{{ path('commercial_expense_receipt_download', {idtoken: expense.idtoken}) }}" data-turbo="false"><i class="ti ti-download"></i>Télécharger</a>{% if is_granted('EXPENSE_EDIT', expense) %}<a class="btn btn-outline-secondary" href="{{ path('commercial_expense_edit', {idtoken: expense.idtoken}) }}#expense-receipt"><i class="ti ti-refresh"></i>Remplacer</a>{% endif %}</div>
                    {% else %}
                        <div class="expense-empty-receipt"><i class="ti ti-file-off"></i><p>Aucun justificatif joint.</p>{% if is_granted('EXPENSE_EDIT', expense) %}<a class="btn btn-outline-primary" href="{{ path('commercial_expense_edit', {idtoken: expense.idtoken}) }}#expense-receipt">Ajouter un justificatif</a>{% endif %}</div>
                    {% endif %}
                </div>
            </section>

            <section class="expense-side-card">
                <div class="expense-side-heading"><h2>Statut</h2><span class="expense-pill expense-pill--{{ view.status_class }}">{{ view.status_label }}</span></div>
                <div class="expense-side-body"><ol class="expense-timeline">
                    <li class="is-done"><i class="ti ti-check"></i><div><strong>Créée</strong><small>{{ expense.createdAt|date('d/m/Y · H:i') }}</small><span>{{ creator_name }}</span></div></li>
                    <li class="{{ expense.status != 'draft' ? 'is-done' : '' }}"><i class="ti {{ expense.status != 'draft' ? 'ti-check' : 'ti-clock' }}"></i><div><strong>Validée</strong><small>{{ expense.status != 'draft' ? expense.createdAt|date('d/m/Y · H:i') : 'En attente' }}</small></div></li>
                    <li class="{{ expense.status == 'paid' ? 'is-done' : '' }}"><i class="ti {{ expense.status == 'paid' ? 'ti-check' : 'ti-clock' }}"></i><div><strong>Payée</strong><small>{{ expense.status == 'paid' ? 'Paiement enregistré' : 'En attente' }}</small></div></li>
                </ol></div>
            </section>

            <section class="expense-side-card">
                <div class="expense-side-heading"><h2>Actions rapides</h2></div>
                <div class="expense-side-body expense-quick-actions">
                    <form method="post" action="{{ path('commercial_expense_duplicate', {idtoken: expense.idtoken}) }}"><input type="hidden" name="_token" value="{{ csrf_token('expense_duplicate_' ~ expense.idtoken) }}"><button type="submit"><i class="ti ti-copy"></i>Créer dépense similaire</button></form>
                    {% if supplier %}<a href="{{ path('commercial_supplier_show', {idtoken: supplier.idtoken}) }}"><i class="ti ti-building-store"></i>Voir le fournisseur<i class="ti ti-external-link ms-auto"></i></a>{% endif %}
                    {% if view.allocation_rows|length %}<a href="{{ path('commercial_project_profitability_show', {projectId: view.allocation_rows[0].project.id}) }}"><i class="ti ti-chart-line"></i>Voir rentabilité projet<i class="ti ti-external-link ms-auto"></i></a>{% endif %}
                    {% if expense.status != 'paid' and is_granted('EXPENSE_EDIT', expense) %}<form method="post" action="{{ path('commercial_expense_mark_paid', {idtoken: expense.idtoken}) }}"><input type="hidden" name="_token" value="{{ csrf_token('expense_mark_paid_' ~ expense.idtoken) }}"><button class="expense-mark-paid" type="submit"><i class="ti ti-credit-card-pay"></i>Marquer payée</button></form>{% endif %}
                </div>
            </section>
        </aside>
    </div>
</div>
{% endblock %}