@extends("front.layout.master")
@section("body")
<link href="{{ url('giga/css/homepage-slider.css') }}" rel="stylesheet" type="text/css" />

<!-- <div class="no-bottom no-top">
    <div id="top">
    </div>
    <section aria-label="section" id="categories_art" class="section_mt">
        <div class="featured-categories">
                    <div class="container"> -->



                        <div class="full-container"> 
    <!--start slider section-->
      <div class="mobile">
        @isset($sliders)
          <div class="container-fluid owlCarousel_desktop">
            <div class='owl-carousel' id='owlCarousel'>
                @foreach (json_decode($sliders) as $slider)

                  <div class='slide'>
                    <a href="{{ url($slider->linkedTo) }}">
                            @if(file_exists(public_path().'/images/slider/'.$slider->image_link))
                             
                               <img src="{{ url($slider->image) }}" alt="Banner Image">
                            @else
                             
                               <img src="{{ url($slider->image_link) }}" alt="Banner Image">
                            @endif
                           
                    </a>

                   <!--  <div class='slide-content'>
                      <div class='overlay'></div>

                        <div class="container">
                          <div class="row align-items-center justify-content-center">

          
                            <div class="col-md-8 mt-lg-5">
                              <div data-aos="fade-up" data-aos-delay="100">
                                <a href="#" class="btn smoothscroll smoothscroll02 mr-2 mb-2">View Artworks</a>
                              </div>
                            </div>
                            <div class="col-md-4 mt-lg-5 text-center aos-init aos-animate" data-aos="fade">
                              <form class="lead-form ">
                                  <h2 class="form-title-section mb-4">Contact Us <br /> for Business Pricing</h2>
                                  <div class="form-input-section">
                                    <input class="form-control" type="text" name="firstname" placeholder="First Name" required="required" />
                                    <input class="form-control" type="text" name="lastname" placeholder="Last Name" required="required" />
                                    <input class="form-control" type="text" name="companyname" placeholder="Company Name" required="required" />
                                    <input class="form-control" type="email" name="email" placeholder="Email ID" required="required" />
                                    <input class="form-control" type="tel" maxlength="10" name="phone" placeholder="Phone No." required="required" />
                                    <button class="btn form-control-btn">Submit</button>
                                  </div>
                              </form>
                            </div>  
            
                          </div>
                        </div>

                      </div> -->




                  </div>
                  <!--end slide div-->

                   
                @endforeach
            </div>
          </div>
        @endisset 
      </div>
    <!--end slider section-->

  <!--   <div class="form-artiner-b2b">
      <div class="container">
        <div class="row align-items-center justify-content-center">

          
          <div class="col-md-8 mt-lg-5">
            
          </div>
          <div class="col-md-4 mt-lg-5 text-center aos-init aos-animate" data-aos="fade">
            <form class="lead-form ">
                <h2 class="form-title-section mb-4">Contact Us <br /> for Business Pricing</h2>
                <div class="form-input-section">
                  <input class="form-control" type="text" name="firstname" placeholder="First Name" required="required" />
                  <input class="form-control" type="text" name="lastname" placeholder="Last Name" required="required" />
                  <input class="form-control" type="text" name="companyname" placeholder="Company Name" required="required" />
                  <input class="form-control" type="email" name="email" placeholder="Email ID" required="required" />
                  <input class="form-control" type="tel" maxlength="10" name="phone" placeholder="Phone No." required="required" />
                  <button class="btn form-control-btn">Submit</button>
                </div>
            </form>
          </div>  
            
        </div>
      </div>
    </div> -->
                      <!--  <div class="breadcrumb">
        <div class="container-fluid">
          <div class="breadcrumb-inner">
            <ul class="bread-crumbs-pdp list-inline list-unstyled d-flex">
              <li><a href="{{ url('/') }}">{{ __('staticwords.Home') }}</a></li>
               
               @php $bcat_name = App\BusinessCategory::where('id',$searchId)->first()->title; @endphp
               @if(!empty($bcat_name))
              <li class='active'>
                {{ $bcat_name }}
             </li>
             @endif
            </ul>
          </div>
        </div>
      </div> -->
                       
                        @if(count($products)>0)
                        @php
                        $page="b2b";
                        $heading=App\BusinessCategory::where('id',$searchId)->first()->title;;
                        @endphp
                        <x-product-list heading="{{ 'Artworks' }}" :allproducts=$products :productCount=count($products) :page=$page :paginate=1 :sidebar=0  />
                        @else
                        <h5>There is no artwork available now</h5>
                        @endif
                    <!-- </div> -->
               <!--  </section>
            </div>
        </div>
    </section>
  </div> -->
  </div>
 
<!-- content close -->
@endsection
@section('script')
<!-- Javascript Files
================================================== -->

<script src="{{url('giga/js/jquery.magnific-popup.min.js')}}"></script>
<script src="{{url('giga/js/jquery.isotope.min.js')}}"></script>
@endsection

@section('script')
<!-- Javascript Files
================================================== -->

<script src="{{url('giga/js/jquery.magnific-popup.min.js')}}"></script>
<script src="{{url('giga/js/jquery.isotope.min.js')}}"></script>
<script>
    $(document).ready(() => {
        'use strict';

        var owl = $('.owl-carousel'),
            item,
            itemsBgArray = [], // to store items background-image
            itemBGImg;

        owl.owlCarousel({
            items: 1,
            smartSpeed: 1000,
            autoplay: true,
            autoplayTimeout: 8000,
            autoplaySpeed: 1000,
            loop: true,
            nav: true,
            autoplayHoverPause:true,
            navText: ["<i class='icon fa fa-arrow-left'></i>", "<i class='icon fa fa-arrow-right'></i>"],
           
        });

        $('.active').addClass('anim');

        var owlItem = $('.owl-item'),
            owlLen = owlItem.length;
        /* --------------------------------
          * store items bg images into array
        --------------------------------- */
        $.each(owlItem, function(i, e) {
            itemBGImg = $(e).find('.owl-item-bg').attr('src');
            itemsBgArray.push(itemBGImg);
        });
    });
</script>

@endsection