{% if errors._global|default(null) %}<div class="alert alert-danger">{{ errors._global }}</div>{% endif %}

<form method="post" enctype="multipart/form-data" class="expense-form" data-controller="expense-form">
    <input type="hidden" name="_token" value="{{ csrf_token(csrf_id) }}">
    <input type="hidden" name="expense[currency]" value="EUR">

    <div class="row g-4 align-items-start">
        <div class="col-12 col-xl-9">
            <section class="card expense-form-card shadow-sm mb-4">
                <header class="card-header"><span class="expense-form-card__icon is-blue"><i class="ti ti-info-circle-filled"></i></span><h2>Informations générales</h2></header>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Date de dépense <em>*</em></label>
                            <input class="form-control {{ errors.date|default(null) ? 'is-invalid' : '' }}" type="date" name="expense[date]" value="{{ data.date }}" required>
                            {% if errors.date|default(null) %}<div class="invalid-feedback">{{ errors.date }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Statut</label>
                            <input class="form-control" value="{{ data.status == 'paid' ? 'Payée' : (data.status == 'validated' ? 'Validée' : 'Brouillon') }}" readonly data-expense-form-target="statusLabel">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Fournisseur <em>*</em></label>
                            <div class="d-flex gap-2 expense-supplier-field">
                                <select class="form-select {{ errors.supplierId|default(null) ? 'is-invalid' : '' }}" name="expense[supplierId]" required data-controller="tom-select" data-tom-select-placeholder-value="Rechercher un fournisseur…" data-expense-form-target="supplier" data-action="change->expense-form#refreshSummary">
                                    <option value="">Rechercher un fournisseur…</option>
                                    {% for supplier in suppliers %}<option value="{{ supplier.id }}" {{ data.supplierId == supplier.id ? 'selected' : '' }}>{{ supplier.nom }}</option>{% endfor %}
                                </select>
                                <a class="btn btn-outline-primary expense-new-supplier" href="{{ path('commercial_supplier_new') }}"><i class="ti ti-plus"></i> Nouveau fournisseur</a>
                            </div>
                            {% if errors.supplierId|default(null) %}<div class="invalid-feedback d-block">{{ errors.supplierId }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Catégorie de dépense <em>*</em></label>
                            <select class="form-select {{ errors.categoryId|default(null) ? 'is-invalid' : '' }}" name="expense[categoryId]" required data-controller="tom-select" data-tom-select-placeholder-value="Rechercher une catégorie…" data-expense-form-target="category" data-action="change->expense-form#refreshSummary">
                                <option value="">Sélectionner une catégorie…</option>
                                {% for category in categories %}<option value="{{ category.id }}" {{ data.categoryId == category.id ? 'selected' : '' }}>{{ category.nom }}</option>{% endfor %}
                            </select>
                            {% if errors.categoryId|default(null) %}<div class="invalid-feedback d-block">{{ errors.categoryId }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Libellé <em>*</em></label>
                            <input class="form-control {{ errors.label|default(null) ? 'is-invalid' : '' }}" name="expense[label]" value="{{ data.label }}" placeholder="Ex : Hébergement VPS mensuel" required>
                            {% if errors.label|default(null) %}<div class="invalid-feedback">{{ errors.label }}</div>{% endif %}
                        </div>
                        <div class="col-12">
                            <label class="form-label">Référence / N° facture fournisseur</label>
                            <div class="input-group"><span class="input-group-text"><i class="ti ti-hash"></i></span><input class="form-control" name="expense[reference]" value="{{ data.reference }}" placeholder="Ex : OVH-2025-0178"></div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Commentaire</label>
                            <textarea class="form-control" rows="3" name="expense[comment]" placeholder="Notes internes, précisions sur la dépense…">{{ data.comment }}</textarea>
                        </div>
                    </div>
                </div>
            </section>

            <section class="card expense-form-card shadow-sm mb-4">
                <header class="card-header"><span class="expense-form-card__icon is-green"><i class="ti ti-currency-euro"></i></span><h2>Montants</h2></header>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Montant HT <em>*</em></label>
                            <div class="input-group"><input class="form-control {{ errors.amountHt|default(null) ? 'is-invalid' : '' }}" type="number" step="0.01" min="0" name="expense[amountHt]" value="{{ data.amountHt }}" placeholder="0,00" required data-expense-form-target="amountHt" data-action="input->expense-form#calculate change->expense-form#calculate"><span class="input-group-text">EUR</span></div>
                            {% if errors.amountHt|default(null) %}<div class="invalid-feedback d-block">{{ errors.amountHt }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Taux TVA</label>
                            <select class="form-select" name="expense[vatRate]" data-expense-form-target="vatRate" data-action="change->expense-form#calculate">
                                {% for rate, label in {'0': '0 % (exonéré)', '5.5': '5,5 % (réduit)', '10': '10 % (intermédiaire)', '20': '20 % (normal)'} %}<option value="{{ rate }}" {{ data.vatRate == rate ? 'selected' : '' }}>{{ label }}</option>{% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Montant TVA</label>
                            <div class="input-group"><input class="form-control" type="number" step="0.01" name="expense[amountVat]" value="{{ data.amountVat }}" readonly data-expense-form-target="amountVat"><span class="input-group-text">EUR</span></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Montant TTC</label>
                            <div class="input-group"><input class="form-control {{ errors.amountTtc|default(null) ? 'is-invalid' : '' }}" type="number" step="0.01" name="expense[amountTtc]" value="{{ data.amountTtc }}" readonly data-expense-form-target="amountTtc"><span class="input-group-text">EUR</span></div>
                            {% if errors.amountTtc|default(null) %}<div class="invalid-feedback d-block">{{ errors.amountTtc }}</div>{% endif %}
                        </div>
                        <div class="col-md-4"><label class="form-label">Devise</label><input class="form-control" value="EUR" readonly></div>
                        <div class="col-12"><div class="expense-form-info"><i class="ti ti-info-circle-filled"></i> Les montants seront recalculés côté serveur à l’enregistrement.</div></div>
                    </div>
                </div>
            </section>

            <section class="card expense-form-card shadow-sm mb-4">
                <header class="card-header"><span class="expense-form-card__icon is-violet"><i class="ti ti-paperclip"></i></span><h2>Justificatif</h2></header>
                <div class="card-body">
                    <label class="expense-dropzone {{ errors.receipt|default(null) ? 'is-invalid' : '' }}" data-expense-form-target="dropzone" data-action="dragover->expense-form#dragOver dragleave->expense-form#dragLeave drop->expense-form#dropFile">
                        <input class="d-none" type="file" name="receipt" accept="application/pdf,image/jpeg,image/png" data-expense-form-target="receipt" data-action="change->expense-form#fileSelected">
                        <span class="expense-dropzone__icon"><i class="ti ti-cloud-upload"></i></span>
                        <strong data-expense-form-target="fileName">{{ expense|default(null) and expense.originalFilename ? expense.originalFilename : 'Déposez votre fichier ici' }}</strong>
                        <small>ou cliquez pour parcourir</small>
                        <span class="btn btn-light border"><i class="ti ti-folder-open me-1"></i> Ajouter un justificatif</span>
                        <small>Formats acceptés : <b>PDF, JPG, PNG</b> — Max. 10 Mo</small>
                    </label>
                    {% if errors.receipt|default(null) %}<div class="text-danger small mt-2">{{ errors.receipt }}</div>{% endif %}
                    <p class="expense-form-help"><i class="ti ti-info-circle-filled"></i> Le justificatif peut être ajouté plus tard si la dépense reste en brouillon.</p>
                </div>
            </section>

            <section class="card expense-form-card shadow-sm mb-4">
                <header class="card-header"><span class="expense-form-card__icon is-amber"><i class="ti ti-chart-pie-filled"></i></span><div><h2>Ventilation projets</h2><p>Ventilez cette dépense sur un ou plusieurs projets pour suivre la rentabilité.</p></div></header>
                <div class="card-body">
                    {% if errors.allocations|default(null) %}<div class="alert alert-danger py-2">{{ errors.allocations }}</div>{% endif %}
                    <div class="table-responsive expense-allocation-table mb-3">
                        <table class="table align-middle mb-0">
                            <thead><tr><th>Projet</th><th>Pourcentage</th><th>Montant HT</th><th>Montant TTC</th><th></th></tr></thead>
                            <tbody>
                            {% for index in 0..4 %}
                                {% set allocation = data.allocations[index]|default(null) %}
                                <tr data-expense-form-target="allocationRow" data-index="{{ index }}" class="{{ allocation or index == 0 ? '' : 'd-none' }}">
                                    <td><select class="form-select" name="allocations[{{ index }}][projectId]" data-controller="tom-select" data-tom-select-placeholder-value="Sélectionner un projet…" data-field="project" data-action="change->expense-form#calculate"><option value="">Sélectionner un projet…</option>{% for project in projects %}<option value="{{ project.id }}" {{ allocation and allocation.projectId == project.id ? 'selected' : '' }}>{{ project.client ? project.client.nom : 'Sans client' }} - {{ project.titre }}</option>{% endfor %}</select></td>
                                    <td><div class="input-group"><input class="form-control text-center fw-semibold" type="number" step="0.0001" min="0" max="100" name="allocations[{{ index }}][percentage]" value="{{ allocation ? allocation.percentage : '' }}" data-field="percentage" data-action="input->expense-form#calculate"><span class="input-group-text">%</span></div></td>
                                    <td><span data-field="amountHtLabel">—,— €</span><input type="hidden" name="allocations[{{ index }}][amountHt]" value="{{ allocation ? allocation.amountHt : '' }}" data-field="amountHt"></td>
                                    <td><strong data-field="amountTtcLabel">—,— €</strong><input type="hidden" name="allocations[{{ index }}][amountTtc]" data-field="amountTtc"></td>
                                    <td><button class="btn btn-sm text-danger" type="button" data-action="expense-form#removeAllocation" title="Supprimer"><i class="ti ti-trash"></i></button></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex flex-wrap gap-2 mb-4">
                        <button class="btn btn-sm btn-outline-primary" type="button" data-action="expense-form#addAllocation"><i class="ti ti-plus me-1"></i> Ajouter une ventilation</button>
                        <button class="btn btn-sm btn-light border" type="button" data-action="expense-form#allocateAll"><i class="ti ti-target-arrow me-1"></i> Ventiler à 100 % sur un projet</button>
                        <button class="btn btn-sm btn-light border" type="button" data-action="expense-form#splitEqually"><i class="ti ti-adjustments-horizontal me-1"></i> Répartir équitablement</button>
                    </div>
                    <div class="expense-allocation-summary">
                        <div class="d-flex justify-content-between"><strong>Récapitulatif de ventilation</strong><span class="expense-progress-badge" data-expense-form-target="progressLabel">0 % ventilé</span></div>
                        <div class="progress my-3"><div class="progress-bar" data-expense-form-target="progressBar"></div></div>
                        <div class="row text-center g-0"><div class="col"><small>Montant total TTC</small><strong data-expense-form-target="allocationTotalTtc">—,— €</strong></div><div class="col border-start"><small>Montant ventilé HT</small><strong data-expense-form-target="allocatedHt">—,— €</strong></div><div class="col border-start"><small>Reste à ventiler HT</small><strong class="text-success" data-expense-form-target="remainingHt">0,00 €</strong></div></div>
                    </div>
                </div>
            </section>
        </div>

        <aside class="col-12 col-xl-3 expense-form-aside">
            <section class="card expense-side-card shadow-sm mb-3">
                <header class="card-header"><i class="ti ti-file-description"></i><h2>Résumé</h2></header>
                <div class="card-body">
                    <dl class="expense-summary-list"><div><dt>Fournisseur</dt><dd data-expense-form-target="summarySupplier">—</dd></div><div><dt>Catégorie</dt><dd data-expense-form-target="summaryCategory">—</dd></div><div><dt>Montant HT</dt><dd data-expense-form-target="summaryHt">—,— €</dd></div><div><dt>TVA</dt><dd data-expense-form-target="summaryVat">—,— €</dd></div><div class="is-total"><dt>Montant TTC</dt><dd data-expense-form-target="summaryTtc">—,— €</dd></div></dl>
                    <hr><dl class="expense-summary-list"><div><dt>Statut</dt><dd><span class="expense-status-dot">{{ data.status == 'paid' ? 'Payée' : (data.status == 'validated' ? 'Validée' : 'Brouillon') }}</span></dd></div><div><dt>Projets ventilés</dt><dd><span data-expense-form-target="projectCount">0</span> projet(s)</dd></div><div><dt>Reste à ventiler</dt><dd class="text-success" data-expense-form-target="summaryRemaining">0,00 €</dd></div></dl>
                </div>
            </section>
            <section class="card expense-side-card shadow-sm mb-3">
                <header class="card-header"><i class="ti ti-chart-line"></i><h2>Impact projet</h2></header>
                <div class="card-body"><div data-expense-form-target="impactList"><p class="text-muted small mb-0">Ajoutez une ventilation pour afficher son impact.</p></div><p class="expense-form-help mb-0"><i class="ti ti-info-circle-filled"></i> L’impact sur la marge sera calculé après enregistrement.</p></div>
            </section>
            <section class="card expense-side-card shadow-sm">
                <header class="card-header"><i class="ti ti-help-circle-filled"></i><h2>Règles de ventilation</h2></header>
                <div class="card-body expense-rules"><p><i class="ti ti-circle-check-filled text-primary"></i> Une dépense peut être ventilée sur un ou plusieurs projets.</p><p><i class="ti ti-alert-triangle-filled text-warning"></i> La somme ventilée ne doit pas dépasser le montant total HT.</p><p><i class="ti ti-info-circle-filled"></i> Une dépense non ventilée reste une dépense générale.</p></div>
            </section>
        </aside>
    </div>

    <footer class="expense-form-footer d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
        <p class="mb-0"><i class="ti ti-info-circle-filled"></i> Les champs marqués d’un <em>*</em> sont obligatoires.</p>
        <div class="d-flex flex-wrap justify-content-end gap-2">
            <a class="btn btn-light border" href="{{ expense|default(null) ? path('commercial_expense_show', {idtoken: expense.idtoken}) : path('commercial_expense_index') }}"><i class="ti ti-x me-1"></i> Annuler</a>
            <button class="btn btn-light border" type="submit" name="_intent" value="draft"><i class="ti ti-device-floppy me-1"></i> Enregistrer en brouillon</button>
            <button class="btn btn-primary" type="submit" name="_intent" value="create"><i class="ti ti-plus me-1"></i> {{ expense|default(null) ? 'Enregistrer la dépense' : 'Créer la dépense' }}</button>
        </div>
    </footer>
</form>