single_product.php

<?php
include("header.php");
// Check if the user is logged in
if (!isset($_SESSION['id'])) {
    echo "<script>
    alert('Please Login First');
    window.location.href='login.php';
  </script>";
}
// Check if product_id is set in the request
if (!isset($_REQUEST['id'])) {
    echo "Product ID is missing.";
    exit();
}
$user_id = $_SESSION['id']; // Assuming the user's ID is stored in the session

$product_id = $_GET['id'];

// Fetch main product image
$sql_product = "SELECT product_image FROM product WHERE p_id = '$product_id'";
$result_product = mysqli_query($conn, $sql_product);
$main_image = mysqli_fetch_assoc($result_product)['product_image'];

// Fetch additional product images
$sql_images = "SELECT image FROM product_images WHERE product_id = '$product_id'";
$result_images = mysqli_query($conn, $sql_images);
$additional_images = [];
while ($row = mysqli_fetch_assoc($result_images)) {
    $additional_images[] = $row['image'];
}

// Fetch product details
$sql_details = "SELECT product.*, category.* FROM product JOIN category ON product.c_id = category.c_id WHERE p_id = '$product_id'";
$result_details = mysqli_query($conn, $sql_details);
$data = mysqli_fetch_assoc($result_details);

// Check if the product is in the user's cart
$cart_check_query = "SELECT * FROM cart WHERE u_id = '$user_id' AND p_id = '$product_id'";
$cart_check_result = mysqli_query($conn, $cart_check_query);
$is_in_cart = mysqli_num_rows($cart_check_result) > 0;

// Calculate expected delivery date (current date + 5 days)
$expected_delivery_date = date('d M Y', strtotime('+5 days'));
?>

