WWWWWW

Current Directory: /home/u588966950/domains/luvwithlabgrown.com/public_html
Viewing File: /home/u588966950/domains/luvwithlabgrown.com/public_html/sp-product-details-new.php
<?php 
include('conn.php');
$fetch = $conn->query("SELECT * FROM tbl_products where uniqid='".$_GET['pid']."'")->fetch_assoc();
$imagephoto=(!empty($fetch['photo']))? 'images/'.$fetch['photo']:'images/noimage.jpeg';
$category= $conn->query("SELECT * FROM rk_elements where id='".$fetch['category']."'")->fetch_assoc();
$price = $conn->query("SELECT * FROM tbl_products_variant WHERE pid='".$fetch['pid']."' ORDER BY did ASC")->fetch_assoc();


$stoneamount= $conn->query("SELECT SUM(amount) AS mrp, SUM(finalamount) AS price FROM tbl_products_stone where pid='".$fetch['pid']."'")->fetch_assoc();
$metalamount= $conn->query("SELECT SUM(metalvalue) AS mrp, SUM(metalfinalvalue) AS price FROM tbl_products_metal where pid='".$fetch['pid']."'")->fetch_assoc();




$size = isset($_GET['itemsize']) ? $_GET['itemsize'] : $price['itemsize'];
$metal = isset($_GET['itemmetal']) ? $_GET['itemmetal'] : $price['itemmetal'];
$color = isset($_GET['itemcolor']) ? $_GET['itemcolor'] : $price['itemcolor'];

$sizename = $conn->query("SELECT * FROM tbl_itemsize WHERE id='".$size."'")->fetch_assoc();
$metalname = $conn->query("SELECT * FROM tbl_itemmetal WHERE id='".$metal."'")->fetch_assoc();
$colorname = $conn->query("SELECT * FROM tbl_itemcolor WHERE id='".$color."'")->fetch_assoc();

$fvdata = $conn->query("SELECT * FROM tbl_products_variant where pid='".$fetch['pid']."' AND itemsize='".$size."' AND itemmetal='".$metal."' AND itemcolor='".$color."'")->fetch_assoc();


if($fetch['pvariants']=='Multiple'){
$itemprice = $fvdata['mrp'];
$offerprice = $fvdata['offerprice'];
}
else
{
$itemprice = $stoneamount['mrp']+$metalamount['mrp']+$fetch['makingchrg'];
$offerprice = $stoneamount['price']+$metalamount['price']+$fetch['fmakingchrg'];
}



