{# SYSTÈME D'ONGLETS POUR FORMULAIRES MULTIPLES #}
{# À intégrer dans newEssentiel_html.twig ou autres pages de création de carte #}
{# CSS externalisé dans card.css #}

<!-- ========================================================================== -->
<!-- HTML : SÉLECTEUR DE QUANTITÉ -->
<!-- ========================================================================== -->
<div class="quantity-selector">
    <h3>
        <span>🔢</span>
        <span>Combien de cartes souhaitez-vous créer ?</span>
    </h3>
    
    <div class="quantity-controls-input">
        <label for="cardsQuantity">Quantité :</label>
        <select id="cardsQuantity" name="cardsQuantity">
            <option value="1">1 carte</option>
            <option value="2">2 cartes</option>
            <option value="3">3 cartes</option>
            <option value="4">4 cartes</option>
            <option value="5">5 cartes</option>
            <option value="10">10 cartes</option>
            <option value="15">15 cartes</option>
            <option value="20">20 cartes</option>
            <option value="25">25 cartes</option>
            <option value="50">50 cartes</option>
        </select>
    </div>
    
    <div class="quantity-info">
        💡 <strong>Astuce :</strong> Vous pouvez créer plusieurs cartes en une seule fois. Chaque carte aura son propre formulaire dans un onglet séparé.
    </div>
</div>

<!-- ========================================================================== -->
<!-- HTML : CONTENEUR DES ONGLETS ET FORMULAIRES -->
<!-- ========================================================================== -->
<div id="formsTabsWrapper" style="display: none;">
    
    <!-- Compteurs et progression -->
    <div class="cards-count-info">
        <div class="count-card">
            <span>Total de cartes</span>
            <span class="number" id="totalCards">1</span>
        </div>
        <div class="count-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <span>Formulaires complétés</span>
            <span class="number" id="completedCards">0</span>
        </div>
    </div>
    
    <div class="forms-progress">
        <div class="progress-text">
            Progression : <span id="progressText">0%</span>
        </div>
        <div class="progress-bar-container">
            <div class="progress-bar" id="progressBar" style="width: 0%"></div>
        </div>
    </div>
    
    <!-- Message de validation -->
    <div id="formValidationMessage" class="form-validation-message"></div>
    
    <!-- Container principal -->
    <div class="forms-tabs-container">
        
        <!-- Onglets -->
        <div class="forms-tabs" id="formsTabs">
            <!-- Les onglets seront générés ici par JavaScript -->
        </div>
        
        <!-- Conteneur des formulaires -->
        <div class="forms-container" id="formsContainer">
            <!-- Les formulaires seront générés ici par JavaScript -->
        </div>
        
        <!-- Navigation -->
        <div class="forms-navigation">
            <button type="button" class="nav-btn prev" id="prevBtn" disabled>
                <span>←</span>
                <span>Carte précédente</span>
            </button>
            
            <button type="button" class="nav-btn next" id="nextBtn">
                <span>Carte suivante</span>
                <span>→</span>
            </button>
        </div>
    </div>
    
    <!-- Bouton de soumission finale -->
    <button type="button" class="submit-all-btn" id="submitAllBtn" style="display: none;">
        ✅ Ajouter toutes les cartes au panier
    </button>
</div>

<!-- ========================================================================== -->
<!-- JAVASCRIPT : SYSTÈME D'ONGLETS DYNAMIQUE -->
<!-- ========================================================================== -->
<script>
(function() {
    console.log('🎯 Initialisation du système d\'onglets pour formulaires multiples');
    
    // Configuration
    const config = {
        maxCards: 50,
        requiredFields: ['prenom', 'nom', 'entreprise', 'fonction', 'fixe', 'email'], // Adapter selon le type de carte
        formTemplate: null // Sera défini plus bas
    };
    
    // État de l'application
    let state = {
        totalCards: 1,
        currentCard: 1,
        formsData: {}, // Stockage des données de chaque formulaire
        completedForms: new Set() // Formulaires complétés
    };
    
    // Éléments DOM
    const elements = {
        quantitySelect: document.getElementById('cardsQuantity'),
        tabsWrapper: document.getElementById('formsTabsWrapper'),
        tabsContainer: document.getElementById('formsTabs'),
        formsContainer: document.getElementById('formsContainer'),
        prevBtn: document.getElementById('prevBtn'),
        nextBtn: document.getElementById('nextBtn'),
        submitAllBtn: document.getElementById('submitAllBtn'),
        progressBar: document.getElementById('progressBar'),
        progressText: document.getElementById('progressText'),
        totalCardsDisplay: document.getElementById('totalCards'),
        completedCardsDisplay: document.getElementById('completedCards'),
        validationMessage: document.getElementById('formValidationMessage'),
        originalForm: document.querySelector('form') // Le formulaire original
    };
    
    // Sauvegarder le template du formulaire original
    if (elements.originalForm) {
        // Clone le formulaire sans les boutons submit
        const formClone = elements.originalForm.cloneNode(true);
        formClone.querySelectorAll('button[type="submit"]').forEach(btn => btn.remove());
        config.formTemplate = formClone.innerHTML;
        
        // Masquer le formulaire original
        elements.originalForm.style.display = 'none';
    }
    
    // ========================================================================
    // GÉNÉRATION DES ONGLETS
    // ========================================================================
    function generateTabs(quantity) {
        console.log('📑 Génération de', quantity, 'onglets');
        elements.tabsContainer.innerHTML = '';
        
        for (let i = 1; i <= quantity; i++) {
            const tab = document.createElement('div');
            tab.className = 'form-tab';
            if (i === 1) tab.classList.add('active');
            tab.dataset.cardNumber = i;
            
            tab.innerHTML = `
                <span class="form-tab-icon">📇</span>
                <span>Carte ${i}</span>
                <span class="form-tab-number">${i}/${quantity}</span>
            `;
            
            tab.addEventListener('click', () => switchToCard(i));
            elements.tabsContainer.appendChild(tab);
        }
    }
    
    // ========================================================================
    // GÉNÉRATION DES FORMULAIRES
    // ========================================================================
    function generateForms(quantity) {
        console.log('📝 Génération de', quantity, 'formulaires');
        elements.formsContainer.innerHTML = '';
        
        for (let i = 1; i <= quantity; i++) {
            const panel = document.createElement('div');
            panel.className = 'form-panel';
            if (i === 1) panel.classList.add('active');
            panel.dataset.cardNumber = i;
            
            // Injecter le template du formulaire
            panel.innerHTML = `
                <h4 style="font-size: 20px; font-weight: 700; color: #1d1d1f; margin-bottom: 20px;">
                    📇 Informations de la carte ${i}
                </h4>
                <div class="form-content">
                    ${config.formTemplate}
                </div>
            `;
            
            // Modifier les IDs et names pour être uniques
            panel.querySelectorAll('[id]').forEach(el => {
                el.id = `${el.id}_card${i}`;
            });
            
            panel.querySelectorAll('[name]').forEach(el => {
                const originalName = el.getAttribute('name');
                el.setAttribute('name', `${originalName}_card${i}`);
                el.dataset.originalName = originalName;
            });
            
            // Ajouter des listeners pour sauvegarder automatiquement
            panel.querySelectorAll('input, select, textarea').forEach(input => {
                input.addEventListener('change', () => saveFormData(i));
                input.addEventListener('blur', () => saveFormData(i));
            });
            
            elements.formsContainer.appendChild(panel);
        }
        
        // Restaurer les données sauvegardées
        restoreAllFormsData();
    }
    
    // ========================================================================
    // SAUVEGARDE DES DONNÉES D'UN FORMULAIRE
    // ========================================================================
    function saveFormData(cardNumber) {
        const panel = document.querySelector(`.form-panel[data-card-number="${cardNumber}"]`);
        if (!panel) return;
        
        const formData = {};
        const inputs = panel.querySelectorAll('input, select, textarea');
        
        inputs.forEach(input => {
            const originalName = input.dataset.originalName || input.name;
            
            if (input.type === 'checkbox') {
                formData[originalName] = input.checked;
            } else if (input.type === 'radio') {
                if (input.checked) {
                    formData[originalName] = input.value;
                }
            } else {
                formData[originalName] = input.value;
            }
        });
        
        state.formsData[cardNumber] = formData;
        
        // Vérifier si le formulaire est complet
        checkFormCompletion(cardNumber);
        
        console.log('💾 Données sauvegardées pour la carte', cardNumber);
    }
    
    // ========================================================================
    // RESTAURATION DES DONNÉES SAUVEGARDÉES
    // ========================================================================
    function restoreAllFormsData() {
        Object.keys(state.formsData).forEach(cardNumber => {
            restoreFormData(parseInt(cardNumber));
        });
    }
    
    function restoreFormData(cardNumber) {
        const panel = document.querySelector(`.form-panel[data-card-number="${cardNumber}"]`);
        if (!panel || !state.formsData[cardNumber]) return;
        
        const formData = state.formsData[cardNumber];
        
        Object.keys(formData).forEach(fieldName => {
            const input = panel.querySelector(`[data-original-name="${fieldName}"]`);
            if (!input) return;
            
            if (input.type === 'checkbox') {
                input.checked = formData[fieldName];
            } else if (input.type === 'radio') {
                if (input.value === formData[fieldName]) {
                    input.checked = true;
                }
            } else {
                input.value = formData[fieldName];
            }
        });
        
        console.log('🔄 Données restaurées pour la carte', cardNumber);
    }
    
    // ========================================================================
    // VÉRIFICATION DE LA COMPLÉTION D'UN FORMULAIRE
    // ========================================================================
    function checkFormCompletion(cardNumber) {
        const formData = state.formsData[cardNumber];
        if (!formData) return false;
        
        // Vérifier que tous les champs requis sont remplis
        const isComplete = config.requiredFields.every(field => {
            return formData[field] && formData[field].toString().trim() !== '';
        });
        
        const tab = document.querySelector(`.form-tab[data-card-number="${cardNumber}"]`);
        
        if (isComplete) {
            state.completedForms.add(cardNumber);
            if (tab) tab.classList.add('completed');
        } else {
            state.completedForms.delete(cardNumber);
            if (tab) tab.classList.remove('completed');
        }
        
        updateProgress();
        return isComplete;
    }
    
    // ========================================================================
    // MISE À JOUR DE LA PROGRESSION
    // ========================================================================
    function updateProgress() {
        const completed = state.completedForms.size;
        const total = state.totalCards;
        const percentage = Math.round((completed / total) * 100);
        
        elements.progressBar.style.width = `${percentage}%`;
        elements.progressText.textContent = `${percentage}%`;
        elements.completedCardsDisplay.textContent = completed;
        
        // Afficher le bouton de soumission si tout est complété
        if (completed === total) {
            elements.submitAllBtn.style.display = 'block';
            showValidationMessage('✅ Tous les formulaires sont complétés ! Vous pouvez ajouter les cartes au panier.', 'success');
        } else {
            elements.submitAllBtn.style.display = 'none';
        }
    }
    
    // ========================================================================
    // CHANGEMENT D'ONGLET
    // ========================================================================
    function switchToCard(cardNumber) {
        console.log('🔄 Passage à la carte', cardNumber);
        
        // Sauvegarder le formulaire actuel avant de changer
        saveFormData(state.currentCard);
        
        // Mettre à jour l'état
        state.currentCard = cardNumber;
        
        // Mettre à jour les onglets
        document.querySelectorAll('.form-tab').forEach(tab => {
            tab.classList.remove('active');
            if (parseInt(tab.dataset.cardNumber) === cardNumber) {
                tab.classList.add('active');
            }
        });
        
        // Mettre à jour les panneaux
        document.querySelectorAll('.form-panel').forEach(panel => {
            panel.classList.remove('active');
            if (parseInt(panel.dataset.cardNumber) === cardNumber) {
                panel.classList.add('active');
            }
        });
        
        // Mettre à jour les boutons de navigation
        updateNavigationButtons();
        
        // Scroll vers le haut
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }
    
    // ========================================================================
    // MISE À JOUR DES BOUTONS DE NAVIGATION
    // ========================================================================
    function updateNavigationButtons() {
        elements.prevBtn.disabled = (state.currentCard === 1);
        elements.nextBtn.disabled = (state.currentCard === state.totalCards);
        
        if (state.currentCard === state.totalCards) {
            elements.nextBtn.style.display = 'none';
        } else {
            elements.nextBtn.style.display = 'flex';
        }
    }
    
    // ========================================================================
    // AFFICHAGE DES MESSAGES DE VALIDATION
    // ========================================================================
    function showValidationMessage(message, type) {
        elements.validationMessage.textContent = message;
        elements.validationMessage.className = `form-validation-message ${type}`;
        
        if (type === 'error') {
            setTimeout(() => {
                elements.validationMessage.style.display = 'none';
            }, 5000);
        }
    }
    
    // ========================================================================
    // INITIALISATION LORS DU CHANGEMENT DE QUANTITÉ
    // ========================================================================
    function initializeForms(quantity) {
        console.log('🚀 Initialisation de', quantity, 'formulaires');
        
        state.totalCards = quantity;
        state.currentCard = 1;
        elements.totalCardsDisplay.textContent = quantity;
        
        // Afficher le wrapper
        elements.tabsWrapper.style.display = 'block';
        
        // Générer les onglets et formulaires
        generateTabs(quantity);
        generateForms(quantity);
        
        // Mettre à jour la navigation
        updateNavigationButtons();
        updateProgress();
        
        // Scroll vers les formulaires
        setTimeout(() => {
            elements.tabsWrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
    }
    
    // ========================================================================
    // SOUMISSION DE TOUTES LES CARTES
    // ========================================================================
    async function submitAllCards() {
        console.log('📤 Soumission de toutes les cartes');
        
        // Vérifier que tous les formulaires sont complétés
        if (state.completedForms.size !== state.totalCards) {
            showValidationMessage('❌ Veuillez compléter tous les formulaires avant de soumettre.', 'error');
            return;
        }
        
        // Désactiver le bouton pendant la soumission
        elements.submitAllBtn.disabled = true;
        elements.submitAllBtn.textContent = '⏳ Ajout en cours...';
        
        try {
            // Préparer les données de toutes les cartes
            const allCardsData = [];
            
            for (let i = 1; i <= state.totalCards; i++) {
                const cardData = state.formsData[i];
                if (cardData) {
                    allCardsData.push(cardData);
                }
            }
            
            console.log('📦 Données à soumettre:', allCardsData);
            
            // Soumettre via AJAX (à adapter selon votre backend)
            const response = await fetch(window.location.href, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    cards: allCardsData
                })
            });
            
            if (response.ok) {
                showValidationMessage('✅ Toutes les cartes ont été ajoutées au panier !', 'success');
                
                // Rediriger vers le panier après 1 seconde
                setTimeout(() => {
                    window.location.href = '/cart'; // Adapter l'URL
                }, 1000);
            } else {
                throw new Error('Erreur lors de la soumission');
            }
            
        } catch (error) {
            console.error('❌ Erreur:', error);
            showValidationMessage('❌ Une erreur est survenue. Veuillez réessayer.', 'error');
            elements.submitAllBtn.disabled = false;
            elements.submitAllBtn.textContent = '✅ Ajouter toutes les cartes au panier';
        }
    }
    
    // ========================================================================
    // EVENT LISTENERS
    // ========================================================================
    
    // Changement de quantité
    elements.quantitySelect.addEventListener('change', function() {
        const quantity = parseInt(this.value);
        if (quantity > 0 && quantity <= config.maxCards) {
            initializeForms(quantity);
        }
    });
    
    // Navigation
    elements.prevBtn.addEventListener('click', () => {
        if (state.currentCard > 1) {
            switchToCard(state.currentCard - 1);
        }
    });
    
    elements.nextBtn.addEventListener('click', () => {
        // Vérifier que le formulaire actuel est complété
        if (!checkFormCompletion(state.currentCard)) {
            showValidationMessage('⚠️ Veuillez compléter tous les champs requis avant de continuer.', 'error');
            return;
        }
        
        if (state.currentCard < state.totalCards) {
            switchToCard(state.currentCard + 1);
        }
    });
    
    // Soumission finale
    elements.submitAllBtn.addEventListener('click', submitAllCards);
    
    // Initialisation avec 1 carte par défaut (optionnel)
    // initializeForms(1);
    
    console.log('✅ Système d\'onglets initialisé');
})();
</script>