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

{% block content %}
	{% if app.request.session.has('_ssaSubmit') and item is not null %}
		{% include '@kohinos/solidoume/modale_confirmation_ssa.html.twig' %}
	{% endif %}

	<div class='container homepage'>
		{% include '@kohinos/block/breadcrumb.html.twig' with {'label' : param.name } %}
		<div class="card mx-auto mt-2">
			<div class="card-header">{{ param.name }}</div>
			<div class="card-body">
				<p>{{ param.descriptionCotisation|raw }}</p><br/><br/>

				{# Affichage de la participation SEPA existante #}
				{% if sepaItem is defined and sepaItem %}
					<div class="bg-info bg-opacity-10 border border-info rounded p-3 mb-4 text-dark">
						<h5><i class="fa fa-credit-card"></i> Votre cotisation SEPA à cette caisse</h5>
						<ul class="mb-0">
							<li><strong>Montant mensuel :</strong> {{ sepaItem.amount|number_format(2, ',', ' ') }}€</li>
							<li><strong>Mode de paiement :</strong> Prélèvement SEPA (euros)</li>
							<li><strong>Statut :</strong> <span class="badge bg-success">Actif</span></li>
							<li><strong>Prochains prélèvements :</strong> Le {{ ssa.executionDate }} de chaque mois</li>
							{% if sepaItem.isRecurrent %}
								<li><strong>Type :</strong> Paiement récurrent mensuel</li>
							{% endif %}
						</ul>
						<div class="mt-3 alert alert-static alert-warning mb-0">
							<i class="fa fa-info-circle"></i>
							<strong>Vous participez déjà à cette caisse par prélèvement SEPA automatique.</strong><br>
							Les prélèvements sont actifs et seront effectués chaque mois. Pour modifier ou annuler votre participation, veuillez contacter le trésorier.
						</div>
					</div>
				{% endif %}

				{# Restriction configurable : adhérent avec participation non archivée mais sans cotisation
				   individuelle paramétrée. Activée depuis SolidoumeParamAdmin pour les types
				   'suggested' et 'fixed_min'. Le message est défini par l'admin (HTML CKEditor). #}
				{% if cotisationRestrictionActive is defined and cotisationRestrictionActive %}
					<div class="alert bg-warning d-flex align-items-start gap-3 text-black h5 p-4 bg-opacity-75" role="alert">
						<i class="fa fa-lock fa-lg mt-1 flex-shrink-0"></i>
						<div>
							{{ cotisationRestrictionMessage|raw }}
							<br><span class="text-muted small">Votre solde reste utilisable normalement pour vos transactions.</span>
						</div>
					</div>
				{% endif %}

				{# Formulaire de participation - masqué si participation SEPA active existe #}
				{% if form is not null and (sepaItem is not defined or not sepaItem) %}
					{% if effectiveMinimum is defined %}
						<div class="alert alert-primary alert-static" role="alert">
							{% if hasItemSpecificMinimum %}
								{{ 'Le montant minimum de cotisation est de %min% €.'|trans({'%min%': effectiveMinimum|number_format(2, ',', ' ')}) }}
							{% else %}
								{{ 'Le montant minimum de cotisation est de %min% €.'|trans({'%min%': ssa.minimum|number_format(2, ',', ' ')}) }}
							{% endif %}
						</div>
					{% endif %}

					{# Zone montant recommandé - uniquement pour cotisationType = 'suggested' #}
					{% if ssa.cotisationType == 'suggested' %}
						{% set suggestedAmt = effectiveMinimum %}
						{% set tolerancePct = ssa.cotisationTolerancePercent ?? 0 %}
						{% set minAllowed = suggestedAmt * (1 - tolerancePct / 100) %}
						<div class="ssa-suggested-banner card mb-4 border-0 shadow-sm" style="background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border-left: 4px solid #43a047 !important;">
							<div class="card-body py-3 px-4">
								<div class="d-flex align-items-center flex-wrap gap-3">
									<div class="flex-shrink-0 text-center" style="min-width:80px;">
										<div class="display-6 fw-bold text-success lh-1">{{ suggestedAmt|number_format(0, ',', ' ') }}€</div>
										<div class="small text-muted fw-semibold mt-1">recommandé</div>
									</div>
									<div class="flex-grow-1">
										<h6 class="fw-bold text-success mb-1"><i class="fa fa-star me-1"></i> Cotisation recommandée</h6>
										<p class="mb-1 text-muted small">
											Ce montant a été calculé pour permettre à la caisse de fonctionner équitablement pour tous les participants.
										</p>
										{% if tolerancePct > 0 %}
											<div class="d-flex align-items-center gap-2 flex-wrap mt-2">
												<span class="badge bg-warning text-white p-2"><i class="fa fa-info-circle me-1"></i>Minimum accepté : {{ minAllowed|number_format(2, ',', ' ') }}€</span>
												<span class="text-muted small">({{ suggestedAmt|number_format(2, ',', ' ') }}€ − {{ tolerancePct|number_format(0) }}%)</span>
											</div>
										{% endif %}
									</div>
								</div>
							</div>
						</div>
					{% endif %}

					<div class="mx-auto text-center" style="max-width: 800px;">
						{{form_start(form)}}
							<input type="hidden" name="referer" value="{{app.request.headers.get('referer')}}"/>
							<input type="hidden" id="{{form.vars.id~'_balance'}}" name="{{form.vars.id~'_balance'}}" value="{{app.user.adherent.getAccountWithCurrency(constant('App\\Enum\\CurrencyEnum::CURRENCY_EMLC')).balance}}"/>
							{{ form_row(form.user) }}
							{{ form_row(form.adherent) }}
							{% if form.montantradio is defined %}
								<div class="montant-radio-container">
									{{ form_row(form.montantradio, {'label_attr': {'class': 'radio-group-label'}, 'attr': {'class': 'kohinos-montant-radio'}, 'row_attr': {'class': 'montant-radio-row'}}) }}
								</div>
							{% endif %}
							{% if form.montant is defined %}
                                {# Stepper +/- pour tous les modes avec champ montant #}
                                {% set suggestedVal = effectiveMinimum %}
                                {% set toleranceVal = ssa.cotisationTolerancePercent ?? 0 %}
                                {% set minAllowedVal = ssa.cotisationType == 'suggested' ? suggestedVal * (1 - toleranceVal / 100) : effectiveMinimum %}
                                {% if 'false' == KOH_SSA_SHOW_MANUEL_AMOUNT and 'false' == KOH_SSA_SHOW_SLIDER_AMOUNT and 'false' == KOH_SSA_SHOW_RADIO_AMOUNT and ssa.cotisationType != 'suggested' %}
                                    {# Montant caché (tous les contrôles désactivés, pas de stepper) #}
                                    {{ form_row(form.montant, {row_attr:{style: 'max-width: 300px;margin: 0 auto;display: none;'}}) }}
                                {% else %}
                                    {# Stepper visible pour tous les autres modes #}
                                    {% form_theme form with ['@kohinos/solidoume/_ssa_stepper_theme.html.twig'] %}
                                    <div class="ssa-amount-stepper mb-4" style="max-width: 340px; margin: 0 auto;">
                                        {{ form_label(form.montant, 'Votre participation', {label_attr: {class: 'form-label fw-semibold text-center d-block mb-2 text-success'}}) }}
                                        <div class="ssa-stepper-group shadow-sm">
                                            <button type="button" class="ssa-stepper-btn ssa-amount-down" tabindex="-1" title="Diminuer de 1 €">
                                                <i class="fa fa-minus"></i>
                                            </button>
                                            {{ form_widget(form.montant, {
                                                attr: {
                                                    class: 'ssa-stepper-input ssa-amount-input achatmonnaie-montant',
                                                    step: '1',
                                                    'data-suggested': suggestedVal,
                                                    'data-min-allowed': minAllowedVal,
                                                    'data-tolerance': toleranceVal,
                                                    'data-cotisation-type': ssa.cotisationType
                                                }
                                            }) }}
                                            <span class="ssa-stepper-unit">€</span>
                                            <button type="button" class="ssa-stepper-btn ssa-amount-up" tabindex="-1" title="Augmenter de 1 €">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                        <div id="ssa-amount-feedback" class="mt-2 small fw-semibold text-center rounded py-1" style="min-height: 28px;"></div>
                                        {{ form_errors(form.montant) }}
                                    </div>
                                {% endif %}
                            {% endif %}
							{% if form.montantslider is defined %}
								{{ form_row(form.montantslider) }}
							{% endif %}

							{% if form.isRecurrent is defined %}
								{{ form_row(form.isRecurrent) }}
							{% endif %}
                            {% if (form.paiementDate is defined) %}
								{{ form_row(form.paiementDate) }}
							{% endif %}
							{% if (form.payNow is defined) %}
								{{ form_row(form.payNow) }}
							{% endif %}
							{% if form.autopayWithSsa is defined %}
								{{ form_row(form.autopayWithSsa) }}
							{% endif %}
							{% if form.canAutoCompleteFromMainAccount is defined %}
								{{ form_row(form.canAutoCompleteFromMainAccount) }}
							{% endif %}
							{% if form.isDonation is defined %}
								{{ form_row(form.isDonation) }}
							{% endif %}
							{% if form.householdSize is defined %}
								{{ form_row(form.householdSize) }}
							{% endif %}
							{% if form.paymentMethod is defined %}
								{{ form_row(form.paymentMethod) }}
							{% endif %}
                            {% if form.don is defined %}
                                <hr/>
                                {{ form_row(form.don, {row_attr:{style: 'max-width: 200px;margin: 0 auto;'}}) }}
                                <hr/>
                                <p class="total-display"><b>{{ 'TOTAL A PAYER'|trans }} : <span class="achat_monnaie_montant_total"></span></b></p>
                            {% endif %}

							<div class='row mt-4'>
							<p class='text-danger my-2' id='{{form.vars.id~'_error'}}' style="display:none;">
								{{ 'Votre solde (%balance% e%symbol%) est inférieur au montant'|trans({'%balance%': app.user.adherent.getAccountWithCurrency(constant('App\\Enum\\CurrencyEnum::CURRENCY_EMLC')).balance, '%symbol%': KOH_MLC_SYMBOL|default('Mlc') }) }}
							</p>
							{% if getSsaParticipation(ssa) == null or ssa.enabled == false %}
                                <div class='col-12'>
                                    {{ form_widget(form.save) }}
                                </div>
                            {% else %}
                                {% set item = getSsaParticipation(ssa) %}
                                {% if item is not null and not item.isRecurrent %}
                                    <div class='col-6'>
                                        <a class='btn btn-outline-danger' href='{{ path('ssa_unsubscribe', {'slug': ssa.slug}) }}'>Se désinscrire</a>
                                    </div>
                                    <div class='col-6 {{ ssa.cotisationType == 'suggested' ? 'ssa-save-hidden' : '' }}'>
                                        {{ form_widget(form.save, {label: 'Modifier ma participation'}) }}
                                    </div>
                                {% endif %}
                            {% endif %}
						</div>
						{{form_end(form)}}
					</div>
				{% endif %}
		 	</div>
		</div>
	</div>
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	{{ encore_entry_link_tags('ssa-stepper') }}
{% endblock %}

{% block js %}
	{% if app.request.session.has('_ssaSubmit') and item is not null %}
		<script>
			$(document).ready(function() { $("#confirmSolidoumeModal").modal('show'); });
		</script>
	{% endif %}
{% endblock js %}