{# templates/account/card_modify.html.twig #}
{# Modification de carte NUM-ECARD - Même design que le wizard de création #}

{% extends 'account/base_account.html.twig' %}

{% block title %}Modifier la carte de {{ beneficiaire.fullName }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
/* Variables */
:root {
    --wizard-primary: #667eea;
    --wizard-primary-dark: #764ba2;
    --wizard-success: #34c759;
    --wizard-danger: #ff3b30;
    --wizard-gray: #86868b;
    --wizard-gray-light: #f5f5f7;
    --wizard-gray-border: #d2d2d7;
    --wizard-text: #1d1d1f;
    --wizard-gradient: linear-gradient(135deg, var(--wizard-primary) 0%, var(--wizard-primary-dark) 100%);
}

.wizard-page { background: #f5f5f7; min-height: 100vh; padding: 40px 20px 100px; }
.wizard-container { max-width: 800px; margin: 0 auto; }

/* Header */
.wizard-header { background: var(--wizard-gradient); color: white; border-radius: 20px; padding: 30px; margin-bottom: 24px; box-shadow: 0 10px 40px rgba(102,126,234,0.3); }
.wizard-header h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.wizard-header p { font-size: 14px; opacity: 0.85; margin: 0; }
.wizard-header-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Bannière prix */
.modify-price-badge { background: rgba(255,255,255,0.2); border-radius: 14px; padding: 12px 20px; text-align: center; backdrop-filter: blur(10px); }
.modify-price-badge .price-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.modify-price-badge .price-value { font-size: 28px; font-weight: 800; }
.modify-price-badge.free { background: rgba(52,199,89,0.3); }

/* Progress bar / stepper */
.wizard-progress-bar { display: flex; justify-content: space-between; align-items: flex-start; position: relative; padding: 0 10px; margin-bottom: 24px; }
.wizard-progress-bar::before { content: ''; position: absolute; top: 20px; left: 30px; right: 30px; height: 3px; background: var(--wizard-gray-border); border-radius: 2px; z-index: 0; }
.wizard-progress-bar .progress-fill { position: absolute; top: 20px; left: 30px; height: 3px; background: var(--wizard-gradient); border-radius: 2px; z-index: 1; transition: width 0.4s ease; }
.wizard-step { display: flex; flex-direction: column; align-items: center; z-index: 2; cursor: pointer; }
.wizard-step-circle { width: 42px; height: 42px; border-radius: 50%; background: white; border: 3px solid var(--wizard-gray-border); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: var(--wizard-gray); transition: all 0.3s ease; margin-bottom: 8px; }
.wizard-step.active .wizard-step-circle { background: var(--wizard-gradient); border-color: transparent; color: white; box-shadow: 0 4px 15px rgba(102,126,234,0.4); }
.wizard-step.completed .wizard-step-circle { background: var(--wizard-success); border-color: transparent; color: white; }
.wizard-step-label { font-size: 12px; color: var(--wizard-gray); font-weight: 500; text-align: center; max-width: 80px; }
.wizard-step.active .wizard-step-label { color: var(--wizard-primary); font-weight: 600; }

/* Card formulaire */
.wizard-card { background: white; border-radius: 20px; box-shadow: 0 4px 30px rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 24px; }
.wizard-card-header { background: var(--wizard-gray-light); padding: 20px 28px; border-bottom: 1px solid var(--wizard-gray-border); display: flex; align-items: center; gap: 16px; }
.wizard-card-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--wizard-gradient); color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; box-shadow: 0 4px 15px rgba(102,126,234,0.3); }
.wizard-card-title h2 { font-size: 20px; font-weight: 600; color: var(--wizard-text); margin: 0 0 4px; }
.wizard-card-title p { font-size: 14px; color: var(--wizard-gray); margin: 0; }
.wizard-card-body { padding: 28px; }

/* Sections formulaire */
.form-step { display: none; }
.form-step.active { display: block; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { transform: translateY(10px); } to { transform: translateY(0); } }

.form-step-title { font-size: 18px; font-weight: 600; color: var(--wizard-text); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--wizard-gray-light); }
.form-step-title .step-emoji { margin-right: 10px; }

/* Champs */
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.form-row.full { grid-template-columns: 1fr; }
.form-group { margin-bottom: 4px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--wizard-text); margin-bottom: 6px; }
.form-group label.required::after { content: ' *'; color: var(--wizard-danger); }
.form-input, .form-textarea, .form-select { width: 100%; padding: 14px 16px; font-size: 15px; border: 1px solid var(--wizard-gray-border); border-radius: 12px; background: var(--wizard-gray-light); color: var(--wizard-text); transition: all 0.2s ease; font-family: inherit; box-sizing: border-box; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--wizard-primary); background: white; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.form-help { font-size: 12px; color: var(--wizard-gray); margin-top: 6px; }

