script.js

// Цены за единицу
const prices = {
    internet: 150,
    internetSim: 200,
    internetTv: 450,
    internetTvSim: 700,
    gaming: 200, // доплата к тарифу
    androidBox: 700,
    camera: 700,
    // Фиксированная оплата и премии
    fixedPayment: 10000,
    bonus50: 3000,
    bonus70: 5000,
    bonus100: 8000
};

// Получаем все элементы
const sliders = document.querySelectorAll('.slider');
const sliderValues = document.querySelectorAll('.slider-value');
const totalAmount = document.getElementById('total-amount');
const breakdown = document.getElementById('breakdown');

// Инициализация
function init() {
    // Добавляем обработчики событий для всех ползунков
    sliders.forEach((slider, index) => {
        slider.addEventListener('input', updateSliderValue);
        slider.addEventListener('input', calculateTotal);
        
        // Инициализируем значения
        updateSliderValue.call(slider);
    });
    
    // Добавляем обработчики для чекбоксов
    const checkboxes = document.querySelectorAll('.checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', calculateTotal);
    });
    
    // Добавляем обработчики для radio buttons
    const radioButtons = document.querySelectorAll('input[name="bonus-plan"]');
    radioButtons.forEach(radio => {
        radio.addEventListener('change', calculateTotal);
    });
    
    // Первоначальный расчет
    calculateTotal();
}

// Обновление значения ползунка
function updateSliderValue() {
    const sliderId = this.id;
    const value = this.value;
    
    // Находим соответствующий span для отображения значения
    const sliderContainer = this.parentElement;
    const valueSpan = sliderContainer.querySelector('.slider-value');
    valueSpan.textContent = value;
}

// Расчет общей суммы
function calculateTotal() {
    let total = 0;
    let breakdownText = '';
    
    // Получаем значения всех ползунков
    const internet = parseInt(document.getElementById('internet').value) || 0;
    const internetSim = parseInt(document.getElementById('internet-sim').value) || 0;
    const internetTv = parseInt(document.getElementById('internet-tv').value) || 0;
    const internetTvSim = parseInt(document.getElementById('internet-tv-sim').value) || 0;
    const gaming = parseInt(document.getElementById('gaming').value) || 0;
    const androidBox = parseInt(document.getElementById('android-box').value) || 0;
    const camera = parseInt(document.getElementById('camera').value) || 0;
    
    // Получаем значения чекбоксов
    const fixedPayment = document.getElementById('fixed-payment').checked;
    
    // Получаем выбранный план премии (radio buttons)
    const selectedBonus = document.querySelector('input[name="bonus-plan"]:checked');
    const bonusAmount = selectedBonus ? parseInt(selectedBonus.value) : 0;
    
    // Расчет по тарифам
    const internetTotal = internet * prices.internet;
    const internetSimTotal = internetSim * prices.internetSim;
    const internetTvTotal = internetTv * prices.internetTv;
    const internetTvSimTotal = internetTvSim * prices.internetTvSim;
    
    // Расчет игровых доплат (добавляется к каждому тарифу)
    const gamingTotal = gaming * prices.gaming;
    
    // Расчет оборудования
    const androidBoxTotal = androidBox * prices.androidBox;
    const cameraTotal = camera * prices.camera;
    
    // Расчет фиксированной оплаты и премий
    const fixedPaymentTotal = fixedPayment ? prices.fixedPayment : 0;
    const bonusTotal = bonusAmount;
    
    // Общая сумма
    total = internetTotal + internetSimTotal + internetTvTotal + internetTvSimTotal + 
            gamingTotal + androidBoxTotal + cameraTotal + 
            fixedPaymentTotal + bonusTotal;
    
    // Формируем детализацию
    if (total > 0) {
        breakdownText = '<strong>Детализация:</strong><br>';
        
        if (internet > 0) {
            breakdownText += `Интернет: ${internet} × ${prices.internet} = ${internetTotal} руб<br>`;
        }
        
        if (internetSim > 0) {
            breakdownText += `Интернет+СИМ: ${internetSim} × ${prices.internetSim} = ${internetSimTotal} руб<br>`;
        }
        
        if (internetTv > 0) {
            breakdownText += `Интернет+ТВ: ${internetTv} × ${prices.internetTv} = ${internetTvTotal} руб<br>`;
        }
        
        if (internetTvSim > 0) {
            breakdownText += `Интернет+ТВ+СИМ: ${internetTvSim} × ${prices.internetTvSim} = ${internetTvSimTotal} руб<br>`;
        }
        
        if (gaming > 0) {
            breakdownText += `Игровой: ${gaming} × ${prices.gaming} = ${gamingTotal} руб<br>`;
        }
        
        if (androidBox > 0) {
            breakdownText += `Андроид приставка: ${androidBox} × ${prices.androidBox} = ${androidBoxTotal} руб<br>`;
        }
        
        if (camera > 0) {
            breakdownText += `Камера видеонаблюдения: ${camera} × ${prices.camera} = ${cameraTotal} руб<br>`;
        }
        
        if (fixedPayment) {
            breakdownText += `Фиксированная оплата: ${prices.fixedPayment.toLocaleString()} руб<br>`;
        }
        
        if (bonusTotal > 0) {
            let bonusText = '';
            if (selectedBonus) {
                switch(selectedBonus.id) {
                    case 'bonus-50':
                        bonusText = 'План 50 подключений';
                        break;
                    case 'bonus-70':
                        bonusText = 'План 70 подключений';
                        break;
                    case 'bonus-100':
                        bonusText = 'План 100 подключений';
                        break;
                }
            }
            breakdownText += `${bonusText}: +${bonusTotal.toLocaleString()} руб<br>`;
        }
        
        breakdownText += `<br><strong>Итого: ${total.toLocaleString()} руб</strong>`;
    } else {
        breakdownText = 'Выберите количество услуг для расчета';
    }
    
    // Обновляем отображение
    totalAmount.textContent = `${total.toLocaleString()} руб`;
    breakdown.innerHTML = breakdownText;
    
    // Добавляем анимацию при изменении
    totalAmount.style.transform = 'scale(1.05)';
    setTimeout(() => {
        totalAmount.style.transform = 'scale(1)';
    }, 200);
}

// Добавляем анимацию для ползунков
function addSliderAnimation() {
    sliders.forEach(slider => {
        slider.addEventListener('input', function() {
            this.style.transform = 'scale(1.02)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);
        });
    });
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    init();
    addSliderAnimation();
    
    // Добавляем плавные переходы
    const style = document.createElement('style');
    style.textContent = `
        .slider {
            transition: transform 0.2s ease;
        }
        .total-amount {
            transition: transform 0.3s ease;
        }
        .slider-value {
            transition: all 0.3s ease;
        }
    `;
    document.head.appendChild(style);
});

// Добавляем звуковой эффект (опционально)
function playClickSound() {
    // Создаем простой звуковой эффект
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    
    oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
    
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.1);
}

// Добавляем обработчик для звука (можно включить/выключить)
let soundEnabled = false;

// Добавляем кнопку включения/выключения звука
function addSoundToggle() {
    const soundButton = document.createElement('button');
    soundButton.innerHTML = '🔊';
    soundButton.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
        z-index: 1000;
    `;
    
    soundButton.addEventListener('click', function() {
        soundEnabled = !soundEnabled;
        this.innerHTML = soundEnabled ? '🔊' : '🔇';
        this.style.background = soundEnabled ? '#667eea' : '#ccc';
    });
    
    document.body.appendChild(soundButton);
}

// Инициализируем кнопку звука
document.addEventListener('DOMContentLoaded', addSoundToggle);