{% extends 'admin/base_admin.html.twig' %}
{% block title %}Taux de commission{% endblock %}
{% block content %}

<div class="page-header">
    <h1 class="page-title">💹 Taux de commission</h1>
    <p class="page-subtitle">Modifiez les taux appliqués aux nouvelles ventes.</p>
</div>

<a href="{{ path('admin_vendeur_index') }}" class="btn btn-secondary btn-sm mb-4">← Retour aux vendeurs</a>

<div style="background:#fff9f0;border-left:4px solid #f59e0b;border-radius:0 10px 10px 0;
            padding:12px 16px;font-size:13px;color:#92400e;margin-bottom:24px;max-width:700px;">
    ⚠️ Toute modification s'applique uniquement aux <strong>nouvelles ventes</strong>. Les commissions déjà enregistrées ne sont pas impactées.
</div>

<form method="post" action="{{ path('admin_vendeur_taux_modifier') }}" style="max-width:700px;">

    {% set config = {
        'ambassadeur':        {emoji: '⭐', color: '#d97706', bg: '#fef3c7', border: '#fcd34d'},
        'agent_commercial':   {emoji: '💼', color: '#2563eb', bg: '#dbeafe', border: '#93c5fd'},
        'apporteur_affaires': {emoji: '🤲', color: '#059669', bg: '#d1fae5', border: '#6ee7b7'},
        'influenceur':        {emoji: '📣', color: '#9333ea', bg: '#fae8ff', border: '#d8b4fe'},
        'client_referent':    {emoji: '👥', color: '#16a34a', bg: '#dcfce7', border: '#86efac'}
    } %}

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
        {% for tauxEntite in taux %}
        {% if tauxEntite.statut != 'client_gratuit' %}
        {% set cfg = config[tauxEntite.statut] ?? {emoji: '•', color: '#333', bg: '#f5f5f7', border: '#ddd'} %}
        <div style="background: #fff; border: 1.5px solid #f0f0f0; border-radius: 14px;
                    padding: 20px; position: relative; overflow: hidden;">

            {# Bande colorée en haut #}
            <div style="position:absolute;top:0;left:0;right:0;height:4px;background:{{ cfg.color }};border-radius:14px 14px 0 0;"></div>

            <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
                <div style="width:38px;height:38px;border-radius:10px;background:{{ cfg.bg }};
                            display:flex;align-items:center;justify-content:center;font-size:18px;">
                    {{ cfg.emoji }}
                </div>
                <div>
                    <div style="font-weight:700;font-size:15px;color:#1a1a1a;">{{ tauxEntite.statutLabel }}</div>
                    {% if tauxEntite.modifiePar %}
                    <div style="font-size:11px;color:#86868b;">
                        Modifié par {{ tauxEntite.modifiePar.fullName }}
                    </div>
                    {% endif %}
                </div>
            </div>

            <div style="display:flex;align-items:center;gap:0;">
                <input type="number"
                       name="taux[{{ tauxEntite.statut }}]"
                       value="{{ tauxEntite.taux }}"
                       min="0" max="100" step="0.01" required
                       style="flex:1;padding:12px 16px;border:2px solid {{ cfg.border }};
                              border-right:none;border-radius:10px 0 0 10px;
                              font-size:24px;font-weight:800;color:{{ cfg.color }};
                              text-align:center;font-family:inherit;background:{{ cfg.bg }};
                              outline:none;"
                       onfocus="this.style.borderColor='{{ cfg.color }}'"
                       onblur="this.style.borderColor='{{ cfg.border }}'">
                <div style="padding:12px 14px;background:{{ cfg.color }};color:white;
                            border-radius:0 10px 10px 0;font-size:18px;font-weight:800;">
                    %
                </div>
            </div>

            <div style="margin-top:10px;font-size:11px;color:#86868b;text-align:center;">
                Dernière modif. : {{ tauxEntite.updatedAt|date('d/m/Y à H:i') }}
            </div>
        </div>
        {% endif %}
        {% endfor %}

        {# Client gratuit — non modifiable #}
        <div style="background:#f9fafb;border:1.5px dashed #d1d5db;border-radius:14px;
                    padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;">
            <div style="font-size:28px;">🎁</div>
            <div style="font-weight:700;font-size:14px;color:#6b7280;">Client gratuit</div>
            <div style="font-size:13px;color:#9ca3af;text-align:center;">
                Carte offerte par l'admin<br>Aucune commission
            </div>
        </div>
    </div>

    <div style="margin-top:24px;">
        <button type="submit" class="btn btn-primary" style="width:100%;padding:14px;font-size:16px;font-weight:700;">
            💾 Enregistrer tous les taux
        </button>
    </div>

</form>

{% endblock %}