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

{% block title %}Modifier ma cotisation SSA{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-edit"></i> Modifier ma cotisation SSA
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-static alert-info">
                        <h5><i class="fas fa-info-circle"></i> Informations sur votre cotisation actuelle</h5>
                        <ul class="mb-0">
                            <li><strong>Caisse SSA :</strong> {{ ssa_parameter.name }}</li>
                            <li><strong>Montant actuel :</strong> {{ subscription.amount|number_format(2, ',', ' ') }} €</li>
                            <li><strong>Statut :</strong>
                                {% if subscription.isValidated %}
                                    <span class="badge bg-success">Validée</span>
                                {% elseif subscription.isPending %}
                                    <span class="badge bg-warning">En attente</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ subscription.status }}</span>
                                {% endif %}
                            </li>
                            <li><strong>Année :</strong> {{ subscription.year }}</li>
                        </ul>
                    </div>

                    <div class="alert alert-static alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Important :</strong> Votre demande de modification sera envoyée au trésorier pour validation.
                        Le nouveau montant sera appliqué après validation.
                    </div>

                    <div class="mb-4">
                        <h5>Limites de la caisse</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="p-3 border rounded bg-light">
                                    <strong>Minimum :</strong> {{ ssa_parameter.minimum|number_format(2, ',', ' ') }} €
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 border rounded bg-light">
                                    <strong>Maximum :</strong>
                                    {% if ssa_parameter.maximum %}
                                        {{ ssa_parameter.maximum|number_format(2, ',', ' ') }} €
                                    {% else %}
                                        Illimité
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    {{ form_start(form, {'attr': {'class': 'needs-validation', 'novalidate': 'novalidate'}}) }}
                        <div class="alert alert-static alert-light border">
                            <h6><i class="fas fa-calculator"></i> Aperçu de la modification</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>Montant actuel :</strong><br>
                                    <span class="text-muted fs-4">{{ subscription.amount|number_format(2, ',', ' ') }} €</span>
                                </div>
                                <div class="col-md-6">
                                    <strong>Nouveau montant demandé :</strong><br>
                                    <span class="text-primary fs-4" id="preview-amount">--,-- €</span>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-between mt-4">
                            <a href="{{ path('index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Retour
                            </a>
                            {{ form_widget(form.submit, {
                                'label': 'Demander la modification',
                                'attr': {'class': 'btn btn-primary'}
                            }) }}
                        </div>

                    {{ form_end(form) }}
                </div>
            </div>

            <div class="card mt-3 border-info">
                <div class="card-body">
                    <h6 class="card-title"><i class="fas fa-question-circle"></i> Que se passe-t-il ensuite ?</h6>
                    <ol class="mb-0">
                        <li>Votre demande est envoyée au trésorier</li>
                        <li>Le trésorier examine et valide (ou rejette) votre demande</li>
                        <li>Vous recevez une notification par email de la décision</li>
                        <li>Si validée, le nouveau montant s'applique dès le prochain prélèvement</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const amountInput = document.querySelector('input[name="modify_subscription_amount_form[newAmount]"]');
    const previewAmount = document.getElementById('preview-amount');

    if (amountInput && previewAmount) {
        amountInput.addEventListener('input', function() {
            const value = parseFloat(this.value);
            if (!isNaN(value) && value > 0) {
                previewAmount.textContent = value.toFixed(2).replace('.', ',') + ' €';
                previewAmount.classList.add('text-success');
                previewAmount.classList.remove('text-primary');
            } else {
                previewAmount.textContent = '--,-- €';
                previewAmount.classList.remove('text-success');
                previewAmount.classList.add('text-primary');
            }
        });
    }
});
</script>

{% endblock %}