{% extends 'base.html.twig' %}

{% block title %}Commander Pack Multi-Cartes{% endblock %}

{# CSS externalisé dans card.css #}

{% block body %}
<section class="multi-cartes-section">
    <div class="multi-cartes-container">

        <!-- ═══════════════════════════════════════════════════════════════════
             HEADER - BANDEAU VIOLET
             ═══════════════════════════════════════════════════════════════════ -->
        <div class="header-pack">
            <div class="header-pack-info">
                <span class="header-pack-icon">🎯</span>
                <div>
                    <div class="header-pack-title" id="packTitle">Pack Multi-Cartes (2 cartes)</div>
                    <div class="header-pack-subtitle">
                        <span id="totalCardsText">4 cartes de visite digitales à configurer</span>
                    </div>
                </div>
            </div>
            <div class="header-pack-price">
                <div class="header-pack-price-amount">{{ priceHT ?? '1 198' }} € <span class="header-pack-price-ht">HT</span></div>
                <div class="header-pack-price-ttc">{{ priceTTC ?? '1 437,60' }} € TTC</div>
            </div>
        </div>

        <!-- ═══════════════════════════════════════════════════════════════════
             SÉLECTEUR DE CARTES - GÉNÉRÉ PAR JAVASCRIPT
             ═══════════════════════════════════════════════════════════════════ -->
        <div class="cards-selector" id="cardsSelector">
            <!-- Les boutons seront générés dynamiquement par JavaScript -->
        </div>

        <!-- ═══════════════════════════════════════════════════════════════════
             LÉGENDE DES PACKS - GÉNÉRÉE PAR JAVASCRIPT
             ═══════════════════════════════════════════════════════════════════ -->
        <div class="packs-legend" id="packsLegend">
            <!-- La légende sera générée dynamiquement par JavaScript -->
        </div>

        <!-- ═══════════════════════════════════════════════════════════════════
             STEPPER DES ÉTAPES
             ═══════════════════════════════════════════════════════════════════ -->
        <div class="stepper-container pack-1" id="stepperContainer">
            {% set steps = [
                {num: 1, label: 'Identité'},
                {num: 2, label: 'Entreprise'},
                {num: 3, label: 'Coordonnées'},
                {num: 4, label: 'Services'},
                {num: 5, label: 'Réseaux'},
                {num: 6, label: 'Premium'}
            ] %}
            
            {% for step in steps %}
                <div class="stepper-item">
                    <div class="stepper-step" onclick="goToStep({{ step.num }})">
                        <div class="stepper-number{% if step.num == 1 %} active{% endif %}" id="stepNumber{{ step.num }}">
                            {{ step.num }}
                        </div>
                        <span class="stepper-label{% if step.num == 1 %} active{% endif %}" id="stepLabel{{ step.num }}">
                            {{ step.label }}
                        </span>
                    </div>
                    {% if not loop.last %}
                        <div class="stepper-line" id="stepLine{{ step.num }}"></div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        <!-- ═══════════════════════════════════════════════════════════════════
             FORMULAIRE BÉNÉFICIAIRE
             ═══════════════════════════════════════════════════════════════════ -->
        <div class="beneficiaire-card" id="beneficiaireCard">
            <div class="beneficiaire-header">
                <div class="beneficiaire-number pack-1" id="beneficiaireNumber">1</div>
                <div class="beneficiaire-info">
                    <h2>Bénéficiaire <span id="currentCardNum">1</span> sur <span id="totalCardsNum">4</span></h2>
                    <p>Renseignez les informations pour cette carte de visite</p>
                </div>
            </div>

            <button class="btn-copy-entreprise pack-1" id="btnCopyEntreprise" type="button">
                📋 Copier les infos entreprise du bénéficiaire 1
            </button>

            <!-- Section Informations personnelles -->
            <div class="section-title">
                <span class="section-title-icon">👤</span>
                Informations personnelles
            </div>

            {{ form_start(form) }}
            
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="prenom">Prénom *</label>
                    <input type="text" class="form-input" id="prenom" name="prenom" placeholder="Votre prénom" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="nom">Nom *</label>
                    <input type="text" class="form-input" id="nom" name="nom" placeholder="Votre nom" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="fonction">Fonction *</label>
                    <input type="text" class="form-input" id="fonction" name="fonction" placeholder="Ex: Directeur Commercial">
                </div>
                <div class="form-group">
                    <label class="form-label" for="email">Email *</label>
                    <input type="email" class="form-input" id="email" name="email" placeholder="votre@email.com" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="mobile">Téléphone mobile *</label>
                    <input type="tel" class="form-input" id="mobile" name="mobile" placeholder="06 XX XX XX XX" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="fixe">Téléphone fixe</label>
                    <input type="tel" class="form-input" id="fixe" name="fixe" placeholder="05 XX XX XX XX">
                </div>
            </div>

            <!-- Boutons de navigation -->
            <div class="navigation-buttons">
                <button type="button" class="btn-nav btn-prev" onclick="previousCard()">
                    ← Carte précédente
                </button>
                <button type="button" class="btn-nav btn-next pack-1" id="btnNext" onclick="nextCard()">
                    Carte suivante →
                </button>
            </div>

            {{ form_end(form) }}
        </div>

    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    // ═══════════════════════════════════════════════════════════════════
    // DÉTECTION AUTOMATIQUE DEPUIS L'URL
    // URL format: /commande/new/multi-X?qty=Y
    // - X = nombre de cartes par pack (2, 3, ou 4)
    // - Y = nombre de packs commandés
    // ═══════════════════════════════════════════════════════════════════
    
    function getPackConfigFromURL() {
        const path = window.location.pathname;
        const urlParams = new URLSearchParams(window.location.search);
        
        // Extraire le type de pack depuis l'URL (multi-2, multi-3, multi-4)
        let cardsPerPack = 2; // valeur par défaut
        const multiMatch = path.match(/multi-(\d+)/);
        if (multiMatch) {
            cardsPerPack = parseInt(multiMatch[1]);
        }
        
        // Extraire la quantité de packs depuis ?qty=X
        let quantity = parseInt(urlParams.get('qty')) || 1;
        
        // Calculer le total de cartes
        const totalCards = cardsPerPack * quantity;
        
        console.log(`Configuration détectée: ${cardsPerPack} cartes/pack × ${quantity} packs = ${totalCards} cartes`);
        
        return {
            cardsPerPack: cardsPerPack,
            quantity: quantity,
            totalCards: totalCards
        };
    }

    // ═══════════════════════════════════════════════════════════════════
    // VARIABLES GLOBALES
    // ═══════════════════════════════════════════════════════════════════
    const config = getPackConfigFromURL();
    
    let currentCard = 1;
    let currentStep = 1;
    let currentPack = 1;
    
    const totalCards = config.totalCards;
    const cardsPerPack = config.cardsPerPack;
    const totalPacks = config.quantity;
    const totalSteps = 6;

    // ═══════════════════════════════════════════════════════════════════
    // GÉNÉRATION DES BOUTONS DE CARTES
    // ═══════════════════════════════════════════════════════════════════
    function generateCardButtons() {
        const container = document.getElementById('cardsSelector');
        container.innerHTML = '';
        
        for (let cardNum = 1; cardNum <= totalCards; cardNum++) {
            const packNum = Math.floor((cardNum - 1) / cardsPerPack) + 1;
            const isActive = cardNum === 1;
            
            const btn = document.createElement('button');
            btn.className = `card-btn pack-${packNum}${isActive ? ' active' : ''}`;
            btn.setAttribute('data-card', cardNum);
            btn.setAttribute('data-pack', packNum);
            btn.onclick = () => selectCard(cardNum, packNum);
            
            btn.innerHTML = `
                <span class="card-btn-number">${cardNum}</span>
                Carte ${cardNum}
            `;
            
            container.appendChild(btn);
        }
    }

    // ═══════════════════════════════════════════════════════════════════
    // GÉNÉRATION DE LA LÉGENDE DES PACKS
    // ═══════════════════════════════════════════════════════════════════
    function generatePacksLegend() {
        const container = document.getElementById('packsLegend');
        container.innerHTML = '';
        
        for (let packNum = 1; packNum <= totalPacks; packNum++) {
            const startCard = (packNum - 1) * cardsPerPack + 1;
            let endCard = packNum * cardsPerPack;
            if (endCard > totalCards) endCard = totalCards;
            
            const item = document.createElement('div');
            item.className = 'pack-legend-item';
            item.innerHTML = `
                <div class="pack-legend-color pack-${packNum}"></div>
                <span>Pack ${packNum} (cartes ${startCard}-${endCard})</span>
            `;
            
            container.appendChild(item);
        }
    }

    // ═══════════════════════════════════════════════════════════════════
    // MISE À JOUR DES TEXTES HEADER
    // ═══════════════════════════════════════════════════════════════════
    function updateHeaderTexts() {
        document.getElementById('packTitle').textContent = `Pack Multi-Cartes (${cardsPerPack} cartes)`;
        document.getElementById('totalCardsText').textContent = `${totalCards} cartes de visite digitales à configurer`;
        document.getElementById('totalCardsNum').textContent = totalCards;
    }

    // ═══════════════════════════════════════════════════════════════════
    // SÉLECTION D'UNE CARTE
    // ═══════════════════════════════════════════════════════════════════
    function selectCard(cardNum, packNum) {
        currentCard = cardNum;
        currentPack = packNum;

        // Mettre à jour l'UI des boutons de cartes
        document.querySelectorAll('.card-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        const activeBtn = document.querySelector(`.card-btn[data-card="${cardNum}"]`);
        if (activeBtn) {
            activeBtn.classList.add('active');
            activeBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
        }

        // Mettre à jour le numéro du bénéficiaire
        document.getElementById('currentCardNum').textContent = cardNum;
        document.getElementById('beneficiaireNumber').textContent = cardNum;

        // Mettre à jour les classes de pack pour les couleurs
        updatePackClasses(packNum);

        // Charger les données de cette carte
        loadCardData(cardNum);
        
        console.log(`Carte ${cardNum} sélectionnée (Pack ${packNum})`);
    }

    // ═══════════════════════════════════════════════════════════════════
    // MISE À JOUR DES CLASSES DE PACK (pour les couleurs)
    // ═══════════════════════════════════════════════════════════════════
    function updatePackClasses(packNum) {
        // Stepper
        const stepper = document.getElementById('stepperContainer');
        if (stepper) {
            stepper.className = 'stepper-container pack-' + packNum;
        }

        // Numéro bénéficiaire
        const benefNum = document.getElementById('beneficiaireNumber');
        if (benefNum) {
            benefNum.className = 'beneficiaire-number pack-' + packNum;
        }

        // Bouton copier
        const btnCopy = document.getElementById('btnCopyEntreprise');
        if (btnCopy) {
            btnCopy.className = 'btn-copy-entreprise pack-' + packNum;
        }

        // Bouton suivant
        const btnNext = document.getElementById('btnNext');
        if (btnNext) {
            btnNext.className = 'btn-nav btn-next pack-' + packNum;
        }
    }

    // ═══════════════════════════════════════════════════════════════════
    // NAVIGATION ENTRE LES CARTES
    // ═══════════════════════════════════════════════════════════════════
    function nextCard() {
        if (currentCard < totalCards) {
            const nextCardNum = currentCard + 1;
            const nextPackNum = Math.floor((nextCardNum - 1) / cardsPerPack) + 1;
            selectCard(nextCardNum, nextPackNum);
        }
    }

    function previousCard() {
        if (currentCard > 1) {
            const prevCardNum = currentCard - 1;
            const prevPackNum = Math.floor((prevCardNum - 1) / cardsPerPack) + 1;
            selectCard(prevCardNum, prevPackNum);
        }
    }

    // ═══════════════════════════════════════════════════════════════════
    // NAVIGATION ENTRE LES ÉTAPES DU FORMULAIRE
    // ═══════════════════════════════════════════════════════════════════
    function goToStep(stepNum) {
        currentStep = stepNum;

        for (let i = 1; i <= totalSteps; i++) {
            const numEl = document.getElementById('stepNumber' + i);
            const labelEl = document.getElementById('stepLabel' + i);
            const lineEl = document.getElementById('stepLine' + i);

            if (numEl) {
                numEl.classList.remove('active', 'completed');
                if (i < stepNum) {
                    numEl.classList.add('completed');
                    numEl.innerHTML = '✓';
                } else if (i === stepNum) {
                    numEl.classList.add('active');
                    numEl.innerHTML = i;
                } else {
                    numEl.innerHTML = i;
                }
            }

            if (labelEl) {
                labelEl.classList.remove('active');
                if (i === stepNum) {
                    labelEl.classList.add('active');
                }
            }

            if (lineEl) {
                if (i < stepNum) {
                    lineEl.classList.add('completed');
                } else {
                    lineEl.classList.remove('completed');
                }
            }
        }
    }

    // ═══════════════════════════════════════════════════════════════════
    // CHARGER LES DONNÉES D'UNE CARTE
    // ═══════════════════════════════════════════════════════════════════
    function loadCardData(cardNum) {
        console.log('Chargement des données de la carte ' + cardNum);
        // À implémenter selon votre logique métier
    }

    // ═══════════════════════════════════════════════════════════════════
    // INITIALISATION
    // ═══════════════════════════════════════════════════════════════════
    document.addEventListener('DOMContentLoaded', function() {
        // Générer les éléments dynamiques
        generateCardButtons();
        generatePacksLegend();
        updateHeaderTexts();
        
        // Sélectionner la première carte par défaut
        selectCard(1, 1);
        
        // Event listener pour copier les infos entreprise
        const btnCopy = document.getElementById('btnCopyEntreprise');
        if (btnCopy) {
            btnCopy.addEventListener('click', function() {
                console.log('Copie des infos entreprise du bénéficiaire 1');
                alert('Infos entreprise copiées depuis le bénéficiaire 1');
            });
        }
        
        console.log(`✅ Initialisé: ${totalCards} cartes, ${cardsPerPack} cartes/pack, ${totalPacks} packs`);
    });
</script>
{% endblock %}