 <footer class="footer-area">
     <div class="bg-gray-2">
         <div class="container">
             <div class="footer-top pt-80 pb-35">
                 <div class="row">
                     <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                         <div class="footer-widget footer-about mb-40">
                             <div class="footer-logo">
                                 <a href="{{ url('/') }}"><img src="{{asset('assets/images/logo/logo-light.png')}}" alt="logo"></a>
                             </div>
                             <p>
                                 Cusella Soft Furnishing LLP provides premium curtains, blinds, upholstery and interior furnishing solutions for homes and commercial spaces.
                             </p>

                         </div>
                     </div>
                     <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                         <div class="footer-widget footer-widget-margin-1 footer-list mb-40">
                             <h3 class="footer-title">Information</h3>
                             <ul>
                                 <li><a href="about-us.html">About Us</a></li>
                                 <li><a href="#">Delivery Information</a></li>
                                 <li><a href="#">Privacy Policy</a></li>
                                 <li><a href="#">Terms & Conditions</a></li>
                                 <li><a href="#">Customer Service</a></li>
                             </ul>
                         </div>
                     </div>
                     <div class="col-lg-2 col-md-6 col-sm-6 col-12">
                         <div class="footer-widget footer-list mb-40">
                             <h3 class="footer-title">My Accound</h3>
                             <ul>
                                 <li><a href="my-account.html">My Account</a></li>
                                 <li><a href="#">Order History</a></li>
                                 <li><a href="wishlist.html">Wish List</a></li>
                                 <li><a href="#">Newsletter</a></li>
                                 <li><a href="#">Order History</a></li>
                             </ul>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                         <div class="footer-widget footer-widget-margin-2 footer-address mb-40">
                             <h3 class="footer-title">Get in touch</h3>
                             <ul>
                                 <li>
                                     <strong>Corporate Office:</strong><br>
                                     1st Floor, 12/40-D, Parappur Road,<br>
                                     Veenalukkal, Kottakkal, Malappuram,<br>
                                     Kerala – 676503
                                 </li>

                                 <li class="mt-2">
                                     <strong>Registered Office:</strong><br>
                                     HSR Layout, Bengaluru – 560102
                                 </li>

                                 <li class="mt-2">
                                     📧 info@cusella.com
                                 </li>

                                 <li>
                                     📞 +91 9XXXXXXXXX
                                 </li>

                                 <li>
                                     GST (KA): 29AAVFC5799D1ZN<br>
                                     GST (KL): 32AAVFC5799D1Z0
                                 </li>
                             </ul>

                             <div class="open-time">
                                 <p>Open : <span>9:00 AM</span> - Close : <span>6:00 PM</span></p>
                                 <p>Sunday : Close</p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="bg-gray-3">
         <div class="container">
             <div class="footer-bottom copyright text-center bg-gray-3">
                 © 2026 Cusella Soft Furnishing LLP. All Rights Reserved.
             </div>
         </div>
     </div>
 </footer>
 <!-- Product Modal start -->
 <div class="modal fade quickview-modal-style" id="exampleModal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close"><i class=" ti-close "></i></a>
             </div>
             <div class="modal-body">
                 <div class="row gx-0">
                     <div class="col-lg-5 col-md-5 col-12">
                         <div class="modal-img-wrap">
                             <img src="{{asset('assets/images/product/quickview.png')}}" alt="">
                         </div>
                     </div>
                     <div class="col-lg-7 col-md-7 col-12">
                         <div class="product-details-content quickview-content">
                             <h2>New Modern Chair</h2>
                             <div class="product-details-price">
                                 <span class="old-price">$25.89 </span>
                                 <span class="new-price">$20.25</span>
                             </div>
                             <div class="product-details-review">
                                 <div class="product-rating">
                                     <i class=" ti-star"></i>
                                     <i class=" ti-star"></i>
                                     <i class=" ti-star"></i>
                                     <i class=" ti-star"></i>
                                     <i class=" ti-star"></i>
                                 </div>
                                 <span>( 1 Customer Review )</span>
                             </div>
                             <div class="product-color product-color-active product-details-color">
                                 <span>Color :</span>
                                 <ul>
                                     <li><a title="Pink" class="pink" href="#">pink</a></li>
                                     <li><a title="Yellow" class="active yellow" href="#">yellow</a></li>
                                     <li><a title="Purple" class="purple" href="#">purple</a></li>
                                 </ul>
                             </div>
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare tincidunt neque vel semper. Cras placerat enim sed nisl mattis eleifend.</p>
                             <div class="product-details-action-wrap">
                                 <div class="product-quality">
                                     <input class="cart-plus-minus-box input-text qty text" name="qtybutton" value="1">
                                 </div>
                                 <div class="single-product-cart btn-hover">
                                     <a href="#">Add to cart</a>
                                 </div>
                                 <div class="single-product-wishlist">
                                     <a title="Wishlist" href="#"><i class="pe-7s-like"></i></a>
                                 </div>
                                 <div class="single-product-compare">
                                     <a title="Compare" href="#"><i class="pe-7s-shuffle"></i></a>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
 <!-- Product Modal end -->
 <!-- Mobile Menu start -->
 <div class="off-canvas-active">
     <a class="off-canvas-close"><i class=" ti-close "></i></a>
     <div class="off-canvas-wrap">
         <div class="welcome-text off-canvas-margin-padding">
             <p>Default Welcome Msg! </p>
         </div>
         <div class="mobile-menu-wrap off-canvas-margin-padding-2">
             <div id="mobile-menu" class="slinky-mobile-menu text-left">
                 <ul>
                     <li>
                         <a href="#">HOME</a>
                         <ul>
                             <li><a href="{{ url('/') }}">Home version 1 </a></li>
                             <li><a href="index-2.html">Home version 2</a></li>
                             <li><a href="index-3.html">Home version 3</a></li>
                             <li><a href="index-4.html">Home version 4</a></li>
                             <li><a href="index-5.html">Home version 5</a></li>
                             <li><a href="index-6.html">Home version 6</a></li>
                             <li><a href="index-7.html">Home version 7</a></li>
                             <li><a href="index-8.html">Home version 8</a></li>
                         </ul>
                     </li>
                     <li>
                         <a href="#">SHOP</a>
                         <ul>
                             <li>
                                 <a href="#">Shop Layout</a>
                                 <ul>
                                     <li><a href="shop.html">Standard Style</a></li>
                                     <li><a href="shop-sidebar.html">Shop Grid Sidebar</a></li>
                                     <li><a href="shop-list.html">Shop List Style</a></li>
                                     <li><a href="shop-list-sidebar.html">Shop List Sidebar</a></li>
                                     <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                     <li><a href="shop-location.html">Store Location</a></li>
                                 </ul>
                             </li>
                             <li>
                                 <a href="#">Product Layout</a>
                                 <ul>
                                     <li><a href="product-details.html">Tab Style 1</a></li>
                                     <li><a href="product-details-2.html">Tab Style 2</a></li>
                                     <li><a href="product-details-gallery.html">Gallery style </a></li>
                                     <li><a href="product-details-affiliate.html">Affiliate style</a></li>
                                     <li><a href="product-details-group.html">Group Style</a></li>
                                     <li><a href="product-details-fixed-img.html">Fixed Image Style </a></li>
                                 </ul>
                             </li>
                         </ul>
                     </li>
                     <li>
                         <a href="#">PAGES </a>
                         <ul>
                             <li><a href="about-us.html">About Us </a></li>
                             <li><a href="cart.html">Cart Page</a></li>
                             <li><a href="checkout.html">Checkout </a></li>
                             <li><a href="my-account.html">My Account</a></li>
                             <li><a href="wishlist.html">Wishlist </a></li>
                             <li><a href="compare.html">Compare </a></li>
                             <li><a href="contact-us.html">Contact us </a></li>
                             <li><a href="login-register.html">Login / Register </a></li>
                         </ul>
                     </li>
                     <li>
                         <a href="#">BLOG </a>
                         <ul>
                             <li><a href="blog.html">Blog Standard </a></li>
                             <li><a href="blog-sidebar.html">Blog Sidebar</a></li>
                             <li><a href="blog-details.html">Blog Details</a></li>
                         </ul>
                     </li>
                     <li>
                         <a href="about-us.html">ABOUT US</a>
                     </li>
                     <li>
                         <a href="contact-us.html">CONTACT US</a>
                     </li>
                 </ul>
             </div>
         </div>
         <div class="language-currency-wrap language-currency-wrap-modify">
             <div class="currency-wrap border-style">
                 <a class="currency-active" href="#">$ Dollar (US) <i class=" ti-angle-down "></i></a>
                 <div class="currency-dropdown">
                     <ul>
                         <li><a href="#">Taka (BDT) </a></li>
                         <li><a href="#">Riyal (SAR) </a></li>
                         <li><a href="#">Rupee (INR) </a></li>
                     </ul>
                 </div>
             </div>
             <div class="language-wrap">
                 <a class="language-active" href="#"><img src="{{asset('assets/images/icon-img/flag.png')}}" alt=""> English <i class=" ti-angle-down "></i></a>
                 <div class="language-dropdown">
                     <ul>
                         <li><a href="#"><img src="{{asset('assets/images/icon-img/flag.png')}}" alt="">English </a></li>
                         <li><a href="#"><img src="{{asset('assets/images/icon-img/spanish.png')}}" alt="">Spanish</a></li>
                         <li><a href="#"><img src="{{asset('assets/images/icon-img/arabic.png')}}" alt="">Arabic </a></li>
                     </ul>
                 </div>
             </div>
         </div>
     </div>
 </div>
 </div>
 <!-- All JS is here -->
 <script src="{{asset('assets/js/vendor/modernizr-3.11.7.min.js')}}"></script>

 <script src="{{asset('assets/js/vendor/jquery-migrate-3.3.2.min.js')}}"></script>
 <script src="{{asset('assets/js/vendor/popper.min.js')}}"></script>
 <script src="{{asset('assets/js/vendor/bootstrap.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/wow.js')}}"></script>
 <script src="{{asset('assets/js/plugins/scrollup.js')}}"></script>
 <script src="{{asset('assets/js/plugins/aos.js')}}"></script>
 <script src="{{asset('assets/js/plugins/magnific-popup.js')}}"></script>
 <script src="{{asset('assets/js/plugins/jquery.syotimer.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/swiper.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/imagesloaded.pkgd.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/isotope.pkgd.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/jquery-ui.js')}}"></script>
 <script src="{{asset('assets/js/plugins/jquery-ui-touch-punch.js')}}"></script>
 <script src="{{asset('assets/js/plugins/jquery.nice-select.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/waypoints.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/counterup.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/select2.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/easyzoom.js')}}"></script>
 <script src="{{asset('assets/js/plugins/slinky.min.js')}}"></script>
 <script src="{{asset('assets/js/plugins/ajax-mail.js')}}"></script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <!-- firebase -->
 <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>

 <script>
     const firebaseConfig = {
         apiKey: "AIzaSyDzFDrIDPTxEdVbrkTMik8G8k5d3-3xNow",
         authDomain: "cusella-ebbad.firebaseapp.com",
         projectId: "cusella-ebbad",
     };

     firebase.initializeApp(firebaseConfig);
 </script>


 <!-- Main JS -->
 <script src="{{asset('assets/js/main.js')}}"></script>
 <script>
     window.appUrls = {
        logout: "{{ url('/logout') }}"
    };
     window.addEventListener("scroll", function() {
         let menu = document.querySelector(".header-bottom-menu");

         if (window.scrollY > 150) {
             menu.classList.add("is-sticky");
         } else {
             menu.classList.remove("is-sticky");
         }
     });
 </script>
 <script>
     window.addEventListener("DOMContentLoaded", function() {

         let token = localStorage.getItem("token");

         if (token) {
             // ✅ Hide login button
             document.getElementById("loginBtn").style.display = "none";

             // ✅ Show dropdown
             document.getElementById("userDropdown").style.display = "block";
         }

     });


     document.addEventListener("click", function(e) {

         let dropdown = document.querySelector(".dropdown-menu");
         let userIcon = document.querySelector(".user-icon");

         if (userIcon.contains(e.target)) {
             dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
         } else {
             dropdown.style.display = "none";
         }

     });


     // before API
     document.querySelector(".btn-primary").innerText = "Please wait...";

     window.onload = function() {
         if (!localStorage.getItem('loginShown')) {
             openLoginModal();
             localStorage.setItem('loginShown', 'true');
         }
     }

     document.querySelectorAll('.otp-boxes input').forEach((input, index, inputs) => {

         input.addEventListener('input', () => {
             if (input.value && index < inputs.length - 1) {
                 inputs[index + 1].focus();
             }
         });

         input.addEventListener('keydown', (e) => {
             if (e.key === "Backspace" && !input.value && index > 0) {
                 inputs[index - 1].focus();
             }
         });

     });

     function openLoginModal() {
         document.getElementById("loginModal").style.display = "block";
     }

     function closeLoginModal() {
         document.getElementById("loginModal").style.display = "none";
     }

  function sendOtp() {
    let rawPhone = document.getElementById("phone").value.trim();
    rawPhone = rawPhone.replace(/\D/g, '');

    if (rawPhone.length !== 10) {
        Swal.fire({
            icon: 'warning',
            title: 'Invalid',
            text: 'Enter valid 10 digit mobile number'
        });
        return;
    }

    let phone = "+91" + rawPhone;

    // ✅ Destroy previous instance if exists
    if (window.recaptchaVerifier) {
        window.recaptchaVerifier.clear();
    }

    // setup new reCAPTCHA
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        size: 'invisible'
    });

    const appVerifier = window.recaptchaVerifier;

    firebase.auth().signInWithPhoneNumber(phone, appVerifier)
        .then(function (confirmationResult) {
            window.confirmationResult = confirmationResult;
            document.getElementById("step1").style.display = "none";
            document.getElementById("step2").style.display = "block";
        })
        .catch(function (error) {
            console.error(error);
            Swal.fire({
                icon: 'error',
                title: 'Failed',
                text: error.message
            });
        });
}

     function verifyOtp() {

         if (!window.confirmationResult) {
             Swal.fire({
                 icon: 'warning',
                 title: 'OTP Required',
                 text: 'Please request OTP first'
             });
             return;
         }

         let otp = "";
         document.querySelectorAll('.otp-boxes input').forEach(input => {
             otp += input.value;
         });

         // ✅ validate OTP
         if (otp.length !== 6) {
             Swal.fire({
                 icon: 'warning',
                 title: 'Invalid OTP',
                 text: 'Enter 6 digit OTP'
             });
             return;
         }

         console.log("Entered OTP:", otp); // 🔥 DEBUG

         window.confirmationResult.confirm(otp)
             .then((result) => {

                 console.log("Firebase success:", result); // 🔥 DEBUG

                 return result.user.getIdToken();
             })
             .then((firebaseToken) => {

                 console.log("Firebase Token:", firebaseToken); // 🔥 DEBUG

                 let rawPhone = document.getElementById("phone").value;
                 let phone = "+91" + rawPhone;

                 let formData = new FormData();
                 formData.append("firebase_token", firebaseToken);
                 formData.append("phone", phone);

                 return fetch("https://demoweblinks.in/cusella/public/api/login", {
                     method: "POST",
                     body: formData
                 });

             })
             .then(res => res.json())
             .then(data => {

                 console.log("API Response:", data); // 🔥 DEBUG

                 if (data.status) {

    localStorage.setItem("token", data.token);

    Swal.fire({
        icon: 'success',
        title: 'Login Success',
        timer: 1500,
        showConfirmButton: false
    });

    if (data.is_new_user) {
        document.getElementById("step2").style.display = "none";
        document.getElementById("step3").style.display = "block";
        document.getElementById("profile_phone").value = data.user.phone;
    } else {
        closeLoginModal();

        // ✅ reload after success
        setTimeout(() => {
            location.reload();
        }, 1500);
    }
} else {
                     Swal.fire({
                         icon: 'error',
                         title: 'Login Failed',
                         text: data.message || 'Something went wrong'
                     });
                 }

             })
             .catch(error => {

                 console.error("VERIFY ERROR:", error); // 🔥 DEBUG

                 Swal.fire({
                     icon: 'error',
                     title: 'OTP Failed',
                     text: error.message || 'Invalid OTP'
                 });
             });
     }

     function updateProfile() {

         let name = document.getElementById("name").value;
         let email = document.getElementById("email").value;

         fetch("https://demoweblinks.in/cusella/public/api/profile/update", {
                 method: "POST",
                 headers: {
                     "Authorization": "Bearer " + window.apiToken
                 },
                 body: new FormData(Object.assign(document.createElement('form'), {
                     innerHTML: `
                <input name="name" value="${name}">
                <input name="email" value="${email}">
            `
                 }))
             })
             .then(res => res.json())
             .then(data => {

                 if (data.status) {
                     Swal.fire({
                         icon: 'success',
                         title: 'Updated',
                         text: 'Profile updated successfully'
                     });

                     closeLoginModal();
                 }

             });
     }

  function logout() {

    let token = localStorage.getItem("token");

    if (!token) {
        location.reload();
        return;
    }

    fetch(window.appUrls.logout, {
        method: "POST",
        headers: {
            "Authorization": "Bearer " + token,
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(res => res.json())
    .then(res => {

        console.log(res);

        // ✅ remove token
        localStorage.removeItem("token");

        Swal.fire({
            icon: 'success',
            title: 'Logged out',
            timer: 1000,
            showConfirmButton: false
        });

        setTimeout(() => {
            location.reload();
        }, 1000);

    })
    .catch(err => {

        console.error(err);

        // even if API fails → force logout
        localStorage.removeItem("token");
        location.reload();

    });
}function logout() {

    let token = localStorage.getItem("token");

    if (!token) {
        location.reload();
        return;
    }

    fetch("/logout", {
        method: "POST",
        headers: {
            "Authorization": "Bearer " + token,
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(res => res.json())
    .then(res => {

        console.log(res);

        // ✅ remove token
        localStorage.removeItem("token");

        Swal.fire({
            icon: 'success',
            title: 'Logged out',
            timer: 1000,
            showConfirmButton: false
        });

        setTimeout(() => {
            location.reload();
        }, 1000);

    })
    .catch(err => {

        console.error(err);

        // even if API fails → force logout
        localStorage.removeItem("token");
        location.reload();

    });
}
     //  test token
     //      window.onload = function() {

     //     // ✅ Always set token for development
     //     localStorage.setItem("token", "148|ppHziTSZj0hAuY9vGRjNytBkJmV56cVrB5U1C98W3e38f07f");

     //     if (!localStorage.getItem('loginShown')) {
     //         openLoginModal();
     //         localStorage.setItem('loginShown', 'true');
     //     }
     // }
 </script>

 </body>

 </html>