<!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 - CleanOK.pl</title>
    <style>
        /* Stylowanie kalkulatora sprzątania */

        /* Kontener główny kalkulatora */
        .cleanok-calculator-container {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #4CAF50;
            border-radius: 10px;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }

        /* Tytuł kalkulatora */
        .cleanok-calculator-container h2 {
            text-align: center;
            color: #4CAF50;
            margin-bottom: 20px;
        }

        /* Grupa formularza */
        .cleanok-form-group {
            margin-bottom: 15px;
        }

        /* Etykiety w formularzu */
        .cleanok-form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        /* Select i input w formularzu */
        .cleanok-form-group select,
        .cleanok-form-group input[type="number"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* Grupa checkboxów */
        .cleanok-checkbox-group {
            display: flex;
            flex-direction: column;
            max-height: 200px;
            overflow-y: auto;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
        }

        .cleanok-checkbox-group label {
            font-weight: normal;
            margin-bottom: 5px;
        }

        /* Przycisk obliczania */
        .cleanok-calculate-btn {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .cleanok-calculate-btn:hover {
            background-color: #45a049;
        }

        /* Wynik kalkulacji */
        .cleanok-result {
            display: none;
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #4CAF50;
            border-radius: 5px;
            background-color: #e8f5e9;
        }

        .cleanok-result h3 {
            color: #333;
            margin-bottom: 10px;
        }

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

        /* Przycisk kontaktu */
        .cleanok-contact-btn {
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .cleanok-contact-btn:hover {
            background-color: #0b7dda;
        }

        /* Minimalna wartość zamówienia */
        .cleanok-min-order {
            font-size: 14px;
            color: #ff5722;
            text-align: center;
            margin-bottom: 15px;
        }

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

            .cleanok-calculate-btn,
            .cleanok-contact-btn {
                font-size: 14px;
                padding: 8px;
            }
        }
    </style>
</head>
<body>
    <div class="cleanok-calculator-container">
        <h2>Kalkulator Wyceny Sprzątania</h2>
        <form id="cleaningCalculator">
            <!-- Wybór typu usługi -->
            <div class="cleanok-form-group">
                <label for="serviceType">Wybierz rodzaj usługi:</label>
                <select id="serviceType" name="serviceType">
                    <option value="">-- Wybierz --</option>
                    <option value="basicCleaning">Podstawowe sprzątanie</option>
                    <option value="apartmentOneTime">Sprzątanie mieszkania (jednorazowe)</option>
                    <option value="apartmentCyclic">Sprzątanie mieszkania (cykliczne)</option>
                    <option value="officeCleaning">Kompleksowe sprzątanie biur</option>
                    <option value="ecoCleaning">Eko-Sprzątanie</option>
                    <option value="postRenovation">Sprzątanie po remoncie</option>
                    <option value="construction">Usługi sprzątania pobudowlanego</option>
                </select>
            </div>

            <!-- Ilość godzin lub m² w zależności od usługi -->
            <div class="cleanok-form-group" id="quantityGroup" style="display: none;">
                <label for="quantity">Wprowadź ilość:</label>
                <input type="number" id="quantity" name="quantity" min="1" placeholder="np. godziny/m²">
            </div>

            <!-- Dodatkowe usługi -->
            <div class="cleanok-form-group">
                <label>Dodatkowe usługi:</label>
                <div class="cleanok-checkbox-group">
                    <label><input type="checkbox" name="extraServices" value="cleanFridge"> Czyszczenie lodówki (+50 zł)</label>
                    <label><input type="checkbox" name="extraServices" value="cleanOven"> Czyszczenie piekarnika (+50 zł)</label>
                    <label><input type="checkbox" name="extraServices" value="cleanHood"> Mycie okapu (+40 zł)</label>
                    <label><input type="checkbox" name="extraServices" value="cleanMicrowave"> Mycie mikrofalówki (+20 zł)</label>
                    <label><input type="checkbox" name="extraServices" value="cleanCloset"> Czyszczenie wnętrza szafy (+15 zł)</label>
                    <label><input type="checkbox" name="extraServices" value="cleanWindows"> Mycie okien (+40 zł/m²)</label>
                    <label><input type="checkbox" name="extraServices" value="cleanLargeWindow"> Mycie dużego okna/balkonowych drzwi (+45 zł)</label>
                    <label><input type="checkbox" name="extraServices" value="ironing"> Prasowanie (+40 zł/godz.)</label>
                    <label><input type="checkbox" name="extraServices" value="ozonizing"> Ozonowanie pomieszczeń (+90 zł)</label>
                    <label><input type="checkbox" name="extraServices" value="vacuumDelivery"> Dowóz odkurzacza (+30 zł)</label>
                </div>
            </div>

            <!-- Pranie i czyszczenie -->
            <div class="cleanok-form-group">
                <label>Dodatkowe usługi prania i czyszczenia:</label>
                <div class="cleanok-checkbox-group">
                    <label><input type="checkbox" name="laundryServices" value="cleanSofa"> Pranie kanapy (+130 zł)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanCorner"> Pranie narożnika (+170 zł)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanChair"> Pranie krzesła (+15 zł)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanArmchair"> Pranie fotela (+55 zł)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanMattress"> Pranie materaca (+80 zł)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanCarpet"> Pranie dywanów (+15 zł/m²)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanRug"> Pranie wykładziny (+5 zł/m²)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanLeatherFurniture"> Czyszczenie mebli skórzanych (+70 zł)</label>
                    <label><input type="checkbox" name="laundryServices" value="impregnateUpholstery"> Impregnacja tapicerki (+60 zł)</label>
                    <label><input type="checkbox" name="laundryServices" value="cleanFloor"> Czyszczenie i doczyszczanie posadzek (+3 zł/m²)</label>
                </div>
            </div>

            <!-- Minimalna wartość zamówienia -->
            <div class="cleanok-form-group cleanok-min-order">
                Minimalna wartość zamówienia: <strong>200 zł</strong>
            </div>

            <!-- Przycisk obliczania -->
            <div class="cleanok-form-group">
                <button type="button" class="cleanok-calculate-btn" id="calculateBtn">Oblicz Koszt</button>
            </div>
        </form>

        <!-- Wynik kalkulacji -->
        <div class="cleanok-result" id="result">
            <h3>Szacowany koszt: <span id="totalPrice"></span> zł</h3>
            <p>To jest wstępny, orientacyjny koszt. Dokładną wycenę otrzymasz po skontaktowaniu się z naszym przedstawicielem.</p>
            <button class="cleanok-contact-btn" id="contactBtn">Skontaktuj się z nami</button>
        </div>
    </div>

    <script>
        // Skrypt kalkulatora sprzątania

        document.addEventListener('DOMContentLoaded', function() {
            const serviceType = document.getElementById('serviceType');
            const quantityGroup = document.getElementById('quantityGroup');
            const calculateBtn = document.getElementById('calculateBtn');
            const resultDiv = document.getElementById('result');
            const totalPriceSpan = document.getElementById('totalPrice');
            const contactBtn = document.getElementById('contactBtn');

            // Cennik usług podstawowych
            const pricing = {
                services: {
                    basicCleaning: { type: 'hour', min: 50, max: 75 },
                    apartmentOneTime: { type: 'hour', min: 60, max: 75 },
                    apartmentCyclic: { type: 'hour', min: 60, max: 70 },
                    officeCleaning: { type: 'sqm', min: 9, max: 11 },
                    ecoCleaning: { type: 'sqm', min: 9, max: 15 },
                    postRenovation: { type: 'sqm', min: 9, max: 18 },
                    construction: { type: 'sqm', min: 10, max: 20 }
                },
                extraServices: {
                    cleanFridge: 50,
                    cleanOven: 50,
                    cleanHood: 40,
                    cleanMicrowave: 20,
                    cleanCloset: 15,
                    cleanWindows: { type: 'sqm', price: 40 },
                    cleanLargeWindow: 45,
                    ironing: { type: 'hour', price: 40 },
                    ozonizing: 90,
                    vacuumDelivery: 30
                },
                laundryServices: {
                    cleanSofa: 130,
                    cleanCorner: 170,
                    cleanChair: 15,
                    cleanArmchair: 55,
                    cleanMattress: 80,
                    cleanCarpet: { type: 'sqm', price: 15 },
                    cleanRug: { type: 'sqm', price: 5 },
                    cleanLeatherFurniture: 70,
                    impregnateUpholstery: 60,
                    cleanFloor: { type: 'sqm', price: 3 }
                },
                minimalOrder: 200
            };

            // Obsługa zmiany typu usługi
            serviceType.addEventListener('change', function() {
                const selectedService = pricing.services[this.value];
                if (selectedService) {
                    quantityGroup.style.display = 'block';
                    if (selectedService.type === 'hour') {
                        document.getElementById('quantity').placeholder = 'Ilość godzin';
                    } else if (selectedService.type === 'sqm') {
                        document.getElementById('quantity').placeholder = 'Powierzchnia w m²';
                    }
                } else {
                    quantityGroup.style.display = 'none';
                }
            });

            // Obsługa kliknięcia przycisku obliczania
            calculateBtn.addEventListener('click', function() {
                const selectedService = pricing.services[serviceType.value];
                if (!selectedService) {
                    alert('Proszę wybrać rodzaj usługi.');
                    return;
                }

                const quantity = parseFloat(document.getElementById('quantity').value);
                if (isNaN(quantity) || quantity <= 0) {
                    alert('Proszę wprowadzić prawidłową ilość.');
                    return;
                }

                let total = 0;

                // Oblicz koszt podstawowej usługi (minimalna wartość)
                if (selectedService.type === 'hour') {
                    total += pricing.services[serviceType.value].min * quantity;
                } else if (selectedService.type === 'sqm') {
                    total += pricing.services[serviceType.value].min * quantity;
                }

                // Pobierz zaznaczone dodatkowe usługi
                const extraServices = document.querySelectorAll('input[name="extraServices"]:checked');
                extraServices.forEach(service => {
                    const value = service.value;
                    const servicePrice = pricing.extraServices[value];
                    if (servicePrice) {
                        if (typeof servicePrice === 'object') {
                            if (servicePrice.type === 'sqm') {
                                total += servicePrice.price * quantity;
                            } else if (servicePrice.type === 'hour') {
                                total += servicePrice.price * quantity;
                            }
                        } else {
                            total += servicePrice;
                        }
                    }
                });

                // Pobierz zaznaczone usługi prania i czyszczenia
                const laundryServices = document.querySelectorAll('input[name="laundryServices"]:checked');
                laundryServices.forEach(service => {
                    const value = service.value;
                    const servicePrice = pricing.laundryServices[value];
                    if (servicePrice) {
                        if (typeof servicePrice === 'object') {
                            if (servicePrice.type === 'sqm') {
                                total += servicePrice.price * quantity;
                            }
                        } else {
                            total += servicePrice;
                        }
                    }
                });

                // Sprawdź minimalną wartość zamówienia
                if (total < pricing.minimalOrder) {
                    total = pricing.minimalOrder;
                }

                totalPriceSpan.textContent = total.toFixed(2);

                // Wyświetl wynik i przycisk kontaktu
                resultDiv.style.display = 'block';
                // Przewiń do wyniku
                resultDiv.scrollIntoView({ behavior: 'smooth' });
            });

            // Obsługa kliknięcia przycisku kontaktu
            contactBtn.addEventListener('click', function() {
                // Otwórz klienta poczty e-mail z predefiniowanym adresem i tematem
                window.location.href = "mailto:hello@qithub.click?subject=Zapytanie%20kalkulatora%20sprzątania";
            });
        });
    </script>
</body>
</html>
