{% extends 'admin/base.html.twig' %}

{% block title %}Codes promo{% endblock %}
{% block breadcrumb %}Super Admin > Facturation > Codes promo{% endblock %}

{% block body %}
<div class="content-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="content-title">
                <i class="fas fa-tags me-2" style="color: #667eea;"></i>
                Codes promo
            </h1>
            <p class="content-subtitle">Gérez les codes promotionnels pour vos abonnements</p>
        </div>
        <a href="{{ path('admin_promo_code_new') }}" class="btn btn-gradient">
            <i class="fas fa-plus me-2"></i>Nouveau code promo
        </a>
    </div>
</div>

{% for message in app.flashes('success') %}
    <div class="alert alert-success-modern mb-4" role="alert">
        <i class="fas fa-check-circle me-2"></i>{{ message }}
    </div>
{% endfor %}

<!-- Stats -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="modern-card text-center">
            <div style="font-size: 2rem; font-weight: 700; color: #1e293b;">{{ stats.total }}</div>
            <div class="text-muted small">Total codes</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="modern-card text-center">
            <div style="font-size: 2rem; font-weight: 700; color: #10b981;">{{ stats.active }}</div>
            <div class="text-muted small">Actifs</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="modern-card text-center">
            <div style="font-size: 2rem; font-weight: 700; color: #ef4444;">{{ stats.expired }}</div>
            <div class="text-muted small">Expirés / Inactifs</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="modern-card text-center">
            <div style="font-size: 2rem; font-weight: 700; color: #667eea;">{{ stats.totalUses }}</div>
            <div class="text-muted small">Utilisations totales</div>
        </div>
    </div>
</div>

<!-- Table -->
<div class="modern-card">
    {% if promoCodes|length > 0 %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr style="border-bottom: 2px solid #e2e8f0;">
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Code</th>
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Nom</th>
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Remise</th>
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Utilisations</th>
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Période</th>
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Plans</th>
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Statut</th>
                    <th style="font-weight: 600; color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for code in promoCodes %}
                <tr>
                    <td>
                        <span class="badge bg-light text-dark" style="font-family: monospace; font-size: 0.9rem; padding: 0.5rem 0.75rem;">
                            {{ code.code }}
                        </span>
                    </td>
                    <td>
                        <div class="fw-semibold">{{ code.name }}</div>
                        {% if code.description %}
                            <small class="text-muted">{{ code.description|length > 50 ? code.description|slice(0, 50) ~ '...' : code.description }}</small>
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-size: 0.85rem; padding: 0.4rem 0.75rem;">
                            {{ code.discountDescription }}
                        </span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <span class="fw-semibold">{{ code.currentUses }}</span>
                            {% if code.maxUses %}
                                <span class="text-muted">/ {{ code.maxUses }}</span>
                                {% set usagePercent = (code.currentUses / code.maxUses * 100)|round %}
                                <div class="progress" style="width: 60px; height: 6px;">
                                    <div class="progress-bar {% if usagePercent >= 90 %}bg-danger{% elseif usagePercent >= 70 %}bg-warning{% else %}bg-success{% endif %}"
                                         style="width: {{ usagePercent }}%"></div>
                                </div>
                            {% else %}
                                <span class="text-muted">/ &infin;</span>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        <small>
                            <div>Du {{ code.dateBegin|date('d/m/Y') }}</div>
                            {% if code.dateEnd %}
                                <div>Au {{ code.dateEnd|date('d/m/Y') }}</div>
                            {% else %}
                                <div class="text-muted">Sans fin</div>
                            {% endif %}
                        </small>
                    </td>
                    <td>
                        {% if code.applicablePlans|length == 0 %}
                            <span class="badge bg-light text-muted">Tous</span>
                        {% else %}
                            {% for plan in code.applicablePlans %}
                                <span class="badge bg-light text-dark" style="font-size: 0.75rem;">{{ plan.name }}</span>
                            {% endfor %}
                        {% endif %}
                    </td>
                    <td>
                        {% set now = "now"|date("U") %}
                        {% if not code.isActive %}
                            <span class="badge bg-secondary">Inactif</span>
                        {% elseif code.dateEnd and code.dateEnd|date("U") < now %}
                            <span class="badge bg-danger">Expiré</span>
                        {% elseif code.maxUses and code.currentUses >= code.maxUses %}
                            <span class="badge bg-warning text-dark">Épuisé</span>
                        {% else %}
                            <span class="badge bg-success">Actif</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            <a href="{{ path('admin_promo_code_edit', {id: code.id}) }}"
                               class="btn btn-sm btn-outline-primary" title="Modifier"
                               style="border-radius: 6px;">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form method="post" action="{{ path('admin_promo_code_toggle', {id: code.id}) }}" class="d-inline">
                                <input type="hidden" name="_token" value="{{ csrf_token('toggle' ~ code.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-{{ code.isActive ? 'warning' : 'success' }}"
                                        title="{{ code.isActive ? 'Désactiver' : 'Activer' }}"
                                        style="border-radius: 6px;">
                                    <i class="fas fa-{{ code.isActive ? 'pause' : 'play' }}"></i>
                                </button>
                            </form>
                            <form method="post" action="{{ path('admin_promo_code_delete', {id: code.id}) }}" class="d-inline"
                                  onsubmit="return confirm('Supprimer le code promo {{ code.code }} ?')">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ code.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer"
                                        style="border-radius: 6px;">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-5">
        <i class="fas fa-tags fa-3x mb-3" style="color: #cbd5e1;"></i>
        <h5 class="text-muted">Aucun code promo</h5>
        <p class="text-muted mb-3">Créez votre premier code promo pour offrir des réductions à vos clients.</p>
        <a href="{{ path('admin_promo_code_new') }}" class="btn btn-gradient">
            <i class="fas fa-plus me-2"></i>Créer un code promo
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}