/* Checkbox Premium */
.form-check-group { display: flex; gap: 16px; flex-wrap: wrap; }
.form-check { display: flex; align-items: center; gap: 10px; }
.form-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--wizard-primary); cursor: pointer; }
.feature-toggle { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: var(--wizard-gray-light); border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; }
.feature-toggle:hover { background: #e8e8ed; }
.feature-toggle.active { background: #ede9fe; border: 2px solid var(--wizard-primary); }
.feature-link { margin-top: 8px; margin-bottom: 16px; display: none; }
.feature-toggle.active + .feature-link { display: block; }

/* Navigation */
.wizard-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; }
.btn-prev, .btn-next, .btn-submit { padding: 14px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: inherit; border: none; }
.btn-prev { background: var(--wizard-gray-light); color: var(--wizard-text); }
.btn-prev:hover { background: #e8e8ed; }
.btn-next { background: var(--wizard-gradient); color: white; margin-left: auto; }
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102,126,234,0.4); }
.btn-submit { background: var(--wizard-gradient); color: white; width: 100%; padding: 18px; font-size: 17px; }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(102,126,234,0.4); }
.btn-back-link { display: inline-flex; align-items: center; gap: 6px; color: white; text-decoration: none; font-size: 14px; font-weight: 500; opacity: 0.85; margin-bottom: 16px; }
.btn-back-link:hover { opacity: 1; }

