@extends('layouts.master') @section('content')

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous"
/>
<link href="{{ asset('assets/index.css') }}" rel="stylesheet" />
<style>
    .progress:after {
        content: "";
        background-image: url("{{ asset('progress-divider.png') }}");
        background-size: 12%;
        position: absolute;
        z-index: 10;
        opacity: 1;
        height: 16px;
    }

    /* new */

    .slider-container {
    display: flex;
    align-items: center;
    position: relative;
    top: 50px;
    justify-content: space-evenly;
}

.card {
    position: absolute;
    animation: fadeInOut 1.5s ease-in-out infinite;
    transition: transform 0.7s ease, opacity 0.7s ease, z-index 0s 0.7s;
    will-change: transform, opacity;
}

.card.center {
    z-index: 1;
    transform: scale(1);
    opacity: 1;
    animation: fadeIn 1.5s ease-in-out forwards;
}

.card.left {
    transform: scale(0.7);
    left: -50px;
    opacity: 0.4;
    z-index: 0;
}

.card.right {
    transform: scale(0.7);
    right: -50px;
    opacity: 0.4;
    z-index: 0;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}





   
</style>

<div class="container mt-2">
    <div class="text-center mt-5">
        <h3 class="text-primary fw-bold">Free Solar Estimate</h3>
        <p class="text-dark">It only takes 30 seconds.</p>
    </div>
    <div class="progress mb-5 mx-auto col-md-6">
        <div
            class="progress-bar"
            role="progressbar"
            style="width: 8%"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
        ></div>
    </div>

    <form action="javascript:void(0);">
        <!-- Step 1: Homeowner Question -->
        <div class="stepper-card p-4 active mt-3 mb-5">
            <div class="content-div">
                <h5 class="fs-5 mb-3">Are you a Homeowner?</h5>
                <div
                    class="d-flex align-items-center justify-content-center gap-5 mb-3"
                >
                    <label
                        onclick="nextStep()"
                        class="radio-wrapper-11"
                        for="example-11"
                    >
                        <input
                            id="example-11"
                            type="radio"
                            name="homeowner"
                            value="Yes"
                        />
                        <span class="design"></span>
                        <span class="text">Yes</span>
                    </label>
                    <label
                        onclick="nextStep()"
                        class="radio-wrapper-11"
                        for="example-12"
                    >
                        <input
                            id="example-12"
                            type="radio"
                            name="homeowner"
                            value="No"
                        />
                        <span class="design"></span>
                        <span class="text">No</span>
                    </label>
                </div>
            </div>
            <span class="error"></span>
        </div>

        <!-- Step 2: Address Input -->
        <div class="stepper-card p-4">
            <div class="content-div">
                <h5 class="fs-5 mb-4">
                    Enter the home address for solar installation
                </h5>
                <input
                    required
                    type="text"
                    placeholder="Complete Address"
                    class="form-control p-2"
                    id="address"
                />
                <span class="error"></span>
                <div class="d-flex justify-content-between mt-4  btn-group-custom">
                    <button class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-3"></i> Back
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Next <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Step 3: Electric Bill Range -->
        <div class="stepper-card p-4">
            <div class="content-div">
                <h5 class="fs-5 mb-3">
                    How much is your average monthly electric bill?
                </h5>
                <div class="text-center">
                    <div
                        class="fw-semibold mb-2 fs-4 theme-color"
                        id="billAmount"
                    >
                        $100
                    </div>
                    <input
                        required
                        type="range"
                        min="100"
                        max="900"
                        step="10"
                        class="form-range w-100 mx-auto"
                        id="electricBill"
                        oninput="updateBillAmount()"
                    />
                </div>
                <div class="d-flex justify-content-between mt-4  btn-group-custom">
                    <button class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-3"></i> Back
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Next <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Step 4: Email Input -->
        <div class="stepper-card p-4">
            <div class="content-div">
                <h5 class="fs-5 mb-4">
                    What email address should your results be sent to?
                </h5>
                <input
                    type="email"
                    placeholder="Enter Email Address"
                    class="form-control p-2"
                    name="email"
                    id="EmailAdd"
                />
                <span class="error"></span>
                <div class="d-flex justify-content-between mt-4  btn-group-custom">
                    <button class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-3"></i> Back
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Next <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Step 5: First Name -->
        <div class="stepper-card p-4">
            <div class="content-div">
                <h5 class="fs-5 mb-4">What's your first name?</h5>
                <input
                    type="text"
                    placeholder="First Name"
                    class="form-control p-2"
                    id="firstName"
                />
                <span class="error"></span>
                <div class="d-flex justify-content-between mt-4  btn-group-custom">
                    <button class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-3"></i> Back
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Next <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Step 6: Last Name -->
        <div class="stepper-card p-4">
            <div class="content-div">
                <h5 class="fs-5 mb-4">What's your last name?</h5>
                <input
                    type="text"
                    placeholder="Last Name"
                    class="form-control p-2"
                    id="lastName"
                />
                <span class="error"></span>
                <div class="d-flex justify-content-between mt-4  btn-group-custom">
                    <button class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-3"></i> Back
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Next <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Step 7: Zip Code -->
        <div class="stepper-card zip-code p-4">
            <div class="loader-container">
                <div class="loader"></div>
            </div>
            <div class="content-div">
                <h5 class="fs-5 mb-4">What is your zip code?</h5>
                <input
                    type="number"
                    placeholder="Enter Your Zip Code"
                    class="form-control p-2"
                    id="zipCode"
                />
                <span class="error"></span>
                <div class="d-flex justify-content-between mt-4  btn-group-custom">
                    <button class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-3"></i> Back
                    </button>
                    <button class="btn btn-primary" onclick="Searching()">
                        Next
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<!----MODALS----->
<div class="brands" id="brand">
    <div style="background-image: url('{{
            asset('background-img.avif')
        }}'); background-repeat: no-repeat; background-position: center; background-size: cover;"
    >
        <div class="slider-container row w-100 margin-bottom">
          
            <div class="card  col-md-4" id="card1">
              
                <img
                    src="{{ asset('/leadlogo.png') }}"
                    alt="Logo"
                    class="col-md-6 mb-3 mx-auto"
                />
                <h3 class="fw-semibold text-center">
                   Get a home security quote!
                </h3>
                <input required type="text" placeholder="Full name" />
                <input required type="text" placeholder="Phone number" />
                <p class="text-muted fs_small_most">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat quis repellat vero, ipsa sapiente et unde deserunt
                    blanditiis harum quo, doloremque corporis minima assumenda
                    quibusdam quam, pperiam temporibus a totam.
                </p>
                <div class="d-flex align-items-center gap-3 p-2">
                    <button class="btn btn-primary" onclick="SubmitBrand()">
                        SUBMIT
                    </button>
                    <button class="btn btn-secondary" onclick="moveNext()">
                        Next Offer <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
            <div class="card  col-md-4" id="card2">
        
                <img
                    src="{{ asset('/leadlogo.png') }}"
                    alt="Logo"
                    class="col-md-6 mb-3 mx-auto"
                />
                <h3 class="fw-semibold text-center">
                  Affordable Home Security Solutions!
                </h3>
                <input required type="text" placeholder="Full name" />
                <input required type="text" placeholder="Phone number" />
                <p class="text-muted fs_small_most">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat quis repellat vero, ipsa sapiente et unde deserunt
                    blanditiis harum quo, doloremque corporis minima assumenda
                    quibusdam quam, pperiam temporibus a totam.
                </p>
                <div class="d-flex align-items-center gap-3 p-2">
                    <button class="btn btn-primary" onclick="SubmitBrand()">
                        SUBMIT
                    </button>
                    <button class="btn btn-secondary" onclick="moveNext()">
                        Next Offer <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
            <div class="card  col-md-4" id="card3">
              
                <img
                    src="{{ asset('/leadlogo.png') }}"
                    alt="Logo"
                    class="col-md-6 mb-3 mx-auto"
                />
                <h3 class="fw-semibold text-center">
                    Complete Home Security Package!
                </h3>
                <input required type="text" placeholder="Full name" />
                <input required type="text" placeholder="Phone number" />
                <p class="text-muted fs_small_most">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat quis repellat vero, ipsa sapiente et unde deserunt
                    blanditiis harum quo, doloremque corporis minima assumenda
                    quibusdam quam, pperiam temporibus a totam.
                </p>
                <div class="d-flex align-items-center gap-3 p-2">
                    <button class="btn btn-primary" onclick="SubmitBrand()">
                        SUBMIT
                    </button>
                    <button class="btn btn-secondary" onclick="moveNext()">
                        Next Offer <i class="fas fa-arrow-right ms-3"></i>
                    </button>
                </div>
            </div>
          
        </div>
    </div>