<!-- =========== add to cart button styling ======================== -->
<style>
    .cart-button {
        position: relative;
        padding: 10px;
        width: 200px;
        height: 50px;
        border: 0;
        border-radius: 7px;
        background-color: #0061a8;
        outline: none;
        cursor: pointer;
        color: #fff;
        transition: .3s ease-in-out;
        overflow: hidden;
    }

    .cart-button:hover {
        background-color: #123444;
    }

    .cart-button:active {
        transform: scale(.9);
    }

    .cart-button .fa-shopping-cart {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: -10%;
        font-size: 1.7em;
        transform: translate(-50%, -50%);
    }

    .cart-button .fa-box {
        position: absolute;
        z-index: 3;
        top: -20%;
        left: 52%;
        font-size: 1.2em;
        transform: translate(-50%, -50%);
    }

    .cart-button span {
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 50%;
        font-size: 1.2em;
        color: #fff;
        transform: translate(-50%, -50%);
    }

    .cart-button span.add-to-cart {
        opacity: 1;
    }

    .cart-button span.added {
        opacity: 0;
    }

    .cart-button.clicked .fa-shopping-cart {
        animation: cart 1.5s ease-in-out forwards;
    }

    .cart-button.clicked .fa-box {
        animation: box 1.5s ease-in-out forwards;
    }

    .cart-button.clicked span.add-to-cart {
        animation: txt1 1.5s ease-in-out forwards;
    }

    .cart-button.clicked span.added {
        animation: txt2 1.5s ease-in-out forwards;
    }

    .cart-button.remove-from-cart {
        font-size: 17px;
        padding: 8px;
        width: 180px;
        height: 50px;
    }

    .cart-button.remove-from-cart span {
        font-size: 0.8em;
        line-height: 1;
        text-align: center;
    }

    @keyframes cart {
        0% {
            left: -10%;
        }

        40%,
        60% {
            left: 50%;
        }

        100% {
            left: 110%;
        }
    }

    @keyframes box {

        0%,
        40% {
            top: -20%;
        }

        60% {
            top: 40%;
            left: 52%;
        }

        100% {
            top: 40%;
            left: 112%;
        }
    }

    @keyframes txt1 {
        0% {
            opacity: 1;
        }

        20%,
        100% {
            opacity: 0;
        }
    }

    @keyframes txt2 {

        0%,
        80% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .cart-button.go-to-cart {
        background-color: #28a745;
        /* Green for "Go to Cart" */
    }

    .cart-button.go-to-cart:hover {
        background-color: #218838;
    }

    /* Styling for main image */
    .product_main_pic img {
        width: 100%;
        /* Make the image take the full width */
        height: auto;
        /* Maintain the aspect ratio */
        object-fit: contain;
        /* Ensure the image fits within the container without cropping */
    }

    /* Styling for the clickable gallery images */
    .img_gallery img {
        width: 100%;
        /* Set width of gallery images */
        height: auto;
        /* Maintain aspect ratio */
        max-height: 80px;
        /* Ensure a consistent height */
        object-fit: cover;
        /* Ensure images fill the container */
        margin-bottom: 10px;
        /* Add space between images */
        border: 2px solid #ccc;
        /* Add a border for better visibility */
        cursor: pointer;
        /* Indicate interactivity */
    }

    .img_gallery img:hover {
        border-color: #0061a8;
        /* Change border color on hover */
    }

    /* Styling for the zoom container */
    .main_img {
        position: relative;
        overflow: hidden;
    }

    .main_img img {
        transition: transform 0.3s ease;
        cursor: zoom-in;
    }

    .main_img:hover img {
        transform: scale(1.9);
        /* Zoom level */
        cursor: zoom-out;
    }

    .main_img {
        /* width: 100%; */
        /* height: 100%; */
        display: flex;
        justify-content: center;
        align-items: center;
    }







    .cart-button {
        position: relative;
        padding: 10px;
        width: 200px;
        height: 50px;
        border: 0;
        border-radius: 7px;
        background-color: #0061a8;
        outline: none;
        cursor: pointer;
        color: #fff;
        transition: 0.3s ease-in-out;
    }

    .cart-button:hover {
        background-color: #123444;
    }

    .cart-button:active {
        transform: scale(0.95);
    }

    .cart-button.go-to-cart {
        background-color: #28a745;
        /* Green for "Go to Cart" */
    }

    .cart-button.go-to-cart:hover {
        background-color: #218838;
    }

    .delivery_date {
        font-size: 14px;
        color: #009f00;
        margin-top: 10px;
        font-family: 'Poppins';
        font-weight: 500;
    }
</style>
<?php $isOutOfStock = $data['stocks_count'] <= 0; ?>
<section class="product_details">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 p-0 product_details_card d-flex">
                <!-- Image Gallery -->
                <div class="col-md-2 col-sm-12 bg-light other_imgs">
                    <div class="img_gallery">
                        <!-- First image (main product image) -->
                        <img src="assest/product_image/<?php echo $main_image; ?>"
                            alt="Main Image"
                            class="clickable-img"
                            onclick="updateMainImage(this.src)">

                        <!-- Additional images -->
                        <?php foreach ($additional_images as $image) : ?>
                            <img src="assest/product_images/<?php echo $image; ?>"
                                alt="Product Image"
                                class="clickable-img"
                                onclick="updateMainImage(this.src)">
                        <?php endforeach; ?>
                    </div>
                </div>
                <!-- Main Image -->
                <div class="col-md-4 col-sm-12 main_img">
                    <!-- ========== Wishlist icon =========== -->
                    <div class="col-md-12 d-flex" style="align-items: end;justify-content: right;padding-right:25px;padding-top:18px;">
                        <!-- onclick="myFunction(this)" -->
                        <?php
                        $status = in_array($data['p_id'], $wishlist) ? 0 : 1;
                        ?>
                        <button class="btn border-0" data="<?php echo $status; ?>" onclick="
                                                            <?php
                                                            if (!isset($_SESSION['username'])) {
                                                            } else {
                                                                // echo $_SESSION['id'];
                                                            ?>
                                                            wishlist_add(<?php echo $data['p_id'] ?>,this);
                                                            <?php
                                                            }
                                                            ?>
                                                             <?php echo $status; ?>,
                                                             <?php echo $data['p_id']; ?>
                                                        ">
                            <i class="fa-lg fa-heart heart_red <?php echo (in_array($data['p_id'], $wishlist)) ? "fa" : "fa-regular"; ?>"></i>
                        </button>
                    </div>
                    <div class="product_main_pic">
                        <div class="main_img">
                            <img src="assest/product_image/<?php echo $main_image; ?>" alt="Main Product Image" id="zoom-image">
                        </div>
                    </div>

                </div>
                <!-- Product Details -->
                <div class="col-md-6 col-sm-12 bg-light details_content">
                    <div class="main_details">
                        <h6 class="category_name text-start"><?php echo $data['category_name']; ?></h6>
                        <h3 class="product_name text-start"><?php echo $data['product_name']; ?></h3>
                        <img src="assest/img/5star.png" width="80px;" alt="">
                        <p class="delivery_date">Expected delivery date: <?php echo $expected_delivery_date; ?></p>
                        <h6 class="product_description mt-3 mb-3"><?php echo $data['product_details']; ?></h6>
                        <h5 class="text-secondary text-start">MRP: <span class="mrp"><?php echo $data['MRP']; ?></span></h5>
                        <div class="price_tray d-flex">
                            <h3 class="price text-start me-3">&#x20b9 <?php echo $data['price']; ?></h3>
                            <h6 class="discount text-start"><?php echo $data['discount']; ?>% Discount</h6>
                        </div>
                        <h6 class="product_description">Inclusive of all taxes.</h6>
                    </div>
                    <?php if ($isOutOfStock): ?>
                                        <div class="col-md-12 d-flex justify-content-center" style="padding: 20px;">
                                            <span class="badge text-danger">Out of Stock</span>
                                        </div>
                                    <?php else: ?>
                    <div class="shopping_buttons">
                        <!-- Add to Cart / Go to Cart Button -->
                        <a href="<?php echo $is_in_cart ? 'show_cart.php' : 'addtocart_action.php?id=' . $product_id; ?>"
                            class="cart-button <?php echo $is_in_cart ? 'go-to-cart' : 'add-to-cart'; ?>"
                            data-id="<?php echo $product_id; ?>">
                            <span class="add-to-cart"><?php echo $is_in_cart ? 'Go to Cart' : 'Add to Cart'; ?></span>
                            <span class="added"><?php echo $is_in_cart ? 'Go to Cart' : 'Added'; ?></span>
                            <i class="fas fa-shopping-cart"></i>
                            <i class="fas fa-box"></i>
                        </a>
                        <!-- <button class="" type="submit" name="place_order">
                            Buy Now
                        </button> -->
                        
                        <a href="user_address_form.php?product_id=<?php echo $product_id; ?>&quantity=1&price=<?php echo $data['price']; ?>" class="btn buy-now-button">
                            <i class="fa-solid fa-cart-shopping cart" style="margin-right:15px;"></i> Buy Now
                        </a>



                    </div>
                    <?php endif; ?>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- ================== End of Single Product Details ==================== -->
<?php include("footer.php"); ?>

<script>
    // Function to update the main image when a gallery image is clicked
    function updateMainImage(src) {
        document.querySelector('.product_main_pic img').src = src;
    }
</script>
<script>
    // JavaScript for Zoom Interaction
    const zoomContainer = document.querySelector('.main_img');
    const zoomImage = document.querySelector('#zoom-image');

    zoomContainer.addEventListener('mousemove', (e) => {
        const rect = zoomContainer.getBoundingClientRect();
        const x = e.clientX - rect.left; // X-coordinate within the element
        const y = e.clientY - rect.top; // Y-coordinate within the element
        const xPercent = (x / rect.width) * 100;
        const yPercent = (y / rect.height) * 100;

        // Adjust the position of the zoomed image
        zoomImage.style.transformOrigin = `${xPercent}% ${yPercent}%`;
    });

    zoomContainer.addEventListener('mouseleave', () => {
        // Reset zoom position
        zoomImage.style.transformOrigin = 'center center';
    });
</script>

<script>
    const cartButtons = document.querySelectorAll('.cart-button');

    cartButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            event.preventDefault();
            if (!this.classList.contains('go-to-cart')) {
                this.classList.add('clicked');
                setTimeout(() => {
                    window.location.href = this.href;
                }, 1500);
            } else {
                window.location.href = this.href;
            }
        });
    });
</script>