@extends('layouts.default')
@section('content')
<section class="productSummary sectionSpac">
    <div class="container">
        <div class="row">
            {{-- @dd($item) --}}
            <div class="col-lg-6">
                <div class="sliderforProd mb-2">
                    <div class="productImage">
                        <img src="{{ asset('assets/images/prd1.png') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/prd2.png') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product1.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product2.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product3.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product4.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/prd1.png') }}" alt="product">
                    </div>
                </div>
                <div class="slidernavProd">
                    <div class="productImage">
                        <img src="{{ asset('assets/images/prd1.png') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/prd2.png') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product1.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product2.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product3.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/product4.jpg') }}" alt="product">
                    </div>
                    <div class="productImage">
                        <img src="{{ asset('assets/images/prd1.png') }}" alt="product">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 py-4">
                <div class="row justify-content-between">
                    <div class="col-md-7 mb-md-0">
                        <div class="priceSumm d-flex align-items-center">Price:<span class="ms-2 salePrice">{{ $item->price}}</span><span class="ms-3 regPrice"></span></div>
                        <div class="storeDisc mb-3">Store Discount: <span class="ms-1 storeOff">Buy 3 Get 2% Off</span></div>
                        <h2 class="productName mt-4">{{ $item->item_title}}</h2>
                        <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">{{ $item->sku}}</span></div>
                        <div class="itemCat mb-3">Category:<span class="ms-2 itemcatNum">{{ $item->category->name}}</span></div>
                        <p class="lh-lg">{{ $item->description}}</p>
                    </div>
                    <div class="col-md-5">
                        <div class="buyerProtec d-flex mb-md-5 mb-4">
                            <img src="{{ asset('assets/images/buyerprot.png') }}" alt="buyer">
                            <div class="protText ms-2">
                                <p class="mb-0 fw-bold buyerTitle">21 Day Buyer Protection</p>
                                <a href="buyerprotection" target="_blank" class="mb-0">Money Back Guarantee<i class="fa-solid fa-angle-down ms-2"></i></a>
                            </div>
                        </div>
                        <div class="buyerProtec d-flex mb-4">
                            <img src="{{ asset('assets/images/shipping.png') }}" alt="shipping">
                            <div class="protText ms-2">
                                <p class="mb-0 fw-bold buyerTitle">Free Shipping</p>
                                <p>From Nigeria To United <br>
                                Kingdom via Automobile<br>
                                Standard Shipping.</p>
                                <p class="shipdays mb-1">Estimated delivery: 40-50 Days</p>
                                <a data-bs-toggle="modal" data-bs-target="#deliveryopt" class="mb-0 pointer">More Options<i class="fa-solid fa-angle-down ms-2"></i></a>
                            </div>
                        </div>
                        <a data-bs-toggle="modal" data-bs-target="#vehicleservice" class="btnMain pointer px-3 w-100">Vehicle Service Insurance</a>
                    </div>
                </div>
                <div class="row my-4 ">
                    <div class="col-md-6 mb-md-0 mb-4">
                        <div class="quantityWrap d-flex align-items-center">
                            <span class="quantityTitle me-5">Quantity</span>
                            <button class="btnMain qunatityShow px-3 py-2 text-uppercase">Add<i class="fa-solid fa-plus ms-4"></i></button>
                            <div class="counter">
                               <div class="counterwrap d-flex align-items-center">
                                    <span class="MinusValue counterPrice"><i class="fa-solid fa-minus"></i></span>
                                    <input type="number" class="counterValue border-0" value="1"/>
                                    <span class="PlusValue counterPrice"><i class="fa-solid fa-plus"></i></span>
                               </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                            <select class="form-select" aria-label="loc-make">
                                <option selected>Select Your Location</option>
                                <option value="1">All Country</option>
                                @foreach ($locations as $location)
                                    <option value="{{ $location->id}}">{{ $location->name}}</option>
                                @endforeach
                            </select>
                    </div>
                </div>
                <div class="row singlePrdBtns">
                    <div class="col-sm-6 mb-sm-0 mb-4">
                        <button data-bs-toggle="modal" data-bs-target="#cartModal" id="addToCart" class="btnMain w-100">Add To Cart</button>
                    </div>
                    <div class="col-sm-6">
                        <button class="btnMain btnGreen w-100">Buy Now</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="productTabs mt-lg-5 pt-2">
    <div class="container">
        <h3 class="sectionTitle mb-4"><span class="me-1">Frequently</span> Bought Together</h3>
        <div class="moreServices moreprodfreg mb-4">
            <div class="subService py-3">
                <div class="subServiceWrap mx-3 d-flex">
                    <img src="{{ asset('assets/images/moresvs.png') }}" alt="" class="imgSvs me-2">
                    <div class="svsCatWrap d-flex flex-column">
                        <div class="productDet px-2">
                            <span class="prodCat mb-1">Electronics</span>
                            <p class="prodName mb-1">Premium Quality Air Filters</p>
                            <div class="prodRating mb-1">
                                <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="productPrice mb-1">
                                <span class="d-inline-block me-2">Price:</span>$89.00
                            </p>
                            <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-auto px-md-4">Add To Cart</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subService py-3">
                <div class="subServiceWrap mx-3 d-flex">
                    <img src="{{ asset('assets/images/moresvs.png') }}" alt="" class="imgSvs me-2">
                    <div class="svsCatWrap d-flex flex-column">
                        <div class="productDet px-2">
                            <span class="prodCat mb-1">Electronics</span>
                            <p class="prodName mb-1">Premium Quality Air Filters</p>
                            <div class="prodRating mb-1">
                                <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="productPrice mb-1">
                                <span class="d-inline-block me-2">Price:</span>$89.00
                            </p>
                            <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-auto px-md-4">Add To Cart</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subService py-3">
                <div class="subServiceWrap mx-3 d-flex">
                    <img src="{{ asset('assets/images/moresvs.png') }}" alt="" class="imgSvs me-2">
                    <div class="svsCatWrap d-flex flex-column">
                        <div class="productDet px-2">
                            <span class="prodCat mb-1">Electronics</span>
                            <p class="prodName mb-1">Premium Quality Air Filters</p>
                            <div class="prodRating mb-1">
                                <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="productPrice mb-1">
                                <span class="d-inline-block me-2">Price:</span>$89.00
                            </p>
                            <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-auto px-md-4">Add To Cart</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subService py-3">
                <div class="subServiceWrap mx-3 d-flex">
                    <img src="{{ asset('assets/images/moresvs.png') }}" alt="" class="imgSvs me-2">
                    <div class="svsCatWrap d-flex flex-column">
                        <div class="productDet px-2">
                            <span class="prodCat mb-1">Electronics</span>
                            <p class="prodName mb-1">Premium Quality Air Filters</p>
                            <div class="prodRating mb-1">
                                <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="productPrice mb-1">
                                <span class="d-inline-block me-2">Price:</span>$89.00
                            </p>
                            <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-auto px-md-4">Add To Cart</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subService py-3">
                <div class="subServiceWrap mx-3 d-flex align-items-center">
                    <img src="{{ asset('assets/images/moresvs.png') }}" alt="" class="imgSvs me-2">
                    <div class="svsCatWrap d-flex flex-column">
                        <div class="productDet px-2">
                            <span class="prodCat mb-1">Electronics</span>
                            <p class="prodName mb-1">Premium Quality Air Filters</p>
                            <div class="prodRating mb-1">
                                <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="productPrice mb-1">
                                <span class="d-inline-block me-2">Price:</span>$89.00
                            </p>
                            <button data-bs-toggle="modal" data-bs-target="#cartModal" class="btnMain w-auto px-md-4">Add To Cart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="nav nav-pills 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>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-Specifications-tab" data-bs-toggle="pill" data-bs-target="#pills-Specifications" type="button" role="tab" aria-controls="pills-Specifications" aria-selected="false">Specifications</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">
            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 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            <br><br>
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </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 class="tab-pane fade" id="pills-Specifications" role="tabpanel" aria-labelledby="pills-Specifications-tab">
                <div class="row">
                    <div class="col-lg-6 specWraps pe-lg-0">
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Speaker Type</div>
                            <div class="specVal">Subwoofer</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Rated Input Power</div>
                            <div class="specVal">400W</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Speaker Cone Design</div>
                            <div class="specVal">Diamond-Array Pattern</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Terminals</div>
                            <div class="specVal">Silver-Plated Push Type</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Gasket Installation</div>
                            <div class="specVal">Two Sided</div>
                        </div>
                    </div>
                    <div class="col-lg-6 specWraps ps-lg-0">
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Peak Input Power</div>
                            <div class="specVal">1200W</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Speaker Size</div>
                            <div class="specVal">300mm</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Magnet Type</div>
                            <div class="specVal">Ferrit</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Dual Ventilation System</div>
                            <div class="specVal">Yes</div>
                        </div>
                        <div class="specification d-flex align-items-center">
                            <div class="specTitle">Installation Capabillity</div>
                            <div class="specVal">Sealed/ Ported</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="productBanners mt-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="bannerprd bg-white p-4">
                    <h3 class="bannerTitle h-100">
                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
                    </h3>
                    <a href="" class="bannerLink my-3 d-block">Learn about advanced Cycle Tracking</a>
                    <img src="{{ asset('assets/images/banner1.png') }}" alt="banner" class="bannerImg">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="bannerbg p-4  h-100">
                    <h3 class="bannerTitle  text-white">
                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
                    </h3>
                    <a href="" class="bannerLink my-3 d-block">Learn about advanced Cycle Tracking</a>
                    <img src="{{ asset('assets/images/banner2.png') }}" alt="banner" class="bannerImg">
                </div>
            </div>
        </div>
        <div class="row align-items-center my-5 speakerSec">
            <div class="col-md-6">
                <img src="{{ asset('assets/images/speaker.png') }}" alt="speaker">
            </div>
            <div class="col-md-6">
                <h3 class="bannerTitle">
                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
                </h3>
                <p class="lh-lg">
                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                </p>
                <a href="" class="bannerLink my-2">Learn about advanced Cycle Tracking</a>
            </div>
        </div>
    </div>
</section>
<section class="SpeakerBanner productBanners">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-8">
                <div class="spbnrWrap">
                    <h3 class="bannerTitle text-white">
                        Nemo enim ipsam volupt atem quia voluptas sit aspernatur aut odit aut
                    </h3>
                    <p class="lh-lg">
                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                    </p>
                    <a href="" class="bannerLink my-3 mt-5">Learn about advanced Cycle Tracking</a>
                </div>
            </div>
            <div class="col-lg-6 col-md-4">
                <img src="{{ asset('assets/images/speakerbanner.png') }}" alt="speaker" class="speakerimgright">
            </div>
        </div>
    </div>
</section>
<section class="productsWrap sectionSpac">
    <div class="container">
        <h3 class="sectionTitle mb-4"><span class="me-1">Recommended</span>Items and 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

@push('scripts')
<script>

    $(document).ready(function () {
        $('#addToCart').click(function (e) {
            e.preventDefault();

            let cartId = $(this).data('id');

            var product_id = $('#product_id').val();
            var qty = $('#qty').val();
            var price = $('#price').val();
            var product_name = $('#product_name').val();

        });
    });

</script>
@endpush