{% extends '@kohinos/common/layout.html.twig' %}

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

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <h1>{{ title }}</h1>

            {% if existingMandate %}
                <div class="bg-info bg-opacity-10 border border-info rounded p-3 mb-3 text-dark">
                    <h5><i class="fas fa-info-circle"></i> Votre mandat SEPA actuel</h5>
                    <p><strong>IBAN :</strong> {{ existingMandate.maskedIban }}</p>
                    <p><strong>Titulaire :</strong> {{ existingMandate.accountHolderName }}</p>
                    <p><strong>Statut :</strong>
                        {% if existingMandate.isPending %}
                            <span class="badge badge-warning">En attente de validation</span>
                        {% elseif existingMandate.isActive %}
                            <span class="badge badge-success">Actif</span>
                        {% endif %}
                    </p>
                    {% if existingMandate.isActive %}
                        <p><strong>Référence UMR :</strong> {{ existingMandate.mandateReference }}</p>
                        <p><strong>Validé le :</strong> {{ existingMandate.validatedAt|date('d/m/Y') }}</p>
                    {% endif %}
                </div>

                <div class="bg-warning bg-opacity-10 border border-warning rounded p-3 mb-3 text-dark">
                    <h5><i class="fas fa-exclamation-triangle"></i> Changement d'IBAN</h5>
                    <p>Si vous souhaitez modifier votre IBAN, remplissez le formulaire ci-dessous. Cela créera un nouveau mandat SEPA qui devra être validé par le trésorier. L'ancien mandat sera automatiquement annulé.</p>
                </div>
            {% else %}
                <div class="bg-info bg-opacity-10 border border-info rounded p-3 mb-3 text-dark">
                    <h5><i class="fas fa-info-circle"></i> Qu'est-ce qu'un mandat SEPA ?</h5>
                    <p>Le mandat SEPA (Single Euro Payments Area) vous permet d'autoriser le prélèvement automatique sur votre compte bancaire pour :</p>
                    <ul>
                        <li>Vos cotisations aux caisses SSA</li>
                        <li>Vos achats de monnaie locale</li>
                    </ul>
                    <p><strong>Important :</strong> Après avoir créé votre mandat en ligne, vous devrez télécharger, signer et envoyer le formulaire SEPA officiel accompagné de votre RIB au trésorier ou le déposer à un comptoir.</p>
                </div>
            {% endif %}

            <div class="card">
                <div class="card-header">
                    <h5>{{ existingMandate ? 'Modifier mon IBAN' : 'Créer mon mandat SEPA' }}</h5>
                </div>
                <div class="card-body">
                    {{ form_start(form) }}
                        <div class="form-group">
                            {{ form_label(form.iban) }}
                            {{ form_widget(form.iban) }}
                            {{ form_help(form.iban) }}
                            {{ form_errors(form.iban) }}
                        </div>

                        <div class="form-group">
                            {{ form_label(form.bic) }}
                            {{ form_widget(form.bic) }}
                            {{ form_help(form.bic) }}
                            {{ form_errors(form.bic) }}
                        </div>

                        <div class="form-group">
                            {{ form_label(form.accountHolderName) }}
                            {{ form_widget(form.accountHolderName) }}
                            {{ form_help(form.accountHolderName) }}
                            {{ form_errors(form.accountHolderName) }}
                        </div>

                        <div class="bg-warning bg-opacity-10 border border-warning rounded p-3 mt-3 text-dark">
                            <p><strong>Prochaines étapes :</strong></p>
                            <ol>
                                <li>Soumettez ce formulaire en ligne</li>
                                <li>Téléchargez le <a href="#" class="text-primary">formulaire SEPA officiel</a></li>
                                <li>Signez-le et joignez votre RIB/IBAN</li>
                                <li>Envoyez-le au trésorier ou déposez-le à un comptoir</li>
                                <li>Attendez la validation par le trésorier</li>
                            </ol>
                        </div>

                        <div class="form-group text-center mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> {{ existingMandate ? 'Mettre à jour mon IBAN' : 'Créer mon mandat SEPA' }}
                            </button>
                            <a href="{{ path('index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Retour
                            </a>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-header">
                    <h5><i class="fas fa-question-circle"></i> Questions fréquentes</h5>
                </div>
                <div class="card-body">
                    <h6>Mes données sont-elles sécurisées ?</h6>
                    <p>Oui, votre IBAN est stocké de manière sécurisée et seules les personnes autorisées (trésorier) peuvent le consulter.</p>

                    <h6>Puis-je annuler mon mandat SEPA ?</h6>
                    <p>Oui, vous pouvez annuler vos prélèvements automatiques à tout moment depuis les pages de gestion de cotisation ou d'achat mensuel.</p>

                    <h6>Quand seront effectués les prélèvements ?</h6>
                    <p>Les prélèvements seront effectués le {{ KOH_SEPA_ANNUAL_DEBIT_DATE_FORMAT|default('1er Janvier') }} de chaque année.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}