Embed

<div id="booking-form" style="max-width: 600px; margin: auto; font-family: Arial, sans-serif;">
<form id="priceCalculator" action="https://formspree.io/f/mzzvjgaq" method="POST">


<div class="form-step active">
<h2>Hvor skal opgaven udføres?</h2>
<input type="text" name="Adresse" placeholder="Indtast adresse" required>
<button type="button" class="next-btn">Næste</button>
</div>


<div class="form-step">
<h2>Vælg boligens størrelse</h2>
<select id="bolig" name="Bolig" required>
<option value="" disabled selected>Vælg størrelse</option>
<option value="Op til 110m2" data-price="180">Op til 110m2</option>
<option value="Op til 140m2" data-price="210">Op til 140m2</option>
<option value="Op til 170m2" data-price="240">Op til 170m2</option>
<option value="Op til 200m2" data-price="270">Op til 200m2</option>
<option value="Op til 250m2" data-price="300">Op til 250m2</option>
</select>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
<button type="button" class="next-btn">Næste</button>
</div>
</div>


<div class="form-step">
<h2>Vælg type af pudsning</h2>
<select id="pudsning" name="Pudsning" required>
<option value="" disabled selected>Vælg type</option>
<option value="Rentvandsanlæg" data-extra="0">Vinduesvask m. Rentvandsanlæg</option>
<option value="Traditionel" data-extra="100">Traditionel vinduespolering (+100kr)</option>
</select>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
<button type="button" class="next-btn">Næste</button>
</div>
</div>


<div class="form-step">
<h2>Hvor ofte ønsker du pudsning?</h2>
<select name="Hyppighed" id="hyppighed" required>
<option value="Hver 4 uge">Hver 4 uge</option>
<option value="Hver 8 uge">Hver 8 uge</option>
<option value="Hver 12 uge">Hver 12 uge</option>
<option value="Engangsydelse">Engangsydelse</option>
</select>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
<button type="button" class="next-btn">Næste</button>
</div>
</div>


<div class="form-step">
<h2>Hvor mange etager?</h2>
<label><input type="checkbox" class="etage" value="0"> Stueetage</label><br>
<label><input type="checkbox" class="etage" value="50"> 1.sal</label><br>
<label><input type="checkbox" class="etage" value="100"> 2.sal</label><br>
<label><input type="checkbox" class="etage" value="100"> 3.sal</label>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
<button type="button" class="next-btn">Næste</button>
</div>
</div>


<div class="form-step">
<h2>Har du Velux tagvinduer?</h2>
<input type="number" id="velux" name="Velux" value="0" min="0" max="10" placeholder="Antal">
<small>(+10 kr pr vindue)</small>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
<button type="button" class="next-btn">Næste</button>
</div>
</div>


<div class="form-step">
<h2>Ønsker du ekstra ydelser?</h2>
<label><input type="checkbox" id="indvendig" name="Indvendig"> Indvendig pudsning</label><br>
<label><input type="checkbox" id="udestue" name="Udestue"> Udestue</label><br>
<label><input type="checkbox" id="kaelder" name="Kælder"> Kælder</label>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
<button type="button" class="next-btn">Næste</button>
</div>
</div>


<div class="form-step">
<h2>Vælg dato og tid</h2>
<input type="date" id="dato" name="Dato" required>
<input type="time" id="tid" name="Tid" required>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
<button type="button" class="next-btn">Næste</button>
</div>
</div>


<div class="form-step">
<h2>Indtast dine oplysninger</h2>
<input type="text" name="Navn" placeholder="Fulde navn" required>
<input type="tel" name="Telefon" placeholder="Telefon" required>
<input type="email" name="Email" placeholder="E-mail" required>
<p id="totalPrice" style="font-weight: bold; font-size: 18px; margin-top: 10px;"></p>
<input type="hidden" name="Samlet Pris" id="hiddenPrice">
<button type="submit" style="background:#007bff;color:white;width:100%;padding:12px;border:none;font-size:18px;border-radius:5px;">Bestil nu</button>
<div class="step-nav">
<button type="button" class="prev-btn">Forrige</button>
</div>
</div>

</form>
</div>

<style>
.form-step { display: none; }
.form-step.active { display: block; }
.step-nav { display: flex; justify-content: space-between; margin-top: 15px; }
.prev-btn, .next-btn { flex: 1; margin: 0 5px; padding: 14px; font-size: 16px; font-weight: bold; border: none; border-radius: 5px; }
.prev-btn { background-color: #ccc; color: #333; }
.next-btn { background-color: #007bff; color: white; }
select, input { width: 100%; padding: 12px; margin-top: 10px; border: 1px solid #ccc; border-radius: 5px; }
@media(max-width: 600px) {
.prev-btn, .next-btn { width: 48%; }
}
</style>

<script>
let currentStep = 0;
const steps = document.querySelectorAll(".form-step");
const nextBtns = document.querySelectorAll(".next-btn");
const prevBtns = document.querySelectorAll(".prev-btn");
const totalPriceEl = document.getElementById("totalPrice");
const hiddenPriceEl = document.getElementById("hiddenPrice");

function showStep(step) {
    steps.forEach((s, i) => s.classList.toggle("active", i === step));
}
showStep(currentStep);

nextBtns.forEach(btn => {
    btn.addEventListener("click", () => {
        if (currentStep < steps.length - 1) {
            currentStep++;
            showStep(currentStep);
            if (currentStep === steps.length - 1) calculatePrice();
        }
    });
});

prevBtns.forEach(btn => {
    btn.addEventListener("click", () => {
        if (currentStep > 0) {
            currentStep--;
            showStep(currentStep);
        }
    });
});

function calculatePrice() {
    let basePrice = parseInt(document.querySelector("#bolig option:checked").dataset.price);
    let pudsningExtra = parseInt(document.querySelector("#pudsning option:checked").dataset.extra);

    // Etager (checkbox summering)
    let etageExtra = 0;
    document.querySelectorAll(".etage:checked").forEach(cb => {
        etageExtra += parseInt(cb.value);
    });

    let veluxCount = parseInt(document.getElementById("velux").value) || 0;
    let veluxExtra = veluxCount * 10;

    let extra = pudsningExtra + etageExtra + veluxExtra;

    if (document.getElementById("udestue").checked) extra += 60;
    if (document.getElementById("kaelder").checked) extra += 50;

    let total = basePrice + extra;

    // Indvendig pudsning = +50% på hele prisen
    if (document.getElementById("indvendig").checked) {
        total = total * 1.5;
    }

    totalPriceEl.textContent = "Samlet pris: " + total + " kr (inkl. moms)";
    hiddenPriceEl.value = total + " kr";
}

// Begræns dato og tid
document.getElementById("dato").addEventListener("input", function() {
    const day = new Date(this.value).getDay();
    if (day === 0 || day === 6) {
        alert("Vi har lukket i weekenden. Vælg venligst en hverdag.");
        this.value = "";
    }
});

document.getElementById("tid").addEventListener("input", function() {
    const [hour] = this.value.split(":").map(Number);
    if (hour < 7 || hour >= 15) {
        alert("Vi arbejder kun mellem 07:00 og 15:00.");
        this.value = "";
    }
});
</script>