WWWWWW

Current Directory: /home/u588966950/domains/snackbot.in/public_html
Viewing File: /home/u588966950/domains/snackbot.in/public_html/header.php
<style>
    .sp-logo img {
        width: 465px;
    }

    .product-card {
        border: 1px solid #e4e4e4;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: #fff;
        margin-bottom: 15px;
        margin-left: -5px;
        margin-right: -5px;
    }
</style>
<style>
    /* Define the default navbar background color */
    .navbar {
        transition: background-color 0.3s ease;
    }

    /* Define the sticky navbar background color */
    .navbar.sticky {
        background-color: #201c35 !important;
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9
    }

    .navbar.sticky .nav-link {
        color: #fff !important;
        /* Change to desired color */
    }

    .sp-nav .nav-link,
    .sp-nav .dropdown-item {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #201c35;
    }

    .sp-desktop .nav-item {
        margin: 0 8px 0 0;
    }

    @media screen and (max-width: 760px) {

        .sp-nav .nav-link,
        .sp-nav .dropdown-item {
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #ffffff;
            text-align: center;
        }
    }
</style>
<style>
    .logout-icon {
        font-size: 15px;
        cursor: pointer;
    }

    .discountIconGreen.svelte-zylbr1.svelte-zylbr1.svelte-zylbr1 {
        width: 18px;
        height: 18px;
        background-position: -200px -266px;
    }

    .globalImg {
        background-image: url(https://snackbot.in/icons.svg);
    }

    .globalImg {
        background-repeat: no-repeat;
    }
</style>
<!--SP Top Header-->

<!--<div class="container-fluid sp-top-header">
    <div class="row sp-row">
        <div class="col-sm-12 col-12">
            <p>Valentine's Sale Now On</p>
        </div>
    </div>
</div>-->
<!--./SP Top Header-->

<!--SP Middle Header-->
<?php
// Priority: session first, then cookie fallback
$displayName = '';
if (!empty($_SESSION['mobile_no'])) {
    $displayName = $_SESSION['mobile_no'];
}
$fetchuser = $conn->query("SELECT * FROM tbl_user WHERE mobileno='" . $_SESSION['mobile_no'] . "'")->fetch_assoc();

?>
<div class="container-fluid sp-middle-header">
    <div class="row align-items-center">
        <!-- Left Section: Need Help -->
        <div class="col-sm-3 col-5 sp-img-content">
            <a href="https://wa.me/+919111003900?text=Hi!Nibbler" target="_blank" class="sp-img-box text-white">
                <div class="sp-img">
                    <i class="bi bi-bell-fill"></i>
                </div>
                <div class="sp-img-content">Need Help?</div>
            </a>
        </div>

        <!-- Middle Section: Logo -->
        <div class="col-sm-6 sp-logo text-center">
            <a href="https://snackbot.in/">
                <img src="https://snackbot.in/img/logo-white.png" class="sp-logo" alt="Logo">
            </a>
        </div>

        <!-- Right Section: User & Cart -->
        <div class="col-sm-3 col-7 sp-search">
            <div class="sp-info d-flex justify-content-end align-items-center">
                <!-- User Greeting -->
                <a href="https://snackbot.in/my-account/" class="text-white me-3">
                    <i class="bi bi-person"></i> Hi! <b><?php echo ($fetchuser['fullname'] != '') ? htmlspecialchars($fetchuser['fullname']) : 'Nibbler'; ?></b>
                </a>

                <!-- Cart Icon -->
                <?php
                $fetchcart = $conn->query("SELECT SUM(qnty) AS ttlqnty FROM tbl_cart where sessionid='" . session_id() . "'")->fetch_assoc();
                ?>
                <a href="#" data-bs-toggle="offcanvas" data-bs-target="#cartMenu" class="text-white me-3">
                    <i class="bi bi-cart3"></i> Cart (<?php echo (isset($fetchcart['ttlqnty'])) ? $fetchcart['ttlqnty'] : 0; ?>)
                </a>

                <!-- Logout Button -->
                <?php if ($_SESSION['mobile_no'] != '') { ?>
                    <div class="logout-icon">
                        <a href="https://snackbot.in/logout/" class="text-white">
                            <i class="fas fa-sign-out-alt"></i> Logout
                        </a>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>
<!--./SP Middle Header-->

<!--SP Header-->
<nav class="navbar navbar-expand-lg navbar-light   sp-nav sp-desktop">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">

            <ul class="navbar-nav mx-auto">
                <!-- Engagement Rings - Mega Dropdown -->

                <li class="nav-item">
                    <a class="nav-link" href="https://snackbot.in/shop/">Shop SnackBoxes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://snackbot.in/meet-nibbler/">Meet Nibbler</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Let's Have Fun</a>
                </li>


            </ul>
        </div>
    </div>
</nav>

<!--./SP Header-->

<!--SP Mobile Header-->
<nav class="navbar navbar-expand-sm bg-light sticky-top sp-nav sp-mobile">
    <div class="container-fluid">
        <a class="navbar-brand" href="https://snackbot.in/"><img src="https://snackbot.in/img/logo-white.png"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav mx-auto">

                <li class="nav-item">
                    <a class="nav-link" href="https://snackbot.in/shop/">Shop SnackBoxes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://snackbot.in/meet-nibbler/">Meet Nibbler</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Let's Have Fun</a>
                </li>

            </ul>
        </div>
    </div>
</nav>
<!--./SP Mobile Header-->

<!-- Search Modal -->
<div class="modal fade search-modal" id="searchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <span class="close-btn" data-bs-dismiss="modal">&times;</span>
            <div class="modal-body">
                <div class="search-bar">
                    <input type="text" placeholder="Search..." aria-label="Search" />
                    <button type="submit"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Cart Offcanvas Sidebar -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="cartMenu">
    <div class="offcanvas-header cart-header">
        <h5 class="offcanvas-title">Shopping Cart</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body cart-body">
        <?php
        $totalamount = 0;
        $sqlcart = "SELECT * FROM tbl_cart WHERE sessionid='" . session_id() . "'";
        $querycart = $conn->query($sqlcart);
        while ($rowcart = $querycart->fetch_assoc()) {
            $amount = $rowcart['price'] * $rowcart['qnty'];
            $totalamount = $totalamount + $amount;
            $product = $conn->query("SELECT * FROM rk_item where id='" . $rowcart['pid'] . "'")->fetch_assoc();
            $cartimagephoto = (!empty($product['photo'])) ? '../images/' . $product['photo'] : '../images/noimage.jpeg';
        ?>
            <div class="cart-item">
                <img src="<?php echo $cartimagephoto; ?>" style="width:50px; height:50px;" alt="Item" />
                <div class="item-info">
                    <h6><?php echo htmlspecialchars($product['name']); ?> <span style="color:#666666; font-size:12px;"><i class="fa fa-times"></i> <?php echo $rowcart['qnty']; ?></span></h6>
                    <p>₹<?php echo $amount; ?></p>
                </div>
                <a href="https://snackbot.in/shop/?cdelid=<?php echo $rowcart['id']; ?>"> <button class="remove-btn"><i class="bi bi-trash"></i></button> </a>
            </div>
        <?php
        }
        ?>


    </div>

    <!-- Cart Footer -->
    <div class="cart-footer">
        <p><strong>Total: ₹<?php echo $totalamount; ?></strong></p>
        <div class="sp-btnn">
            <?php /*?><a href="https://snackbot.in/checkout/" class="btn btn-primary w-100">Checkout</a><?php */?>
            <a href="https://snackbot.in/cart/" class="btn btn-outline-secondary w-100">View Cart</a>
            <a href="#" data-bs-toggle="offcanvas" data-bs-target="#checkoutMenu" class="btn btn-primary w-100">Checkout</a>
        </div>
    </div>
</div>

<style>
    /* Container for steps */
    .steps-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* Each step block */
    .info-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        white-space: nowrap;
    }

    /* Optional: Adjust title spacing */
    .title.merchant-color {
        font-weight: normal;
        color: #333;
    }

    /* Reset so nothing gets a line by default */
    .steps.svelte-pizrld .steps-inner .step .info-wrap.svelte-pizrld:after {
        content: none;
    }

    /* Add dashed line after Mobile (1st step) */
    .steps.svelte-pizrld .steps-inner .step:nth-child(2) .info-wrap.svelte-pizrld:after {
        content: "";
        width: .875rem;
        border-top: 1px dashed var(--e0);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 115%;
        z-index: -1;
    }

    /* Add dashed line after Address (2nd step) */
    .steps.svelte-pizrld .steps-inner .step:nth-child(3) .info-wrap.svelte-pizrld:after {
        content: "";
        width: .875rem;
        border-top: 1px dashed var(--e0);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 115%;
        z-index: -1;
    }
</style>

<div class="offcanvas offcanvas-end" tabindex="-1" id="checkoutMenu">
    <div class="offcanvas-header cart-header">
        <div class="steps-container">
            <div class="info-wrap">
                <div class="title merchant-color"><img src="https://snackbot.in/img/logo-white.png" style="width:50px;"></div>
            </div>
            <div class="info-wrap">
                <div class="title merchant-color"><img src="https://snackbot.in/cchack.png" /></div>
            </div>
            <div class="info-wrap">
                <div class="title merchant-color">
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas-body cart-body" style="background: #e5e5e5;">
        <div class="steps-container" style="background:#FFFFFF;padding: 10px;border-radius: 7px;" id="toggleOrderSummary">
            <div class="info-wrap">
                <i class="bi bi-cart3"></i> &nbsp;&nbsp; Order Summary &nbsp; <i class="bi bi-caret-down"></i>
            </div>
            <div class="info-wrap">
                ₹<?php echo $totalamount; ?>
            </div>
        </div>
        <div id="orderitemdetails" style="display:none; margin-top:10px; background:#FFFFFF; border-radius: 7px;">
            <?php
            $totalamount = 0;
            $sqlcart = "SELECT * FROM tbl_cart WHERE sessionid='" . session_id() . "'";
            $querycart = $conn->query($sqlcart);
            while ($rowcart = $querycart->fetch_assoc()) {
                $amount = $rowcart['price'] * $rowcart['qnty'];
                $totalamount = $totalamount + $amount;
                $product = $conn->query("SELECT * FROM rk_item where id='" . $rowcart['pid'] . "'")->fetch_assoc();
                $cartimagephoto = (!empty($product['photo'])) ? '../images/' . $product['photo'] : '../images/noimage.jpeg';
            ?>
                <div class="cart-item">
                    <img src="<?php echo $cartimagephoto; ?>" style="width:50px; height:50px;" alt="Item" />
                    <div class="item-info">
                        <h6><?php echo htmlspecialchars($product['name']); ?> <span style="color:#666666; font-size:12px;"><i class="fa fa-times"></i> <?php echo $rowcart['qnty']; ?></span></h6>
                        <p>₹<?php echo $amount; ?></p>
                    </div>
                </div>
            <?php
            }
            ?>

        </div>

        <div class="steps-container" style="background:#FFFFFF;padding: 10px;border-radius: 7px; margin-top:10px;">
            <div class="info-wrap" style="font-weight:bold;">
                Login to Redeem Loyalty Points
            </div>
        </div>

        <div style="background:#FFFFFF;padding: 10px;border-radius: 7px; margin-top:10px;">
            <div class="coupon-box mb-2 d-flex justify-content-between align-items-center" style="background: #e5e5e5;border-radius: 6px;padding: 7px 10px;">

                <div>
                    <div class="globalImg discountIconGreen svelte-zylbr1" style="float:left; margin-right:5px;"></div>
                    <span class="coupon-code">NO FREE</span>
                    <span class="coupon-save" style="color: #15b79e;font-size: 10px;background: #ebf9f7;padding: 2px;border-radius: 3px;">YOU SAVE ₹00</span>
                </div>
                <span class="coupon-apply" style="color: #004b8d;">Apply</span>
            </div>

            <div class="d-flex justify-content-between coupon-footer">
                <span>7 coupons available</span>
                <span class="view-link" style="color:#004b8d">View Coupons &gt;</span>
            </div>
        </div>


        <div style="text-align:center; margin-top:20px;" id="mobilenobox">
            <h3 style="font-size: 14px;font-weight: 550; color:#201c35;">Enter Mobile Number</h3>
            <div style="width:220px;border:1px solid #201c35;height: 40px;margin: 0 auto;border-radius: 9px;padding: 6px;">
                <div style="float:left;height: 28px;border-right:1px solid #201c35;font-size: 20px;padding-right: 5px;">+91</div>
                <input type="text" id="mobileno" name="mobileno" placeholder="Enter Number"
                    style="float:left;background:none;width: 145px;margin-left: 6px;font-size: 19px;margin-top: -1px;border: 0;" />
            </div>
        </div>
        <div style="text-align:center; margin-top:20px; display:none;" id="otpbox">
            <h3 style="font-size: 14px;font-weight: 550; color:#201c35;">Enter OTP</h3>
            <div style="width:220px;border:1px solid #201c35;height: 40px;margin: 0 auto;border-radius: 9px;padding: 6px;">
                <input type="text" id="otp" name="otp" placeholder="Enter OTP"
                    style="float:left;background:none;width: 200px;font-size: 19px;margin-top: -1px;border: 0;" />
            </div>
            <div class="sp-btnn" style="margin-top:10px;">
                <div class="sp-btnn" style="margin-top:10px; text-align:center;">
                    <div style="width:220px; margin:0 auto;">
                        <a href="javascript:void(0);" id="verifyOtpBtn"
                            class="btn btn-success"
                            style="
               display:block;
               width:100%;
               font-size:16px;
               font-weight:600;
               text-transform:uppercase;
               border-radius:8px;
           ">
                            Verify OTP
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align:center; font-size:12px; margin-top:15px;">
            <input type="checkbox" value="YES" /> &nbsp; Notify me for orders, updates & offers
        </div>



    </div>

    <!-- Cart Footer -->
    <div class="cart-footer">
        <p><strong>Total: ₹<?php echo $totalamount; ?></strong></p>
        <div class="sp-btnn" id="continueBtnBox">
            <a href="javascript:void(0);" id="sendSmsBtn" class="btn btn-primary w-100"
                style="text-transform: uppercase;font-weight: normal;">
                Continue <i class="fa fa-long-arrow-right" style="font-size:17px;"></i>
            </a>
        </div>

        <div style="text-align:center; font-size:12px;">
            By proceeding, I accept that I have read and understood the SnackBot's <a href="#">Privacy Policy and T&C </a>
        </div>
    </div>
</div>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        $('#toggleOrderSummary').on('click', function() {
            $('#orderitemdetails').slideToggle();
        });
    });
