<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Sprzątania - Czyści Baba</title>
    <style>
        /* Stylizacja kalkulatora sprzątania - Czyści Baba */

        /* Ogólne style */
        body {
            background: linear-gradient(135deg, #e0f7fa, #ffffff);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* Kontener kalkulatora */
        .cb-calculator-container {
            max-width: 600px;
            margin: 40px auto;
            padding: 30px;
            border: 2px solid #4CAF50;
            border-radius: 15px;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Nagłówek */
        .cb-calculator-container h2 {
            text-align: center;
            color: #4CAF50;
            margin-bottom: 25px;
            font-size: 28px;
        }

        /* Grupa formularza */
        .cb-form-group {
            margin-bottom: 20px;
        }

        /* Etykiety */
        .cb-form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333333;
        }

        /* Select i range input */
        .cb-form-group select,
        .cb-form-group input[type="range"],
        .cb-form-group input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .cb-form-group select:focus,
        .cb-form-group input[type="range"]:focus,
        .cb-form-group input[type="number"]:focus {
            border-color: #4CAF50;
            outline: none;
        }

        /* Pokazywanie wartości range */
        .cb-range-value {
            font-weight: normal;
            color: #555555;
        }

        /* Checkbox grupy */
        .cb-checkbox-group {
            display: flex;
            flex-direction: column;
            max-height: 250px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .cb-checkbox-group label {
            margin-bottom: 10px;
            font-weight: normal;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: color 0.3s;
        }

        .cb-checkbox-group input[type="checkbox"] {
            margin-right: 10px;
            transform: scale(1.2);
            cursor: pointer;
        }

        .cb-checkbox-group label:hover {
            color: #4CAF50;
        }

        /* Dodatkowe opcje (metraż, liczba skrzydeł) */
        .cb-additional-options {
            margin-top: 10px;
            padding-left: 25px;
            display: none;
        }

        /* Przycisk oblicz */
        .cb-calculate-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #66bb6a, #43a047);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 18px;
            font-weight: 600;
            transition: background 0.3s, transform 0.2s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .cb-calculate-btn:hover {
            background: linear-gradient(135deg, #43a047, #2e7d32);
            transform: translateY(-2px);
        }

        /* Wynik */
        .cb-result {
            margin-top: 25px;
            padding: 20px;
            border: 1px solid #4CAF50;
            border-radius: 10px;
            background-color: #e8f5e9;
            animation: fadeIn 0.5s ease-in-out;
        }

        .cb-result.hidden {
            display: none;
        }

        .cb-result p {
            margin-bottom: 15px;
            font-size: 18px;
            color: #333333;
        }

        .cb-result span {
            font-weight: 700;
            color: #2e7d32;
        }

        .cb-contact-btn {
            padding: 12px 25px;
            background: linear-gradient(135deg, #42a5f5, #1e88e5);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: background 0.3s, transform 0.2s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .cb-contact-btn:hover {
            background: linear-gradient(135deg, #1e88e5, #1565c0);
            transform: translateY(-2px);
        }

        /* Animacja fadeIn */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Responsywność */
        @media (max-width: 600px) {
            .cb-calculator-container {
                padding: 20px;
                margin: 20px;
            }

            .cb-calculate-btn,
            .cb-contact-btn {
                font-size: 16px;
                padding: 10px;
            }

            .cb-result p {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="cb-calculator-container">
        <h2>Kalkulator Sprzątania</h2>
        <form id="cb-cleaning-form">
            <!-- Wybór rodzaju usługi -->
            <div class="cb-form-group">
                <label for="cb-service-type">Rodzaj usługi:</label>
                <select id="cb-service-type" name="service-type">
                    <option value="basic">Podstawowe sprzątanie</option>
                    <option value="comprehensive">Kompleksowe sprzątanie</option>
                    <option value="deep">Gruntowne/Poremontowe sprzątanie</option>
                </select>
            </div>

            <!-- Wybór powierzchni za pomocą suwaka -->
            <div class="cb-form-group">
                <label for="cb-area">Powierzchnia (m²): <span id="cb-area-value" class="cb-range-value">50</span> m²</label>
                <input type="range" id="cb-area" name="area" min="10" max="250" step="10" value="50">
            </div>

            <!-- Wybór usług dodatkowych -->
            <div class="cb-form-group">
                <label>Usługi dodatkowe:</label>
                <div class="cb-checkbox-group">
                    <label><input type="checkbox" name="additional-services" value="cleanFridge"> Czyszczenie lodówki (+50 zł)</label>
                    <label><input type="checkbox" name="additional-services" value="cleanOven"> Czyszczenie piekarnika lub szafek w środku (+5 zł)</label>
                    <label>
                        <input type="checkbox" name="additional-services" value="cleanStoneCabin"> Czyszczenie kabiny z kamienia (+cena do uzgodnienia)
                        <div class="cb-additional-options" id="cleanStoneCabin-options">
                            <label for="stone-cabin-area">Metraż (m²):</label>
                            <input type="number" id="stone-cabin-area" name="stone-cabin-area" min="1" placeholder="Wprowadź metraż">
                        </div>
                    </label>
                    <label>
                        <input type="checkbox" name="additional-services" value="washUpholstery"> Pranie sofy, fotela, dywanu (+cena do uzgodnienia)
                        <div class="cb-additional-options" id="washUpholstery-options">
                            <label for="upholstery-count">Ilość przedmiotów:</label>
                            <input type="number" id="upholstery-count" name="upholstery-count" min="1" placeholder="Wprowadź ilość">
                        </div>
                    </label>
                    <label>
                        <input type="checkbox" name="additional-services" value="cleanWindows"> Mycie okien (+25-50 zł za skrzydło)
                        <div class="cb-additional-options" id="cleanWindows-options">
                            <label for="window-panes">Liczba skrzydeł:</label>
                            <input type="number" id="window-panes" name="window-panes" min="1" placeholder="Wprowadź liczbę skrzydeł">
                        </div>
                    </label>
                    <label>
                        <input type="checkbox" name="additional-services" value="cleanFug"> Czyszczenie fug (+8 zł/m²)
                        <div class="cb-additional-options" id="cleanFug-options">
                            <label for="fug-area">Metraż (m²):</label>
                            <input type="number" id="fug-area" name="fug-area" min="1" placeholder="Wprowadź metraż">
                        </div>
                    </label>
                    <label><input type="checkbox" name="additional-services" value="cleanBasement"> Sprzątanie piwnic i garaży (+400 zł za pomieszczenie)</label>
                    <label>
                        <input type="checkbox" name="additional-services" value="cleanBlinds"> Czyszczenie rolet zewnętrznych i żaluzji (+10 zł/m²)
                        <div class="cb-additional-options" id="cleanBlinds-options">
                            <label for="blinds-area">Metraż (m²):</label>
                            <input type="number" id="blinds-area" name="blinds-area" min="1" placeholder="Wprowadź metraż">
                        </div>
                    </label>
                    <label><input type="checkbox" name="additional-services" value="washChair"> Pranie foteli (+50 zł)</label>
                    <label><input type="checkbox" name="additional-services" value="washSofa"> Pranie sof/narożników (+200 zł)</label>
                </div>
            </div>

            <!-- Przycisk obliczenia kosztu -->
            <button type="button" class="cb-calculate-btn" id="cb-calculate-btn">Oblicz Koszt</button>
        </form>

        <!-- Sekcja wyniku -->
        <div id="cb-result" class="cb-result hidden">
            <p>Przybliżony koszt sprzątania: <span id="cb-estimated-price"></span> zł</p>
            <p>To jest wstępny orientacyjny koszt. Dokładną wycenę otrzymasz po kontakcie z naszym przedstawicielem.</p>
            <button class="cb-contact-btn" id="cb-contact-btn">Skontaktuj się z nami</button>
        </div>
    </div>

    <script>
        // Skrypt kalkulatora sprzątania - Czyści Baba

        document.addEventListener('DOMContentLoaded', function() {
            const serviceType = document.getElementById('cb-service-type');
            const area = document.getElementById('cb-area');
            const areaValue = document.getElementById('cb-area-value');
            const calculateBtn = document.getElementById('cb-calculate-btn');
            const resultDiv = document.getElementById('cb-result');
            const estimatedPrice = document.getElementById('cb-estimated-price');
            const contactBtn = document.getElementById('cb-contact-btn');
            const additionalServices = document.querySelectorAll('input[name="additional-services"]');

            // Funkcja pokazująca lub ukrywająca dodatkowe opcje
            additionalServices.forEach(service => {
                service.addEventListener('change', function() {
                    const optionId = this.value + '-options';
                    const optionDiv = document.getElementById(optionId);
                    if (this.checked && optionDiv) {
                        optionDiv.style.display = 'block';
                    } else if (optionDiv) {
                        optionDiv.style.display = 'none';
                        // Resetowanie wartości inputów dodatkowych
                        const inputs = optionDiv.querySelectorAll('input');
                        inputs.forEach(input => input.value = '');
                    }
                });
            });

            // Aktualizacja wyświetlanej wartości powierzchni
            area.addEventListener('input', function() {
                areaValue.textContent = area.value;
            });

            // Funkcja obliczająca koszt
            function calculateCost() {
                let price = 0;
                const type = serviceType.value;
                const m2 = parseInt(area.value);
                const selectedServices = Array.from(document.querySelectorAll('input[name="additional-services"]:checked'));

                // Oblicz podstawowy koszt w zależności od typu usługi i powierzchni
                switch(type) {
                    case 'basic':
                        if (m2 < 50) {
                            price += 300;
                        } else if (m2 >= 50 && m2 < 100) {
                            price += 300;
                        } else if (m2 >= 100 && m2 < 150) {
                            price += 400;
                        } else if (m2 >= 150 && m2 < 200) {
                            price += 0; // Cena do negocjacji
                        } else {
                            price += 0; // Cena do negocjacji
                        }
                        break;
                    case 'comprehensive':
                        if (m2 < 50) {
                            price += 500;
                        } else if (m2 >= 50 && m2 < 100) {
                            price += 500;
                        } else if (m2 >= 100 && m2 < 150) {
                            price += 800;
                        } else {
                            price += 0; // Cena do negocjacji
                        }
                        break;
                    case 'deep':
                        if (m2 < 50) {
                            price += 800;
                        } else if (m2 >= 50 && m2 < 100) {
                            price += 1200;
                        } else {
                            price += 0; // Cena do uzgodnienia
                        }
                        break;
                    default:
                        price += 0;
                }

                // Dodaj koszty usług dodatkowych
                selectedServices.forEach(service => {
                    switch(service.value) {
                        case 'cleanFridge':
                            price += 50;
                            break;
                        case 'cleanOven':
                            price += 5;
                            break;
                        case 'cleanStoneCabin':
                            const stoneCabinArea = parseFloat(document.getElementById('stone-cabin-area').value);
                            if (!isNaN(stoneCabinArea) && stoneCabinArea > 0) {
                                price += stoneCabinArea * 20; // Przykładowa cena: 20 zł/m²
                            } else {
                                alert('Proszę wprowadzić prawidłowy metraż dla Czyszczenia kabiny z kamienia.');
                            }
                            break;
                        case 'washUpholstery':
                            const upholsteryCount = parseInt(document.getElementById('upholstery-count').value);
                            if (!isNaN(upholsteryCount) && upholsteryCount > 0) {
                                price += upholsteryCount * 150; // Przykładowa cena: 150 zł za przedmiot
                            } else {
                                alert('Proszę wprowadzić prawidłową ilość przedmiotów dla Prania sofy, fotela, dywanu.');
                            }
                            break;
                        case 'cleanWindows':
                            const windowPanes = parseInt(document.getElementById('window-panes').value);
                            if (!isNaN(windowPanes) && windowPanes > 0) {
                                // Średnia cena za skrzydło: 35 zł
                                price += windowPanes * 35;
                            } else {
                                alert('Proszę wprowadzić prawidłową liczbę skrzydeł dla Mycia okien.');
                            }
                            break;
                        case 'cleanFug':
                            const fugArea = parseFloat(document.getElementById('fug-area').value);
                            if (!isNaN(fugArea) && fugArea > 0) {
                                price += fugArea * 8;
                            } else {
                                alert('Proszę wprowadzić prawidłowy metraż dla Czyszczenia fug.');
                            }
                            break;
                        case 'cleanBasement':
                            price += 400;
                            break;
                        case 'cleanBlinds':
                            const blindsArea = parseFloat(document.getElementById('blinds-area').value);
                            if (!isNaN(blindsArea) && blindsArea > 0) {
                                price += blindsArea * 10;
                            } else {
                                alert('Proszę wprowadzić prawidłowy metraż dla Czyszczenia rolet zewnętrznych i żaluzji.');
                            }
                            break;
                        case 'washChair':
                            price += 50;
                            break;
                        case 'washSofa':
                            price += 200;
                            break;
                        default:
                            price += 0;
                    }
                });

                // Sprawdź, czy cena wymaga negocjacji
                let negotiation = false;
                if (
                    (type === 'basic' && m2 >= 150) ||
                    (type === 'comprehensive' && m2 >= 150) ||
                    (type === 'deep' && m2 >= 100)
                ) {
                    negotiation = true;
                }

                // Wyświetl wynik
                if (negotiation) {
                    estimatedPrice.textContent = 'Cena do negocjacji';
                } else {
                    estimatedPrice.textContent = price;
                }

                resultDiv.classList.remove('hidden');
            }

            // Obsługa kliknięcia przycisku oblicz
            calculateBtn.addEventListener('click', calculateCost);

            // Obsługa kliknięcia przycisku kontakt
            contactBtn.addEventListener('click', function() {
                // Przekierowanie do maila z wstępnie wypełnionym tematem
                window.location.href = "mailto:hello@qithub.click?subject=Zapytanie%20o%20usługi";
            });
        });
    </script>
</body>
</html>