?>


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Love With Lab Grown</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" href="favicon.png" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://kit.fontawesome.com/b4f8a3cdf0.js" crossorigin="anonymous"></script>
        <link href="css/sp-style.css" rel="stylesheet" />
        <link href="css/sp-responsive.css" rel="stylesheet" />
        <!-- Lightbox2 CSS -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" />
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- Bootstrap 5 JS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

        <!-- Lightbox2 JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.20/sweetalert2.all.min.js"></script>
		
		<?php
		if(isset($_POST['atc']) && $_POST['atc']!='')
{
	$product = $conn->query("SELECT * FROM tbl_products where uniqid='".$_POST['atc']."'")->fetch_assoc();
	$vrntprice = $conn->query("SELECT * FROM tbl_products_variant WHERE did='".$_POST['vid']."'")->fetch_assoc();
	
	$stoneamount= $conn->query("SELECT SUM(amount) AS mrp, SUM(finalamount) AS price FROM tbl_products_stone where pid='".$product['pid']."'")->fetch_assoc();
	$metalamount= $conn->query("SELECT SUM(metalvalue) AS mrp, SUM(metalfinalvalue) AS price FROM tbl_products_metal where pid='".$product['pid']."'")->fetch_assoc();
	$price = $stoneamount['mrp']+$metalamount['mrp']+$product['makingchrg'];
	$offerprice = $stoneamount['price']+$metalamount['price']+$product['fmakingchrg'];
	
	if($product['pvariants']=='Multiple'){
		$cartmrp = $vrntprice['mrp'];
		$cartprice = $vrntprice['offerprice'];
	}
	else
	{
		$cartmrp = $price;
		$cartprice = $offerprice;
	}
	
	$chkcart = $conn->query("SELECT * FROM `tbl_cart` where pid='".$product['pid']."' AND vid='".$vrntprice['did']."' AND sessionid='".session_id()."'")->num_rows;
	if($chkcart>0)
	{
		
		$conn->query("UPDATE `tbl_cart` SET qnty=qnty+".$_POST['qnty'].",mrp='".$cartmrp."',price='".$cartprice."' WHERE pid='".$product['pid']."' AND vid='".$vrntprice['did']."' AND sessionid='".session_id()."'");
	}
	else
	{
		$conn->query("INSERT INTO `tbl_cart` SET pid='".$product['pid']."',vid='".$vrntprice['did']."',qnty='".$_POST['qnty']."',mrp='".$cartmrp."',price='".$cartprice."',sessionid='".session_id()."'");
	}
	
	echo "<script>
						document.addEventListener('DOMContentLoaded', function() {
						Swal.fire({
							title: 'Success!',
							text: 'Added to the cart successfully!',
							icon: 'success',
							confirmButtonText: 'OK'
						}).then(() => {
							window.location.href = 'sp-product-details.php?pid=".$_POST['pid']."&itemsize=".$_POST['itemsize']."&itemmetal=".$_POST['itemmetal']."&itemcolor=".$_POST['itemcolor']."';
						});
						});
					</script>";
	
	
	
}
?>
        <style>
             
			
			
		  </style>
    </head>
	<body>
		<?php include"sp-header.php"?>

		<div class="container-fluid sp-breadcrumb">
			<div class="container">
				<div class="row">
					<ul class="site-breadcrumbs collapsed">
						<li><a href="index.php">home</a></li>
						<li><a href="#">Product Category</a></li>
						<li>Product Name</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container-fluid sp-product-new">
			<div class="container">
				<div class="row">
					<div class="col-sm-7">
						<div class="row">
							<div class="col-2">
								<!-- Thumbnail Slider -->
								<div id="thumbnailSlider" class="list-group">
									<a href="javascript:void(0);" class="list-group-item list-group-item-action" data-bs-target="#mainImage" data-bs-slide-to="0">
										<img src="ban1.jpeg" alt="Product 1" class="img-fluid thumbnail" />
									</a>
									<a href="javascript:void(0);" class="list-group-item list-group-item-action" data-bs-target="#mainImage" data-bs-slide-to="1">
										<img src="ban2.jpeg" alt="Product 2" class="img-fluid thumbnail" />
									</a>
									<a href="javascript:void(0);" class="list-group-item list-group-item-action" data-bs-target="#mainImage" data-bs-slide-to="2">
										<img src="ban3.jpeg" alt="Product 3" class="img-fluid thumbnail" />
									</a>
									<a href="javascript:void(0);" class="list-group-item list-group-item-action" data-bs-target="#mainImage" data-bs-slide-to="3">
										<img src="ban4.jpeg" alt="Product 3" class="img-fluid thumbnail" />
									</a>
									<!-- Add more thumbnails as needed -->
								</div>
							</div>
							<div class="col-10">
								<!-- Main Image Slider with Zoom on Hover -->
								<div id="mainImage" class="carousel slide" data-bs-ride="carousel">
									<div class="carousel-inner">
										<div class="carousel-item active">
											<img src="ban1.jpeg" class="d-block w-100 zoom" alt="ban 1" />
										</div>
										<div class="carousel-item">
											<img src="ban2.jpeg" class="d-block w-100 zoom" alt="ban 2" />
										</div>
										<div class="carousel-item">
											<img src="ban3.jpeg" class="d-block w-100 zoom" alt="ban 3" />
										</div>
										<div class="carousel-item">
											<img src="ban4.jpeg" class="d-block w-100 zoom" alt="ban 3" />
										</div>
										<!-- Add more images as needed -->
									</div>
									<button class="carousel-control-prev" type="button" data-bs-target="#mainImage" data-bs-slide="prev">
										<span class="carousel-control-prev-icon" aria-hidden="true"></span>
										<span class="visually-hidden">Previous</span>
									</button>
									<button class="carousel-control-next" type="button" data-bs-target="#mainImage" data-bs-slide="next">
										<span class="carousel-control-next-icon" aria-hidden="true"></span>
										<span class="visually-hidden">Next</span>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-5">
						<h2>Half Vogue</h2>
						<div class="star-rating">
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star-half-alt"></i> <span class="sp-rating-count">(39)</span>
						</div>
						<p>The Vogue ring offers a subtle addition of diamond brilliance that can be worn alone, layered or placed next to an engagement ring as a glittering symbol of love and affection.</p>

						<div class="metal-selector mb-3">
							<div class="sp-metal"><b>Metal:</b> <span id="metal-label">White Gold (18k)</span></div>
							<div class="metal-swatches d-flex gap-2">
								<div class="form-check">
									<input class="form-check-input" type="radio" name="metalOptions" id="white-gold" value="White Gold (18k)" checked />
									<label class="form-check-label" id="white-gold-label" for="white-gold"></label>
								</div>

								<div class="form-check">
									<input class="form-check-input" type="radio" name="metalOptions" id="yellow-gold" value="Yellow Gold (18k)" />
									<label class="form-check-label" id="yellow-gold-label" for="yellow-gold"></label>
								</div>

								<div class="form-check">
									<input class="form-check-input" type="radio" name="metalOptions" id="rose-gold" value="Rose Gold (18k)" />
									<label class="form-check-label" id="rose-gold-label" for="rose-gold"></label>
								</div>

								<div class="form-check">
									<input class="form-check-input" type="radio" name="metalOptions" id="platinum" value="Platinum" />
									<label class="form-check-label" id="platinum-label" for="platinum"></label>
								</div>
							</div>
						</div>

						<div class="row g-3" style="padding: 0;">
							<div class="col-md-4">
								<div class="dropdown">
									<button class="btn dropdown-toggle custom-select-box btn-custom-select" type="button" id="typeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
										<span class="select-content">
											<img src="https://www.77diamonds.com/images/shop/icons/ring-type-half.svg" alt="Ring type icon" class="select-img-icon" />
											<span id="type-selected-text">Type: Half</span>
										</span>
										<i class="bi bi-chevron-down text-secondary"></i>
									</button>
									<ul class="dropdown-menu" aria-labelledby="typeDropdown" id="type-dropdown-menu">
										<!-- Dropdown items will be added dynamically here -->
									</ul>
								</div>
							</div>

							<div class="col-md-4">
								<div class="dropdown">
									<button class="btn dropdown-toggle custom-select-box btn-custom-select" type="button" id="sizeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
										<span class="select-content">
											<span id="size-selected-text">Size: 1.5mm</span>
										</span>
										<i class="bi bi-chevron-down text-secondary"></i>
									</button>
									<ul class="dropdown-menu" aria-labelledby="sizeDropdown">
										<li><a class="dropdown-item" href="#" data-value="1.5mm">1.5mm</a></li>
										<li><a class="dropdown-item" href="#" data-value="2.0mm">2.0mm</a></li>
										<li><a class="dropdown-item" href="#" data-value="2.5mm">2.5mm</a></li>
										<li><a class="dropdown-item" href="#" data-value="3.0mm">3.0mm</a></li>
									</ul>
								</div>
							</div>
						</div>
						<hr style="opacity: 1;" />
						<div class="sp_price">INR 1,04,576.00 <span>(ex VAT)</span></div>
						<div class="info-container">
							<span class="text-muted">Price excludes VAT</span>
							<img src="https://www.77diamonds.com/images/shop/icons/info_grey.svg" alt="info" class="info-icon-svg" id="infoIcon" />

							<div class="custom-popup" id="dutyTaxPopup">
								<div class="custom-popup-header">
									<h6 class="mb-0">Duty/Tax</h6>
									<button type="button" class="btn-close" aria-label="Close" id="closePopup"></button>
								</div>
								<div class="custom-popup-body">
									<p>Rates based on shipping destination or collection point.</p>
									<p>See our <a href="#">Duty and Tax calculator.</a></p>
								</div>
							</div>
						</div>
						<div class="promotional-code-container">
							<a class="text-decoration-none" data-bs-toggle="collapse" href="#promotionalCodeForm" role="button" aria-expanded="false" aria-controls="promotionalCodeForm" id="promoCodeToggle">
								Submit a promotional code <i class="bi bi-chevron-down"></i>
							</a>

							<div class="collapse mt-2" id="promotionalCodeForm">
								<div class="input-group">
									<input type="text" class="form-control form-control-with-clear" placeholder="Enter discount code" id="discountCodeInput">
									<span class="clear-icon" id="clearDiscountCode">&times;</span>
									<button class="btn btn-outline-secondary apply-btn" type="button" id="applyButton" disabled>APPLY</button>
								</div>
								<div class="error-message" id="errorMessage" style="display: none;">
									This code is not valid or has already been used
								</div>
							</div>
						</div>
						<div class="button-container">
        <button type="button" class="btn custom-button">
            <span class="button-text">SIZE:</span>
            <span class="button-text">DON'T KNOW</span>
            <i class="bi bi-chevron-down"></i>
        </button>

        <button type="button" class="btn btn-add-engraving">
            <i class="bi bi-pencil"></i> ADD ENGRAVING
        </button>
    </div>
	<a href="#" class="btn sp-btn">add to bag</a>
	
	<div class="accordion" id="productDetailsAccordion">
            <div class="accordion-item accordion-item-custom">
                <h2 class="accordion-header accordion-header-custom" id="headingOne">
                    <button class="accordion-button accordion-button-custom" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="bi bi-chevron-down"></i> PRODUCT DETAILS
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#productDetailsAccordion">
                    <div class="accordion-body accordion-body-custom">
                        <p>You have chosen the 1.5mm Full Vogue eternity ring in White Gold, claw set with Round diamonds (G colour and VS clarity) for a total weight of approximately 0.40 with a width of 1.5mm.Add some sparkle with this beautiful ring and create a striking stack with our existing Vogue eternity rings.</p>
						<div class="row">
						<div class="col-sm-6">
							<p><strong>Product Information:</strong><br>
							Setting: Claw Set<br>
