Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
37 kB
3
Indexable
Never
<?php

include 'components/connect.php';

session_start();
$user_id = $_SESSION['user_id'];
if(!isset($user_id)){
    header('location:user_login.php');
 }

if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
} else {
    $user_id = '';
};


if (isset($_POST['update_qty'])) {
    $cart_id = $_POST['pid'];
    $qty = $_POST['qty'];
    $qty = filter_var($qty, FILTER_SANITIZE_STRING);
    $update_qty = $conn->prepare("UPDATE `cart` SET quantity = ? WHERE id = ?");
    $update_qty->execute([$qty, $pid]);
    $message[] = 'cart quantity updated';
}
$products_query = "SELECT * FROM products";
$result = mysqli_query($link, $products_query);
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buy Now</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> -->

    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        
        .message-box {
            border: 1px solid green;
            background-color: #f9f9f9;
            padding: 10px;
            margin-bottom: 20px;
        }

        .form-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 80%;
            /* Adjust as needed */
            margin: auto;
            border: 2px solid #ffffff;
            /* Add a white border to the form container */
            padding: 20px;
            border-radius: 5px;
        }

        .contact form {
            padding: 2rem;
            text-align: center;
            background-color: var(--white);
            box-shadow: var(--box-shadow);
            border-radius: 0.5rem;
            border: var(--border);
            max-width: 99rem;
            margin: 0 auto;
        }

        .contact form .box {
            margin: 9rem 0;
            width: 100%;
            background-color: var(--light-bg);
            padding: 1rem;
            font-size: 1.8rem;
            height: 100%;
            color: var(--black);
        }

        .section-heading {
            text-align: center;
            color: #fff;
            /* Change this to the color you prefer */
        }

        .textarea,
        .upload-label {
            height: 300px;
            /* Adjust this value to control the height of the textarea and upload box */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .file-input {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }
        .form-label {
            color: white;
            font-size: 16px;
            width: 120px;
            text-align: center;
            font-weight: bold;
        }

        .form-input {
            width: 100%;
            border: 1px solid white; 
            border-radius: 0.5rem;
            background-color: var(--white);
            box-shadow: var(--box-shadow);
            padding: 0.8rem; 
            font-size: 14px;
            color: var(--black);
        }
        .file-message {
            font-size: small;
            font-weight: 300;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .choose-file-button {
            flex-shrink: 0;
            background-color: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            padding: 8px 15px;
            margin-right: 10px;
            font-size: 12px;
            text-transform: uppercase;
        }
        .upload-label {
            cursor: pointer;
        }

        .upload-icon {
            font-size: 5rem;
        }

        #product option {
            background-color: #2e2c39;
            color: white;
            font-size: 18px;
            
        }

        #product,
        #country {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #2e2c39;
            color: white;
            text-align: center;
            width: 27%;
        }

        input[type="file"] {
            padding: 10px 20px;
        }

        .buy {
            width: 80%;
            /* Adjust the width of the buy section */
            margin: auto;
            border: 2px solid #ffffff;
            /* Add a white border to the buy section */
            padding: 20px;
            border-radius: 5px;
        }

        .product-name {
            font-size: 24px;
            font-weight: bold;
            color: #000;
        }

        .product-details {
            font-size: 18px;
            color: #666;
        }

        .buy .box-container .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }

        .form-label {
            width: 120px;
            text-align: center;
            font-weight: bold;
        }

        .form-input {
            flex: 1;
            max-width: 250px;
            text-align: center;
        }

        .buy .box-container {
            display: flex;
        }
        .file-drop-area {
            position: relative;
            display: flex;
            align-items: center;
            width: 450px;
            max-width: 100%;
            padding: 25px;
            border: 1px dashed rgba(255, 255, 255, 0.4);
            border-radius: 3px;
            transition: 0.2s;
            height : 200px;
        }
                .file-drop-area .file-message,
            .file-drop-area .choose-file-button {
                color: white;
            }
            .img-preview {
            max-width: 100%;
            max-height: 100%;
        }
        .text-below-input {
            font-size: 12px;
            color: var(--black); /* Change this color as needed */
            margin-top: 5px; /* Adjust margin as needed */
        }

        .product-name {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center horizontally */
            justify-content: center; /* Center vertically */
            text-align: center; /* Center text horizontally */
            height: 100%; /* Ensure the container takes up the full height */
        }
        
        .product-name .name {
            font-size: 35px;
        }
        
        .product-name .price {
            color: #e74c3c;
            margin-top: 10px; /* Add a little space between the name and price */
        }
        
        .product-name .details {
            font-size: x-small;
            margin-top: 10px; /* Add space between price and details */
        }
        @keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

