@extends('frontend.app')
@section('content')

<style>

    @media only screen and (min-width: 768px) {
        .row>[class*=col] {
            padding-left: 5px !important;
            padding-right: 5px !important;
        }
    }
    
    @media only screen and (max-width: 767px) {
     .row>[class*=col] {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.view_all a {
    margin-right: 10% !important;
}

.view_left a > h4 {
    margin-top: 3px !important;
}

    }

</style>

<!-- Start Categorie Area  -->
<div class="category-mobileview axil-categorie-area bg-color-white">
    <div class="container-fluid">
        <div class="page-card card-channel" data-module-id="channels" data-spm="icons" style="">
          <ul class="card-content channel-content">
              <!--<li class="channel-item">-->
              <!--    <a href="{{ route('front.categories')}}" class="channel-redirect" data-spm="1">-->
              <!--        <div class="channel-icon">-->
              <!--            <div class="img-wrap">-->
              <!--                <img src="{{asset('images/category.png')}}" alt="Mart" />-->
              <!--            </div>-->
              <!--        </div>-->
              <!--        <div class="channel-name">-->
              <!--            <div class="text-wrap text-top">Categories</div>-->
              <!--        </div>-->
              <!--    </a>-->
              <!--</li>-->
            <div class="d-flex justify-content-between col-12 category-slider">
            	@foreach($cats as $cat)

              <li class="channel-item">
                  <a href="{{ route('front.subCategories1',[$cat->url])}}">
                      <div class="channel-icon">
                          <div class="img-wrap">
                              <img src="{{ getImage('categories', $cat->image) }}" alt="{{ $cat->name}}" />
                          </div>
                      </div>
                      <div class="channel-name">
                          <div class="text-wrap text-top">{{ $cat->name}}</div>
                      </div>
                  </a>
              </li>
            @endforeach
            </div>

             
          </ul>
      </div>
    </div>
</div>
<!-- End Categorie Area  -->  

<div class="desktop home-menu">
    <div class="container-fluid-fluid">
        <div class="header-navbar">
            <div class="header-main-nav" style="box-shadow: 2px 5px 7px 0px #808080a6; margin-bottom: 30px;">
                <!-- Start Mainmanu Nav -->
                <nav class="mainmenu-nav pe-5">
                 
                    <ul class="mainmenu slick-mainmenu ">                      
                      
                        @foreach($cats as $cat)
                        <li class="{{ $cat->subcats->count() >0? 'menu-item-has-children':'' }}">
                            <div class="border border-muted cat-image">
                            <a href="{{ route('front.subCategories1',[$cat->url])}}">
                                <img class="img-fluid" src="{{ getImage('categories', $cat->image) }}" alt="{{ $cat->name}}">
                            </a>
                            </div>
                            <a href="{{ route('front.subCategories1',[$cat->url])}}">{{ $cat->name}}</a>
                            @if($cat->subcats->count())
                            <ul class="axil-submenu">
                                @foreach($cat->subcats as $sub)
                                <li><a href="{{ route('front.subsubCategories',[$sub->url])}}">{{ $sub->name}}</a></li>
                                @endforeach
                            </ul>
                            @endif
                        </li>
                        @endforeach                  
                       
                    </ul>
                </nav>
                <!-- End Mainmanu Nav -->
            </div>
        </div>
    </div>
</div>
<!-- End Mainmenu Area -->
        
<main class="main-wrapper"> 

<div class="desktop-slide slider axil-main-slider-area main-slider-style-2">
    <div class="container-fluid" style="margin-bottom: 15px;">
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach($sliders as $key=>$s)
                <div class="carousel-item  {{ $key==0 ?'active':''}}">
                  	<a href="{{$s->link}}">
                    	<img src="{{ getImage('sliders', $s->image) }}" class="d-block w-100" alt="..." />
                  	</a>
                </div>
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</div>
<!-- Start Mobile Slider Area -->
<div class="mobile-slide slider axil-main-slider-area main-slider-style-2" style="padding-top: 18px;">
    <div class="container-fluid">
        <div id="McarouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach($sliders as $key=>$s)
                <div class="carousel-item  {{ $key==0 ?'active':''}}">
                  	<a href="{{$s->link}}">
                  		<img src="{{ getImage('sliders', $s->mobile_image) }}" style="display:none" class="d-block w-100" alt="..." />
                    </a>
                </div>
                @endforeach
            </div>            
        </div>
    </div>
</div>
<!-- End Slider Area -->

@foreach ($homeProducts as $categoryId => $products)
<div class="container-fluid" style="margin-bottom: 20px;">
<div class="bg-gradient container-fluid" style="background: #00276C !important;padding: 10px 1px;">
    <div class="col-12 product-header">
        <div class="section_title text-light">
             @if(!empty($products->first()->category->id))
            <div class="row">
                <div class="col-md-6 col-6 view_left">
                    <a href="{{ route('front.subCategories1',[$products->first()->category->url])}}" style="color: #218A41;"> 
                        <h4 class="p-1 m-0 prodCatcus" style="text-align:left;color: #ffffff;padding-left: 15px !important;">
                            <span style="width: auto;">{{ $products->first()->category->name }}</span>
                        </h4> 
                    </a>
                </div>
                <div class="col-md-6 col-6 view_all">
                    <a href="{{ route('front.subCategories1',[$products->first()->category->url])}}" style="    color: #FFC610;
    float: right;
    padding: inherit;
    background: #F39305;
    margin-right: 3%;
    padding: 5px 20px;
    color: #ffffff;
    border-radius: 5px;"> 
                        View All
                    </a>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
</div>
<div class="container-fluid" style="margin-bottom: 20px;">
<div class="slick-single-layout">
    <div class="row row--15">
        @foreach($products as $product)
        
        <div class="col-lg-2 col-md-3 col-6 mb--30">
            @include('frontend.products.partials.product_section')
        </div>
        @endforeach
    </div>
</div>
</div>
@endforeach


@if(count($brands))
<!-- Start Categorie Area  -->
<div class="brand bg-color-white" style="margin-top: -15px;">
    <div class="container-fluid">
      <h2 class="title">Popular Brand</h2>        
        
        <div class="row pt-5">
            @foreach($brands as $item)
            <div class="col-6 col-sm-4 col-lg-2">
                <a title="{{$item->name}}" style="transition: all 0.5s ease-in-out;box-shadow: 0 0 12px rgb(0 0 0 / 42%);" href="{{ route('front.products.index')}}?brand_id={{ $item->id}}" class="cat-block">
                    <figure>
                        <span>
                            <img style="padding: 10px;" src="{{ getImage('types', $item->image)}}" />
                        </span>
                    </figure>
                </a>
            </div>
            @endforeach
            <!-- End .col-sm-4 col-lg-2 -->
        </div>
    </div>
</div>
<!-- End Categorie Area  -->
@endif

</main>

@endsection

@push('js')

<script type="text/javascript">
    $(document).ready(function(){
        getTrending();
        getHotDeal();
        getRecommended();

        function getTrending(){
            let url='{{ route("front.trendingProduct")}}';
            $.ajax({
                url: url,
                method: 'GET',
                data:{},
                dataType :"JSON",
                success: function (res) {

                    if (res.success) {
                        $('div#trending_data').html(res.html);
                    }
                   
                }
            });
        }

        function getHotDeal(){
            let url='{{ route("front.hotdealProduct")}}';
            $.ajax({
                url: url,
                method: 'GET',
                data:{},
                dataType :"JSON",
                success: function (res) {

                    if (res.success) {
                        $('div#hotdeal_data').html(res.html);
                    }
                   
                }
            });
        }

        function getRecommended(){
            let url='{{ route("front.recommendedProduct")}}';
            $.ajax({
                url: url,
                method: 'GET',
                data:{},
                dataType :"JSON",
                success: function (res) {

                    if (res.success) {
                        $('div#recommended_data').html(res.html);
                    }
                   
                }
            });
        }


    });
</script>
@endpush