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

{% block title %}Mon Abonnement | Dashboard{% endblock %}



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

    {# --- HEADER --- #}
    <div class="row align-items-center mb-4">
        <div class="col-md-6">
            <h3 class="page-header page-header-top mb-1">Mon Portefeuille</h3>
            <p class="text-muted small mb-0">Abonnement & Facturation</p>
            
        </div>
        <div class="col-md-6 text-md-end mt-3 mt-md-0">
            <a href="{{ path('app_entreprise_abonnement_plans') }}" class="btn btn-primary px-4 shadow-sm" style="border-radius: 10px;">
                <i class="fas fa-layer-group me-2"></i>Voir les Plans
            </a>
        </div>
    </div>

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

    {# --- KPI CARDS --- #}
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card stat-card p-3 border-start border-primary border-4">
                <div class="d-flex align-items-center">
                    <div class="icon-shape bg-primary text-white"><i class="fas fa-gem fa-lg"></i></div>
                    <div class="ms-3">
                        <small class="text-muted d-block">Plan Actuel</small>
                        <span class="h5 fw-bold mb-0">{{ abonnementActuel ? abonnementActuel.abonnement.titre : 'Aucun' }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card p-3 border-start border-info border-4">
                <div class="d-flex align-items-center">
                    <div class="icon-shape bg-info text-white"><i class="fas fa-wallet fa-lg"></i></div>
                    <div class="ms-3">
                        <small class="text-muted d-block">Solde Portefeuille</small>
                        <span class="h5 fw-bold mb-0 text-info">{{ app.user.entreprise.soldeCredit|number_format(0, ',', ' ') }} F.CFA</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card p-3 border-start border-success border-4">
                <div class="d-flex align-items-center">
                    <div class="icon-shape bg-success text-white"><i class="fas fa-calendar-check fa-lg"></i></div>
                    <div class="ms-3">
                        <small class="text-muted d-block">Fin d'engagement</small>
                        <span class="h5 fw-bold mb-0">
                            {{ abonnementActuel ? abonnementActuel.dateFin|date('d M Y') : '-' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card p-3 border-start border-warning border-4">
                <div class="d-flex align-items-center">
                    <div class="icon-shape bg-warning text-white"><i class="fas fa-hourglass-half fa-lg"></i></div>
                    <div class="ms-3">
                        <small class="text-muted d-block">Temps Restant</small>
                        <span class="h5 fw-bold mb-0">
                            {% if abonnementActuel %}
                                {% set diff = date(abonnementActuel.dateFin).diff(date('now')) %}
                                {{ diff.days }} jours
                            {% else %}0 jours{% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# --- HISTORIQUE & TABLE --- #}
    <div class="card border-0 shadow-sm" style="border-radius: 15px;">
        <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold"><i class="fas fa-history me-2 text-primary"></i>Historique des souscriptions</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 table-custom">
                    <thead>
                        <tr>
                            <th class="ps-4">Référence</th>
                            <th>Offre & Coût</th>
                            <th>Période d'engagement</th>
                            <th>Statut</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {# Tri optimisé : 1=Actuel, 2=Programmé, 3=Expiré/Autre, 4=Annulé #}
                        {% set sortedHistorique = historique|sort((a, b) => 
                            ( (a.statut in ['ACTIF', 'RENOUVELE'] and a.dateDebut|date('Y-m-d') <= "now"|date('Y-m-d') and a.dateFin|date('Y-m-d') >= "now"|date('Y-m-d')) ? 1 : 
                              (a.statut == 'ACTIF' and a.dateDebut|date('Y-m-d') > "now"|date('Y-m-d') ? 2 : 
                              (a.statut == 'ANNULE' ? 4 : 3)) )
                            <=> 
                            ( (b.statut in ['ACTIF', 'RENOUVELE'] and b.dateDebut|date('Y-m-d') <= "now"|date('Y-m-d') and b.dateFin|date('Y-m-d') >= "now"|date('Y-m-d')) ? 1 : 
                              (b.statut == 'ACTIF' and b.dateDebut|date('Y-m-d') > "now"|date('Y-m-d') ? 2 : 
                              (b.statut == 'ANNULE' ? 4 : 3)) )
                        ) %}

                        {% for item in sortedHistorique %}
                            {% set today = "now"|date('Y-m-d') %}
                            {% set isExpired = item.dateFin and item.dateFin|date('Y-m-d') < today %}
                            {% set isFuture = item.dateDebut|date('Y-m-d') > today %}
                            {% set isActuallyActive = (item.statut in ['ACTIF', 'RENOUVELE']) and not isExpired and not isFuture %}
                            
                            <tr class="{% if isActuallyActive %}row-active{% elseif isFuture and item.statut == 'ACTIF' %}row-future{% endif %}">
                                <td class="ps-4">
                                    <span class="text-dark fw-bold small">{{ item.reference }}</span>
                                    {% if isActuallyActive %}
                                        <span class="badge-current">ACTUEL</span>
                                    {% endif %}
                                    {% if item.statut == 'ACTIF' and isFuture %}
                                        <br><span class="badge bg-info" style="font-size: 0.6rem;">Programmé</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="fw-bold text-dark">{{ item.abonnement.titre }}</span><br>
                                    <small class="text-muted">
                                        {% set total = item.montantPaye + item.montantViaCredit %}
                                        {{ total|number_format(0, ',', ' ') }} F.CFA
                                        {% if item.montantViaCredit > 0 %}
                                            <i class="fas fa-wallet ms-1 text-info" title="Payé partiellement ou totalement via Wallet"></i>
                                        {% endif %}
                                    </small>
                                </td>
                                <td>
                                    <div class="small text-dark">
                                        <i class="far fa-calendar-alt text-muted me-1"></i> {{ item.dateDebut|date('d/m/Y') }} 
                                        <i class="fas fa-long-arrow-alt-right mx-1 text-muted small"></i> 
                                        {{ item.dateFin ? item.dateFin|date('d/m/Y') : '∞' }}
                                    </div>
                                </td>
                                <td>
                                    {% if item.statut == 'ACTIF' %}
                                        {% if isFuture %}
                                            <span class="status-pill bg-soft-info">À venir</span>
                                        {% else %}
                                            <span class="status-pill bg-soft-success">En cours</span>
                                        {% endif %}
                                    {% elseif item.statut == 'RENOUVELE' %}
                                        {% if not isExpired %}
                                            <span class="status-pill bg-soft-success">En cours (Prolongé)</span>
                                        {% else %}
                                            <span class="status-pill bg-soft-secondary">Renouvelé</span>
                                        {% endif %}
                                    {% elseif item.statut == 'ANNULE' %}
                                        <span class="status-pill bg-soft-danger" title="Abonnement annulé et converti en avoir">Annulé (Avoir)</span>
                                    {% elseif isExpired %}
                                        <span class="status-pill bg-light text-muted">Expiré</span>
                                    {% else %}
                                        <span class="status-pill bg-soft-warning">{{ item.statut }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-end pe-4">
                                    <div class="d-flex justify-content-end gap-2">
                                        <a href="{{ path('app_entreprise_abonnement_show', {id: item.id}) }}" 
                                           class="btn btn-action btn-sm">
                                            <i class="fas fa-search-plus"></i>
                                        </a>
                                        {# Proposer le renouvellement seulement si c'est l'actif ou un futur proche du même plan #}
                                        {% if isActuallyActive %}
                                            <a href="{{ path('app_entreprise_abonnement_plans') }}" 
                                               class="btn btn-sm btn-outline-success" style="border-radius: 8px;" title="Renouveler ou Changer">
                                                <i class="fas fa-sync-alt"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}