</div>




<!----MODALS----->

<script>
    let currentStep = 0;

    function validateStep() {
        const errors = document.querySelectorAll(".error");
        errors[currentStep].innerHTML = "";

        const inputs = [
            document.querySelector('input[name="homeowner"]:checked'),
            document.getElementById("address"),
            document.getElementById("electricBill"),
            document.getElementById("EmailAdd"),
            document.getElementById("firstName"),
            document.getElementById("lastName"),
            document.getElementById("zipCode"),
        ];

        if (!inputs[currentStep] || !inputs[currentStep].value) {
            errors[currentStep].innerHTML = "This field is required.";
            return false;
        }
        return true;
    }

    function updateProgressBar() {
        const progress = ((currentStep + 1) / 7) * 100;
        document.querySelector(".progress-bar").style.width = `${progress}%`;
    }

    function nextStep() {
        if (!validateStep()) return;

        const steps = document.querySelectorAll(".stepper-card");
        const content = document.querySelectorAll(".content-div");
        steps[currentStep].classList.remove("active");
        currentStep++;
        steps[currentStep].classList.add("active");
        content[currentStep].classList.add("animation-text");
        updateProgressBar();
    }

    function prevStep() {
        const steps = document.querySelectorAll(".stepper-card");
        const content = document.querySelectorAll(".content-div");
        const brand = document.querySelector(".brands");
        brand.style.display = "none";
        steps[currentStep].classList.remove("active");
        currentStep--;
        steps[currentStep].classList.add("active");
        content[currentStep].classList.remove("animation-text");
        content[currentStep].classList.add("prevstep_animation");
        updateProgressBar();
    }

    function updateBillAmount() {
        document.getElementById("billAmount").textContent = `$${
            document.getElementById("electricBill").value
        }`;
    }

    function Searching() {
        const Loader = document.querySelector(".loader-container");
        const zipcode = document.querySelector(".zip-code");
        const brand = document.querySelector(".brands");
        Loader.style.display = "flex";
        setTimeout(() => {
            Loader.style.display = "none";
            brand.classList.add("active");
            brand.style.display = "block";
            brand.scrollIntoView({ behavior: "smooth", block: "start" });
        }, 2000);
    }

    
    function SubmitBrand() {
        alert("Thank Your for submitting");
    }
let currentIndex = 0; // Start from the first card (index 0)

function moveNext() {
    const cards = document.querySelectorAll(".card");
    const totalCards = cards.length;

    // Remove existing classes
    cards.forEach((card) => {
        card.classList.remove("center", "left", "right");
    });

    // Update current index for the next card
    currentIndex = (currentIndex + 1) % totalCards;

    // Logic to arrange the cards cyclically
    if (currentIndex === 0) {
        cards[0].classList.add("center");
        cards[1].classList.add("right");
        cards[2].classList.add("left");
        cards[3].classList.add("right");
    } else if (currentIndex === 1) {
        cards[0].classList.add("left");
        cards[1].classList.add("center");
        cards[2].classList.add("right");
        cards[3].classList.add("left");
    } else if (currentIndex === 2) {
        cards[0].classList.add("right");
        cards[1].classList.add("left");
        cards[2].classList.add("center");
        cards[3].classList.add("right");
    } else if (currentIndex === 3) {
        cards[0].classList.add("right");
        cards[1].classList.add("left");
        cards[2].classList.add("right");
        cards[3].classList.add("center");
    }
}

window.onload = () => {
    // Ensure the initial classes are applied when the page loads
    moveNext();
};

   
</script>



@endsection