One Hat Cyber Team

View File Name : other-product-details.php

<?php
include 'admin/connection.inc.php';


session_name('vaishnavi_awaha');
session_start();
if (isset($_SESSION['user_id'])) {
    $is_logged_in = true;
    $user_id = $_SESSION['user_id'];
} else {
    $is_logged_in = false;
}

// Get product ID from URL
$product_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

// Fetch product details from other_products table
$sql = "SELECT * FROM other_products WHERE id = $product_id";
$result = $conn->query($sql);

// Check if product exists
if ($result->num_rows > 0) {
    $product = $result->fetch_assoc();
} else {
    die("Product not found.");
}
?>


<!DOCTYPE html>
<html lang="zxx">
<head>
        <!--====== Required meta tags ======-->
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="eCommerce,shop,fashion">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--====== Title ======-->
        <title><?php echo $product['product_name']; ?> - Awaha</title>
        <!--====== Favicon Icon ======-->
        <link rel="shortcut icon" href="assets/images/logo/awaha.png" type="image/png">
        <!--====== Google Fonts ======-->
        <link href="https://fonts.googleapis.com/css2?family=Aoboshi+One&amp;family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet">
        <!--====== Flaticon css ======-->
        <link rel="stylesheet" href="assets/fonts/flaticon/flaticon_pesco.css">
        <!--====== FontAwesome css ======-->
        <link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css">
        <!--====== Bootstrap css ======-->
        <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
        <!--====== Slick-popup css ======-->
        <link rel="stylesheet" href="assets/vendor/slick/slick.css">
        <!--====== Nice Select css ======-->
        <link rel="stylesheet" href="assets/vendor/nice-select/css/nice-select.css">
        <!--====== Magnific-popup css ======-->
        <link rel="stylesheet" href="assets/vendor/magnific-popup/dist/magnific-popup.css">
        <!--====== Jquery UI css ======-->
        <link rel="stylesheet" href="assets/vendor/jquery-ui/jquery-ui.min.css">
        <!--====== Animate css ======-->
        <link rel="stylesheet" href="assets/vendor/aos/aos.css">
        <!--====== Default css ======-->
        <link rel="stylesheet" href="assets/css/default.css">
        <!--====== Style css ======-->
        <link rel="stylesheet" href="assets/css/style.css">
        
        <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Rose : Soothing and hydrating." />
<meta name="twitter:description" content="Check out this amazing product on Digital Cardwale." />
<meta name="twitter:image" content="https://digitalcardwale.com/awaha/<?php echo $product['product_img']; ?>" />



<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Rose : Soothing and hydrating." />
<meta name="twitter:description" content="Check out this amazing product on Digital Cardwale." />
<meta name="twitter:image" content="https://digitalcardwale.com/awaha/<?php echo $product['product_img']; ?>" />


<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<style>

    .wishlist-icon i {
    color: #000; /* Default color */
    transition: color 0.3s ease;
}

/* Active heart color (red) */
.wishlist-added i {
    color: #d7b1bb !important; /* Red color when added to wishlist */
}


.icon-btn wishlist-icon :hover-content{
    background: white;
}
.product-item.style-three .product-thumbnail .hover-content a,
{
    background: white;
}
 /* Add styles for selected stars */
        .rating li {
            display: inline-block;
            cursor: pointer;
            color: #ddd;
        }
    
        .rating li.selected i,
        .rating li:hover ~ li i {
            color: gold;
        }

.add-to-cart-button {
    background-color: #4CAF50; /* Example: Green button */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.add-to-cart-button:hover {
    background-color: #45a049; /* Hover effect */
    cursor: pointer;
}