Metal: White Gold (18k)<br>
Setting style: Castle
							</p>
						</div>
						<div class="col-sm-6">
							<p><strong>Accent stones:</strong><br>
			Type: Diamonds<br>
			Total weight: approx. 0.40ct<br>
			Setting: Castle<br>
			Colour: G<br>
			Clarity: VS
							</p>
						</div>
						</div>
                    </div>
                </div>
            </div>

            <div class="accordion-item accordion-item-custom">
                <h2 class="accordion-header accordion-header-custom" id="headingTwo">
                    <button class="accordion-button accordion-button-custom" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="bi bi-chevron-down"></i> FINANCING OPTIONS
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#productDetailsAccordion">
                    <div class="accordion-body accordion-body-custom">
						<img src="https://www.77diamonds.com/images/shop/checkout/splitit.svg">
                        <p>Opt for Splitit flexible payment and spread your cost over three monthly instalments. What’s best is that Splitit has 0% interest rate, and requires no credit checks—easy!</p>
						<p><a href="#">Learn More</a></p>
                    </div>
                </div>
            </div>

            <div class="accordion-item accordion-item-custom">
                <h2 class="accordion-header accordion-header-custom" id="headingThree">
                    <button class="accordion-button accordion-button-custom collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="bi bi-chevron-down"></i> CONTACT US
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#productDetailsAccordion">
                    <div class="accordion-body accordion-body-custom">
                        <div class="contact-detail">
                            <i class="bi bi-telephone"></i>
                            <a href="tel:#">+91 90510 28055</a>
                        </div>
                        <div class="contact-detail">
                            <i class="bi bi-chat-dots"></i>
                            <a href="#">Chat Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
					</div>
				</div>
			</div>
		</div>

		<?php include"sp-footer.php"?>

		<script>
			document.addEventListener("DOMContentLoaded", function () {
				const metalOptions = document.querySelectorAll('input[name="metalOptions"]');
				const metalLabels = document.querySelectorAll(".metal-swatches .form-check-label");
				const metalDisplayText = document.getElementById("metal-label");
				let selectedValue = "White Gold (18k)"; // Initial selected value

				// Function to find the currently checked value
				const getSelectedValue = () => {
					const checkedOption = document.querySelector('input[name="metalOptions"]:checked');
					return checkedOption ? checkedOption.value : "";
				};

				// Set the initial selected value from the checked input
				selectedValue = getSelectedValue();

				// Add event listeners for click to finalize selection
				metalOptions.forEach((option) => {
					option.addEventListener("change", function () {
						if (this.checked) {
							selectedValue = this.value;
							metalDisplayText.textContent = `${selectedValue}`;
						}
					});
				});

				// Add event listeners for hover effect
				metalLabels.forEach((label) => {
					// When mouse enters the swatch, show its value
					label.addEventListener("mouseenter", function () {
						const inputId = this.getAttribute("for");
						const hoveredInput = document.getElementById(inputId);
						metalDisplayText.textContent = `${hoveredInput.value}`;
					});

					// When mouse leaves, revert to the permanently selected value
					label.addEventListener("mouseleave", function () {
						metalDisplayText.textContent = `${selectedValue}`;
					});
				});
			});
		</script>
		<script>
			document.addEventListener("DOMContentLoaded", function () {
				// --- Type Dropdown Logic ---
				const typeDropdownMenu = document.querySelector('[aria-labelledby="typeDropdown"]');
				const typeSelectedText = document.getElementById("type-selected-text");
				const typeMenu = document.getElementById("type-dropdown-menu");
				const typeDropdownIcon = document.querySelector("#typeDropdown i"); // For the icon in Type dropdown

				// The data for the dropdown items
				const typeItems = ["Half", "Full", "Eternity"];

				// Loop through type items to dynamically add them with icons
				typeItems.forEach((item) => {
					const listItem = document.createElement("li");
					const linkItem = document.createElement("a");
					linkItem.classList.add("dropdown-item");
					linkItem.href = "#";
					linkItem.setAttribute("data-value", item);
					linkItem.innerHTML = `
		<img src="https://www.77diamonds.com/images/shop/icons/ring-type-half.svg" alt="Ring type icon" class="select-img-icon">
		${item}
		`;
					listItem.appendChild(linkItem);
					typeMenu.appendChild(listItem);
				});

				typeDropdownMenu.addEventListener("click", function (e) {
					e.preventDefault();
					if (e.target.classList.contains("dropdown-item")) {
						const selectedValue = e.target.getAttribute("data-value");
						typeSelectedText.textContent = `Type: ${selectedValue}`;
					}
				});

				// Toggle icon on open/close of dropdown
				const dropdownToggle = document.getElementById("typeDropdown");
				dropdownToggle.addEventListener("click", function () {
					if (typeDropdownMenu.classList.contains("show")) {
						typeDropdownIcon.classList.remove("bi-chevron-up");
						typeDropdownIcon.classList.add("bi-chevron-down");
					} else {
						typeDropdownIcon.classList.remove("bi-chevron-down");
						typeDropdownIcon.classList.add("bi-chevron-up");
					}
				});

				// --- Size Dropdown Logic ---
				const sizeDropdownMenu = document.querySelector('[aria-labelledby="sizeDropdown"]');
				const sizeSelectedText = document.getElementById("size-selected-text");
				const sizeDropdownIcon = document.querySelector("#sizeDropdown i"); // For the icon in Size dropdown

				sizeDropdownMenu.addEventListener("click", function (e) {
					e.preventDefault();
					if (e.target.classList.contains("dropdown-item")) {
						const selectedValue = e.target.getAttribute("data-value");
						sizeSelectedText.textContent = `Size: ${selectedValue}`;
					}
				});

				// Toggle icon on open/close of dropdown
				const sizeDropdownToggle = document.getElementById("sizeDropdown");
				sizeDropdownToggle.addEventListener("click", function () {
					if (sizeDropdownMenu.classList.contains("show")) {
						sizeDropdownIcon.classList.remove("bi-chevron-up");
						sizeDropdownIcon.classList.add("bi-chevron-down");
					} else {
						sizeDropdownIcon.classList.remove("bi-chevron-down");
						sizeDropdownIcon.classList.add("bi-chevron-up");
					}
				});
			});
		</script>
		<script>
			document.addEventListener("DOMContentLoaded", function () {
				const infoIcon = document.getElementById("infoIcon");
				const dutyTaxPopup = document.getElementById("dutyTaxPopup");
				const closePopupBtn = document.getElementById("closePopup");

				infoIcon.addEventListener("click", function (event) {
					event.stopPropagation();
					if (dutyTaxPopup.style.display === "block") {
						dutyTaxPopup.style.display = "none";
					} else {
						dutyTaxPopup.style.display = "block";
					}
				});

				closePopupBtn.addEventListener("click", function () {
					dutyTaxPopup.style.display = "none";
				});

				document.addEventListener("click", function (event) {
					if (!infoIcon.contains(event.target) && !dutyTaxPopup.contains(event.target)) {
						dutyTaxPopup.style.display = "none";
					}
				});
			});
		</script>
		
		<script>
				document.addEventListener('DOMContentLoaded', function () {
					const promoCodeToggle = document.getElementById('promoCodeToggle');
					const promotionalCodeForm = document.getElementById('promotionalCodeForm');
					const discountCodeInput = document.getElementById('discountCodeInput');
					const applyButton = document.getElementById('applyButton');
					const clearDiscountCode = document.getElementById('clearDiscountCode');
					const errorMessage = document.getElementById('errorMessage');

					// --- Behavior for "Submit a promotional code" click ---
					promotionalCodeForm.addEventListener('show.bs.collapse', function () {
						promoCodeToggle.style.display = 'none'; // Hide the toggle link
						discountCodeInput.focus(); // Focus the input when it appears
					});

					promotionalCodeForm.addEventListener('hide.bs.collapse', function () {
						promoCodeToggle.style.display = 'block'; // Show the toggle link
						discountCodeInput.value = ''; // Clear input when collapsing
						applyButton.disabled = true; // Disable apply button
						clearDiscountCode.style.display = 'none'; // Hide clear icon
						errorMessage.style.display = 'none'; // Hide error message
					});

					// --- Behavior for typing in the input field ---
					discountCodeInput.addEventListener('input', function() {
						if (this.value.length > 0) {
							applyButton.disabled = false; // Enable APPLY button
							clearDiscountCode.style.display = 'block'; // Show clear icon
						} else {
							applyButton.disabled = true; // Disable APPLY button
							clearDiscountCode.style.display = 'none'; // Hide clear icon
						}
						errorMessage.style.display = 'none'; // Hide error message on input
					});

					// --- Behavior for clearing the input field ---
					clearDiscountCode.addEventListener('click', function() {
						discountCodeInput.value = ''; // Clear the input
						applyButton.disabled = true; // Disable APPLY button
						clearDiscountCode.style.display = 'none'; // Hide clear icon
						discountCodeInput.focus(); // Keep focus on the input
						errorMessage.style.display = 'none'; // Hide error message
					});

					// --- Example of what happens when APPLY is clicked (simulating validation) ---
					applyButton.addEventListener('click', function() {
						const enteredCode = discountCodeInput.value;
						// For demonstration: if code is "invalid", show error. Otherwise, hide form.
						if (enteredCode === "invalid") {
							errorMessage.style.display = 'block';
						} else {
							// In a real application, you'd send the code to a server
							// and handle the response (e.g., apply discount, show success, or error)
							alert(`Applying code: ${enteredCode}`);
							// Optionally, collapse the form after successful application
							const bsCollapse = new bootstrap.Collapse(promotionalCodeForm, {
								toggle: false
							});
							bsCollapse.hide();
						}
					});
				});
			</script>
	</body>

</html>
F1l3 Manager
