@extends('frontend.layouts.app')

@section('meta_title'){{ $shop->meta_title }}@stop

@section('meta_description'){{ $shop->meta_description }}@stop

@section('meta')
    <style type="text/css">
        .discount {
            background: #50250d;
            width: 35px;
            height: 35px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 100%;
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
            line-height: 11px;
            padding: 7px 5px;
            text-align: center;
        }
    </style>
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $shop->meta_title }}">
    <meta itemprop="description" content="{{ $shop->meta_description }}">
    <meta itemprop="image" content="{{ my_asset($shop->logo) }}">

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="website">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $shop->meta_title }}">
    <meta name="twitter:description" content="{{ $shop->meta_description }}">
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ my_asset($shop->meta_img) }}">

    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $shop->meta_title }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="{{ route('shop.visit', $shop->slug) }}"/>
    <meta property="og:image" content="{{ my_asset($shop->logo) }}"/>
    <meta property="og:description" content="{{ $shop->meta_description }}"/>
    <meta property="og:site_name" content="{{ $shop->name }}"/>
    <style type="text/css">

    </style>
@endsection

@section('content')
    <!-- <section>
        <img loading="lazy"  src="https://via.placeholder.com/2000x300.jpg" alt="" class="img-fluid">
    </section> -->

    @php
        $total = 0;
        $rating = 0;
        foreach ($shop->user->products as $key => $seller_product) {
            $total += $seller_product->reviews->count();
            $rating += $seller_product->reviews->sum('rating');
        }
    $featuredProduct = \App\Product::where('seller_id', $shop->user->id)->where('published', 1)->where('featured', 1)->orderByRaw('RAND()')->get();
    @endphp

    <section class="gry-bg pt-4 ">
        <div class="container">
            <div class="row align-items-baseline">
                <div class="col-md-12">
                      <img style="max-width: 100%;"
                            class="lazyload"
                            src="{{ asset('frontend/images/Banner-05.jpg') }}"
                            data-src="{{ asset('frontend/images/Banner-05.jpg') }}"
                            alt="{{ $shop->name }}"
                        >
                </div>
                <!-- <div class="col-md-6">
                    <ul class="text-md-right mt-4 mt-md-0 social-nav model-2">
                        @if ($shop->facebook != null)
                            <li>
                                <a href="{{ $shop->facebook }}" class="facebook social_a" target="_blank"
                                   data-toggle="tooltip" data-original-title="Facebook">
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </li>
                        @endif
                        @if ($shop->twitter != null)
                            <li>
                                <a href="{{ $shop->twitter }}" class="twitter social_a" target="_blank"
                                   data-toggle="tooltip" data-original-title="Twitter">
                                    <i class="fa fa-twitter"></i>
                                </a>
                            </li>
                        @endif
                        @if ($shop->google != null)
                            <li>
                                <a href="{{ $shop->google }}" class="google-plus social_a" target="_blank"
                                   data-toggle="tooltip" data-original-title="Google">
                                    <i class="fa fa-google-plus"></i>
                                </a>
                            </li>
                        @endif
                        @if ($shop->youtube != null)
                            <li>
                                <a href="{{ $shop->youtube }}" class="youtube social_a" target="_blank"
                                   data-toggle="tooltip" data-original-title="Youtube">
                                    <i class="fa fa-youtube"></i>
                                </a>
                            </li>
                        @endif
                    </ul>
                </div> -->
            </div>

            <div class="products_list mt-5">
                <div class="row align-items-baseline">
                    <div class="col-md-6">
                        <h3 class="mb-0">Khadi Mask</h3>
                        <p>Khadi face mask come with three layer protection and trendy designs.</p>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="" class="btn-sm btn-dark btn">View All</a>
                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/km__1.jpg') }}"
                            data-src="{{ asset('frontend/images/km__1.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹35 / peice</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Face Masks for Kids</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/km_2.jpg') }}"
                            data-src="{{ asset('frontend/images/km_2.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹100 / peice</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Silk Mask (Non Printed)</a>
                                </h2>
                             </div>

                        </div>

                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/km_3.jpg') }}"
                            data-src="{{ asset('frontend/images/km_3.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹35 / peice</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Mask</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/km_4.jpg') }}"
                            data-src="{{ asset('frontend/images/km_4.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹100 / peice</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Silk Mask (Printed)</a>
                                </h2>
                             </div>

                        </div>

                    </div>



                </div>

            </div>

            <div class="products_list mt-5 mb-5">
                <div class="row align-items-baseline">
                    <div class="col-md-6">
                        <h3 class="mb-0">National Flag</h3>
                        <p>Celebrate the patriotic fervour with the genuine Khadi Cotton and Silk National Flag.</p>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="" class="btn-sm btn-dark btn">View All</a>
                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/nf_1.jpg') }}"
                            data-src="{{ asset('frontend/images/nf_1.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹9850 / flag</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">National Flag - Khadi Cotton (12 x 8 feet)</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/nf_2.jpg') }}"
                            data-src="{{ asset('frontend/images/nf_2.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹2333 / flag</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">National Flag - Khadi Cotton (4 1/2 x 3 feet)</a>
                                </h2>
                             </div>

                        </div>

                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/nf_3.jpg') }}"
                            data-src="{{ asset('frontend/images/nf_3.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹7550 / flag</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">National Flag - Khadi Cotton (9 x 6 feet)</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                     <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/nf_1.jpg') }}"
                            data-src="{{ asset('frontend/images/nf_1.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹9850 / flag</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">National Flag - Khadi Cotton (12 x 8 feet)</a>
                                </h2>
                             </div>

                        </div>

                    </div>



                </div>

            </div>

            <div class="products_list mt-5 mb-5">
                <div class="row align-items-baseline">
                    <div class="col-md-6">
                        <h3 class="mb-0">Khadi Cotton Shirting Fabric</h3>
                        <p>Khadi for India, Khadi for all - with this vision, Khadi India brings to you a range of handcrafted cotton fabric in attractive solid colors.</p>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="" class="btn-sm btn-dark btn">View All</a>
                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/fb_1.jpg') }}"
                            data-src="{{ asset('frontend/images/fb_1.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹268 / meter</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Shirting Fabric</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/fb_2.jpg') }}"
                            data-src="{{ asset('frontend/images/fb_2.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹254 / meter</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Shirting Fabric</a>
                                </h2>
                             </div>

                        </div>

                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/fb_3.jpg') }}"
                            data-src="{{ asset('frontend/images/fb_3.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹68 / meter</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Shirting Fabric</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                     <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/fb_1.jpg') }}"
                            data-src="{{ asset('frontend/images/fb_1.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹268 / meter</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Shirting Fabric</a>
                                </h2>
                             </div>

                        </div>

                    </div>



                </div>

            </div>

             <div class="products_list mt-5 mb-5">
                <div class="row align-items-baseline">
                    <div class="col-md-6">
                        <h3 class="mb-0">Khadi Cotton Baby Wear</h3>
                        <p>Let your infants snuggle into the comfort of natural, eco-friendly Khadi, the national fabric of India.</p>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="" class="btn-sm btn-dark btn">View All</a>
                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/baby_1.jpg') }}"
                            data-src="{{ asset('frontend/images/baby_1.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹269 / piece</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Frock with Bloomer</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/baby_2.jpg') }}"
                            data-src="{{ asset('frontend/images/baby_2.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹369 / piece</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Jhabla with Bloomer</a>
                                </h2>
                             </div>

                        </div>

                    </div>

                    <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/baby_3.jpg') }}"
                            data-src="{{ asset('frontend/images/baby_3.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹399 / meter</span>
                                </div>

                                <h2 class="product-title p-0">
                                    <a href="" class=" text-truncate">Khadi Cotton Frock with Bloomer</a>
                                </h2>
                             </div>

                        </div>

                    </div>
                     <div class="col-md-3">
                        <div class="product-box-2 bg-white alt-box my-md-2">
                            <a href="#" class="d-block product-image h-100 text-center" tabindex="0"> <img class="img-fit mx-auto lazyloaded"  src="{{ asset('frontend/images/products/baby_1.jpg') }}"
                            data-src="{{ asset('frontend/images/baby_1.jpg') }}" alt=""></a>
                            <div class="p-md-3 p-2">
                                <div class="price-box">
                                    <span class="product-price strong-600">₹269 / piece</span>
                                </div>
                                <h2 class="product-title p-0">
                                    <a href="" class="text-truncate">Khadi Cotton Frock with Bloomer</a>
                                </h2>
                             </div>
                        </div>

                    </div>



                </div>

            </div>

        </div>
    </section>




    <style type="text/css">
        .gry-bg {
            min-height: 25vh;
        }
    </style>
@endsection