.product-gallery-area .product-thumb-slider .product-img img {
    border-radius: 10px;
    height: 149px;
    width: 303px;
}
</style>

    </head>
    <body>
        
        <!--====== Start Overlay ======-->
        <div class="offcanvas__overlay"></div>
        <!--====== Start Sidemenu-wrapper-cart Area ======-->
        <div class="sidemenu-wrapper-cart">
    <div class="sidemenu-content">
        <div class="widget widget-shopping-cart">
            <h4>My cart</h4>
            <div class="sidemenu-cart-close"><i class="fas fa-times"></i></div>
            <div class="widget-shopping-cart-content">
                <ul class="pesco-mini-cart-list" id="cart-items-list">
                    <!-- Cart items will be dynamically loaded here -->
                </ul>
                <div class="cart-mini-total">
                    <div class="cart-total">
                        <span><strong>Subtotal:</strong></span> 
                        <span class="amount" id="cart-subtotal">0.00</span>
                    </div>
                </div>
                <div class="cart-button-box">
                    <a href="checkout.php" class="theme-btn style-one">Proceed to checkout</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--====== End Sidemenu-wrapper-cart Area ======-->
        <!--====== Start Header Section ======-->
        <?php include 'header.php' ?>
        <!--====== End Header Section ======-->
        <!--====== Main Bg  ======-->
        <main class="main-bg">
            <!--====== Start Page Banner Section ======-->
            <section class="page-banner">
                <div class="page-banner-wrapper p-r z-1">
                    <svg class="lineanm" viewBox="0 0 1920 347" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="line" d="M-39 345.187C70 308.353 397.628 293.477 436 145.186C490 -63.5 572 -57.8156 688 255.186C757.071 441.559 989.5 -121.315 1389 98.6856C1708.6 274.686 1940.33 156.519 1964.5 98.6856" stroke="white" stroke-width="3" stroke-dasharray="2 2"/>
                    </svg>
                    <div class="page-image"><img src="assets/images/soap/bgrsoap.png" alt="image"></div>
                    <svg class="page-svg" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.1742 33.0065C14.029 35.2507 7.5486 39.0636 0 40.7339V86H1937V64.9942C1933.1 60.1623 1912.65 65.1777 1904.51 62.6581C1894.22 59.4678 1884.93 55.0079 1873.77 52.7742C1861.2 50.2585 1823.41 36.3854 1811.99 39.9252C1805.05 42.0727 1796.94 37.6189 1789.36 36.6007C1769.18 33.8879 1747.19 31.1848 1726.71 29.7718C1703.81 28.1919 1678.28 27.0012 1657.53 34.4442C1636.45 42.005 1606.07 60.856 1579.5 55.9191C1561.6 52.5906 1543.41 47.0959 1528.45 56.9075C1510.85 68.4592 1485.74 74.2518 1460.44 76.136C1432.32 78.2297 1408.53 70.6879 1384.73 62.2987C1339.52 46.361 1298.19 27.1677 1255.08 9.28534C1242.58 4.10111 1214.68 15.4762 1200.55 16.6533C1189.77 17.5509 1181.74 15.4508 1172.12 12.8795C1152.74 7.70033 1133.23 2.88525 1111.79 2.63621C1088.85 2.36971 1073.94 7.88289 1056.53 15.8446C1040.01 23.3996 1027.48 26.1777 1007.8 26.1777C993.757 26.1777 975.854 25.6887 962.844 28.9632C941.935 34.2258 932.059 38.7874 914.839 28.6037C901.654 20.8061 866.261 -2.56499 844.356 7.12886C831.264 12.9222 820.932 21.5146 807.663 27.5255C798.74 31.5679 779.299 42.0561 766.33 39.1166C758.156 37.2637 751.815 31.6349 745.591 28.2443C730.967 20.2774 715.218 13.2948 695.846 10.723C676.168 8.11038 658.554 23.1787 641.606 27.4357C617.564 33.4742 602.283 27.7951 579.244 27.7951C568.142 27.7951 548.414 30.4002 541.681 23.6618C535.297 17.2722 530.162 9.74921 523.263 3.71444C517.855 -1.01577 505.798 -0.852017 498.318 2.09709C479.032 9.7007 453.07 10.0516 431.025 9.64475C407.556 9.21163 368.679 1.61612 346.618 10.3636C319.648 21.0575 291.717 53.8338 254.67 45.2266C236.134 40.9201 225.134 37.5813 204.78 40.7339C186.008 43.6415 171.665 50.7785 156.051 57.3567C146.567 61.3523 152.335 52.6281 151.12 47.9222C149.535 41.7853 139.994 34.5585 132.991 30.4008C120.206 22.8098 90.2848 24.3246 74.2546 24.6502C55.5552 25.0301 37.9201 27.747 21.1742 33.0065Z" fill="#FFFAF3"/>
                            </svg>
                            <div class="shape shape-one"><span></span></div>
                            <div class="shape shape-two"><span></span></div>
                            <div class="shape shape-three"><span><img src="assets/images/shape/curved-arrow.png" alt=""></span></div>            
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="page-banner-content">
                                            <h1><?php echo $product['product_name']; ?> </h1>
                                            <ul class="breadcrumb-link">
                                                <li><a href="index.html">Home</a></li>
                                                <li><i class="fas fa-long-arrow-right"></i></li>
                                                <li class="active">Rose</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section><!--====== End Page Banner Section ======-->
            <!--====== Start Shop Details Section ======-->
            <section class="shop-details-section pt-120 pb-80">
                <div class="container">
                    <div class="shop-details-wrapper">
                        <?php
