{% extends 'admin/base_admin.html.twig' %}
{% block title %}Attribuer un statut vendeur{% endblock %}
{% block content %}

<div class="page-header">
    <h1 class="page-title">
        🤝 Attribuer un statut à
        <a href="{{ path('app_admin_user_show', {id: user.id}) }}"
           style="color: inherit; text-decoration: underline;">{{ user.fullName }}</a>
    </h1>
    <p class="page-subtitle">
        <a href="mailto:{{ user.email }}" style="color: #86868b;">{{ user.email }}</a>
    </p>
</div>

<a href="{{ path('app_admin_user_show', {id: user.id}) }}" class="btn btn-secondary btn-sm mb-4">
    ← Retour au profil
</a>

<form method="post" style="max-width: 680px;">

    <div class="card mb-3">
        <div class="card-title">Choisir un statut <span style="color:#dc2626;">*</span></div>
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">

            <label for="statut_ambassadeur" style="cursor:pointer;">
                <input type="radio" name="statut" id="statut_ambassadeur" value="ambassadeur" style="display:none;" required onchange="selectCard(this)">
                <div class="statut-card" id="card_ambassadeur" style="border:2px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;transition:all .15s;background:#fff;">
                    <div style="font-size:28px;margin-bottom:8px;">⭐</div>
                    <div style="font-weight:700;font-size:14px;color:#1a1a1a;margin-bottom:4px;">Ambassadeur</div>
                    <div style="font-family:monospace;font-size:12px;background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:8px;">AMB101+</div>
                    <div style="font-size:22px;font-weight:800;color:#d97706;">{{ taux['ambassadeur'] ?? '25' }}%</div>
                    <div style="font-size:11px;color:#86868b;">commission HT</div>
                </div>
            </label>

            <label for="statut_agent_commercial" style="cursor:pointer;">
                <input type="radio" name="statut" id="statut_agent_commercial" value="agent_commercial" style="display:none;" onchange="selectCard(this)">
                <div class="statut-card" id="card_agent_commercial" style="border:2px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;transition:all .15s;background:#fff;">
                    <div style="font-size:28px;margin-bottom:8px;">💼</div>
                    <div style="font-weight:700;font-size:14px;color:#1a1a1a;margin-bottom:4px;">Agent commercial</div>
                    <div style="font-family:monospace;font-size:12px;background:#dbeafe;color:#1e40af;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:8px;">PRO101+</div>
                    <div style="font-size:22px;font-weight:800;color:#2563eb;">{{ taux['agent_commercial'] ?? '20' }}%</div>
                    <div style="font-size:11px;color:#86868b;">commission HT</div>
                </div>
            </label>

            <label for="statut_apporteur_affaires" style="cursor:pointer;">
                <input type="radio" name="statut" id="statut_apporteur_affaires" value="apporteur_affaires" style="display:none;" onchange="selectCard(this)">
                <div class="statut-card" id="card_apporteur_affaires" style="border:2px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;transition:all .15s;background:#fff;">
                    <div style="font-size:28px;margin-bottom:8px;">🤲</div>
                    <div style="font-weight:700;font-size:14px;color:#1a1a1a;margin-bottom:4px;">Apporteur d'affaires</div>
                    <div style="font-family:monospace;font-size:12px;background:#d1fae5;color:#065f46;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:8px;">APD101+</div>
                    <div style="font-size:22px;font-weight:800;color:#059669;">{{ taux['apporteur_affaires'] ?? '15' }}%</div>
                    <div style="font-size:11px;color:#86868b;">commission HT</div>
                </div>
            </label>

            <label for="statut_influenceur" style="cursor:pointer;">
                <input type="radio" name="statut" id="statut_influenceur" value="influenceur" style="display:none;" onchange="selectCard(this)">
                <div class="statut-card" id="card_influenceur" style="border:2px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;transition:all .15s;background:#fff;">
                    <div style="font-size:28px;margin-bottom:8px;">📣</div>
                    <div style="font-weight:700;font-size:14px;color:#1a1a1a;margin-bottom:4px;">Influenceur</div>
                    <div style="font-family:monospace;font-size:12px;background:#fae8ff;color:#6b21a8;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:8px;">VIP101+</div>
                    <div style="font-size:22px;font-weight:800;color:#9333ea;">{{ taux['influenceur'] ?? '20' }}%</div>
                    <div style="font-size:11px;color:#86868b;">commission HT</div>
                </div>
            </label>

            <label for="statut_client_referent" style="cursor:pointer;">
                <input type="radio" name="statut" id="statut_client_referent" value="client_referent" style="display:none;" onchange="selectCard(this)">
                <div class="statut-card" id="card_client_referent" style="border:2px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;transition:all .15s;background:#fff;">
                    <div style="font-size:28px;margin-bottom:8px;">👥</div>
                    <div style="font-weight:700;font-size:14px;color:#1a1a1a;margin-bottom:4px;">Client référent</div>
                    <div style="font-family:monospace;font-size:12px;background:#dcfce7;color:#166534;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:8px;">REF101+</div>
                    <div style="font-size:22px;font-weight:800;color:#16a34a;">0%</div>
                    <div style="font-size:11px;color:#86868b;">carte offerte</div>
                </div>
            </label>

            <label for="statut_client_gratuit" style="cursor:pointer;">
                <input type="radio" name="statut" id="statut_client_gratuit" value="client_gratuit" style="display:none;" onchange="selectCard(this)">
                <div class="statut-card" id="card_client_gratuit" style="border:2px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;transition:all .15s;background:#fff;">
                    <div style="font-size:28px;margin-bottom:8px;">🎁</div>
                    <div style="font-weight:700;font-size:14px;color:#1a1a1a;margin-bottom:4px;">Client gratuit</div>
                    <div style="font-size:12px;background:#f3f4f6;color:#6b7280;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:8px;">Pas de code promo</div>
                    <div style="font-size:14px;font-weight:600;color:#6b7280;margin-top:4px;">Offert par admin</div>
                    <div style="font-size:11px;color:#86868b;">aucune commission</div>
                </div>
            </label>

        </div>
    </div>

    <div class="card mb-3">
        <div class="card-title">Notes internes (optionnel)</div>
        <textarea name="notes" rows="3"
                  style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;font-family:inherit;resize:vertical;box-sizing:border-box;"
                  placeholder="Ex : contact LinkedIn, partenariat signé le, contexte..."
                  onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e5e7eb'"></textarea>
    </div>

    <div style="background:#eff6ff;border-left:4px solid #3b82f6;border-radius:0 10px 10px 0;padding:12px 16px;font-size:13px;color:#1e40af;margin-bottom:20px;">
        ℹ️ Le code promo sera généré automatiquement dès l'attribution du statut.
    </div>

    <div style="display:flex;gap:12px;">
        <button type="submit" class="btn btn-primary">✅ Attribuer le statut</button>
        <a href="{{ path('app_admin_user_show', {id: user.id}) }}" class="btn btn-secondary">Annuler</a>
    </div>

</form>

<style>
.statut-card:hover { border-color:#667eea !important; background:#f8f7ff !important; transform:translateY(-2px); box-shadow:0 4px 12px rgba(102,126,234,.15); }
.statut-card.selected { border-color:#667eea !important; background:#f0f0ff !important; box-shadow:0 0 0 3px rgba(102,126,234,.2); }
</style>
<script>
function selectCard(input) {
    document.querySelectorAll('.statut-card').forEach(c => c.classList.remove('selected'));
    var card = document.getElementById('card_' + input.value);
    if (card) card.classList.add('selected');
}
</script>

{% endblock %}