<header class="header-area header-responsive-padding header-height-1">

    <!-- TOP BAR -->
    <div class="header-top d-none d-lg-block bg-yellow pt-3 pb-3 ">
        <div class="container">
            <div class="row align-items-center">

                <!-- LEFT -->
                <div class="col-lg-4 col-4">
                    <div class="welcome-text">
                        <p>Premium Curtains, Blinds & Soft Furnishings</p>
                    </div>
                </div>

                <!-- RIGHT -->
                <div class="col-lg-8 col-8 text-end">
                    <div class="language-currency-wrap">
                        <span><i class="pe-7s-phone"></i> +914834359914,
                            9895763443 | </span>
                        <span class="ms-3"><i class="pe-7s-mail"></i> info@cusella.com | </span>

                        <span class="ms-3">
                            <i class="pe-7s-home"></i> Become a Franchise |
                        </span>

                        <span class="ms-3">
                            <i class="pe-7s-map-marker"></i> Track Your Order
                        </span>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- MAIN HEADER -->
    <div class="header-bottom ">
        <div class="container">
            <div class="row align-items-center">

                <!-- LOGO -->
                <div class="col-lg-3 col-md-6 col-6">
                    <div class="logo">
                        <a href="<?php echo e(url('/')); ?>">
                            <img src="<?php echo e(asset('assets/images/logo/logo.png')); ?>" alt="Cusella Logo">
                        </a>
                    </div>
                </div>

                <!-- MENU -->
                <div class="col-lg-6 d-none d-lg-block">
                    <div class="header-action-wrap">
                        <div class="header-action-style header-search-1">

                            <div class="search-wrap-1 open">
                                <form action="#">
                                    <input placeholder="Search products…" type="text">
                                    <button class="button-search"><i class="pe-7s-search"></i></button>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- RIGHT ACTION -->
                <div class="col-lg-3 col-md-6 col-6">
                    <div class="header-action-wrap">
                        <!-- =========================== login section start =========================== -->
                       <div class="header-action-style" id="userSection">

    <!-- Default (Login Icon) -->
    <a href="javascript:void(0)" id="loginBtn" onclick="openLoginModal()">
        <i class="pe-7s-user"></i>
    </a>

    <!-- Dropdown (Hidden initially) -->
    <div id="userDropdown" class="user-dropdown" style="display:none;">
        <div class="user-icon">
            <i class="pe-7s-user"></i>
        </div>

        <div class="dropdown-menu">
            <a href="#">Your Profile</a>
            <a href="#">Manage Address</a>
            <a href="#">My Orders</a>
            <a href="#">My Coupons</a>
            <a href="javascript:void(0)" onclick="logout()">Logout</a>
        </div>
    </div>