// Include the database connection file
include 'connection.inc.php';

// Get the product ID from the URL
$product_id = intval($_GET['id']); // Ensure product_id is an integer

// Fetch product details from the database
$sql = "SELECT * FROM other_products WHERE id = $product_id";
$result = $conn->query($sql);

// Check for errors in the query
if ($result === false) {
    die("Error in query: " . $conn->error);
}

$product = $result->fetch_assoc();
?>

<div class="row">
   <div class="col-xl-6">
    <!--=== Product Gallery ===-->
    <div class="product-gallery-area mb-50" data-aos="fade-up" data-aos-duration="1200">
        <div class="product-big-slider mb-30">
            <?php if (!empty($product['product_img'])): ?>
                <div class="product-img text-center">
                    <a href="awaha/<?php echo htmlspecialchars($product['product_img']); ?>" class="img-popup">
                        <img src="awaha/<?php echo htmlspecialchars($product['product_img']); ?>" height="550" alt="Product">
                    </a>
                </div>
            <?php endif; ?>

            <?php if (!empty($product['product_img1'])): ?>
                <div class="product-img text-center">
                    <a href="awaha/<?php echo htmlspecialchars($product['product_img1']); ?>" class="img-popup">
                        <img src="awaha/<?php echo htmlspecialchars($product['product_img1']); ?>" height="550" alt="Product">
                    </a>
                </div>
            <?php endif; ?>

            <?php if (!empty($product['product_img2'])): ?>
                <div class="product-img text-center">
                    <a href="awaha/<?php echo htmlspecialchars($product['product_img2']); ?>" class="img-popup">
                        <img src="awaha/<?php echo htmlspecialchars($product['product_img2']); ?>" height="550" alt="Product">
                    </a>
                </div>
            <?php endif; ?>
        </div>

        <!-- Product Thumbnail Slider -->
        <div class="product-thumb-slider">
            <?php if (!empty($product['product_img'])): ?>
                <div class="product-img">
                    <img src="awaha/<?php echo htmlspecialchars($product['product_img']); ?>" alt="Product">
                </div>
            <?php endif; ?>

            <?php if (!empty($product['product_img1'])): ?>
                <div class="product-img">
                    <img src="awaha/<?php echo htmlspecialchars($product['product_img1']); ?>" alt="Product">
                </div>
            <?php endif; ?>

            <?php if (!empty($product['product_img2'])): ?>
                <div class="product-img">
                    <img src="awaha/<?php echo htmlspecialchars($product['product_img2']); ?>" alt="Product">
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>


    <div class="col-xl-6">
        <div class="product-info mb-50" data-aos="fade-up" data-aos-duration="1400">
            <h4 class="title"><?php echo $product['product_name']; ?></h4>

           

            <p style="text-align:justify"><?php echo $product['product_details']; ?></p>

            <div class="product-price">
                <span class="price new-price"><span class="currency">₹</span><?php echo $product['product_discount_price'] ?: $product['product_price']; ?></span>
                <?php if (!empty($product['product_discount_price'])): ?>
                    <span class="price prev-price"><span class="currency">₹</span><?php echo $product['product_price']; ?></span>
                <?php endif; ?>
            </div>
            
              <p class="text-success">Product available in 5 Litre also</p>

            <!-- Out of Stock Check -->
            <?php if ($product['product_stock'] == 0): ?>
                <div class="out-of-stock-message" style="color: red; font-size: 16px; margin-top: 10px;">
                    <strong>Out of Stock</strong>
                </div>
            <?php else: ?>
                 <div class="product-cart-variation">
                                <ul>
                                    <li>
                                        <div class="quantity-input">
                                            <button class="quantity-down"><i class="fas fa-minus"></i></button>
                                            <input class="quantity" type="text" value="1" name="quantity">
                                            <button class="quantity-up"><i class="fas fa-plus"></i></button>
                                        </div>
                                    </li>
                                   <li>
    <button class="add-to-cart-btn" style="color:white;background:black; padding:10px;border-radius:10px; height:50px;" data-product-id="<?= htmlspecialchars($product['id']); ?>">
    Add to Cart
</button>