/* Info box modification */
.modification-info { background: rgba(255,255,255,0.15); border-radius: 12px; padding: 12px 16px; margin-top: 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* Charte selector */
.charte-nav-btn:hover { background: rgba(255,255,255,0.25) !important; transform: scale(1.1); }
.charte-selector-container select { background-color: rgba(255,255,255,0.1) !important; }
.charte-selector-container select option { background: #1d1d1f; color: white; }
@media (max-width: 600px) {
    .charte-mockup-container .smartphone-mockup { width: 220px !important; height: 400px !important; }
    .charte-nav-btn { width: 40px !important; height: 40px !important; font-size: 20px !important; }
}

/* Responsive */
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .wizard-header { padding: 20px; }
    .wizard-header h1 { font-size: 22px; }
    .wizard-header-content { flex-direction: column; text-align: center; }
    .wizard-step-label { font-size: 10px; }
    .wizard-card-body { padding: 20px 16px; }
    .wizard-card-header { padding: 16px 20px; }
}
</style>
    <style>
        #qrBtn      { display: none !important; }
        #qrPanel    { display: none !important; }
        #userNavBtn { display: flex !important; }
    </style>
{% endblock %}

{% block body %}
<div class="wizard-page">
    <div class="wizard-container">

        <!-- HEADER -->
        <a href="{{ path('app_account_commande_show', {id: commande.id}) }}" class="btn-back-link">← Retour à la commande {{ commande.reference }}</a>

        <div class="wizard-header">
            <div class="wizard-header-content">
                <div>
                    <h1>✏️ Modifier la carte</h1>
                    <p>{{ beneficiaire.fullName }} — {{ commande.packLabel }}</p>
                    {% if modificationCount > 0 %}
                    <div class="modification-info">
                        📝 {{ modificationCount }} modification(s) effectuée(s)
                        {% if beneficiaire.lastModifiedAt %}
                         — dernière le <span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s', 'UTC') }}Z">{{ commande.createdAt|date('d/m/Y H:i') }}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="modify-price-badge">
                    <div class="price-label">Tarif modification</div>
                    <div class="price-value">{{ priceTTC|number_format(2, ',', ' ') }} €</div>
                    <div class="price-label">TTC ({{ priceHT|number_format(0) }} € HT)</div>
                </div>
            </div>
        </div>

        <!-- STEPPER -->
        <div class="wizard-progress-bar">
            <div class="progress-fill" id="progressFill" style="width: 0%;"></div>
            <div class="wizard-step active" data-step="1" onclick="goToStep(1)">
                <div class="wizard-step-circle">1</div>
                <div class="wizard-step-label">Identité</div>
            </div>
            <div class="wizard-step" data-step="2" onclick="goToStep(2)">
                <div class="wizard-step-circle">2</div>
                <div class="wizard-step-label">Entreprise</div>
            </div>
            <div class="wizard-step" data-step="3" onclick="goToStep(3)">
                <div class="wizard-step-circle">3</div>
                <div class="wizard-step-label">Contact</div>
            </div>
            <div class="wizard-step" data-step="4" onclick="goToStep(4)">
                <div class="wizard-step-circle">4</div>
                <div class="wizard-step-label">Services</div>
            </div>
            <div class="wizard-step" data-step="5" onclick="goToStep(5)">
                <div class="wizard-step-circle">5</div>
                <div class="wizard-step-label">Réseaux</div>
            </div>
            <div class="wizard-step" data-step="6" onclick="goToStep(6)">
                <div class="wizard-step-circle">6</div>
                <div class="wizard-step-label">Premium</div>
            </div>
        </div>

        <!-- FORMULAIRE -->
        <form method="post" action="{{ path('app_card_modify_submit', {id: beneficiaire.id}) }}" enctype="multipart/form-data">

            <div class="wizard-card">
                <div class="wizard-card-header">
                    <div class="wizard-card-icon">{{ beneficiaire.initiales ?? (beneficiaire.prenom|slice(0,1)|upper ~ beneficiaire.nom|slice(0,1)|upper) }}</div>
                    <div class="wizard-card-title">
                        <h2>{{ beneficiaire.fullName }}</h2>
                        <p>{{ beneficiaire.fonction ?? 'Carte bénéficiaire' }} — Commande {{ commande.reference }}</p>
                    </div>
                </div>

                <div class="wizard-card-body">

                    {# ═══════════════════════════════════════════════
                       ÉTAPE 1 : IDENTITÉ
                       ═══════════════════════════════════════════════ #}
                    <div class="form-step active" data-step="1">
                        <div class="form-step-title"><span class="step-emoji">👤</span>Informations personnelles</div>

                        {# Identité verrouillée — non modifiable #}
                        <div style="background:#f1f5f9;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;">
                            <div style="width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                {{ beneficiaire.initiales ?? (beneficiaire.prenom|slice(0,1)|upper ~ beneficiaire.nom|slice(0,1)|upper) }}
                            </div>
                            <div>
                                <p style="margin:0;font-weight:700;color:#1e293b;font-size:1rem;">{{ beneficiaire.prenom }} {{ beneficiaire.nom }}</p>
                                <p style="margin:.25rem 0 0;font-size:.78rem;color:#94a3b8;">🔒 Prénom et Nom non modifiables. Pour changer d'identité, commandez une nouvelle carte.</p>
                            </div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group"><label>Fonction / Poste</label><input type="text" name="fonction" class="form-input" value="{{ beneficiaire.fonction }}"></div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group"><label>Titre</label><input type="text" name="titre" class="form-input" value="{{ beneficiaire.titre }}"></div>
                        </div>
                        <div class="form-row">
                            <div class="form-group"><label>Type d'avatar</label>
                                <select name="avatarType" class="form-input">
                                    <option value="initiales" {{ beneficiaire.avatarType == 'initiales' ? 'selected' : '' }}>Initiales</option>
                                    <option value="photo" {{ beneficiaire.avatarType == 'photo' ? 'selected' : '' }}>Photo</option>
                                </select>
                            </div>
                            <div class="form-group"><label>Initiales</label><input type="text" name="initiales" class="form-input" value="{{ beneficiaire.initiales }}" maxlength="3" style="max-width: 150px;"><div class="form-help">2-3 lettres (ex: JD)</div></div>
                        </div>

                        <div class="wizard-nav">
                            <div></div>
                            <button type="button" class="btn-next" onclick="goToStep(2)">Suivant →</button>
                        </div>
                    </div>

                    {# ═══════════════════════════════════════════════
                       ÉTAPE 2 : ENTREPRISE & CHARTE AVEC MOCKUP
                       ═══════════════════════════════════════════════ #}
                    <div class="form-step" data-step="2">
                        <div class="form-step-title"><span class="step-emoji">🏢</span>Entreprise & Charte</div>

                        <div class="form-row">
                            <div class="form-group"><label>Entreprise</label><input type="text" name="entreprise" class="form-input" value="{{ beneficiaire.entreprise }}"></div>
                            <div class="form-group"><label>Slogan</label><input type="text" name="slogan" class="form-input" value="{{ beneficiaire.slogan }}"></div>

                            {# ── LOGO ── #}
                            <div class="form-group">
                                <label>Logo de l'entreprise</label>
                                {% if beneficiaire.logo %}
                                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px; padding: 12px 14px; background: #f9f9fb; border: 1px solid #d1d1d6; border-radius: 10px;">
                                    <img src="/uploads/logos/{{ beneficiaire.logo }}" alt="Logo actuel" style="max-height: 42px; max-width: 80px; border-radius: 8px; object-fit: contain; background: white; padding: 4px;">
                                    <div style="flex: 1;">
                                        <div style="font-size: 13px; color: #1d1d1f; font-weight: 600;">Logo actuel</div>
                                        <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: #ff6b6b; margin-top: 4px;">
                                            <input type="checkbox" name="removeLogo" value="1" style="accent-color: #ff6b6b;"> Supprimer le logo
                                        </label>
                                    </div>
                                </div>
                                {% endif %}
                                <div style="position: relative;">
                                    <input type="file" name="logo" id="logoUpload" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" style="display: none;" onchange="previewLogo(this)">
                                    <label for="logoUpload" style="display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #d1d1d6; border-radius: 10px; background: #f9f9fb; cursor: pointer; transition: all 0.2s;" onmouseover="this.style.borderColor='#86868b'" onmouseout="this.style.borderColor='#d1d1d6'">
                                        <div style="width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #e8e8ed, #d1d1d6); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;">📁</div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 14px; font-weight: 600; color: #1d1d1f;">{{ beneficiaire.logo ? 'Changer le logo' : 'Ajouter un logo' }}</div>
                                            <div style="font-size: 11px; color: #86868b; margin-top: 2px;">PNG, JPG, WebP • max 2 Mo</div>
                                        </div>
                                        <div style="color: #86868b; font-size: 18px;">›</div>
                                    </label>
                                    <div id="logoPreview" style="display: none; margin-top: 10px; padding: 12px 14px; background: #f0fff4; border: 1px solid #51cf66; border-radius: 10px; text-align: center;">
                                        <img id="logoPreviewImg" src="" alt="Aperçu" style="max-height: 50px; max-width: 120px; border-radius: 8px; background: white; padding: 4px;">
                                        <div style="font-size: 11px; color: #51cf66; margin-top: 6px; font-weight: 600;">✓ Nouveau logo sélectionné</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group"><label>Site web</label><input type="url" name="siteWeb" class="form-input" value="{{ beneficiaire.siteWeb }}" placeholder="https://"></div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                <label>Charte graphique</label>
                                <div style="display:flex;gap:16px;flex-wrap:wrap;">
                                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;border-radius:10px;background:var(--wizard-gray-light);"><input type="radio" name="charteType" value="template" {{ beneficiaire.charteType == 'template' ? 'checked' : '' }} onchange="document.getElementById('templateSection').style.display='block';document.getElementById('persoSection').style.display='none';"> Template prédéfini</label>
                                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;border-radius:10px;background:var(--wizard-gray-light);"><input type="radio" name="charteType" value="personnalisee" {{ beneficiaire.charteType == 'personnalisee' ? 'checked' : '' }} onchange="document.getElementById('templateSection').style.display='none';document.getElementById('persoSection').style.display='block';"> Personnalisée</label>
                                </div>
                            </div>
                        </div>

                        {# ── SÉLECTEUR DE CHARTE AVEC MOCKUP ── #}
                        <div id="templateSection" style="{{ beneficiaire.charteType == 'personnalisee' ? 'display:none;' : '' }}">
                            <input type="hidden" name="charteTemplate" id="charteTemplateHidden" value="{{ beneficiaire.charteTemplate ?? 1 }}">

                            {% include 'components/_charte_mockup.html.twig' with {
                                mockupId: 1,
                                packType: commande.packType,
                                currentCharte: beneficiaire.charteTemplate ?? 53,
                                mockupNom: beneficiaire.fullName,
                                mockupInitiales: beneficiaire.initiales ?? (beneficiaire.prenom|slice(0,1)|upper ~ beneficiaire.nom|slice(0,1)|upper),
                                mockupFonction: beneficiaire.fonction ?? 'VOTRE FONCTION',
                                mockupEntreprise: beneficiaire.entreprise ?? 'VOTRE ENTREPRISE',
                                mockupSlogan: beneficiaire.slogan ?? 'Votre slogan'
                            } %}
                        </div>

                        {# ── SECTION PERSONNALISÉE ── #}
                        <div id="persoSection" style="{{ beneficiaire.charteType != 'personnalisee' ? 'display:none;' : '' }}">
                            <div class="form-row">
                                <div class="form-group"><label>Couleur principale</label><input type="color" name="couleurPrincipale" value="{{ beneficiaire.couleurPrincipale ?? '#667eea' }}" class="form-input" style="height:50px;cursor:pointer;"></div>
                                <div class="form-group"><label>Couleur secondaire</label><input type="color" name="couleurSecondaire" value="{{ beneficiaire.couleurSecondaire ?? '#764ba2' }}" class="form-input" style="height:50px;cursor:pointer;"></div>
                            </div>
                        </div>

                        <div class="wizard-nav">
                            <button type="button" class="btn-prev" onclick="goToStep(1)">← Précédent</button>
                            <button type="button" class="btn-next" onclick="goToStep(3)">Suivant →</button>
                        </div>
                    </div>

                    {# ═══════════════════════════════════════════════
                       ÉTAPE 3 : COORDONNÉES
                       ═══════════════════════════════════════════════ #}
                    <div class="form-step" data-step="3">
                        <div class="form-step-title"><span class="step-emoji">📞</span>Coordonnées</div>

                        <div class="form-row">
                            <div class="form-group"><label>Email</label><input type="email" name="email" class="form-input" value="{{ beneficiaire.email }}"></div>
                            <div class="form-group"><label>Mobile</label><input type="tel" name="mobile" class="form-input" value="{{ beneficiaire.mobile }}"></div>
                        </div>
                        <div class="form-row">
                            <div class="form-group"><label>Téléphone fixe</label><input type="tel" name="fixe" class="form-input" value="{{ beneficiaire.fixe }}"></div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group"><label>Adresse</label><textarea name="adresse" class="form-input" rows="2">{{ beneficiaire.adresse }}</textarea></div>
                        </div>

                        <div class="wizard-nav">
                            <button type="button" class="btn-prev" onclick="goToStep(2)">← Précédent</button>
                            <button type="button" class="btn-next" onclick="goToStep(4)">Suivant →</button>
                        </div>
                    </div>

                    {# ═══════════════════════════════════════════════
                       ÉTAPE 4 : SERVICES / EXPERTISES
                       ═══════════════════════════════════════════════ #}
                    <div class="form-step" data-step="4">
                        <div class="form-step-title"><span class="step-emoji">🛠️</span>Services & Expertises</div>

                        <div class="form-row">
                            <div class="form-group"><label>Service 1</label><input type="text" name="service1" class="form-input" value="{{ beneficiaire.service1 }}"></div>
                            <div class="form-group"><label>Service 2</label><input type="text" name="service2" class="form-input" value="{{ beneficiaire.service2 }}"></div>
                        </div>
                        <div class="form-row">
                            <div class="form-group"><label>Service 3</label><input type="text" name="service3" class="form-input" value="{{ beneficiaire.service3 }}"></div>
                            <div class="form-group"><label>Service 4</label><input type="text" name="service4" class="form-input" value="{{ beneficiaire.service4 }}"></div>
                        </div>

                        <div style="margin-top: 24px;">
                            <div class="form-step-title"><span class="step-emoji">📊</span>Statistiques (footer carte)</div>
                            <div class="form-row">
                                <div class="form-group"><label>Expertise</label><input type="text" name="expertise" class="form-input" value="{{ beneficiaire.expertise }}" placeholder="Ex: 12 ans"></div>
                                <div class="form-group"><label>Séances / Projets</label><input type="text" name="seances" class="form-input" value="{{ beneficiaire.seances }}" placeholder="Ex: 500+"></div>
                            </div>
                            <div class="form-row full">
                                <div class="form-group"><label>Satisfaction</label><input type="text" name="satisfaction" class="form-input" value="{{ beneficiaire.satisfaction }}" placeholder="Ex: 100%"></div>
                            </div>
                        </div>

                        <div class="wizard-nav">
                            <button type="button" class="btn-prev" onclick="goToStep(3)">← Précédent</button>
                            <button type="button" class="btn-next" onclick="goToStep(5)">Suivant →</button>
                        </div>
                    </div>

                    {# ═══════════════════════════════════════════════
                       ÉTAPE 5 : RÉSEAUX SOCIAUX & VISIO
                       ═══════════════════════════════════════════════ #}
                    <div class="form-step" data-step="5">
                        <div class="form-step-title"><span class="step-emoji">🌐</span>Réseaux sociaux</div>

                        <div class="form-row">
                            <div class="form-group"><label>LinkedIn</label><input type="url" name="linkedin" class="form-input" value="{{ beneficiaire.linkedin }}"></div>
                            <div class="form-group"><label>Instagram</label><input type="url" name="insta" class="form-input" value="{{ beneficiaire.insta }}"></div>
                        </div>
                        <div class="form-row">
                            <div class="form-group"><label>Facebook</label><input type="url" name="facebook" class="form-input" value="{{ beneficiaire.facebook }}"></div>
                            <div class="form-group"><label>X (Twitter)</label><input type="url" name="x" class="form-input" value="{{ beneficiaire.x }}"></div>
                        </div>
                        <div class="form-row">
                            <div class="form-group"><label>YouTube</label><input type="url" name="youtube" class="form-input" value="{{ beneficiaire.youtube }}"></div>
                            <div class="form-group"><label>TikTok</label><input type="url" name="tiktok" class="form-input" value="{{ beneficiaire.tiktok }}"></div>
                        </div>
                        <div class="form-row full">
                            <div class="form-group"><label>Threads</label><input type="url" name="threads" class="form-input" value="{{ beneficiaire.threads }}"></div>
                        </div>

                        <div style="margin-top: 24px;">
                            <div class="form-step-title"><span class="step-emoji">📹</span>Visioconférence</div>
                            <div class="form-row">
                                <div class="form-group"><label>Zoom</label><input type="url" name="zoom" class="form-input" value="{{ beneficiaire.zoom }}"></div>
                                <div class="form-group"><label>Google Meet</label><input type="url" name="googleMeet" class="form-input" value="{{ beneficiaire.googleMeet }}"></div>
                            </div>
                            <div class="form-row full">
                                <div class="form-group"><label>Microsoft Teams</label><input type="url" name="microsoftTeams" class="form-input" value="{{ beneficiaire.microsoftTeams }}"></div>
                            </div>
                        </div>

                        <div class="wizard-nav">
                            <button type="button" class="btn-prev" onclick="goToStep(4)">← Précédent</button>
                            <button type="button" class="btn-next" onclick="goToStep(6)">Suivant →</button>
                        </div>
                    </div>

                    {# ═══════════════════════════════════════════════
                       ÉTAPE 6 : FONCTIONNALITÉS PREMIUM
                       ═══════════════════════════════════════════════ #}
                    <div class="form-step" data-step="6">
                        <div class="form-step-title"><span class="step-emoji">⭐</span>Fonctionnalités Premium</div>
                        <p style="font-size:13px;color:var(--wizard-gray);margin-bottom:20px;">Renseignez l'URL pour activer la fonctionnalité. Laissez vide pour la désactiver.</p>

                        <div class="form-row full">
                            <div class="form-group">
                                <label>📅 Prise de rendez-vous</label>
                                <input type="url" name="agendaLink" class="form-input" value="{{ beneficiaire.agendaLink }}" placeholder="https://calendly.com/votre-lien">
                                <div class="form-help">Calendly, Cal.com, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                <label>🖼️ Galerie photos</label>
                                <input type="url" name="galerieLink" class="form-input" value="{{ beneficiaire.galerieLink }}" placeholder="https://votre-galerie.com">
                                <div class="form-help">Portfolio, réalisations, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                <label>⭐ Avis clients</label>
                                <input type="url" name="satisfactionLink" class="form-input" value="{{ beneficiaire.satisfactionLink }}" placeholder="https://g.page/r/votre-avis">
                                <div class="form-help">Google Reviews, Trustpilot, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                <label>📋 Catalogue / Menu</label>
                                <input type="url" name="catalogueLink" class="form-input" value="{{ beneficiaire.catalogueLink }}" placeholder="https://votre-catalogue.com">
                                <div class="form-help">PDF en ligne, lien externe, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                <label>🎬 Vidéo de présentation</label>
                                <input type="url" name="videoLink" class="form-input" value="{{ beneficiaire.videoLink }}" placeholder="https://youtube.com/watch?v=...">
                                <div class="form-help">YouTube, Vimeo, etc.</div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                <label>🔗 Lien personnalisé</label>
                                <input type="url" name="lienPersonnalise" class="form-input" value="{{ beneficiaire.lienPersonnalise }}" placeholder="https://...">
                                <div class="form-help">N'importe quel lien externe.</div>
                            </div>
                        </div>

                        <div class="wizard-nav" style="margin-top: 32px;">
                            <button type="button" class="btn-prev" onclick="goToStep(5)">← Précédent</button>
                            <button type="submit" class="btn-submit">
                                {% if isAdmin %}
                                    ✅ Enregistrer (sans paiement — admin)
                                {% else %}
                                    Continuer vers le paiement · {{ priceTTC|number_format(2, ',', ' ') }} € TTC →
                                {% endif %}
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </form>

    </div>
</div>

<script>
const totalSteps = 6;
let currentStep = 1;

function goToStep(step) {
    // Masquer toutes les étapes
    document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));
    document.querySelectorAll('.wizard-step').forEach(s => {
        s.classList.remove('active');
        const sStep = parseInt(s.dataset.step);
        if (sStep < step) s.classList.add('completed');
        else s.classList.remove('completed');
    });

    // Afficher l'étape cible
    document.querySelector('.form-step[data-step="' + step + '"]').classList.add('active');
    document.querySelector('.wizard-step[data-step="' + step + '"]').classList.add('active');

    // Barre de progression
    const fill = ((step - 1) / (totalSteps - 1)) * 100;
    document.getElementById('progressFill').style.width = fill + '%';

    currentStep = step;
    window.scrollTo({ top: 200, behavior: 'smooth' });
}

function previewLogo(input) {
    const preview = document.getElementById('logoPreview');
    const img = document.getElementById('logoPreviewImg');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    } else {
        preview.style.display = 'none';
    }
}

function toggleFeature(el, name) {
    const cb = el.querySelector('input[type="checkbox"]');
    cb.checked = !cb.checked;
    el.classList.toggle('active');
    const linkDiv = el.nextElementSibling;
    if (linkDiv && linkDiv.classList.contains('feature-link')) {
        linkDiv.style.display = cb.checked ? 'block' : 'none';
    }
}
</script>

{% include 'components/_charte_js.html.twig' with {
    packType: commande.packType,
    mockupIds: [1],
    defaultChartes: { 1: beneficiaire.charteTemplate ?? (commande.packType == 'forcevente' ? 55 : 53) }
} %}
{% endblock %}