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

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

{% block body %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-edit"></i> {{ title }}
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Informations actuelles :</strong>
                        <ul class="mb-0 mt-2">
                            <li><strong>Montant mensuel :</strong> {{ existingRequest.monthlyAmount|number_format(2, ',', ' ') }}€</li>
                            <li><strong>Jour de prélèvement :</strong> {{ existingRequest.debitDay }}</li>
                            <li><strong>Statut :</strong>
                                {% if existingRequest.status == constant('App\\Entity\\RecurringPurchaseRequest::STATUS_ACTIVE') %}
                                    <span class="badge bg-success">Actif</span>
                                {% elseif existingRequest.status == constant('App\\Entity\\RecurringPurchaseRequest::STATUS_PENDING') %}
                                    <span class="badge bg-warning">En attente</span>
                                {% elseif existingRequest.status == constant('App\\Entity\\RecurringPurchaseRequest::STATUS_CANCELLED') %}
                                    <span class="badge bg-secondary">Annulé</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ existingRequest.status }}</span>
                                {% endif %}
                            </li>
                        </ul>
                    </div>

                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Important :</strong> Votre demande de modification sera soumise au trésorier pour validation.
                        Les modifications ne seront appliquées qu'après approbation.
                    </div>

                    {{ form_start(form, {'attr': {'class': 'needs-validation', 'novalidate': 'novalidate'}}) }}

                    <div class="mb-3">
                        {{ form_row(form.newAmount, {
                            'label': 'Nouveau montant mensuel (€)',
                            'attr': {
                                'class': 'form-control',
                                'placeholder': 'Laissez vide pour conserver ' ~ existingRequest.monthlyAmount|number_format(2, ',', ' ') ~ '€'
                            }
                        }) }}
                    </div>

                    <div class="mb-3">
                        {{ form_row(form.newDebitDay, {
                            'label': 'Nouveau jour de prélèvement',
                            'attr': {
                                'class': 'form-control'
                            },
                            'help': 'Jour actuel : ' ~ existingRequest.debitDay
                        }) }}
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-between mt-4">
                        <a href="{{ path('adherent_recurring_purchase') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></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">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-question-circle"></i> Comment ça marche ?
                    </h5>
                    <ol class="mb-0">
                        <li>Remplissez au moins un des deux champs (montant ou jour de prélèvement)</li>
                        <li>Votre demande sera envoyée au trésorier pour validation</li>
                        <li>Vous recevrez une notification une fois la demande traitée</li>
                        <li>Les modifications seront appliquées dès l'approbation</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Validation côté client
        (function() {
            'use strict';
            var forms = document.querySelectorAll('.needs-validation');
            Array.prototype.slice.call(forms).forEach(function(form) {
                form.addEventListener('submit', function(event) {
                    var newAmount = document.querySelector('input[name="modify_recurring_purchase_form[newAmount]"]');
                    var newDebitDay = document.querySelector('select[name="modify_recurring_purchase_form[newDebitDay]"]');

                    // Vérifier qu'au moins un champ est rempli
                    if ((!newAmount || !newAmount.value) && (!newDebitDay || !newDebitDay.value)) {
                        event.preventDefault();
                        event.stopPropagation();
                        alert('Vous devez modifier au moins le montant ou le jour de prélèvement.');
                        return false;
                    }

                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        })();
    </script>
{% endblock %}