{% extends 'base.html.twig' %}
{% block title %}Export comptable{% endblock %}
{% block body_class %}admin-layout{% endblock %}

{% block header_banner %}
<div class="page-banner page-banner-admin">
    <div class="container">
        <h1 class="page-title">Export comptable</h1>
        <p class="page-sub">Génération du CSV des paiements pour l'import en comptabilité</p>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="admin-layout-inner">
    {% include 'admin/_sidebar.html.twig' %}

    <div class="admin-content">
        <div class="export-page">

            {# ── Période et génération ── #}
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Période à exporter</h2>
                </div>
                <form method="get" action="{{ path('admin_export_comptable_telecharger') }}" id="form-export">
                    <div class="export-filters">
                        <div class="form-group">
                            <label for="date_debut">Date de début</label>
                            <input type="date" id="date_debut" name="date_debut">
                        </div>
                        <div class="form-group">
                            <label for="date_fin">Date de fin</label>
                            <input type="date" id="date_fin" name="date_fin">
                        </div>
                    </div>
                    <p class="export-hint">Laissez les deux champs vides pour exporter l'ensemble des paiements.</p>

                    <div class="export-actions">
                        <button type="submit" class="btn btn-primary btn-lg" id="btn-export">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                            Télécharger le CSV
                        </button>
                    </div>
                </form>
            </div>

            {# ── Contenu du fichier généré ── #}
            <div class="card card-help">
                <div class="card-header">
                    <h2 class="card-title">Contenu du fichier généré</h2>
                </div>
                <div class="columns-help">
                    <div class="col-required">
                        <h4>Paiements inclus</h4>
                        <ul>
                            <li>Paiements Stripe <code>réussis</code></li>
                            <li>Paiements <code>remboursés</code> (débit / crédit inversés)</li>
                        </ul>
                    </div>
                    <div class="col-optional">
                        <h4>Colonnes du CSV</h4>
                        <ul>
                            <li><code>Numpiece</code>, <code>Journal</code>, <code>Date Comptable</code></li>
                            <li><code>General</code>, <code>Auxiliaire</code>, <code>Libelle</code></li>
                            <li><code>Mode Paiement</code>, <code>Débit</code>, <code>Crédit</code>, <code>Etab</code></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}