@extends('layouts.master')

@section('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"/>
    <link rel="stylesheet" href="{{ asset('css/Ecommerce.css') }}">
    <link rel="stylesheet" href="{{ asset('css/EcommerceResponsive.css') }}">
@endsection
@section('content')
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
               <div class="col-lg-12">
                 <div class="iq-card">
                     <div class="iq-card-body">
                        <div class="row">
                           <div class="col-md-6 iq-item-product-left">
                              <div class="iq-image-container">
                                 <div class="iq-product-cover">
                                    <img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid">
                                 </div>
                                 <div class="iq-additional_slider">
                                    <ul id="product-additional-slider" class="d-flex m-0 p-0">
                                       <li><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid"></li>
                                       <li><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid"></li>
                                       <li><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid"></li>
                                       <li><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid"></li>
                                       <li><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid"></li>
                                       <li><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid"></li>
                                       <li><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid"></li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <div class="col-md-6 iq-item-product-right">
                              <div class="product-additional-details">
                                 <h3 class="productpage_title">Curabitur Dolor Nunc consectetur adipiscing</h3>
                                 <p>consectetur adipiscing</p>
                                 <div class="ratting">
                                    <ul class="ratting-item d-flex p-0 m-0">
                                       <li class="full"><i class="ri-star-fill"></i></li>
                                       <li class="full"><i class="ri-star-fill"></i></li>
                                       <li class="full"><i class="ri-star-fill"></i></li>
                                       <li class="half"><i class="ri-star-half-line"></i></li>
                                       <li class="blank"><i class="ri-star-line"></i></li>
                                    </ul>
                                 </div>
                                  <div class="product-descriptio">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula.</p>
                                 </div>
                                 <div class="product-price">
                                    <div class="regular-price"><b> $100.00</b> <span class="offer-price ml-2">$150.00</span></div>
                                 </div>
                                 <div class="shipping">
                                    <p class="mb-0">Shipping Free: <span>$50</span></p>
                                 </div>
                                 <div class="stock">
                                    <p>Stock: <span>Available</span></p>
                                 </div>
                                 <div class="additional-product-action d-flex align-items-center">
                                    <div class="inline-flex btn-increment">
                                       <button type="button" class="btn-less"><i class="ri-subtract-fill"></i></button>
                                       <input type="number" min="1" max="10" value="1" class="increment">
                                       <button type="button" class="btn-plus"><i class="ri-add-fill"></i></button>
                                    </div>
                                    <div class="product-action ml-2">
                                       <div class="add-to-cart"><a href="#"> Add to Cart </a></div>
                                       <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-12 product-description-details">
                              <div class="description-tabs">
                                 <ul class="nav nav-tabs justify-content-center" id="myTab-2" role="tablist">
                                    <li class="nav-item">
                                       <a class="nav-link active" id="description-tab-justify" data-toggle="tab" href="#description" role="tab" aria-controls="home" aria-selected="true">Description</a>
                                    </li>
                                    <li class="nav-item">
                                       <a class="nav-link" id="specifications-tab-justify" data-toggle="tab" href="#specifications" role="tab" aria-controls="profile" aria-selected="false">Specifications</a>
                                    </li>
                                    <li class="nav-item">
                                       <a class="nav-link" id="review-tab-justify" data-toggle="tab" href="#review" role="tab" aria-controls="contact" aria-selected="false">Review</a>
                                    </li>
                                 </ul>
                                 <div class="tab-content" id="myTabContent-3">
                                    <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab-justify">
                                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra nibh et urna tempus, id feugiat sapien iaculis. Morbi aliquam et nisl ut varius. Vivamus fringilla, nisl ac lacinia fermentum, nisl felis facilisis lectus, id condimentum turpis quam ac ipsum. Vivamus purus nisi, condimentum eget felis vel, finibus interdum odio. Pellentesque lacinia aliquam ipsum. Donec euismod ex in sodales faucibus. Proin eget lacus vitae eros vestibulum vehicula. Mauris tortor massa, fringilla ut metus quis, malesuada semper diam. Phasellus et iaculis ex, vitae maximus odio.</p>
                                    </div>
                                    <div class="tab-pane fade" id="specifications" role="tabpanel" aria-labelledby="specifications-tab-justify">
                                       <p>Mauris laoreet tempor orci, quis rhoncus urna porttitor ut. Quisque volutpat ultrices elit, ut scelerisque lacus mattis id. Quisque non euismod leo. Aenean turpis orci, dictum id luctus ac, pretium pulvinar enim. Phasellus quam eros, porttitor sed iaculis at, lacinia at augue. Aenean vel lacinia eros. Curabitur ac feugiat libero. Praesent malesuada mauris arcu, sed mollis leo efficitur pretium. Nunc ornare tempor nulla.</p>
                                    </div>
                                    <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab-justify">
                                       <p>In in mauris a sem ullamcorper maximus. In facilisis sapien vel consequat laoreet. Ut convallis elit vitae augue interdum dapibus. Vivamus nec urna quis ex congue consectetur. Sed egestas dapibus neque eu finibus. Fusce mollis congue augue, commodo ornare ante hendrerit vitae. Nunc luctus ac nunc quis facilisis. Nullam vitae gravida elit. Pellentesque maximus auctor gravida. Nulla imperdiet odio neque, non porta lacus feugiat sed. Curabitur eu lectus ut lectus convallis mattis sit amet sit amet lectus. Curabitur elit lorem, commodo a neque ac, feugiat tempor felis.</p>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-12 mt-5 related-product">
                              <div class="related-heading text-center mb-5">
                                 <h2>Related Products</h2>
                              </div>
                              <div class="related-product-block">
                                 <ul id="related-slider" class="product_list row p-0">
                                    <li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                          </div>
                                          <div class="product-description">
                                             <h4>Lorem ipsum dolor sit</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="half"><i class="ri-star-half-line"></i></li>
                                                   <li class="blank"><i class="ri-star-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $100.00</b> <span class="offer-price ml-2">$150.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li>
                                    <li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                             <a href="javascript:void();" class="new">New</a>
                                          </div>
                                          <div class="product-description">
                                             <h4>consectetur adipiscing elit</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="blank"><i class="ri-star-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $99.00</b> <span class="offer-price ml-2">$50.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li>
                                    <li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                          </div>
                                          <div class="product-description">
                                             <h4>Sed dictum orci vel</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="half"><i class="ri-star-half-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $199.00</b> <span class="offer-price ml-2">$15.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li><li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                          </div>
                                          <div class="product-description">
                                             <h4>neque venenatis</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="half"><i class="ri-star-half-line"></i></li>
                                                   <li class="blank"><i class="ri-star-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $1000.00</b> <span class="offer-price ml-2">$500.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li><li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                             <a href="javascript:void();" class="new">New</a>
                                          </div>
                                          <div class="product-description">
                                             <h4>Proin at diam sit amet</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="blank"><i class="ri-star-line"></i></li>
                                                   <li class="blank"><i class="ri-star-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $150.00</b> <span class="offer-price ml-2">$50.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li><li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                          </div>
                                          <div class="product-description">
                                             <h4>augue rhoncus ornare</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="half"><i class="ri-star-half-line"></i></li>
                                                   <li class="blank"><i class="ri-star-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $599.00</b> <span class="offer-price ml-2">$99.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li><li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                          </div>
                                          <div class="product-description">
                                             <h4>Nulla venenatis mi sed</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $199.00</b> <span class="offer-price ml-2">$50.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li><li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                          </div>
                                          <div class="product-description">
                                             <h4>Etiam interdum nisi et</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="half"><i class="ri-star-half-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $100.00</b> <span class="offer-price ml-2">$150.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li><li class="product_item col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                       <div class="product-miniature">
                                          <div class="thumbnail-container">
                                             <a href="#"><img src="{{asset('assets/images/index.jpeg')}}" alt="product-image" class="img-fluid" /> </a>
                                          </div>
                                          <div class="product-description">
                                             <h4>dignissim orci quis</h4>
                                             <p class="mb-0">Proin sed risus mattis</p>
                                             <div class="ratting">
                                                <ul class="ratting-item d-flex p-0 m-0">
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="full"><i class="ri-star-fill"></i></li>
                                                   <li class="half"><i class="ri-star-half-line"></i></li>
                                                   <li class="blank"><i class="ri-star-line"></i></li>
                                                </ul>
                                             </div>
                                             <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                <div class="product-action">
                                                   <div class="add-to-cart"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart"> <i class="ri-shopping-cart-2-line"></i> </a></div>
                                                   <div class="wishlist"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wishlist"> <i class="ri-heart-line"></i> </a></div>
                                                </div>
                                                <div class="product-price">
                                                   <div class="regular-price"><b> $100.00</b> <span class="offer-price ml-2">$150.00</span></div>
                                                </div>
                                          </div>
                                       </div>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
    </div>
@endsection