</li>

                                    
                                    
                                    
                                    
                                    
                                    <li style="margin-left:30px">
                                         <?php
                    // Check if the product is in the user's wishlist
                   
                    if ($user_id !== null) {  // Ensure user_id is not null
                        $query = "SELECT * FROM wishlist WHERE user_id = '$user_id' AND product_id = '$product_id'";
                        $result_wishlist = mysqli_query($conn, $query);
                        $is_in_wishlist = mysqli_num_rows($result_wishlist) > 0;
                    } else {
                        $is_in_wishlist = false;  // No wishlist check if user is not logged in
                    }
                    ?>
                                        
    <a href="add-to-wishlist.php?product_id=<?php echo $product_id; ?>" 
       class="icon-btn wishlist-icon <?php echo $is_in_wishlist ? 'wishlist-added' : ''; ?>" 
       id="wishlist-icon-<?php echo $product_id; ?>">
        <i class="fa fa-heart"></i>
    </a>
</li>

<!-- CSS to Change Icon Color -->
<style>
    .wishlist-icon {
        color: gray; /* Default icon color */
        transition: color 0.3s ease-in-out;
    }
    .wishlist-icon.wishlist-added {
        color: red; /* Change to red if in wishlist */
    }
</style>

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

            <!-- Wishlist Section -->
            <div class="product-meta">
                <ul>
                    <li><span>SKU :</span><?php echo $product['sku_id']; ?></li>
                  
                   
                    <li><span>Share :</span>
                                            <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('https://digitalcardwale.com/awaha/product-details.php?id=' . $product['id']); ?>" target="_blank">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <a href="https://www.linkedin.com/shareArticle?url=<?php echo urlencode('https://digitalcardwale.com/awaha/product-details.php?id=' . $product['id']); ?>&title=<?php echo urlencode($product['product_name']); ?>" target="_blank">
                                                <i class="fab fa-linkedin-in"></i>
                                            </a>
                                            <a href="https://wa.me/?text=<?php echo urlencode('Check out this product: ' . $product['product_name'] . ' - ' . 'https://digitalcardwale.com/awaha/product-details.php?id=' . $product['id']); ?>" target="_blank">
                                                <i class="fab fa-whatsapp"></i>
                                            </a>
                                            <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode('https://digitalcardwale.com/awaha/product-details.php?id=' . $product['id']); ?>&text=<?php echo urlencode($product['product_name']); ?>" target="_blank">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                            <a href="mailto:?subject=<?php echo urlencode('Check out this product: ' . $product['product_name']); ?>&body=<?php echo urlencode('Here is a product you might like: ' . $product['product_name'] . ' - ' . 'https://digitalcardwale.com/awaha/product-details.php?id=' . $product['id']); ?>">
                                                <i class="fas fa-envelope"></i>
                                            </a>
                                        </li>

                                        </ul>
                                    </div>
                                    <div class="special-features">
                                        <span><i class="fas fa-shipping-fast"></i>Free Shipping</span>
                                        <span><i class="fas fa-box-open"></i>Easy Payment Method</span>
                                    </div>
                </ul>
            </div>
        </div>
    </div>
</div>

                        </div>
                       
                    </div>
                </div>
            </section><!--====== End Shop Details Section ======-->
            
            
            
            
            
           
        </main>
        <!--====== Start Footer Main  ======-->
       <?php include 'footer.php' ?>
        <!--====== End Footer Main  ======-->
        <!--====== Back To Top  ======-->
        
        
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.getElementById('review-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission

        // Check if the user is logged in (assuming PHP sets this in a hidden field or a JS variable)
        var isLoggedIn = <?php echo isset($_SESSION['user_id']) ? 'true' : 'false'; ?>;

        if (!isLoggedIn) {
            Swal.fire({
                title: 'Login Required!',
                text: 'You must be logged in to submit a review.',
                icon: 'warning',
                confirmButtonText: 'Login'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = 'login.php'; // Redirect to login page
                }
            });
            return;
        }

        // Create a new FormData object to send the form data via AJAX
        var formData = new FormData(this);

        // Make an AJAX request to submit the form data
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "submit-review.php", true);

        xhr.onload = function() {
            if (xhr.status === 200) {
                Swal.fire({
                    title: 'Success!',
                    text: 'Your review has been submitted.',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload(); // Reload page after success
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: 'There was a problem submitting your review.',
                    icon: 'error',
                    confirmButtonText: 'Try Again'
                });
            }
        };

        xhr.send(formData); // Send the form data to the server
    });