</script>
<script>
    $(document).ready(function() {
        // === Step 1: Send OTP ===
        $("#sendSmsBtn").on("click", function() {
            var mobileno = $("#mobileno").val().trim();

            if (mobileno === "") {
				Swal.fire({
					toast: true,
					position: 'top-end', // you can use 'top', 'top-end', 'bottom-end'
					icon: 'error',
					title: 'Please enter mobile number!',
					showConfirmButton: false,
					timer: 3000,
					timerProgressBar: true
				});
                return;
            }

            $.ajax({
                url: "/send_sms.php", // <-- your PHP that sends OTP
                type: "POST",
                dataType: "json",
                data: {
                    mobileno: mobileno
                },
                success: function(res) {
                    if (res.status === "success") {
						
						Swal.fire({
							toast: true,
							position: 'top-end', // you can use 'top', 'top-end', 'bottom-end'
							icon: 'success',
							title: res.message,
							showConfirmButton: false,
							timer: 3000,
							timerProgressBar: true
						});
                        $("#mobilenobox").hide();
                        $("#continueBtnBox").hide();
                        $("#otpbox").show();
                    } else {
						Swal.fire({
							toast: true,
							position: 'top-end', // you can use 'top', 'top-end', 'bottom-end'
							icon: 'error',
							title: res.message,
							showConfirmButton: false,
							timer: 3000,
							timerProgressBar: true
						});
                    }
                },
                error: function() {
					Swal.fire({
							toast: true,
							position: 'top-end', // you can use 'top', 'top-end', 'bottom-end'
							icon: 'error',
							title: 'Error contacting server',
							showConfirmButton: false,
							timer: 3000,
							timerProgressBar: true
						});
                }
            });
        });

        // === Step 2: Verify OTP ===
        $("#verifyOtpBtn").on("click", function() {
            var otp = $("#otp").val().trim();

            if (otp === "") {
				Swal.fire({
							toast: true,
							position: 'top-end', // you can use 'top', 'top-end', 'bottom-end'
							icon: 'error',
							title: 'Please enter OTP',
							showConfirmButton: false,
							timer: 3000,
							timerProgressBar: true
						});
                return;
            }

            $.ajax({
                url: "/verify_otp.php", // <-- your PHP that verifies OTP
                type: "POST",
                dataType: "json",
                data: {
                    otp: otp
                },
                success: function(res) {
                    if (res.status === "success") {
                        Swal.fire({ 
							toast: true,
							position: 'top-end',
							icon: 'success',
							title: res.message,
							showConfirmButton: false,
							timer: 1500,
							timerProgressBar: true,
							didClose: () => {
								// Redirect after the toast closes
								window.location.href = 'https://snackbot.in/checkout';
							}
						});
                        // ✅ Redirect or show success UI
                    } else {
						Swal.fire({
							toast: true,
							position: 'top-end', // you can use 'top', 'top-end', 'bottom-end'
							icon: 'error',
							title: res.message,
							showConfirmButton: false,
							timer: 3000,
							timerProgressBar: true
						});
                    }
                },
                error: function() {
					Swal.fire({
							toast: true,
							position: 'top-end', // you can use 'top', 'top-end', 'bottom-end'
							icon: 'error',
							title: 'Error contacting server',
							showConfirmButton: false,
							timer: 3000,
							timerProgressBar: true
						});
                }
            });
        });
    });
</script>
F1l3 Manager
