@extends('web.layout.master')

@section('content')

<style>
    .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="{{ asset('assets/web') }}/css/slick-theme.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />


    <div class="container">

        <div class="row mt-5 spacer-top">
@if(empty($ismobile))
            <div class="col-md-6 d-none d-md-block d-lg-block">
                <div id="carouselIndicators" class="carousel slide" data-interval="3000" data-ride="carousel" data-cycle="true" data-bs-ride="true">
                    <div class="carousel-indicators">
                        <button aria-labelledby="Slide 1" role="button" type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button aria-labelledby="Slide 2" role="button" type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button aria-labelledby="Slide 3" role="button" type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                    </div>



                    <div class="carousel-inner" style="height: 360px; object-fit: cover;">
                        @if(!empty($home_slider))
                            @foreach ($home_slider as $key => $h)
                                <div class="carousel-item @if($key == 0) active @endif">
                                    <img src="{{ url('/').'/uploads/'.$h->slider_image }}" class="d-block w-100" alt="...">
                                </div>
                            @endforeach
                        @endif

                        {{-- <div class="carousel-item ">
                        <img src="{{ asset('assets/web') }}/images/{{ $slider[1] }}.jpg" class="d-block w-100" alt="...">
                        </div> --}}
                        {{--  <div class="carousel-item">
                            <img src="{{ asset('assets/web') }}/images/{{ $slider[2] }}.jpg" class="d-block w-100" alt="...">
                            </div>  --}}


                    </div>
                    <button aria-labelledby="..." class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button aria-labelledby="..." class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
@endif
            <div class="col-md-6">
                <home-model-search></home-model-search>
                {{-- <h1 class="fw-bold d-none d-md-block d-lg-block mb-3 text-uppercase h2 text-center">If its broke, <span class="highlight-label text-secondary"
                    style="">Fix it!<sup>®</sup></span></h1> --}}
            </div>
        </div>


    </div>

   

    <div class="container p-4">
        <div class="row mt-4 spacer mb-3">
            <div class="col-md-12">
<h2 class="fw-bold d-none d-lg-block">Shop By Category</h2>
               <h4 class="fw-bold d-lg-none">Shop By Category</h4>
            </div>

        </div>
