Untitled
unknown
plain_text
5 months ago
14 kB
1
Indexable
@extends('layouts.app')
@section('title', 'Product Details')
@section('content')
<!-- breadcrumb start -->
<div class="breadcrumb-section">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="page-title">
<h2>Product Name</h2>
</div>
</div>
<div class="col-sm-6">
<nav aria-label="breadcrumb" class="theme-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('frontend.home') }}">home</a></li>
<li class="breadcrumb-item active" aria-current="page">Product</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<!-- breadcrumb end -->
<!-- section start -->
<section>
<div class="collection-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="product-slick">
@foreach($product->images as $image)
<div><img src="{{ asset('storage/' . $image->image) }}" alt=""
class="img-fluid blur-up lazyload image_zoom_cls-{{ $loop->index }}"></div>
@endforeach
</div>
<div class="row">
<div class="col-12 p-0">
<div class="slider-nav">
@foreach($product->images as $image)
<div><img src="{{ asset('storage/' . $image->image) }}" alt=""
class="img-fluid blur-up lazyload"></div>
@endforeach
</div>
</div>
</div>
</div>
<div class="col-lg-6 rtl-text">
<div class="product-right">
<div class="product-count">
<ul>
<li>
<img src="{{ asset('assets/frontend/assets/images/fire.gif') }}" class="img-fluid" alt="image">
<span class="p-counter">333</span>
<span class="lang">orders in last 24 hours</span>
</li>
<li>
<img src="{{ asset('assets/frontend/assets/images/person.gif') }}" class="img-fluid user_img" alt="image">
<span class="p-counter">44444</span>
<span class="lang">active view this</span>
</li>
</ul>
</div>
<h2>{{ $product->name }}</h2>
<div class="rating-section">
<div class="rating">
@for($i = 1; $i <= 5; $i++)
@if($i <= $averageRating)
<i class="fa fa-star"></i>
@else
<i class="fa fa-star-o"></i>
@endif
@endfor
</div>
<h6>{{ $totalRatings }} ratings</h6>
</div>
<div class="label-section">
<span class="badge badge-grey-color">{{ $product->label }}</span>
<span class="label-text">{{ $product->label_category }}</span>
</div>
<h3 class="price-detail">${{ $product->price }} @if($product->sale_price) <del>${{ $product->sale_price }}</del> @endif
</h3>
<div id="selectSize" class="addeffect-section product-description border-product">
<h6 class="product-title">quantity</h6>
<div class="qty-box">
<div class="input-group">
<span class="input-group-prepend"><button type="button"
class="btn quantity-left-minus" data-type="minus" data-field=""><i
class="ti-angle-left"></i></button> </span>
<input type="text" name="quantity" class="form-control input-number" value="1">
<span class="input-group-prepend"><button type="button"
class="btn quantity-right-plus" data-type="plus" data-field=""><i
class="ti-angle-right"></i></button></span>
</div>
</div>
</div>
<div class="product-buttons">
<a href="{{ route('cart.add') }}" id="cartEffect"
class="btn btn-solid hover-solid btn-animation add-to-cart"
data-product-id="{{ $product->id }}">
<i class="fa fa-shopping-cart me-1" aria-hidden="true"></i> add to cart
</a>
<a href="{{ route('cart.buyNow', $product->id) }}" class="btn btn-solid">
<i class="fa fa-bookmark fz-16 me-2" aria-hidden="true"></i>Buy Now
</a>
</div>
<div class="product-count">
<ul>
<li>
<img src="{{ asset('assets/frontend/assets/images/icon/truck.png') }}" class="img-fluid" alt="image">
<span class="lang">Free shipping for orders above $500 USD</span>
</li>
</ul>
</div>
<div class="border-product">
<h6 class="product-title">Sales Ends In</h6>
<div class="timer">
<p id="demo"></p>
</div>
</div>
<div class="border-product">
<h6 class="product-title">shipping info</h6>
<ul class="shipping-info">
<li>100% Original Products</li>
<li>Free Delivery on order above Rs. 799</li>
<li>Pay on delivery is available</li>
<li>Easy 30 days returns and exchanges</li>
</ul>
</div>
<div class="border-product">
<h6 class="product-title">share it</h6>
<div class="product-icon">
<ul class="product-social">
<li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>
<div class="border-product">
<h6 class="product-title">100% secure payment</h6>
<img src="../assets/images/payment.png" class="img-fluid mt-1" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section ends -->
<!-- product-tab starts -->
<section class="tab-product m-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12">
<ul class="nav nav-tabs nav-material" id="top-tab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="top-home-tab" data-bs-toggle="tab"
href="#top-home" role="tab" aria-selected="true"><i
class="fa fa-file"></i> Details</a>
<div class="material-border"></div>
</li>
<li class="nav-item"><a class="nav-link" id="top-rating-tab" data-bs-toggle="tab"
href="#top-rating" role="tab" aria-selected="true"><i
class="fa fa-star"></i> Ratings</a>
<div class="material-border"></div>
</li>
</ul>
<div class="tab-content nav-material" id="top-tabContent">
<div class="tab-pane fade show active" id="top-home" role="tabpanel"
aria-labelledby="top-home-tab">
<p class="mt-4 p-0">{!! $product->description !!}</p>
</div>
</div>
<div class="tab-content nav-material" id="top-tabContent">
<div class="tab-pane fade" id="top-rating" role="tabpanel" aria-labelledby="top-rating-tab">
<div class="row">
<div class="col-4">
@auth
@php
$userRating = \App\Models\Rating::where('user_id', Auth::id())->where('product_id', $product->id)->first();
@endphp
@if($userRating)
<p class="mb-5">You have already submitted a rating for this product.</p>
@else
<form id="rating-form" action="{{ route('customer.product.submitRating') }}" method="POST">
@csrf
<input type="hidden" name="product_id" value="{{ $product->id }}">
<div class="mb-3">
<label for="rating" class="form-label">Rating (1-5)</label>
<div class="rating" id="rating">
<i class="fa fa-star-o" data-value="1"></i>
<i class="fa fa-star-o" data-value="2"></i>
<i class="fa fa-star-o" data-value="3"></i>
<i class="fa fa-star-o" data-value="4"></i>
<i class="fa fa-star-o" data-value="5"></i>
</div>
<input type="hidden" name="rating" id="ratingValue" required>
</div>
<div class="mb-3">
<label for="review" class="form-label">Review (optional)</label>
<textarea name="review" id="review" class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-solid mb-5">Submit Rating</button>
</form>
@endif
@else
<p class="mb-5">Please <a href="{{ route('customer.login') }}">log in</a> to submit a rating.</p>
@endauth
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- product-tab ends -->
@endsection
@push('js')
<script type="text/javascript">
$(document).ready(function() {
// Handle star rating selection
$('.rating i').on('click', function() {
var ratingValue = $(this).data('value');
$('#ratingValue').val(ratingValue);
// Update star display
$('.rating i').removeClass('fa-star').addClass('fa-star-o');
$(this).prevAll().addBack().removeClass('fa-star-o').addClass('fa-star');
});
// Handle form submission
$('#rating-form').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
url: form.attr('action'),
method: 'POST',
data: formData,
success: function(response) {
if (response.success) {
toastr.success(response.message);
form[0].reset(); // Reset the form
$('.rating i').removeClass('fa-star').addClass('fa-star-o'); // Reset star display
$('#ratingValue').val(''); // Clear rating value
} else {
toastr.error(response.message);
}
},
error: function(xhr) {
toastr.error('An error occurred. Please try again.');
}
});
});
});
</script>
@endpushLeave a Comment