{# templates/admin/hebergement/index.html.twig #}
{% extends 'admin/base_admin.html.twig' %}
{% block title %}Hébergement annuel — Admin NUM-ECARD{% endblock %}

{% block content %}
<style>
.heberg-page { }
.heberg-header { margin-bottom: 28px; }
.heberg-header h1 { font-size: 26px; font-weight: 800; color: #1d1d1f; margin: 0 0 4px; }
.heberg-header p  { color: #86868b; font-size: 14px; margin: 0; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stat-card  { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.07); text-align: center; border-top: 4px solid var(--c); }
.stat-card .stat-val   { font-size: 36px; font-weight: 800; color: var(--c); line-height: 1; }
.stat-card .stat-label { font-size: 12px; color: #86868b; font-weight: 600; margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; }

/* Filtres */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.filter-btn { padding: 7px 16px; border-radius: 20px; border: 2px solid #e5e5ea; background: white; font-size: 13px; font-weight: 600; cursor: pointer; color: #86868b; transition: all .2s; }
.filter-btn:hover, .filter-btn.active { border-color: #667eea; color: #667eea; background: #f0f0ff; }
.filter-btn.active { background: #667eea; color: white; border-color: #667eea; }
.search-input { padding: 8px 16px; border-radius: 20px; border: 2px solid #e5e5ea; font-size: 13px; outline: none; width: 220px; }
.search-input:focus { border-color: #667eea; }

/* Table */
.table-card { background: white; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.08); overflow: hidden; margin-bottom: 32px; }
.table-card-header { padding: 18px 24px; border-bottom: 1px solid #f0f0f5; display: flex; align-items: center; justify-content: space-between; }
.table-card-header h2 { font-size: 16px; font-weight: 700; color: #1d1d1f; margin: 0; }
.table-card-header .count-badge { background: #f0f0ff; color: #667eea; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }

table.heberg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.heberg-table thead tr { background: #f5f5f7; }
table.heberg-table th { padding: 11px 16px; font-weight: 700; color: #86868b; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
table.heberg-table tbody tr { border-bottom: 1px solid #f5f5f7; transition: background .15s; }
table.heberg-table tbody tr:hover { background: #fafafa; }
table.heberg-table td { padding: 13px 16px; vertical-align: middle; }

/* Badges statut */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge-trial    { background: #d1fae5; color: #065f46; }
.badge-active   { background: #dbeafe; color: #1e40af; }
.badge-expired  { background: #fee2e2; color: #991b1b; }
.badge-suspended{ background: #fef3c7; color: #92400e; }

/* Barre progression jours */
.days-bar { height: 5px; border-radius: 3px; background: #e5e5ea; margin-top: 5px; overflow: hidden; }
.days-bar-fill { height: 100%; border-radius: 3px; }

/* Boutons actions */
.btn-action { padding: 5px 10px; border-radius: 8px; border: none; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.btn-action:hover { opacity: .85; }
.btn-green  { background: #34c759; color: white; }
.btn-blue   { background: #007aff; color: white; }
.btn-orange { background: #ff9500; color: white; }
.btn-purple { background: #667eea; color: white; }
.btn-red    { background: #ff3b30; color: white; }

/* Alerte urgence */
.row-urgent { background: #fff5f5 !important; }
.row-warning { background: #fffbeb !important; }

@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    table.heberg-table { font-size: 12px; }
}
</style>

<div class="heberg-page">

    {# ── HEADER ── #}
    <div class="heberg-header">
        <h1>🏠 Hébergement annuel</h1>
        <p>Gestion des abonnements d'hébergement — 12 € HT / an / carte après 1 an gratuit</p>
    </div>

    {# ── STATS ── #}
    {% set statsData = [
        {label: 'Total cartes',     value: stats.total,   color: '#667eea'},
        {label: 'Essai gratuit',    value: stats.trial,   color: '#34c759'},
        {label: 'Actives (payées)', value: stats.active,  color: '#007aff'},
        {label: 'Expirées',         value: stats.expired, color: '#ff3b30'}
    ] %}
    <div class="stats-grid">
        {% for item in statsData %}
        <div class="stat-card" style="--c: {{ item.color }}">
            <div class="stat-val">{{ item.value }}</div>
            <div class="stat-label">{{ item.label }}</div>
        </div>
        {% endfor %}
    </div>

    {# ── FILTRES ── #}
    <div class="filter-bar">
        <button class="filter-btn active" onclick="filterTable('all', this)">Toutes</button>
        <button class="filter-btn" onclick="filterTable('trial', this)">🟢 Essai gratuit</button>
        <button class="filter-btn" onclick="filterTable('active', this)">✅ Actives</button>
        <button class="filter-btn" onclick="filterTable('expired', this)">🔴 Expirées</button>
        <button class="filter-btn" onclick="filterTable('urgent', this)">⚠️ Urgentes (&lt;30j)</button>
        <input type="text" class="search-input" placeholder="🔍 Rechercher..." oninput="searchTable(this.value)">
    </div>

    {# ── TABLEAU COMPLET TOUTES LES CARTES ── #}
    <div class="table-card">
        <div class="table-card-header">
            <h2>📋 Toutes les cartes</h2>
            <span class="count-badge" id="rowCount">{{ allSubscriptions|length }} cartes</span>
        </div>

        {% if allSubscriptions is empty %}
        <div style="padding:48px;text-align:center;color:#86868b;">
            <div style="font-size:40px;margin-bottom:12px;">📭</div>
            <div style="font-size:15px;">Aucune carte enregistrée pour le moment.</div>
        </div>
        {% else %}
        <div style="overflow-x:auto;">
        <table class="heberg-table" id="hebergTable">
            <thead>
                <tr>
                    <th>Bénéficiaire</th>
                    <th>Pack</th>
                    <th>Statut</th>
                    <th>Création</th>
                    <th>Expiration</th>
                    <th>Jours restants</th>
                    <th>Rappels</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for sub in allSubscriptions %}
                {% set b    = sub.beneficiaire %}
                {% set days = sub.daysUntilExpiration %}
                {% set rowClass = '' %}
                {% if days <= 7 and sub.status != 'expired' %}
                    {% set rowClass = 'row-urgent' %}
                {% elseif days <= 30 and sub.status != 'expired' %}
                    {% set rowClass = 'row-warning' %}
                {% endif %}
                <tr class="{{ rowClass }}"
                    data-status="{{ sub.status }}"
                    data-days="{{ days }}"
                    data-search="{{ b.fullName|lower }} {{ b.commande.user.email|lower }} {{ b.commande.packLabel|lower }}">

                    {# Bénéficiaire #}
                    <td>
                        <div style="font-weight:700;color:#1d1d1f;">{{ b.fullName }}</div>
                        <div style="font-size:11px;color:#86868b;margin-top:2px;">{{ b.commande.user.email }}</div>
                        <div style="font-size:11px;color:#86868b;">
                            <a href="{{ path('app_admin_commande_show', {id: b.commande.id}) }}"
                               style="color:#667eea;text-decoration:none;">{{ b.commande.reference }}</a>
                        </div>
                    </td>

                    {# Pack #}
                    <td>
                        <span style="background:#f0f0ff;color:#667eea;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;">
                            {{ b.commande.packLabel }}
                        </span>
                    </td>

                    {# Statut #}
                    <td>
                        {% if sub.isFreeForever %}
                            <span class="badge" style="background:#f0f0ff;color:#667eea;">♾️ Gratuit permanent</span>
                            <div style="font-size:10px;color:#86868b;margin-top:3px;">👤 carte admin</div>
                        {% else %}
                            <span class="badge badge-{{ sub.status }}">
                                {% if sub.status == 'trial' %}🟢 Essai gratuit
                                {% elseif sub.status == 'active' %}✅ Actif (payé)
                                {% elseif sub.status == 'expired' %}🔴 Expiré
                                {% else %}⚠️ Suspendu{% endif %}
                            </span>
                        {% endif %}
                        {% if sub.renewedByAdmin and not sub.isFreeForever %}
                            <div style="font-size:10px;color:#86868b;margin-top:3px;">👤 renouvelé admin</div>
                        {% endif %}
                    </td>

                    {# Création #}
                    <td>
                        <div style="font-weight:600;color:#1d1d1f;">{{ sub.startsAt|date('d/m/Y') }}</div>
                        <div style="font-size:11px;color:#86868b;">{{ sub.createdAt|date('d/m/Y H:i') }}</div>
                    </td>

                    {# Expiration #}
                    <td>
                        <div style="font-weight:700;color:{% if sub.status == 'expired' %}#ff3b30{% elseif days <= 7 %}#ff3b30{% elseif days <= 30 %}#ff9500{% else %}#1d1d1f{% endif %};">
                            {{ sub.expiresAt|date('d/m/Y') }}
                        </div>
                        {% if sub.lastRenewalAt %}
                        <div style="font-size:10px;color:#86868b;margin-top:2px;">
                            🔄 renouvelé le {{ sub.lastRenewalAt|date('d/m/Y') }}
                        </div>
                        {% endif %}
                    </td>

                    {# Jours restants #}
                    <td style="min-width:90px;">
                        {% if sub.isFreeForever %}
                            <span style="font-size:20px;" title="Hébergement gratuit permanent">♾️</span>
                        {% elseif sub.status == 'expired' %}
                            <span style="color:#ff3b30;font-weight:700;font-size:13px;">{{ days|abs }}j dépassé</span>
                        {% else %}
                            <div style="font-size:18px;font-weight:800;color:{% if days <= 7 %}#ff3b30{% elseif days <= 30 %}#ff9500{% elseif days <= 60 %}#f59e0b{% else %}#34c759{% endif %};">
                                {{ days }}j
                            </div>
                            {% set pct = (days / 365 * 100)|round %}
                            {% if pct > 100 %}{% set pct = 100 %}{% endif %}
                            {% if pct < 0 %}{% set pct = 0 %}{% endif %}
                            <div class="days-bar">
                                <div class="days-bar-fill" style="width:{{ pct }}%;background:{% if days <= 7 %}#ff3b30{% elseif days <= 30 %}#ff9500{% elseif days <= 60 %}#f59e0b{% else %}#34c759{% endif %};"></div>
                            </div>
                        {% endif %}
                    </td>

                    {# Rappels #}
                    <td style="min-width:80px;">
                        {% set rem = sub.remindersSentAt %}
                        <div style="font-size:11px;line-height:1.8;">
                            <span title="Rappel J-30" style="color:{{ rem and rem['30'] is defined ? '#34c759' : '#d1d1d6' }};">●</span>
                            <span style="color:#86868b;"> J-30</span><br>
                            <span title="Rappel J-7" style="color:{{ rem and rem['7'] is defined ? '#34c759' : '#d1d1d6' }};">●</span>
                            <span style="color:#86868b;"> J-7</span><br>
                            <span title="Rappel J=0" style="color:{{ rem and rem['0'] is defined ? '#34c759' : '#d1d1d6' }};">●</span>
                            <span style="color:#86868b;"> J=0</span>
                        </div>
                    </td>

                    {# Actions #}
                    <td style="min-width:160px;">
                        <div style="display:flex;flex-direction:column;gap:5px;">

                            {# Renouveler #}
                            <form method="post" action="{{ path('app_admin_hebergement_renew', {id: sub.id}) }}"
                                  onsubmit="return confirm('Renouveler +1 an pour {{ b.fullName }} ?')">
                                <button type="submit" class="btn-action btn-green" style="width:100%;">✅ +1 an</button>
                            </form>

                            {# Ajuster date #}
                            <form method="post" action="{{ path('app_admin_hebergement_adjust_date', {id: sub.id}) }}"
                                  style="display:flex;gap:4px;">
                                <input type="date" name="expires_at" value="{{ sub.expiresAt|date('Y-m-d') }}"
                                       style="flex:1;padding:4px 6px;border:1px solid #d1d1d6;border-radius:6px;font-size:11px;min-width:0;">
                                <button type="submit" class="btn-action btn-purple">📅</button>
                            </form>

                            {# Suspendre / Réactiver selon le statut #}
                            {% if sub.status == 'expired' or sub.status == 'suspended' %}
                            <form method="post" action="{{ path('app_admin_hebergement_reactivate', {id: sub.id}) }}">
                                <button type="submit" class="btn-action btn-blue" style="width:100%;">🔄 Réactiver</button>
                            </form>
                            {% else %}
                            <form method="post" action="{{ path('app_admin_hebergement_suspend', {id: sub.id}) }}"
                                  onsubmit="return confirm('Suspendre la carte de {{ b.fullName }} ?')">
                                <button type="submit" class="btn-action btn-orange" style="width:100%;">⚠️ Suspendre</button>
                            </form>
                            {% endif %}

                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        {% endif %}
    </div>

</div>

<script>
// ── FILTRE PAR STATUT ─────────────────────────────────────────────────────
function filterTable(filter, btn) {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    const rows = document.querySelectorAll('#hebergTable tbody tr');
    let visible = 0;
    rows.forEach(row => {
        const status = row.dataset.status;
        const days   = parseInt(row.dataset.days);
        let show = false;
        if (filter === 'all')     show = true;
        else if (filter === 'trial')   show = status === 'trial';
        else if (filter === 'active')  show = status === 'active';
        else if (filter === 'expired') show = status === 'expired';
        else if (filter === 'urgent')  show = (days <= 30 && status !== 'expired');
        row.style.display = show ? '' : 'none';
        if (show) visible++;
    });
    document.getElementById('rowCount').textContent = visible + ' cartes';
}

// ── RECHERCHE ─────────────────────────────────────────────────────────────
function searchTable(query) {
    const q = query.toLowerCase().trim();
    const rows = document.querySelectorAll('#hebergTable tbody tr');
    let visible = 0;
    rows.forEach(row => {
        const text = row.dataset.search || '';
        const show = !q || text.includes(q);
        row.style.display = show ? '' : 'none';
        if (show) visible++;
    });
    document.getElementById('rowCount').textContent = visible + ' cartes';
}
</script>

{% endblock %}