{% extends '@Compta/layout.html.twig' %}
{% block compta_title %}Relevé {{ statement.mois }}/{{ statement.annee }}{% endblock %}
{% block compta_content %}
{% set annotation_rows = [] %}{% for a in annotations %}{% set annotation_rows = annotation_rows|merge([{id:a.id,pageNumber:a.pageNumber,posX:a.posX,posY:a.posY,width:a.width,height:a.height,rotation:a.rotation,text:a.text,color:a.color,fontSize:a.fontSize,ecritureComptableId:a.ecritureComptable ? a.ecritureComptable.id : null}]) %}{% endfor %}
<header class="compta-heading capsule-heading"><div class="capsule-heading-content"><a class="compta-back" href="{{ path('relevebancaire_index',{year:statement.annee}) }}"><i class="ti ti-arrow-left"></i>Relevés</a><h1 class="capsule-heading-title">{{ statement.banque ? statement.banque.nom : 'Compte bancaire' }} · {{ '%02d'|format(statement.mois) }}/{{ statement.annee }}</h1><p class="capsule-heading-subtitle">{{ statement.originalFilename }} · importé le {{ statement.uploadedAt ? statement.uploadedAt|date('d/m/Y à H:i') : statement.createdAt|date('d/m/Y à H:i') }}</p></div><div class="capsule-heading-actions">{% if statement.annotatedPdfFilename %}<a class="capsule-button capsule-button--secondary" href="{{ path('rapprochement_bancaire_view_annotated_pdf',{idtoken:statement.idtoken}) }}" target="_blank"><i class="ti ti-file-check"></i>Voir le PDF tamponné</a>{% endif %}<a class="capsule-button capsule-button--primary" href="#annotation-workspace"><i class="ti ti-rubber-stamp"></i>Tamponner les lignes</a></div></header>
<div class="compta-kpis"><article><span>Solde disponible</span><strong>{{ statement.availableBalance is not null ? (statement.availableBalance|number_format(2, ',', ' ') ~ ' €') : '—' }}</strong><form method="post" action="{{ path('relevebancaire_update_balance',{idtoken:statement.idtoken}) }}" class="d-flex gap-2 mt-2"><input type="hidden" name="_token" value="{{ csrf_token('statement_balance_' ~ statement.idtoken) }}"><input class="form-control form-control-sm" name="balance" type="number" step="0.01" value="{{ statement.availableBalance }}" placeholder="Solde"><button class="btn btn-sm btn-outline-primary">OK</button></form></article><article><span>Écritures associées</span><strong>{{ entries|length }}</strong><small>{{ statement.allEcrituresPointed ? 'Pointage complet' : 'À rapprocher' }}</small></article><article><span>Tampons Payé</span><strong>{{ annotations|length }}</strong><small>{{ statement.annotatedPdfGeneratedAt ? ('PDF généré le ' ~ statement.annotatedPdfGeneratedAt|date('d/m/Y H:i')) : 'PDF final à générer' }}</small></article></div>
<section id="annotation-workspace" class="compta-card annotation-workspace" data-controller="compta-annotation" data-compta-annotation-pdf-url-value="{{ path('relevebancaire_document_inline',{idtoken:statement.idtoken}) }}" data-compta-annotation-save-url-value="{{ path('rapprochement_bancaire_save_annotations',{idtoken:statement.idtoken}) }}" data-compta-annotation-csrf-value="{{ csrf_token('statement_annotations_' ~ statement.idtoken) }}" data-compta-annotation-annotations-value="{{ annotation_rows|json_encode|e('html_attr') }}"><div class="annotation-topbar"><div><h2>Marquer les lignes du relevé</h2><p>Activez le mode tampon puis cliquez sur chaque ligne payée. Les positions restent exactes quel que soit le zoom.</p></div><div class="d-flex gap-2"><button class="btn btn-outline-primary" type="button" data-compta-annotation-target="modeButton" data-action="compta-annotation#toggleMode"><i class="ti ti-rubber-stamp"></i> Mode tampon</button><button class="btn btn-success" type="button" data-action="compta-annotation#save"><i class="ti ti-device-floppy"></i> Enregistrer</button></div></div><div class="annotation-grid"><div class="annotation-viewer"><div class="annotation-status" data-compta-annotation-target="status">Chargement du relevé…</div><div data-compta-annotation-target="pages"></div></div><aside class="annotation-sidebar"><h3>Tampons</h3><div class="annotation-kind"><label><input type="radio" name="stamp-kind" value="PAYÉ" data-color="#198754" checked> <span class="dot bg-success"></span> Payé</label><label><input type="radio" name="stamp-kind" value="ENCAISSÉ" data-color="#2563eb"> <span class="dot bg-primary"></span> Encaissé</label><label><input type="radio" name="stamp-kind" value="VÉRIFIÉ" data-color="#7c3aed"> <span class="dot bg-purple"></span> Vérifié</label><label><input type="radio" name="stamp-kind" value="SALAIRE" data-color="#dc3545"> <span class="dot bg-danger"></span> Salaire</label></div><div class="annotation-list" data-compta-annotation-target="list"></div><hr><h3>Écritures liées</h3><p class="small text-muted">Sélectionnez une écriture avant de poser un tampon pour les associer.</p><div class="annotation-entries">{% for entry in entries %}<button type="button" data-entry-id="{{ entry.id }}" data-action="compta-annotation#selectEntry"><strong>{{ entry.libelle }}</strong><small>{{ entry.dateEcriture ? entry.dateEcriture|date('d/m/Y') : '' }} · {{ entry.montant|number_format(2, ',', ' ') }} €</small></button>{% else %}<span class="text-muted small">Aucune écriture liée.</span>{% endfor %}</div><form method="post" action="{{ path('rapprochement_bancaire_generate_annotated_pdf',{idtoken:statement.idtoken}) }}" data-action="submit->compta-annotation#beforeGenerate"><input type="hidden" name="_token" value="{{ csrf_token('statement_generate_' ~ statement.idtoken) }}"><button class="btn btn-dark w-100 mt-3"><i class="ti ti-file-type-pdf"></i> Générer le PDF tamponné</button></form></aside></div></section>
<form method="post" action="{{ path('relevebancaire_delete',{idtoken:statement.idtoken}) }}" class="text-end mt-3" data-action="submit->compta-ui#confirm" data-confirm="Archiver ce relevé bancaire ?"><input type="hidden" name="_token" value="{{ csrf_token('statement_delete_' ~ statement.idtoken) }}"><button class="capsule-button capsule-button--danger capsule-button--small">Archiver le relevé</button></form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js" defer></script>
{% endblock %}