@extends('frontend.layouts.app')

@section('title', 'Veterinary Surgical Instruments - ' . app_name())

@section('content')






    <!-- Slider One / Normal Two Column Slider -->
    <section class="pt--70">
        <div class="container">
            <div class="block-title">
                <h2>NEW PRODUCTS</h2>
            </div>
            <div class="petmark-slick-slider border normal-two-column-slider"
                 data-slick-setting='{
                "autoplaySpeed": 3000,
                "slidesToShow": 2,
                "arrows": true
            }'
                 data-slick-responsive='[
                {"breakpoint":991, "settings": {"slidesToShow": 1} },
                {"breakpoint":575, "settings": {"slidesToShow": 1} }
            ]'>


                @foreach($data['new_products'] as $product)
                    {!! \App\Models\Product::productBlock($product, 'large') !!}
                @endforeach


            </div>
        </div>
    </section>


    @include('includes.partials.main-categories')

    <!-- Promotion Block 1 -->
    <section class="pt--50 space-db--30">
        <div class="container">
            <div class="row">
                <div class="col-md-6">{!! \App\Models\Banner::showBanner(2, 'promo-image overflow-image') !!}</div>
                <div class="col-md-6">{!! \App\Models\Banner::showBanner(8, 'promo-image overflow-image') !!}</div>
            </div>
        </div>
    </section>
    <!-- Slider Block Two -->
    <div class="pt--80">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="block-title">
                        <h2>HOT PRODUCTS</h2>
                    </div>
                    <!-- Two row Three Column Slider -->
                    <div class="petmark-slick-slider border grid-column-slider" data-slick-setting='{
                            "autoplay": true,
                            "autoplaySpeed": 3000,
                            "slidesToShow": 3,
                            "rows" :2,
                            "arrows": true
                        }'
                         data-slick-responsive='[
                            {"breakpoint":991, "settings": {"slidesToShow": 3} },
                            {"breakpoint":768, "settings": {"slidesToShow": 2} },
                            {"breakpoint":480, "settings": {"slidesToShow": 1,"rows" :1} }
                        ]'>


                        @foreach($data['hot_products'] as $product)
                            {!! \App\Models\Product::productBlock($product) !!}
                        @endforeach


                    </div>
                </div>
                <div class="col-lg-6 pt--50 pt-lg-0">
                    <div class="block-title">
                        <h2>FEATURED PRODUCTS</h2>
                    </div>
                    <!--Two Row One Column Slider -->
                    <div class="petmark-slick-slider border one-column-slider two-row" data-slick-setting='{
                            "autoplaySpeed": 3000,
                            "slidesToShow": 1,
                            "rows" :2,
                            "arrows": true
                        }'
                         data-slick-responsive='[
                            {"breakpoint":991, "settings": {"slidesToShow": 1} },
                            {"breakpoint":575, "settings": {"slidesToShow": 1} }
                        ]'>

                        @foreach($data['featured_products'] as $product)
                            {!! \App\Models\Product::productBlock($product, 'large') !!}
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Promotion Block 2 -->
    <section class="pt--50 space-db--30">
        <h2 class="d-none">Promotion Block
        </h2>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-4">
                    {!! \App\Models\Banner::showBanner(3, 'promo-image overflow-image') !!}
                </div>
                <div class="col-lg-4 col-md-4">
                    {!! \App\Models\Banner::showBanner(5, 'promo-image overflow-image  promo-small') !!}
                    {!! \App\Models\Banner::showBanner(6, 'promo-image overflow-image  promo-small') !!}
                </div>
                <div class="col-lg-4 col-md-4">
                    {!! \App\Models\Banner::showBanner(4, 'promo-image overflow-image') !!}
                </div>
            </div>
        </div>
    </section>




    <!-- SLider Block 3 / Tab -->

    @include('includes.partials.featured-categories')


@endsection