</script>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
    const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
    const cartCountElement = document.querySelector('#cart-count'); // Update cart count dynamically

    addToCartButtons.forEach(button => {
        button.addEventListener('click', (event) => {
            event.preventDefault();

            const productId = button.getAttribute('data-product-id');

            fetch('add-to-cart.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ product_id: productId }),
            })
                .then(response => response.json())
                .then(data => {
                    if (data.redirect) {
                        // Redirect to login page if not logged in
                        window.location.href = 'login.php';
                    } else if (data.success) {
                        // Update cart count if successful
                        cartCountElement.textContent = data.cart_count;

                        // Display SweetAlert success message
                        Swal.fire({
                            icon: 'success',
                            title: 'Added to Cart',
                            text: 'The product has been successfully added to your cart!',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            // Reload the page after the alert is closed
                            location.reload();
                        });
                    } else {
                        // Display SweetAlert error message
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to add the product to your cart. Please try again.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);

                    // Display SweetAlert error message for fetch failure
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An error occurred while processing your request. Please try again later.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                });
        });
    });
});



document.addEventListener('DOMContentLoaded', () => {
    const cartContainer = document.querySelector('#cart-items-list');
    const cartSubtotal = document.querySelector('#cart-subtotal');

    if (!cartContainer || !cartSubtotal) {
        console.error('Cart container or subtotal not found.');
        return;
    }

    // Fetch cart items from server
    fetch('fetch-cart-items.php')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let itemsHTML = '';
                let subtotal = 0;

                data.cart_items.forEach(item => {
                    const { product_id, product_name, product_price, product_img, quantity } = item;

                    // Create cart item list entry
                    itemsHTML += `
                        <li class="sidebar-cart-item" data-product-id="${product_id}">
                            <a href="#" class="remove-cart" data-product-id="${product_id}">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                            <a href="#">
                                <img src="path_to_images/${product_img}" alt="${product_name}">
                                ${product_name}
                            </a>
                            <span class="quantity">${quantity} × ₹<span class="price">${product_price}</span></span>
                        </li>
                    `;
                    // Calculate the subtotal
                    subtotal += product_price * quantity;
                });

                // Update cart UI with new cart items
                cartContainer.innerHTML = itemsHTML;
                cartSubtotal.innerHTML = `₹${subtotal.toFixed(2)}`;
            } else {
                cartContainer.innerHTML = '<li>No items in the cart</li>';
            }
        })
        .catch(error => {
            console.error('Error fetching cart items:', error);
            cartContainer.innerHTML = '<li>Error loading cart items</li>';
        });

    // Event delegation for removing items
   cartContainer.addEventListener('click', (event) => {
        const removeButton = event.target.closest('.remove-cart');

        if (removeButton) {
            event.preventDefault();
            console.log('Remove button clicked!');

            const cartItem = removeButton.closest('.sidebar-cart-item');

            if (!cartItem) {
                console.error('Cart item container not found.');
                return;
            }

            const productId = cartItem.getAttribute('data-product-id');

            if (!productId) {
                console.error('No product ID found.');
                return;
            }

            console.log('Removing item with ID:', productId);

            // Call API to remove item
            fetch('remove-cart-item.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ product_id: productId }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    cartItem.remove(); // Remove item from UI
                    updateSubtotal(); // Update subtotal
                } else {
                    console.error('Error removing item:', data.message);
                }
            })
            .catch(error => console.error('Error removing item:', error));
        }
    });

    // Function to update subtotal
    function updateSubtotal() {
        let subtotal = 0;
        const cartItems = document.querySelectorAll('.sidebar-cart-item');

        cartItems.forEach(item => {
            const quantityElement = item.querySelector('.quantity');
            const priceElement = item.querySelector('.price');

            if (quantityElement && priceElement) {
                const quantity = parseInt(quantityElement.textContent.split(' × ')[0], 10);
                const price = parseFloat(priceElement.textContent) || 0;
                subtotal += quantity * price;
            }
        });

        cartSubtotal.innerHTML = `₹${subtotal.toFixed(2)}`;
    }
});



        </script>
        <div class="back-to-top" ><i class="fas fa-angle-up"></i></div>
        <!--====== Jquery js ======-->
        <script src="assets/vendor/jquery-3.7.1.min.js"></script>
        <!--====== Bootstrap js ======-->
        <script src="assets/vendor/popper/popper.min.js"></script>
        <!--====== Bootstrap js ======-->
        <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
        <!--====== Slick js ======-->
        <script src="assets/vendor/slick/slick.min.js"></script>
        <!--====== Magnific js ======-->
        <script src="assets/vendor/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
        <!--====== Nice-select js ======-->
        <script src="assets/vendor/nice-select/js/jquery.nice-select.min.js"></script>
        <!--====== Jquery Ui js ======-->
        <script src="assets/vendor/jquery-ui/jquery-ui.min.js"></script>
        <!--====== SimplyCountdown js ======-->
        <script src="assets/vendor/simplyCountdown.min.js"></script>
        <!--====== Aos js ======-->
        <script src="assets/vendor/aos/aos.js"></script>
        <!--====== Main js ======-->
        <script src="assets/js/theme.js"></script>
        
        
     <script>
    // JavaScript to handle star rating
    document.addEventListener('DOMContentLoaded', function () {
        const starRating = document.querySelector('#star-rating');
        const selectedRating = document.querySelector('#selected-rating');

        if (starRating) {
            starRating.addEventListener('click', function (e) {
                if (e.target.tagName === 'I') {
                    const stars = Array.from(starRating.querySelectorAll('li'));
                    const value = e.target.parentElement.getAttribute('data-value');
                    selectedRating.value = value;

                    // Reset classes
                    stars.forEach(star => star.classList.remove('selected'));

                    // Highlight selected stars
                    stars.slice(0, value).forEach(star => star.classList.add('selected'));
                }
            });
        }
    });
    
    
    //sharing options
     function sharePage() {
        if (navigator.share) {
            navigator.share({
                title: document.title,
                text: 'Check out this amazing page!',
                url: window.location.href,
            })
            .then(() => console.log('Thanks for sharing!'))
            .catch(console.error);
        } else {
            alert('Web Share API is not supported in your browser. Please copy the URL manually.');
        }
    }