</div>
                        <!-- OTP Login Modal -->
                        <div id="loginModal" class="login-register-modal">
                            <div class="modal-overlay" onclick="closeLoginModal()"></div>
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3>Login / Register</h3>
                                    <span class="close-btn" onclick="closeLoginModal()">✖</span>
                                </div>

                                <div class="modal-body">
                                    <!-- STEP 1: User Type Selection -->
                                    <div id="step1" class="auth-step active">
                                        <h4>Select Account Type</h4>
                                        <p class="text-muted">Choose how you want to register</p>
                                        
                                        <div class="user-type-selection">
                                            <label class="user-type-option">
                                                <input type="radio" name="userType" value="customer" checked required>
                                                <div class="option-card">
                                                    <div class="icon">👤</div>
                                                    <h5>Customer</h5>
                                                    <p>Regular buyer</p>
                                                </div>
                                            </label>
                                            
                                            <label class="user-type-option">
                                                <input type="radio" name="userType" value="franchise" required>
                                                <div class="option-card">
                                                    <div class="icon">🏪</div>
                                                    <h5>Franchise</h5>
                                                    <p>Business owner</p>
                                                </div>
                                            </label>
                                            
                                            <label class="user-type-option">
                                                <input type="radio" name="userType" value="zonal_franchise" required>
                                                <div class="option-card">
                                                    <div class="icon">🌍</div>
                                                    <h5>Zonal Franchise</h5>
                                                    <p>Regional partner</p>
                                                </div>
                                            </label>
                                        </div>

                                        <button type="button" class="btn-primary btn-block" onclick="goToPhoneStep()">Continue</button>
                                    </div>

                                    <!-- STEP 2: Phone Number & OTP -->
                                    <div id="step2" class="auth-step" style="display:none;">
                                        <h4>Phone Verification</h4>
                                        <p class="text-muted">Enter your mobile number</p>

                                        <div class="phone-input-group">
                                            <span class="country-code">🇮🇳 +91</span>
                                            <input type="text" id="phone" placeholder="Enter 10-digit mobile number" class="form-control" maxlength="10">
                                        </div>

                                        <div id="recaptcha-container" class="recaptcha-wrapper"></div>

                                        <button type="button" class="btn-primary btn-block" onclick="sendOtp()">Send OTP</button>
                                        <button type="button" class="btn-secondary btn-block" onclick="goToUserTypeStep()">Back</button>
                                    </div>

                                    <!-- STEP 3: OTP Verification -->
                                    <div id="step3" class="auth-step" style="display:none;">
                                        <h4>Verify OTP</h4>
                                        <p class="text-muted">Enter the 6-digit code sent to your number</p>

                                        <div class="otp-input-group">
                                            <input type="text" class="otp-box" maxlength="1" placeholder="0">
                                            <input type="text" class="otp-box" maxlength="1" placeholder="0">
                                            <input type="text" class="otp-box" maxlength="1" placeholder="0">
                                            <input type="text" class="otp-box" maxlength="1" placeholder="0">
                                            <input type="text" class="otp-box" maxlength="1" placeholder="0">
                                            <input type="text" class="otp-box" maxlength="1" placeholder="0">
                                        </div>

                                        <button type="button" class="btn-primary btn-block" onclick="verifyOtp()">Verify OTP</button>
                                        <p class="resend-text">
                                            Didn't receive code? 
                                            <button type="button" class="link-btn" onclick="sendOtp()">Resend OTP</button>
                                        </p>
                                    </div>

                                    <!-- STEP 4: Complete Profile (New Users) -->
                                    <div id="step4" class="auth-step" style="display:none;">
                                        <h4>Complete Your Profile</h4>
                                        <p class="text-muted">Tell us a bit about yourself</p>

                                        <form>
                                            <input type="text" id="profile_phone" class="form-control mb-3" value="" disabled>
                                            <input type="text" id="name" placeholder="Full Name" class="form-control mb-3" required>
                                            <input type="email" id="email" placeholder="Email Address" class="form-control mb-3" required>
                                            
                                            <button type="button" class="btn-primary btn-block" onclick="updateProfile()">Save & Continue</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- =========================== login section end =========================== -->
                        <div class="header-action-style">
                            <a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
                        </div>
                        <div class="header-action-style header-action-cart">
                            <a class="cart-active" href="#"><i class="pe-7s-shopbag"></i>
                                <span class="product-count bg-black">01</span>
                            </a>
                        </div>
                        <div class="header-action-style d-block d-lg-none">
                            <a class="mobile-menu-active-button" href="#"><i class="pe-7s-menu"></i></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="header-bottom-menu sticky-bar">
        <div class="container">
            <div class="row align-items-center">


                <!-- MENU -->
                <div class="col-lg-12 d-none d-lg-flex justify-content-between align-items-center">
                    <!-- <div class="col-lg-12 d-none d-lg-block"> -->
                    <div class="main-menu text-center">
                        <nav>
                            <ul>

                                <?php $__currentLoopData = $menu; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <a href="<?php echo e(url($category['slug'])); ?>">
                                        <?php echo e(strtoupper($category['name'])); ?>

                                    </a>

                                    <?php if(count($category['subCategories'])): ?>
                                    <ul class="mega-menu-style mega-menu-mrg-1">
                                        <li>
                                            <ul>

                                                
                                                <li>
                                                    <a class="dropdown-title" href="<?php echo e(url($category['slug'])); ?>">
                                                        <?php echo e($category['name']); ?>

                                                    </a>

                                                    <ul>
                                                        <?php $__currentLoopData = $category['subCategories']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sub): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                        <li style="display:flex; align-items:center; gap:10px;">

                                                            <img src="<?php echo e(!empty($sub['image']) ? $sub['image'] : asset('assets/images/default.png')); ?>"
                                                                style="width:40px; height:40px; object-fit:cover; border-radius:5px;">

                                                            <a href="<?php echo e(url($sub['slug'])); ?>">
                                                                <?php echo e($sub['name']); ?>

                                                            </a>
                                                        </li>
                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    </ul>
                                                </li>

                                                
                                                <li>
                                                    <img src="<?php echo e(!empty($category['image']) ? $category['image'] : asset('assets/images/default.png')); ?>"
                                                        style="width:200px;height:200px; object-fit:cover; border-radius:5px;">
                                                </li>

                                            </ul>
                                        </li>
                                    </ul>
                                    <?php endif; ?>

                                </li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        </nav>
                    </div>

                    <div class="sticky-icons">
                        <a href="#"><i class="pe-7s-user"></i></a>
                        <a href="#"><i class="pe-7s-like"></i></a>
                        <a href="#"><i class="pe-7s-shopbag"></i></a>
                    </div>
                </div>



            </div>
        </div>
    </div>
</header>
<!-- mini cart start -->
<div class="sidebar-cart-active">
    <div class="sidebar-cart-all">
        <a class="cart-close" href="#"><i class="pe-7s-close"></i></a>
        <div class="cart-content">
            <h3>Shopping Cart</h3>
            <ul>
                <li>
                    <div class="cart-img">
                        <a href="#"><img src="assets/images/cart/cart-1.jpg" alt=""></a>
                    </div>
                    <div class="cart-title">
                        <h4><a href="#">Stylish Swing Chair</a></h4>
                        <span> 1 × $49.00 </span>
                    </div>
                    <div class="cart-delete">
                        <a href="#">×</a>
                    </div>
                </li>
                <li>
                    <div class="cart-img">
                        <a href="#"><img src="assets/images/cart/cart-2.jpg" alt=""></a>
                    </div>
                    <div class="cart-title">
                        <h4><a href="#">Modern Chairs</a></h4>
                        <span> 1 × $49.00 </span>
                    </div>
                    <div class="cart-delete">
                        <a href="#">×</a>
                    </div>
                </li>
            </ul>
            <div class="cart-total">
                <h4>Subtotal: <span>$170.00</span></h4>
            </div>
            <div class="cart-btn btn-hover">
                <a class="theme-color" href="cart.html">view cart</a>
            </div>
            <div class="checkout-btn btn-hover">
                <a class="theme-color" href="checkout.html">checkout</a>
            </div>
        </div>
    </div>
</div><?php /**PATH C:\xampp\htdocs\cusella-ecommerce\laravel\resources\views/layout/nav.blade.php ENDPATH**/ ?>