@extends('layouts.app')
@section('title', 'Product Detail')
@section('content')


	<!-- >>>>>>>>>>>>>>>>>>> Sidebar part start >>>>>>>>>>>>>>>>>>>-->
	<aside id="wrap-sidebar" class="wrap-sidebar js-sidebar">
		<div class="w-100 h-100 js-hide-sidebar"></div>
		<div class="sidebar">

			<div class="sidebar-xmark w-100">
				<div class="pointer js-hide-sidebar">
					<i class="fa-solid fa-xmark"></i>
				</div>
			</div>

			<div class="sidebar-content d-flex flex-wrap w-100">
				<ul class="sidebar-link w-100">
					<li>
						<a href="{{ url('/') }}">
							Home
						</a>
					</li>

					<li>
						<a href="#">
							My Wishlist
						</a>
					</li>

					<li>
						<a href="#">
							My Account
						</a>
					</li>

					<li>
						<a href="#">
							Track Order
						</a>
					</li>

					<li>
						<a href="#">
							Refunds
						</a>
					</li>

					<li>
						<a href="#">
							Help & FAQs
						</a>
					</li>
				</ul>

				<div class="sidebar-gallery w-100">
					<h3 class="sidebar-title">Gallery</h3>
					<div class="flex-wrap d-flex justify-content-between gallery-lb">
						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery1.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery1.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery2.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery2.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery3.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery3.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery4.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery4.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery5.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery5.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery6.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery6.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery7.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery7.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery8.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery8.jpg');"></a>
						</div>

						<!-- item gallery sidebar -->
						<div class="wrap-item-gallery">
							<a class="item-gallery " href="{{ asset('images/cart_and_gallery/gallery9.jpg') }}"
								data-lightbox="gallery"
								style="background-image: url('images/cart_and_gallery/gallery9.jpg');"></a>
						</div>
					</div>
				</div>

				<div class="sidebar-text w-full">
					<h3 class="sidebar-title">About us</h3>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus vulputate
						hendrerit.
						Praesent faucibus erat vitae rutrum gravida. Vestibulum tempus mi enim, in molestie sem
						fermentum quis.
					</p>
				</div>
			</div>
		</div>
	</aside>
	<!-- >>>>>>>>>>>>>>>>>>> Sidebar part end >>>>>>>>>>>>>>>>>>>-->

	<!-- >>>>>>>>>>>>>>>>>>> wishlist part start >>>>>>>>>>>>>>>>>>>-->
	<aside id="wrap-header-wishlist" class="wrap-header-wishlist js-panel-wishlist">
		<div class="w-100 h-100 js-hide-wishlist"></div>

		<div class="wishlist">
			<div class="header-wishlist-title d-flex flex-wrap">
				<span>
					Your Wishlist
				</span>

				<div class="wishlist-xmark w-100">
					<div class="pointer js-hide-wishlist">
						<i class="fa-solid fa-xmark"></i>
					</div>
				</div>

			</div>

			<div class="header-wishlist-content d-flex flex-wrap w-100">
				<ul class="header-wishlist-wrap-item w-100">
					<li class="header-wishlist-item d-flex flex-wrap">
						<div class="header-wishlist-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-04.jpg') }}" alt="IMG">
						</div>

						<div class="header-wishlist-item-txt">
							<a href="#" class="header-wishlist-item-name">
								Hair Nourishing CBD Oil
							</a>

							<span class="header-wishlist-item-info">
								$17
							</span>
						</div>
					</li>

					<li class="header-wishlist-item d-flex flex-wrap">
						<div class="header-wishlist-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-05.jpg') }}" alt="IMG">
						</div>

						<div class="header-wishlist-item-txt">
							<a href="#" class="header-wishlist-item-name">
								CBD Glow Combo
							</a>

							<span class="header-wishlist-item-info">
								$33
							</span>
						</div>
					</li>

					<li class="header-wishlist-item d-flex flex-wrap">
						<div class="header-wishlist-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-06.jpg') }}" alt="IMG">
						</div>

						<div class="header-wishlist-item-txt">
							<a href="#" class="header-wishlist-item-name">
								Acne Treating Serum
							</a>

							<span class="header-wishlist-item-info">
								$19
							</span>
						</div>
					</li>

					<li class="header-wishlist-item d-flex flex-wrap">
						<div class="header-wishlist-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-07.jpg') }}" alt="IMG">
						</div>

						<div class="header-wishlist-item-txt">
							<a href="#" class="header-wishlist-item-name">
								Vijaya Ambrosia Oil
							</a>

							<span class="header-wishlist-item-info">
								$59
							</span>
						</div>
					</li>

					<li class="header-wishlist-item d-flex flex-wrap">
						<div class="header-wishlist-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-08.jpg') }}" alt="IMG">
						</div>

						<div class="header-wishlist-item-txt">
							<a href="#" class="header-wishlist-item-name">
								Skin Toning Serum
							</a>

							<span class="header-wishlist-item-info">
								$75
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>

	</aside>
	<!-- >>>>>>>>>>>>>>>>>>> wishlist part end >>>>>>>>>>>>>>>>>>>-->

	<!-- >>>>>>>>>>>>>>>>>>> Cart part start >>>>>>>>>>>>>>>>>>>-->
	<aside id="wrap-header-cart" class="wrap-header-cart js-panel-cart">
		<div class="w-100 h-100 js-hide-cart"></div>

		<div class="cart">
			<div class="header-cart-title d-flex flex-wrap">
				<span>
					Your Cart
				</span>

				<div class="cart-xmark w-100">
					<div class="pointer js-hide-cart">
						<i class="fa-solid fa-xmark"></i>
					</div>
				</div>

			</div>

			<div class="header-cart-content flex-wrap">
				<ul class="header-cart-wrap-item w-100">
					<li class="header-cart-item d-flex flex-wrap">
						<div class="header-cart-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-01.jpg') }}" alt="IMG">
						</div>

						<div class="header-cart-item-txt">
							<a href="#" class="header-cart-item-name">
								Skin Nourishing Serum
							</a>

							<span class="header-cart-item-info">
								$30 (50gm)
							</span>
						</div>
					</li>

					<li class="header-cart-item d-flex flex-wrap">
						<div class="header-cart-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-02.jpg') }}" alt="IMG">
						</div>

						<div class="header-cart-item-txt">
							<a href="#" class="header-cart-item-name">
								Cannabis Face Cream
							</a>

							<span class="header-cart-item-info">
								$14 (20gm)
							</span>
						</div>
					</li>

					<li class="header-cart-item d-flex flex-wrap">
						<div class="header-cart-item-img">
							<img src="{{ asset('images/cart_and_gallery/item-cart-03.jpg') }}" alt="IMG">
						</div>

						<div class="header-cart-item-txt">
							<a href="#" class="header-cart-item-name">
								Acne Treating Serum
							</a>
							<span class="header-cart-item-info">
								$19(50ml)
							</span>
						</div>
					</li>
				</ul>

				<div class="cart-total w-100">
					<div class="header-cart-total">
						Total: <span>$63.00</span>
					</div>

					<div class="header-cart-buttons d-flex flex-wrap w-full">
						<a href="{{ url('/cart') }}" class="d-flex">
							View Cart
						</a>

						<a href="{{ url('/cart') }}" class="d-flex">
							Check Out
						</a>
					</div>

				</div>
			</div>
		</div>
	</aside>
	<!-- >>>>>>>>>>>>>>>>>>> Cart part end >>>>>>>>>>>>>>>>>>>-->

	<!-- >>>>>>>>>>>>>>>>>>> breadcrumb part start >>>>>>>>>>>>>>>>>>>-->
	<section id="breadcrumb" style="background: url(images/banner/breadcrumb.png) no-repeat;">
		<div class="container">
			<div class="row">
				<div class="banner-area">
					<div class="banner-text">
						<div class="container">
							<div class="row">
								<div class="col-lg-12">
									<div class="banner-heading">
										<h1 class="banner-title">Vijaya Ambrosia Rich Oil </h1>
										<div class="breadcrumb">
											<a href="{{ url('/') }}" class="active"><i
													class="fa-solid fa-house-chimney"></i></a>
											<a href="{{ url('/shop') }}">Shop </a>
											<a href="#">Vijaya Amb...</a>
										</div>
									</div>
								</div><!-- Col end -->
							</div><!-- Row end -->
						</div><!-- Container end -->
					</div><!-- Banner text end -->

				</div><!-- Banner area end -->
			</div>
		</div>
	</section>
	<!-- >>>>>>>>>>>>>>>>>>> breadcrumb part end >>>>>>>>>>>>>>>>>>>-->

	<!-- >>>>>>>>>>>>>>>>>>> Product Detail part start >>>>>>>>>>>>>>>>>>>-->
	<div id="product-detail">
		<div class="container-fluid">
			<div class="cart-main-body">
				<div class="row">
					<div class="cart-images col-md-12 col-lg-7">
						<div class="slider-cart">
							<div class="slider__flex">
								<div class="slider__col">
									<div class="slider__thumbs">
										<div class="swiper-product-slider swiper">
											<div class="swiper-wrapper">
												<div class="swiper-slide">
													<div class="slider__image"><img
															src="{{ asset('images/cart_and_gallery/cart-img1.jpg') }}"
															alt=""></div>
												</div>
												<div class="swiper-slide">
													<div class="slider__image"><img
															src="{{ asset('images/cart_and_gallery/cart-img2.jpg') }}"
															alt=""></div>
												</div>
												<div class="swiper-slide">
													<div class="slider__image"><img
															src="{{ asset('images/cart_and_gallery/cart-img3.jpg') }}"
															alt=""></div>
												</div>
												<div class="swiper-slide">
													<div class="slider__image"><img
															src="{{ asset('images/cart_and_gallery/cart-img4.jpg') }}"
															alt=""></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="slider__images">
									<div class="swiper-product-slider swiper">
										<div class="swiper-wrapper cart-gallery">
											<div class="swiper-slide">
												<div class="slider__image">
													<a class="view-cart-img"
														href="{{ asset('images/cart_and_gallery/cart-img1.jpg') }}"
														data-lightbox="gallery">
														<img alt="" class="zoom"
															src="{{ asset('images/cart_and_gallery/cart-img1.jpg') }}">
													</a>
												</div>
											</div>
											<div class="swiper-slide">
												<div class="slider__image">
													<a class="view-cart-img"
														href="{{ asset('images/cart_and_gallery/cart-img2.jpg') }}"
														data-lightbox="gallery">
														<img alt="" class="zoom"
															src="{{ asset('images/cart_and_gallery/cart-img2.jpg') }}">
													</a>
												</div>
											</div>
											<div class="swiper-slide">
												<div class="slider__image">
													<a class="view-cart-img"
														href="{{ asset('images/cart_and_gallery/cart-img3.jpg') }}"
														data-lightbox="gallery">
														<img alt="" class="zoom"
															src="{{ asset('images/cart_and_gallery/cart-img3.jpg') }}">
													</a>
												</div>
											</div>
											<div class="swiper-slide">
												<div class="slider__image">
													<a class="view-cart-img"
														href="{{ asset('images/cart_and_gallery/cart-img4.jpg') }}"
														data-lightbox="gallery">
														<img alt="" class="zoom"
															src="{{ asset('images/cart_and_gallery/cart-img4.jpg') }}">
													</a>
												</div>
											</div>
										</div>
									</div>
									<div class="slider__prev"><i class="fa-solid fa-chevron-left"></i></div>
									<div class="slider__next"><i class="fa-solid fa-chevron-right"></i></div>
								</div>
							</div>
						</div>
					</div>

					<div class="cart-details col-md-12 col-lg-5">
						<h6 class="tag">Sale</h6>
						<h4 class="cart-product-title js-name-detail">
							Vijaya Ambrosia Rich Oil
						</h4>
						<p class="cart-product-code">Product Code:
							<span>EMD224P47</span>
						</p>
						<span class="cart-price">
							$20.99 - $60.99
						</span>
						<p class="cart-product-paragraph">
							Vijaya Ambrosia, is a THC rich medicine consisting of anti-inflammatory and analgesic
							properties, which can be used to relieve chronic pain.

							It helps with chemotherapy induced symptoms such as nausea and vomiting through its
							interactions with CB1 receptors and 5-HT3 receptors. It also helps with chronic pain and
							inflammation. It is also proven to help with Insomnia and boosts appetite.
						</p>
						<div class="row">
							<div class="col-lg-12 col-md-6">
								<div class="cart-product-sizes d-flex">
									<h4>Available sizes :</h4>
									<div class="rs1-select2 rs2-select2">
										<select class="js-select2" name="size">
											<option selected>Please select size</option>
											<option>10ml ($20.99)</option>
											<option>20ml ($40.99)</option>
											<option>30ml ($60.99)</option>
										</select>
										<div class="dropDownSelect2"></div>
									</div>
								</div>
							</div>
							<div class="col-lg-12 col-md-6">
								<div class="cart-product-coupon d-flex flex-wrap">
									<div class="d-flex flex-wrap">
										<input type="text" name="coupon" placeholder="Coupon Code">

										<div class="apply-coupon-button">
											Apply coupon
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-12 col-md-12">
								<div class="cart-add-body d-flex flex-wrap align-items-center">
									<div class="cart-add d-flex flex-wrap">
										<div class="cart-num-product d-flex flex-wrap">
											<div class="btn-num-product-down">
												<i class="fa-solid fa-minus"></i>
											</div>

											<input class="text-center num-product" type="number" name="num-product"
												value="1">

											<div class="btn-num-product-up">
												<i class="fa-solid fa-plus"></i>
											</div>
										</div>
									</div>
									<button class="d-flex flex-wrap js-addcart-detail">
										Add to cart
									</button>
								</div>
							</div>
						</div>
						<div class="add-to d-flex flex-wrap  align-items-center">
							<a href="#" class="add-to-wishlist   js-addwish-detail">
								<i class="fa-solid fa-heart"></i> ADD TO WISHLIST
							</a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12 product-detail-nav">
						<ul class="nav nav-pills" id="pills-tab-detail" role="tablist">
							<li class="nav-item" role="presentation">
								<button class="nav-link active" id="product-item-one" data-bs-toggle="pill"
									data-bs-target="#product-item-1" type="button" role="tab" aria-controls="product-item-1"
									aria-selected="true">Description</button>
							</li>

							<li class="nav-item" role="presentation">
								<button class="nav-link" id="product-item-two" data-bs-toggle="pill"
									data-bs-target="#product-item-2" type="button" role="tab" aria-controls="product-item-2"
									aria-selected="false">Shipping Information </button>
							</li>

							<li class="nav-item" role="presentation">
								<button class="nav-link" id="product-item-three" data-bs-toggle="pill"
									data-bs-target="#product-item-3" type="button" role="tab" aria-controls="product-item-3"
									aria-selected="false">Reviews</button>
							</li>
						</ul>
					</div>
				</div>
				<div class="tab-content" id="pills-tab-Content">
					<div class="tab-pane active show fade" id="product-item-1" role="tabpanel"
						aria-labelledby="product-item-one">
						<div class="description">
							<div class="details">
								<h3>Details</h3>
								<p>This Cannabis is developed from our farms. We pick 100% organic hemp and handpicked
									raw materials from the selected farms. We have provided complete information about
									this product on the box. This cannabis-based product is created using the leaves,
									stems, and seeds of the Cannabis Sativa plant (hemp). Generally, cannabis is used
									for recreational and medicinal purposes.</p>
							</div>
						</div>
						<div class="ingredients">
							<h3>
								Ingredients
							</h3>
							<ul class="mb-2">
								<li> - Full leaf extract</li>
								<li> - 6g of omega 6</li>
								<li> - 10mg of vitamin E</li>
								<li> - Terpenes</li>
								<li> - 2g of omega 3</li>
							</ul>
							<p>It still contains various ingredients that are neatly presented on the product box.</p>
						</div>
						<div class="benefits-and-side-effects">
							<h3>Benefits and Side Effects</h3>
							<p>Cannabis also has some medicinal benefits. It helps to manage chronic pain. It also helps
								with some sleep problems. It may also help with anxiety and reduces inflammation.</p>
							<p>Cannabis doesn’t have any high side effects, but it can cause some.</p>
							<ul>
								<li> - Nausea</li>
								<li> - Anxiety</li>
								<li> - Decreased blood pressure</li>
								<li> - Increased heart rate</li>
								<li> - Delayed reaction time</li>
							</ul>
							<p>These are not any confirmed side effects but may have the above listed.</p>
						</div>
						<div class="safety-instructions">
							<h3>Safety Instructions</h3>
							<p>It is recommended that you check with your physician before using our products.</p>
						</div>
					</div>
					<div class="tab-pane fade" id="product-item-2" role="tabpanel" aria-labelledby="product-item-two">
						<div class="returns-policy">
							<h3>Returns Policy</h3>
							<p>You may return most new, unopened items within 30 days of delivery for a full refund.
								We'll also pay the return shipping costs if the return is a result of our error (you
								received an incorrect or defective item, etc.).</p>
							<p>You should expect to receive your refund within four weeks of giving your package to the
								return shipper, however, in many cases you will receive a refund more quickly. This time
								period includes the transit time for us to receive your return from the shipper (5 to 10
								business days), the time it takes us to process your return once we receive it (3 to 5
								business days), and the time it takes your bank to process our refund request (5 to 10
								business days).</p>
							<p>If you need to return an item, simply login to your account, view the order using the
								'Complete Orders' link under the My Account menu and click the Return Item(s) button.
								We'll notify you via e-mail of your refund once we've received and processed the
								returned item.</p>
						</div>
						<div class="Shipping">
							<h3>Shipping</h3>
							<p>We can ship to virtually any address in the world. Note that there are restrictions on
								some products, and some products cannot be shipped to international destinations.</p>
							<p>When you place an order, we will estimate shipping and delivery dates for you based on
								the availability of your items and the shipping options you choose. Depending on the
								shipping provider you choose, shipping date estimates may appear on the shipping quotes
								page.</p>
							<p>Please also note that the shipping rates for many items we sell are weight-based. The
								weight of any such item can be found on its detail page. To reflect the policies of the
								shipping companies we use, all weights will be rounded up to the next full pound.</p>
						</div>
					</div>
					<div class="tab-pane  fade" id="product-item-3" role="tabpanel" aria-labelledby="product-item-three">
						<div class="row">
							<div class="col-lg-6">
								<div class="reviews_ratings">
									<!-- <h3>Reviews</h3> -->
									<h2>
										4.3 <i class="fa-solid fa-star"></i>
									</h2>
									<p>90 Ratings &
										20 Reviews</p>
								</div>
								<div class="reviews-container">
									<div class="review">
										<span class="icon-container">5 <i class="fas fa-star"></i></span>
										<div class="progress">
											<div class="progress-done" data-done="80"></div>
										</div>
										<span class="percent">50</span>
									</div>
									<div class="review">
										<span class="icon-container">4 <i class="fas fa-star"></i></span>
										<div class="progress">
											<div class="progress-done" data-done="60"></div>
										</div>
										<span class="percent">30</span>
									</div>
									<div class="review">
										<span class="icon-container">3 <i class="fas fa-star"></i></span>
										<div class="progress">
											<div class="progress-done" data-done="10"></div>
										</div>
										<span class="percent">5</span>
									</div>
									<div class="review">
										<span class="icon-container">2 <i class="fas fa-star"></i></span>
										<div class="progress">
											<div class="progress-done" data-done="7"></div>
										</div>
										<span class="percent">3</span>
									</div>
									<div class="review">
										<span class="icon-container">1 <i class="fas fa-star"></i></span>
										<div class="progress">
											<div class="progress-done" data-done="4"></div>
										</div>
										<span class="percent">2</span>
									</div>
								</div>
							</div>
							<div class="col-lg-6">
								<div class="review-form">
									<h3>Write Your Review</h3>
									<form id="review-form" action="index.html" method="post">
										<div class="review-star d-flex flex-wrap">
											<h6>Your Rating</h6>
											<span id="ratings-3" data-ratings='{"max": 5, "value": 4}'></span>
											<span class="rating-text"></span>
										</div>
										<div class="form-floating mb-3">
											<textarea class="form-control" placeholder="Leave a comment here"
												id="floatingTextarea2" style="height: 100px" name="comment"
												required></textarea>

											<label>Your Comment</label>
										</div>
										<div class="form-floating mb-3">
											<input class="form-control" placeholder="Your Name" id="floatingTextarea"
												name="username" type="text" required>
											<label>Your Name</label>
										</div>
										<div class="form-floating mb-3">
											<input type="email" name="email" class="form-control" id="floatingInput"
												placeholder="name@example.com" required>
											<label>Email Address</label>
										</div>
										<div class="form-check">
											<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
											<label class="form-check-label" for="flexCheckDefault">
												Save my name, email, and website in this browser.
											</label>
										</div>
										<div class="d-flex justify-content-center">
											<button id="submit">Submit</button>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-12 review-comments">
								<div class="row">
									<div class="col-lg-4 col-md-4 col-sm-12">
										<h5 class="title">Review Comments</h5>
									</div>
									<div class="col-lg-8 col-md-8 col-sm-12 comment-nav">
										<ul class="nav nav-pills" id="pills-tab-Comments" role="tablist">
											<li class="nav-item" role="presentation">
												<button class="nav-link active" id="recent" data-bs-toggle="pill"
													data-bs-target="#recent-review" type="button" role="tab"
													aria-controls="recent-review" aria-selected="true"> Most Recent

												</button>
											</li>

											<li class="nav-item" role="presentation">
												<button class="nav-link" id="highest" data-bs-toggle="pill"
													data-bs-target="#highest-review" type="button" role="tab"
													aria-controls="highest-review" aria-selected="false">Highest
													Rating</button>
											</li>

											<li class="nav-item" role="presentation">
												<button class="nav-link" id="lowest" data-bs-toggle="pill"
													data-bs-target="#item-3-review" type="button" role="tab"
													aria-controls="item-3-review" aria-selected="false">Lowest
													Rating</button>
											</li>
										</ul>
									</div>
								</div>
								<div class="tab-content " id="pills-tabContent">
									<div class="tab-pane active show fade" id="recent-review" role="tabpanel"
										aria-labelledby="recent">
										<div class="comments-all">
											<div class="comment_area">
												<ul>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/1.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Gabriel Cyrus</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>

														<ol class="children">
															<li class="single_comment_area">
																<!-- Comment Content -->
																<div class="comment-content d-flex">
																	<!-- Comment Author -->
																	<div class="comment-author">
																		<img class="w-100 img-fluid"
																			src="{{ asset('images/feedbacks/2.jpg') }}"
																			alt="author">
																	</div>
																	<!-- Comment Meta -->
																	<div class="comment-meta">
																		<a href="#!" class="post-date">27 Aug 2024</a>
																		<h5>Author</h5>
																		<p>Neque porro quisquam est, qui dolorem ipsum
																			quia dolor
																			sit amet, consectetu
																			adipisci
																			velit, sed quia non numquam eius modi</p>
																		<div class="text-end">
																			<a href="#!" class="like"><i
																					class="fa-solid fa-thumbs-up"></i>
																				Like</a>
																			<a href="#!" class="reply"><i
																					class="fa-solid fa-reply"></i>
																				Reply</a>
																		</div>
																	</div>
																</div>
															</li>
														</ol>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/3.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Isaac Abner</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/4.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Adrian John</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/5.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Ichika Nakano</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="tab-pane fade" id="highest-review" role="tabpanel"
										aria-labelledby="highest">
										<div class="comments-all">
											<div class="comment_area">
												<ul>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/6.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Gabriel Cyrus</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>

														<ol class="children">
															<li class="single_comment_area">
																<!-- Comment Content -->
																<div class="comment-content d-flex">
																	<!-- Comment Author -->
																	<div class="comment-author">
																		<img class="w-100 img-fluid"
																			src="{{ asset('images/feedbacks/2.jpg') }}"
																			alt="author">
																	</div>
																	<!-- Comment Meta -->
																	<div class="comment-meta">
																		<a href="#!" class="post-date">27 Aug 2024</a>
																		<h5>Author</h5>
																		<p>Neque porro quisquam est, qui dolorem ipsum
																			quia dolor
																			sit amet, consectetu
																			adipisci
																			velit, sed quia non numquam eius modi</p>
																		<div class="text-end">
																			<a href="#!" class="like"><i
																					class="fa-solid fa-thumbs-up"></i>
																				Like</a>
																			<a href="#!" class="reply"><i
																					class="fa-solid fa-reply"></i>
																				Reply</a>
																		</div>
																	</div>
																</div>
															</li>
														</ol>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/7.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Gabriel Cyrus</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>

														<ol class="children">
															<li class="single_comment_area">
																<!-- Comment Content -->
																<div class="comment-content d-flex">
																	<!-- Comment Author -->
																	<div class="comment-author">
																		<img class="w-100 img-fluid"
																			src="{{ asset('images/feedbacks/2.jpg') }}"
																			alt="author">
																	</div>
																	<!-- Comment Meta -->
																	<div class="comment-meta">
																		<a href="#!" class="post-date">27 Aug 2024</a>
																		<h5>Author</h5>
																		<p>Neque porro quisquam est, qui dolorem ipsum
																			quia dolor
																			sit amet, consectetu
																			adipisci
																			velit, sed quia non numquam eius modi</p>
																		<div class="text-end">
																			<a href="#!" class="like"><i
																					class="fa-solid fa-thumbs-up"></i>
																				Like</a>
																			<a href="#!" class="reply"><i
																					class="fa-solid fa-reply"></i>
																				Reply</a>
																		</div>
																	</div>
																</div>
															</li>
														</ol>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/8.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Adrian John</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/9.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Ichika Nakano</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="tab-pane fade" id="item-3-review" role="tabpanel" aria-labelledby="lowest">
										<div class="comments-all">
											<div class="comment_area">
												<ul>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/10.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Gabriel Cyrus</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>

														<ol class="children">
															<li class="single_comment_area">
																<!-- Comment Content -->
																<div class="comment-content d-flex">
																	<!-- Comment Author -->
																	<div class="comment-author">
																		<img class="w-100 img-fluid"
																			src="{{ asset('images/feedbacks/2.jpg') }}"
																			alt="author">
																	</div>
																	<!-- Comment Meta -->
																	<div class="comment-meta">
																		<a href="#!" class="post-date">27 Aug 2024</a>
																		<h5>Author</h5>
																		<p>Neque porro quisquam est, qui dolorem ipsum
																			quia dolor
																			sit amet, consectetu
																			adipisci
																			velit, sed quia non numquam eius modi</p>
																		<div class="text-end">
																			<a href="#!" class="like"><i
																					class="fa-solid fa-thumbs-up"></i>
																				Like</a>
																			<a href="#!" class="reply"><i
																					class="fa-solid fa-reply"></i>
																				Reply</a>
																		</div>
																	</div>
																</div>
															</li>
														</ol>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/11.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Isaac Abner</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/12.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Adrian John</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
													<!-- Single Comment Area -->
													<li class="single_comment_area">
														<!-- Comment Content -->
														<div class="comment-content d-flex">
															<!-- Comment Author -->
															<div class="comment-author">
																<img class="w-100 img-fluid"
																	src="{{ asset('images/feedbacks/13.jpg') }}"
																	alt="author">
															</div>
															<!-- Comment Meta -->
															<div class="comment-meta">
																<a href="#!" class="post-date">27 Aug 2024</a>
																<div class="d-flex flex-wrap">
																	<h5>Ichika Nakano</h5>
																	<div class="comment-star">
																		<i class="fa-solid fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																		<i class="fa-regular fa-star"></i>
																	</div>
																</div>
																<p>Neque porro quisquam est, qui dolorem ipsum quia
																	dolor sit amet,
																	consectetu adipisci
																	velit,
																	sed quia non numquam eius modi</p>
																<div class="text-end">
																	<a href="#!" class="like"><i
																			class="fa-solid fa-thumbs-up"></i>
																		Like</a>
																	<a href="#!" class="reply"><i
																			class="fa-solid fa-reply"></i>
																		Reply</a>
																</div>
															</div>
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- >>>>>>>>>>>>>>>>>>> Product Detail part end >>>>>>>>>>>>>>>>>>>-->


@endsection