<div class="row mt-4 spacer" style="border: 1px solid #cccccc33;border-radius: 15px;">
          



           @if(!empty($home_categories))
               @foreach ($home_categories as $h)
                {{-- <div class="col-md-2 col-6 p-4 spacer d-lg-none">

                       <a href="{{ (!empty($h->URL_Text) ? url($h->URL_Text.'-s/'.$h->CatID.'.htm') : '') }}" class="link-color" aria-label="">
                           <div class="category-images">
                               @php
                               $category_image = "https://s3.us-central-1.wasabisys.com/partswarehouse/photos/categories/".$h->CatID."-T.jpg";

                               @endphp
                               <img alt="..." src="{{ $category_image }}"  class="imageclass">
                           </div>

                           <p class="text-center mt-4 spacer h5"><b>{{ ($h->Name=="Vaccum")?"Vacuum":$h->Name }}</b></p>
                       </a>
                   </div> --}}
               @endforeach
            @endif

           
            @php
                 $categorys = ['Kitchen'=>'Kitchen-Parts-and-Accessories-s/15881.htm','Laundry'=>'Laundry-Parts-and-Accessories-s/15882.htm','Lawn & Garden' => 'Yard-Parts-and-Accessories-s/15879.htm','RV'=>'RV-Parts-and-Accessories-s/452.htm','Tool'=>'Tool-Parts-and-Accessories-s/15878.htm','Vacuum'=>'Vacuum-Parts-and-Accessories-s/15880.htm','Pool'=>'Pool-and-Spa-Parts-and-Accessories-s/9292.htm','Sewing'=>'Sewing-s/552.htm','HVAC'=>'HVAC-s/1062357.htm'];
                $colors = ['#dbeff6','#eee5f3','#f9e3d9','#f6e0ec','#dcf6e6','#d8e9f9','#D5ECEB','#E0E1F8','#F6EFC8'];
            @endphp
            {{--  Mobile Category Slider  --}}
            @php $cc = 1; @endphp
            @foreach ($categorys as $ck => $c)
                <div class="col-md-2 col-4 mt-3 d-lg-none">
                    <div style="background: {{ $colors[$cc-1] }};border-radius: 10px;margin: auto;">
                        <a href="{{ url($c) }}" class="link-color" aria-label="">
                            <div class="category-images mb-0" style="height: 100px;">
                                @if($cc == 9)
                                <img alt="..." src="{{ asset('assets/web') }}/images/category-m9.png"  class="imageclass" style="width: 70px;">
                                @else
                                <img alt="..." src="{{ asset('assets/web') }}/images/category-m-{{ $cc }}.png"  class="imageclass" style="width: 70px;">
                                @endif
                            </div>
                        </a>
                    </div>
                    <p class="text-center mt-2 h6" style="font-size: 14px;">{{ $ck }}</p>
                </div>
                @php $cc++; @endphp
            @endforeach


           <div class="d-none d-lg-block">
                    <div class="swiper mySwiper" style="display: none" data-swiper-autoplay="1000">


               @if(!empty($home_categories))
                   @foreach ($home_categories as $h)
                       <div class="col-md-2 col-6 p-4 spacer swiper-slide">

                           <a href="{{ (!empty($h->URL_Text) ? url($h->URL_Text.'-s/'.$h->CatID.'.htm') : '') }}" class="link-color" aria-label="">
                               <div class="category-images">
                                   @php
                                   $category_image = "https://s3.us-central-1.wasabisys.com/partswarehouse/photos/categories/".$h->CatID."-T.jpg";
                                   // $category_image = asset('assets/web').'/images/'.$h->category_image;
                                   //if(strpos($h->category_image, "wasabisys") !== false){
                                   //    $category_image = $h->category_image;
                                   //}
                               @endphp
                                   <img alt="..." src="{{ $category_image }}"  class="imageclass">
                               </div>

                               <p class="text-center mt-4 spacer h5"><b>{{ ($h->Name=="Vaccum")?"Vacuum":$h->Name }}</b></p>
                           </a>
                       </div>
                   @endforeach
               @endif


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




    <div style="background-color:#f1f1f1;" class="">

        <div class="container p-4">
         <div class="row">
               <div class="col-md-10 mt-4 col-9">
                   <h2 class="fw-bold mb-0 d-none d-lg-block">Shop By Manufacturer</h2>
                   <h4 class="fw-bold mb-0 d-lg-none">Shop By Manufacturer</h4>
               </div>
               <div style="text-align: end;" class="col-md-2 mt-4 col-3" >
                   {{-- <a href="{{ route('brands') }}" class="btn border-0" aria-label=""><img src="{{ asset('assets/web') }}/images/see all_brands.png" class="disabled" alt="..." srcset="" width="150px"></a> --}}
                   <a href="{{ route('brands') }}" class="btn btn-block btn-danger btn-sm setWebSiteBtnStyle d-none d-lg-block" aria-label="">See All Brands &nbsp;<i class="fa fa-caret-right"></i></a>
                   <a href="{{ route('brands') }}" class="d-lg-none text-dark text-decoration-none">See All</a>


               </div>
           </div>

            <div class="row mt-4 mb-4" id="homeManufacturerList">
                <div class="text-center">
                    Loading...
                </div>

            </div>
            <div class="row">
               <div class="col-md-12">
                   {!! $setting->home_description !!}
               </div>
           </div>
        </div>
    </div>

    @section('scripts')
    <script src="{{ asset('js/app.min.js?v='.date('YmdHis')) }}" type="text/javascript"></script>
@endsection
<script >


    $( document ).ready(function() {
        $(".carousel-control-next-icon").trigger('click');

        allHomeBrand();
        $('.mySwiper').show();
        
        $('.mySwiper').slick({
            slidesToShow: 6,
            slidesToScroll: 1,
            autoplay: false,
            autoplaySpeed: 0,
           // speed: 3500,
           // centerMode:true,
            pauseOnHover: true,
            cssEase: 'linear',
            prevArrow:"<button type='button' aria-label='Slide Prev' class='slick-prev'></button>",
            nextArrow:"<button type='button' aria-label='Slide Next' class='slick-next'></button>"
          });

        $('.slick-prev, .slick-next').css({
            'height': '200px',
            'width': '35px',

        });
         $('.slick-next').css({
            'right': '-48px',
             'border-radius': '0px 10px 10px 0px'
        });
        $('.slick-prev').css({
            'left': '-48px',
             'border-radius': '10px 0px 0px 10px'
        });
    });

</script>
<!-- Criteo Homepage Tag -->
<script>
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
    { event: "setAccount", account: 15727 },
    { event: "setEmail", email: "{{ (auth()->check()) ? Auth::user()->emailaddress : '' }}" },
    { event: "setSiteType", type: deviceType},
    { event: "setZipcode", zipcode: "{{ (auth()->check()) ? Auth::user()->postalcode : '' }}" },
    { event: "viewHome" }
);
</script>
<!-- END Criteo Homepage Tag -->

@endsection