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

{% block title %}Mandat SEPA{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            {# Info message #}
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                <h4 class="alert-heading"><i class="fas fa-info-circle"></i> Mandat SEPA</h4>
                <p class="mb-0">Téléchargez votre mandat SEPA au format de votre choix.</p>
            </div>

            {# Download card #}
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-download"></i> Téléchargez votre mandat SEPA</h5>
                </div>
                <div class="card-body">
                    <p class="lead">Choisissez le format qui vous convient :</p>

                    <div class="row mt-4">
                        {# PDF Download #}
                        <div class="col-md-6 mb-3">
                            <div class="card h-100 border-primary">
                                <div class="card-body text-center">
                                    <i class="fas fa-file-pdf fa-4x text-danger mb-3"></i>
                                    <h5 class="card-title">Format PDF</h5>
                                    <p class="card-text">Téléchargez le mandat au format PDF pour l'imprimer</p>
                                    <a href="{{ path('prestataire_sepa_mandate_pdf', {id: mandate.id}) }}"
                                       class="btn btn-danger btn-block">
                                        <i class="fas fa-file-pdf"></i> Télécharger PDF
                                    </a>
                                </div>
                            </div>
                        </div>

                        {# HTML Print #}
                        <div class="col-md-6 mb-3">
                            <div class="card h-100 border-info">
                                <div class="card-body text-center">
                                    <i class="fas fa-print fa-4x text-info mb-3"></i>
                                    <h5 class="card-title">Version imprimable</h5>
                                    <p class="card-text">Ouvrez dans un nouvel onglet pour imprimer directement</p>
                                    <a href="{{ path('prestataire_sepa_mandate_print', {id: mandate.id}) }}"
                                       target="_blank"
                                       class="btn btn-info btn-block">
                                        <i class="fas fa-print"></i> Version imprimable
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Instructions for pending mandates #}
                    {% if mandate.status == constant('App\\Entity\\SepaMandate::STATUS_PENDING') %}
                    <div class="alert alert-static alert-warning mt-4 alert-dismissible fade show" role="alert">
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        <h5><i class="fas fa-info-circle"></i> Prochaines étapes</h5>
                        <ol class="mb-0">
                            <li><strong>Téléchargez</strong> le mandat SEPA (PDF ou HTML)</li>
                            <li><strong>Imprimez</strong> le document</li>
                            <li><strong>Signez</strong> le mandat dans la zone prévue</li>
                            <li><strong>Joignez</strong> un RIB (Relevé d'Identité Bancaire)</li>
                            <li><strong>Envoyez</strong> le tout au trésorier ou déposez-le à un comptoir</li>
                            <li><strong>Attendez</strong> la validation par le trésorier</li>
                        </ol>
                    </div>
                    {% endif %}

                    {# Mandate details #}
                    <div class="card mt-4 bg-light">
                        <div class="card-body">
                            <h6 class="card-title"><i class="fas fa-info-circle"></i> Détails de votre mandat</h6>
                            <dl class="row mb-0">
                                <dt class="col-sm-4">IBAN :</dt>
                                <dd class="col-sm-8"><code>{{ mandate.maskedIban }}</code></dd>

                                <dt class="col-sm-4">Titulaire :</dt>
                                <dd class="col-sm-8">{{ mandate.accountHolderName }}</dd>

                                <dt class="col-sm-4">Statut :</dt>
                                <dd class="col-sm-8">
                                    {% if mandate.status == constant('App\\Entity\\SepaMandate::STATUS_ACTIVE') %}
                                        <span class="badge bg-success">Actif</span>
                                    {% elseif mandate.status == constant('App\\Entity\\SepaMandate::STATUS_PENDING') %}
                                        <span class="badge bg-warning">En attente de validation</span>
                                    {% elseif mandate.status == constant('App\\Entity\\SepaMandate::STATUS_CANCELLED') %}
                                        <span class="badge bg-secondary">Annulé</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ mandate.status }}</span>
                                    {% endif %}
                                </dd>

                                <dt class="col-sm-4">Créé le :</dt>
                                <dd class="col-sm-8">{{ mandate.createdAt|date('d/m/Y à H:i') }}</dd>
                            </dl>
                        </div>
                    </div>

                    {# Actions #}
                    <div class="mt-4 text-center">
                        <a href="{{ path('index') }}" class="btn btn-secondary">
                            <i class="fas fa-home"></i> Retour à l'accueil
                        </a>
                    </div>
                </div>
            </div>

            {# FAQ #}
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-question-circle"></i> Questions fréquentes</h5>
                </div>
                <div class="card-body">
                    <h6>Je n'ai pas d'imprimante, que faire ?</h6>
                    <p>Vous pouvez télécharger le PDF et l'envoyer par email à un proche qui pourra l'imprimer pour vous, ou vous rendre dans un espace public avec imprimante (médiathèque, mairie, etc.).</p>

                    <h6>Dois-je imprimer en couleur ?</h6>
                    <p>Non, une impression en noir et blanc suffit.</p>

                    <h6>Puis-je télécharger le mandat plus tard ?</h6>
                    <p>Oui, vous pouvez accéder à tout moment à vos mandats depuis le bloc "Mandats SEPA" dans votre espace prestataire.</p>

                    <h6>Combien de temps prend la validation ?</h6>
                    <p>Cela dépend de la disponibilité du trésorier. En général, comptez quelques jours après réception de votre mandat signé.</p>

                    <h6>Pourquoi ai-je besoin d'un mandat SEPA en tant que prestataire ?</h6>
                    <p>Le mandat SEPA vous permet de cotiser automatiquement chaque année via prélèvement bancaire. C'est plus pratique et vous ne risquez pas d'oublier de renouveler votre cotisation.</p>
                </div>
            </div>

            {# Actions #}
            <div class="mt-4 d-flex justify-content-between">
                <a href="{{ path('index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Retour à mon espace
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}