<!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 - Czysto i Pachnie</title>
    <style>
        /* Ogólne style dla kalkulatora */
        .calc-container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .calc-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .calc-section {
            margin-bottom: 20px;
        }

        .calc-section label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        /* Flexbox dla lepszego układu */
        .select-group, .range-group, .additional-service-group {
            display: flex;
            flex-direction: column;
        }

        /* Stylizacja elementów select */
        .select-group select {
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #fff;
            appearance: none;
            background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><polygon points="0,0 10,0 5,5" fill="%23555"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 10px 5px;
            cursor: pointer;
        }

        .calc-section select:focus {
            border-color: #007BFF;
            outline: none;
        }

        /* Stylizacja sliderów */
        .range-group input[type="range"] {
            width: 100%;
            margin: 10px 0;
        }

        .range-group span {
            font-size: 14px;
            color: #333;
        }

        /* Usługi dodatkowe */
        .additional-service-group {
            border-top: 1px solid #ddd;
            padding-top: 15px;
        }

        .additional-service {
            margin-bottom: 15px;
        }

        .additional-service label {
            font-weight: bold;
            color: #555;
            margin-bottom: 5px;
        }

        .additional-service .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

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

        /* Przyciski */
        .button-group button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .button-group button:hover {
            background-color: #218838;
        }

        /* Wynik kalkulacji */
        #result {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #28a745;
            border-radius: 8px;
            background-color: #e9f7ef;
            display: none;
        }

        #result h3 {
            color: #28a745;
            margin-bottom: 10px;
        }

        #result p {
            color: #555;
            margin-bottom: 15px;
        }

        /* Zmieniony styl przycisku "Skontaktuj się z nami" */
        #contact-btn {
            background-color: #ff5722; /* Nowy kolor tła */
            color: #fff; /* Kolor tekstu */
            padding: 10px 20px; /* Wewnętrzne odstępy */
            border: none;
            border-radius: 25px; /* Zaokrąglone krawędzie */
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Delikatny cień */
        }

        #contact-btn:hover {
            background-color: #e64a19; /* Ciemniejszy kolor tła po najechaniu */
            transform: translateY(-2px); /* Delikatny ruch w górę */
        }

        /* Responsywność */
        @media (max-width: 600px) {
            .calc-container {
                padding: 15px;
            }

            .button-group button {
                padding: 10px;
                font-size: 14px;
            }

            .additional-service .checkbox-group {
                flex-direction: column;
                align-items: flex-start;
            }

            .additional-service .checkbox-group label {
                margin-bottom: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="calc-container">
        <h2>Kalkulator Sprzątania</h2>
        <form id="cleaning-form">
            <!-- Wybór typu usługi -->
            <div class="calc-section">
                <label for="service-type">Wybierz typ usługi:</label>
                <div class="select-group">
                    <select id="service-type" name="service-type" required>
                        <option value="" disabled selected>-- Wybierz --</option>
                        <option value="biura">Sprzątanie Biur</option>
                        <option value="wspolnoty">Sprzątanie Wspólnot Mieszkaniowych</option>
                        <option value="mieszkania">Sprzątanie Mieszkań</option>
                        <option value="po-remoncie">Sprzątanie po Remoncie</option>
                    </select>
                </div>
            </div>

            <!-- Sekcja dla Sprzątanie Biur -->
            <div class="calc-section service-section" id="biura-section" style="display:none;">
                <label for="biura-area">Powierzchnia (m²):</label>
                <div class="range-group">
                    <input type="range" id="biura-area" name="biura-area" min="50" max="600" step="10" value="100">
                    <span id="biura-area-value">100 m²</span>
                </div>
            </div>

            <!-- Sekcja dla Sprzątanie Wspólnot Mieszkaniowych -->
            <div class="calc-section service-section" id="wspolnoty-section" style="display:none;">
                <label for="wspolnoty-area">Powierzchnia (m²):</label>
                <div class="range-group">
                    <input type="range" id="wspolnoty-area" name="wspolnoty-area" min="100" max="1200" step="100" value="400">
                    <span id="wspolnoty-area-value">400 m²</span>
                </div>
            </div>

            <!-- Sekcja dla Sprzątanie Mieszkań -->
            <div class="calc-section service-section" id="mieszkania-section" style="display:none;">
                <label for="mieszkania-area">Powierzchnia mieszkania (m²):</label>
                <div class="range-group">
                    <input type="range" id="mieszkania-area" name="mieszkania-area" min="10" max="100" step="10" value="50">
                    <span id="mieszkania-area-value">50 m²</span>
                </div>
            </div>

            <!-- Sekcja dla Sprzątanie po Remoncie -->
            <div class="calc-section service-section" id="po-remoncie-section" style="display:none;">
                <label for="remont-area">Powierzchnia po remoncie (m²):</label>
                <div class="range-group">
                    <input type="range" id="remont-area" name="remont-area" min="10" max="50" step="5" value="50">
                    <span id="remont-area-value">50 m²</span>
                </div>
            </div>

            <!-- Usługi dodatkowe -->
            <div class="calc-section additional-service-group">
                <h3>Usługi Dodatkowe</h3>
                <!-- Mycie okien -->
                <div class="additional-service">
                    <label>Mycie okien:</label>
                    <div class="checkbox-group">
                        <input type="checkbox" id="okna-standard" name="okna-standard">
                        <label for="okna-standard">Standardowe (3–5 zł/m²)</label>
                    </div>
                    <div class="checkbox-group">
                        <input type="checkbox" id="okna-wysokosc" name="okna-wysokosc">
                        <label for="okna-wysokosc">Na wysokości (4–8 zł/m²)</label>
                    </div>
                    <label for="okna-area">Powierzchnia okien (m²):</label>
                    <div class="range-group">
                        <input type="range" id="okna-area" name="okna-area" min="10" max="100" step="10" value="50">
                        <span id="okna-area-value">50 m²</span>
                    </div>
                </div>

                <!-- Pranie Karcherem -->
                <div class="additional-service">
                    <label>Pranie Karcherem:</label>
                    <div class="checkbox-group">
                        <input type="checkbox" id="pranie-dywany" name="pranie-dywany">
                        <label for="pranie-dywany">Dywany (5 zł/m²)</label>
                    </div>
                    <div class="checkbox-group">
                        <input type="checkbox" id="pranie-kanapy" name="pranie-kanapy">
                        <label for="pranie-kanapy">Kanapy i fotele (10–15 zł/szt.)</label>
                    </div>
                    <label for="pranie-dywany-area">Powierzchnia dywanów (m²):</label>
                    <div class="range-group">
                        <input type="range" id="pranie-dywany-area" name="pranie-dywany-area" min="10" max="100" step="10" value="50">
                        <span id="pranie-dywany-area-value">50 m²</span>
                    </div>

                    <label for="pranie-kanapy-ilosc">Liczba kanap/foteli:</label>
                    <div class="range-group">
                        <input type="range" id="pranie-kanapy-ilosc" name="pranie-kanapy-ilosc" min="1" max="10" step="1" value="1">
                        <span id="pranie-kanapy-ilosc-value">1 szt.</span>
                    </div>
                </div>
            </div>

            <!-- Przycisk obliczania -->
            <div class="calc-section button-group">
                <button type="button" id="calculate-btn">Oblicz</button>
            </div>
        </form>

        <!-- Wynik kalkulacji -->
        <div id="result">
            <h3>Szacunkowy koszt: <span id="total-cost"></span> zł (netto)</h3>
            <p>To jest wstępny, orientacyjny koszt. Dokładną wycenę uzyskasz, kontaktując się z naszym przedstawicielem.</p>
            <button id="contact-btn">Skontaktuj się z nami</button>
        </div>
    </div>

    <script>
        // Funkcja inicjująca kalkulator po załadowaniu strony
        document.addEventListener('DOMContentLoaded', function() {
            const serviceType = document.getElementById('service-type');
            const serviceSections = document.querySelectorAll('.service-section');

            // Pokazuje odpowiednią sekcję w zależności od wybranego typu usługi
            serviceType.addEventListener('change', function() {
                serviceSections.forEach(section => section.style.display = 'none');
                const selected = this.value;
                if(selected === 'biura') {
                    document.getElementById('biura-section').style.display = 'block';
                } else if(selected === 'wspolnoty') {
                    document.getElementById('wspolnoty-section').style.display = 'block';
                } else if(selected === 'mieszkania') {
                    document.getElementById('mieszkania-section').style.display = 'block';
                } else if(selected === 'po-remoncie') {
                    document.getElementById('po-remoncie-section').style.display = 'block';
                }
            });

            // Aktualizacja wartości sliderów w czasie rzeczywistym
            const sliders = document.querySelectorAll('input[type="range"]');
            sliders.forEach(slider => {
                const span = document.getElementById(slider.id + '-value');
                slider.addEventListener('input', function() {
                    if(slider.id.includes('ilosc')) {
                        span.textContent = this.value + ' szt.';
                    } else {
                        span.textContent = this.value + ' m²';
                    }
                });
            });

            // Obsługa przycisku obliczania
            document.getElementById('calculate-btn').addEventListener('click', function() {
                const type = serviceType.value;
                if(!type) {
                    alert('Proszę wybrać typ usługi.');
                    return;
                }

                let total = 0;

                // Obliczanie podstawowej usługi
                if(type === 'biura') {
                    const area = parseInt(document.getElementById('biura-area').value);
                    if(area <= 100) {
                        total += 395;
                    } else if(area <= 300) {
                        total += 1495;
                    } else if(area <= 600) {
                        total += 2495;
                    }
                } else if(type === 'wspolnoty') {
                    const area = parseInt(document.getElementById('wspolnoty-area').value);
                    if(area <= 400) {
                        total += getRandomInt(395, 595);
                    } else if(area <= 700) {
                        total += getRandomInt(695, 995);
                    } else if(area <= 1200) {
                        total += getRandomInt(1295, 2495);
                    }
                } else if(type === 'mieszkania') {
                    const area = parseInt(document.getElementById('mieszkania-area').value);
                    if(area <= 50) {
                        total += getRandomInt(110, 150);
                    } else if(area <= 100) {
                        total += getRandomInt(150, 250);
                    }
                } else if(type === 'po-remoncie') {
                    const area = parseInt(document.getElementById('remont-area').value);
                    total += getRandomInt(290, 390);
                }

                // Dodanie kosztów usług dodatkowych
                // Mycie okien
                if(document.getElementById('okna-standard').checked) {
                    const oknaArea = parseInt(document.getElementById('okna-area').value);
                    const oknaCost = getRandomInt(3,5) * oknaArea;
                    total += oknaCost;
                }
                if(document.getElementById('okna-wysokosc').checked) {
                    const oknaArea = parseInt(document.getElementById('okna-area').value);
                    const oknaCost = getRandomInt(4,8) * oknaArea;
                    total += oknaCost;
                }

                // Pranie Karcherem
                if(document.getElementById('pranie-dywany').checked) {
                    const dywanyArea = parseInt(document.getElementById('pranie-dywany-area').value);
                    total += 5 * dywanyArea;
                }
                if(document.getElementById('pranie-kanapy').checked) {
                    const kanapyIlosc = parseInt(document.getElementById('pranie-kanapy-ilosc').value);
                    const kanapyCost = getRandomInt(10,15) * kanapyIlosc;
                    total += kanapyCost;
                }

                // Dodanie VAT 23%
                const totalWithVAT = (total * 1.23).toFixed(2);

                // Wyświetlenie wyniku
                document.getElementById('total-cost').textContent = totalWithVAT;
                document.getElementById('result').style.display = 'block';
                // Scroll do wyniku
                document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
            });

            // Funkcja generująca losową liczbę z zakresu (dla przedziałów cenowych)
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            // Obsługa przycisku kontaktowego
            document.getElementById('contact-btn').addEventListener('click', function() {
                // Możesz dostosować tę część, aby otworzyć formularz kontaktowy lub przekierować do strony kontaktowej
                window.location.href = 'mailto:hello@qithub.click?subject=Zapytanie%20o%20ofertę';
            });
        });
    </script>
</body>
</html>
