script.js

// DOM Elements
const typeButtons = document.querySelectorAll('[data-type]');
const themeButtons = document.querySelectorAll('[data-theme]');
const animationButtons = document.querySelectorAll('[data-animation]');
const showPercentage = document.getElementById('showPercentage');
const showSteps = document.getElementById('showSteps');
const totalSteps = document.getElementById('totalSteps');
const prevStepBtn = document.getElementById('prevStep');
const nextStepBtn = document.getElementById('nextStep');
const progressBars = document.querySelectorAll('.progress-bar');
const successMessage = document.querySelector('.message.success');
const errorMessage = document.querySelector('.message.error');

// State
let currentStep = 0;
let currentType = 'linear';
let currentTheme = 'default';
let currentAnimation = 'smooth';
let totalStepsValue = parseInt(totalSteps.value);

// Initialize
function init() {
    addEventListeners();
    updateProgress();
    createSteps();
}

// Add Event Listeners
function addEventListeners() {
    // Type buttons
    typeButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            typeButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            currentType = btn.dataset.type;
            updateProgressType();
        });
    });

    // Theme buttons
    themeButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            themeButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            currentTheme = btn.dataset.theme;
            updateProgressTheme();
        });
    });

    // Animation buttons
    animationButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            animationButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            currentAnimation = btn.dataset.animation;
            updateProgressAnimation();
        });
    });

    // Settings
    showPercentage.addEventListener('change', updateProgress);
    showSteps.addEventListener('change', updateProgress);
    totalSteps.addEventListener('change', () => {
        totalStepsValue = parseInt(totalSteps.value);
        createSteps();
        updateProgress();
    });

    // Navigation
    prevStepBtn.addEventListener('click', previousStep);
    nextStepBtn.addEventListener('click', nextStep);
}

// Update Progress Type
function updateProgressType() {
    progressBars.forEach(bar => {
        bar.classList.remove('active');
        if (bar.classList.contains(currentType)) {
            bar.classList.add('active');
        }
    });
    updateProgress();
}

// Update Progress Theme
function updateProgressTheme() {
    progressBars.forEach(bar => {
        bar.classList.remove('theme-gradient', 'theme-minimal');
        if (currentTheme !== 'default') {
            bar.classList.add(`theme-${currentTheme}`);
        }
    });
}

// Update Progress Animation
function updateProgressAnimation() {
    progressBars.forEach(bar => {
        bar.classList.remove('bounce', 'pulse');
        if (currentAnimation !== 'smooth') {
            bar.classList.add(currentAnimation);
        }
    });
}

// Create Steps
function createSteps() {
    const stepsContainer = document.querySelector('.steps-container');
    const linearSteps = document.querySelector('.progress-steps');
    
    // Clear existing steps
    stepsContainer.innerHTML = '';
    linearSteps.innerHTML = '';
    
    // Create new steps
    for (let i = 0; i < totalStepsValue; i++) {
        // Steps progress
        const stepItem = document.createElement('div');
        stepItem.className = 'step-item';
        stepItem.textContent = i + 1;
        stepsContainer.appendChild(stepItem);
        
        // Linear progress
        const step = document.createElement('div');
        step.className = 'step';
        step.textContent = i + 1;
        linearSteps.appendChild(step);
    }
}

// Update Progress
function updateProgress() {
    const progress = (currentStep / (totalStepsValue - 1)) * 100;
    
    // Update linear progress
    const linearFill = document.querySelector('.progress-fill');
    const linearSteps = document.querySelectorAll('.progress-steps .step');
    if (linearFill) {
        linearFill.style.width = `${progress}%`;
    }
    
    // Update circular progress
    const circularProgress = document.querySelector('.progress-ring-circle');
    if (circularProgress) {
        const radius = circularProgress.r.baseVal.value;
        const circumference = 2 * Math.PI * radius;
        const offset = circumference - (progress / 100) * circumference;
        circularProgress.style.strokeDasharray = `${circumference} ${circumference}`;
        circularProgress.style.strokeDashoffset = offset;
    }
    
    // Update steps
    const stepItems = document.querySelectorAll('.step-item');
    stepItems.forEach((step, index) => {
        step.classList.remove('active', 'completed');
        if (index < currentStep) {
            step.classList.add('completed');
        } else if (index === currentStep) {
            step.classList.add('active');
        }
    });
    
    linearSteps.forEach((step, index) => {
        step.classList.remove('active', 'completed');
        if (index < currentStep) {
            step.classList.add('completed');
        } else if (index === currentStep) {
            step.classList.add('active');
        }
    });
    
    // Update percentage
    const percentageElements = document.querySelectorAll('.progress-percentage');
    percentageElements.forEach(el => {
        if (showPercentage.checked) {
            el.textContent = `${Math.round(progress)}%`;
            el.style.display = 'block';
        } else {
            el.style.display = 'none';
        }
    });
    
    // Update steps visibility
    const stepsElements = document.querySelectorAll('.progress-steps, .steps-container');
    stepsElements.forEach(el => {
        el.style.display = showSteps.checked ? 'flex' : 'none';
    });
    
    // Update navigation buttons
    prevStepBtn.disabled = currentStep === 0;
    nextStepBtn.disabled = currentStep === totalStepsValue - 1;
}

// Previous Step
function previousStep() {
    if (currentStep > 0) {
        currentStep--;
        updateProgress();
        showMessage('success', 'Step completed successfully!');
    }
}

// Next Step
function nextStep() {
    if (currentStep < totalStepsValue - 1) {
        currentStep++;
        updateProgress();
        showMessage('success', 'Step completed successfully!');
    } else {
        showMessage('error', 'Please complete the current step first.');
    }
}

// Show Message
function showMessage(type, text) {
    const message = type === 'success' ? successMessage : errorMessage;
    message.querySelector('span').textContent = text;
    message.classList.add('show');
    
    setTimeout(() => {
        message.classList.remove('show');
    }, 3000);
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', init);