.carousel {
  position: relative;
  padding-top: 75%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

.carousel__slide:nth-child(even) {
  background-color: #99f;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel::before,
.carousel__prev {
  left: -1rem;
}

.carousel::after,
.carousel__next {
  right: -1rem;
}

.carousel::before,
.carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}


    </style>

</head>

<body>
<div id="myModal" class="modal">
  <div class="modal-content">
      <img id="modalImg" src="" alt="">
  </div>
</div>

    <?php include 'components/user_header.php'; ?>
    <section class="buy">
        <img src="images/buy_now.jpg" style="width: 100%; height: auto; display: block; margin: 0 auto;">
        <h1 class="heading">Proceed to Buy</h1>
        <div class="select-product" style="display: flex; justify-content: center; align-items: center;">
            <label for="country" style="font-size: 18px; color:white;">Select Product: &nbsp; &nbsp;</label>
            <?php
            // Check if the pid key exists in the POST data
            if (isset($_POST['pid'])) {
                $selected_pid = $_POST['pid'];
            } else {
                $selected_pid = null; // Set a default value if pid is not set
            }
            ?>

            <select name="product" id="product" class="box">
                <?php
                // Check if the result has any rows
                if (mysqli_num_rows($result) > 0) {
                    // Fetch all rows
                    while ($row = mysqli_fetch_assoc($result)) {
                        // Check if this option should be pre-selected
                        $selected = $row['id'] == $selected_pid ? 'selected' : '';

                        echo "<option value=" . $row['id'] . " " . $selected . ">" . $row['name'] . "</option>";
                    }
                }
                ?>
            </select>

        </div><br>
        <div class="box-container">
            <form action="cartbackend.php" method="post" class="box" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-6">
                        
                        <input type="hidden" name="pid" class="id" value="<?= isset($_REQUEST['pid']) ? $_REQUEST['pid'] : '-'; ?>">
                        <input type="hidden" name="image" class="image" value="<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : '-'; ?>">
                        <!-- Display the image -->
                        <h1>CSS-only Carousel</h1>

<p>This carousel is created with HTML and CSS only.</p>

<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li id="carousel__slide1"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
        <a href="#carousel__slide4"
           class="carousel__prev">Go to last slide</a>
        <a href="#carousel__slide2"
           class="carousel__next">Go to next slide</a>
      </div>
    </li>
    <li id="carousel__slide2"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide1"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide3"
         class="carousel__next">Go to next slide</a>
    </li>
    <li id="carousel__slide3"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide2"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide4"
         class="carousel__next">Go to next slide</a>
    </li>
    <li id="carousel__slide4"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide3"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide1"
         class="carousel__next">Go to first slide</a>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1"
           class="carousel__navigation-button">Go to slide 1</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2"
           class="carousel__navigation-button">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3"
           class="carousel__navigation-button">Go to slide 3</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide4"
           class="carousel__navigation-button">Go to slide 4</a>
      </li>
    </ol>
  </aside>
</section>
                        <div class="slider">
                            <div class="slides">
                                <div class="carousel-item active">
                                <img id="myImage" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
                                </div>
                                <div class="carousel-item">
                                <img id="myImage1" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
                                </div>
                                <div class="carousel-item">
                                <img id="myImage2" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                        
                        <div class="product-name text-center mt-3">
                            <input type="hidden" style="text-align: center;" name="name" class="name" value="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
                            <input type="hidden" name="price" class="price" value="<?= isset($_REQUEST['price']) ? $_REQUEST['price'] : '0'; ?>">

                            <div class="name nametext" style="font-size: 35px;">
                                <?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>
                            </div>
                            <div class="price" style="color: #e74c3c;">
                            <?= isset($_REQUEST['price']) ? $_REQUEST['price'] : '-'; ?>
                            </div><hr>
                            <div class="details" style="font-size: x-small; color:#fff; text-align:left;">
                               <?= isset($_REQUEST['details']) ?  nl2br($_REQUEST['details']) : '-'; ?>
                            </div>
                            
                            <input type="hidden" name="details" class="name" value="<?= isset($_REQUEST['details']) ? $_REQUEST['details'] : '-'; ?>">
                            <div class="flex">
                            </div>
                        </div><br>
                    </div>
                </div><hr>
                <div class="buyform" style="margin-left: 6%; margin-top:15px;">
                <div class="form-row">
                    <span class="form-label">First Name:</span>
                    <input type="text" class="form-input" name="firstName" required="required"  pattern="[A-Za-z]+" title="Please enter only letters.">
                    <span class="form-label">Middle Name:</span>
                    <input type="text" class="form-input" name="middleName" required="required"  pattern="[A-Za-z]+" title="Please enter only letters.">
                </div>
                <div class="form-row">
                    <span class="form-label">Last Name:</span>
                    <input type="text" class="form-input" name="lastName" required="required"  pattern="[A-Za-z]+" title="Please enter only letters.">
                    <span class="form-label">Gender:</span>
                    <select class="form-input" name="gender" required="required">
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label">Eye Color:</span>
                    <select class="form-input" name="eyeColor" required="required">
                        <option value="BLU">Blue</option>
                        <option value="BRN">Brown</option>
                        <option value="GRN">Green</option>
                        <option value="HAZ">Hazel</option>
                        <option value="BLK">Black</option>
                        <option value="GRY">Gray</option>
                        <option value="SDY">Sandy</option>
                        <option value="MUL">Multicolor</option>
                    </select>
                    <span class="form-label">Hair Color:</span>
                    <select class="form-input" name="hairColor" required="required">
                        <option value="BLN">Blonde</option>
                        <option value="BRN">Brown</option>
                        <option value="BLK">Black</option>
                        <option value="GRY">Gray</option>
                        <option value="BLD">Bald</option>
                        <option value="RED">Red</option>
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label">Date of Birth:</span>
                    <input type="date" class="form-input" name="dob" required="required" min="1950-01-01">
                    <span class="form-label">Height:</span>
                    <input type="text" placeholder="Mention centimetres or ft." class="form-input" name="height" required="required">
                </div>
                <div class="form-row">
                    <span class="form-label">Weight:</span>
                    <input type="text" placeholder="Mention KG or lbs." class="form-input" name="weight" required="required">
                    <span class="form-label">Street Address:</span>
                    <input type="text" class="form-input" name="streetAddress">
                </div>
                <div class="form-row">
                    <span class="form-label">City for ID:</span>
                    <input type="text" class="form-input" name="cityForID">
                    <span class="form-label">Zip Code for ID:</span>
                    <input type="text" class="form-input" name="zipCodeForID">
                </div>
                <div class="form-row">
                    <span class="form-label">ISS Date:</span>
                    <input type="date" class="form-input" name="issDate">
                    <span class="form-label">Restrictions:</span>
                    <select class="form-input" name="restrictions">
                        <option value="none">None</option>
                        <option value="limited">Limited</option>
                        <option value="full">Full</option>
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label">Organ Donor:</span>
                    <select class="form-input" name="organDonor">
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>

                </div>
                <input type="hidden" class="quanty" name="country" value="0">
                <div class="country-select">
                    <label for="country" style="font-size: 18px; color:white;">Duplicate Copy: &nbsp;</label>
                    <select name="coutry" id="country">
                        <option value="0">Select</option>
                        <option value="1">1x</option>
                        <option value="2">2x</option>
                        <option value="3">3x</option>
                    </select>
                    <p style="color:#fff; margin-left:20%">By Default You Will Receive 2 copies.</p>
                </div><br>
                <label for="#" style="font-size: 18px; color:white;">Upload Images &nbsp;</label>
                <div class="form-row">
                    <div class="file-drop-area">
                        <span class="choose-file-button">Choose files</span>
                        <span class="file-message">or drag and drop files here</span>
                        <input class="file-input" type="file" accept="image/*" multiple name="file1" onchange="readURL(this, 'preview1')" required>
                        <img id="preview1" class="img-preview" src="#" style = "display:none;">
                    </div>
                    <div class="file-drop-area">
                        <span class="choose-file-button">Choose files</span>
                        <span class="file-message">or drag and drop files here</span>
                        <input class="file-input" type="file" accept="image/*" multiple name="file2" onchange="readURL(this, 'preview2')" required>
                        <img id="preview2" class="img-preview" src="#" style = "display:none;">
                    </div>
                </div>
                <button type="submit" id="proceedToCheckoutBtn" class="btn" name="submitaddtocart">Add To Cart</button>

            </form>
        </div>
    </section>
    <?php include 'components/footer.php'; ?>
    <script src="js/script.js"></script>
    <script>
document.addEventListener("DOMContentLoaded", function() {

var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImg");

// Loop through all carousel images
var imgs = document.querySelectorAll(".carousel-item img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('click', function() {
        modal.style.display = "flex";
        modalImg.src = this.src;
        modalImg.alt = this.alt;
    });
}

// Close the modal when the background is clicked
modal.addEventListener('click', function(event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
});
});