</script>

           <script>
// Function to handle wishlist toggle (click event)
function toggleWishlist(event, productId) {
    event.preventDefault(); // Prevent the default anchor behavior

    let url = "add-to-wishlist.php?product_id=" + productId; // URL to send request
    
    // Perform the AJAX request to toggle the wishlist status
    fetch(url)
        .then(response => response.text())
        .then(data => {
            // Reload the page to reflect the updated wishlist state
            location.reload();
        })
        .catch(error => console.error('Error:', error));
}

// Handle double-click to remove product from wishlist
document.querySelector("#wishlist-icon-<?php echo $product_id; ?>").ondblclick = function(event) {
    event.preventDefault(); // Prevent the default action on double-click

    let url = "add-to-wishlist.php?product_id=<?php echo $product_id; ?>"; // Same URL for removal
    
    // Perform the AJAX request to remove the product from wishlist
    fetch(url)
        .then(response => response.text())
        .then(data => {
            // Reload the page to reflect the updated wishlist state
            location.reload();
        })
        .catch(error => console.error('Error:', error));
};
</script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.6.0/dist/sweetalert2.min.js"></script>
   

<script>
   // main.js or scripts.js
function toggleWishlist(product_id) {
    $.ajax({
        url: 'toggle-wishlist.php',
        type: 'POST',
        data: { product_id: product_id },
        dataType: 'json',
        success: function(response) {
            let wishlistIcon = $("#wishlist-icon-" + product_id);
            if (response.status === 'added') {
                wishlistIcon.addClass('wishlist-added');
            } else if (response.status === 'removed') {
                wishlistIcon.removeClass('wishlist-added');
            }
        }
    });
}

   </script>
   <script>
   $(document).ready(function() {
    $('#wishlist-icon').click(function(e) {
        e.preventDefault();
        
        // Get the product ID and user ID (assuming the user ID is available, such as in a session or as a data attribute)
        let productId = $(this).data('item-id');
        let userId = 1;  // Example: Replace this with actual user ID from your session or auth system

        // Send the data to the backend via AJAX
        $.ajax({
            url: 'add-to-wishlist.php',  // PHP script to handle the database insertion
            method: 'POST',
            data: {
                user_id: userId,
                product_id: productId
            },
            success: function(response) {
                // Display success message
                Swal.fire({
                    icon: 'success',
                    title: 'Added to Wishlist',
                    text: 'The item has been added to your wishlist.',
                    timer: 2000,
                    showConfirmButton: false
                });

                // Optionally, change the icon to indicate it's added to wishlist
                $('#wishlist-icon').find('i').removeClass('fa-heart').addClass('fa-heart-o');
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Something went wrong, please try again later.',
                    timer: 2000,
                    showConfirmButton: false
                });
            }
        });
    });
});


   </script>
   
    </body>
</html>