{% extends 'admin/base_admin.html.twig' %}
{% block title %}Modifier le statut — {{ vendeur.user.fullName }}{% endblock %}
{% block content %}

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

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

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

    {# ── Statut actuel ── #}
    <div style="background: #f0f4ff; border-left: 4px solid #667eea; border-radius: 0 10px 10px 0;
                padding: 12px 16px; font-size: 13px; color: #1e40af; margin-bottom: 20px;">
        Statut actuel :
        <strong>{{ vendeur.statutLabel }}</strong>
        — Code : <span style="font-family: monospace; font-weight: 700;">{{ vendeur.codePromo ?? 'aucun' }}</span>
        — Taux : <strong>{{ vendeur.tauxCommission }}%</strong>
    </div>

    {# ── Sélection du nouveau statut ── #}
    <div class="card mb-3">
        <div class="card-title">Nouveau 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)"
                       {{ vendeur.statut == 'ambassadeur' ? 'checked' : '' }}>
                <div class="statut-card {{ vendeur.statut == 'ambassadeur' ? 'selected' : '' }}"
                     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)"
                       {{ vendeur.statut == 'agent_commercial' ? 'checked' : '' }}>
                <div class="statut-card {{ vendeur.statut == 'agent_commercial' ? 'selected' : '' }}"
                     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)"
                       {{ vendeur.statut == 'apporteur_affaires' ? 'checked' : '' }}>
                <div class="statut-card {{ vendeur.statut == 'apporteur_affaires' ? 'selected' : '' }}"
                     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)"
                       {{ vendeur.statut == 'influenceur' ? 'checked' : '' }}>
                <div class="statut-card {{ vendeur.statut == 'influenceur' ? 'selected' : '' }}"
                     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)"
                       {{ vendeur.statut == 'client_referent' ? 'checked' : '' }}>
                <div class="statut-card {{ vendeur.statut == 'client_referent' ? 'selected' : '' }}"
                     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)"
                       {{ vendeur.statut == 'client_gratuit' ? 'checked' : '' }}>
                <div class="statut-card {{ vendeur.statut == 'client_gratuit' ? 'selected' : '' }}"
                     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>

    {# ── État actif/inactif ── #}
    <div class="card mb-3">
        <div class="card-title">État du compte vendeur</div>
        <div style="display: flex; gap: 16px;">
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px;">
                <input type="radio" name="actif" value="1" {{ vendeur.actif ? 'checked' : '' }}>
                <span style="color: #16a34a; font-weight: 600;">✅ Actif</span>
            </label>
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px;">
                <input type="radio" name="actif" value="0" {{ not vendeur.actif ? 'checked' : '' }}>
                <span style="color: #dc2626; font-weight: 600;">❌ Inactif</span>
            </label>
        </div>
    </div>

    {# ── Notes internes ── #}
    <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 : changement de statut suite à..."
                  onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e5e7eb'">{{ vendeur.notesAdmin }}</textarea>
    </div>

    {# ── Avertissement changement de statut ── #}
    <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:20px;">
        ⚠️ Si vous changez le statut, un <strong>nouveau code promo</strong> sera généré automatiquement.
        L'ancien code sera désactivé. Les commissions passées restent inchangées.
    </div>

    <div style="display:flex;gap:12px;">
        <button type="submit" class="btn btn-primary">✅ Enregistrer les modifications</button>
        <a href="{{ path('admin_vendeur_show', {id: vendeur.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 %}