</script>
</body>

</html>
<?php
require 'vendor/autoload.php';

if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['name']) && isset($_POST['email'])) {
    $name = $_POST['name'];
    $email = $_POST['email'];

    // Process image1 upload
    $targetDirectoryImg1 = "user_images/";
    $targetImage1File = $targetDirectoryImg1 . basename($_FILES["image1"]["name"]);
    $uploadImage1Ok = 1;
    $image1FileType = strtolower(pathinfo($targetImage1File, PATHINFO_EXTENSION));

    // Check if the uploaded file is a valid image (you can adjust the allowed file types as needed)
    if ($image1FileType !== "jpg" && $image1FileType !== "jpeg" && $image1FileType !== "png") {
        echo "Only JPG, JPEG, and PNG images are allowed for image1.";
        $uploadImage1Ok = 0;
    }

    // Move the uploaded image1 file to the target directory
    if ($uploadImage1Ok === 1 && move_uploaded_file($_FILES["image1"]["tmp_name"], $targetImage1File)) {
        // Insert the record into the database with the image1 file path
        $image1_path = $targetImage1File;
    } else {
        echo "Error uploading your image1.";
        exit;
    }

    // Process image2 upload
    $targetDirectoryImg2 = "user_images/";
    $targetImage2File = $targetDirectoryImg2 . basename($_FILES["image2"]["name"]);
    $uploadImage2Ok = 1;
    $image2FileType = strtolower(pathinfo($targetImage2File, PATHINFO_EXTENSION));

    // Check if the uploaded file is a valid image (you can adjust the allowed file types as needed)
    if ($image2FileType !== "jpg" && $image2FileType !== "jpeg" && $image2FileType !== "png") {
        echo "Only JPG, JPEG, and PNG images are allowed for image2.";
        $uploadImage2Ok = 0;
    }

    // Move the uploaded image2 file to the target directory
    if ($uploadImage2Ok === 1 && move_uploaded_file($_FILES["image2"]["tmp_name"], $targetImage2File)) {
        // Insert the record into the database with the image2 file path
        $image2_path = $targetImage2File;
    } else {
        echo "Error uploading your image2.";
        exit;
    }
}
?>
<script>
    // dropdown 
    $(document).ready(function() {
        $("#product").change(function() {
            var productid = $(this).val();
            $.ajax({
                url: "product_fetch_buy_now.php", // Replace with your API URL
                type: "POST",
                data: {
                    'id': productid,
                    'onchange': "onchange"
                },
                success: function(data) {
                    // Handle the response data
                    var parsedData = JSON.parse(data);
                    // console.log(parsedData.details);
                    var processedResponse = parsedData.details.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');

                    $(".id").val(parsedData.id);
                    $(".name").val(parsedData.name);
                    $(".image").val(parsedData.image_01);
                    $(".price").val(parsedData.price);
                    $(".price").html('Total price: $' + parsedData.price + '/-');
                    $(".nametext").text(parsedData.name);
                    $(".showedprice").text(parsedData.price);
                    $(".details").html('<strong>Description:</strong> <br>'+processedResponse); // Display the product details
                    var newImageSrc = "uploaded_img/" + parsedData.image_01;
                    var newImageSrc2 = "uploaded_img/" + parsedData.image_02;
                    var newImageSrc3 = "uploaded_img/" + parsedData.image_03;
                    $("#myImage").attr("src", newImageSrc);
                    $("#myImage").attr("alt", parsedData.name);
                    $("#myImage1").attr("src", newImageSrc2);
                    $("#myImage1").attr("alt", parsedData.name);
                    $("#myImage2").attr("src", newImageSrc3);
                    $("#myImage2").attr("alt", parsedData.name);
                    // $("#result").html("<p>" + JSON.stringify(data) + "</p>");
                },
                error: function(xhr, status, error) {
                }
            });
        });

        // Also fetch and display the details when the page is first loaded
        $(document).ready(function() {
            var productid = $("#product").val();
            $.ajax({
                url: "product_fetch_buy_now.php", // Replace with your API URL
                type: "POST",
                data: {
                    'id': productid,
                    'onchange': "onchange"
                },
                success: function(data) {
                    // Handle the response data
                    var parsedData = JSON.parse(data);
                    // console.log(parsedData.details);
                    var processedResponse = parsedData.details.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');

                    $(".id").val(parsedData.id);
                    $(".name").val(parsedData.name);
                    $(".image").val(parsedData.image_01);
                    $(".price").val(parsedData.price);
                    $(".price").html('Total price: $' + parsedData.price + '/-');
                    $(".nametext").text(parsedData.name);
                    $(".showedprice").text(parsedData.price);
                    $(".details").html('<strong>Description: </strong><br>'+processedResponse); // Display the product details
                    var newImageSrc = "uploaded_img/" + parsedData.image_01;
                    var newImageSrc2 = "uploaded_img/" + parsedData.image_02;
                    var newImageSrc3 = "uploaded_img/" + parsedData.image_03;
                    $("#myImage").attr("src", newImageSrc);
                    $("#myImage").attr("alt", parsedData.name);
                    $("#myImage1").attr("src", newImageSrc2);
                    $("#myImage1").attr("alt", parsedData.name);
                    $("#myImage2").attr("src", newImageSrc3);
                    $("#myImage2").attr("alt", parsedData.name);
                    // $("#result").html("<p>" + JSON.stringify(data) + "</p>");
                },
                error: function(xhr, status, error) {
                }
            });
        });

        
    });
