@include('site.header')

<!-- breadcrumb start -->
<div class="breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="page-title">
                    <h2>{{$page_title??''}}</h2>
                </div>
            </div>
            <div class="col-sm-6">
                <nav aria-label="breadcrumb" class="theme-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$page_title??''}}</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-1 col-sm-2 col-xs-12">
                    <div class="row">
                        <div class="col-12 p-0">
                            <div class="slider-right-nav">
                                <div><img src="../assets/images/pro3/1.jpg" alt=""
                                        class="img-fluid blur-up lazyload"></div>
                                <div><img src="../assets/images/pro3/2.jpg" alt=""
                                        class="img-fluid blur-up lazyload"></div>
                                <div><img src="../assets/images/pro3/27.jpg" alt=""
                                        class="img-fluid blur-up lazyload"></div>
                                <div><img src="../assets/images/pro3/27.jpg" alt=""
                                        class="img-fluid blur-up lazyload"></div>
                            </div>
                        </div>
                    </div>
                </div> --}}
                <div class="col-lg-4 col-sm-10 col-xs-12 order-up">
                    <div class="product-right-slick">
                        <div>
                            @if($product->image!=null)
                            <img src="{{asset('uploads/products/'.$product->image)}}" alt="" class="img-fluid blur-up lazyload image_zoom_cls-0">
                            @else
                            <img src="{{asset('uploads/blank_image.png')}}" alt="">
                            @endif
                        </div>
                        {{-- <div><img src="../assets/images/pro3/2.jpg" alt=""
                                class="img-fluid blur-up lazyload image_zoom_cls-1"></div>
                        <div><img src="../assets/images/pro3/27.jpg" alt=""
                                class="img-fluid blur-up lazyload image_zoom_cls-2"></div>
                        <div><img src="../assets/images/pro3/27.jpg" alt=""
                                class="img-fluid blur-up lazyload image_zoom_cls-3"></div> --}}
                    </div>
                </div>
                <div class="col-lg-4 rtl-text">
                    <div class="product-right">

                        <h2>{{$product->name}}</h2>
                        <p>{!! $product->description !!}</p>
                        {{-- <div class="rating-section">
                            <div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
                                    class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                            </div>
                            <h6>120 ratings</h6>
                        </div>
                        <div class="label-section">
                            <span class="badge badge-grey-color">#1 Best seller</span>
                            <span class="label-text">in fashion</span>
                        </div> --}}
                        <h3 class="price-detail">Rs {{$product->price}}
                            {{-- <del>$459.00</del>
                            <span>55% off</span> --}}
                        </h3>
                        {{-- <ul class="color-variant">
                            <li class="bg-light0 active"></li>
                            <li class="bg-light1"></li>
                            <li class="bg-light2"></li>
                        </ul> --}}
                        {{-- <div id="selectSize" class="addeffect-section product-description border-product">
                            <h6 class="product-title size-text">select size <span><a href="" data-bs-toggle="modal"
                                        data-bs-target="#sizemodal">size
                                        chart</a></span></h6>
                            <div class="modal fade" id="sizemodal" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Sheer
                                                Straight Kurta</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body"><img src="../assets/images/size-chart.jpg" alt=""
                                                class="img-fluid blur-up lazyload"></div>
                                    </div>
                                </div>
                            </div>
                            <h6 class="error-message">please select size</h6>
                            <div class="size-box">
                                <ul>
                                    <li><a href="javascript:void(0)">s</a></li>
                                    <li><a href="javascript:void(0)">m</a></li>
                                    <li><a href="javascript:void(0)">l</a></li>
                                    <li><a href="javascript:void(0)">xl</a></li>
                                </ul>
                            </div>
                            <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">
                            <button class="btn btn-primary" onclick="sendEnquiry('{{$product->id}}','{{$product->name}}')">Send Enquiry</button>
                        </div>
                        {{-- <div class="product-count">
                            <ul>
                                <li>
                                    <img src="../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>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            @if($company_profile)
                            <span>Seller Details</span>
                            <p><a href="/seller/{{$company_profile->user_id}}"><strong>{{$company_profile->company_name}}</strong></a></p>
                            <p>{{$company_profile->city}}, {{$company_profile->state}}</p>
                            @endif
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="bestprice">
                                <p><strong>Looking for Best Price</strong></p>
                                <form action="/saveLead" method="post">
                                @csrf
                                <div class="form-group">
                                    <label for="">Product name</label>
                                    <input type="text" name="product_name" id="product_name" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="">Your name</label>
                                    <input type="text" name="buyer_name" id="buyer_name" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="">City</label>
                                    <input type="text" name="city" id="city" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="">Phone number</label>
                                    <input type="text" name="phone" id="phone" class="form-control">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Section ends -->


<!-- product section start -->
<section class="section-b-space ratio_asos">
    <div class="container">
        <div class="row">
            <div class="col-12 product-related">
                <h2>related products</h2>
            </div>
        </div>
        <div class="row search-product">
            @foreach($related_products as $row)
            <div class="col-xl-2 col-md-4 col-6">
                <div class="product-box card">
                    <div class="img-wrapper">
                        <div class="front">
                            <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                @if($row->image!=null)
                                <img src="{{asset('uploads/products/'.$row->image)}}" class="img-fluid blur-up lazyload" alt="">
                                @else
                                <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid blur-up lazyload" alt="">
                                @endif
                            </a>
                        </div>
                        {{-- <div class="cart-info cart-wrap">
                            <button data-bs-toggle="modal" data-bs-target="#addtocart" title="Add to cart"><i
                                    class="ti-shopping-cart"></i></button> <a href="javascript:void(0)"
                                title="Add to Wishlist"><i class="ti-heart" aria-hidden="true"></i></a> <a
                                href="#" data-bs-toggle="modal" data-bs-target="#quick-view"
                                title="Quick View"><i class="ti-search" aria-hidden="true"></i></a>
                            <a href="compare.html" title="Compare"><i class="ti-reload"
                                    aria-hidden="true"></i></a>
                        </div> --}}
                    </div>
                    <div class="product-detail">
                        {{-- <div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                        </div> --}}
                        <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                            <h6>{{$row->name}}</h6>
                        </a>
                        <h4>Rs {{$row->price??''}}</h4>
                        <button class="btn btn-primary" onclick="sendEnquiry('{{$row->id}}','{{$row->name}}')">Send Enquiry</button>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
<!-- product section end -->

@include('site.footer')