<!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</title>
    <style>
        /* Kontener główny kalkulatora */
        .calc-container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
            font-family: Arial, sans-serif;
            border-radius: 8px;
        }

        /* Nagłówki sekcji */
        .calc-section h3 {
            margin-bottom: 10px;
            color: #333333;
            font-size: 1.2em;
        }

        /* Etykiety i inputy */
        .calc-section label {
            display: block;
            margin: 10px 0 5px;
            color: #555555;
            font-size: 0.95em;
        }

        .calc-section input[type="range"],
        .calc-section input[type="number"],
        .calc-section select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
            border: 1px solid #cccccc;
            border-radius: 4px;
            font-size: 1em;
        }

        /* Styl suwaka i jego wartości */
        .range-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .range-container span {
            font-size: 0.9em;
            color: #333333;
        }

        /* Przycisk oblicz */
        #calculateBtn {
            width: 100%;
            padding: 15px;
            background-color: #28a745;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s;
        }

        #calculateBtn:hover {
            background-color: #218838;
        }

        /* Sekcja wyniku */
        #result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border: 1px solid #dddddd;
            border-radius: 4px;
            display: none;
        }

        #result h3 {
            color: #333333;
            font-size: 1.2em;
        }

        #result p {
            color: #555555;
            margin: 10px 0;
        }

        /* Przycisk kontakt */
        #contactBtn {
            width: 100%;
            padding: 15px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s;
        }

        #contactBtn:hover {
            background-color: #0069d9;
        }

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

            #calculateBtn, #contactBtn {
                font-size: 0.95em;
                padding: 12px;
            }

            .calc-section h3 {
                font-size: 1.1em;
            }
        }

        /* Ukrywanie kontenera biura domyślnie */
        .conditional {
            display: none;
        }

        /* Styl przycisków alertów */
        .alert {
            color: red;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="calc-container">
        <h2>Kalkulator Sprzątania</h2>
        <form id="cleaningCalculator">
            <!-- Sprzątanie mieszkań i domów -->
            <section class="calc-section">
                <h3>Sprzątanie Mieszkań i Domów</h3>
                <label for="area">Powierzchnia (m²):</label>
                <div class="range-container">
                    <input type="range" id="area" name="area" min="10" max="200" value="45" step="5">
                    <span id="areaValue">45</span> m²
                </div>
                
                <label for="type">Rodzaj sprzątania:</label>
                <select id="type" name="type">
                    <option value="standardowe">Standardowe</option>
                    <option value="kompleksowe">Kompleksowe</option>
                </select>
            </section>

            <!-- Sprzątanie powierzchni biurowej -->
            <section class="calc-section">
                <h3>Sprzątanie Powierzchni Biurowej</h3>
                <label for="officeType">Rodzaj sprzątania:</label>
                <select id="officeType" name="officeType">
                    <option value="none">Nie potrzebuję</option>
                    <option value="regularne">Regularne</option>
                    <option value="jednorazowe">Jednorazowe</option>
                </select>
                <div id="officeAreaContainer" class="conditional">
                    <label for="officeArea">Powierzchnia biura (m²):</label>
                    <div class="range-container">
                        <input type="range" id="officeArea" name="officeArea" min="20" max="500" value="50" step="10">
                        <span id="officeAreaValue">50</span> m²
                    </div>
                </div>
            </section>

            <!-- Mycie okien -->
            <section class="calc-section">
                <h3>Mycie Okien</h3>
                <label for="singleSmall">Okno pojedyncze małe (szt.):</label>
                <input type="number" id="singleSmall" name="singleSmall" min="0" value="0">
    
                <label for="singleLarge">Okno pojedyncze duże (szt.):</label>
                <input type="number" id="singleLarge" name="singleLarge" min="0" value="0">
    
                <label for="doubleWindow">Okno podwójne (szt.):</label>
                <input type="number" id="doubleWindow" name="doubleWindow" min="0" value="0">
    
                <label for="balconyWindow">Okno balkonowe (szt.):</label>
                <input type="number" id="balconyWindow" name="balconyWindow" min="0" value="0">
            </section>

            <!-- Dodatkowe usługi -->
            <section class="calc-section">
                <h3>Dodatkowe Usługi</h3>
                <label for="fridgeCleaning">Mycie lodówki:</label>
                <select id="fridgeCleaning" name="fridgeCleaning">
                    <option value="0">Nie</option>
                    <option value="55">Tak (55 zł)</option>
                    <option value="70">Tak (70 zł)</option>
                </select>

                <label for="bathroomCleaning">Kompleksowe sprzątanie łazienki:</label>
                <select id="bathroomCleaning" name="bathroomCleaning">
                    <option value="0">Nie</option>
                    <option value="290">Tak (290 zł)</option>
                </select>

                <label for="terraceCleaning">Sprzątanie tarasów i balkonów:</label>
                <select id="terraceCleaning" name="terraceCleaning">
                    <option value="0">Nie</option>
                    <option value="contact">Kontakt</option>
                </select>
            </section>

            <!-- Przycisk oblicz -->
            <button type="button" id="calculateBtn">Oblicz</button>
        </form>

        <!-- Wynik -->
        <div id="result">
            <h3>Przybliżony Koszt: <span id="totalPrice"></span> zł</h3>
            <p>To jest wstępny orientacyjny koszt. Dokładną wycenę otrzymasz po kontakcie z naszym przedstawicielem.</p>
            <button id="contactBtn">Skontaktuj się z nami</button>
        </div>
    </div>

    <script>
        // Pobranie elementów formularza
        const area = document.getElementById('area');
        const areaValue = document.getElementById('areaValue');

        const type = document.getElementById('type');

        const officeType = document.getElementById('officeType');
        const officeAreaContainer = document.getElementById('officeAreaContainer');
        const officeArea = document.getElementById('officeArea');
        const officeAreaValue = document.getElementById('officeAreaValue');

        const calculateBtn = document.getElementById('calculateBtn');
        const result = document.getElementById('result');
        const totalPrice = document.getElementById('totalPrice');
        const contactBtn = document.getElementById('contactBtn');

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

        // Obsługa wyboru rodzaju sprzątania biura
        officeType.addEventListener('change', () => {
            if (officeType.value === 'regularne' || officeType.value === 'jednorazowe') {
                officeAreaContainer.style.display = 'block';
            } else {
                officeAreaContainer.style.display = 'none';
            }
        });

        // Aktualizacja wyświetlanej wartości powierzchni biura
        officeArea.addEventListener('input', () => {
            officeAreaValue.textContent = officeArea.value;
        });

        // Funkcja obliczająca koszt
        function calculateCost() {
            let total = 0;

            // Sprzątanie mieszkań i domów
            const m2 = parseInt(area.value);
            let cleaningType = type.value;
            if (m2 <= 45) {
                total += (cleaningType === 'standardowe') ? 230 : 450;
            } else if (m2 <= 55) {
                total += (cleaningType === 'standardowe') ? 270 : 500;
            } else if (m2 <= 65) {
                total += (cleaningType === 'standardowe') ? 300 : 540;
            } else if (m2 <= 75) {
                total += (cleaningType === 'standardowe') ? 340 : 600;
            } else if (m2 <= 85) {
                total += (cleaningType === 'standardowe') ? 370 : 650;
            } else if (m2 <= 100) {
                total += (cleaningType === 'standardowe') ? 400 : 700;
            } else if (m2 > 100 && m2 <= 120) {
                // Zakładam, że dla powierzchni między 101 a 120 m²
                // Można dodać odpowiednie ceny lub prosić o kontakt
                alert('Proszę skontaktować się z nami dla powierzchni powyżej 100 m².');
                return;
            } else {
                alert('Proszę skontaktować się z nami dla powierzchni powyżej 120 m².');
                return;
            }

            // Sprzątanie powierzchni biurowej
            if (officeType.value !== 'none') {
                const officeM2 = parseInt(officeArea.value);
                if (officeType.value === 'regularne') {
                    total += 8 * officeM2;
                } else if (officeType.value === 'jednorazowe') {
                    total += 10 * officeM2;
                }
            }

            // Mycie okien
            const singleSmall = parseInt(document.getElementById('singleSmall').value) || 0;
            const singleLarge = parseInt(document.getElementById('singleLarge').value) || 0;
            const doubleWindow = parseInt(document.getElementById('doubleWindow').value) || 0;
            const balconyWindow = parseInt(document.getElementById('balconyWindow').value) || 0;

            total += (singleSmall * 30) + (singleLarge * 35) + (doubleWindow * 55) + (balconyWindow * 70);

            // Dodatkowe usługi
            const fridge = parseInt(document.getElementById('fridgeCleaning').value) || 0;
            const bathroom = parseInt(document.getElementById('bathroomCleaning').value) || 0;
            const terrace = document.getElementById('terraceCleaning').value;

            total += fridge + bathroom;
            if (terrace === 'contact') {
                alert('Proszę skontaktować się z nami dla sprzątania tarasów i balkonów.');
                return;
            }

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

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

        // Obsługa przycisku kontakt
        contactBtn.addEventListener('click', () => {
            // Przykładowy link do formularza kontaktowego lub bezpośredni e-mail
            window.location.href = "mailto:hello@qithub.click?subject=Zapytanie%20o%20wycenę%20usług";
        });
    </script>
</body>
</html>
