{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Modifier l'abonnement | {{ abonnement.reference }}{% endblock %}

{% block body %}
<div class="container-fluid py-4 px-4">

    {# --- HEADER ACTION --- #}
    <div class="row align-items-center mb-4">
        <div class="col-md-6">
            <h2 class="h4 fw-bold text-dark mb-1">Ajuster la période</h2>
            <p class="text-muted small mb-0">Référence : <span class="badge bg-light text-dark border">{{ abonnement.reference }}</span></p>
        </div>
        <div class="col-md-6 text-md-end mt-3 mt-md-0">
            <a href="{{ path('app_entreprise_abonnement_index') }}" class="btn btn-outline-secondary btn-sm px-3 shadow-sm" style="border-radius: 8px;">
                <i class="fas fa-arrow-left me-2"></i>Retour à la liste
            </a>
        </div>
    </div>

    {% include 'flash_messages.html.twig' %}

    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-white py-3 border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="icon-shape bg-soft-info text-info me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: rgba(0, 188, 212, 0.1);">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                        <h5 class="mb-0 fw-bold">Paramètres de souscription</h5>
                    </div>
                </div>
                
                <div class="card-body p-4">
                    <div class="alert alert-info border-0 rounded-4 small d-flex align-items-start mb-4">
                        <i class="fas fa-info-circle me-3 mt-1 fs-5"></i>
                        <div>
                            Vous modifiez l'abonnement pour le pack <strong>{{ abonnement.abonnement.titre }}</strong>. 
                            Veillez à ce que la date de fin soit supérieure à la date de début.
                        </div>
                    </div>

                    <form method="post">
                        <div class="row g-3">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-uppercase text-muted">Date de début</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-end-0"><i class="fas fa-play text-success small"></i></span>
                                    <input type="date" name="dateDebut" class="form-control bg-light border-start-0" 
                                           value="{{ abonnement.dateDebut|date('Y-m-d') }}" required>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-uppercase text-muted">Date de fin</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-end-0"><i class="fas fa-stop text-danger small"></i></span>
                                    <input type="date" name="dateFin" class="form-control bg-light border-start-0" 
                                           value="{{ abonnement.dateFin|date('Y-m-d') }}" required>
                                </div>
                            </div>
                        </div>

                        {# --- RÉCAPITULATIF FINANCIER --- #}
                        <div class="bg-light p-3 rounded-4 mb-4 mt-2">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small text-muted">Statut de la ligne :</span>
                                <span class="badge {% if abonnement.statut == 'ACTIF' %}bg-soft-success text-success{% else %}bg-soft-warning text-warning{% endif %}">
                                    {{ abonnement.statut }}
                                </span>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary py-2 fw-bold shadow-sm" style="border-radius: 10px;">
                                <i class="fas fa-check-circle me-2"></i>Enregistrer les modifications
                            </button>
                            <a href="{{ path('app_entreprise_abonnement_index') }}" class="btn btn-link text-muted small text-decoration-none text-center">
                                Annuler et quitter
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {# --- SIDEBAR INFO --- #}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 bg-dark text-white p-4">
                <h6 class="fw-bold mb-3 text-primary"><i class="fas fa-shield-alt me-2"></i>Contrôle d'intégrité</h6>
                <p class="small opacity-75">
                    Toute modification de date sera enregistrée dans les logs système. Assurez-vous que cette période correspond aux justificatifs de paiement reçus.
                </p>
                <hr class="opacity-25">
                <div class="d-flex align-items-center">
                    <i class="fas fa-user-shield me-2 text-info"></i>
                    <span class="small">Action réservée à l'administration</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}