Untitled
unknown
plain_text
a month ago
14 kB
1
Indexable
Never
@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> @endpush
Leave a Comment