</script>
<script>
  $(document).on('change', '.file-input', function() {
          

          var filesCount = $(this)[0].files.length;
          
          var textbox = $(this).prev();
        
          if (filesCount === 1) {
            var fileName = $(this).val().split('\\').pop();
            textbox.text(fileName);
          } else {
            textbox.text(filesCount + ' files selected');
          }
        });
  </script>
  <script>
    // JavaScript to set and get the selected option using local storage
    var selectElement = document.getElementById('product');
    
    selectElement.addEventListener('change', function() {
        var selectedValue = selectElement.value;
        localStorage.setItem('selectedProduct', selectedValue);
    });
    
    var storedSelectedValue = localStorage.getItem('selectedProduct');
    
    if (storedSelectedValue !== null) {
        for (var i = 0; i < selectElement.options.length; i++) {
            if (selectElement.options[i].value === storedSelectedValue) {
                selectElement.options[i].selected = true;
                break;
            }
        }
    }
</script>

<!-- js for image preview -->
<script>
   function readURL(input, previewId) {
    var previewElement = document.getElementById(previewId);
    if(input.files){
        previewElement.style.display = "block";
    }else{
        previewElement.style.display = "none";
    }
    
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            previewElement.src = e.target.result;
        };

        reader.readAsDataURL(input.files[0]);
    } else {
        // previewElement.src = "images/noimage.png";
    }
}
$('#country').change(function(){
    var polucarbostate = ['TEXAS','GEORGIA','COLORADO','MARYLAND','OHIO','WISCONSIN','PENNSYLVANIA','INDIANA','NEW-YORK','UNITED-KINGDOM','ONTARIO'];
    var countryarray = $(".name").val().split(" ");
    console.log(countryarray);
    var countryupper = countryarray[0].toUpperCase();
    var price = 40;
    var price2 = 60;
    var totlamt = 0;
    if($(this).val()==1){
        if(polucarbostate.includes(countryupper)){
            totlamt = price2 * 1;
            Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
            $('.quanty').val(totlamt);
        }else{
            totlamt = price * 1;
            Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
            $('.quanty').val(totlamt);
        }

    }else if($(this).val()==2){
        if(polucarbostate.includes(countryupper)){
            totlamt = price2 * 2;
            Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
            $('.quanty').val(totlamt);
        }else{
            totlamt = price * 2;
            Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
            $('.quanty').val(totlamt);
        }
    }else if($(this).val()==3){
        if(polucarbostate.includes(countryupper)){
            totlamt = price2 * 4;
            Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
            $('.quanty').val(totlamt);
        }else{
            totlamt = price * 4;
            Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
            $('.quanty').val(totlamt);
        }
    }else{
        $('.quanty').val(totlamt);
    }
    
});
</script>
<script>
    // Add your JavaScript code here
    const slides = document.querySelector('.slides');
    const prevButton = document.querySelector('.carousel-control-prev');
    const nextButton = document.querySelector('.carousel-control-next');

    let currentIndex = 0;

    nextButton.addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % slides.children.length;
        updateSlidePosition();
    });

    prevButton.addEventListener('click', () => {
        currentIndex = (currentIndex - 1 + slides.children.length) % slides.children.length;
        updateSlidePosition();
    });

    function updateSlidePosition() {
        slides.style.transform = `translateX(-${currentIndex * 100}%)`;
    }
</script>