Untitled

mail@pastecode.io avatar
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