@extends('layouts.default')
@section('content')
<section class="productSummary serviceSummary sectionSpac pb-0">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="{{ asset('assets/images/prd1.png') }}" alt="service" class="serviceSummaryImg">       
            </div>
            <div class="col-lg-6 py-4">
                <h2 class="productName mt-3">Customized Alloy Rim </h2>
                <div class="my-4">
                    <div class="priceService">
                        <span class="salePrice me-4">$359.99</span>
                        <span class="regPrice">$450.00</span>
                    </div>
                </div>
                <div class="prodRating position-relative mb-3">
                    <div class="ratingStars">
                        <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 class="ratingReviews">
                        (3 Reviews)<i class="ms-3 fa-solid fa-angle-down"></i>
                    </div>
                    <div class="ratingbyStars">
                        <div class="starRatingWrap d-flex align-items-center mb-3">
                            <span class="ms-2">5 stars</span>
                            <div class="progress w-100 ms-3 me-4" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="ratingPercn">70%</div>
                        </div>
                        <div class="starRatingWrap d-flex align-items-center mb-3">
                            <span class="ms-2">4 stars</span>
                            <div class="progress w-100 ms-3 me-4" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 95%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="ratingPercn">95%</div>
                        </div>
                        <div class="starRatingWrap d-flex align-items-center mb-3">
                            <span class="ms-2">3 stars</span>
                            <div class="progress w-100 ms-3 me-4" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 8%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="ratingPercn">8%</div>
                        </div>
                        <div class="starRatingWrap d-flex align-items-center mb-3">
                            <span class="ms-2">2 stars</span>
                            <div class="progress w-100 ms-3 me-4" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="ratingPercn">55%</div>
                        </div>
                        <div class="starRatingWrap d-flex align-items-center mb-3">
                            <span class="ms-2">1 stars</span>
                            <div class="progress w-100 ms-3 me-4" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="ratingPercn">15%</div>
                        </div>
                    </div>
                </div>
                <div class="itemCat mb-2">Item Number:<span class="ms-2 itemcatNum">AUM58963</span></div>
                <div class="itemCat mb-4">Category:<span class="ms-2 itemcatNum">Electronics</span></div>
                <div class="row singlePrdBtns">
                    <div class="col-sm-6 mb-sm-0 mb-4">
                        <button class="btnMain w-100">Book An Order</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="productsWrap productTabs servicewrap pt-0 sectionSpac">
    <div class="container">
        <ul class="nav nav-pills mt-5 mb-4" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-Descriptions-tab" data-bs-toggle="pill" data-bs-target="#pills-Descriptions" type="button" role="tab" aria-controls="pills-Descriptions" aria-selected="true">Descriptions</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-Reviews-tab" data-bs-toggle="pill" data-bs-target="#pills-Reviews" type="button" role="tab" aria-controls="pills-Reviews" aria-selected="false">Customer's Reviews (21)</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-Descriptions" role="tabpanel" aria-labelledby="pills-Descriptions-tab">
            <p class="svsText lh-lg mb-3">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
            <p class="svsText lh-lg">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
            </div>
            <div class="tab-pane fade" id="pills-Reviews" role="tabpanel" aria-labelledby="pills-Reviews-tab">
                <div class="d-flex mb-4">
                    <div class="reviewImg me-4"><img src="{{ asset('assets/images/avatar.png') }}" alt="avatar"></div>
                    <div class="reviewContent">
                        <div class="d-flex mb-2">
                            <span class="ratingStars me-3">
                                <i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i>
                            </span>
                            <span class="reviewName me-4">Cobus Bester</span>
                            <span class="reviewDate">- June 7, 2021</span>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </p>
                    </div>
                </div>
                <div class="d-flex mb-4">
                    <div class="reviewImg me-3"><img src="{{ asset('assets/images/avatar.png') }}" alt="avatar"></div>
                    <div class="reviewContent">
                        <div class="d-flex mb-2">
                            <span class="ratingStars me-3">
                                <i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i><i class="fa-solid fa-star" style="color: #FDA800"></i>
                            </span>
                            <span class="reviewName me-4">Cobus Bester</span>
                            <span class="reviewDate">- June 7, 2021</span>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row my-md-5 my-4">
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="serviceCenter d-flex align-items-center">
                    <img src="{{ asset('assets/images/intercar.png') }}" alt="" class="imgSvs me-4">
                    <div class="svsCenterContent">
                        <p class="svsTitleCnt mb-2">Instant Car Services</p>
                        <p class="svsDesc mb-0">Maintain wireless scerios after sure quality vectors future</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="serviceCenter d-flex align-items-center">
                    <img src="{{ asset('assets/images/intreqs.png') }}" alt="" class="imgSvs me-4">
                    <div class="svsCenterContent">
                        <p class="svsTitleCnt mb-2">24/7 Quality Service</p>
                        <p class="svsDesc mb-0">Maintain wireless scerios after sure quality vectors future</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="serviceCenter d-flex align-items-center">
                    <img src="{{ asset('assets/images/intercost.png') }}" alt="" class="imgSvs me-4">
                    <div class="svsCenterContent">
                        <p class="svsTitleCnt mb-2">Quality Cost Service</p>
                        <p class="svsDesc mb-0">Maintain wireless scerios after sure quality vectors future</p>
                    </div>
                </div>
            </div>
        </div>
        <h3 class="sectionTitle mb-4"><span class="me-1">Customer</span>Benefits</h3>
        <p class="svsText lh-lg">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
    </div>
</section>
<section class="productsWrap mt-5">
    <div class="container">
        <h3 class="sectionTitle mb-4"><span class="me-1">Recommended</span>services</h3>
        <div class="row productList pt-2">
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product4.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <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 class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product3.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <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 class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product1.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <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 class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
            <div class="singlePrdList col-lg-3 col-md-6 mb-4">
                <div class="homePrdWrap">
                    <a href="singleproduct" target="_blank" class="overflow-hidden d-block prodimgWrap">
                        <img src="{{ asset('assets/images/product2.jpg') }}" alt="item" class="producths">
                    </a>
                    <div class="productDet p-4">
                        <span class="prodCat mb-1">Filters</span>
                        <p class="mb-2 prodName">Premium Quality Air Filters</p>
                        <div class="prodRating mb-3">
                            <div class="ratingStars">
                                <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 class="ratingReviews">
                                (3 Reviews)
                            </div>
                        </div>
                        <p class="listText d-none">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis amet voluptas assumenda est, omnis dolor repellendus quis nostrum. Temporibus autem quibusdam et aut officiis debitis aut rerum dolorem necessitatibus saepe eveniet ut et neque porro quisquam est, qui...</p>
                    <p class="productPrice mb-3">
                            <span class="d-inline-block me-2">Price:</span>$89.00
                        </p>
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-100">Add To Cat</button>
                    </div>
                </div>
            </div>
            <!-- end of product div -->
        </div>
    </div>
</section>
@endsection