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

{% block title %}Recommandations — Admin NUM-ECARD{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.reco-header{text-align:center;padding:1.5rem 1rem 1rem;border-bottom:2px solid #c9a04a;margin-bottom:1.5rem}
.reco-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:1.5rem}
.stat-card{background:linear-gradient(135deg,#6c63c7,#9b59b6);border-radius:12px;padding:1rem;color:white}
.stat-card .s-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.85;margin:0 0 6px}
.stat-card .s-number{font-size:28px;font-weight:500;margin:0 0 4px}
.stat-card .s-sub{font-size:11px;opacity:.7;margin:0}
.reco-banner{background:#fff3cd;border-left:4px solid #f5a623;border-radius:8px;padding:10px 14px;margin-bottom:1.5rem;font-size:13px;color:#7a5f1a;display:flex;align-items:center;gap:8px}
.reco-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem}
.reco-pill{padding:6px 16px;border-radius:20px;font-size:13px;border:1px solid #e0e0e0;background:white;color:#666;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.reco-pill.active{background:#5b4fcf;color:white;border-color:#5b4fcf}

/* ── CARTE PROSPECT ── */
.prospect-card{background:white;border:1.5px solid #1D9E75;border-radius:12px;padding:1rem 1.25rem;margin-bottom:12px;display:flex;gap:1.25rem;flex-wrap:wrap}
.prospect-card.status-new{border-color:#4a90e2}
.prospect-card.status-contacted{border-color:#e67e22}
.prospect-card.status-converted{border-color:#27ae60}
.card-body{flex:1;min-width:260px}
.card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.badge-status{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.badge-status.new{background:#e8f4fd;color:#1a6fa8}
.badge-status.contacted{background:#fef3e2;color:#b7620a}
.badge-status.converted{background:#e8f8ee;color:#1a7a42}
.prospect-name{font-size:15px;font-weight:600;color:#1d1d1f;margin:0}
.card-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#666;margin-bottom:8px}
.card-message{border-left:3px solid #AFA9EC;padding:8px 12px;font-size:13px;color:#1d1d1f;margin-bottom:10px}
.card-owner{background:#f0eeff;border-radius:8px;padding:8px 12px;font-size:13px;color:#5b4fcf;display:flex;align-items:center;gap:6px;margin-bottom:10px}
.card-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.offre-badge{background:#f0eeff;color:#5b4fcf;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:500}

/* ── SIDEBAR BOUTONS ── */
.card-sidebar{display:flex;flex-direction:column;gap:8px;min-width:185px}
.btn-action{border:none;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;text-decoration:none;text-align:center}
.btn-call{background:#378ADD;color:#fff}
.btn-call:hover{background:#185FA5;color:#fff}
.btn-email{background:#185FA5;color:#fff}
.btn-email:hover{background:#0C447C;color:#fff}
.btn-repertoire{background:#1D9E75;color:#fff}
.btn-repertoire:hover{background:#0F6E56;color:#fff}
.btn-crm{background:#5F5E5A;color:#fff}
.btn-crm:hover{background:#444441;color:#fff}
.btn-delete{background:white;color:#c0392b;border:1px solid #e0b4b4;font-size:12px;padding:7px 14px}
.btn-delete:hover{background:#fee2e2;color:#991b1b;border-color:#f5c6c6}
.crm-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:white;border:0.5px solid #ddd;border-radius:8px;z-index:100;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.crm-dropdown.open{display:block}
.crm-option{padding:8px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:0.5px solid #eee;color:#1d1d1f;text-decoration:none}
.crm-option:last-child{border-bottom:none}
.crm-option:hover{background:#f5f5f5}
.crm-icon{flex-shrink:0;display:flex;align-items:center}
.crm-name{flex:1;font-weight:500;color:#1d1d1f}
.crm-option span.crm-type{font-size:11px;color:#999;white-space:nowrap}

@media(max-width:768px){
  .reco-stats{grid-template-columns:repeat(2,1fr)}
  .card-top{flex-direction:column;align-items:flex-start}
  .card-meta{flex-direction:column;gap:4px}
  .prospect-card{flex-direction:column}
  .card-sidebar{flex-direction:row;flex-wrap:wrap;min-width:unset}
  .btn-action{width:auto;flex:1;min-width:130px}
}
</style>
{% endblock %}

{% block content %}
<div style="max-width:960px;margin:0 auto;padding:24px 16px">

  {# ── FLASH ── #}
  {% for type, messages in app.flashes %}
    {% for msg in messages %}
      <div style="padding:12px 16px;border-radius:10px;margin-bottom:16px;
                  background:{{ type == 'success' ? '#d1fae5' : '#fee2e2' }};
                  color:{{ type == 'success' ? '#065f46' : '#991b1b' }}">
        {{ msg }}
      </div>
    {% endfor %}
  {% endfor %}

  {# ── HEADER ── #}
  <div class="reco-header">
    <p style="font-size:22px;font-weight:600;color:#1d1d1f;margin:0 0 4px">🤝 Recommandations — Vue Admin</p>
    <p style="font-size:14px;color:#666;margin:0">Toutes les recommandations de toutes les cartes Force de Vente</p>
    <p style="font-size:13px;color:#999;margin:4px 0 0;font-style:italic">Contactez les prospects, changez leur statut ou supprimez-les</p>
  </div>

  {# ── STATS ── #}
  {% set total = counts.new + counts.contacted + counts.converted %}
  <div class="reco-stats">
    <div class="stat-card">
      <p class="s-label">Total reçus</p>
      <p class="s-number">{{ total }}</p>
      <p class="s-sub">Toutes cartes confondues</p>
    </div>
    <div class="stat-card">
      <p class="s-label">À contacter</p>
      <p class="s-number">{{ counts.new }}</p>
      <p class="s-sub">Nouveaux prospects</p>
    </div>
    <div class="stat-card">
      <p class="s-label">Contactés</p>
      <p class="s-number">{{ counts.contacted }}</p>
      <p class="s-sub">En cours de suivi</p>
    </div>
    <div class="stat-card">
      <p class="s-label">Convertis</p>
      <p class="s-number">{{ counts.converted }}</p>
      <p class="s-sub">Clients gagnés</p>
    </div>
    <div class="stat-card">
      <p class="s-label">Ce mois</p>
      <p class="s-number">{{ counts.thisMonth ?? 0 }}</p>
      <p class="s-sub">Nouvelles recommandations</p>
    </div>
  </div>

  {# ── BANDEAU INFO ADMIN ── #}
  <div class="reco-banner">
    <span style="font-size:16px">🛡️</span>
    <span><strong>Vue Admin :</strong> Vous voyez toutes les recommandations de l'ensemble des cartes Force de Vente actives.</span>
  </div>

  {# ── FILTRES ── #}
  <p style="font-size:15px;font-weight:600;color:#1d1d1f;margin:0 0 10px">🔍 Filtrer les prospects</p>
  <div class="reco-pills">
    <a href="{{ path('app_admin_recommendations') }}"
       class="reco-pill {{ not currentStatus ? 'active' : '' }}">Tous</a>
    <a href="{{ path('app_admin_recommendations', {status: 'new'}) }}"
       class="reco-pill {{ currentStatus == 'new' ? 'active' : '' }}">🆕 Nouveaux</a>
    <a href="{{ path('app_admin_recommendations', {status: 'contacted'}) }}"
       class="reco-pill {{ currentStatus == 'contacted' ? 'active' : '' }}">📞 Contactés</a>
    <a href="{{ path('app_admin_recommendations', {status: 'converted'}) }}"
       class="reco-pill {{ currentStatus == 'converted' ? 'active' : '' }}">✅ Convertis</a>
  </div>

  {# ── LISTE ── #}
  <p style="font-size:15px;font-weight:600;color:#1d1d1f;margin:0 0 12px">👥 Prospects recommandés</p>

  {% if recommendations is empty %}
    <div style="text-align:center;padding:60px;background:white;border-radius:16px;border:1px solid #e5e5ea;color:#86868b">
      <div style="font-size:40px;margin-bottom:12px">📭</div>
      <p style="margin:0;font-size:15px">Aucune recommandation pour le moment.</p>
    </div>
  {% else %}
    {% for rec in recommendations %}
      {% set statusClass = rec.status == 'new' ? 'new' : (rec.status == 'contacted' ? 'contacted' : 'converted') %}

      <div class="prospect-card status-{{ rec.status }}">

        {# ── PARTIE GAUCHE : infos prospect ── #}
        <div class="card-body">

          <div class="card-top">
            <span class="badge-status {{ statusClass }}">
              {% if rec.status == 'new' %}NOUVEAU
              {% elseif rec.status == 'contacted' %}CONTACTÉ
              {% else %}CONVERTI{% endif %}
            </span>
            <p class="prospect-name">{{ rec.contactName }}</p>
            {% if rec.contactEntreprise %}
              <span style="font-size:13px;color:#86868b">— {{ rec.contactEntreprise }}</span>
            {% endif %}
            <span style="font-size:11px;color:#999">{{ rec.createdAt|date('d/m/Y') }} à {{ rec.createdAt|date('H:i') }}</span>
          </div>

          <div class="card-meta">
            <span>✉ {{ rec.contactEmail }}</span>
            {% if rec.contactPhone %}<span>📞 {{ rec.contactPhone }}</span>{% endif %}
            {% if rec.contactEntreprise %}<span>🏢 {{ rec.contactEntreprise }}</span>{% endif %}
          </div>

          {% if rec.message %}
            <div class="card-message">
              <strong>Contexte :</strong> {{ rec.message }}
            </div>
          {% endif %}

          {# Carte propriétaire de la recommandation #}
          {% if rec.beneficiaire is defined and rec.beneficiaire %}
            <div class="card-owner">
              🃏 Carte : <strong>{{ rec.beneficiaire.prenom }} {{ rec.beneficiaire.nom }}</strong>
              {% if rec.beneficiaire.commande is defined and rec.beneficiaire.commande %}
                &nbsp;—&nbsp;
                <a href="{{ path('app_admin_commande_show', {id: rec.beneficiaire.commande.id}) }}"
                   style="color:#5b4fcf;font-size:12px">voir commande</a>
              {% endif %}
            </div>
          {% endif %}

          <div class="card-footer">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
              {% if rec.offreSuggeree %}
                {% set offres = {
                  'essentiel':   'Essentiel 179€',
                  'premium':     'Premium 299€',
                  'forcevente':  'Force de Vente 399€',
                  'multicartes': 'Multi-Cartes 999€'
                } %}
                <span class="offre-badge">{{ offres[rec.offreSuggeree] ?? rec.offreSuggeree }}</span>
              {% endif %}
            </div>
          </div>

        </div>{# fin .card-body #}

        {# ── PARTIE DROITE : boutons d'action ── #}
        <div class="card-sidebar">

          {# Statut en haut de la sidebar #}
          <form method="post"
                action="{{ path('app_admin_recommendation_status', {id: rec.id}) }}"
                style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">
            <input type="hidden" name="_token" value="{{ csrf_token('reco_status_' ~ rec.id) }}">
            <input type="hidden" name="returnStatus" value="{{ currentStatus }}">
            <label style="font-size:12px;color:#86868b;white-space:nowrap">Statut :</label>
            <select name="status"
                    onchange="this.form.submit()"
                    style="flex:1;font-size:12px;border:1px solid #ddd;border-radius:8px;padding:5px 8px;background:white;color:#1d1d1f;cursor:pointer">
              <option value="new" {{ rec.status == 'new' ? 'selected' : '' }}>🆕 Nouveau</option>
              <option value="contacted" {{ rec.status == 'contacted' ? 'selected' : '' }}>📞 Contacté</option>
              <option value="converted" {{ rec.status == 'converted' ? 'selected' : '' }}>✅ Converti</option>
            </select>
          </form>

          {% if rec.contactPhone %}
            <a href="tel:{{ rec.contactPhone }}" class="btn-action btn-call">
              📞 Appeler
            </a>
          {% endif %}

          <a href="mailto:{{ rec.contactEmail }}" class="btn-action btn-email">
            ✉ Email
          </a>

          {# Ajouter au répertoire (vCard) #}
          <a href="{{ path('app_account_recommendation_vcard', {id: rec.id}) }}"
             class="btn-action btn-repertoire">
            👤 Ajouter au répertoire
          </a>

          {# Exporter vers CRM #}
          <div style="position:relative;">
            <button type="button"
                    class="btn-action btn-crm"
                    onclick="toggleCrmDropdown('crm-{{ rec.id }}')">
              ⬇ Exporter vers CRM ▾
            </button>
            <div id="crm-{{ rec.id }}" class="crm-dropdown">
              <a href="{{ path('app_account_recommendation_export', {id: rec.id, format: 'salesforce'}) }}" class="crm-option">
                <span class="crm-icon"><svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0C1.17 0 0.5 0.67 0.5 1.5V14.5C0.5 15.33 1.17 16 2 16H12C12.83 16 13.5 15.33 13.5 14.5V4.5L9 0H2Z" fill="#e8e8e8" stroke="#ccc" stroke-width="0.5"/><path d="M9 0V4.5H13.5L9 0Z" fill="#ccc"/></svg></span>
                <span class="crm-name">Salesforce</span>
                <span class="crm-type">CRM Enterprise</span>
              </a>
              <a href="{{ path('app_account_recommendation_export', {id: rec.id, format: 'hubspot'}) }}" class="crm-option">
                <span class="crm-icon"><svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0C1.17 0 0.5 0.67 0.5 1.5V14.5C0.5 15.33 1.17 16 2 16H12C12.83 16 13.5 15.33 13.5 14.5V4.5L9 0H2Z" fill="#e8e8e8" stroke="#ccc" stroke-width="0.5"/><path d="M9 0V4.5H13.5L9 0Z" fill="#ccc"/></svg></span>
                <span class="crm-name">HubSpot</span>
                <span class="crm-type">Inbound CRM</span>
              </a>
              <a href="{{ path('app_account_recommendation_export', {id: rec.id, format: 'pipedrive'}) }}" class="crm-option">
                <span class="crm-icon"><svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0C1.17 0 0.5 0.67 0.5 1.5V14.5C0.5 15.33 1.17 16 2 16H12C12.83 16 13.5 15.33 13.5 14.5V4.5L9 0H2Z" fill="#e8e8e8" stroke="#ccc" stroke-width="0.5"/><path d="M9 0V4.5H13.5L9 0Z" fill="#ccc"/></svg></span>
                <span class="crm-name">Pipedrive</span>
                <span class="crm-type">Sales CRM</span>
              </a>
              <a href="{{ path('app_account_recommendation_export', {id: rec.id, format: 'generic'}) }}" class="crm-option">
                <span class="crm-icon"><svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 0C1.17 0 0.5 0.67 0.5 1.5V14.5C0.5 15.33 1.17 16 2 16H12C12.83 16 13.5 15.33 13.5 14.5V4.5L9 0H2Z" fill="#e8e8e8" stroke="#ccc" stroke-width="0.5"/><path d="M9 0V4.5H13.5L9 0Z" fill="#ccc"/></svg></span>
                <span class="crm-name">Format générique</span>
                <span class="crm-type">Tous CRM</span>
              </a>
            </div>
          </div>

          {# Supprimer (admin uniquement) #}
          <form method="post"
                action="{{ path('app_admin_recommendation_delete', {id: rec.id}) }}"
                onsubmit="return confirm('Supprimer définitivement cette recommandation ?')">
            <input type="hidden" name="_token" value="{{ csrf_token('delete_reco_' ~ rec.id) }}">
            <button type="submit" class="btn-action btn-delete">
              🗑 Supprimer
            </button>
          </form>

        </div>{# fin .card-sidebar #}

      </div>{# fin .prospect-card #}
    {% endfor %}
  {% endif %}

</div>
{% endblock %}

{% block admin_javascripts %}
<script>
function toggleCrmDropdown(id) {
  document.querySelectorAll('.crm-dropdown').forEach(function(el) {
    if (el.id !== id) el.classList.remove('open');
  });
  document.getElementById(id).classList.toggle('open');
}
document.addEventListener('click', function(e) {
  if (!e.target.closest('.card-sidebar > div')) {
    document.querySelectorAll('.crm-dropdown').forEach(function(el) {
      el.classList.remove('open');
    });
  }
});
</script>
{% endblock %}