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

{% block title %}{{ 'Cotiser par SEPA à'|trans }} {{ ssa_parameter.name }}{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0">
                        <i class="fa fa-university"></i> {{ 'Cotisation SEPA à'|trans }} {{ ssa_parameter.name }}
                    </h3>
                </div>
                <div class="card-body">
                    {# Informations sur la caisse SSA #}
                    <div class="bg-info bg-opacity-10 border border-info rounded p-3 mb-3 text-dark">
                        <h5>{{ 'Informations sur la caisse'|trans }}</h5>
                        <ul class="mb-0">
                            <li><strong>{{ 'Nom'|trans }} :</strong> {{ ssa_parameter.name }}</li>
                            <li><strong>{{ 'Description'|trans }} :</strong> {{ ssa_parameter.description|raw }}</li>
                            <li><strong>{{ 'Montant minimum'|trans }} :</strong> {{ ssa_parameter.minimum }}€</li>
                            <li><strong>{{ 'Montant maximum'|trans }} :</strong> {{ ssa_parameter.maximum }}€</li>
                            <li><strong>{{ 'Date de redistribution'|trans }} :</strong> {{ 'Le'|trans }} {{ ssa_parameter.executionDate }} {{ 'de chaque mois'|trans }}</li>
                        </ul>
                    </div>

                    {# Informations sur le mandat SEPA #}
                    <div class="bg-success bg-opacity-10 border border-success rounded p-3 mb-3 text-dark">
                        <h5>{{ 'Votre mandat SEPA actif'|trans }}</h5>
                        <ul class="mb-0">
                            <li><strong>{{ 'Référence'|trans }} :</strong> {{ mandate.mandateReference }}</li>
                            <li><strong>{{ 'IBAN'|trans }} :</strong> {{ mandate.maskedIban }}</li>
                            <li><strong>{{ 'Date de validation'|trans }} :</strong> {{ mandate.validatedAt|date('d/m/Y') }}</li>
                        </ul>
                    </div>

                    {# Formulaire de cotisation #}
                    <h5 class="mt-4">{{ 'Formulaire de cotisation'|trans }}</h5>
                    <p class="text-muted">
                        {{ 'En soumettant ce formulaire, vous créez une demande de cotisation par prélèvement SEPA automatique. Le trésorier devra valider votre demande avant que les prélèvements ne commencent.'|trans }}
                    </p>

                    {% if ssa_parameter.sepaMandatoryDebitDay is not null %}
                        <div class="alert alert-static alert-info">
                            <i class="fa fa-calendar-check"></i>
                            <strong>{{ 'Jour de prélèvement fixe'|trans }} :</strong>
                            {{ 'Le jour de prélèvement est fixé au'|trans }} <strong>{{ ssa_parameter.sepaMandatoryDebitDay }}</strong> {{ 'de chaque mois pour cette caisse SSA.'|trans }}
                        </div>
                    {% endif %}

                    {{ form_start(form, {'attr': {'class': 'mt-3', 'name': 'formSsaSepa'}}) }}
                        {# Radio buttons for predefined amounts #}
                        {% if form.montantradio is defined %}
                            <div class="montant-radio-container mb-3">
                                {{ form_row(form.montantradio, {
                                    'label_attr': {'class': 'radio-group-label'},
                                    'attr': {'class': 'kohinos-montant-radio'},
                                    'row_attr': {'class': 'montant-radio-row'}
                                }) }}
                            </div>
                        {% endif %}

                        {# Slider for amount selection #}
                        {% if form.montantslider is defined %}
                            <div class="mb-3">
                                {{ form_row(form.montantslider) }}
                            </div>
                        {% endif %}

                        {# Amount field (visible or hidden depending on configuration) #}
                        {% if form.montant is defined %}
                            {% if 'false' == KOH_SSA_SHOW_MANUEL_AMOUNT and 'false' == KOH_SSA_SHOW_SLIDER_AMOUNT and 'false' == KOH_SSA_SHOW_RADIO_AMOUNT %}
                                <div class="mb-3" style="max-width: 300px; margin: 0 auto; display: none;">
                                    {{ form_row(form.montant) }}
                                </div>
                            {% else %}
                                <div class="mb-3" style="max-width: 300px; margin: 0 auto;">
                                    {{ form_row(form.montant) }}
                                </div>
                            {% endif %}
                        {% endif %}

                        {# Display selected amount if radio/slider/manual is active #}
                        {% if 'true' == KOH_SSA_SHOW_MANUEL_AMOUNT or form.montantslider is defined or form.montantradio is defined %}
                            <p class="montant-display text-center mb-3">
                                <b>{{ 'Montant choisi'|trans }} : <span class="achat_monnaie_montant_choisi">{{ ssa_parameter.minimum|number_format(2, ',', ' ') }}€</span></b>
                            </p>
                        {% endif %}

                        {# Debit day selection (only if not mandatory) #}
                        {% if ssa_parameter.sepaMandatoryDebitDay is null %}
                            <div class="mb-3">
                                {{ form_row(form.debitDay) }}
                            </div>
                        {% endif %}

                        <div class="bg-warning bg-opacity-10 border border-warning rounded p-3 mb-3 text-dark">
                            <i class="fa fa-exclamation-triangle"></i>
                            <strong>{{ 'Important'|trans }} :</strong>
                            {{ 'Le prélèvement sera effectué chaque mois à la date configurée par la caisse. Vous serez notifié par email avant chaque prélèvement.'|trans }}
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ path('index') }}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left"></i> {{ 'Annuler'|trans }}
                            </a>
                            {{ form_widget(form.submit) }}
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}