@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"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://qa.modernize.com/quote/resources/mod-site/consent-capture/mhs-consent-script.min.js"></script>"

<meta name="csrf-token" content="{{ csrf_token() }}">

<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"
                            class="example11"
                        />
                        <span class="design"></span>
                        <span class="text">Yes</span>
                    </label>
                    <label
                        onclick="example_on()"
                        class="radio-wrapper-11"
                        for="example-12"
                    >
                        <input
                            id="example_1"
                            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"
                    name="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"
                        name="bill_range"
                        step="10"
                        class="bill_range"
                        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 email"
                    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 first_name"
                    id="firstName"
                    name="first_name"
                />
                <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 last_name"
                    id="lastName"
                    name="last_name"

                />
                <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 zipCode" 
                    id="zipCode"
                    name="zipcode"
                />
                <input type="hidden" name="ip_address" id="ip_address" value="">

                <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>
<div id="mhs-consent"></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-conainer row w-100 margin-bottom renderhere">
          
            <!-- <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>
    // Fetch the user's IP address
    fetch('https://api.ipify.org?format=json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('ip_address').value = data.ip; // Set IP in the hidden input
        })
        .catch(error => console.error('Error fetching IP:', error));
</script>
<script>

    // Bind the pingpost function to the form's submit event
   

    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 example_on(){
            var redirect_url = "https://www.google.com"; // Correct URL format
            window.location.href = redirect_url; // Redirect to the URL
      
    }

    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";
        $('.renderhere').hide();
        $.ajax({
            url: '{{ route('submit') }}', // The URL to send the request to
            method: 'POST', // HTTP method: GET, POST, PUT, DELETE, etc.
            data: {
                name: $('.example11').val(), // Data to be sent to the server
                address:$('#address').val(),
                bill_range: $('.bill_range').val(),
                email: $('.email').val(),
                first_name: $('.first_name').val(),
                last_name: $('.last_name').val(),
                zipcode:$('.zipCode').val(),
                ip_address:$('#ip_address').val(),
                _token: '{{ csrf_token() }}' // Include CSRF token

            },
            dataType: 'json', // Expected data type from the server (e.g., 'json', 'text', 'html')
            success: function(response) {
                // Function executed on successful request

                $('.renderhere').show();
                Loader.style.display = "none";
                brand.classList.add("active");
                brand.style.display = "block";
                brand.scrollIntoView({ behavior: "smooth", block: "start" });
                $('.renderhere').html(response);

                console.log('Success:', response);
            },
            error: function(xhr, status, error) {
                // Function executed on request failure
                console.error('Error:', status, error);
            }
        });



        setTimeout(() => {
           
        }, 5000);
    }

    
    function SubmitBrand() {
        alert("Thank Your for submitting");
    }


    function pingpost(){
        alert($('.ip_band_id').val());

        var formData = {
            'ip_band_id': $('.ip_band_id').val(),
            'phone': $('.phone').val(),
            'pingid': $('.pingid').val(),
            'first_name': $('.first_name').val(),
            'last_name': $('.last_name').val(),
            'email': $('.email').val(),
            'zip_code': $('.zip_code').val(),
            // 'tcpaCheckbox': $('.tcpaCheckbox' + formId).prop('checked'),  // Checkbox value
            _token: '{{ csrf_token() }}'  // CSRF token for security
        };

        // Debugging
        console.log('Form Data:', formData);

        // Perform the AJAX request
        $.ajax({
            url: '{{ route('pingPost') }}',  // Replace with the correct route
            method: 'POST',
            data: formData,  // Send the collected form data
            dataType: 'json',
            success: function(response) {
                console.log('Success:', response);
                // Optionally, update the page with the response
                // For example, you can show a success message or render something dynamically
            },
            error: function(xhr, status, error) {
                console.error('Error:', status, error);
            }
        });



    }
    



       


    //}
   
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>

<script>
        // Initialize MHS Consent with your unique consent key
        initMHSConsent('kvlbZYpNeMgnnDTWeJn9vgB70zOAE8jw');

        // Listen for when the consent has been fully loaded and use the event to perform actions
        document.addEventListener('mhsConsentLoaded', function(event) {
            const mhsConsent = document.getElementById('mhs-consent');
            const clients = mhsConsent.querySelectorAll('.client');

            // Handle the event.detail (client details) here
            const clientDetails = event.detail;
            for (let i = 0; i < clientDetails.length; i++) {
                const client = clientDetails[i];
                const clientDiv = clients[i];

                // Add company logo if available
                if (client.logo != null) {
                    const clientLogo = document.createElement('img');
                    clientLogo.classList.add('client-logo');
                    clientLogo.src = client.logo;
                    clientDiv.prepend(clientLogo);
                }

                // Add client rating if available
                if (client.rating != null) {
                    const clientRating = document.createElement('p');
                    clientRating.classList.add('client-rating');
                    clientRating.textContent = `(Rating: ${client.rating})`;
                    clientDiv.appendChild(clientRating);
                }
            }

            // Move clients to the lead form area if needed
            const pubTargetElement = document.getElementById('lead-form');
            if (clients) {
                clients.forEach(client => {
                    pubTargetElement.appendChild(client);
                });
            }
        });
    </script>


@endsection